html lesson 1

HTML LESSON 1

The Basics of HTML

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: <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 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. Dogs2. Cats3. Lizards

List Examples

These tags… <OL TYPE=“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>


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

not required}

<HEAD>


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>


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>


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>


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.


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


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

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


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>


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


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

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


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

html lesson 1

Documents