Download Creating a Web Page

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
Document related concepts
no text concepts found
Transcript 
Creating a Web Page
HyperText Markup Language
HTML Documents
 Created using any text editor
 Notepad
 Vi, Pico, or Emacs
 If using word-processor, save as “text only
with line breaks”
 WYSIWYG
 Front Page
 HomeSite
http://www.allaire.com
Tags Explained
 HTML tags mark elements of a file
 i.e. titles, paragraphs, tables, lists
 tags are usually paired to start and end
the tag instruction
 <title> My Home Page </title>
 HTML is not case sensitive
Minimal HTML Document
An HTML document is composed of a single
element:
<html> . . . </html>
that is, in turn, composed of head and body
elements:
<head> . . . </head>
and
<body> . . . </body>
Minimal HTML Document
 Elements usually placed in the head element:
<title> . . . </title>
Specify a document title which will appear in the blue
title bar of your page
 Elements usually placed in the body element:
text and formatting tags, hyperlinks, images
Example:
<html>
<head>
<title> A Simple Example </title>
</head>
<body>
<p> Welcome to the world of HTML! </p>
</body>
</html>
Other Formatting tags
 Headings
<h1> </h1>
 h1 largest - h6 smallest





Paragraphs <p> </p>
Alignment <center> </center>
Text Styles <b> </b>
<i> </i>
Forced Line Breaks
<br>
Horizontal Rules <hr>
Attributes
 Some tags may include attributes
 Alignment (use with paragraphs, images, etc.)
<p alignment = right>
 Background, text, and link colors
<body bgcolor="#000000" text="#FFFFFF" link="#9690CC">
This creates a window with a black background (bgcolor),
white text (text), and silvery hyperlinks (link).
http://www.hidaho.com/colorcenter/cc.html
 Graphics Background
<body background = "bluepaper.gif">
Inline Images
 To include graphics on a page, use the img src tag.
 Use image files with .gif or .jpg extensions
 Example:
<img src = “dog.jpg”>
 URL of image file can be substituted for name of file
 Size the image with height and width atributes
<img src=“SelfPortrait.gif” height=100 width=65>
Adding Links
 start with:
<a href = “file name or URL”>
 follow with the text that will serve as the
hypertext link in the document
 end with the ending anchor tag </a>
 Example:
<a href = “resume.doc”>My Resume</a>
Additional Information
 A Beginner’s Guide to HTML
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
 HTML Quick Reference
http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml
Web Page Homework
 Create a Web page with:






title
graphic
link to something
varying type sizes with some bold or italic
background color besides gray or white
horizontal rule
 These are the minimum requirements. You may
add more if you want.
Steps
 create your file in Notepad
 save file as index.html in h:\Personal
 all images and link files should also be in
h:\Personal
 use Explorer or Netscape to view the file
 Choose menu item File, then Open, and
Browse to find your file
 Edit the notepad file and view with the
browser until web page is complete
Design Tips







Use restraint with colors and backgrounds
Avoid big stuff
Don’t use blinking messages
Make reading easy on the eyes
Keep offensive content off your page
Keep it simple
Edit your pages
Related documents