HTML Examples - XHTML schools

Examples

Set the preferred scrolling method for elements that overflow

Explanation of examples

Examples HTML

Explanation of examples HTML

Examples HTML Introduction

My first example HTML

Explanation of examples HTML Introduction

Examples HTML Basic

HTML Headings

Explanation of examples HTML Basic

Examples HTML Frames

How to use the noframes tag HTML
This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns
Frameset with noresize='noresize' HTML
Navigation frame HTML
Inline frame HTML
Jump to a specified section within a frame HTML
Jump to a specified section with frame navigation HTML
This example demonstrates how to make a vertical frameset with three different documents
This example demonstrates how to make a horizontal frameset with three different documents.

Explanation of examples HTML Frames

Examples

Comments in HTML

Explanation of examples

Examples <a>

A link with a rel attribute:
The hreflang attribute specifies the language of the document in the link:
Use of the shape and coords attribute in an a element, to create an image-map:

Explanation of examples <a>

Examples <area>

CSS Example: preformatted text with a fixed width

Explanation of examples <area>

Examples <b>

Format text in a document:

Explanation of examples <b>

Examples <base>

Specify a default target for all links on a page
Specify a base URL for all relative URLs on a page:
Specify the default font-size for text on page

Explanation of examples <base>

Examples <basefont>

Specify a default font-color and font-size for text on page:
Specify a default font-color for text on page
Specify a default font color for a page
Specify a default font for a page
Specify a default font for a page
Specify the default font-size for text on page

Explanation of examples <basefont>

Examples <bdo>

Use of the title attribute in an HTML document

Explanation of examples <bdo>

Examples <body>

A simple HTML document, with the minimum of required tags:
Set the color of an active link
Add a background image to a document
Set the background color of a document
Set the color of unvisited links in a document

Explanation of examples <body>

Examples <button>

A button is marked up as follows:

Explanation of examples <button>

Examples <caption>

A table with caption element:

Explanation of examples <caption>

Examples <center>

Center text in an HTML page:

Explanation of examples <center>

Examples <cite>

Format text in a document:

Explanation of examples <cite>

Examples <col>

In the example below, the content of the second column should be aligned to the "." character:
In the example below, the content of the second column is aligned two characters to the right from the "." character:
Here, all three columns will be center-aligned, because the col element spans three columns:
An HTML table with different vertical-aligned columns:
Two col elements with a predefined width:
col elements that specify different alignment for the three columns in the table:

Explanation of examples <col>

Examples <colgroup>

A column group that specifies that the two columns should have a predefined width of 100 pixels:
An HTML table with different vertical-aligned columns:
Two colgroup elements that specify different alignment and style for the three columns in the table (notice that the first colgroup element spans two columns):
Two colgroup elements that specify different alignment for the three columns in the table (notice that the first colgroup element spans two columns):
In the example below, the content of the second column is aligned two characters to the right from the "." character:
Two colgroup elements that specify different alignment for the three columns in the table (notice that the first colgroup element spans two columns):
In the example below, the content of the second column should be aligned to the "." character:

Explanation of examples <colgroup>

Examples <dd>

Description of items in a definition list:

Explanation of examples <dd>

Examples <del>

Form with radiobuttons: A form with two radio buttons, and a submit button.
A text with a deleted part and a new inserted part:

Explanation of examples <del>

Examples <dir>

A directory list:
Use of the compact attribute in a directory list:
CSS Example: reduce line-height in a list

Explanation of examples <dir>

Examples <div>

A section in a document that will be displayed in green:
A section in a document that will be center-aligned:
CSS Example: Align text in a div element

Explanation of examples <div>

Examples <dl>

A definition list:

Explanation of examples <dl>

Examples <fieldset>

Group related elements in a form:

Explanation of examples <fieldset>

Examples <font>

Specify the font size, font face and color of text:
Specify the color of text:
Specify the font of text:
Specify the size of text:
CSS Example: set the color of text
CSS Example: set the font of text
CSS Example: set the size of text

Explanation of examples <font>

Examples <form>

Form with checkboxes: A form with two checkboxes, and a submit button.
Send e-mail from a form: How to send e-mail from a form.
Use of the accept attribute in a form (allow two types of files in the file upload - gif and jpeg):
Use of the accept-charset attribute in a form:
In the following example, the form-data will be sent unencoded:
In the following example, the form-data will be appended to the URL via the "get" method:
An HTML form with a name attribute:
In the following example, the page specified in the action attribute will open in a new window:
A simple HTML form with two input fields and one submit button:

Explanation of examples <form>

Examples <frame>

A simple three-framed page:
How to make a horizontal frameset with three different documents.
How to make a frameset with three documents, and how to mix them in rows and columns.
How to use the <noframes> tag.
How to use the "noresize" attribute. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders.
How to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm" contains three links.
This example demonstrates two frames. One of the frames has a source to a specified section in a file. The specified section is made with <a name="C10"> in the "link.html" file.
This example demonstrates two frames. The navigation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file.
A two-framed page, with no frameborders:
The longdesc attribute points to a page with a long description of the content of a frame:
The first frame with a top and bottom margin of 50 pixels, and the second frame with a top and bottom margin of 0 pixels:
The first frame with a left and right margin of 50 pixels, and the second frame with a left and right margin of 0 pixels:
A named frame:
Frame A cannot be resized:
Frame A always contain scrollbars:
The src attribute specifies the location of the document to show in a frame:
CSS Example: frame borders

Explanation of examples <frame>

Examples <head>

A simple HTML document, with the minimum of required tags:
How to use the <link> tag to link to an external style sheet.
How to use <meta> tags to describe the document.

Explanation of examples <head>

Examples <h1>-<h6>

The six different HTML headings:
Aligned HTML headings:
CSS Example: Set the alignment of headings

Explanation of examples <h1>-<h6>

Examples <hr>

Two paragraphs divided by a horizontal line:
A left-aligned horizontal line:
CSS Example: align a hr element
A noshaded horizontal line:
CSS Example: A noshaded hr
A horizontal line with a height of 30 pixels:
CSS Example: Set the height of a hr element
A horizontal line with a width of 350 pixels:
CSS Example: Set the width of a hr element

Explanation of examples <hr>

Examples <html>

A simple XHTML document, with the minimum of required tags:

Explanation of examples <html>

Examples <iframe>

An inline frame is marked up as follows:
A right-aligned iframe:
CSS Example: Float an iframe to the right
An iframe with no border:
CSS Example: iframe borders
An iframe with a specified height and width:
The longdesc attribute points to a page with a long description of the content of an iframe:
An iframe with a top and bottom margin of 50 pixels:
An iframe with a left and right margin of 50 pixels:
An iframe that act as a target for a link:
An iframe with scrollbars:
An iframe in its simplest use:

Explanation of examples <iframe>

Examples <img>

An image is marked up as follows:
How to insert images from another folder or from another web site.
How to align an image within a text.
How to let an image float to the left or right of a text.
How to add a hyperlink to an image.
Align the image in the middle of a text:
CSS Example: Float an image to the right
An image with a border of 5 pixels:
CSS Example: image border
An image with a height and a width:
An image with a 20 pixels margin on both left and right sides:
CSS Example: image with margins
Use of the longdesc attribute, to point to a page with a long description of an image:
An image with a 20 pixels margin on top and bottom:
CSS Example: image with margins
An image with title

Explanation of examples <img>

Examples <input>

How to define a password field.
How to define a button with your own text.
An HTML form with two input fields and one image as a submit button:
CSS Example: align input image
An HTML form with a disabled input field:
An HTML form with two input fields with a maximum length of 75 and 35 characters:
An HTML form with two text fields and one submit button:
An HTML form with two input fields (one read-only) and one submit button:
An HTML form with two input fields with a width of 35 and 4 characters:
CSS Example: Set the width of an input field.
An HTML form with two input fields and one image as a submit button:
The button type is most often used to activate a JavaScript when a user clicks on the button
<input type="file" /> is used for file uploads.
Hidden fields often store a default value, or have their value changed by a JavaScript.
The characters in a password field are masked (shown as asterisks or circles).
Radio buttons let a user select only one of a limited number of choices.
A reset button clears all data in a form.

Explanation of examples <input>

Examples <ins>

Use of the cite attribute in the ins element:
Use of the datetime attribute in the ins element:

Explanation of examples <ins>

Examples <label>

An simple HTML form with two input fields and related labels :

Explanation of examples <label>

Examples <legend>

Align the fieldset caption to the right:

Explanation of examples <legend>

Examples <li>

One ordered and one unordered HTML list:
A list inside a list.
A more complicated nested list.
Use of the type attribute in an ordered and an unordered HTML list:
CSS Example: list style type
Use of the value attribute in an ordered HTML list:

Explanation of examples <li>

Examples <link>

Link to an external style sheet:
Two different style sheets for two different media types (computer screen and print):

Explanation of examples <link>

Examples <menu>

A menu list:
Use of the compact attribute in a menu list:

Explanation of examples <menu>

Examples <meta>

Describe metadata within an HTML document:
Use the scheme attribute to define formats for the content attribute:

Explanation of examples <meta>

Examples <noframes>

A simple three-framed page, with a <noframes> tag:

Explanation of examples <noframes>

Examples <noscript>

Use of the <noscript> tag:

Explanation of examples <noscript>

Examples <object>

Add an object to an HTML page:

Explanation of examples <object>

Examples <ol>

An ordered HTML list:
Use of the compact attribute in an ordered HTML list:
CSS Example: reduce line-height in a list
Set the start point to "4" in an ordered list:
Set the bullet points to roman numbers in an ordered list:
CSS Example: Set the list style type

Explanation of examples <ol>

Examples <optgroup>

Group together related options with <optgroup> tags:
A disabled option group:

Explanation of examples <optgroup>

Examples <option>

The following HTML table center-aligns the content inside the tfoot element:
A drop-down list with four options:
A select list with four options - one disabled:
Use of the label attribute in option elements:
A drop-down list with a preselected option:
A drop-down list with values to be sent to a server:

Explanation of examples <option>

Examples <p>

A paragraph is marked up as follows:
A right-aligned paragraph:
CSS Example: Align text in a paragraph

Explanation of examples <p>

Examples <pre>

Preformatted text:
Preformatted text with a width of 30 characters:

Explanation of examples <pre>

Examples <q>

A short quotation is marked up as follows:
A quotation with a cite attribute that specifies the source of the quotation:

Explanation of examples <q>

Examples <s>

Strikethrough text can be marked up as follows:

Explanation of examples <s>

Examples <script>

Insert a JavaScript in an HTML page:
Define the character encoding used in a linked script file:
Use of the defer attribute:
Link to an external script file:

Explanation of examples <script>

Examples <select>

Disable a drop-down list:
Allow multiple selection in a drop-down list:
A drop-down list with a name attribute:
The size attribute displays two options in the drop-down list:

Explanation of examples <select>

Examples <span>

A text with a span element that can be styled with CSS:

Explanation of examples <span>

Examples <style>

Use of the style element in an HTML document:

Explanation of examples <style>

Examples <sub>

Subscript and superscript text:

Explanation of examples <sub>

Examples <table>

HTML tables with different borders.
How to create table headers.
How to use 'nbsp;' to handle cells that have no content.
An HTML table with a caption.
How to display elements inside other elements.
How to define table cells that span more than one row or one column.
How to use cellpadding to create more white space between the cell content and its borders.
How to use cellspacing to increase the distance between the cells.
How to add a background to a table.
How to use the "frame" attribute to control the borders around the table.
A right-aligned HTML table:
CSS Example: table alignment
An HTML table with a background color:
CSS Example: table background-color
The following example sets the width of the borders around a table to five pixels:
The following example sets the space between the cell wall and the cell content to ten pixels:
The following example sets the space between the cells to ten pixels:
The following example specifies that only the borders between the rows should be visible:
The following HTML table defines a summary of the content of the table:
An HTML table with a width of 400 pixels:
A simple HTML table, containing two columns and two rows:

Explanation of examples <table>

Examples <tbody>

An HTML table with a thead, tfoot, and a tbody element:
The following HTML table aligns the content inside the tbody element to the right:
The following HTML table aligns the content inside the tbody element to the "." character:
In the example below, the content inside the tbody element is aligned two characters to the right from the "." character:
The following HTML table vertical aligns the content inside the tbody element to the bottom:

Explanation of examples <tbody>

Examples <td>

Use of the abbr attribute in an HTML table:
An HTML table with a right-aligned cell:
An HTML table with categorized cells:
Cells with a background color:
CSS Example: table data background-color
In the example below, the content of the "Savings" data cell should align to the "." character:
In the example below, the content of the "Savings" data cell is aligned two characters to the right from the "." character:
An HTML table with table cells that spans two columns:
The following example shows the table header related to each cell:
Two table cells with a predefined height:
CSS Example: Set the height of a table cell
A table cell with a nowrap attribute:
CSS Example: no word wrapping in td
An HTML table with a cell that spans two rows:
Use of rowspan="0"
The following example identifies two of the th elements as headers for columns, and two of the td elements as headers for rows:
An HTML table with different vertical-aligned cells:
Table cells with a predefined width:
CSS Example: Set the width of a table cell

Explanation of examples <td>

Examples <textarea>

A text area with a name attribute:
A text area that is read-only:

Explanation of examples <textarea>

Examples <tfoot>

The following HTML table aligns the content inside the tfoot element to the "." character:
In the example below, the content inside the tfoot element is aligned two characters to the right from the "." character:
The following HTML table vertical aligns the content inside the tfoot element to the bottom:

Explanation of examples <tfoot>

Examples <th>

Use of the abbr attribute in an HTML table:
An HTML table with left-aligned table header cells:
An HTML table with categorized header cells:
Table header cells with a background color:
CSS Example: table header background-color
In the example below, the content of the first header cell should align to the "M" character:
In the example below, the content of the first header cell is aligned two characters to the right from the "M" character:
An HTML table with a header cell that spans two columns:
Table header cells with a predefined height:
CSS Example: Set the height of a table header
A table header cell with a nowrap attribute:
CSS Example: no word wrapping in th
An HTML table with a header cell that spans three rows:
An HTML table with different vertical-aligned table header cells:
Table header cells with a predefined width:
CSS Example: Set the width of a table header

Explanation of examples <th>

Examples <thead>

The following HTML table aligns the content inside the thead element to the left:
The following HTML table aligns the content inside the thead element to the "M" character:
In the example below, the content inside the thead element is aligned two characters to the right from the "M" character:
The following HTML table vertical aligns the content inside the thead element to the middle:

Explanation of examples <thead>

Examples <title>

A simple HTML document, with the minimum of required tags:

Explanation of examples <title>

Examples <tr>

An HTML table with center-aligned rows:
An HTML table with a background color on the first table row:
CSS Example: table row background-color
In the example below, the content of the second and the third row should align to the "." character:
In the example below, the content of the second and the third row is aligned two characters to the right from the "." character:
An HTML table with different vertical-aligned rows:

Explanation of examples <tr>

Examples <u>

Underline text with the <u> tag:

Explanation of examples <u>

Examples <ul>

An unordered HTML list:
Use of the compact attribute in an unordered HTML list:
CSS Example: reduce line-height in a list
A list inside a list.
A more complicated nested list.
Use of the type attribute in an unordered HTML list:
CSS Example: list style type

Explanation of examples <ul>

Examples HTML <blockquote> cite Attribute

This example shows an attribution, created using the cite attribute

Explanation of examples HTML <blockquote> cite Attribute

Examples HTML <body> alink Attribute

Set the active link color to "green" in an HTML document:

Explanation of examples HTML <body> alink Attribute

Examples HTML <body> background Attribute

Specify a background image for an HTML document

Explanation of examples HTML <body> background Attribute

Examples HTML <body> bgcolor Attribute

Specify a background color for an HTML document

Explanation of examples HTML <body> bgcolor Attribute

Examples HTML <body> link Attribute

Set the default link color to "blue" in an HTML document

Explanation of examples HTML <body> link Attribute

Examples HTML <body> text Attribute

Set the color of text in a document
Specify the color of text in an HTML document:

Explanation of examples HTML <body> text Attribute

Examples HTML <body> vlink Attribute

Set the visited link color to "red" in an HTML document:
Set the visited link color to "red" in an HTML document:

Explanation of examples HTML <body> vlink Attribute

Examples HTML <button> disabled Attribute

A disabled button is marked up as follows:

Explanation of examples HTML <button> disabled Attribute

Examples HTML <button> name Attribute

Two buttons with equal names, that submit different values when clicked:

Explanation of examples HTML <button> name Attribute

Examples HTML <button> type Attribute

Two button elements that act as one submit button and one reset button (in a form):