HTML(31.08.2015 New) [Compatibility Mode]

Web Technology: Html

Monika GopeLecturer

IICT, KUET

Learning Objectives

Web Browser Features of the Browsers HTML..

Web Browser Features of the Browsers HTML..

Web Browser

A web browser (commonly referred to as a browser) isa software application for retrieving, presenting and traversinginformation resources on the World Wide Web. An informationresource is identified by a Uniform Resource Identifier (URL)and may be a web page, image, video or other piece of content.Hyperlinks present in resources enable users easily to navigatetheir browsers to related resources.

Although browsers are primarily intended to use the World WideWeb, they can also be used to access information providedby web servers in private networks or files in file systems.

A web browser (commonly referred to as a browser) isa software application for retrieving, presenting and traversinginformation resources on the World Wide Web. An informationresource is identified by a Uniform Resource Identifier (URL)and may be a web page, image, video or other piece of content.Hyperlinks present in resources enable users easily to navigatetheir browsers to related resources.

Although browsers are primarily intended to use the World WideWeb, they can also be used to access information providedby web servers in private networks or files in file systems.

Web Browser

HTML and associated content (image files,formatting information such as CSS, etc.) is passedto the browser's layout engine to be transformedfrom markup to an interactive document, a processknown as "rendering"

HTML and associated content (image files,formatting information such as CSS, etc.) is passedto the browser's layout engine to be transformedfrom markup to an interactive document, a processknown as "rendering"

Features

Back and forward buttons to go back to the previousresource and forward respectively.

A refresh or reload button to reload the currentresource.

A stop button to cancel loading the resource. In somebrowsers, the stop button is merged with the reloadbutton.

A home button to return to the user's home page.

Back and forward buttons to go back to the previousresource and forward respectively.

A refresh or reload button to reload the currentresource.

A stop button to cancel loading the resource. In somebrowsers, the stop button is merged with the reloadbutton.

A home button to return to the user's home page.

Features

An address bar to input the Uniform ResourceIdentifier (URI) of the desired resource and display it.

A search bar to input terms into a search engine. Insome browsers, the search bar is merged with theaddress bar.

A status bar to display progress in loading theresource and also the URI of links when the cursorhovers over them, and page zooming capability.

Major browsers also possess incrementalfind features to search within a web page.

An address bar to input the Uniform ResourceIdentifier (URI) of the desired resource and display it.

A search bar to input terms into a search engine. Insome browsers, the search bar is merged with theaddress bar.

A status bar to display progress in loading theresource and also the URI of links when the cursorhovers over them, and page zooming capability.

Major browsers also possess incrementalfind features to search within a web page.

What is HTML?

HTML (Hyper-text Markup Language) HTML is not a programming language, A markup language is a set of markup tags HTML uses markup tags to describe web pages A markup language formats text in-between two

“tags”. These look like: <code>formatted text</code>– <code> begins the formatting tag– </code> ends the formatting tag

These tags are then read by a Browser, whichtranslates the tags into the formatting that theyrepresent.

HTML (Hyper-text Markup Language) HTML is not a programming language, A markup language is a set of markup tags HTML uses markup tags to describe web pages A markup language formats text in-between two

“tags”. These look like: <code>formatted text</code>– <code> begins the formatting tag– </code> ends the formatting tag

These tags are then read by a Browser, whichtranslates the tags into the formatting that theyrepresent.

What is HTML5?

HTML5 will be the new standard for HTML.

The previous version of HTML, HTML 4.01, came in1999. The web has changed a lot since then.

HTML5 is still a work in progress. However, the majorbrowsers support many of the new HTML5 elementsand APIs.

HTML5 will be the new standard for HTML.

The previous version of HTML, HTML 4.01, came in1999. The web has changed a lot since then.

HTML5 is still a work in progress. However, the majorbrowsers support many of the new HTML5 elementsand APIs.

HTML Editors

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

However, for learning HTML we recommend a texteditor like Notepad (PC) or TextEdit (Mac).

We believe using a simple text editor is a good wayto learn HTML.

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

However, for learning HTML we recommend a texteditor like Notepad (PC) or TextEdit (Mac).

We believe using a simple text editor is a good wayto learn HTML.

HTML Tags

HTML tags are keywords surrounded by anglebrackets like <html>

HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag

is the end tag Start and end tags are also called opening tags and

closing tags

HTML tags are keywords surrounded by anglebrackets like <html>

HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag

is the end tag Start and end tags are also called opening tags and

closing tags

Basic Tags HTML

– <HTML></HTML>– These tags begin and end an HTML document.

HEAD– <HEAD></HEAD>– These tags are in the beginning of the document. Important information

is stored in-between these tags including: title, meta-data, styles, andprogramming scripts

TITLE– <TITLE></TITLE>– These tags are in-between the HEAD tags and contain the text that

appears in the title of the Web page. BODY

– <BODY></BODY>– As you may have guessed, the BODY tags contain all the text in the

body of the document.

HTML– <HTML></HTML>– These tags begin and end an HTML document.

HEAD– <HEAD></HEAD>– These tags are in the beginning of the document. Important information

is stored in-between these tags including: title, meta-data, styles, andprogramming scripts

TITLE– <TITLE></TITLE>– These tags are in-between the HEAD tags and contain the text that

appears in the title of the Web page. BODY

– <BODY></BODY>– As you may have guessed, the BODY tags contain all the text in the

body of the document.

HTML Page- Getting Started

What You Need– You don't need an HTML editor– You don't need a web server– You don't need a web site

Editing HTML– We use a plain text editor (like Notepad) to edit HTML. We

believe this is the best way to learn HTML.– However, professional web developers often prefer HTML

editors like FrontPage or Dreamweaver, instead of writingplain text. (advanced level)

.HTM or .HTML File Extension?– For saving an HTML file, you can use either the .htm or the

.html file extension.– With new software it is perfectly safe to use .html.

What You Need– You don't need an HTML editor– You don't need a web server– You don't need a web site

Editing HTML– We use a plain text editor (like Notepad) to edit HTML. We

believe this is the best way to learn HTML.– However, professional web developers often prefer HTML

editors like FrontPage or Dreamweaver, instead of writingplain text. (advanced level)

.HTM or .HTML File Extension?– For saving an HTML file, you can use either the .htm or the

.html file extension.– With new software it is perfectly safe to use .html.

Basic Format of a Web Page<html>

<head><title>

Hello World</title>

</head><body>

Hello World</body>

</html>

•This example is a completeWeb page.•If viewed in a browser,such as Internet Explorer,it would have the title“Hello World”•and the content “HelloWorld”.


<html><head>

<title>Hello World

</title></head><body>

Hello World</body>

</html>



HTML Example

<!DOCTYPE html> <html> <body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body> </html>

Example Explained

The DOCTYPE declaration defines the documenttype

The text between <html> and </html> describes theweb page

The text between <body> and </body> is the visiblepage content

The text between <h1> and </h1> is displayed as aheading

The text between <p> and </p> is displayed as aparagraph

The DOCTYPE declaration defines the documenttype

The text between <html> and </html> describes theweb page

The text between <body> and </body> is the visiblepage content

The text between <h1> and </h1> is displayed as aheading

The text between <p> and </p> is displayed as aparagraph

HTML Versions Version 1: original HTML by Tim Berners-Lee 1990

Version 2: Mosaic browser HTML extensions 1994under the auspices of the IETF (Internet EngineeringTask Force) - first version conforming to SGML– lists, forms, headings, fonts, image maps, ...

Version 3.2: W3C recommendation in 1997 fortables, applets, text flow around images, form basedfile upload, superscripts and subscripts, styles,scripts

Version 4.0: known as dynamic HTML (DHTML) XHTML: HTML 4.0 defined with XML

Version 1: original HTML by Tim Berners-Lee 1990

Version 2: Mosaic browser HTML extensions 1994under the auspices of the IETF (Internet EngineeringTask Force) - first version conforming to SGML– lists, forms, headings, fonts, image maps, ...

Version 3.2: W3C recommendation in 1997 fortables, applets, text flow around images, form basedfile upload, superscripts and subscripts, styles,scripts

Version 4.0: known as dynamic HTML (DHTML) XHTML: HTML 4.0 defined with XML

HTML Versions

Since the early days of the web, there have been manyversions of HTML:

Dynamic HTML Cascading Style Sheets: precise control over

content layout and format Document Object Model (DOM): exposes all HTML

elements on a page and their formatting andpositioning properties to scripting languages

Positioning and Layering of Content: specify x, y,and z coordinates on the page

Dynamic Fonts: browser loads and caches fontsas needed to display a particular page

Canvas Mode: whole screen mode

Cascading Style Sheets: precise control overcontent layout and format

Document Object Model (DOM): exposes all HTMLelements on a page and their formatting andpositioning properties to scripting languages

Positioning and Layering of Content: specify x, y,and z coordinates on the page

Dynamic Fonts: browser loads and caches fontsas needed to display a particular page

Canvas Mode: whole screen mode

HTML Elements

"HTML tags" and "HTML elements" are oftenused to describe the same thing.

But strictly speaking, an HTML element iseverything between the start tag and the endtag, including the tags:

HTML Element: <p>This is a paragraph.</p> The <head> is usually the first element

contained inside the <html> element.

"HTML tags" and "HTML elements" are oftenused to describe the same thing.

But strictly speaking, an HTML element iseverything between the start tag and the endtag, including the tags:

HTML Element: <p>This is a paragraph.</p> The <head> is usually the first element

contained inside the <html> element.

HTML Element Syntax

HTML Element Syntax An HTML element starts with a start tag / opening

tag An HTML element ends with an end tag / closing

tag The element content is everything between the start

and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes

HTML Element Syntax An HTML element starts with a start tag / opening

tag An HTML element ends with an end tag / closing

tag The element content is everything between the start

and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes

Don't Forget the End Tag

Some HTML elements might display correctly even ifyou forget the end tag:

<p>This is a paragraph<p>This is a paragraph

The example above works in most browsers,because the closing tag is considered optional.

Never rely on this. Many HTML elements will produceunexpected results and/or errors if you forget the endtag .

Some HTML elements might display correctly even ifyou forget the end tag:

<p>This is a paragraph<p>This is a paragraph

The example above works in most browsers,because the closing tag is considered optional.

Never rely on this. Many HTML elements will produceunexpected results and/or errors if you forget the endtag .

Empty HTML Elements

HTML elements with no content are called emptyelements.

<br> is an empty element without a closing tag (the<br> tag defines a line break).

Tip: In XHTML, all elements must be closed. Addinga slash inside the start tag, like <br />, is the properway of closing empty elements in XHTML (and XML).

HTML elements with no content are called emptyelements.

<br> is an empty element without a closing tag (the<br> tag defines a line break).

Tip: In XHTML, all elements must be closed. Addinga slash inside the start tag, like <br />, is the properway of closing empty elements in XHTML (and XML).

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

Use HTML headings for headings only. Don't useheadings to make text BIG or bold.

Search engines use your headings to index thestructure and content of your web pages.

Since users may skim your pages by its headings, itis important to use headings to show the documentstructure.

H1 headings should be used as main headings,followed by H2 headings, then the less important H3headings, and so on.

Use HTML headings for headings only. Don't useheadings to make text BIG or bold.

Search engines use your headings to index thestructure and content of your web pages.

Since users may skim your pages by its headings, itis important to use headings to show the documentstructure.

H1 headings should be used as main headings,followed by H2 headings, then the less important H3headings, and so on.

HTML Paragraphs

HTML paragraphs are defined with the<p> tag.

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

HTML paragraphs are defined with the<p> tag.

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

HTML Links

HTML links are defined with the <a>tag.

<a href="http://www.w3schools.com">This is a link</a>

The link address is specified in the hrefattribute

HTML links are defined with the <a>tag.

<a href="http://www.w3schools.com">This is a link</a>

The link address is specified in the hrefattribute

HTML Images

HTML images are defined with the<img> tag.

<img src="w3schools.jpg" width="104"height="142">

HTML images are defined with the<img> tag.

<img src="w3schools.jpg" width="104"height="142">

HTML Attributes

Attributes provide additional information about HTMLelements.

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"

Attributes provide additional information about HTMLelements.

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

HTML links are defined with the <a> tag. Thelink address is specified in the href attribute:

<a href="http://www.w3schools.com">Thisis a link</a>

HTML links are defined with the <a> tag. Thelink address is specified in the href attribute:

<a href="http://www.w3schools.com">Thisis a link</a>

Always Quote Attribute Values

Attribute values should always be enclosed inquotes.

Double style quotes are the most common,but single style quotes are also allowed.

Attribute names and attribute values arecase-insensitive.

Attribute values should always be enclosed inquotes.

Double style quotes are the most common,but single style quotes are also allowed.

Attribute names and attribute values arecase-insensitive.

HTML Attributes Reference

Below is a list of some attributes that can be used onany HTML element:

HTML Lines

The <hr>tag creates a horizontal line in an HTMLpage . The hr element can be used to separatecontent:

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

The <hr>tag creates a horizontal line in an HTMLpage . The hr element can be used to separatecontent:

<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 tomake it more readable and understandable.Comments are ignored by the browser and are notdisplayed.

Comments are written like this:



Comments can be inserted into the HTML code tomake it more readable and understandable.Comments are ignored by the browser and are notdisplayed.

Comments are written like this:



HTML Line Breaks

Use the <br> tag if you want a line break (anew line) without starting a new paragraph:

<p>This is<br>a para<br>graph with linebreaks</p>

The <br> element is an empty HTMLelement. It has no end tag.

Use the <br> tag if you want a line break (anew line) without starting a new paragraph:

<p>This is<br>a para<br>graph with linebreaks</p>

The <br> element is an empty HTMLelement. It has no end tag.

HTML Text Formatting

This text is bold

This text is italic

This is computer output

This is subscript and superscript

This text is bold

This text is italic

This is computer output

This is subscript and superscript

Example

<!DOCTYPE html><html>

<body><hr /> <p><b>This text is bold</b></p><p><strong>This text is strong</strong></p><p><i>This text is italic</i></p><p><em>This text is emphasized</em></p><p><code>This is computer output</code></p><p>This is<sub> subscript</sub> and

<sup>superscript</sup></p>

</body></html>


<body><hr /> <p><b>This text is bold</b></p><p><strong>This text is strong</strong></p><p><i>This text is italic</i></p><p><em>This text is emphasized</em></p><p><code>This is computer output</code></p><p>This is<sub> subscript</sub> and

<sup>superscript</sup></p>

</body></html>

HTML Links The 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

The 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

<html><head>

<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">

<title> Links </title></head><body>

<a href ="table.html" target ="showframe">Table</a><br><a href ="lists.html" target ="showframe">Lists</a><br><a href ="forms.html" target ="showframe">Forms</a>

</body></html>

<html><head>

<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">

<title> Links </title></head><body>

<a href ="table.html" target ="showframe">Table</a><br><a href ="lists.html" target ="showframe">Lists</a><br><a href ="forms.html" target ="showframe">Forms</a>

</body></html>

HTML <head>

The <head> element is a container for all the headelements. Elements inside <head> can includescripts, instruct the browser where to find stylesheets, provide meta information, and more.

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

The <head> element is a container for all the headelements. Elements inside <head> can includescripts, instruct the browser where to find stylesheets, provide meta information, and more.

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

he <base> tag specifies the base URL/target for allrelative URLs in a page:

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

HTML <head> cont…

he <base> tag specifies the base URL/target for allrelative URLs in a page:

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

HTML <head> cont…

The <link> tag defines the relationship between adocument 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 <link> tag defines the relationship between adocument 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>

HTML <head> cont…

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

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

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

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

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

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

HTML <head> cont…MetaData 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 machineparsable.

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

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

<meta> tags always go inside the <head> 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 machineparsable.

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

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

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

HTML <head> cont…MetaData <meta name="keywords" content="HTML, CSS, XML, XHTML,

JavaScript"> <meta name="description" content="Free Web tutorials on

HTML and CSS“> <meta name="author" content=“Peter Norton"> <meta http-equiv="refresh" content="30">

<meta name="keywords" content="HTML, CSS, XML, XHTML,JavaScript">

<meta name="description" content="Free Web tutorials onHTML and CSS“>

<meta name="author" content=“Peter Norton"> <meta http-equiv="refresh" content="30">

HTML <head> cont…

The <script> tag is used to define a client-side script, such as a JavaScript.


HTML Images

<!DOCTYPE html><html><body>

<h2> Mountain Trip</h2><img border="0" src="/images/ Mountain.jpg" alt=" Mountain rock" width="304"

height="228">

</body></html>


<h2> Mountain Trip</h2><img border="0" src="/images/ Mountain.jpg" alt=" Mountain rock" width="304"

height="228">

</body></html>

Unordered List Tags

Tag <ul></ul>

Creates unordered list

Each line begins with bullet mark

Tag <li></li>

Defines each List Entry

Tag <ul></ul>

Creates unordered list

Each line begins with bullet mark

Tag <li></li>

Defines each List Entry

Bullets in Unordered Lists

Bullets in unordered lists make use of the typevalue for the ul attribute e.g. for :

• Filled circle bullets<ul type="disc">

• Empty circles bullets:<ul type=“cirlce">

• Filled squares circles bullets:<ul type=“cirlce">

Bullets in unordered lists make use of the typevalue for the ul attribute e.g. for :

• Filled circle bullets<ul type="disc">

• Empty circles bullets:<ul type=“cirlce">

• Filled squares circles bullets:<ul type=“cirlce">

<html>

<body>

<h4>An Unordered List:</h4>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Green Tea</li>

</ul>

</body>

</html>

<html>

<body>

<h4>An Unordered List:</h4>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Green Tea</li>

</ul>

</body>

</html>

Ordered List Tags

Ordered Lists

Automatically assign ranks to each element

<ol></ol> tag used for ordered lists

Ordered Lists

Automatically assign ranks to each element

<ol></ol> tag used for ordered lists

<html>

<body>

<h4>An Ordered List:</h4>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Green Tea</li>

</ol>

</body>

</html>

<html>

<body>

<h4>An Ordered List:</h4>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Green Tea</li>

</ol>

</body>

</html>

Nested Lists

Nested Lists

Improve document structure

A list inside another list (like the slide structure)

Nested Lists

Improve document structure

A list inside another list (like the slide structure)

<html>

<body>

<h4>A nested List:</h4>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

</body>

</html>

<html>

<body>

<h4>A nested List:</h4>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

</body>

</html>

HTML Tables

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 adata cell. A <td> tag can contain text, links, images,lists, forms, other tables, etc.

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 adata cell. A <td> tag can contain text, links, images,lists, forms, other tables, etc.

<!DOCTYPE html><html><body><p>Each table starts with a table tag.Each table row starts with a tr tag.Each table data starts with a td tag.</p><h4>One column:</h4><table border="1"><tr><td>100</td>

</tr></table>

<!DOCTYPE html><html><body><p>Each table starts with a table tag.Each table row starts with a tr tag.Each table data starts with a td tag.</p><h4>One column:</h4><table border="1"><tr><td>100</td>

</tr></table>

<h4>One row and three columns:</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td>

</tr></table>

<h4>One row and three columns:</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td>

</tr></table>

<h4>Two rows and three columns:</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td>

</tr><tr><td>400</td><td>500</td><td>600</td>

</tr></table>

</body></html>

<h4>Two rows and three columns:</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td>

</tr><tr><td>400</td><td>500</td><td>600</td>

</tr></table>

</body></html>

HTML Tables and the BorderAttribute

If you do not specify a border attribute, the table willbe displayed without borders. Sometimes this can beuseful, but most of the time, we want the borders toshow.

<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

If you do not specify a border attribute, the table willbe displayed without borders. Sometimes this can beuseful, but most of the time, we want the borders toshow.

<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

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.

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>

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

Table with a caption<table border="1"><caption>Monthly savings</caption><tr><th>Month</th><th>Savings</th>

</tr><tr><td>January</td><td>$100</td>

</tr><tr><td>February</td><td>$50</td>

</tr></table>

<table border="1"><caption>Monthly savings</caption><tr><th>Month</th><th>Savings</th>

</tr><tr><td>January</td><td>$100</td>

</tr><tr><td>February</td><td>$50</td>

</tr></table>

Table Span

The colspan attribute to make a cell spanmultiple columns.

Rowspan is for rows just what colspan is forcolumns (rowspan allows a cell to spanmultiple rows).

The colspan attribute to make a cell spanmultiple columns.

Rowspan is for rows just what colspan is forcolumns (rowspan allows a cell to spanmultiple rows).

<h4>Cell that spans two columns:</h4><table border="1"><tr><th>Name</th><th colspan="2">Telephone</th>

</tr><tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>

</tr></table>

<h4>Cell that spans two columns:</h4><table border="1"><tr><th>Name</th><th colspan="2">Telephone</th>

</tr><tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>

</tr></table>

<h4>Cell that spans two rows:</h4><table border="1"><tr><th>First Name:</th><td>Bill Gates</td>

</tr><tr><th rowspan="2">Telephone:</th><td>555 77 854</td>

</tr><tr><td>555 77 855</td>

</tr></table>

<h4>Cell that spans two rows:</h4><table border="1"><tr><th>First Name:</th><td>Bill Gates</td>

</tr><tr><th rowspan="2">Telephone:</th><td>555 77 854</td>

</tr><tr><td>555 77 855</td>

</tr></table>

Tags inside a table<!DOCTYPE html><html><body><table border="1"><tr>

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

</td>

<!DOCTYPE html><html><body><table border="1"><tr>

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

</td>

<td>This cell contains a table:<table border="1">

<tr><td>A</td><td>B</td>

</tr><tr>

<td>C</td><td>D</td>

</tr></table></td>

</tr>

<td>This cell contains a table:<table border="1">

<tr><td>A</td><td>B</td>

</tr><tr>

<td>C</td><td>D</td>

</tr></table></td>

</tr>

<tr><td>This cell contains a list

<ul><li>apples</li><li>bananas</li><li>pineapples</li></ul>

</td><td>HELLO</td>

</tr></table>

</body></html>

<tr><td>This cell contains a list

<ul><li>apples</li><li>bananas</li><li>pineapples</li></ul>

</td><td>HELLO</td>

</tr></table>

</body></html>

Cell padding

<!DOCTYPE html><html><body><h4>Without cellpadding:</h4><table border="1"><tr><td>First</td><td>Row</td>

</tr><tr><td>Second</td><td>Row</td>

</tr></table>

<!DOCTYPE html><html><body><h4>Without cellpadding:</h4><table border="1"><tr><td>First</td><td>Row</td>


</tr></table>

<h4>With cellpadding:</h4><table border="1" cellpadding="10"><tr><td>First</td><td>Row</td>


</tr></table>

</body></html>

<h4>With cellpadding:</h4><table border="1" cellpadding="10"><tr><td>First</td><td>Row</td>


</tr></table>

</body></html>

Cell spacing

<!DOCTYPE html><html><body><h4>Without cellspacing:</h4><table border="1"><tr><td>First</td><td>Row</td>


</tr></table>

<!DOCTYPE html><html><body><h4>Without cellspacing:</h4><table border="1"><tr><td>First</td><td>Row</td>


</tr></table>

<h4>With cellspacing="0":</h4><table border="1" cellspacing="0"><tr><td>First</td><td>Row</td>


</tr></table>



</tr></table>



</tr></table></body></html>



</tr></table></body></html>

HTML Blocks

Most HTML elements are defined as blocklevel elements or as inline elements.

Block level elements normally start (andend) with a new line when displayed in abrowser.

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

Most HTML elements are defined as blocklevel elements or as inline elements.

Block level elements normally start (andend) with a new line when displayed in abrowser.

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

Inline elements are normally displayedwithout starting a new line.

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

HTML Blocks

Inline elements are normally displayedwithout starting a new line.

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

HTML Blocks: Div

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

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

When used together with CSS, the <div> elementcan be used to set style attributes to large blocks ofcontent.

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

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

When used together with CSS, the <div> elementcan be used to set style attributes to large blocks ofcontent.

HTML Blocks: Div

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

The <div> tag defines a division or a section in anHTML document.

The <div> tag is used to group block-elements toformat them with CSS

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

The <div> tag defines a division or a section in anHTML document.

The <div> tag is used to group block-elements toformat them with CSS

DIV

Tip: The <div> element is very often used togetherwith CSS, to layout a web page.

Note: By default, browsers always place a line breakbefore and after the <div> element. However, thiscan be changed with CSS.

Tip: The <div> element is very often used togetherwith CSS, to layout a web page.

Note: By default, browsers always place a line breakbefore and after the <div> element. However, thiscan be changed with CSS.

Example: Div

A section in a document that will bedisplayed in blue:

<div style="color:#0000FF"><h3>This is a heading</h3><p>This is a paragraph.</p>

</div>

A section in a document that will bedisplayed in blue:

<div style="color:#0000FF"><h3>This is a heading</h3><p>This is a paragraph.</p>

</div>

HTML Blocks: Span 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> elementcan be used to set style attributes to parts of the text.

The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a

part of a text or a part of a document.

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

The <span> element has no special meaning.

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

The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a

part of a text or a part of a document.

Example Span

A <span> element used to color a partof a text:

<p>My mother has <spanstyle="color:blue">blue</span>eyes.</p>

A <span> element used to color a partof a text:

<p>My mother has <spanstyle="color:blue">blue</span>eyes.</p>

Html Layout

Web page layout is very important to makeyour website look good.

Design your webpage layout very carefully.

Web page layout is very important to makeyour website look good.

Design your webpage layout very carefully.

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 createbackgrounds or colorful look for the pages.

HTML Layouts - Using <div>Elements

The div element is a block level element usedfor grouping HTML elements.

The following example uses five div elementsto create a multiple column layout.

The div element is a block level element usedfor grouping HTML elements.

The following example uses five div elementsto create a multiple column layout.


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

<div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">Main Title of WebPage</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="container" style="width:500px">

<div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">Main Title of WebPage</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 w3 school</div>

</div>

</body></html>

<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 w3 school</div>

</div>

</body></html>

HTML Layouts - Using<Table> Elements A simple way of creating layouts is by using the

HTML <table> tag.

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

The following example uses a table with 3 rows and 2columns - the first and last row spans both columnsusing the colspan attribute:

A simple way of creating layouts is by using theHTML <table> tag.

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

The following example uses a table with 3 rows and 2columns - the first and last row spans both columnsusing the colspan attribute:


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

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

</td>

</tr>


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

</tr>

</table>

</body></html>

<tr><td colspan="2" style="background-color:#FFA500;text-

align:center;">Copyright W3Schools</td>

</tr>

</table>

</body></html>

Output

Forms

HTML Forms are used to select different kinds ofuser 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 buttonsand more. A form can also contain select lists,textarea, fieldset, legend, and label elements.

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

HTML Forms are used to select different kinds ofuser 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 buttonsand more. A form can also contain select lists,textarea, fieldset, legend, and label elements.

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

Input

The most important form element is the <input>element.

The <input> element is used to select userinformation.

An <input> element can vary in many ways,depending on the type attribute. An <input> elementcan be of type text field, checkbox, password, radiobutton, submit button, and more.

The most common input types are described below.

The most important form element is the <input>element.

The <input> element is used to select userinformation.

An <input> element can vary in many ways,depending on the type attribute. An <input> elementcan be of type text field, checkbox, password, radiobutton, submit button, and more.

The most common input types are described below.

<!DOCTYPE html> (Text Fields)<html><body><form action="">

First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">

</form>

<p><b>Note:</b> The form itself is not visible. Alsonote that the default width of a text field is 20characters.

</p></body></html>

<!DOCTYPE html> (Text Fields)<html><body><form action="">

First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">

</form>

<p><b>Note:</b> The form itself is not visible. Alsonote that the default width of a text field is 20characters.

</p></body></html>

<!DOCTYPE html> (Password Field)<html><body><form action="">

Username: <input type="text" name="user"><br>Password: <input type="password" name="password">

</form>

<p><b>Note:</b> The characters in a password fieldare masked (shown as asterisks or circles).

</p>

</body></html>

<!DOCTYPE html> (Password Field)<html><body><form action="">

Username: <input type="text" name="user"><br>Password: <input type="password" name="password">

</form>

<p><b>Note:</b> The characters in a password fieldare masked (shown as asterisks or circles).

</p>

</body></html>

Radio Buttons <input type="radio"> defines a radio button. Radio buttons

let a user select ONLY ONE of a limited number ofchoices:

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

</form>

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

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

</form>

Checkbox

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

<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

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

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

Submit Button

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

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

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

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

Submit Button

If you type some characters in the text fieldabove, and click the "Submit" button, thebrowser will send your input to a page called"html_form_action.asp".

The page will show you the received input.

If you type some characters in the text fieldabove, and click the "Submit" button, thebrowser will send your input to a page called"html_form_action.asp".

The page will show you the received input.

Simple drop-down list


<body><form action="">

<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select>

</form></body>

</html>


<body><form action="">

<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select>

</form></body>

</html>


<body><form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected>Fiat</option><option value="audi">Audi</option></select></form>

</body></html>

Simple drop-down list


<body><form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected>Fiat</option><option value="audi">Audi</option></select></form>

</body></html>

Textarea


<body><textarea rows="10" cols="30">The cat was playing in the garden.</textarea>

</body></html>


<body><textarea rows="10" cols="30">The cat was playing in the garden.</textarea>

</body></html>

Create a button


<body><form action=""><input type="button" value="Hello world!"></form>

</body></html>


<body><form action=""><input type="button" value="Hello world!"></form>

</body></html>

fieldset legend

<form><fieldset>

<legend>Personalia:</legend>Name: <input type="text" size="30"><br>Email: <input type="text" size="30"><br>Date of birth: <input type="text" size="10">

</fieldset></form>

<form><fieldset>

<legend>Personalia:</legend>Name: <input type="text" size="30"><br>Email: <input type="text" size="30"><br>Date of birth: <input type="text" size="10">

</fieldset></form>

Iframe

An iframe is used to display a web page within a web page.


<iframe src="demo_iframe.htm" frameborder="0"></iframe><p>Some older browsers don't support iframes.</p><p>If they don't, the iframe will not be visible.</p>

</body></html>

An iframe is used to display a web page within a web page.


<iframe src="demo_iframe.htm" frameborder="0"></iframe><p>Some older browsers don't support iframes.</p><p>If they don't, the iframe will not be visible.</p>

</body></html>


<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.w3schools.com"

target="iframe_a">W3Schools.com</a></p>

<p><b>Note:</b> Because the target of the link matches the nameof the iframe, the link will open in the iframe.</p>

</body></html>

Iframe


<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.w3schools.com"

target="iframe_a">W3Schools.com</a></p>

<p><b>Note:</b> Because the target of the link matches the nameof the iframe, the link will open in the iframe.</p>

</body></html>

Audio

<embed height="50" width="100" src="horse.mp3">

<object height="50"width="100"data="horse.mp3"></object>

Audio

<audio controls><source src="horse.mp3" type="audio/mpeg"><source src="horse.ogg" type="audio/ogg">Your browser does not support this audio format.

</audio>

<audio controls><source src="horse.mp3" type="audio/mpeg"><source src="horse.ogg" type="audio/ogg">Your browser does not support this audio format.

</audio>

Audio

<audio controls><source src="horse.mp3" type="audio/mpeg"><source src="horse.ogg" type="audio/ogg"><embed height="50" width="100" src="horse.mp3">

</audio>

<audio controls><source src="horse.mp3" type="audio/mpeg"><source src="horse.ogg" type="audio/ogg"><embed height="50" width="100" src="horse.mp3">

</audio>

Audio

<a href="horse.mp3">Play the sound</a>

When sound is included in a web page, or as part of a webpage, it is called inline sound.

If you plan to use inline sounds, be aware that many people willfind it annoying. Also note that some users might have turned offthe inline sound option in their browser.

<a href="horse.mp3">Play the sound</a>

When sound is included in a web page, or as part of a webpage, it is called inline sound.

If you plan to use inline sounds, be aware that many people willfind it annoying. Also note that some users might have turned offthe inline sound option in their browser.

Video

<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><object data="movie.mp4" width="320"height="240"><embed src="movie.swf" width="320"height="240"></object>

</video>

<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><object data="movie.mp4" width="320"height="240"><embed src="movie.swf" width="320"height="240"></object>

</video>

Color Values

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

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

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

#000000 rgb(0,0,0)

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

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

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

#000000 rgb(0,0,0)

16 Million Different Colors

The combination of Red, Green, and Bluevalues from 0 to 255, gives more than 16million different colors (256 x 256 x 256).

If you look at the color table below, you willsee the result of varying the red light from 0 to255, while keeping the green and blue light atzero.

The combination of Red, Green, and Bluevalues from 0 to 255, gives more than 16million different colors (256 x 256 x 256).

If you look at the color table below, you willsee the result of varying the red light from 0 to255, while keeping the green and blue light atzero.

Color Names Supported by AllBrowsers

140 color names are defined in the HTML and CSScolor specification (17 standard colors plus 123more).

Tip: The 17 standard colors are: aqua, black, blue,fuchsia, gray, green, lime, maroon, navy, olive,orange, purple, red, silver, teal, white, and yellow.

140 color names are defined in the HTML and CSScolor specification (17 standard colors plus 123more).

Tip: The 17 standard colors are: aqua, black, blue,fuchsia, gray, green, lime, maroon, navy, olive,orange, purple, red, silver, teal, white, and yellow.

HTML Entities

Reserved characters in HTML must be replaced withcharacter entities.

Some characters are reserved in HTML. It is not possible to use the less than (<) or greater

than (>) signs in your text, because the browser willmix them with tags.

To actually display reserved characters, we must usecharacter entities in the HTML source code.

Reserved characters in HTML must be replaced withcharacter entities.

Some characters are reserved in HTML. It is not possible to use the less than (<) or greater

than (>) signs in your text, because the browser willmix them with tags.

To actually display reserved characters, we must usecharacter entities in the HTML source code.

HTML Entities

To display a less than sign we mustwrite: < or <

A common character entity used in HTML is the non-breaking space ( ).

Browsers will always truncate spaces in HTMLpages. If you write 10 spaces in your text, thebrowser will remove 9 of them, before displaying thepage. To add spaces to your text, you can use the character entity.

To display a less than sign we mustwrite: < or <

A common character entity used in HTML is the non-breaking space ( ).

Browsers will always truncate spaces in HTMLpages. If you write 10 spaces in your text, thebrowser will remove 9 of them, before displaying thepage. To add spaces to your text, you can use the character entity.

HTML Entities

JavaScript


<script>document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text in thenoscript element.</p>

</body></html>


<script>document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text in thenoscript element.</p>

</body></html>

Script


The <script> element either contains scriptingstatements or it points to an external script filethrough the src attribute.

Common uses for JavaScript are imagemanipulation, form validation, and dynamicchanges of content.


The <script> element either contains scriptingstatements or it points to an external script filethrough the src attribute.

Common uses for JavaScript are imagemanipulation, form validation, and dynamicchanges of content.

You don’t need to know everything, theonly thing you have to know is how to

get it when you want to use it

Enstein

Documents

HTML(31.08.2015 New) [Compatibility Mode]