HTML Overview Basic Structure. How The Web Works When people want to see your web site the connect to it with their browsers, typing in your URL. The.

HTML Overview

Basic Structure

How The Web Works

When people want to see your web site the connect to it with their browsers, typing in your URL.

The browser connects with a server that contains your page.

The browser sends a command to the server, asking for the page.

How the Web Works The server sends the page, actually a file,

containing code in a language called HTML The browser reads the HTML and finds

references to all other objects on that page

The browser retrieves each object from the server

The browser assembles the page according to the instructions in the HTML and displays it for the viewer

World Wide Web Consortium

Organization that recommends Web standards

NOT a governing board! Comprised of industry leaders URL:

http://www.w3c.org/

What is HTML?

Hypertext Markup Language Made up of tags (instructions) Tags tell the browser how to display

the content of the document. HTML is NOT a programming

language HTML IS a markup language

Why Should I Know HTML? There are a lot of good web editors out there

Dreamweaver FrontPage PageMill

But, no web editor will give you absolute control over how your pages will look.

Knowing HTML will let you make changes in these editors

Usually you will find that it is easier to create pages to your liking using straight HTML.

HTML Tags

The control characters that separate HTML from ordinary text are “<“(left bracket) and “>”(right bracket).

These brackets enclose the HTML tag.

The generic form of a tag is: <tag_name>.

HTML Tags

HTML tags are NOT case sensitive.<IMG> is the same as <img>

Spaces are never allowed between the initial “<“ and the name of the tag. There can be spaces at the end of the tag.

Legal: <br > not legal: < br>

Types of Tags in HTML Two Types:

Tag Containers beginning tag <tag> ending tag </tag> EXAMPLE:I feel like <b>screaming</b> today.(Makes the word “screaming bold)

Stand-Alone tags Single tag that works by itself EXAMPLE:

<br>(Inserts a line break)

Attributes Attributes are added within a tag to

extend or modify the tag’s action You can add several attributes within a

single tag. Tag attributes, if any, belong after the

tag name, each separated by one or more space.

Example:<body bgcolor =“#ffccff”

text =“#336699”>

HTML Document Structure

Basic Structure: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3c.org/TR/HTML4.01/strict.dtd><html>

<head>

<title>Document Name</title></head> <body>

Document Contents</body>

</html>

Code writing:

Commenting! Non-executable lines used to clarify

coding Ignored by the browser

Indentation and white space help to give structure & clarity to the code.

File names are case-sensitive!

Document Structure Tags

<!DOCTYPE> is a stand-alone tag that tells the browser how to interpret your tags (via a document type definition).

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3c.org/TR/HTML4.01/strict.dtd>

<html>

<head><title>Document Name</title>

</head> <body>


</html>


<HTML>…</HTML> is a container tag that encloses the entire HTML document – lets the browser know the document is composed in HTML.


<html>


</head> <body>


</html>


<HEAD>…</HEAD> is a tag container that contains tags for the page title, JavaScript, CSS and other information about the web page.


<html>


</head> <body>


</html>


<TITLE>..</TITLE> The document title is crucial to its accessing and indexing by search engines.


<html>


</head> <body>


</html>


<BODY>…</BODY> The body tag encloses all other tags that create the content of the web page.


<html>


</head> <body>


</html>

Other Document Structure Tags <base> - Stand-alone tag used to

establish the page’s base location <link> - Stand-alone tag used to

define a relationship between the current page

<script> - Stand-alone tag used to include JavaScript or VBScript

<style> - Stand-alone tag used to include an embedded stylesheet

The Meta Tag Stand-alone tag Provides information about a page:

author copyright description

Two types: name http-equiv

Both types MUST have a CONTENT attribute!

<meta> Tag Example: Refresh

<meta<meta http-equiv=“refresh”http-equiv=“refresh”

content=“15; URL=http://…html”>content=“15; URL=http://…html”>

This use of the <meta> tag will re-direct a browser to a new page in a specified amount of seconds.

<meta> Tag Example: Language<meta<meta http-equiv=“content-language”http-equiv=“content-language”

content=“en”>content=“en”>

This use of the <meta> tag will specifies which language is used in the document.

<meta> Tag Example: Author<meta<meta name=“author”name=“author”

content=“Mark Twain”>content=“Mark Twain”>

This use of the <meta> tag will identify the author of the document.

<meta> Tag Example: Description

<meta<meta name=“description”name=“description”content=“This web page is about content=“This web page is about the cryptozoology. It is focused the cryptozoology. It is focused on the continuing search for the on the continuing search for the elusive Yeti.”>elusive Yeti.”>

This use of the <meta> tag will give a brief description of the contents of the page. Useful for search engines.

<meta> Tag Example: Keywords

<meta<meta name=“keywords”name=“keywords”content=“Yeti, cryptozoology, content=“Yeti, cryptozoology, Nepal, Himalayas, Buddhist Monks, Nepal, Himalayas, Buddhist Monks, abominable snowman”>abominable snowman”>

This use of the <meta> tag will provide keywords describing the web page. Useful for search engines.

<meta> Tag Example: Robots

<meta<meta name=“robots”name=“robots”content=“index, nofollow”>content=“index, nofollow”>

Values:index – add page to engine indexnoindex – don’t add page to engine indexfollow – follow links contained in pagenofollow – don’t follow links contained in page

This use of the <meta> tag will instruct search engines how to index the site. Useful for search engines.

<meta> Tag Example: Transition<meta<meta http-equiv=“Page-Enter”http-equiv=“Page-Enter”

content=“revealTrans(Duration=2.0,content=“revealTrans(Duration=2.0,Transition=12”>Transition=12”>

This <meta> tag will show “special effect” transitions from one page to another. Not supported by all browsers!

See the following for info:http://www.sternbergh.com/Meta.html

Nesting Tags An HTML document is made up of a sets

of “nested” tags. “Nesting tags” are HTML tags placed

inside other container tags. An entire HTML document is nested

within the <html>…</html> tags. Both beginning and ending tags of the

enclosed tag must be completely contained inside the applied tag.

Nesting Tags

Example:HTML is <b><i> FUN</i></b>

A common mistake is to overlap the tags:HTML is <b><i>FUN</b></i> This will cause problems with the way

your text is displayed

Carriage Returns in HTML Browsers will not make distinctions

between end of line (return) and spaces within your HTML code.

Text will wrap until it encounters something to format the page: <p>..</ p> (Paragraph) <br> (Line Break) <hr> (Horizontal Rule) <h1>..</h1> (Heading)

Headings Heading tags are useful in adding

interest and helping to make text more easily read.

Heading always include a number 1-5 which identifies the size of the text. <h1>…</h1> is the largest <h5>…</h5> is the smallest

Example:

<h3>Welcome to N241</h3><h3>Welcome to N241</h3>

Horizontal Rule

Inserts a horizontal line across the page

Two Attributes Size: How thick will the rule be? Width: How far will the rule stretch

across the screen? Syntax:<hr size=“4” width=“85%”><hr size=“4” width=“85%”>

Lists

An excellent way to organize information on a web page is through lists.

Two types: ordered and unordered Ordered lists are numbered Unordered lists are bulleted.

Ordered Lists

Example:Things to do today:

<ol><ol>

<li>call mom</li><li>call mom</li>

<li>pay gas bill</li><li>pay gas bill</li>

<li>pick up laundry</li><li>pick up laundry</li>

</ol></ol>

Ordered Lists The <ol>…</ol> are the tags used to enclose

the list <li>…</li> is used to specify list items. You can start the list at any number

<ol start = 25> There are 5 possible type attribute values:

1- numbers A – upper case letters a – lower case letters I- upper case roman i- lower case Roman

Unordered Lists The <ul>…</ul> encloses the list <li>…</li> specify the list items Example:

I have 2 cats namedI have 2 cats named<ul><ul><li>Jasper</li><li>Jasper</li><li>Lilly</li><li>Lilly</li>

</ul></ul>

Unordered Lists

<ul>’s have 3 type attributes <ul type = “disc”> <ul type = “circle”> <ul type = “square”>

Formatting Text

<p>…</p> Tags are used to create paragraphs. These tags will start a new line, separated from the previous text with a blank line.

<br> creates a line break, similar to hitting the carriage return on a typewriter.

Two Methods of Aligning Text Use the align attribute of <p> tag:<p align=‘center’> … </p><p align=‘center’> … </p> Deprecated

Use the align attribute of the <div> tag:<div align=‘center’> … </div><div align=‘center’> … </div> Preferred Similar to <p>, <div> is also a block-

level tag; it will show a blank line above and below any text enclosed in it.

The Font Tag

Contains attributes to specify text size and color.

<font<fontcolor =“#ff0000” color =“#ff0000”

size = 5>size = 5> Size attribute can range from 1-7 3 is the default.

Other Tags

<b> …</b> bolds text <center>…</center> centers text <hr> creates a horizontal line

Attributes: align, color, size, width <i>…</i> italicizes text

Horizontal Rules Adds a graphic line to a page Tag: <hr> (stand-alone tag) Attributes:

align – Alignment of the rule noshade – Rule is displayed as a solid color line size – Thickness of rule (in pixels) width – Number or percentage representing

how far the rule will stretch across the page Example:<hr width = ’85%’><hr width = ’85%’>

Displaying Images Images are separately loaded files which are

displayed in a web page via the <img> tag Ways images are used:

As simple graphics As links As imagemaps As spacing tools

Accepted image formats: .GIF .JPG .PNG

The <img> Tag

src align

left middle right top

alt

border height width longdesc=url name usemap=url

Stand-alone tag Attributes:

<img> Tag Example

Example:<img<img src=“images/globe.gif”src=“images/globe.gif”

border=0border=0width=65width=65height=65height=65alt=“Picture of the earth”>alt=“Picture of the earth”>

Creating Links “A link is a connection from one web resource

to another.” – HTML 4.01 Specification Created using the anchor tag <a> Types of links:

Other HTML pages Images & other media files E-mail addresses Fragments of web pages FTP servers Telnet sessions

The <a> Tag Tag container - <a> … </a> Attributes:

href=url – identifies the Web page destination to which the link is made

name=text – identifies a fragment in a Web page to which other <a> tags will link

id – gives the anchor a unique name in the document

target – specifies window or frame where the link should be opened

Creating a Simple Link

To create a simple link with text:My favorite search engine isMy favorite search engine is<a<a href=‘http://www.yahoo.com’>href=‘http://www.yahoo.com’>

Yahoo!Yahoo!</a>.</a>. Do NOT put spaces or line breaks

between the end of the text and the </a> closing tag. Doing so with extend the link.

Using an Image as a Link

To use an image as a link:<a<a href=‘http://www.yahoo.com’>href=‘http://www.yahoo.com’>

<img<img src=‘images/yahoo.gif’src=‘images/yahoo.gif’border=0></a>border=0></a>

Do NOT put spaces or line breaks between the end of the <img> tag and the </a> closing tag. Doing so with unnecessarily extend the link.

To Open a Link in a New Window

To open a link in a new window:My favorite search engine isMy favorite search engine is<a<a href=‘http://www.yahoo.com’href=‘http://www.yahoo.com’

target=‘_blank’>target=‘_blank’>Yahoo!Yahoo!</a>.</a>.

Use this syntax sparingly – it can get annoying for your users.

Linking Page Fragments To create a page fragment:<a<a name=‘bio’></a>name=‘bio’></a>I was born near Chicago in …I was born near Chicago in …

To link to an internal fragment:<a<a href=‘#bio’>href=‘#bio’>

My BiographyMy Biography</a></a> To link to a fragment on another

page:<a<a href=‘http://www.si.com/index.html#ski’>href=‘http://www.si.com/index.html#ski’>

Tips for Skiing the MidwestTips for Skiing the Midwest</a></a>

Debugging HTML

You can use any one of several online HTML validators

Dr. Watson is highly recommended:http://watson.addy.com/

Naming Files & Editors to Use:

Any text editor can be used, e.g. Emacs.

Save your file with .html extension, e.g. Index.html

Save it in straight ASCII format! To test the file locally, use a

browser (File – Open – Browse)

Sources:

Web Design in a Nutshell by Jennifer Niedherst.

Lecture notes by Andy Harris Creative HTML Design by Linda

Weinman The HTML Web Classroom by

Paul F. Meyers

HTML Overview Basic Structure. How The Web Works When people want to see your web site the connect to it with their browsers, typing in your URL. The.

Documents

tag containersbeginning

entire html document

document title

container tag

tag example

tag attributes

html tagshtml tags

body tag