html

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

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 pairs…one 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:
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
My Web Page

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 file’s 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”>
•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..it’s
made of links…right?).
• 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>
• <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”}
• <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.

• 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

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

More Related Content

What's hot

Similar to html

More from Arpit Meena

Recently uploaded

html