UvA FNWI UvA
ICT | Guides | Web Service | Guides | HTML Intro


 
  56 visitors in
May 2012
 
  last update
26 - 09 - 2004
 
 

 

HTML Made Easy

Introduction

This documents is intended for first time HTML writers, with no knowledge of HTML, URLs, etc. Knowledge of UNIX and an editor is assumed.

A basic document

  • Normal text can simply be typed in. Text just flows with the width of the viewer. Lines breaks <BR> and paragraph breaks <P> need to be done explicitly.

    The HTML code 
    This is a piece of demonstration text, note

that empty lines are simply ignored, as     is     wide
   space. To actually change the flow of the text
line breaks <BR> can be inserted anywhere. Between <BR>
words <BR> or <BR> where they should be.
Paragraph break create extra vertical space.<P>
Repeating lines breaks creates a larger
vertical <BR> <BR> <BR> <BR> space.
Repeating paragraph breaks is useless.
    And what it looks like
    This is a piece of demonstration text, note that empty lines are simply ignored, as is wide space. To actually change the flow of the text line breaks
    can be inserted anywhere. Between
    words
    or
    where they should be. Paragraph break create extra vertical space.

    Repeating lines breaks creates a larger vertical



    space. Repeating paragraph breaks is useless.

  • Creating different fonts can be done in several ways. It is possible to make headers <H?> and font modifiers such bold font <B>.

    The HTML code 
    <H1>A nice and extremely large header</H1><H3>
and a smaller one, note that header are put
on</H3><H5>separate lines</H5>
A H5 header is the smallest possible header, H1 is the
largest. A special type of header is ADDRESS.
Simply putting <ADDRESS>user@science.uva.nl</ADDRESS> might
surprise you.
Unlike headers, changing fonts to <B>bold</B> or <I>italic</I>
does not introduce vertical breaks or spacing.
<TT>Mono spaced</TT> characters are also available.
    And what it looks like

    A nice and extremely large header

    and a smaller one, note that header are put on

    separate lines
    A H5 header is the smallest possible header, H1 is the largest. A special type of header is ADDRESS. Simply putting
    user@science.uva.nl
    might surprise you. Unlike headers, changing fonts to bold or italic does not introduce vertical breaks or spacing. Mono spaced characters are also available.

  • Images can be added using the <IMG ... > directive.

    The HTML code 
    Images also flow with the text (just like text!).
This image for instance
<IMG SRC="/pict/uva.gif" ALIGN=top ALT="-">
appears between words. If you want images to appear
on different lines, add line breaks<BR>
<IMG SRC="/pict/uva.gif" ALT="o"><P>
or paragraph breaks. If the image is not on a
separate line, use <TT>ALIGN=top</TT> or <TT>middle</TT>
or <TT>bottom</TT> to adjust vertical position.<P>
You can specify alternate text for viewers that can not
display images using ALT. The film tape image has a <TT>-</TT>
as alternative, the ball image has an <TT>o</TT>.
    And what it looks like
    Images also flow with the text (just like text!). This image for instance - appears between words. If you want images to appear on different lines, add line breaks
    o

    or paragraph breaks. If the image is not on a separate line, use ALIGN=top or middle or bottom to adjust vertical position.

    You can specify alternate text for viewers that can not display images using ALT. The film tape image has a - as alternative, the ball image has an o.

  • How to refer to stuff like images and other pages.

    The HTML code 
    Hyperlinks are made using anchors <A HREF="./">like this</A>.
When a user attempts to follow the link, the relative path
is used. The URL (as such an address is called) can be
relative or absolute.<P>

For instance, consider the document
<A HREF="/edu/">http://www.science.uva.nl/edu/</A>.
From that document, URLs to the FNWI Homepage can look
like:<BR>
<UL>
<LI><TT>../</TT> relative<BR>
<LI><TT>/</TT> absolute<BR>
<LI><TT>http://www.science.uva.nl/</TT> complete<BR>
</UL>
<B>Advice</B>: use <I>relative</I> URLs when on the
same topic on the same server, <I>absolute</I> URLs for different
topics and images from standard
directories, such as <IMG SRC="/pict/uva.gif" ALIGN=top ALT="-">
in <TT>/pict/uva.gif</TT>. Use <I>complete</I> URLs for documents on
different Web servers.
    And what it looks like
    Hyperlinks are made using anchors like this. When a user attempts to follow the link, the relative path is used. The URL (as such an address is called) can be relative or absolute.

    For instance, consider the document http://www.science.uva.nl/edu/. From that document, URLs to the FNWI Homepage can look like:

    • ../ relative
    • / absolute
    • http://www.science.uva.nl/ complete
    Advice: use relative URLs when on the same topic on the same server, absolute URLs for different topics and images from standard directories, such as - in /pict/uva.gif. Use complete URLs for documents on different Web servers.

  • Making columns is NO fun, but can be done using <PRE> ... </PRE> pre-formatted text.

    The HTML code 
    <PRE>
first column    second column    third column
  apple            $    .25          1.05      <I>note: tastes funny!</I>
  banana           $    .30          1.05      <B>HTML codes accepted in</B>
  tv               $ 453.95          1.175     <B>pre-formatted text</B>
</PRE>
    And what it looks like 
    first column    second column    third column
  apple            $    .25          1.05      note: tastes funny!
  banana           $    .30          1.05      HTML codes accepted in
  tv               $ 453.95          1.175     pre-formatted text

  • Other easy gimmicks, such as itemized lists and horizontal rulers.

    The HTML code 
    An ordered list:
<OL>
<LI> first item
<LI> second item
<LI> third item
</OL>
An unordered list (bullets change, as they can be nested):
<UL>
<LI> first item
<LI> second item
<LI> third item
</UL>
Horizontal rulers really separate stuff:
<HR>
see? Demonstrating it almost becomes confusing!
    And what it looks like
    An ordered list:
    1. first item
    2. second item
    3. third item
    An unordered list (bullets change, as they can be nested):
    • first item
    • second item
    • third item
    Horizontal rulers really separate stuff:
    see? Demonstrating it almost becomes confusing!


  • How to make the background color in a GIF transparent.

    Images that should flow into the rest of the page, might need to have a transparent color, for obtaining a maximum impact. Changing that color to gray80 is not really a solution. Different graphical browsers can have different background colors.

    Making a color in a GIF image transparent can be done using the giftrans program. On Solaris systems this program can be found in /usr/local/www/bin.

    To make a GIF image transparent, follow the following steps:

    1. Run giftrans to list the color table.
      % giftrans -L myimage.gif
    2. Find the index of the color that should be made transparent. Lets say 7 for this example.
    3. Run giftrans to make the color with index 7 transparent.
      % giftrans -t 7 myimage.gif > tmpimage.gif
      % mv tmpimage.gif myimage.gif
    4. myimage.gif now has an extension defining the color with index 7 to be transparent. This is recognized by most graphical browsers.

  • A much more complete HTML documentation is available.

A working example

This is the source: 

<HTML>
<!-- Document started by Arjan de Mes, November 1994 -->
<HEAD>
<LINK href="/styles/fnwi.css" rel="stylesheet" type="text/css">
<TITLE>This is the title!</TITLE>
</HEAD>

<BODY>
<H1>Wow Browser, what large headings you've got!</H1>

Our <A HREF="/">department</A> at the <A HREF="http://www.uva.nl/">
<IMG SRC="/pict/uva.gif" ALIGN="middle" ALT="UvA"></A> has
a very nice WWW server.<P>

<UL>
<LI><A HREF="/~heederik/zappa/">The Zappa pages</A> are very popular
<LI>And so is the <A HREF="/~mes/teletekst/">TeleText page</A>
</UL>

</BODY>
</HTML>
This is what it would look like on your browser.