Jumpstart into the Web technologies: <- Prev. Start Contents References Home Next ->
HTML

HTML stands for "HyperText Markup Language", it is the core of Web. HTML is clear text format, which uses simple tags like <H2> & </H2> to structure the text into headings, paragraphs, lists, hypertext links etc.

Basics
Document structure:
<HTML>
<HEAD>
<TITLE> ... </TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>

Metadocument Information:

<META NAME="name"
  HTTP-EQUIV="FieldName"
  CONTENT="value" 
>

Especially usefull:

<META HTTP-EQUIV="Refresh" CONTENT="2;URL=http:nextdoc.html">
- in 2 sec. redirect browser to nextdoc.html.
<META NAME="keywords" CONTENT="Web, HTML, tags">
- Set keywords for the document, used by search engines to index your document

More tags:
Source: Result:
Text formating:
<H1>Heading 1 </H1>
<H6>Heading 6 </H6>

Heading 1

Heading 6
<B>Bold</B> <U>Underline</U>
<BLINK>Blink</BLINK> <I>Italic</I>
Bold Underline Blink Italic
<FONT SIZE=+2>Bigger font</FONT>
<FONT COLOR=RED>Red font</FONT>
Bigger font Red font
<PRE>
This is
a
  preformated text
</PRE>
This is
a
  preformated text
Lists:
<UL>
<LI> Element 1
<LI> Element 2
</UL>
  • Element 1
  • Element 2
<OL>
<LI> Element 1
<LI> Element 2
</OL>
  1. Element 1
  2. Element 2
<DL>
<DT> Title 1
<DD> Definition 1
<DT> Title 2
<DD> Definition 2
</DL>
Title 1
Definition 1
Title 2
Definition 2
Tables:
<TABLE BGCOLOR=#CCFFCC BORDER=1 CELLPADDING="8"
  CELLSPACING="4" COLS="3">
  <TR BGCOLOR=#BBDDFF>
    <TH> product </TH>
    <TH> price </TH>
  </TR>
  <TR><TD> lamp </TD><TD> $10 </TD></TR>
  <TR><TD> table </TD><TD> $100 </TD></TR>
  <TR>
    <TD BGCOLOR=CYAN COLSPAN=2 ALIGN=CENTER>
        total: $110
    </TD>
  </TR>

<CAPTION ALIGN="BOTTOM">
  <B>Table 1</B>: Some table example
</CAPTION>
</TABLE>
product price
lamp $10
table $100
total: $110
Table 1: Some table example
Anchors, links & images:
This is some image <IMG SRC="images/pnk1.gif" WIDTH=49 HEIGHT=43> This is some image
This is a simple <A HREF="http://www.sergey.com" TARGET="_example">link</A> This is a simple link
This one is image link <A HREF="http://www.sergey.com" TARGET="_example"> <IMG SRC="images/pnk1.gif" WIDTH=49 HEIGHT=43></A> This one is image link
Forms:
<FORM METHOD=POST ACTION="program.cgi">
User: <INPUT TYPE=TEXT SIZE=10 NAME=user VALUE=nobody><BR>
Passwd: <INPUT TYPE=PASSWORD SIZE=8 NAME=passwd><BR>
Remember ?
<INPUT TYPE=RADIO NAME=remember VALUE=yes> yes
<INPUT TYPE=RADIO NAME=remember VALUE=no> no <BR>
<INPUT TYPE=RESET VALUE="Clear Form">
<INPUT TYPE=IMAGE SRC="images/submit.gif" >
</FORM>
User:
Passwd:
Remember ? yes no

How do I edit / create HTML files?

Out of the HTML editors I saw, the best one was Allaire HomeSite, although it runs only on Win platform, so it's not much of use to me. Any plans for Linux version? :-)

Summary:
You can create nice Web pages with a lot of images, links to other places etc. Now you want to get some input from a user and do some processing of it. Here comes CGI..

More info on HTML can be found here.

Jumpstart into the Web technologies: <- Prev. Start Contents References Home Next ->

Copyright © 2000 Sergey Gribov