Introduction to HTML

   

I don't care how sophisticated your car door's lock is -- I can just smash the window in with a brick.

Wrapping text around a picture

<img hspace=5 vspace=5 align=right border=0 src="mypic.jpg"> This text will wrap around the picture.

Adding a menu

<head>
 
<link rel="contents" href="http://acme.com/page1.php" title="Page 1">
<link rel="icon" href="http://acme.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://acme.com/favicon.ico" type="image/x-icon">
 
</head>

Frame

Here's how to display the following set of frames:

A B
C
<frameset cols=20%,*>
<frame src="A.html">
     <frameset rows=40%,*>
     <frame src="B.html">
     <frame src="C.html">
     </frameset>
</frameset>

 http://www.faqs.org/docs/htmltut/frames/frames.html

Text

Showing empty cells in a table

TR {font-size: x-small;; empty-cells: show}

Charset

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

Thin borders

<style type="text/css">
table { border-width: thin }
</style>

Striking through visited links

<style type="text/css">
    a.vu:visited {color:#990000;text-decoration:line-through}
</style>

Redirecting to another page/site

<head>
<META HTTP-EQUIV="REFRESH" CONTENT = "2; URL=http://www.acme.com">
</head>
<body>
Moved somewhere else. Please wait 2 seconds...
</body>

Cleaning up HTML with Tidy

Creating sections with DIV

Here's an easier way than using a TABLE to build a banner:

div.header {background-color:#CCCCFF;text-align:center;}
 
<DIV class="header"><a href="http://www.cnn.com">Item1</a>&#183<a href="http://www.cnn.com">Item2</a></DIV>

Multi-column display

Use TABLE instead of DIV, because the latter require your setting coordinates for the columns other that the first one, forcing you to set up your layout for a 640 pixel-wide page to address the lowest common deminator. Tables, on the other hand, see their width adjusted automagically:

BAD
#right {
        position:absolute;
        left:470px;
        top:58px;
        vertical-align:top;
}
 
<DIV id="right">Test<P>
 
GOOD
<TABLE WIDTH="100%">
<TR>
        <TD WIDTH=80% class="header">Header 1</TD>
        <TD>Header 2</TD>
</TR>
</TABLE>

Here's how to display two columns, separatared by a vertical bar:

<TABLE WIDTH="100%" CELLSPACING=0 CELLPADDING=0>
<TR>
        <TD WIDTH=80% class="header">Header 1</TD>
        <TD></TD>
        <TD class="header">Header 2</TD>
</TR>
 
<TR>
    <TD VALIGN=top>This is a test.</TD>
    <td width="1" bgcolor="#C0C0C0"></td>
    <TD>This is a test. </TD>  

Forms

To display a frame (ie. a border with a title) around a form:

<FIELDSET>
    <LEGEND>My little frame</LEGEND>
    <form>
        <input type="submit" name="cmdSubmit" value="Click me">
    </form>
</FIELDSET>

The set of widgets is browser-dependent, and pretty poor compared to what can be achieved with dedicated apps. Here's a sample:

        <form name="demoform">
                        <h1>HTML Form Widgets Demo</h1>
                        <table cellspacing="10">
                                <tr>
                                        <td><h2>Text Box</h2></td>
                                        <td>Title: <input type="text" size="20" maxlength="30" name="title" value="" onchange="window.alert(demoform.title.value)"></td>
                                </tr>
 
                                <tr>
                                        <td><h2>Button</h2></td>
                                        <td><input type="button" value="GO!" name="go" onclick="window.alert(demoform.title.value)"></td>
                                </tr>
 
                                <tr>
                                        <td><h2>Check Box</h2></td>
                                        <td>US Citizen: <input type="checkbox" name="citizen" checked=""></td>
                                </tr>
 
                                <tr>
                                        <td><h2>Radio Buttons</h2></td>
                                        <td>
                                        Freshman<input type="radio" name="year" checked="">
                                        Sophomore<input type="radio" name="year">
                                        Junior<input type="radio" name="year">
                                        Senior<input type="radio" name="year">
                                        </td>
                                </tr>
 
                                <tr>
                                        <td><h2>Text Area</h2></td>
                                        <td><textarea cols="20" rows="10" name="address">Type your address here.</textarea></td>
                                </tr>
 
                                <tr>
                                        <td><h2>Selection List</h2></td>
                                        <td>
                                                <select name="color" size="1">
                                                        <option selected="">red
                                                        <option>green
                                                        <option>blue
                                                        <option>cyan
                                                        <option>magenta
                                                        <option>yellow
                                                </select>
                                        </td>
                                </tr>
 
                        </table>
        </form>

 

Cascading Style Sheets (CSS)

Adding a reference to a CSS file

<head>
<link rel="stylesheet" href="/style_sheet.css">
</head>

Using DIVs

Let's build two columns with DIVs instead of a TABLE:

(Code from MegNut)
#left {
        width:420px;
        font-family:verdana, geneva, arial, sans-serif;
        font-size:11px;
        line-height:16px;
        color:#333333;
}
 
#right {
        position:absolute;
        left:470px;
        top:58px;
        margin-left:13px;
        font-family:verdana, geneva, arial, sans-serif;
        font-size:11px;
        line-height:16px;
        color:#666666;
        vertical-align:top;
}
 
<DIV id="left">Test<P>
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
</DIV>
 
<DIV id="right">Test2<P>
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
</DIV>

To read

DHTML

JavaScript

Resources

Tools

Forums

Other sites