HTML5
Introduction to Web Programming
Plan of the course
• HTML5
• Structure of a document
• Main HTML Tags
– Headings
– Paragraphs
– Links
– Tables
– Forms
– I...
HTML
• HTML – HyperText Markup Language
• It’s a markup language – uses tags to describe
web pages
• Currently used versio...
What is a html tag
• Keywords between “<“ and “>”
• There is usually a start tag and an end tag
• example:
– <tag>…</tag>
...
Guidelines for tags
– Empty <br/>
– Containing text or other tags <h1>text</h1>
– Tags contain attributes <img src=“http:/...
Structure of a document
• Logical structure of a document
– Title of the document
– Titles of the different sections
– Con...
Structure of a HTML5 Document
<!DOCTYPE html>
<html>
<head>
<title>the title of the document</title>
</head>
<body>
<!-- t...
<!DOCTYPE html>
• DOCTYPE:
• A DOCTYPE is a required preamble.
• DOCTYPEs are required for legacy
reasons. When omitted, b...
<html>
• The root of the document
• Contains a head element (that contains
metadata)
• Contains a body element (that conta...
The head section
• Contains data about the document
• <title> - the actual document title – appears in
the browser bar (ma...
The body section
• Contains the tags that are displayed in the
browser
• The body section SHOULD contain the
content
• The...
<section>
• The section element represents a generic
section of a document or application. A
section, in this context, is ...
Example no. 1
<!DOCTYPE html>
<html>
<head>
<title>The first example</title>
</head>
<body >
<section> About the course </...
<article>
• The article element represents a self-
contained composition in a document,
page, application, or site and tha...
Headings
• The titles of the sections
• H1…H6
• Used by search engines to “understand”
the structure of the document
• SHO...
Example no. 2
<!DOCTYPE html>
<html>
<head>
<title>The second example</title>
</head>
<body >
<section>
<h2>About the cour...
<header>
• The header element represents a group of
introductory or navigational aids.
• A header element is intended to u...
<footer>
• The footer element represents a footer for
its nearest ancestor sectioning content or
sectioning root element.
...
Example no. 3
Content and formatting
• <p>this is a paragraph</p>
• <br/> - passes to the next line
• <hr> - horizontal line
• <em> - em...
<nav>
• The nav element represents a section of a 
page that links to other pages or to parts 
within the page: a section ...
Lists
• Ordered lists (numbered, ordered with letters or 
roman numbers) - <ol>
• Unordered lists (bulleted) – <ul>
• Item...
Links
• <a href=“absolute or relative url” target=“”>text 
or image</a>
• The target represents where the link should 
ope...
Absolute vs relative urls
• Absolute url: http://www.google.com 
• Relative url ./images/1.jpg - refers to the 
file 1.jpg...
Example no. 4
<figure>
• The figure element represents some flow content, 
optionally with a caption, that is self-contained and is 
typ...
Images
• <img src=“absolute or relative url” 
alt=“alternative text in case the image 
can’t be displayed or can’t be 
und...
<video>
• A video element is used for playing videos or movies, 
and audio files with captions.
• some attributes:
– src =...
Example no. 5
Tables
• Tables should ONLY be used for 
presenting tabular information
• They should not be used for design
• <table>
– <...
Tables
• colspan
– used to have a cell that spans on multiple
columns
– Attribute of the td element
• rowspan
– used to ha...
Tables example
Forms
• Necessary to collect and submit data to
the server
• <form action=“the server script that
handles the submitted da...
<label>
• The label represents a caption in a user
interface.
• can be associated with a specific form
control, known as t...
Form Inputs
• <input type=“the type of input”> - see next
slide
• Text area <textarea name=“”></textarea>
- used for areas...
Example no. 6
Others
• Html comments
– Whenever you write code you need to write
comments
• <!-- this is a comment in html -->
Conclusions
• In this course there are only the most
important tags; more of them can be
discovered as you work
• HTML sho...
References
• http://www.w3.org/TR/html5/
• HTML5 tutorial on w3schools.com
Intro to HTML5
Upcoming SlideShare
Loading in …5
×

Intro to HTML5

4,933
-1

Published on

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,933
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×