Scribd
Upload
62 views

Lecture 04 HTML Part 03 Doctype XHTML Validation PDF

Uploaded by

Mujahid Malik Arain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
62 views

Lecture 04 HTML Part 03 Doctype XHTML Validation PDF

Uploaded by

Mujahid Malik Arain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Lecture 04

HTML- DOCTYPE, XHTML, Validation, Entities, iframe

1
HTML DOCTYPE
Differences Between XHTML and HTML5
HTML Validation Service
HTML Entities
iFrame

2
3
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

4
The <!DOCTYPE> declaration must be the very first
thing in your HTML document, before the <html> Version Year
tag.
The <!DOCTYPE> declaration is not an HTML tag; it HTML 1991
is an instruction to the web browser about what
version of HTML the page is written in. HTML 2.0 1995
In HTML 4.01, the <!DOCTYPE> declaration refers to
a DTD, because HTML 4.01 was based on SGML. HTML 3.2 1997
The DTD specifies the rules for the markup
language, so that the browsers render the content HTML 4.01 1999
correctly.
HTML5 is not based on SGML, and therefore does XHTML 2000
not require a reference to a DTD.
There are three different <!DOCTYPE> declarations HTML 5 2014
in HTML 4.01.
In XHTML 1.1 and HTML5 there is only one.

5
Always add the <!DOCTYPE> declaration to your HTML
documents, so that the browser knows what type of
document to expect.
The <!DOCTYPE> declaration is NOT case sensitive
HTML 4.01 doctypes are:
Strict
Transitional
Frameset

6
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
7
Each HTML Tag is displayed with reference of DOCTYPE
declaration.
For more detail
http://www.w3schools.com/tags/ref_html_dtd.asp

8
9
XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML
XHTML is stricter than HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers

10
Many pages on the internet contain "bad" HTML.
This HTML code works fine in most browsers (even if it does
not follow the HTML rules):
<html>
<head>
<title>This is bad HTML</title>

<body>
<h1>Bad HTML
<p>This is a paragraph
</body>

11
Document Structure
XHTML DOCTYPE is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content
</body>
</html>

12
XHTML elements must be properly nested
<b><i>This text is bold and italic</b></i> Wrong
<b><i>This text is bold and italic</i></b> Correct
XHTML elements must always be closed
<p>This is a paragraph Wrong
<p>This is a paragraph</p> Correct
XHTML elements must be in lowercase
<H1>This is heading</H1> Wrong
<h1>This is heading</h1> Correct
Empty Elements Must Also Be Closed
<br>An image: <img src="happy.gif" alt="Happy face"> Wrong
<br/>An image: <img src="happy.gif" alt="Happy face /> Correct
XHTML documents must have one root element
13
Attribute names must be in lower case
<table WIDTH="100%"> Wrong
<table width="100%"> Correct

Attribute values must be quoted


<table width=100%> Wrong
<table width=100%> Correct

Attribute minimization is forbidden


<input type="checkbox" name="vehicle checked /> Wrong
<input type="checkbox" name="vehicle checked=checked /> Correct

14
1. Add an XHTML <!DOCTYPE> to the first line of every page
2. Add an xmlns attribute to the html element of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values

15
16
http://validator.w3.org/

This validator checks the markup validity of Web documents in HTML, XHTML
Validate following XHTML Document
http://www.w3schools.com/html/demo_xhtml.asp

Write any HTML document and validate it by specifying using


different Doctypes

21
22
Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
cent &cent; &#162;
pound &pound; &#163;
yen &yen; &#165;
euro &euro; &#8364;
copyright &copy; &#169;
registered trademark &reg; &#174;

23
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs
in your text, the browser might mix them with tags.
Character entities are used to display reserved
characters in HTML.
A character entity looks like this:
&entity_name; OR
&#entity_number;

24
Result Description Entity Name Entity Number
FOR ALL &forall; &#8704;
PARTIAL DIFFERENTIAL &part; &#8706;
THERE EXISTS &exist; &#8707;
EMPTY SETS &empty; &#8709;
NABLA &nabla; &#8711;
ELEMENT OF &isin; &#8712;
NOT AN ELEMENT OF &notin; &#8713;
CONTAINS AS MEMBER &ni; &#8715;
N-ARY PRODUCT &prod; &#8719;
N-ARY SUMMATION &sum; &#8721;

More: http://www.w3schools.com/html/html_symbols.asp

25
An iframe is used to display a web page within a web page.
Syntax
<iframe src="URL"></iframe>
Iframe - Set Height and Width
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe can be used to embed video in web page.
Example: Embed following code in your HTML page
<iframe src="https://www.youtube.com/embed/x7zE7Fu8Dmw"
width="454" height="280 ></iframe>

26
Q&A
27

You might also like