htmllesson1

Download Report

Transcript htmllesson1 

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