1. HTML - basic tags - How to learn more

2. What is HTML? HyperText Markup Language HTML5: – Recommended by the W3C

3. HTML “ HTML is the lingua franca for publishing hypertext on the World Wide Web ” Structure and format of documents defined by. Enables connections between documents through hyperlinks http://www.w3.org/MarkUp/

4. HTML Earlier version of HTML (HTML 4.1) offered : – text – multimedia – hyperlink features – scripting languages – style sheets

5. HTML 4 Strengths: Standard (ISO 8879) Text-based => interoperability Issues: Consequences of popularity and flexibility (sloppy syntax) Explosion of device types (Mobile phones, PDAs, appliances, etc)

6. HTML – conceptually Attractive proposition: Basic set of HTML tags Extension framework

7. HTML5 – In practice Today ’ s standard for web development Backwards compatible with earlier versions Good browser compatibility Extensions developed for non-standard devices Makes programming for accessibility easier Allows separation of content and style (e.g.for mobile delivery) Easy to learn – Countless resources available – http://www.w3schools.com http://www.w3schools.com – http://validator.w3.org/ http://validator.w3.org/

8. Historical summary SGML XML HTML XHTML

9. Basic example Hello World!

10. Hello World

11. Another basic example

12. Hello world 2 Some formatted text This is a paragraph. Text can be formatted easily: italic, Bold, underlined, italic and underlined (note that underlining isn't a good stylistic choice on the web, guess why?). A bullet list Apples Pears Bananas Oranges Author: Grégory Leplâtre

13. Hello world 2 – (1) (…) Some formatted text (…)

14. Hello world 2 – (2) (…) This is a paragraph. Text can be formatted easily: italic, Bold, underlined, italic and underlined (note that underlining isn't a good stylistic choice on the web, guess why?). (…)

15. Hello world 2 – (3) (…) Apples Pears Bananas Oranges (…)

16. (…) Author: Grégory Leplâtre (…)

17. What we have learnt Links: – (not yet) Structural tags: –,,,,, Formatting tags: –,, Graphical elements: – Special characters: – é â

18. HTML components 1.A DOCTYPE: 2. The tag (must be the first tag of the document, after 1) 3. and tags. 4.The head must contain a character set definition and a.

19. 5. tag The title appears at the top of the browser. Can be used by search engines. Literally: information about (the page). A typical page will contain several of these tags. Works with name/content pairs: specifies the style sheet to be used (more on this in the CSS lecture)

20. Title My first web page

21. Character set definition

22. 5. tag The content of the page must be included within the tag.

23. Proper HTML Hello World!

24. HTML5 Hello World! Hello World! page Hello World!

25. HTML tags

26. Headings,, … (h1 largest font, h6, smallest font) Example: Some Basic Examples Example 1: formatting http://www.w3schools.com/tags/tag_hn.asp

27. Spacing – non-breaking space: forces the browser to display a white space. starts a new paragraph (which must be concluded with a ). - line break: starts a new line.

28. Text formatting Bold: or Italics: or Underline: Preformatted text:

29. Lists There are three types of lists: Ordered lists – numbered Unordered lists – bullet Definition lists

30. Ordered lists Apples Bananas Oranges Pears http://www.w3schools.com/tags/tag_ol.asp

31. Unordered lists Apples Bananas Oranges Pears http://www.w3schools.com/tags/tag_ul.asp

32. Nested lists 1.Starters Sea food chowder Soupe du jour Goats cheese salad 2.Main courses Haggis Sea bass Risotto 3.Sweets – Chocolate mousse – Carrot cake – Apple tart

33. Tables 2-dimensional representation of data: tag to create a table, contains … tag for each line, which contains … tag for each column In addition: table headings Formatting: Tag attributes

34. Table example 100 200 300 400 500 600

35. Tables – Important attributes border: border width (0 used frequently) cellspacing: space between cells cellpadding: space between the cell walls and content width: width of the table (% or pixels) http://www.w3schools.com/tags/tag_table.asp http://www.w3schools.com/tags/tag_tr.asp http://www.w3schools.com/tags/tag_td.asp

36. Links One tag, four types of links: 1.Link to a location on the same page 2.Link to a document relative to the current document 3.Absolute link to a document 4.Email link General format: Text to display The above HTML code will look like: Text to display

37. 1. Link within document HTML codeOutcome of HTML in your browser ……. 1. Introduction 2. Discussion …… Introduction ……. Discussion ……. 1. Introduction 2. Discussion Introduction …… Discussion

38. 1. Link within document Two steps: 1. defines a hypertext link that specifies where you want to go within a document Go to part 1 2. defines the place where you will jump to with a document when you click on the above link Part 1 is here The # sign indicates a location within a document and must be included.

39. 2. Relative link Link to a document on the same server: link text Example: teaching main page

40. 3. Absolute link Link to a document on the same server: link text Example: teaching main page

41. Images Images are added using the tag: Pictures can be used as links: http://www.w3schools.com/tags/tag_img.asp

42. Audio and Video? HTML doesn ’ t support these. Links to audio or video files are possible. Ways to embed media in web pages involves plugins … For multimedia students next year …

43. Final Exercise My Web Page My name is: Xxxxxx Xxxxxxx My characteristics are: Height180 cm Weight65 Kg Age22

44. Summary eXtensible Learning Process – Simple basic principle (tags) – Expand your tag knowledge (w3schools) Practice – Next practical – At home

45. Next week Laboratory exercise – HTML Lecture – Styling (CSS+ design issues)