What is a markup language?

The rules of tags.

Adding attributes and properties.

New XHTML rules.

The Document Model.

Browsers receiving tags.

Structural tags.

Separating presentation from content

Types of tags

Block and Inline tags

Basic HTML pages

Content-based tags vs non-content-based tags.

Forcing a page to our evil will.

Deviant Art

The Museum of Web Art

The "://" in "http://www.etc" is from Unix and identifies the path to the operating system. Similar to Windows "C:\DocumentsEtc".

More control if you use an image:

Remember that you can't depend on end users having more than the simplest serif, san-serif, or monospaced fonts. Use an image instead

Lorem ipsum dolor sit amet consectetaur adipisicing elit consectetaur adipisicing elit Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.

Lorem ipsum dolor sit amet consectetaur adipisicing elit consectetaur adipisicing elit Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.

Lorem ipsum dolor sit amet consectetaur adipisicing elit Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

But! It doesn't work in Windows IE 6.0, so fugedaboutit. We'll do with stylesheets later anyway.

Two ways for now:

But, there's no equivalent <left>  or  <right>  tags

See it here.

Any color you want, as along as it's black.

Look out for the GOTHCA!

If the image is a link, it will gain a border unless you set the border to 0.

Unless you set the border to 0

The image automatically defaults to the size it was created at.

This statement provides the same results as the previous one:

But, you can cheat and reset the size to anything you want:

This is how you do the horizontal rule trick we talked about earlier:

Note that we used "100%" rather than "100" which would give us the width in pixels.

You can control the background color and even add a background image with attributes in the body tag:

Demo here.

Demo here.

You can even use animated gifs (more later).

Demo here.

Put a complex background in.

Demo here.

This is what make the HTML name what it is the anchor tag:

The ability to link to another document or page. It's the same as if you typed it in the browser's URL field.

You can point to:

Inside the current document

To another doc in the same domain (on the same server).

Inside another doc in the same domain.

To another doc anywhere on the web.

Inside another doc anywhere on the web.

They can get quite long:

http://www.amazon.com/exec/obidos/tg/detail/-/ B00005OQM7/qid=1059246015/br=1-6/ref= br_lf_hi_6//104-9595377-8870363?v=glance&s=hi&n=229148

You can use www.makeashorterlink.com. It will give you this instead:

http://makeashorterlink.com/?Y57935216

Do's and Don'ts in naming files:

Stick to alpha numerics, a-z, 0-9, and underscore and dash

No Spaces

Use underscores "_" or dashes "-" instead

Think about using capitals

Most of all, be consistent!

Bad naming:

My File.htm

Good naming:

My_File.htm

Better naming:

my_file.htm

Other attributes and properties for the anchor tag

Fragments, aka Named Anchors, are little <a> tags that can be placed anywhere in your document and used by a URL to link directly to that part of the page.

Alternately, you can give any tag an  id  attribute to link to

Put this somewhere in the doc:

Or put an id on any tag for that matter:

Then, a link to there from somewhere else on the page:

To Link to another doc in the same domain:

To the inside of another doc in the same domain:

Those were “relative” anchors.
These are “absolute” anchors

To another doc anywhere on the web:

To the inside of another doc anywhere on the web:

Use &nbsp; to put in extra spaces

add     some space

Cumbersome, bulky and tré 90's

Make a page with horizontal rules that looks like this:

Create a page that centers an image with both the <center> and the <p align="center"> tags:

Create a page that wraps text around images that looks like this:

Hint: the second paragraph puts the images later down the text.

Build a page that looks like this:

Hints:

The bar is made from the thing.gif.

The header uses a <font> tag with attributes.

Take the page from exercise 4 and link it to the file from exercise 3 using the image as your link.

Try making the image not have a border from the link tag.

Take the page from exercise 5 and link it to the "server" id on the lecture_01.htm page of this site.