Post on 14-Apr-2017
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• 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