Embed Size (px)
DESCRIPTION
Citation preview
HTML5
Introduction to Web Programming
Plan of the course
• HTML5• Structure of a document• Main HTML Tags
– Headings– Paragraphs– Links– Tables– Forms– Images
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
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>
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
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
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>
<!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.
<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
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
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
<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.
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>
<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.
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>
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>
<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.
<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.
Example no. 3
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>
<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.
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>
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>
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
Example no. 4
<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
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.
<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
Example no. 5
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>
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
Tables example
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
<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.
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
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 should be used for presenting content in web pages
• The tags should be used according to their semantics
References
• http://www.w3.org/TR/html5/
• HTML5 tutorial on w3schools.com
![Very Brief Intro to HTML5 [TC Dojo Open Session]](https://img.pdfslide.us/doc/110x75/54c649174a795906378b465f/very-brief-intro-to-html5-tc-dojo-open-session.jpg)
![[Flash to html5 conversion] 4 Questions to Ask Before Switching to HTML5](https://img.pdfslide.us/doc/110x75/546c9885af795971298b4fb3/flash-to-html5-conversion-4-questions-to-ask-before-switching-to-html5.jpg)
![[HTML5 CONVERSION] BEST HTML5 TEMPLATES TO INSPIRE YOU](https://img.pdfslide.us/doc/110x75/548cfd0eb47959e70c8b6512/html5-conversion-best-html5-templates-to-inspire-you.jpg)
