Intro to HTML5

5 416 vues

Publié le

Publié dans : Formation, Technologie
0 commentaire
1 j’aime
  • Soyez le premier à commenter

Aucun téléchargement
Nombre de vues
5 416
Sur SlideShare
Issues des intégrations
4 104
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Intro to HTML5

  1. 1. HTML5 Introduction to Web Programming
  2. 2. Plan of the course • HTML5 • Structure of a document • Main HTML Tags – Headings – Paragraphs – Links – Tables – Forms – Images
  3. 3. HTML • HTML – HyperText Markup Language • It’s a markup language – uses tags to describe web pages • Currently used version – 4.01 - - from 1999!! • HTML 5 – work in progress - first draft 2008 • Key ideas – less need for external plugins (like Flash) – More markup – Device independence
  4. 4. What is a html tag • Keywords between “<“ and “>” • There is usually a start tag and an end tag • example: – <tag>…</tag> • Empty tags – <tag /> • Attributes – An attribute is a pair of type name=“value” that is inside a tag – <tag attribute=“value”> … </tag>
  5. 5. Guidelines for tags – Empty <br/> – Containing text or other tags <h1>text</h1> – Tags contain attributes <img src=“http://...”/> – Tags should always be written in lowercase – Tags should be properly nested – Tags should always be closed
  6. 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. 7. Structure of a HTML5 Document <!DOCTYPE html> <html> <head> <title>the title of the document</title> </head> <body> <!-- the content of the document --> </body> </html>
  8. 8. <!DOCTYPE html> • 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. 9. <html> • 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” – <html lang=“en”> specifies the content of the document is in english
  10. 10. The head section • Contains data about the document • <title> - the actual document title – appears in the browser bar (mandatory) • <link> - points to a resource used by the page (<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />) • <meta> - defines meta information like keywords, content type, description – used by browsers and by spiders • <script> - contains references to scripts • <base> specifies the base URL, allowing us to define relative links
  11. 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. 12. <section> • 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. • Examples of sections: – chapters, – the various tabbed pages in a tabbed dialog box, – the numbered sections of a thesis.
  13. 13. Example no. 1 <!DOCTYPE html> <html> <head> <title>The first example</title> </head> <body > <section> About the course </section> <section> About the lab </section> </body> </html>
  14. 14. <article> • 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.
  15. 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) • <h1>title of document</h1> – <h2> title of first section</h2> • <h3> title of the first sub-section</h3>
  16. 16. Example no. 2 <!DOCTYPE html> <html> <head> <title>The second example</title> </head> <body > <section> <h2>About the course</h2> <p>Some information about the course</p> </section> </body> </html>
  17. 17. <header> • The header element represents a group of introductory or navigational aids. • 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.  • The header element can also be used  to wrap a section's table of contents, a  search form, or any relevant logos.
  18. 18. <footer> • The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. • 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.
  19. 19. Example no. 3
  20. 20. Content and formatting • <p>this is a paragraph</p> • <br/> - passes to the next line • <hr> - horizontal line • <em> - emphasized text • <strong> - strong text • <small> - small text • <sub> <sup>
  21. 21. <nav> • 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.
  22. 22. Lists • Ordered lists (numbered, ordered with letters or  roman numbers) - <ol> • Unordered lists (bulleted) – <ul> • Items of the list for each of the 2 types of lists -  <li> • Example: – <ul> • <li>red</li> • <li>green</li> – </ul>
  23. 23. Links • <a href=“absolute or relative url” target=“”>text  or image</a> • The target represents where the link should  open – Missing – the same page – “_blank” – new window • <a name=“name of an anchor in the same  document> text or image </a> • <a href=“#name of an anchor”>text or  image</a>
  24. 24. Absolute vs relative urls • Absolute url:  • 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. 25. Example no. 4
  26. 26. <figure> • 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. • Usually contains images, videos • Can contain text/code/<pre> • <figcaption> - The figcaption element represents a  caption or legend for the rest of the contents of  the figcaption element's parent figure element
  27. 27. Images • <img src=“absolute or relative url”  alt=“alternative text in case the image  can’t be displayed or can’t be  understood”/> • 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.
  28. 28. <video> • A video element is used for playing videos or movies,  and audio files with captions. • 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. 29. Example no. 5
  30. 30. Tables • Tables should ONLY be used for  presenting tabular information • They should not be used for design • <table> – <tr> <!--table row) --> • <td > table cell</td> – </tr> • </table>
  31. 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. 32. Tables example
  33. 33. Forms • Necessary to collect and submit data to the server • <form action=“the server script that handles the submitted data” method=“the HTTP request method – GET or POST”> • A form contains different kinds of input
  34. 34. <label> • The label represents a caption in a user interface. • 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. 35. Form Inputs • <input type=“the type of input”> - see next slide • Text area <textarea name=“”></textarea> - used for areas of text • Submit <input type=“submit” value=“name on the button”/> - used to submit the form to the server
  36. 36. Example no. 6
  37. 37. Others • Html comments – Whenever you write code you need to write comments • <!-- this is a comment in html -->
  38. 38. 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
  39. 39. References • • HTML5 tutorial on