[Skip Navigation] [CSUSB] / [CNS] / [Comp Sci & Eng Dept] / [R J Botting] / [Samples] / intro.comp.html
[Index] [Contents] [Source Text] [About] [Notation] [Copyright] [Comment/Contact] [Search ]
Thu Oct 30 12:59:28 PDT 2008


    HTML Basics


      The simplest way to make a page is to start with the simplest header
      Insert the title you want on the window here.
      Describe the page using the elements below...


    1. Use HTML headers
      Cascading style sheets (CSS) can control the fonts, colors, and sizes of these headers (and most other parts of a page).


      Break up your page into chunks! Use <hr> (horizontal rule), <p> (paragraph), and <br> to break up text into pieces. Two <br>s gives you a blank line.


      In text use CSS rather than <FONT> which is deprecated.

      You can use the following to adjust the look and feel:


      You can also use the old physical tags:


      Do not use <BLINK> or <MARQUEE>!


      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:

       		<ol type="a">...</ol>
       		<ol type="A">...</ol>
       		<ol type="i">...</ol>
       		<ol type="I">...</ol>
      Both lists contain a series of list items:
       		<li> ...

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

      Definition lists <dl>...</dl> are more complicated. Each item is like this

       		<dt> term <dd> definition description
      I don't use definition lists much.


      Simple and powerful but can not be seen by blind people. So always include a text alternative:
       		<img src="filename" alt="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:

       	<a href="Big picture"><img src="thumbnail" alt="Click to see big picture"> </A>

      As a rule use GIFs for diagrams and JPEGs for photographs.


      Links are supposed to have two anchors, one at each end:
       		<a href="URL#label">....</a>
      is linked to anchors like this
       		<a name="label">.....</a>
      I have no space here to define the syntax and semantics of URLS! But try [ comp.text.html.html ] for details.

      Here, [ 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!


      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 <table border=n> for some n=0,1,2,3, and end </table> 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 <tr> and ends with an optional </tr>.

      Each row is made of items. A normal item starts with <td> and ends with an optional </td>.

      A header (high-lighted) item starts with <th> and ends with an optional </th> 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.


      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.


      See HomerEtAl98.

      See Also

      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.

    . . . . . . . . . ( end of section HTML Basics) <<Contents | End>>