Scribd
Upload
40 views

L4 HTML5

This document provides an overview of HTML5 including: - New features such as semantic elements, forms 2.0, local storage, web sockets, and audio/video playback - HTML5 is more flexible than previous versions by making uppercase tags, optional quotes, and self-closing tags valid - It introduces new semantic elements like <header>, <footer>, and <section> while deprecating some old elements - The document also reviews basic HTML tags and tags for tables, and provides examples of empty HTML documents and using <script> and <link> tags in HTML5.

Uploaded by

chinazasomto02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

L4 HTML5

This document provides an overview of HTML5 including: - New features such as semantic elements, forms 2.0, local storage, web sockets, and audio/video playback - HTML5 is more flexible than previous versions by making uppercase tags, optional quotes, and self-closing tags valid - It introduces new semantic elements like <header>, <footer>, and <section> while deprecating some old elements - The document also reviews basic HTML tags and tags for tables, and provides examples of empty HTML documents and using <script> and <link> tags in HTML5.

Uploaded by

chinazasomto02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Lecture 4: Introduction to HTML5

Dr. Victor ODUMUYIWA


[email protected]
Learning Objectives

At the end of this lecture, you should be able to:

• Demonstrate a good understanding of how HTML is used to structure documents

• Create HTML documents


HTML Document Structure

Opening tag Closing tag Functions


<html> </html> Shows that the document is written in HTML code

<head> </head> Provides information on the website.

<title> </title> Displays the title on the web browser window.

<body> </body> Indicates beginning and end of website content body


HTML Tags

• The HTML element is everything from the start tag to the end tag e.g. <h1>Name</h1>

• HTML elements with no content are called empty elements e.g. <br>, <hr>, <link>, <meta> etc.

• Empty elements in HTML4 and below can be closed in the opening tag like this <br/>

• Attributes may only be specified within start tags and must never be used in end tags.

Element Attribute Value

<body background= “design.jpg”>


An Empty HTML Document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title> My First Page </title>
</head>
<body>

</body>
</html>
SGML, HTML and DTD

• SGML (Standard Generalized Markup Language) is a standard for how to specify a document markup language
or tag set.

• All HTML versions before HTML5 are based on SGML

• They (HTML4.01, XHTML1,1 and below) need a DTD (Document Type Definition).

• HTML documents are required to start by specifying a DTD using the <doctype> tag.

• <doctype> was meant originally to enable parsing and validation of HTML documents by SGML tools based on
the DTD.

• “The DTD to which the DOCTYPE refers contains a machine-readable grammar specifying the permitted and
prohibited content for a document conforming to such a DTD” (Wikipedia).

• Meanwhile, browsers do not implement HTML as an application of SGML hence they do not read the DTD.
Doctype Tag

<!DOCTYPE> is an instruction to the web browser about what version of


HTML the page is written in.
Doctype Tag Contd(1)

HTML4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated
elements (like font). Framesets are not allowed.

HTML 4.01 Transitional


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated
elements (like font). Framesets are not allowed.
Doctype Tag Contd(2)

HTML 4.01 Frameset


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

XHTML 1.0 Strict


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated
elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
Doctype Tag Contd(3)

XHTML 1.0 Transitional


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated
elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

XHTML 1.0 Frameset


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
Doctype Tag Contd(4)

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby
support for East-Asian languages).

HTML5
<!DOCTYPE html>
Basic HTML Tags

Opening tag Closing tag Functions

<html> </html> Shows that the document is written in HTML code


<head> </head> Provides information on the website.
<title> </title> Displays the title on the web browser window.
<body> </body> Indicates beginning and end of website content body
<H1> to <H6> </h1> to </h6> defines headings
<p> </p> defines paragraphs
<!--...--> allows to add comments
<hr> </hr> Defines a thematic change in the content. It actually adds
an horizontal line
Table Tags
Opening Tag Closing Tag Function
<table> </table> Defines a table
<caption> </caption> Defines a table caption
<th> </th> Defines a header cell in a table
<tr> </tr> Defines a row in a table
<td> <td> Defines a cell in a table
<thead> <thead> Groups the header content in a table
<tbody> <tbody> Groups the body content in a table
<tfoot> <tfoot> Groups the footer content in a table
Specifies column properties for each column within a <colgroup>
<col>
element

<colgroup> </colgroup> Specifies a group of one or more columns in a table for formatting
Sample HTML Document

<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>Matric</th>
<th>Surname</th>
<th>Firstname</th>
</tr>
<tr>
<td>3476896</td>
<td>Odumuyiwa</td>
<td>Victor</td>
</tr>
</table>
HTML 5

• HTML5 is a product of the cooperation between the World Wide Web Consortium (W3C) and the
Web Hypertext Application Technology Working Group (WHATWG).

• It incorporates features like video playback and drag-and-drop which aforetime depended on third
party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears

• It introduced some new elements and deprecated some old elements


New Features in HTML5

• New Semantic Elements: These are like <header>, <footer>, and <section>.
• Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input>
tag.
• Persistent Local Storage: To achieve without resorting to third-party plugins.
• WebSocket : A next-generation bidirectional communication technology for web applications.
• Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and
they are called Server-Sent Events (SSE).
• Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.
• Audio & Video: You can embed audio or video on your web pages without resorting to third-party
plugins.
• Geolocation: Now visitors can choose to share their physical location with your web application.
• Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with
custom semantics.
• Drag and drop: Drag and drop the items from one location to another location on the same webpage.
Flexibility in HTML5

In HTML5:

• Uppercase tag names are allowed (case insensitive)

• Quotes are optional for attributes

• Attribute values are optional

• Closing empty elements are optional


The <script> tag

HTML4
<script type="text/javascript" src="scriptfile.js"></script>

HTML5
<script src="scriptfile.js"></script>
The <link>tag

HTML4
<link rel="stylesheet" type="text/css" href="stylefile.css">

HTML5
<link rel="stylesheet" href="stylefile.css">
The <link>tag

HTML4
<link rel="stylesheet" type="text/css" href="stylefile.css">

HTML5
<link rel="stylesheet" href="stylefile.css">
HTML 5 tags

Section

main

Article

Aside

Header

Footer
HTML 5 tags

Nav

Dialog

Figure
The <meta> tag

<Meta> defines metadata about an HTML document

<meta charset="UTF-8">

You might also like