html5 introduction to web programming. plan of the course html5 structure of a document main html...
DESCRIPTION
HTML HTML – HyperText Markup Language It’s a markup language – uses tags to describe web pages Currently used version – from 1999!! HTML 5 – work in progress - first draft 2008 Key ideas –less need for external plugins (like Flash) –More markup –Device independenceTRANSCRIPT
![Page 1: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/1.jpg)
HTML5
Introduction to Web Programming
![Page 2: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/2.jpg)
Plan of the course
• HTML5• Structure of a document• Main HTML Tags
– Headings– Paragraphs– Links– Tables– Forms– Images
![Page 3: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/4.jpg)
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>
![Page 5: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/6.jpg)
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
![Page 7: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/7.jpg)
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>
![Page 8: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/8.jpg)
<!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.
![Page 9: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/9.jpg)
<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
![Page 10: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/10.jpg)
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
![Page 11: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/11.jpg)
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
![Page 12: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/12.jpg)
<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.
![Page 13: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/13.jpg)
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>
![Page 14: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/14.jpg)
<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.
![Page 15: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/15.jpg)
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>
![Page 16: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/16.jpg)
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>
![Page 17: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/17.jpg)
<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.
![Page 18: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/18.jpg)
<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.
![Page 19: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/19.jpg)
Example no. 3
![Page 20: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/20.jpg)
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>
![Page 21: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/21.jpg)
<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.
![Page 22: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/22.jpg)
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>
![Page 23: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/23.jpg)
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>
![Page 24: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/24.jpg)
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
![Page 25: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/25.jpg)
Example no. 4
![Page 26: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/26.jpg)
<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
![Page 27: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/27.jpg)
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.
![Page 28: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/28.jpg)
<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
![Page 29: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/29.jpg)
Example no. 5
![Page 30: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/30.jpg)
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>
![Page 31: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/31.jpg)
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
![Page 32: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/32.jpg)
Tables example
![Page 33: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/33.jpg)
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
![Page 34: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/34.jpg)
<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.
![Page 35: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/35.jpg)
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
![Page 36: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/36.jpg)
![Page 37: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/37.jpg)
Example no. 6
![Page 38: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/38.jpg)
Others
• Html comments– Whenever you write code you need to write
comments• <!-- this is a comment in html -->
![Page 39: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/39.jpg)
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
![Page 40: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/40.jpg)
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
![Page 41: HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images](https://reader033.vdocuments.mx/reader033/viewer/2022052712/5a4d1bbb7f8b9ab0599d0afd/html5/thumbnails/41.jpg)
References
• http://www.w3.org/TR/html5/• HTML5 tutorial on w3schools.com