Building a Web Page With HTML

Objectives

Start Notepad

Write Basic HTML

Use HTML Tags

Enter Text

Save an HTML File

Use Colors in Web Pages

Use Various Formatting Techniques

What is the WWW?

World Wide Web

Supports multimedia and consists of a collection of linked documents known as Web Pages

What is a Web Site?

Where Are Pages Stored?

Web pages are stored where?

How do you publish web pages?

Hyperlinks

Link web pages together

Allow quick jumps to other pages

What is HTML?

HyperText Markup Language

HTML is a set of special instructions, called "tags" or "markups" that specify links to other documents as well as how the page should be displayed

Web browsers can interpret tags and display content accordingly

HTML is Platform Independent

HTML Tags

Tags begin and end with special symbols: < and >

Some tags must be opened and closed (closed with "/" symbol)

Examples:

Who Can Publish on the Web?

Anyone!

Styles are very diverse

Easy way to publish information for large audience

Elements of a Web Page

Title: identifies the subject/purpose, displays on browser’s title bar, is also the name of the page in your favorites

Body: information that displays in browser window

Background: similar to wallpaper in Windows, can be solid color, picture (repeating), standard white, etc.

Normal Text: makes up the main content of a web page, can be in many formats such as standard paragraph, bulleted, numbered, bold, italic, colored, underlined

Headings: usually larger, bold. HTML has six different styles of headings (1 through 6)

Images: icons, bullets, lines, photos, illustrations, or other picture

Horizontal Rule: lines across the page, used to separate different sections

Image Map: one image with many embedded links or hotspots

Animated Images: moving images

LINKS/HYPERLINKS: primary method used to navigate between pages. Clicking a link instructs the browser to go to a location or file, or to request a file from the server

Building a Web Page

Start Notepad

Turn on Word Wrap (under ‘Edit’ Menu)

Begin entering text

Save HTML file (remember where!) but don’t close Notepad

Open HTML file from within browser

Continue to make changes to HTML file, saving, and then refreshing browser to check changes

Viewing HTML Source

Load any web page in your browser

Find the "View Source" selection from a drop-down menu and select it.

The Basics

All pages start with the same tags:

<HTML>

<HEAD>

<TITLE>Title of your page</TITLE>

</HEAD>

<BODY>

this is where all the page content goes…

</BODY>

</HTML>

Web Page Organization

After purpose of page is defined, it is necessary to organize information

Linear Layout: displays web pages in a straight line

Hierarchical Layout: displays web pages in a tree-like structure

Webbed Layout: has no set structure, but shows connections/links from each page to each page

Avoid building web sites that are too narrow or too deep:

Narrow Web Site: a site in which the home page is the index, and all other pages are only accessible through the home page

Why is this bad?

Deep Web Site: a site in which the content web pages are buried beneath many other web pages

Why is this bad?

Linking

Links can be used to:

jump to pages within the site

jump to other pages outside of the site

send an email message

download a file

How To...

Start each page:

<HTML>

<HEAD>

<TITLE>Title of your page</TITLE>

</HEAD>

<BODY>

this is where all the page content goes…

</BODY>

</HTML>

Format Text:

For Heading Styles:

<H1>This is the heading 1 style!</H1>

<H6>This is the heading 6 style!</H6>

For Centering:

<CENTER>This is centered!</CENTER>

For Colored Text:

<FONT COLOR="#FF0000"> (starts font color)

</FONT> (ends font color)

Make a Horizontal Rule:

<HR> (makes a standard, full-width rule)

<HR WIDTH=50%> (makes a half width rule)

Center a Horizontal Rule

(<HR> is a one-time use tag. It does not need to be ended with ‘/’)

Add a Background Color:

Instead of using only <BODY>, use

<BODY BGCOLOR="insertcolorcodehere">

For Example:

<BODY BGCOLOR="#FF0000">
This will create a red background

Add a Background Image:

Instead of using only <BODY>, use

<BODY BACKGROUND="insertimagenamehere">

For Example:

<BODY BACKGROUND="family.jpg">
Be sure that the image’s filename is spelled correctly (including capital letters) and is uploaded to your U of A directory.

Insert an image:

<IMG SRC="imagename.jpg">

Center an image:

Create a link to a page within your site:

<A HREF="pagename.html">Click here.</A>

‘Click here.’ will be the clickable text since it is between the <A HREF> and </A> tags.

Create a link to an external page:

<A HREF="http://www.cnn.com">Click here.</A>

‘Click here.’ will be the clickable text since it is between the <A HREF> and </A> tags.

Create an email link:

<A HREF="mailto:[email protected]">Email me!</A>
‘Email me!’ will be the clickable text since it is between the <A HREF> and </A> tags.

Make an image be a link:

<A HREF="photos.html"><IMG SRC="mydog.jpg"></A>

Additional Resources

Cool background images:

http://www.freebackgrounds.com

All kinds of images

Just right-click on any image you see online and select "Save picture as…" to save the image to your disk

See how a page was built (and use it for your own page!)

From the ‘View’ menu (in Internet Explorer), select ‘Source’. The source HTML will display.