introduction to html bent thomsen institut for datalogi aalborg universitet

Introduction to HTML

Bent Thomsen

Institut for Datalogi

Aalborg Universitet

October 2002 Bent Thomsen FIT - 2-2 2

World Wide Web

Documents linked by Universal Resource Locators (URL)Example: http://www.but.auc.dk

Distributed hypertext documents


Document viewing Microsoft Internet Explorer


Document viewing Netscape


Other browsers


Browser and Server communication

http request (path and parameters)

HTTP answer(HTML code)


HyperText Markup Language

• An HTML document is a plain text file

• It contains text and other information to be displayed by a web browser

• It also contains formatting tags

• It can be created in a plain text editor

• Or by a WYSIWYG tool

• Or by a program running on a server


HTML formatting• HTML documents contain text and formatting tags• Tags follow a simple rule:

– <tag_name>string of text</tag_name>

• E.g. – <h3>What are HTML tags?</h3>

• I.e. like matching brackets• Except a few tags like

– <p> and <br>

• Note HTML tags are not case sensitive – <h3> and <H3> are the same


A first example<html><head><TITLE>A Simple HTML Example</TITLE></head> <body> <H1>HTML is Easy To Learn</H1> Welcome to the world of HTML. This is the first paragraph. While short, it is still a paragraph!<P> And this is the second paragraph.</body></html>


Why are we interested in HTML Code?

• Because there are things that can not be done using WYSIWIG editors

• To ensure that web pages look reasonable in all browsers

• To learn from other peoples good ideas• To be able to do web programming and use forms

– In web programming you write programs generating HTML

– For that you need to understand HTML


HTML Syntax

• HTML has a small vocabulary

• Getting the syntax wrong will not (or should not) crash your browser

• Tags the browser doesn’t understand are ignored– <wiggle><h3>What are HTML

tags?</h3></wiggle>

• Several important versions of HTML– HTML 1.0, HTML 3.2 and HTML 4.0


Head Command

• Tags <head> and </head>• Contains formatting and other instructions

• Title <title> This is title</title>– Places title above the tool bar

• Background images/colours– <body background=“picture.gif”>

• Scripts


Body Command

• After <html><head></head> command

• <body> and </body>• Before </html>


Text formatting

• Paragraphs– The <p> tag (and </p> )– <p align=left> </p>– <p align=right> </p>– <p align=center> </p>

• Line breaks– The <br> tag

• Horisontal line <hr>• Preformatted text

– <PRE> </PRE>


Headings

• <H1>Heading 1</H1>



• Base text





Emphasis

• Bold <B> </B>

• <STRONG> </STRONG>

• Italics <I> </I>

• <EM> </EM>


Text Size

• <FONT SIZE=7> </FONT>• <FONT SIZE=6> </FONT>• <FONT SIZE=5> </FONT>• …• <FONT SIZE=2> </FONT>• <FONT SIZE=1> </FONT>

• <FONT SIZE=+4> </FONT>• <BODY><BASEFONT SIZE=4>…</BODY>


More text size

• <BIG> … </BIG>

• <SMALL> … </SMALL>

• <SUB> subscript </SUB>


Fonts

• <FONT FACE=“Arial”> </FONT>

• Arial, Helvetica, Times, Courier, …

• <TT> Tele Type </TT>

• <U> Underscore </U>

• <S> Line through </S>


Other formatting

• Changing Colours– <font color=“#000000”>

• Blinking text– <blink> </blink>


Special characters

Character Letter code Numeric code

æ æ æ

Æ &AElig,; Æ

ø ø ø

Ø Ø Ø

å å å

Å Å Å

& & &

< < <

> > >


Lists

• Numbered lists <OL> … </OL> and <LI>

<OL><LI> Bla<LI> Bla Bla<LI> More Bla Bla</OL>


More lists

• Attributed lists <OL TYPE=A>…</OL>

<OL TYPE=A><LI> Bla<LI> Bla Bla<LI> More Bla Bla</OL>

Possible values for TYPE are 1, a, A, i and I


And more lists

• Unnumbered lists <UL> … </UL>

<UL><LI> Bla<LI> Bla Bla<LI> More Bla Bla</UL>


List in lists

<OL><LI> Bla<LI> Bla Bla<UL><LI> More Bla Bla in a sublist<LI> even more Bla Bla</UL><LI> back to the first list</OL>


Definition Lists

• <DL> … <DL> , <DT> and <DD>

<DL><DT>First<DD> Bla<DT> Second<DD> Bla Bla<DT> Third<DD> More Bla Bla</DL>


Tables

• <TABLE> … </TABLE>

• <TR> Starts a table row

• <TH> Table heading (in bold)

• <TD> Table cell

• Table attributes– ALIGN, WIDTH, BORDER, BGCOLOR– CELLPADDING, CELLSPACING


Table example

<TABLE BORDER><TR><TH>Department<TH>March<TH>June<TR><TH>Comp<TD>200<TD>250<TR><TH>Eng<TD>400><TD>350</TABLE>


Hyperlinks

• Relative vs. Absolute links– Relative links = relative to the location of the page

• <a href=“page1.html”>

• <a href=“../fit/page2.html”>

– Absolute links tell exactly where the item is• <a href=http://www.cs.auc.dk/~bt/index.html>

• Clickable links– < a href=“page1.html”>Link text</a>

http://www.cs.auc.dk/~bt/index.html

http://www.cs.auc.dk/~bt/index.html


Internal links

• <A HREF=“#intro”> </A>– Notice the #

• <A NAME=“intro”> </A>


Images

• Types of images– .jpg or .gif or …

• Tags– <img src=“bt.jpg”>

• Setting image size– <img src=“bt.jpg” WIDTH=“32” HEIGHT=“32” BORDER=“0”>

• Providing alternatives– <img src=“bt.jpg” ALT=“picture of Bent”>


Forms

<Form ACTION=mailto:[email protected] METHOD=POST ENCTYPE=“text/plain”><INPUT TYPE=RESET VALUE=“Start again”><INPUT TYPE=SUBMIT VALUE=“Send this form”><TEXTAREA NAME=comments ROWS=5 COLS=40>My comments are</TEXTAREA></FORM>

mailto:[email protected]


The result


More stuff to put in forms

• <INPUT TYPE=TEXT …>– <INPUT TYPE=TEXT NAME=surname>– A single line text box

• <INPUT TYPE=PASSWORD …>– As text, but typing is not shown

• <INPUT TYPE=CHECKBOX …>– Checkboxes, more than one can be selected

• <INPUT TYPE=RADIO– Radio buttons, only one can be selected


Rounding off pages

• Return tags– In a collection of pages it is nice to be able to

navigate easily

• Mailto tags– <a href=mailto:[email protected]> Text or image </a>

mailto:[email protected]


Steps to create a web page

• Create HTML document(s)

• Create folder on a server

• Upload document(s) to folder

• View page on the Internet


Design for your target audience

• Be sure of the purpose of your web site

• Think about your target audience– What you write and how you write– Think about their connectivity– Think about possible browsers– Think about plug-ins if you use special contents

• Provide alternative contents for images


Top Ten Mistakes

• Using Frames

• Gratuitous use of Bleeding-Edge Technology

• Scrolling text and constantly animated pictures

• Complex URLs

• Long scrolling pages

• Lack of navigational support

• Non-standard link colours

• Outdated information

• Overly long download times