HTML Head Head Body h1 h1 Body HTML: Hello World

1)write hello world using html?
a) <html>
<head>
</head>
<body>
<h1>Hello World<h1>
</body>
</html>
2)HTML INTRODUCTION
What is HTML?
 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5
document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:

Start tag Element content
<h1> My First Heading
<p> My first paragraph.
<br> none
Note: Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!
3)HTML ELEMENTS?
A) HTML Elements
❮ PreviousNext ❯
An HTML element is defined by a start tag, some content, and an end tag.
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:

Start tag Element content
<h1> My First Heading
<p> My first paragraph.
<br> none
Note: Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!
Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
Example
<!DOCTYPE html>
<html>
<body>

</body>
</html>
Try it Yourself »
Example Explained
The <html> element is the root element and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is a <body> element:
<body>

</body>
The <body> element defines the document's body.
It has a start tag <body> and an end tag </body>.
Then, inside the <body> element there are two other elements: <h1> and <p>:

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Try it Yourself »
However, never rely on this! Unexpected results and errors may occur if you
forget the end tag!
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
Example
<p>This is a <br> paragraph with a line break.</p>
Try it Yourself »
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but

W3C recommends lowercase in HTML, and demands lowercase for stricter document
types like XHTML.
At W3Schools we always use lowercase tag names.
HTML Tag Reference
W3Schools' tag reference contains additional information about these tags and their
attributes.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
For a complete list of all available HTML tags, visit our HTML Tag Reference.
4)HTML TABLE
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Example
Company Contact
Alfreds Futterkiste Maria Anders
Centro comercial Moctezuma Francisco Chang
Ernst Handel Roland Mendel
Island Trading Helen Bennett
Laughing Bacchus Winecellars Yoshi Tannamuri
Magazzini Alimentari Riuniti Giovanni Rovelli
Try it Yourself »
Define an HTML Table
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag.
Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
Example
A simple HTML table:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Add a Border
To add a border to a table, use the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
Try it Yourself »
Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Try it Yourself »
HTML Table - Add Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
th, td {
padding: 15px;
}
Try it Yourself »
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
Try it Yourself »
HTML Table - Add Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}
Try it Yourself »
Note: If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cell that Spans Many Columns
To make a cell span more than one column, use the colspan attribute:
Example
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Try it Yourself »
HTML Table - Cell that Spans Many Rows
To make a cell span more than one row, use the rowspan attribute:
Example
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Try it Yourself »
HTML Table - Add a Caption
To add a caption to a table, use the <caption> tag:
Example
<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>
Try it Yourself »
Note: The <caption> tag must be inserted immediately after the <table> tag.
A Special Style for One Table
To define a special style for one particular table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
#t01 {
width: 100%;
background-color: #f1f1c1;
}
Try it Yourself »
And add more styles:
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
color: white;
background-color: black;
}
Try it Yourself »
Chapter Summary
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
 Use the CSS border property to define a border
 Use the CSS border-collapse property to collapse cell borders
 Use the CSS padding property to add padding to cells
 Use the CSS text-align property to align cell text
 Use the CSS border-spacing property to set the spacing between cells
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table
HTML Exercises
Test Yourself With Exercises
Exercise:
Add a table row with two table headers.
The two table headers should have the value "Name" and "Age".
<table>
<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>
Submit Answer »
Start the Exercise

HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table
6)HTML LINKS
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
 Item
 Item
 Item
 Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Try it Yourself »
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Try it Yourself »
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

HTML Head Head Body h1 h1 Body HTML: Hello World

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Head Head Body h1 h1 Body HTML: Hello World

Uploaded by

Copyright:

Available Formats

1)write hello world using html?

 HTML stands for Hyper Text Markup Language

A Simple HTML Document

<h1>My First Heading</h1>

What is an HTML Element?

<tagname>Content goes here...</tagname>

<h1>My First Heading</h1>

Start tag Element content

<h1> My First Heading

<p> My first paragraph.

<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>

Start tag Element content

<h1> My First Heading

<p> My first paragraph.

Nested HTML Elements

All HTML documents consist of nested HTML elements.

<h1>My First Heading</h1>

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<h1>My First Heading</h1>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

<h1>My First Heading</h1>

The <h1> element defines a heading.

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Never Skip the End Tag

Empty HTML Elements

HTML elements with no content are called empty elements.

HTML is Not Case Sensitive

The HTML standard does not require lowercase tags, but

At W3Schools we always use lowercase tag names.

HTML Tag Reference

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

Alfreds Futterkiste Maria Anders

Centro comercial Moctezuma Francisco Chang

Ernst Handel Roland Mendel

Island Trading Helen Bennett

Laughing Bacchus Winecellars Yoshi Tannamuri

Magazzini Alimentari Riuniti Giovanni Rovelli

Define an HTML Table

The <table> tag defines an HTML table.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

A simple HTML table:

HTML Table - Add a Border

To add a border to a table, use the CSS border property:

HTML Table - Collapsed Borders

HTML Table - Add Cell Padding

To set the padding, use the CSS padding property:

HTML Table - Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Border spacing specifies the space between the cells.

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Spans Many Columns