CSC2010 Fall 12 Notes on Using HTML to Construct Web Pages

CSC2010 Fall 12 Notes On Using HTML To Construct Web Pages

Naming Files

All html documents have a filename extension of .html or .htm Example: ThePage.html

The browser looks for .html files when it is asked to display a file. Files other then .html files will display as text files ( .txt ) or ??

If you have html tags (marks) in your file and you gave it a .txt extension, the file will be displayed as straight ASCII text.

On/Off:

Some tags stand alone. Example: <br> the break tag, which places the text that

follows on a new line

Other tags create a set of characteristics for displaying the text (a state of the text)

until the tag is turned off. Turning off such tags and canceling the state they

created is accomplished by repeating the tag but this time with its name preceded

by / .

Example:<b> displays the text that follows in bold

<b>this is in bold</b> but not this

BE SURE to have matching on/off tags. If you turned the same tag on two (or more) times in succession and you turned it off only once - in this case, the off matches the second on but the first one is still on!

Basic File Structure

1.Start each file with a start-html tag to tell the browser that there are html tags in the document:

<html>

2.Create the heading section with a head tag:

<head>

3.Put a title for the page in the heading with a title tag. This tag is turned on and off.

The value between the on and off tags is what appears in the title bar at the top of

the browser window above the icon bar:

<title>My page</title>

4.ALWAYS document what you write with comments. Comments will not appear on

the displayed page. They are there to help other people who may be modifying

your page (as well as yourself later on after you forgot all the details behind the

page) to understand what is going on. Keep slang out.

A comment in html must begin <! .

Any tag whose first character is ! is treated as a comment:

<! this is a comment

5.End the heading section:

</head>

6.Put in a few returns to make a paragraph-like break that makes it easier for a human

to read your html (the browser doesn’t need this – people do). Then start the

body section of the page. Then start the body section. The body is where the

contects of the page go.

<body>

7.Write your page, using tags as desired.

8.At the end of the page, turn the body tag off by typing the end-body tag:

</body>

9.Type the end-html tag:

</html>

Example:

<html>

<head>

<title>My Page</title>

</head>

<body>

<h2>Isn’t this great!</h2> <! hx is a headline tag, where x is 1…6;

<! display (bold, size, etc.) is browser-dependent

<p> <! this is a paragraph tag to get a blank line before the text that follows

This is a sample page. It shows the overall basic structure plus a few<br>tags that

are commonly used.

<p>

Do you know the movie where the headline comes from?

</body>

</html>

Notes on Tag

break tag<br>

tells the browser to display the text that follows it on a new line

switch:<br clear=left/right>

Paragraph Tag<p>

tells the browser to display the text that follows it on a new line and to add an extra blank

line before it

switch:<p align=right

default is align=left

Attribute Tags<b/i/tt>

<b> is bold on; </b> is off

<i> is italics on; </i> is off

<tt> is teletype (typewriter) font (non-proportional font) on; </tt> off

Headline Tags <h1-6>

six levels, some large, some bold; display depends on browser installation

switch:<h1 align=right>

default is align=left

Font Tag<font size=+x/-x color=”xxx”>

display the texy fopllowing this tag in the specified size and color

switches:<font size=+x/-x> size is described to the browser relative to the current size;

+1 says to make the font bigger; -1 says to make the font

smaller

<font color=“xxx”>xxx is a name or a hexadecimal code for a color

“ ” are mandatory

Block-Quote Tag<blockquote>

indents a portion of the page

</blockquote> is off

example:

Click <b<i>here</i</b> to get a secret decoder ring.

Little Orphan Annie needs help! You can help by sending in 100

Ovaltene lids to get your secret decoder ring. She will be so happy to know

that you want to help!

</blockquote>

Lists

Unordered Lists

1.type the unordered-list tag <ul>

2. on the next line type a list-item tag <li> followed by the first list item

3. on the next line type a list-item tag <li> followed by the second list item

etc.

4. on the line after the last item type </ul>

switches:<ul type=x> x specifies the type of bullet for the entire list;

x = disk, circle, square

<li type=x> x specifies the type of bullet for that list item only;

default is disc

Ordered Lists

1. type the ordered-list tag <ol>

2. on the next line type a list-item tag <li> followed by the first list item

3. on the next line type a list-item tag <li> followed by the seconf list item

etc.

4. on the line after the last item type </ol>

switches:a)<ol type=x> x specifies the type of number/letter for the entire

list;

x = I (for Roman numerals)

i (for small Roman numerals)

A (for alphabetical list)

a (for lower case letters)

1 (for Arabic numerals)

<li type=x> x same as above

b)<ol start=x>x specifies the number at which to start numbering

items

e.g., <ol start=5> starts the first item at 5.

Definition Lists

produces displays like:

Coyote

a relative of the dog with a complex social structure

Here the term to be defined is placed first followed by its definition indented on the next line(s);

1. type the definition-list tag <dl>

2. on the next line type a definition-term tag <dt>

3. type the first term

4. on the next line type a definition-description tag <dd> and then type the term’s

definition

5. at the end of the list type </dl>

Nested Lists

you can combine lists within lists of different kinds by turning inside lists on and off

<li>Coyotes

<li>Eastern

<li>Western

</ul>

<li>Lions

<li>Elephants

<li>Asian

<li>African

</ul>

</ol>

Creating Links

A link can be created to:

a place within the current file

another file on your web server

any file on a WWW server

a file you want people to download to their computer

an e-mail form that sends e-mail to a specified address

a file on a gopher server

a file on a WAIS server (Wide Area Internet Search)

a file on a Usenet newsgroup

a Telnet connect to a server

Files and Directories on the Web Server

the server will be a machine running the UNIX operating system

file directory notation uses slashes and dots

slashes

/myfile

tells the browser to look for the file whose filename is myfile in the

root directory

/inhere/myfile

slashes also are used to separate parent directories from child directories;

this notation tell the browser:

start at the root (the first /)

at the root, go to the child directory inhere (inhere is a child directory of

the root directory, /)

at inhere, find the file with the name myfile

dots

. .thedot-dot symbol says to up one directory level in the directory tree

example:../inhere/myfile tells the browser to backup one directory level

relative to the current directory, find the child directory of that

directory called inhere, and find the file named myfile in inhere

how the browser reads filenames

the browser reads a filename from left to right using the process:

1.the browser sees the filename and looks for it in the current directory; if it is

not there, on to step 2

2.does the file directory notation begin with a slash? if so, the browser jumps

to the root and begins a downward search for each directory in the name

separated by slashes and reading left to right in turn; if it does not begin

with a slash, on to step 3

3.if it sees dot-dot, the browser backs up one directory level in the directory tree

and searches for the filename; if not there, on to step 4

4.if it sees ../ then the browser begins a downward search for each directory in

the name separated by slashes and reading left to right in turn; if it does

not begin with a slash, on to step 5

5.if the filename hasn’t been found, a “File Not Found” error message is

displayed and the executing program halts

Anchor Tag<a href=“URL”>

makes either a portion of text or graphic become a link to a URL on which people can

click;

must be turned on and off; in the ASCII html file that we build, the text or grtaphic that is

linked appears between the on and off tags;

the URL goes into the anchor tag as the value of the switch href

Making a Web Link

1.put the cursor in front of the text or graphic that will act as the link

2.type the anchor tag with the URL that you want to link to:

<a href=”URL”>text

example: Click <a href=“

size=+1>here</font</i</b</a> for treasure

Making an E-Mail Link

1.put the cursor in front of the text or graphic that will act as the link

2.type the anchor tag with the e-mail address you want to mail sent to after mailto:

example:

Click on <a href=“mailto:”<i></i</a>

to e-mail me

Making an FTP Download Link

1.put the cursor in front of the text or graphic that will act as the link

2.type the anchor tag with the ftp server name and path after ftp://

example:

Click on <a href=ftp://ftp.projectcool.com/pub/demofile.txt<i>FTP</i</a> to

download a demo

Image Tag <img>

put .tif .gif .jpeg files into the page

switches:src=”path” path is the location of image

align=right/leftno center option

widthwidth of the image in pixels

heightheight of the image in pixels

borderthe width of the border around the image in pixels

when the image is an anchor for a link

altalternate text when browser can’t display image

example:

Break Tag with an Image <br clear=left/right/all>

you may want text to follow below the image rather than running along outside

clear tells the browser to look to the leftmost/rightmost side of the page and drop the text

below the item there

switch: clear=left tells the browser to look to the leftmost side of page and drop the

text below the item there

clear=right tells the browser to look to the rightmost side of page and drop the

text below the item there

clear =all tells the browser to look over the entire page and drop the text

below the lowest item on either side

Backgrounds and Colors <body>

switches:background, the path to the image

bgcolor, set a color for the background of the page given as a name or as a

hex value

text, set a color for the text

link, set a color for the linked text

vlink, set a color for the linked text your visitor has already clicked on

example:

Summary of Basic HTML Commands and Color Codes

Some Table Tags

<table>start a table

switches:border: set a border around each cell; 0 = no border, 1 = a

border

width:set table width as: fixed value or % of browser

window

cellspacing:puts exta white spaces between cells

cellpadding: puts extra white space inside cells

bgcolor: sets color for cells

</table> end a table

<tr> table row; starts new row

switches:align align contents of cells in a row horizontally

valign align contents vertically

bgcolor set color for cells in row

</tr> ends a row

<td> table data; starts a column with a row

switches:align contents of a cell horizontally

valign

bgcolor

width for a cell

nowrap disdplay w/o wrapping

colspan cell straddles across specified number of cols

rowspan cell straddles across specified number of row

</td> ends table data

Example:

<! This is an example of ordered & unordered lists, images, tables >

<! A good on-line reference:

<html>

<head>

</head>

<body text="#ff0000" bgcolor="#f0e68c"> <! # signals a hex value –

it is safer to include it>

Click <b<i<font size=+1<a href="

</a</font</i</b>to get your secret decoder ring!

<p<p align=right>send email to <b<i<font size=-1>

</a</font</i</b>

<p<p align=right>click <i>

<a href="ftp://ftp.projectcool.com/pub/demofile.txt">download

</a</i>for demo file

<p>The list

<li>SubItem11</li>

<li>SubItem12</li>

</ol>

</ul>

<p>

<tr>

<td align=center colspan=3>A Table</td>

<tr>

</tr>

<tr>

<td </td>

</tr>

</tr>

<tr>

<td </td>

</tr>

</table>

<p>

<caption>Another Table</caption>

<tr>

<center<img src="image2.gif" alt="2 bad" height=100 width=75</center>

<! ^----- note the block tag *center* works like blockquote ----- ^>

<! (had I surrounded ---^ with the less-than and greater-

than symbols an unexpected display would have resulted –

in what?)>

</td>

</tr>

</tr>

<tr>

</tr>

</table>

<! the height and width are in “units” which is (probably) pixels >

</body>

</html>

Example: Linking To Other HTML Files<! This is an example of ordered & unordered lists, images, tables <! A good on-line reference: <! # signals a hex value - it is safer to include it>

<! This is the file named: index.html

<! The file with the “main” page is called index.html >

<! *If* the machine has a web server, then --

the directory structure is:

store index.html in the directory your_id/public_html

store files linked to within index.html in this directory also

the URL is:

name_of_machine /~your_id

example:

<! This is an example of: linking, lists, images, tables >

<! A good on-line reference: >

<html>

<head>

</head>

<body text="#ff0000" bgcolor="#f0e68c"> <! # signals a hex value -

it is safer to include it>

Click <b<i<font size=+1<a href="

</a</font</i</b>to get your secret decoder ring!

<p<p align=right>send email to <b<i<font size=-1>

</a</font</i</b>

<p<p align=right>click <i>

<a href="ftp://ftp.projectcool.com/pub/demofile.txt">download

</a</i>for demo file

<p>The list

<li>SubItem11 (<b<i<a href="sublist11.html">sublist</a</i</b>)</li>

<li>SubItem12 (<b<i<a href="table12.html">table</a</i</b>)</li>

</ol> <! ^--- a relative link to a file >

</ul>

<p>

<tr>

<td align=center colspan=3>A Table</td>

</tr>

<tr>

</tr>

<tr>

<td </td>

</tr>

</tr>

<tr>

<td </td>

</tr>

</table>

<p>

<caption>Another Table</caption>

<tr>

<center<img src="Image2.gif" alt="2 bad" height=100 width=75</center>

<! ^----- note the block tag *center* works like blockquote ----- ^>

<! (had I surrounded ---^ with the less-than and greater-

than symbols an unexpected display would have resulted -

in what?)>

</td>

</tr>

</tr>

<tr>

</tr>

</table>

<! the height and width are in "units" which is (probably) pixels >

</body>

</html>

<! This is the file named: sublist11.html

<! This is a file linked to within index.html >

<html>

<head>

<title>SubItem11 List</title>

</head>

The SubItem11 List

<li>SubItem111</li>

<li>SubItem112 (<b<i<a href="table12.html">table</a</i</b>)</li>

</ol>

</body>

</html>

<! This is the file named: table12.html

<! This is a file linked to within index.html >

<html>

<head>

<title>SubItem12 Table</title>

</head>

<p>