COMP111 HTML

HTML Tutorial

The following presentation explains some basics of HTML so that you can understand it. This is an overview rather than an in-depth HTML reference.

Netscape "Composer" and various word processors (such as Microsoft Word) can convert formatted text documents to HTML, so normally you don't need to work directly in HTML
But you can modify a Web page using HTML commands that let you refine the formatting more precisely than you can with Composer.

HTML

stands for Hypertext Markup Language
is the programming language used in Web pages
files are normal ASCII text

Page Source

View —> Page Source will show you the HTML code for the current page
Netscape uses special colors to show:

HTML instructions — >purple
HTML instruction attributes — black bold
Data assigned to attributes — blue
Web page text in normal black letters
Comments in italics

Example:

HTML Tags

tell the Web browser which parts of the file are text or images, and which are programming code
begin with a "<" and end with ">"
usually come in pairs

<TITLE>Title Between Title Tags</TITLE>
The ending tag includes a slash "/" after the first bracket

are easier to see if they are in ALL CAPS

Blank Web Page

<HTML>

<HEAD>
</HEAD>

<BODY>
</BODY>

</HTML>

begin and end a Web document to tell the browser to read it as an HTML document

<HTML>Document Between HTML Tags</HTML>

begin and end each of the two parts of the Web document

<HEAD>Head of Document Between HTML Tags</HEAD>
<BODY>Body of Document Between HTML Tags</BODY>

the <BR> tag is a single tag for a line break

The Head Section

If a normal ASCII editor (such as Wordpad) created the Web page, the Head section usually just contains the title of the page (example: "Vina's Web Page")
If a word processor created the Web page, the Head section also contains a line showing the name of the word processor

The Head Section

<HTML>

<HEAD>
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>Vina's Web Page </TITLE>
</HEAD>

<BODY>
</BODY>

</HTML>

The Body Section

Everything else on the page goes in the body
For example, let's add a title to the page

NOTE: there are two kinds of titles:

the one in the Head appears in the title bar
the one in the Body appears at the beginning of the page

Let's center the title within the <P> and </P> tags, which set it off as a paragraph

The Body Section

<HTML>

<HEAD>
<TITLE>Vina's Web Page </TITLE>
</HEAD>

<BODY>
<P ALIGN="CENTER">Vina's Home Page </P>
</BODY>

</HTML>

Colors and Fonts

Let's change the background color of the Web page to black <BGCOLOR="black">
Let's change the font color to white <TEXT="white">
And let's change the font <font face="Arial"></font> and make the title bold <B></B> and larger <font size="8">

NOTE: we can change both the font face and size in the same tag

Colors and Fonts

<...>

<BODY BGCOLOR="black" TEXT="white">
<P ALIGN="CENTER"><B><font size="8" face="Arial"> Vina's Home Page</font></B> </P>
</BODY>

<...>

Headings and Paragraphs

Let's put a paragraph on the Web page to introduce Vina — <P> and </P>
Let's add headings <H1> and </H1> and more text to the page

Headings and Paragraphs

<BODY ...>

<H1>My Bio</H1>
<P>Hi, I'm Vina. ...</P>

<H1>Favorite Activities</H1>
<P>My favorite activities are ...</P>
</BODY>

Images

Let's center Vina's photo at the top of the page!

Images

<BODY ...>

<P ALIGN="CENTER"><B><font size="8" face="Arial">Vina's Home Page</font></B></P>

<CENTER><IMG SRC="vina1.jpg"></CENTER>

<...>

We can also copy a rainbow from the Web to Vina's Bio page

Move the mouse over the image on the Web page
Click the right mouse button
Select "Save Image As"
Save the rainbow image in the same directory with the Home Page

Then just link to the image and control the height and width.

Rainbow

<IMG SRC="rainbow.gif" HEIGHT=20 WIDTH=100%>

Sounds

Let's add a sound for Vina's self-introduction

Use a hyperlink similar to the one for the Bio but this time link to a sound file, such as a .wav file
The .wav file extension tells the Web browser that it is a soundfile and it will use a sound player to play it

Sounds

<BODY ...>

<a href="roar.wav"><strong><font size=+1>Self-Introduction</strong></font></A><br>

<...>

Page Layout

Now that we have basic material, we need to arrange the layout of the page

Use a comment  to hide text that you want to take off the page, if you don't want to delete it

This is useful if you want to remember what you started with as you try new variations — especially if you make a mistake!

Let's comment out the title on Vina's page, and replace it with WordArt

Comments

<...>

<...>

Make diagonal title a background photo
Link the .gif file to the Web page in the <BODY> tag

Background

<...>

<BODY BACKGROUND="vinatitle.gif" BGCOLOR="black" TEXT="white" link="lime" vlink="red" alink="yellow">

<...>

Now the photo overlaps the WordArt — let's delete the <center> and </center> codes to move Vina's photo to the left margin

Move Photo

<...>

~~<CENTER>~~<IMG SRC="vina1.jpg">~~<CENTER>~~

<...>

The photo is also too large — let's rescale it to fit better in the space

Rescale Photo

<...>

<IMG SRC="vina1.jpg" HEIGHT=185 WIDTH=175>

<...>

Let's add a horizontal rule at the bottom of the page

Horizontal Rule

<...>

<br><hr>

<...>

Tables

Let's add a table to show Vina's weekly activities.
Tables begin with the <TABLE> tag and end with the </TABLE> tag.

If you want a border, begin with the <TABLE BORDER> tag.

Rows begin with the <TR> tag and end with the </TR> tag.
Data cells begin with the <TD> tag and end with the </TD> tag.

Tables

<TABLE BORDER>
<TR>
<TD>
Sunday
</TD>
<TD>
<...>
</TD>
</TR>
</TABLE>

Table header cells begin with the <TH> tag and end with the </TH> tag.
To put a header (or data) cell across several other cells, use COLSPAN

Example: <TH COLSPAN=7>

Header Cells

<TABLE BORDER>
<TR>
<TH COLSPAN=7>
<CENTER>My Weekly Schedule</CENTER>
</TH>
</TR>
<TR>
<TD>
<...>
</TD>
</TR>
</TABLE>

We can use a Table to put a picture frame around Vina's photo
Set the border size to 2 and put in one row <TR> and one data cell </TD>.
Then just put the link to the image in the cell.

Picture Frame

<TABLE BORDER=2>
<TR>
<TD>
<IMG SRC="vina1.jpg" HEIGHT=185 WIDTH=175>
</TD>
</TR>
</TABLE>

Finishing Touches

As finishing touches, let's:

change some of the font colors
add a few more photos
add a few more animated gifs
add a subpage for Vina's best friend
use a table to align the links on the right

using a width of 100% will stretch the table to fit a screen of any size

Vina's Finished Page

<TABLE WIDTH=100%>
<TR>
<TD align=right>
<IMG SRC="fire.gif">
</TD>
</TR>
<...>
</TABLE>

HTML Tutorial

HTML

Page Source

HTML Tags

The Head Section

The Body Section

Colors and Fonts

Headings and Paragraphs

Links

Images

Sounds

Page Layout

Tables

Finishing Touches