1. Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet

2. October 2002Bent Thomsen FIT - 2-22 World Wide Web Documents linked by Universal Resource Locators (URL) Example: http://www.but.auc.dk Distributed hypertext documents

3. October 2002Bent Thomsen FIT - 2-23 Document viewing Microsoft Internet Explorer

4. October 2002Bent Thomsen FIT - 2-24 Document viewing Netscape

5. October 2002Bent Thomsen FIT - 2-25 Other browsers

6. October 2002Bent Thomsen FIT - 2-26 Browser and Server communication http request (path and parameters) HTTP answer (HTML code)

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

8. October 2002Bent Thomsen FIT - 2-28 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

9. October 2002Bent Thomsen FIT - 2-29 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.

10. October 2002Bent Thomsen FIT - 2-210 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

11. October 2002Bent Thomsen FIT - 2-211 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

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

13. October 2002Bent Thomsen FIT - 2-213 Body Command After command and Before

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

15. October 2002Bent Thomsen FIT - 2-215 Headings Heading 1 Heading 2 Heading 3 Base text Heading 4 Heading 5 Heading 6

16. October 2002Bent Thomsen FIT - 2-216 Emphasis Bold Italics

17. October 2002Bent Thomsen FIT - 2-217 Text Size … …

18. October 2002Bent Thomsen FIT - 2-218 More text size … subscript

19. October 2002Bent Thomsen FIT - 2-219 Fonts Arial, Helvetica, Times, Courier, … Tele Type Underscore Line through

20. October 2002Bent Thomsen FIT - 2-220 Other formatting Changing Colours – Blinking text –

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

22. October 2002Bent Thomsen FIT - 2-222 Lists Numbered lists … and Bla Bla Bla More Bla Bla

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

24. October 2002Bent Thomsen FIT - 2-224 And more lists Unnumbered lists … Bla Bla Bla More Bla Bla

25. October 2002Bent Thomsen FIT - 2-225 List in lists Bla Bla Bla More Bla Bla in a sublist even more Bla Bla back to the first list

26. October 2002Bent Thomsen FIT - 2-226 Definition Lists …, and First Bla Second Bla Bla Third More Bla Bla

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

28. October 2002Bent Thomsen FIT - 2-228 Table example Department March June Comp 200 250 Eng 400> 350

29. October 2002Bent Thomsen FIT - 2-229 Hyperlinks Relative vs. Absolute links –Relative links = relative to the location of the page –Absolute links tell exactly where the item is http://www.cs.auc.dk/~bt/index.html Clickable links – Link text

30. October 2002Bent Thomsen FIT - 2-230 Internal links –Notice the #

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

32. October 2002Bent Thomsen FIT - 2-232 Forms mailto:bt@but.auc.dk My comments are

33. October 2002Bent Thomsen FIT - 2-233 The result

34. October 2002Bent Thomsen FIT - 2-234 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

35. October 2002Bent Thomsen FIT - 2-235 Rounding off pages Return tags –In a collection of pages it is nice to be able to navigate easily Mailto tags – Text or image mailto:bt@cs.auc.dk

36. October 2002Bent Thomsen FIT - 2-236 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

37. October 2002Bent Thomsen FIT - 2-237 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

38. October 2002Bent Thomsen FIT - 2-238 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

39. October 2002Bent Thomsen FIT - 2-239