Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Intro to HTML5

5.507 Aufrufe

Veröffentlicht am

Veröffentlicht in: Bildung, Technologie
  • Als Erste(r) kommentieren

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 - http://www.w3.org/TR/html401/ - 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: http://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. 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 • http://www.w3.org/TR/html5/ • HTML5 tutorial on w3schools.com