HTML-1© 2004 D. J. Foreman HTML - An Introduction

HTML-1© 2004 D. J. Foreman

HTML - An Introduction


Language Structure

Tag based – 3 typesPaired tags Unpaired tagsSpecial tags

Unsupported or unknown tags are ignored


Formatting

Browser does the formatting (ignores any formatting you may have in your input)

Tags specify the formatting to be applied

Whitespace is ignored unless inside quotes

Data entry is NOT wysiwyg


Tag Structure

< tagname attributes >

Attributes (or options):attribute_name = "value"Can be in any order, for example:

Or




Paired Tags

Require the < and > symbols Specific spelling Ending tag requires a / example:

<body></body>


Unpaired Tags

No ending tag Apply to a single object Examples:

<hr><img>


Special Tags Represent specific ASCII symbols, like:

µ micro

® ® registered non-breaking blank space

NOTES:semi-colon#Very old browsers don't know names of these

tags, but numbers are always OK.


Tag Uses

Page identification<html><head> <title><meta>

Content formatting


Basic Web Page Structure

Identification area Body

Text to be formattedTags to do the formatting


Basic Web Page Structure -2

Method to 'connect' pagesURLs – Universal Resource Locators

(or Uniform Resource Locators) e.g.: http://domain/directory/filename.html

Tags create connections <a> (for anything 'clickable') <img> (for inline images) <embed> (for inline sounds)


Example

<html><head> <title> my first webpage</title></head><body> My web page text </body></html>


Beginning tags

<body bgcolor="red" link="orange" alink="black" vlink="green" >

<basefont size='3'>

Alink: activated during this session Vlink: previously visited links Link: unvisited links


BGColor

Specified in <body> tag May be a color name (see book) May be an 'rgb' triple in hexadecimal:

bgcolor="#D0C580" each pair of digits is a base 16 number

1st pair is for red2nd pair for green3rd pair for blue


Base 16 numbering

8 bits per byte Each bit is a power of 2 higher Counting RIGHT TO LEFT, we have:

128, 64, 32, 16, 8, 4, 2, 1 as the decimal values for the bit positions.

So0 0 1 0 0 0 0 1 is32 + 1 = 33 (decimal)


Base 16 numbering - 2 But remembering all those bits is hard We have a shorthand: hexadecimal

In decimal, we number our columns: 1, 10, 100 In hexadecimal we number: 1, 16, 256 So in one column, we can count to 15

(one less than our number system's base) But we don't have symbols for 10-15


Base 16 numbering -3

So we "invent" new symbols:10, 11, 12, 13, 14, 15 A, B, C, D, E, F

So a number like: BF16

Is really B * 16 = 11*16 = 176 + F * 1 = 15* 1 = +15

19110


Creating a Webpage - First Steps

Open NOTEPAD Type the text Save with an extension of htm or html

(may need to remove an added '.txt') Open browser

click on: File/Openenter disk address of file

Might need ftp to put file on server Test it using browser


Creating a Webpage Common Errors

Test your page from someone else's signon 403 Forbidden

URL was correct & file exists file not available to the public Action – change permissions for file

chmod 755 filename on UNIX systems See link on Prof. Foreman's homepage:

"solving webpage access problems"

404 – cannot locate the page URL is incorrect, or not available, or mis-spelled. Action – fix the URL in your HTML


Web Server Error Messages

400 BAD_REQUEST401 UNAUTHORIZED403 FORBIDDEN404 NOT_FOUND405 METHOD_NOT_ALLOWED408 REQUEST_TIME_OUT410 GONE411 LENGTH_REQUIRED412 PRECONDITION_FAILED413 REQUEST_ENTITY_TOO_LARGE414 REQUEST_URI_TOO_LARGE

415 SERVICE_UNAVAILABLE500 INTERNAL_SERVER_ERROR501 NOT_IMPLEMENTED502 BAD_GATEWAY503 SERVICE_UNAVAILABLE506 VARIANT_ALSO_VARIES


More about basic tags

<body> attributes: bgcolor, background

 attributes: size, color, face

alignment

headings: <h1> … <h6> 


The Anchor Tag points to another page on this server

or to a page on a different server<a href="…"> click here </a>

point to an image somewhere<a href="XYZ.JPG"> click me </a>

connect via a "click-able" in-line image <a href="…"> <img src="..."> </a>


Using anchors within a page

<a name="my_mark1"> </a>known as a named anchor

<a href="#my_mark1"> go back</a>

Re-displays page with my_mark1 at top of screen


Allows an image to be in-line with the text(no click required to see image)

This is the body of my text with

more text afterward.

Example: .. my text <img src="afile.jpg"> with more text afterward.

The <img> Tag


<IMG align=…>

left/right page alignment of image top, texttop, middle, etc

align image to the text alt=what to show if no graphics "align=top" gives:

text


Ordered Lists

<ol><li> list item

<li> another

<li> yet another

</ol>

A list item may contain any other tags

There is NO list-item end tag


Nested Ordered Lists

<ol> ordered list 1<li> list item

<li> <ol> <li> item1 <li>item2</ol><li> yet another

</ol>

Note: I do not do the formatting myself. The browser will do it for me


Unordered Lists

<ul><li> list item

<li> another

<li> yet another

</ul>


Nested Unordered Lists

<ul><li> list item<li> <ul>

<li> list item<li> another<li> yet another

</ul><li> yet another

</ul>


Mixed Nested Lists

<ul><li>unordered list item<li> <ol>

<li> ordered list item<li> another<li> yet another

</ol><li>yet another

</ul>


Dictionary (glossary) Lists

<dl><dt>dog

<dd>a 4 legged animal that barks

<dt>cat

<dd>a 4 legged animal that meows

<dt> person

<dd> a 2 legged animal that whines

</dl>


Standards HTML 4.0 – many formatting elements

(like "align", ) are "deprecated" HTML should be for text organization CSS for element formatting & layout XML – identifies CONTENT

XML tags like: <street_address><check_number>

HTML was re-defined using XML giving XHTML


Document Type Definitions

DTD statements allow you to specify:HTML vs XHTMLSupport-level

Transitional Frameset Strict

URL of the DTD rules


HTML and XHTML Levels

Transitional – allows deprecated tags but all tags must have endings

Frameset - as above + frames

Strict – no deprecated tags OR framesuse CSS with layers to get the same effects


Doctype Syntax for all HTML types

Identifies rules for handling the document <!DOCTYPE html -ruletype rule_loc>

NOTE: ruletype preceded by a "-" rule_loc specifies the URL for the

"document type definition" file


For HTML Documents

HTML transitional (or loose):<!DOCTYPE HTML PUBLIC

" //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML frameset:<!DOCTYPE HTML PUBLIC

" //W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML strict:<!DOCTYPE HTML PUBLIC

"//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


For XHTML Documents

XHTML transitional: <!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML frameset: <!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML strict: <!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Unpaired Tags in Xhtml(and how to handle them)

All tags have endings Examples (with formal XHTML endings):

<hr> <hr /><img> <img /> 

Note the space before the "/"

More info at www.w3.org