Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet.
-
Upload
briana-toone -
Category
Documents
-
view
220 -
download
1
Transcript of 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
October 2002 Bent Thomsen FIT - 2-2 3
Document viewing Microsoft Internet Explorer
October 2002 Bent Thomsen FIT - 2-2 4
Document viewing Netscape
October 2002 Bent Thomsen FIT - 2-2 5
Other browsers
October 2002 Bent Thomsen FIT - 2-2 6
Browser and Server communication
http request (path and parameters)
HTTP answer(HTML code)
October 2002 Bent Thomsen FIT - 2-2 7
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
October 2002 Bent Thomsen FIT - 2-2 8
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
October 2002 Bent Thomsen FIT - 2-2 9
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>
October 2002 Bent Thomsen FIT - 2-2 10
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
October 2002 Bent Thomsen FIT - 2-2 11
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
October 2002 Bent Thomsen FIT - 2-2 12
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
October 2002 Bent Thomsen FIT - 2-2 13
Body Command
• After <html><head></head> command
• <body> and </body>• Before </html>
October 2002 Bent Thomsen FIT - 2-2 14
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>
October 2002 Bent Thomsen FIT - 2-2 15
Headings
• <H1>Heading 1</H1>
• <H2>Heading 2</H2>
• <H3>Heading 3</H3>
• Base text
• <H4>Heading 4</H4>
• <H5>Heading 5</H5>
• <H6>Heading 6</H6>
October 2002 Bent Thomsen FIT - 2-2 16
Emphasis
• Bold <B> </B>
• <STRONG> </STRONG>
• Italics <I> </I>
• <EM> </EM>
October 2002 Bent Thomsen FIT - 2-2 17
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>
October 2002 Bent Thomsen FIT - 2-2 18
More text size
• <BIG> … </BIG>
• <SMALL> … </SMALL>
• <SUB> subscript </SUB>
October 2002 Bent Thomsen FIT - 2-2 19
Fonts
• <FONT FACE=“Arial”> </FONT>
• Arial, Helvetica, Times, Courier, …
• <TT> Tele Type </TT>
• <U> Underscore </U>
• <S> Line through </S>
October 2002 Bent Thomsen FIT - 2-2 20
Other formatting
• Changing Colours– <font color=“#000000”>
• Blinking text– <blink> </blink>
October 2002 Bent Thomsen FIT - 2-2 21
Special characters
Character Letter code Numeric code
æ æ æ
Æ Æ,; Æ
ø ø ø
Ø Ø Ø
å å å
Å Å Å
& & &
< < <
> > >
October 2002 Bent Thomsen FIT - 2-2 22
Lists
• Numbered lists <OL> … </OL> and <LI>
<OL><LI> Bla<LI> Bla Bla<LI> More Bla Bla</OL>
October 2002 Bent Thomsen FIT - 2-2 23
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
October 2002 Bent Thomsen FIT - 2-2 24
And more lists
• Unnumbered lists <UL> … </UL>
<UL><LI> Bla<LI> Bla Bla<LI> More Bla Bla</UL>
October 2002 Bent Thomsen FIT - 2-2 25
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>
October 2002 Bent Thomsen FIT - 2-2 26
Definition Lists
• <DL> … <DL> , <DT> and <DD>
<DL><DT>First<DD> Bla<DT> Second<DD> Bla Bla<DT> Third<DD> More Bla Bla</DL>
October 2002 Bent Thomsen FIT - 2-2 27
Tables
• <TABLE> … </TABLE>
• <TR> Starts a table row
• <TH> Table heading (in bold)
• <TD> Table cell
• Table attributes– ALIGN, WIDTH, BORDER, BGCOLOR– CELLPADDING, CELLSPACING
October 2002 Bent Thomsen FIT - 2-2 28
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>
October 2002 Bent Thomsen FIT - 2-2 29
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>
October 2002 Bent Thomsen FIT - 2-2 30
Internal links
• <A HREF=“#intro”> </A>– Notice the #
• <A NAME=“intro”> </A>
October 2002 Bent Thomsen FIT - 2-2 31
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”>
October 2002 Bent Thomsen FIT - 2-2 32
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>
October 2002 Bent Thomsen FIT - 2-2 33
The result
October 2002 Bent Thomsen FIT - 2-2 34
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
October 2002 Bent Thomsen FIT - 2-2 35
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>
October 2002 Bent Thomsen FIT - 2-2 36
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
October 2002 Bent Thomsen FIT - 2-2 37
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
October 2002 Bent Thomsen FIT - 2-2 38
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
October 2002 Bent Thomsen FIT - 2-2 39