.Open HTML Basics . Pages The simplest way to make a page is to start with the simplest header .As_is Insert the title you want on the window here. .As_is Describe the page using the elements below... .As_is . Headlines Use HTML headers .As_is

.....

.As_is ... .As_is

.....

Cascading style sheets ($CSS) can control the fonts, colors, and sizes of these headers (and most other parts of a page). . Breaks Break up your page into chunks! Use

(horizontal rule),

(paragraph), and
to break up text into pieces. Two
s gives you a blank line. . Text In text use $CSS rather than which is deprecated. You can use the following to adjust the look and feel: .As_is .... .As_is ... .As_is

...

.As_is ... .As_is ... You can also use the old `physical` tags: .As_is ... .As_is ... .As_is ... Do not use or ! . Lists Lists are powerful but simple to use. There are three types: ordered(numbered/lettered), unordered(bulleted), and definition lists. The syntax for unordered lists(ul) and ordered lists(ol) is simple: .As_is

... .As_is

... Both lists contain a series of list items: .As_is

... Lists can be nested to any depth. Most browsers are very clever at this and indent sublists and change the bullets in

.... Definition lists

... are more complicated. Each item is like this .As_is

term

definition description I don't use definition lists much. . Images Simple and powerful but can not be seen by blind people. So always include a text alternative: .As_is textdescription

Notice: big graphics mean big delays in downloading images. Use image processing software to reduce the number of bytes describing each image. Use "alt" to describe images.... this pops up when people roll over it, even when it is still downloading! If your graphic is very big, create a thumbnail version an `link` to it: .As_is

As a rule use GIFs for diagrams and JPEGs for photographs. . Links Links are supposed to have two anchors, one at each end: .As_is .... is linked to anchors like this .As_is ..... I have no space here to define the syntax and semantics of URLS! But try .See ./comp.text.html.html for details. Here, .See http://www.codinghorror.com/blog/archives/000985.html on the Coding Horror Blog, are a dozen really excellent rules for putting links on web pages. For example: links should look like links and should be easy to click! . Tables Note: tables are not as popular as they should be in my opinion. Many people use $CSS to get two dimensional layouts -- which then fail on some of my browsers. There are some challenging A.D.A. compliance issues with tables. All tables start for some n=0,1,2,3, and end

The `n` is the number of pixels in the border. Guideline: keep the border small and if possible invisible (border=0). Tables are made of rows. Rows are made of items. Each row starts with and ends with an optional . Each row is made of items. A normal item starts with and ends with an optional . A header (high-lighted) item starts with and ends with an optional These are also centered in their boxes. These days most brousers let you put lists inside tables and put tables inside tables. There is a lot more you can do with tables but this is enough for this course. . Forms These let you introduce many surprising things. You can have buttons, check boxes, text input, password protection, and so on with hardly any effort. Javescript can check user input and it can then be sent to special pages and scripts on servers to handle. So read $HomerEtAl98 to find out more. . Frames See $HomerEtAl98. . See Also See .See ./comp.html.syntax.html (locally) Reference book: (HomerEtAl98): Alex Homer & Chris Ullman & Steve Wright, `instant HTML: Programmer's reference`, HTML 4.0 edition, WROX 1998. .Close HTML Basics