JumpStart to the Web technologies tutorial: HTML

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>

Element 1
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?

Your favorite text editor (emacs, vi, notepad etc.). Pluses: you have a full control over the code you write & you don't need to use different tool, than the one you're already using. Minuses: you have to know HTML and to remember the exact syntax :-)
General tools for editing documents (MS Word, StarOffice etc.) Pluses: it's easy to use and you don't need to remember the syntax of HTML. Minuses: you don't have a full control & the HTML code comes really crappy (a lot of unneeded tags, bad look of source etc.)
HTML authoring tools (Netscape, Allaire HomeSite etc.) Pluses: same as for the general tools. Minuses: some of them have the same minuses as general tools (netscape), some (HomeSite) let you work in both modes: WYSIWYG or edit the actual HTML code, these usually produce nice and clean code.

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 ->