Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet

October 2002Bent Thomsen FIT World Wide Web Documents linked by Universal Resource Locators (URL) Example: Distributed hypertext documents

October 2002Bent Thomsen FIT Document viewing Microsoft Internet Explorer

October 2002Bent Thomsen FIT Document viewing Netscape

October 2002Bent Thomsen FIT Other browsers

October 2002Bent Thomsen FIT Browser and Server communication http request (path and parameters) HTTP answer (HTML code)

October 2002Bent Thomsen FIT 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 2002Bent Thomsen FIT HTML formatting HTML documents contain text and formatting tags Tags follow a simple rule: – string of text E.g. – What are HTML tags? I.e. like matching brackets Except a few tags like – and Note HTML tags are not case sensitive – and are the same

October 2002Bent Thomsen FIT A first example A Simple HTML Example HTML is Easy To Learn Welcome to the world of HTML. This is the first paragraph. While short, it is still a paragraph! And this is the second paragraph.

October 2002Bent Thomsen FIT 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 2002Bent Thomsen FIT 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 – What are HTML tags? Several important versions of HTML –HTML 1.0, HTML 3.2 and HTML 4.0

October 2002Bent Thomsen FIT Head Command Tags and Contains formatting and other instructions Title This is title –Places title above the tool bar Background images/colours – Scripts

October 2002Bent Thomsen FIT Body Command After command and Before

October 2002Bent Thomsen FIT Text formatting Paragraphs –The tag (and ) – Line breaks –The tag Horisontal line Preformatted text –

October 2002Bent Thomsen FIT Headings Heading 1 Heading 2 Heading 3 Base text Heading 4 Heading 5 Heading 6

October 2002Bent Thomsen FIT Emphasis Bold Italics

October 2002Bent Thomsen FIT Text Size … …

October 2002Bent Thomsen FIT More text size … subscript

October 2002Bent Thomsen FIT Fonts Arial, Helvetica, Times, Courier, … Tele Type Underscore Line through

October 2002Bent Thomsen FIT Other formatting Changing Colours – Blinking text –

October 2002Bent Thomsen FIT Special characters CharacterLetter codeNumeric code æææ Æ&AElig,;Æ øøø ØØØ ååå ÅÅÅ &&& <<< >>>

October 2002Bent Thomsen FIT Lists Numbered lists … and Bla Bla Bla More Bla Bla

October 2002Bent Thomsen FIT More lists Attributed lists … Bla Bla Bla More Bla Bla Possible values for TYPE are 1, a, A, i and I

October 2002Bent Thomsen FIT And more lists Unnumbered lists … Bla Bla Bla More Bla Bla

October 2002Bent Thomsen FIT List in lists Bla Bla Bla More Bla Bla in a sublist even more Bla Bla back to the first list

October 2002Bent Thomsen FIT Definition Lists …, and First Bla Second Bla Bla Third More Bla Bla

October 2002Bent Thomsen FIT Tables … Starts a table row Table heading (in bold) Table cell Table attributes –ALIGN, WIDTH, BORDER, BGCOLOR –CELLPADDING, CELLSPACING

October 2002Bent Thomsen FIT Table example Department March June Comp Eng 400> 350

October 2002Bent Thomsen FIT Hyperlinks Relative vs. Absolute links –Relative links = relative to the location of the page –Absolute links tell exactly where the item is Clickable links – Link text

October 2002Bent Thomsen FIT Internal links –Notice the #

October 2002Bent Thomsen FIT Images Types of images –.jpg or.gif or … Tags – Setting image size – Providing alternatives –

October 2002Bent Thomsen FIT Forms My comments are

October 2002Bent Thomsen FIT The result

October 2002Bent Thomsen FIT More stuff to put in forms – –A single line text box –As text, but typing is not shown –Checkboxes, more than one can be selected <INPUT TYPE=RADIO –Radio buttons, only one can be selected

October 2002Bent Thomsen FIT Rounding off pages Return tags –In a collection of pages it is nice to be able to navigate easily Mailto tags – Text or image

October 2002Bent Thomsen FIT 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 2002Bent Thomsen FIT 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 2002Bent Thomsen FIT 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 2002Bent Thomsen FIT