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 Access.

HTML Lesson 1HTML Lesson 1

TBE 540TBE 540

Farah FisherFarah Fisher

PrerequisitesPrerequisites

Before beginning this lesson, the student Before beginning this lesson, the student must be able to…must be able to… Access web pages and navigate the web Access web pages and navigate the web Use search engines to locate specific Use search engines to locate specific

information information Download graphics from web pages Download graphics from web pages

ObjectivesObjectives

After completing this lesson, the student will be After completing this lesson, the student will be able to…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 LessonPurpose of this Lesson

You will be exposed to a lot of new You will be exposed to a lot of new information in this lesson.information in this lesson.

The actual purpose is to help you begin to The actual purpose is to help you begin to recognize the structure of HTML.recognize the structure of HTML.

Do notDo not try to memorize the information you try to memorize the information you see. You can always refer to an HTML see. You can always refer to an HTML reference list.reference list.

What is HTML?What is HTML?

HTML stands for HTML stands for HHyperyperTText ext MMarkup arkup LLanguageanguage

It is the set of instructions hidden behind It is the set of instructions hidden behind every web page (called the every web page (called the sourcesource of the of the page)page)

HTML “tags” tell the browser (like Internet HTML “tags” tell the browser (like Internet Explorer) how to display the page.Explorer) how to display the page.

For example, <B>HI THERE</B> would For example, <B>HI THERE</B> would display the words display the words HI THEREHI THERE in bold. in bold.

What is HTML?What is HTML?

HTML “tags” are contained within < > HTML “tags” are contained within < > The letters inside the < > are the The letters inside the < > are the

instructions (like <B> for bold) and may be instructions (like <B> for bold) and may be upper or lower case.upper or lower case.

Tags often come in pairs…one to begin a Tags often come in pairs…one to begin a feature, and another to end it.feature, and another to end it.

In the previous example, <B> means In the previous example, <B> means “begin bold here” and </B> means “end “begin bold here” and </B> means “end bold here”.bold here”.

HTML StructureHTML Structure

Each web page has a HEAD and a BODY.Each web page has a HEAD and a BODY. All web pages have required tags like All web pages have required tags like

these:these: <HTML> <HTML> {begin the page}{begin the page} <HEAD> <HEAD> {some set up instructions{some set up instructions </HEAD> </HEAD> are here}are here} <BODY> <BODY> {the main part of the page{the main part of the page </BODY> </BODY> is here}is here} </HTML> </HTML> {end the page}{end the page}


The HEAD section often contains tags to The HEAD section often contains tags to display a page title.display a page title.

The title is displayed at the top of the The title is displayed at the top of the window (not on the page).window (not on the page).

Here is an example:Here is an example: <HEAD> <HEAD>

<TITLE>My Web Page</TITLE><TITLE>My Web Page</TITLE>

</HEAD> </HEAD>

My Web Page


The BODY section contains all the The BODY section contains all the instructions for the actual page display.instructions for the actual page display.

Inside the body section of a web page you Inside the body section of a web page you will find tags that control text, graphics, will find tags that control text, graphics, lines, links, tables and other special lines, links, tables and other special functions.functions.

Remember that some, but not all, tags Remember that some, but not all, tags come in pairs.come in pairs.

Text-Related TagsText-Related Tags

Text is most often displayed in paragraphs, using Text is most often displayed in paragraphs, using block form (no indentation, blank line between block form (no indentation, blank line between paragraphs).paragraphs).

The paragraph tags <P> and </P> are used The paragraph tags <P> and </P> are used before and after a paragraph.before and after a paragraph.

<BR> (“line break”) is like pressing Return/Enter. <BR> (“line break”) is like pressing Return/Enter. The text that follows is displayed on the next line.The text that follows is displayed on the next line.

NOTE: Just pressing Return/Enter when you are NOTE: Just pressing Return/Enter when you are writing a page in HTML writing a page in HTML does notdoes not guarantee that it guarantee that it will be displayed on the next line.will be displayed on the next line.


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!


NOTE: Though there is a tag for NOTE: Though there is a tag for underlining (<U> </U>) it is not a good idea underlining (<U> </U>) it is not a good idea to underline text. It may be confused with a to underline text. It may be confused with a link, since they are usually underlined.link, since they are usually underlined.

The <FONT> </FONT> tag pair can be The <FONT> </FONT> tag pair can be used to change other aspects of text (e.g., used to change other aspects of text (e.g., color). It will be presented in a later color). It will be presented in a later chapter.chapter.


You will often see text displayed in large, bold You will often see text displayed in large, bold type, almost like a newspaper headline.type, almost like a newspaper headline.

The “header” tags are used for this purpose.The “header” tags are used for this purpose. The largest “header” tag is <H1> </H1> (larger The largest “header” tag is <H1> </H1> (larger

numbers make smaller headers).numbers make smaller headers).

An example: <H1>MY PAGE</H1> displays An example: <H1>MY PAGE</H1> displays

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


To center a header, the tag pair <CENTER> To center a header, the tag pair <CENTER> </CENTER> is used.</CENTER> is used.

An example:An example:<CENTER><CENTER><H1>TRAINS</H1><H1>TRAINS</H1></CENTER></CENTER>

displays…displays… TRAINSTRAINS

LinesLines

Many web pages use horizontal lines to Many web pages use horizontal lines to divide the page.divide the page.

The <HR> tag is used to draw a line.The <HR> tag is used to draw a line. You can control the size (thickness in You can control the size (thickness in

pixels) and width (% of the window).pixels) and width (% of the window). Examples:Examples:

<HR> <HR> {one pixel thick, 100% of window}{one pixel thick, 100% of window} <HR SIZE=4 WIDTH=50%><HR SIZE=4 WIDTH=50%>

{4 pixels thick, 50% of window}{4 pixels thick, 50% of window}

IMAGE TagsIMAGE Tags

The <IMG> tag is used to display graphics The <IMG> tag is used to display graphics on web pages.on web pages.

The main requirement for the IMG tag is The main requirement for the IMG tag is the file name (“source”) of the image.the file name (“source”) of the image.

NOTE: Web page images DO NOT NOTE: Web page images DO NOT become part of a web page file. They are become part of a web page file. They are separate files and must be located in the separate files and must be located in the same folder as the web page file unless same folder as the web page file unless otherwise noted.otherwise noted.

IMAGE TagsIMAGE Tags

An example of an IMG tag that displays a An example of an IMG tag that displays a graphic called ME.JPG graphic called ME.JPG <IMG SRC=“ME.JPG”><IMG SRC=“ME.JPG”>

In the example above, the name (“source” or In the example above, the name (“source” or SRC) of the picture file is SRC) of the picture file is ME.JPG ME.JPG (stored in the (stored in the same folder as the web page file).same folder as the web page file).

NOTE: The image file’s name must be NOTE: The image file’s name must be exactlyexactly as stored (upper/lower case, etc.)as stored (upper/lower case, etc.)

.JPG and .GIF indicate types of images .JPG and .GIF indicate types of images appropriate for web pages. Web graphics will be appropriate for web pages. Web graphics will be discussed in more detail in a later lesson.discussed in more detail in a later lesson.

ListsLists

Many web pages contain lists, much like Many web pages contain lists, much like you see in this PowerPoint presentation.you see in this PowerPoint presentation.

Lists can be “unordered” (using bullets like Lists can be “unordered” (using bullets like this list) or “ordered” (with numbers or this list) or “ordered” (with numbers or letters).letters).

<UL> </UL> indicates an unordered <UL> </UL> indicates an unordered (bulleted) list.(bulleted) list.

<OL> </OL> indicates an ordered list.<OL> </OL> indicates an ordered list. <LI> </LI> is used for each list item.<LI> </LI> is used for each list item.

List ExamplesList Examples

These tags…These tags… <UL><UL> <LI>Dogs</LI><LI>Dogs</LI> <LI>Cats</LI><LI>Cats</LI> <LI>Lizards</LI><LI>Lizards</LI> </UL></UL>

Produce this list…Produce this list…• DogsDogs• CatsCats• LizardsLizards


These tags…These tags… <OL><OL> <LI>Dogs</LI><LI>Dogs</LI> <LI>Cats</LI><LI>Cats</LI> <LI>Lizards</LI><LI>Lizards</LI> </OL></OL>

Produce this list…Produce this list…

1.1. DogsDogs

2.2. CatsCats

3.3. LizardsLizards


These tags…These tags… <OL TYPE=“A”><OL TYPE=“A”> <LI>Dogs</LI><LI>Dogs</LI> <LI>Cats</LI><LI>Cats</LI> <LI>Lizards</LI><LI>Lizards</LI> </OL></OL>

Produce this list…Produce this list…

A.A. DogsDogs

B.B. CatsCats

C.C. LizardsLizards

A Word about LinksA Word about Links

You will find out much more about links in a You will find out much more about links in a later lesson, but for now, I want you to be later lesson, but for now, I want you to be able to recognize links.able to recognize links.

All links use the tag that begins All links use the tag that begins <A HREF=<A HREF= The A stands for “anchor” (think of an anchor The A stands for “anchor” (think of an anchor

chain..it’s made of links…right?).chain..it’s made of links…right?). The HREF part will be the name of a web The HREF part will be the name of a web

page or a web address.page or a web address.


Here are a couple of examples, you will see Here are a couple of examples, you will see the actual message to click on between the the actual message to click on between the “A” tags.“A” tags.

This link shows the words This link shows the words Go BackGo Back and and sends the user to a page called sends the user to a page called HOME.HTM that is stored in the same HOME.HTM that is stored in the same folder as the current page.folder as the current page. <A HREF=“HOME.HTM”>Go Back</A><A HREF=“HOME.HTM”>Go Back</A>


This link shows the words This link shows the words More InfoMore Info and and sends the user to the CSUDH College of sends the user to the CSUDH College of Education home page.Education home page. <A HREF=“http://www.csudh.edu/coe/”>More <A HREF=“http://www.csudh.edu/coe/”>More

Info</A>Info</A> As you complete the activities on the last As you complete the activities on the last

slide, look for link tags (as well as other slide, look for link tags (as well as other tags).tags).

Self Check - HTML Lesson 1Self Check - HTML Lesson 1

Which of the following is NOT a required Which of the following is NOT a required tag?tag? <HTML><HTML> </BODY></BODY> <H1><H1> <HEAD><HEAD>


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

<HEAD><HEAD>


Which of the tags below will show the words Which of the tags below will show the words MY PAGE on the page in MY PAGE on the page in very largevery large type? type? <TITLE>MY PAGE</TITLE><TITLE>MY PAGE</TITLE> <H1>MY PAGE</H1><H1>MY PAGE</H1> <H7>MY PAGE</H7><H7>MY PAGE</H7> <FONT SIZE=2>MY PAGE</FONT><FONT SIZE=2>MY PAGE</FONT>


Which of the tags below will show the words Which of the tags below will show the words MY PAGE on the page in MY PAGE on the page in very largevery large type? type? <TITLE>MY PAGE</TITLE><TITLE>MY PAGE</TITLE> <H1>MY PAGE</H1> <H1>MY PAGE</H1> {H1 shows the largest “headline”}{H1 shows the largest “headline”}

<H7>MY PAGE</H7><H7>MY PAGE</H7> <FONT SIZE=2>MY PAGE</FONT><FONT SIZE=2>MY PAGE</FONT>


Which set of tags below would display this Which set of tags below would display this text in italics text in italics andand bold: bold: CLICK HERECLICK HERE <I><B>CLICK HERE</I></B><I><B>CLICK HERE</I></B> <I><B>CLICK HERE</B></I><I><B>CLICK HERE</B></I> <B>CLICK HERE</B><B>CLICK HERE</B> <H1>CLICK HERE</H1><H1>CLICK HERE</H1>


Which set of tags below would display this Which set of tags below would display this text in italics text in italics andand bold: bold: CLICK HERECLICK HERE <I><B>CLICK HERE</I></B><I><B>CLICK HERE</I></B> <I><B>CLICK HERE</B></I> *<I><B>CLICK HERE</B></I> * <B>CLICK HERE</B><B>CLICK HERE</B> <H1>CLICK HERE</H1><H1>CLICK HERE</H1>

*Explanation: Tags must be “nested” - the first *Explanation: Tags must be “nested” - the first to be turned on must be the last to be turned to be turned on must be the last to be turned off.off.


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


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


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

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


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

<OL></OL><OL></OL> {a numbered list is an “ordered” list}{a numbered list is an “ordered” list}

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


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


To draw a line across the web page, use…To draw a line across the web page, use… <HR><HR> {a line is a “horizontal rule”}{a line is a “horizontal rule”}

<LINE><LINE> <LI></LI><LI></LI> Must use a graphic.Must use a graphic.


Which of the following displays the words Which of the following displays the words CLICK ME as a link to homepage.htm?CLICK ME as a link to homepage.htm? <LI “homepage.htm”>CLICK ME</LI><LI “homepage.htm”>CLICK ME</LI> <LI “CLICK ME”>homepage.htm<LI “CLICK ME”>homepage.htm <A HREF=”homepage.htm”>CLICK ME</A><A HREF=”homepage.htm”>CLICK ME</A> <LINKTO “homepage.htm”>CLICK ME<LINKTO “homepage.htm”>CLICK ME


Which of the following displays the words Which of the following displays the words CLICK ME as a link to homepage.htm?CLICK ME as a link to homepage.htm? <LI “homepage.htm”>CLICK ME</LI><LI “homepage.htm”>CLICK ME</LI> <LI “CLICK ME”>homepage.htm<LI “CLICK ME”>homepage.htm <A HREF=”homepage.htm”>CLICK ME</A><A HREF=”homepage.htm”>CLICK ME</A> <LINKTO “homepage.htm”>CLICK ME<LINKTO “homepage.htm”>CLICK ME

ActivitiesActivities

Check out the handout at Check out the handout at http://www.csudh.edu/fisher/tbe540/HHO1.http://www.csudh.edu/fisher/tbe540/HHO1.htmhtm (as a review of this lesson). (as a review of this lesson).

Try the hands-on exercise at Try the hands-on exercise at http://www.csudh.edu/fisher/tbe540/HEX1.http://www.csudh.edu/fisher/tbe540/HEX1.htmhtm

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 Access.

Documents

page slide

page html tags

simple web page

web pages slide

web access web pages

structure of html

html structure

html stands