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
less need for external plugins (like Flash)
What is a html tag
Keywords between “<“ and “>”
There is usually a start tag and an end tag
<tag>… </ tag>
An attribute is a pair of type name=“value” that is inside a tag
<tag attribute=“value”> … </tag>
Guidelines for tags
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
Paragraphs, quoted text, code
Lists of items (ordered or unordered)
Very short example of document structure using Word
Structure of a HTML5 Document
<title>the title of the document</title>
<!-- the content of the document -->
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.
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
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:
the various tabbed pages in a tabbed dialog box,
the numbered sections of a thesis.
Example no. 1
<title>The first example</title>
<section> About the course </section>
<section> About the lab </section>
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.
The titles of the sections
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
<title>The second example</title>
<h2>About the course</h2>
<p>Some information about the course</p>
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.
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
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.
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>
<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
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
<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.
A video element is used for playing videos or movies, and audio files with captions.
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 should ONLY be used for presenting tabular information
They should not be used for design
<tr> <!--table row) -->
<td > table cell</td>
used to have a cell that spans on multiple columns
Attribute of the td element
used to have a row span on multiple columns
Attribute of the tr element
If the table has a border or not
Attribute of the table element
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
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.
<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
Whenever you write code you need to write comments
<!-- this is a comment in html -->
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