Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet.

Similar presentations


Presentation on theme: "Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet."— Presentation transcript:

1 Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet

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

3 October 2002Bent Thomsen FIT Document viewing Microsoft Internet Explorer

4 October 2002Bent Thomsen FIT Document viewing Netscape

5 October 2002Bent Thomsen FIT Other browsers

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

7 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

8 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

9 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.

10 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

11 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

12 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

13 October 2002Bent Thomsen FIT Body Command After command and Before

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

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

16 October 2002Bent Thomsen FIT Emphasis Bold Italics

17 October 2002Bent Thomsen FIT Text Size … …

18 October 2002Bent Thomsen FIT More text size … subscript

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

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

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

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

23 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

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

25 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

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

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

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

29 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

30 October 2002Bent Thomsen FIT Internal links –Notice the #

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

32 October 2002Bent Thomsen FIT Forms My comments are

33 October 2002Bent Thomsen FIT The result

34 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

35 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

36 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

37 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

38 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

39 October 2002Bent Thomsen FIT


Download ppt "Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet."

Similar presentations


Ads by Google