introduction to html bent thomsen institut for datalogi aalborg universitet
TRANSCRIPT
![Page 1: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/1.jpg)
Introduction to HTML
Bent Thomsen
Institut for Datalogi
Aalborg Universitet
![Page 2: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/3.jpg)
October 2002 Bent Thomsen FIT - 2-2 3
Document viewing Microsoft Internet Explorer
![Page 4: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/4.jpg)
October 2002 Bent Thomsen FIT - 2-2 4
Document viewing Netscape
![Page 5: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/5.jpg)
October 2002 Bent Thomsen FIT - 2-2 5
Other browsers
![Page 6: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/6.jpg)
October 2002 Bent Thomsen FIT - 2-2 6
Browser and Server communication
http request (path and parameters)
HTTP answer(HTML code)
![Page 7: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/9.jpg)
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>
![Page 10: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/13.jpg)
October 2002 Bent Thomsen FIT - 2-2 13
Body Command
• After <html><head></head> command
• <body> and </body>• Before </html>
![Page 14: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/14.jpg)
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>
![Page 15: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/15.jpg)
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>
![Page 16: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/16.jpg)
October 2002 Bent Thomsen FIT - 2-2 16
Emphasis
• Bold <B> </B>
• <STRONG> </STRONG>
• Italics <I> </I>
• <EM> </EM>
![Page 17: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/17.jpg)
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>
![Page 18: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/18.jpg)
October 2002 Bent Thomsen FIT - 2-2 18
More text size
• <BIG> … </BIG>
• <SMALL> … </SMALL>
• <SUB> subscript </SUB>
![Page 19: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/19.jpg)
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>
![Page 20: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/20.jpg)
October 2002 Bent Thomsen FIT - 2-2 20
Other formatting
• Changing Colours– <font color=“#000000”>
• Blinking text– <blink> </blink>
![Page 21: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/21.jpg)
October 2002 Bent Thomsen FIT - 2-2 21
Special characters
Character Letter code Numeric code
æ æ æ
Æ Æ,; Æ
ø ø ø
Ø Ø Ø
å å å
Å Å Å
& & &
< < <
> > >
![Page 22: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/22.jpg)
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>
![Page 23: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/24.jpg)
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>
![Page 25: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/25.jpg)
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>
![Page 26: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/26.jpg)
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>
![Page 27: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/27.jpg)
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
![Page 28: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/28.jpg)
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>
![Page 29: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/29.jpg)
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>
![Page 30: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/30.jpg)
October 2002 Bent Thomsen FIT - 2-2 30
Internal links
• <A HREF=“#intro”> </A>– Notice the #
• <A NAME=“intro”> </A>
![Page 31: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/31.jpg)
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”>
![Page 32: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/32.jpg)
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>
![Page 33: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/33.jpg)
October 2002 Bent Thomsen FIT - 2-2 33
The result
![Page 34: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/34.jpg)
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
![Page 35: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/35.jpg)
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>
![Page 36: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/36.jpg)
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
![Page 37: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/37.jpg)
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
![Page 38: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/38.jpg)
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
![Page 39: Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649c785503460f9492d600/html5/thumbnails/39.jpg)
October 2002 Bent Thomsen FIT - 2-2 39