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 ExamplesThese tags…• <UL>• <LI>Dogs</LI>• <LI>Cats</LI>• <LI>Lizards</LI>• </UL>

Produce this list…• Dogs• Cats• Lizards

List examplesThese tags…•<OL>•<LI>Dogs</LI>•<LI>Cats</LI>•<LI>Lizards</LI>•</OL>

Produce this list…

1.Dogs2.Cats3.Lizards

List ExamplesThese tags…•<OL TYPE=“A”>•a<LI>Dogs</LI>•<LI>Cats</LI>•<LI>Lizards</LI>•</OL>

Produce this list…

A.DogsB.CatsC.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• 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

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

http://www.csudh.edu/fisher/tbe540/HHO1.htm

http://www.csudh.edu/fisher/tbe540/HEX1.htm

html

Internet

Transcript of html