Outline

INTRODUCTION TO HTML BASICS

Aimee M. Blatz

Introductions

Overview

HTML code

a) tags

b) structure

LAYOUT DESIGN

Creating a Web page

a) Notepad (windows)

Linking to other files

Helpful tips

Practice makes perfect

Next week:

a) review web pages

b) linking within the same document

c) graphics

d) tables

e) HTML assistants: Editors and Converters

Overview:

HTML stands for Hypertext Markup Language. This language is used for describing the structure of a document, not its actual presentation.

A Browser takes this language, interprets it and then presents it.

HTML defines a set of common styles for Web pages:

headings
paragraphs
lists
and tables

HTML also defines character styles such a boldface and underline.

Each element has a name is is contained in a tag, for example: <element name>

All tags indicate the different parts of the page and produce different effects in the browser.

HTML has a defined set of tags you can use. To make things confusing, different browsers support different sets of tags. Visit the W3 Consortium web site for the latest developments in HTML at: http://www.w3.org/pub/WWW/MarkUp/

HTML Code

a) Tags:

HTML tags generally have a beginning and an ending tag, surrounding the text that they affect:

<the tag name> affected text </the ending tag>

The beginning tag "turns on" a feature (such as headings, bold, and so on), and the ending tag turns it off. Closing tags have the tag name preceded by a slash (/).

Note: Not all HTML tags have a beginning and an end. Some tags are only one-sided, and still other tags are "containers" that hold extra information and text inside the brackets. You'll learn about these tags as the workshop progresses.

All HTML tags are case - insensitive.

Lets take a look at HTML sources:

ALA

The White House

b) Structure:

<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

<HTML> tag - The absolute most basic of all possible Web documents. The first and last tags in a document should always be the HTML tags. These tags tell a Web browser where the HTML in your document begins and ends. If you were to load such page into a Web browser, it wouldn't do anything except give you a blank page.

<HEAD> tag - Contains all of the document's header information, such as the

<TITLE> tag - For the title of your document. This title will appear at the top of the browser's title bar, and also appears in the browser's history list. Also the contents of the TITLE container go into your bookmark file, if you create a bookmark for a page.

What you type should probably be something which indicates the document's contents.

<BODY> tag - What goes between the body tags is what gets displayed in the browser window. Text, graphics, backgrounds, links and so on -- all occur between the body tags.

<Comment> tag - Our first example of an empty tag (there is no end tag).
This tag is used when the creator of a Web document wants to leave notes to him/her self, and not have the notes show up on the browser window.

Layout Design

Headings - There are six levels of headings, from <H1> to <H6>.

<H1> is the largest point size, with <h6> being the smallest point size.

Whitespace doesn't matter! The arrangement of text within a tag container is irrelevant! That is why the paragraph tag <P> and the line break tag <BR> need to be used.

<P> begins a paragraph, and </P> ends a paragraph.

<BR> forces a line break wherever you place it in the content. This is an empty tag in that there is no ending tag (</br>).

<BLOCKQUOTE> tag is handy for long pieces of text which are quoted material and need to be set apart and indented.

For example, this section is surrounded by the blockquote tags. A blockquote can exist inside of a paragraph, and always lives on its own line. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

Creating an HTML page:

First, you need a text editor. A text editor is a program that saves files in ASCII format (plain text, with no special text or format). On Windows, it is Notepad or Microsoft Write. On the Macintosh, it is SimpleText.

Open the Notepad editor

Type the following structure:

<html>
<head>
<title> My sample HTML page </title>
</head>
<body>
<H1>This is an HTML document</H1>
</body>
</html>

Remember: You need to save the file with the .HTML extension!

Lists, lists and more lists

Each list is surrounded by the appropriate opening and closing tag for the kind of list.

Each list item within the list has its own empty tag: <li>
Glossary lists uses <DT> and <DD>

HTML defines three kinds of lists:

numbered lists, or ordered lists <OL> ....</OL>
bulleted, or unordered lists <UL>....</UL>
glossary lists, where a term is highlighted or drawn out from the text

<DL>

<DT>

<DD>

</DT>

LINKS & ANCHORS

The Link tag uses the basic anchor: Starts with <A> and ends with </A>. However, you can not use the <A> by itself. You need to enhance the <A> tag with attributes such as.....

HREF - stands for "Hypertext REFerence" which means = "the location of the file I want to load." Most anchors are in the form <A HREF ="URL">......</A> . This link is used to link to other files.

An example is : Go to the <a href="http://www.ala.org"> American Library Association Web Site </a>

Which would look like this in a browser: Go to the American Library Association Web Site

Note the double quotes!

Lets link two files together!

NAME - allows for one to link (invisibly) to other parts of the same page. This comes in handy when the page is quite long.

NAME distinguishes a target....a place on the page that you want to link to

<A HREF= "# anyname"> ....</A> will link you to this target that you want to go to.

An example: I want to get back to the top of the page without scrolling up. So I first create a target at the top of the page that I want to go to.

<A NAME="INTRODUCTION TO HTML BASICS" > INTRODUCTIONS TO HTML BASICS</A> I put this anchor up on the top of the page, next to the text.

Second, I put a link here that will allow me to go back to the top.
To go back to<A HREF="#INTRODUCTIONS TO HTML BASICS">the top</a>

Which looks like this in the browser window:

To go back to the top

TIPS

Copy and Paste (control C and control V)

click of mouse

Images & Graphics

<IMG> tag. As with <BR> and <HR>, <IMG> has no closing tag. It does, however, have many attributes that allow for different ways of presenting and handling inline images (inline images refer to images that appear on a Web page along with text and links, and are automatically loaded when the page itself is retrived).

The most important attribute to the <IMG> tag is SRC (source). The SRC attribute indicates the filename or URL of the image you want to include, in quotes.

Three standard values for aligning an image on a page are:

ALIGN=TOP - Aligns the top of the image with the topmost part of the line.

ALIGN=MIDDLE - Aligns the center of the image with the middle of the line.

ALIGN=BOTTOM - Aligns the bottom of the image with the bottom of the line of text.