HTML Lesson 1
TBE 540
Farah Fisher
Prerequisites
Before beginning this lesson, the student
must be able to
Access web pages and navigate the web
Use search engines to locate specific
information
Download graphics from web pages
Objectives
After completing this lesson, the student will be
able to
View the source of any web page
Name and explain the uses of basic HTML tags:
<HTML></HTML><HEAD></HEAD><TITLE></TITLE>
<BODY></BODY><B></B><I></I><HR><BR><IMG...>
<P></P><UL></LI></UL>, links (awareness), header sizes
Gather text and graphic information about a topic
Create a simple web page using a word processing
program or a text editor
Display the web page using a browser
Purpose of this Lesson
You will be exposed to a lot of new
information in this lesson.
The actual purpose is to help you begin to
recognize the structure of HTML.
Do not try to memorize the information you
see. You can always refer to an HTML
reference list.
What is HTML?
HTML stands for
HyperText Markup
Language
It is the set of instructions hidden behind
every web page (called the source of the
page)
HTML tags tell the browser (like Internet
Explorer) how to display the page.
For example, <B>HI THERE</B> would
display the words HI THERE in bold.
What is HTML?
HTML tags are contained within < >
The letters inside the < > are the
instructions (like <B> for bold) and may be
upper or lower case.
Tags often come in pairsone to begin a
feature, and another to end it.
In the previous example, <B> means
begin bold here and </B> means end
bold here.
HTML Structure
Each web page has a HEAD and a BODY.
All web pages have required tags like
these:
<HTML> {begin the page}
<HEAD> {some set up instructions
</HEAD> are here}
<BODY> {the main part of the page
</BODY> is here}
</HTML> {end the page}
HTML Structure
The HEAD section often contains tags to
display a page title.
The title is displayed at the top of the
window (not on the page).
Here is an example:
MyWebPage
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
HTML Structure
The BODY section contains all the
instructions for the actual page display.
Inside the body section of a web page you
will find tags that control text, graphics,
lines, links, tables and other special
functions.
Remember that some, but not all, tags
come in pairs.
Text-Related Tags
Text is most often displayed in paragraphs, using
block form (no indentation, blank line between
paragraphs).
The paragraph tags <P> and </P> are used
before and after a paragraph.
<BR> (line break) is like pressing Return/Enter.
The text that follows is displayed on the next line.
NOTE: Just pressing Return/Enter when you are
writing a page in HTML does not guarantee that it
will be displayed on the next line.
Text-Related Tags
Text
is sometimes displayed in BOLD or
ITALICS.
The tag pair <B> and </B> make the text
between display in bold.
The tag pair <I> and </I> make the text
between display in italics.
Examples:
<B>This is bold text.</B> This is bold text.
<I>Here is italics.</I>
Here is italics.
<B><I>Both!</I></B>
Both!
Text-Related Tags
NOTE: Though there is a tag for
underlining (<U> </U>) it is not a good idea
to underline text. It may be confused with a
link, since they are usually underlined.
The <FONT> </FONT> tag pair can be
used to change other aspects of text (e.g.,
color). It will be presented in a later
chapter.
Text-Related Tags
You will often see text displayed in large, bold
type, almost like a newspaper headline.
The header tags are used for this purpose.
The largest header tag is <H1> </H1> (larger
numbers make smaller headers).
An example: <H1>MY PAGE</H1> displays
MY PAGE
<H6>MY PAGE</H6> displays MY PAGE
Text-Related Tags
To center a header, the tag pair <CENTER>
</CENTER> is used.
An example:
<CENTER>
<H1>TRAINS</H1>
</CENTER>
displays
TRAINS
Lines
Many web pages use horizontal lines to
divide the page.
The <HR> tag is used to draw a line.
You can control the size (thickness in
pixels) and width (% of the window).
Examples:
<HR> {one pixel thick, 100% of window}
<HR SIZE=4 WIDTH=50%>
{4 pixels thick, 50% of window}
IMAGE Tags
The <IMG> tag is used to display graphics
on web pages.
The main requirement for the IMG tag is
the file name (source) of the image.
NOTE: Web page images DO NOT
become part of a web page file. They are
separate files and must be located in the
same folder as the web page file unless
otherwise noted.
IMAGE Tags
An example of an IMG tag that displays a
graphic called [Link]
<IMG SRC=[Link]>
In the example above, the name (source or
SRC) of the picture file is [Link] (stored in the
same folder as the web page file).
NOTE: The image files name must be exactly as
stored (upper/lower case, etc.)
.JPG and .GIF indicate types of images
appropriate for web pages. Web graphics will be
discussed in more detail in a later lesson.
Lists
Many web pages contain lists, much like
you see in this PowerPoint presentation.
Lists can be unordered (using bullets like
this list) or ordered (with numbers or
letters).
<UL> </UL> indicates an unordered
(bulleted) list.
<OL> </OL> indicates an ordered list.
<LI> </LI> is used for each list item.
List Examples
These tags
<UL>
<LI>Dogs</LI>
<LI>Cats</LI>
<LI>Lizards</LI>
</UL>
Produce this list
Dogs
Cats
Lizards
List Examples
These tags
<OL>
<LI>Dogs</LI>
<LI>Cats</LI>
<LI>Lizards</LI>
</OL>
Produce this list
1. Dogs
2. Cats
3. Lizards
List Examples
These tags
<OL TYPE=A>
<LI>Dogs</LI>
<LI>Cats</LI>
<LI>Lizards</LI>
</OL>
Produce this list
A. Dogs
B. Cats
C. Lizards
A Word about Links
You will find out much more about links in a
later lesson, but for now, I want you to be
able to recognize links.
All links use the tag that begins <A HREF=
The A stands for anchor (think of an anchor
chain..its made of linksright?).
The HREF part will be the name of a web
page or a web address.
A Word about Links
Here are a couple of examples, you will see
the actual message to click on between the
A tags.
This link shows the words Go Back and
sends the user to a page called
[Link] that is stored in the same
folder as the current page.
<A HREF=[Link]>Go Back</A>
A Word about Links
This link shows the words
More Info and
sends the user to the CSUDH College of
Education home page.
<A HREF=[Link]
Info</A>
As you complete the activities on the last
slide, look for link tags (as well as other
tags).
Self Check - HTML Lesson 1
Which of the following is NOT a required
tag?
<HTML>
</BODY>
<H1>
<HEAD>
Self Check - HTML Lesson 1
Which of the following is NOT a required
tag?
<HTML>
</BODY>
<H1>
{headings/headlines are common, but not required}
<HEAD>
Self Check - HTML Lesson 1
Which of the tags below will show the words
MY PAGE on the page in very large type?
<TITLE>MY PAGE</TITLE>
<H1>MY PAGE</H1>
<H7>MY PAGE</H7>
<FONT SIZE=2>MY PAGE</FONT>
Self Check - HTML Lesson 1
Which of the tags below will show the words
MY PAGE on the page in very large type?
<TITLE>MY PAGE</TITLE>
<H1>MY PAGE</H1> {H1 shows the largest headline}
<H7>MY PAGE</H7>
<FONT SIZE=2>MY PAGE</FONT>
Self Check - HTML Lesson 1
Which set of tags below would display this
text in italics and bold: CLICK HERE
<I><B>CLICK HERE</I></B>
<I><B>CLICK HERE</B></I>
<B>CLICK HERE</B>
<H1>CLICK HERE</H1>
Self Check - HTML Lesson 1
Which set of tags below would display this
text in italics and bold: CLICK HERE
<I><B>CLICK HERE</I></B>
<I><B>CLICK HERE</B></I> *
<B>CLICK HERE</B>
<H1>CLICK HERE</H1>
*Explanation: Tags must be nested - the first
to be turned on must be the last to be turned
off.
Self Check - HTML Lesson 1
To put a blank line after typing
<BR>
<P> and </P>
Just press Return/Enter
Either <BR> or <P></P> will work.
Self Check - HTML Lesson 1
To put a blank line after typing
<BR>
<P> and </P>
Just press Return/Enter
Either <BR> or <P></P> will work.
Self Check - HTML Lesson 1
Which the the following makes a
numbered list (1., 2., etc.)?
<OL></OL>
<LI></LI>
<UL></UL>
<NL></NL>
Self Check - HTML Lesson 1
Which the the following makes a
numbered list (1., 2., etc.)?
<OL></OL>
{a numbered list is an ordered list}
<LI></LI>
<UL></UL>
<NL></NL>
Self Check - HTML Lesson 1
To draw a line across the web page, use
<HR>
<LINE>
<LI></LI>
Must use a graphic.
Self Check - HTML Lesson 1
To draw a line across the web page, use
<HR>
{a line is a horizontal rule}
<LINE>
<LI></LI>
Must use a graphic.
Self Check - HTML Lesson 1
Which of the following displays the words
CLICK ME as a link to [Link]?
<LI [Link]>CLICK ME</LI>
<LI CLICK ME>[Link]
<A HREF=[Link]>CLICK ME</A>
<LINKTO [Link]>CLICK ME
Self Check - HTML Lesson 1
Which of the following displays the words
CLICK ME as a link to [Link]?
<LI [Link]>CLICK ME</LI>
<LI CLICK ME>[Link]
<A HREF=[Link]>CLICK ME</A>
<LINKTO [Link]>CLICK ME
Activities
Check out the handout at
[Link]
htm (as a review of this lesson).
Try the hands-on exercise at
[Link]
htm
