Embed Size (px)
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 independence
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 -->
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
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
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://img.pdfslide.us/doc/110x75/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
