HTML & XHTM
HTML
This page is having a quick review of all the HTML tags discussed in this tutorial. If you need to know in detail about any tag then refer to HTML Tag List chapter.
HTML Basic Syntax:
- HTML Element names and attribute names are not case sensitive.
- HTML Documents start with a <!doctype...> statement, followed by a header and a text body all enclosed in <html>...</html>.
- HTML Header is enclosed in <head>....</head> tags.
- HTML Body is enclosed in <body>....</body> tags.
- HTML Comments are written as <!-- A comment -->.
HTML Basic Document:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//EN"> <html> <head><title>Document Title like HTML Tutorial</title> </head><body> Document Text with other tags will come here. </body> </html>
YouTube Video in HTML
If you want to play a video in a web page, you can upload the video to YouTube and insert the proper HTML code to display the video:
Example - YouTube iFrame
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Example - YouTube Embedded
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
HTML Elements
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:
HTML Element:
<p>This is a paragraph.</p>
HTML Basic Examples
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag.
Example
<a href="http://www.w3schools.com">This is a link</a>
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
URL - Uniform Resource Locator
Web browsers request pages from web servers by using a URL.
When you click on a link in an HTML page, an underlying <a> tag points to an address on the world wide web.
A Uniform Resource Locator (URL) is used to address a document (or other data) on the world wide web.
A web address, like this: http://rkniit70.blogspot.in/search/label/lab%20at%20home%202 follows these syntax rules:
scheme://host.domain:port/path/filename
Explanation:
- scheme - defines the type of Internet service. The most common type is http
- host - defines the domain host (the default host for http is www)
- domain - defines the Internet domain name, like w3schools.com
- port - defines the port number at the host (the default port number for http is 80)
- path - defines a path at the server (If omitted, the document must be stored at the root directory of the web site)
- filename - defines the name of a document/resource
XHTML
HTML & XHTML
XHTML is HTML written as XML.
What Is XHTML?
- XHTML stands for EXtensible HyperText Markup Language
- XHTML is almost identical to HTML 4.01
- XHTML is a stricter and cleaner version of HTML
- XHTML is HTML defined as an XML application
- XHTML is supported by all major browsers.
Why XHTML?
Many pages on the internet contain "bad" HTML.
The following HTML code will work fine if you view it in a browser (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>
XML is a markup language where documents must be marked up correctly and "well-formed".
If you want to study XML, please read our XML tutorial.
Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language.
Therefore - by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML.
The Most Important Differences from HTML:
Document Structure
- XHTML DOCTYPE is mandatory
- The XML namespace attribute in <html> is mandatory
- <html>, <head>, <title>, and <body> is mandatory
XHTML Elements
- XHTML elements must be properly nested
- XHTML elements must always be closed
- XHTML elements must be in lowercase
- XHTML documents must have one root element
XHTML Attributes
- Attribute names must be in lower case
- Attribute values must be quoted
- Attribute minimization is forbidden
<!DOCTYPE ....> Is Mandatory
An XHTML document must have an XHTML DOCTYPE declaration.
A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.
The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html>, must specify the xml namespace for the document.
The example below shows an XHTML document with a minimum of required tags:
<!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>
......
</body>
</html>
XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
XHTML Elements Must Always Be Closed
This is wrong:
<p>This is a paragraph
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Empty Elements Must Also Be Closed
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
XHTML Elements Must Be In Lower Case
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
Attribute Names Must Be In Lower Case
This is wrong:
<table WIDTH="100%">
This is correct:
<table width="100%">
Attribute Values Must Be Quoted
This is wrong:
<table width=100%>
This is correct:
<table width="100%">
Attribute Minimization Is Forbidden
This is wrong:
<input checked>
<input readonly>
<input disabled>
<option selected>
This is correct:
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
How to Convert from HTML to XHTML
- Add an XHTML <!DOCTYPE> to the first line of every page
- Add an xmlns attribute to the html element of every page
- Change all element names to lowercase
- Close all empty elements
- Change all attribute names to lowercase
- Quote all attribute values..............
0 comments:
Post a Comment