HTML Lesson 1: Introduction to Basic HTML Tags and Structure

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 ME.JPG
<IMG SRC=ME.JPG>
In the example above, the name (source or

SRC) of the picture file is ME.JPG (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
HOME.HTM that is stored in the same
folder as the current page.
<A HREF=HOME.HTM>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=http://www.csudh.edu/coe/>More
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>

Which of the following is NOT a required
tag?
<HTML>
</BODY>
<H1>
{headings/headlines are common, but not required}
<HEAD>

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>

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>

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>

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.

To put a blank line after typing
<BR>
<P> and </P>
Just press Return/Enter
Either <BR> or <P></P> will work.

To put a blank line after typing
<BR>
<P> and </P>
Just press Return/Enter
Either <BR> or <P></P> will work.

Which the the following makes a
numbered list (1., 2., etc.)?

<OL></OL>
<LI></LI>
<UL></UL>
<NL></NL>

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>

To draw a line across the web page, use
<HR>
<LINE>
<LI></LI>
Must use a graphic.

To draw a line across the web page, use
<HR>
{a line is a horizontal rule}
<LINE>
<LI></LI>
Must use a graphic.

Which of the following displays the words
CLICK ME as a link to homepage.htm?
<LI homepage.htm>CLICK ME</LI>

<LI CLICK ME>homepage.htm
<A HREF=homepage.htm>CLICK ME</A>
<LINKTO homepage.htm>CLICK ME

Which of the following displays the words
CLICK ME as a link to homepage.htm?
<LI homepage.htm>CLICK ME</LI>

<LI CLICK ME>homepage.htm
<A HREF=homepage.htm>CLICK ME</A>
<LINKTO homepage.htm>CLICK ME
Activities
Check out the handout at
http://www.csudh.edu/fisher/tbe540/HHO1.
htm (as a review of this lesson).
Try the hands-on exercise at
http://www.csudh.edu/fisher/tbe540/HEX1.
htm

HTML Lesson 1: Introduction to Basic HTML Tags and Structure

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Lesson 1: Introduction to Basic HTML Tags and Structure

Hochgeladen von

Copyright:

Verfügbare Formate

HTML Lesson 1

Access web pages and navigate the web

After completing this lesson, the student will be

Name and explain the uses of basic HTML tags:

Gather text and graphic information about a topic

Create a simple web page using a word processing

Display the web page using a browser

Purpose of this Lesson

information in this lesson.

instructions (like <B> for bold) and may be

<HTML> {begin the page}

display a page title.

instructions for the actual page display.

Text is most often displayed in paragraphs, using

is sometimes displayed in BOLD or

<B>This is bold text.</B> This is bold text.

underlining (<U> </U>) it is not a good idea

You will often see text displayed in large, bold

<H6>MY PAGE</H6> displays MY PAGE

divide the page.

<HR> {one pixel thick, 100% of window}

An example of an IMG tag that displays a

In the example above, the name (source or

you see in this PowerPoint presentation.

Produce this list

Produce this list

Produce this list

A Word about Links

later lesson, but for now, I want you to be

A Word about Links

the actual message to click on between the

A Word about Links

More Info and

As you complete the activities on the last

slide, look for link tags (as well as other

Self Check - HTML Lesson 1

Self Check - HTML Lesson 1

Self Check - HTML Lesson 1

MY PAGE on the page in very large type?

Self Check - HTML Lesson 1

MY PAGE on the page in very large type?

Self Check - HTML Lesson 1

text in italics and bold: CLICK HERE

Self Check - HTML Lesson 1

text in italics and bold: CLICK HERE

*Explanation: Tags must be nested - the first

Self Check - HTML Lesson 1

Self Check - HTML Lesson 1

Self Check - HTML Lesson 1

numbered list (1., 2., etc.)?

Self Check - HTML Lesson 1

numbered list (1., 2., etc.)?

Self Check - HTML Lesson 1

Self Check - HTML Lesson 1

Self Check - HTML Lesson 1

CLICK ME as a link to homepage.htm?

<LI homepage.htm>CLICK ME</LI>

Self Check - HTML Lesson 1

CLICK ME as a link to homepage.htm?

<LI homepage.htm>CLICK ME</LI>

Das könnte Ihnen auch gefallen