htmllesson1
advertisement
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 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:
My Web Page
<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 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”>
<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>
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 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
Self Check - HTML Lesson 1
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
