Scribd
Upload
32 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
Available Formats
Download as PDF, TXT or read online on Scribd
32 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
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