Scribd
Upload
4 views

HTML+XML

This document provides a comprehensive introduction to HTML, covering basic structure, elements, attributes, and formatting options. It explains how to create headings, paragraphs, lists, links, tables, and forms, as well as the use of CSS for styling. Additionally, it discusses the importance of the <head> element and metadata in HTML documents.

Uploaded by

aashiyan.shaan
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
4 views

HTML+XML

This document provides a comprehensive introduction to HTML, covering basic structure, elements, attributes, and formatting options. It explains how to create headings, paragraphs, lists, links, tables, and forms, as well as the use of CSS for styling. Additionally, it discusses the importance of the <head> element and metadata in HTML documents.

Uploaded by

aashiyan.shaan
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 30

1.

HTML Introduction
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

2. Writing HTML Using Notepad or TextEdit


HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

3. HTML Elements
The <p> element: <p>This is my first paragraph.</p>
The <body> element: <body>
<p>This is my first paragraph.</p>
</body>
The <html> element: <html>

<body>
<p>This is my first paragraph.</p>
</body>
</html>
4. HTML Attributes
 HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"

Attribute Example
<a href="http://www.w3schools.com">This is a link</a>
class Specifies one or more classnames for an element (refers to a class in a style sheet)
id Specifies a unique id for an element
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)

5. HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML Lines
The <hr>tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:


<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>

HTML Comments
Comments can be inserted into the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not displayed.
<!-- This is a comment -->

6. HTML Paragraphs
<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML Line Breaks


Use the <br> tag if you want a line break (a new line) without starting a new paragraph:
<p>This is<br>a para<br>graph with line breaks</p>

7. HTML Text Formatting


HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

8. HTML Links
Links are found in nearly all Web pages. Links allow users to click their way from page
to page.

he HTML <a> tag defines a hyperlink.


A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
another document.

When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.

The most important attribute of the <a> element is the href attribute, which indicates the
link’s destination.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

<a href="url">Link text</a>


<a href="http://www.w3schools.com/">Visit W3Schools</a>

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new
tab:

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

9. HTML <head>

The <head> element is a container for all the head elements. Elements inside <head> can
include scripts, instruct the browser where to find style sheets, provide meta information,
and more.

The following tags can be added to the head section: <title>, <style>, <meta>, <link>,
<script>, <noscript>, and <base>.

The HTML <title> Element

The <title> tag defines the title of the document.

The <title> element is required in all HTML/XHTML documents.

The <title> element:

 defines a title in the browser toolbar


 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results

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

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

</html>

The HTML <base> Element

The <base> tag specifies the base URL/target for all relative URLs in a page:

<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>

The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.

The <link> tag is most used to link to style sheets:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

The HTML <style> Element

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

The HTML <meta> Element


Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be
displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the
document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search
engines (keywords), or other web services.

<meta> tags always goes inside the <head> element.

Define keywords for search engines: <meta name="keywords" content="HTML, CSS,


XML, XHTML, JavaScript">
Define a description of your web page: <meta name="description" content="Free Web
tutorials on HTML and CSS">
Define the author of a page: <meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">

10. HTML Tables


First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells
(with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td>
tag can contain text, links, images, lists, forms, other tables, etc.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How the HTML code above looks in a browser:
ow 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Table Headers

Header information in a table are defined with the <th> tag.

All major browsers display the text in the <th> element as bold and centered.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How the HTML code above looks in your browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

11. HTML Lists


The most common HTML lists are ordered and unordered lists:

An ordered list: An unordered list:


1. The first list item  List item
2. The second list item  List item

3. The third list item  List item

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML Description Lists

A description list is a list of terms/names, with a description of each term/name.

The <dl> tag defines a description list.

The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes
each term/name):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:

Coffee
- black hot drink
Milk
- white cold drink

12. HTML Block Elements

Most HTML elements are defined as block level elements or as inline elements.
Block level elements normally start (and end) with a new line when displayed in a
browser.

Examples: <h1>, <p>, <ul>, <table>

HTML Inline Elements

Inline elements are normally displayed without starting a new line.

Examples: <b>, <td>, <a>, <img>

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for
grouping other HTML elements.

The <div> element has no special meaning. Except that, because it is a block level
element, the browser will display a line break before and after it.

When used together with CSS, the <div> element can be used to set style attributes to
large blocks of content.

Another common use of the <div> element, is for document layout. It replaces the "old
way" of defining layout using tables. Using <table> elements for layout is not the correct
use of <table>. The purpose of the <table> element is to display tabular data.

The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.

The <span> element has no special meaning.

When used together with CSS, the <span> element can be used to set style attributes to
parts of the text.

HTML Grouping Tags


<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

13. HTML Layouts

Web page layout is very important to make your website look good.
Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or
newspaper).

Multiple columns are created by using <div> or <table> elements. CSS are used to
position elements, or to create backgrounds or colorful look for the pages.

HTML Layouts - Using <div> Elements

The div element is a block level element used for grouping HTML elements.

The following example uses five div elements to create a multiple column layout,
creating the same result as in the previous example:

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">


<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-


color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-


color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">


Copyright © W3Schools.com</div>

</div>

</body>
</html>

Main Title of Web Page


Menu
HTML
CSS
JavaScript
Content goes here

HTML Layouts - Using Tables


<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">


<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>

Main Title of Web Page


Menu
HTML
Content goes here
CSS
JavaScript

14. HTML Styles - CSS

CSS (Cascading Style Sheets) is used to style HTML elements.

Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML
elements.

CSS can be added to HTML in the following ways:

 Inline - using the style attribute in HTML elements


 Internal - using the <style> element in the <head> section
 External - using an external CSS file

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.

Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of
an element.

To use inline styles, use the style attribute in the relevant tag. The style attribute can
contain any CSS property. The example below shows how to change the text color and
the left margin of a paragraph:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

HTML Style Example - Background Color

The background-color property defines the background color for an element:


<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text
in an element:

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal
styles are defined in the <head> section of an HTML page, by using the <style> tag, like
this:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing one file. Each
page must link to the style sheet using the <link> tag. The <link> tag goes inside the
<head> section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

15. HTML Forms and Input


HTML Forms are used to select different kinds of user input.

HTML forms are used to pass data to a server.

An HTML form can contain input elements like text fields, checkboxes, radio-buttons,
submit buttons and more. A form can also contain select lists, textarea, fieldset, legend,
and label elements.

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

Text Fields

<input type="text"> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Password Field

<input type="password"> defines a password field:

<form>
Password: <input type="password" name="pwd">
</form>

Radio Buttons

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE
of a limited number of choices:

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or


MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Submit Button

<input type="submit"> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page
specified in the form's action attribute. The file defined in the action attribute usually
does something with the received input:

<form name="input" action="html_form_action.asp" method="get">


Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

16. HTML Iframes


An iframe is used to display a web page within a web page.
<iframe src="URL"></iframe>
Iframe - Set Height and Width

The height and width attributes are used to specify the height and width of the iframe.

The attribute values are specified in pixels by default, but they can also be in percent (like
"80%").

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - Remove the Border


<iframe src="demo_iframe.htm" frameborder="0"></iframe>

17. HTML Colors


Colors are displayed combining RED, GREEN, and BLUE light.

Color Values

HTML colors are defined using a hexadecimal notation (HEX) for the combination of
Red, Green, and Blue color values (RGB).

The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The
highest value is 255 (in HEX: FF).

HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.

Color Color HEX Color RGB


#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

18. HTML Color Names

Color Names Supported by All Browsers

147 color names are defined in the HTML and CSS color specification (17 standard
colors plus 130 more). The table below lists them all, along with their hexadecimal
values.
Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white, and yellow.

Click on a color name (or a hex value) to view the color as the background-color along
with different text colors:

Color Name HEX Color Shades Mix


AliceBlue #F0F8FF Shades Mix
AntiqueWhite #FAEBD7 Shades Mix
Aqua #00FFFF Shades Mix
Aquamarine #7FFFD4 Shades Mix
Azure #F0FFFF Shades Mix
Beige #F5F5DC Shades Mix
Bisque #FFE4C4 Shades Mix
Black #000000 Shades Mix

19. HTML Color Values


Color Name HEX Color Shades Mix
Black #000000 Shades Mix
Navy #000080 Shades Mix
DarkBlue #00008B Shades Mix
MediumBlue #0000CD Shades Mix
Blue #0000FF Shades Mix
DarkGreen #006400 Shades Mix
Green #008000 Shades Mix

20. HTML Images

HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing
tag.

To display an image on a page, you need to use the src attribute. Src stands for "source".
The value of the src attribute is the URL of the image you want to display.

<img src="url" alt="some_text">


The URL points to the location where the image is stored. An image named "boat.gif",
located in the "images" directory on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif.

The browser displays the image where the <img> tag occurs in the document. If you put
an image tag between two paragraphs, the browser shows the first paragraph, then the
image, and then the second paragraph.

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed.

The value of the alt attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat">

HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

HTML <map> Tag


An image-map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

The <map> tag is used to define a client-side image-map. An image-map is an image


with clickable areas.

The required name attribute of the <map> element is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable
areas in the image map.
21. HTML <area> Tag
An image-map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

The <area> tag defines an area inside an image-map (an image-map is an image with
clickable areas).

The <area> element is always nested inside a <map> tag.

Note: The usemap attribute in the <img> tag is associated with the <map> element's
name attribute, and creates a relationship between the image and the map.

Attributes
Attribute Value Description
Specifies an alternate text for the area. Required
alt text
if the href attribute is present
coords coordinates Specifies the coordinates of the area
href URL Specifies the hyperlink target for the area
hreflangNew language_code Specifies the language of the target URL
Specifies what media/device the target URL is
mediaNew media query
optimized for
Not supported in HTML5. Specifies that an area
nohref value
has no associated link
alternate
author
bookmark
help
license
next Specifies the relationship between the current
relNew
nofollow document and the target URL
noreferrer
prefetch
prev
search
tag
shape default Specifies the shape of the area
rect
circle
poly
_blank
_parent
target _self Specifies where to open the target URL
_top
framename
typeNew MIME_type Specifies the MIME type of the target URL

1. Introduction to XML
 XML stands for EXtensible Markup Language
 XML is a markup language much like HTML
 XML was designed to carry data, not to display data
 XML tags are not predefined. You must define your own tags
 XML is designed to be self-descriptive
 XML is a W3C Recommendation

The Difference Between XML and HTML

XML is not a replacement for HTML.

XML and HTML were designed with different goals:

 XML was designed to transport and store data, with focus on what data is
 HTML was designed to display data, with focus on how data looks

HTML is about displaying information, while XML is about carrying information.

2. XML Tree
XML documents form a tree structure that starts at "the root" and branches to "the
leaves".
XML documents use a self-describing and simple syntax:
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The first line is the XML declaration. It defines the XML version (1.0) and the encoding
used (ISO-8859-1 = Latin-1/West European character set).

The next line describes the root element of the document (like saying: "this document is
a note"):

The next 4 lines describe 4 child elements of the root (to, from, heading, and body):
And finally the last line defines the end of the root element:

XML Documents Form a Tree Structure

XML documents must contain a root element. This element is "the parent" of all other
elements.

The elements in an XML document form a document tree. The tree starts at the root and
branches to the lowest level of the tree.

All elements can have sub elements (child elements):

<root>
<child>
<subchild>.....</subchild>
</child>
</root>

The terms parent, child, and sibling are used to describe the relationships between
elements. Parent elements have children. Children on the same level are called siblings
(brothers or sisters).

All elements can have text content and attributes (just like in HTML).

3. XML Syntax Rules


In XML, it is illegal to omit the closing tag. All elements must have a closing tag:

<p>This is a paragraph.</p>
<br />

XML Tags are Case Sensitive

XML tags are case sensitive. The tag <Letter> is different from the tag <letter>.

Opening and closing tags must be written with the same case:

<Message>This is incorrect</message>
<message>This is correct</message>
XML Elements Must be Properly Nested
<b><i>This text is bold and italic</i></b>

XML Attribute Values Must be Quoted

XML elements can have attributes in name/value pairs just like in HTML.

In XML, the attribute values must always be quoted.

Study the two XML documents below. The first one is incorrect, the second is correct:

<note date=12/11/2007>
<to>Tove</to>
<from>Jani</from>
</note>

<note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>
The error in the first document is that the date attribute in the note element is not quoted.

Entity References

Some characters have a special meaning in XML.

If you place a character like "<" inside an XML element, it will generate an error because
the parser interprets it as the start of a new element.

This will generate an XML error: <message>if salary < 1000 then</message>

To avoid this error, replace the "<" character with an entity reference:

<message>if salary &lt; 1000 then</message>

There are 5 predefined entity references in XML:

&lt; < less than


&gt; > greater than
&amp; & ampersand
&apos; ' apostrophe
&quot; " quotation mark
Note: Only the characters "<" and "&" are strictly illegal in XML. The greater than
character is legal, but it is a good habit to replace it.

Comments in XML

The syntax for writing comments in XML is similar to that of HTML.

<!-- This is a comment -->

White-space is Preserved in XML

HTML truncates multiple white-space characters to one single white-space:

HTML: Hello Tove


Output: Hello Tove

With XML, the white-space in a document is not truncated.

4. XML Elements

An XML element is everything from (including) the element's start tag to (including) the
element's end tag.

An element can contain:

 other elements
 text
 attributes
 or a mix of all of the above...

<bookstore>
<book category="CHILDREN">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
In the example above, <bookstore> and <book> have element contents, because they
contain other elements. <book> also has an attribute (category="CHILDREN"). <title>,
<author>, <year>, and <price> have text content because they contain text.

XML Naming Rules

XML elements must follow these naming rules:

 Names can contain letters, numbers, and other characters


 Names cannot start with a number or punctuation character
 Names cannot start with the letters xml (or XML, or Xml, etc)
 Names cannot contain spaces

Any name can be used, no words are reserved.

XML Elements are Extensible

XML elements can be extended to carry more information.

Look at the following XML example:

<note>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
</note>

Let's imagine that we created an application that extracted the <to>, <from>, and <body>
elements from the XML document to produce this output:

MESSAGE

To: Tove
From: Jani

Don't forget me this weekend!

Imagine that the author of the XML document added some extra information to it:

<note>
<date>2008-01-10</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The application should still be able to find the <to>, <from>, and <body> elements in the
XML document and produce the same output.

One of the beauties of XML, is that it can be extended without breaking applications.

5. XML Attributes
XML elements can have attributes, just like HTML.

Attributes provide additional information about an element.

In HTML, attributes provide additional information about elements:

<img src="computer.gif">
<a href="demo.asp">

Attributes often provide information that is not a part of the data. In the example below,
the file type is irrelevant to the data, but can be important to the software that wants to
manipulate the element:

<file type="gif">computer.gif</file>

XML Attributes Must be Quoted

Attribute values must always be quoted. Either single or double quotes can be used. For a
person's sex, the person element can be written like this:

<person sex="female">

or like this: <person sex='female'>

If the attribute value itself contains double quotes you can use single quotes, like in this
example: <gangster name='George "Shotgun" Ziegler'>

or you can use character entities: <gangster name="George &quot;Shotgun&quot;


Ziegler">

XML Elements vs. Attributes

Take a look at these examples:


<person sex="female">
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>

<person>
<sex>female</sex>
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>

In the first example sex is an attribute. In the last, sex is an element. Both examples
provide the same information.

There are no rules about when to use attributes or when to use elements. Attributes are
handy in HTML. In XML my advice is to avoid them. Use elements instead.

Avoid XML Attributes?

Some of the problems with using attributes are:

 attributes cannot contain multiple values (elements can)


 attributes cannot contain tree structures (elements can)
 attributes are not easily expandable (for future changes)

Attributes are difficult to read and maintain. Use elements for data. Use attributes for
information that is not relevant to the data.

6. XML Validation
XML with correct syntax is "Well Formed" XML.

XML validated against a DTD is "Valid" XML.

Well Formed XML Documents

A "Well Formed" XML document has correct XML syntax.

The syntax rules were described in the previous chapters:

 XML documents must have a root element


 XML elements must have a closing tag
 XML tags are case sensitive
 XML elements must be properly nested
 XML attribute values must be quoted

<?xml version="1.0" encoding="ISO-8859-1"?>


<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

Valid XML Documents

A "Valid" XML document is a "Well Formed" XML document, which also conforms to
the rules of a Document Type Definition (DTD):

<?xml version="1.0" encoding="ISO-8859-1"?>


<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The DOCTYPE declaration in the example above, is a reference to an external DTD file.
The content of the file is shown in the paragraph below.

XML DTD

The purpose of a DTD is to define the structure of an XML document. It defines the
structure with a list of legal elements:

<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

7. Viewing XML Files


Raw XML files can be viewed in all major browsers.
Don't expect XML files to be displayed as HTML pages.

<?xml version="1.0" encoding="ISO-8859-1"?>


- <note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The XML document will be displayed with color-coded root and child elements. A plus
(+) or minus sign (-) to the left of the elements can be clicked to expand or collapse the
element structure. To view the raw XML source (without the + and - signs), select "View
Page Source" or "View Source" from the browser menu.

Note: In Safari, only the element text will be displayed. To view the raw XML, you must
right click the page and select "View Source"

8. XHTML
XHTML is HTML written as XML.

 XHTML stands for EXtensible HyperText Markup Language


 XHTML is almost identical to HTML 4.01
 XHTML is a stricter and cleaner version of HTML 4.01
 XHTML is HTML defined as an XML application
 XHTML is supported by all major browsers.

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>
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

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Empty Elements Must Also Be Closed

A break: <br />


A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML Elements Must Be In Lower Case

<body>
<p>This is a paragraph</p>
</body>

Attribute Names Must Be In Lower Case

<table width="100%">

Attribute Values Must Be Quoted

<table width="100%">

Attribute Minimization Is Forbidden

<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">

How to Convert from HTML to XHTML


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

You might also like