1. HTML5 Introduction to Web Programming

2. Plan of the course HTML5 Structure of a document Main HTML Tags –Headings –Paragraphs –Links –Tables –Forms –Images

3. HTML HTML – HyperText Markup Language It’s a markup language – uses tags to describe web pages Currently used version – 4.01 - http://www.w3.org/TR/html401/ - from 1999!! http://www.w3.org/TR/html401/ HTML 5 – work in progress - first draft 2008 Key ideas –less need for external plugins (like Flash) –More markup –Device independence

4. What is a html tag Keywords between “ ” There is usually a start tag and an end tag example: – … Empty tags – Attributes –An attribute is a pair of type name=“value” that is inside a tag – …

5. Guidelines for tags –Empty –Containing text or other tags text –Tags contain attributes http://... –Tags should always be written in lowercase –Tags should be properly nested –Tags should always be closed

6. Structure of a document Logical structure of a document –Title of the document –Titles of the different sections –Content Paragraphs, quoted text, code Tabular information Lists of items (ordered or unordered) navigation Very short example of document structure using Word

7. Structure of a HTML5 Document the title of the document

8. DOCTYPE: A DOCTYPE is a required preamble. DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.

9. The root of the document Contains a head element (that contains metadata) Contains a body element (that contains the content) Can have some global attributes like “lang” – specifies the content of the document is in english

10. The head section Contains data about the document - the actual document title – appears in the browser bar (mandatory) - points to a resource used by the page ( )/favicon.ico - defines meta information like keywords, content type, description – used by browsers and by spiders - contains references to scripts specifies the base URL, allowing us to define relative links

11. The body section Contains the tags that are displayed in the browser The body section SHOULD contain the content The style information should be placed in external documents (see next course) Elements are going to be presented next and we’re going to build a web page adding each element step by step

12. The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.section Examples of sections: –chapters, –the various tabbed pages in a tabbed dialog box, –the numbered sections of a thesis.

13. Example no. 1 The first example About the course About the lab

14. The article element represents a self- contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.article

15. Headings The titles of the sections H1…H6 Used by search engines to “understand” the structure of the document SHOULD NOT be used for style reasons (make text bigger and bolder) title of document – title of first section title of the first sub-section

16. Example no. 2 The second example About the course Some information about the course

17. The header element represents a group of introductory or navigational aids.header A header element is intended to usually contain the section's heading (an h1– h6 element or an hgroup element), but this is not required.headerh1 h6hgroup The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.header

18. The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.footersectioning contentsectioning root contains information about its section such as who wrote it, links to related documents, copyright data, and the like. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.footerrepresent

19. Example no. 3

20. Content and formatting this is a paragraph - passes to the next line - horizontal line - emphasized text - strong text - small text

21. The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.nav

22. Lists Ordered lists (numbered, ordered with letters or roman numbers) - Unordered lists (bulleted) – Items of the list for each of the 2 types of lists - Example: – red green –

23. Links text or image The target represents where the link should open –Missing – the same page –“_blank” – new window text or image

24. Absolute vs relative urls Absolute url: http://www.google.comhttp://www.google.com Relative url./images/1.jpg - refers to the file 1.jpg that is found in the folder images of the base/current folder If the page has a base element - the relative URL starts from the base address If the page doesn’t have a base element the relative URL starts from the URL of the current page

25. Example no. 4

26. The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.figureflow content Usually contains images, videos Can contain text/code/ - The figcaption element represents a caption or legend for the rest of the contents of the figcaption element's parent figure elementfigcaption figure

27. Images The “alt” attribute is mandatory in XHTML! the src can be a full url: http://host/path_to_file or a path relative to the current page. http://host/path_to_file

28. A video element is used for playing videos or movies, and audio files with captions.video some attributes: –src = the address of the file –poster = the address of an image to show if the video is not available –autoplay= boolean; if present the video will be played as soon as it is available –controls = boolean; if present the controls will be displayed –muted=boolean; if present the sound will be muted –width, height = the dimensions of the video frame

29. Example no. 5

30. Tables Tables should ONLY be used for presenting tabular information They should not be used for design – table cell –

31. Tables colspan –used to have a cell that spans on multiple columns –Attribute of the td element rowspan –used to have a row span on multiple columns –Attribute of the tr element Border –If the table has a border or not –Attribute of the table element

32. Tables example

33. Forms Necessary to collect and submit data to the server A form contains different kinds of input

34. The label represents a caption in a user interface.label can be associated with a specific form control, known as the labeled control –Can use the for attribute for specifying the labeled control –Can put the form control inside the label element itself.

35. Form Inputs - see next slide Text area - used for areas of text Submit - used to submit the form to the server

37. Example no. 6

38. Others Html comments –Whenever you write code you need to write comments

39. Entities/Symbols available to display special characters like <> @ &character_name; or &#character_number; http://www.w3schools.com/html/html_entities.asp http://www.w3schools.com/html/html_symbols.asp

40. Conclusions In this course there are only the most important tags; more of them can be discovered as you work HTML should be used for presenting content in web pages The tags should be used according to their semantics

41. References http://www.w3.org/TR/html5/ HTML5 tutorial on w3schools.com