HTML
hyper text markup language
Media Mime Types in HTML 5
Configure your servers to serve content for the following MIME types in HTML 5
AddType audio/ogg .oga AddType audio/wav .wav AddType video/ogg .ogv .ogg AddType video/mp4 .mp4
Handling Media Events in HTML 5 audio and video
Example which allows to play the given video:
<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<html>
<body>
<form>
<video width="300" height="200" src="/html5/foo.mp4">
Your browser does not support the <video> element.
</video>
<input type="button" onclick="PlayVideo();" value="Play"/>
</form>
</body>
</html>The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using Javascript:
| Event | Description |
|---|---|
| abort | This event is generated when playback is aborted. |
| canplay | This event is generated when enough data is available that the media can be played. |
| ended | This event is generated when playback completes. |
| error | This event is generated when an error occurs. |
| loadeddata | This event is generated when the first frame of the media has finished loading. |
| loadstart | This event is generated when loading of the media begins. |
| pause | This event is generated when playback is paused. |
| play | This event is generated when playback starts or resumes. |
| progress | This event is generated periodically to inform the progress of the downloading the media. |
| ratechange | This event is generated when the playback speed changes. |
| seeked | This event is generated when a seek operation completes. |
| seeking | This event is generated when a seek operation begins. |
| suspend | This event is generated when loading of the media is suspended. |
| volumechange | This event is generated when the audio volume changes. |
| waiting | This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). |
Audio Attribute Specification in HTML 5
The HTML5 audio tag can have a number of attributes to control the look and feel and various functionalities of the control:
| Attribute | Description |
|---|---|
| autoplay | This boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data. |
| autobuffer | This boolean attribute if specified, the audio will automatically begin buffering even if it’s not set to automatically play. |
| controls | If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback. |
| loop | This boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end. |
| preload | This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present. |
| src | The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed |
Embedding Audio in HTML 5 Pages
HTML5 supports audio tag which is used to embed sound content in an HTML or XHTML document as follows.
<audio src="foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.
You can use source tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format:
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src="/html5/audio.ogg" type="audio/ogg" />
<source src="/html5/audio.wav" type="audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>Video Attribute Specification in HTML 5
The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control:
| Attribute | Description |
|---|---|
| autoplay | This boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data. |
| autobuffer | This boolean attribute if specified, the video will automatically begin buffering even if it’s not set to automatically play. |
| controls | If this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback. |
| height | This attribut specifies the height of the video’s display area, in CSS pixels. |
| loop | This boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end. |
| preload | This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present. |
| poster | This is a URL of an image to show until the user plays or seeks. |
| src | The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed |
| width | This attribut specifies the width of the video’s display area, in CSS pixels. |
Embedding Video in HTML 5 Pages
The HTML5 audio and video tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.
Here is the simplest form of embedding a video file in your webpage:
<video src="foo.mp4" width="300" height="200" controls>
Your browser does not support the <video> element.
</video>The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are:
Ogg: Ogg files with Thedora video codec and Vorbis audio codec.
mpeg4: MPEG4 files with H.264 video codec and AAC audio codec.
You can use source tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format:
<!DOCTYPE HTML>
<html>
<body>
<video width="300" height="200" controls autoplay>
<source src="/html5/foo.ogg" type="video/ogg" />
<source src="/html5/foo.mp4" type="video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>Introduction to XHTML
Extensible hypertext markup language, XHTML, is the basic language of the web page. Writing XHTML is not programming. XHTML is not a procedural language. Writing XHTML is more like word processing than programming. Like word processing, there are two approaches to write an XHTML page. There are WYSIWYG (What You See Is What You Get) editors for XHTML, which will allow your to compose a page, and see the result as you are doing it. The alternative is to use any text editor, such as notepad, wordpad, or even edit.
XHTML uses tags, which are keywords enclosed in “angle brackets” (“<" and ">“) to define the meaning of the text and the format of a page. Working with the XHTML directly gives you more flexible control over the page and how it will appear.
There are two categories of elements; container elements and empty elements. Container elements have a pair of tags, and the text in between is contained within thos tags. The first, or opening, tag is the keyword enclosed in “angle brackets.” The second, or closing, tag is the same as the opening tag, except that the keyword is preceeded by a (forward) slash, “/”.
For example the paragraph tag (keyword p) opens a paragraph with
<p>
and closes it with
</p>
The text in between will be seen on the web page as a paragraph.
XHTML is case sensitive, and the tags and attribute names must all be in lower case.
Displaying images using img tag in HTML
The IMG element is used to incorporate images into an HTML document. The common attributes used are SRC, ALT (required by HTML 4), WIDTH, and HEIGHT (recommended for practical reasons). IMG is an inline element, and can be used anywhere text can be used. Images can be put into a sentence, in a table cell, by themselves, or almost anywhere on a page.
The value of the SRC attribute is the URL of the image file. This URL can be absolute (e.g., “http://www.w3mentor.com/images/”) or relative. Relative URLs can be either relative to the current directory (e.g., “../../../images/learnhtml.gif”), or relative to the root of the current web server (e.g., “/images/learnhtml.gif”). The recommended usage is relative to the current directory.
Each image file contins not only the pixels of the image, but also the dimensions of the image. If the WIDTH and HEIGHT attributes are not specified, the dimensions from the image file are used to size the image on the web page.
The images files are loaded after the web page has loaded, though. If the WIDTH and HEIGHT attributes are not in the web page, this means that the browser does not know how much apace to allocate the image until the image file has been loaded. IF the WIDTH and HEIGHT attributes are specified in the HTML, then the browser can allocate that much space to the image before the image is actually available.
The WIDTH and HEIGHT can be specified either as decimal numbers, or as a percentage of the space available. If a number is used, it is taken as a dimension in pixels.
If the specified dimensions are not the same as the image dimensions, the browser will stretch or reduce the image to the specified dimensions. The browser will do the best job it can to preserve the appearance of the image, but in some cases, though, the change of size will result in unacceptable distortion. If the image is reduced, this also means that a larger file is being loaded that is required, meaning longer than necessary load times and bandwidth usage.
Recommended usage is to specify the same dimensions as the actual dimensions of the image. If resizing is desired, the resizing should be done with an image editing program, saving the image with the desired dimensions.
The value of the ALT attribute describes the file, and is displayed if the image is not available. The ALT attribute is required by the HTML 4 specifications.
Example code:
<IMG SRC="../../images/learnhtml.gif" ALT="Default Size"> <br> <IMG SRC="../../images/learnhtml.gif" WIDTH="175" HEIGHT="16" ALT="Same Size"> <br> <IMG SRC="../../images/learnhtml.gif" WIDTH="175" HEIGHT="32" ALT="Double Height"> <br> <IMG SRC="../../images/learnhtml.gif" HEIGHT="32" ALT="Double Size"> <br> <IMG SRC="../../images/learnhtml.gif" WIDTH="100%" ALT="100% WIDTH">
Horizontal rule HR tag in HTML
The horizontal rule HTML element can be used to add a visible separation line to a document. The amount of vertical space inserted between a rule and the content that surrounds it depends on the browser. The HR element is an empty element.
The appearance of a horizontal rule should be controlled by the STYLE attribute. Different browsers interpret the STYLE attribute differently, however; this can be frustrating to web designers.
The Horizontal Rule (HR) element is an empty block element. While previous HTML versions used attributes to specify the appearance of a horizontal rule, HTML 4 now use the STYLE attribute to specify the appearance.
The width (horizontal size) of an hr can be controlled by the width style or by the margin-left and margin-right styles: e.g.,
width:50%;
margin-left:20pt;margin-right:20pt;
The height (vertical size) of an hr is controlled by the height style: e.g.,
height:5pt;
The horizontal position of an hr is controlled by the margin-left and margin-right styles: e.g.,
margin-left:auto;margin-right:20pt;width:300pt;
The color of an hr should be specified by both the color and background-color styles, because of browser differences, e.g.,
color:#C00000;background-color:#C00000;
The hr element is usually rendered with a 1 pixel border; to eliminate the border, specify border:0.
Example code:
<H1>HTML 4 Strict Horizontal Rule Examples</H1>
<P>Default Horizontal Rule</P>
<HR>
<P>Horizontal Rule: width:50%</P>
<HR STYLE="width:50%">
<P>Horizontal Rule: width:400px</P>
<HR STYLE="width:400px">
<P>Horizontal Rule: width:400pt</P>
<HR STYLE="width:400pt">
<P>Horizontal Rule: width:30em</P>
<HR STYLE="width:30em">
<P>Horizontal Rule: width:50%;margin-left:0
<b>BROWSER DEPENDENT</b></P>
<HR STYLE="width:50%;margin-left:0px">
<P>Horizontal Rule: in div width:50%;margin-left:0</P>
<div STYLE="margin-left:0px;width:50%;margin-right:auto;">
<HR>
</div>
<P>Horizontal Rule: width:50%;margin-right:0;margin-left:auto
<b>BROWSER DEPENDENT</b></P></P>
<HR STYLE="width:50%;margin-right:0px;margin-left:auto;display:block">
<P>Horizontal Rule: in div width:50%;margin-right:0</P>
<div STYLE="float:right;margin-right:0px;width:50%;margin-left:auto;">
<HR>
</div>
<div STYLE="clear:right"></div>
<P>Horizontal Rule: width:50%;height:4px</P>
<HR STYLE="width:50%;height:4px">
<P>Horizontal Rule:<br>STYLE="width:50%;height:4px;
color:gray;background-color:gray;border:0;"</P>
<HR STYLE="width:50%;height:4px;color:gray;
background-color:gray;border:0;">Title tag in HTML pages
The title of an HTML document is advisory only, but it is also very important. The title appears in the title bar of the browser window, and it also appears as the first line of search engine results. The HTML TITLE element is actually the title of the web page, and it should meaningfully suggest the contents of the page. The TITLE element is placed in the HEAD element of HTML, and there should be exactly one TITLE element in each page. With most browsers, the title does not appear in the web page itself, but is shown in the title bar of the browser window.
The title text should be between the opening and closing TITLE tags, e.g.,
<TITLE> Building your own HTML PAGES - From w3mentor </TITLE>
Other HTML tags should not be used within the title; they will not be interpreted. HTML entities can be used in titles, and they will be interpreted and rendered as the symbols or characters they represent, e.g.,
<TITLE> How to Get Copyrights (©) & Trademarks (&trade) in titles.. </TITLE>
By the HTML specifications, each page must have exactly one title element.
The title element can contain plain text.
The title element can also contain html entities to include characters and symbols which are not part of the document character set.
No other HTML elements can be contained in the title element.
Example code:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Blank HTML 4 Strict Page</TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY>
<P></P>
</BODY>
</HTML>Usually, the page headings, which do show on the body of the web page, should coordinate with the title. For example, the title of this page is
and the page headings are
Using Titles
HTML Tutorials – W3mentor
Heading tags in HTML pages
The heading elements of an HTML document organize the content in a way similar to an outline. There are six levels of headings, which correspond to the levels of an outline.The heading elements of an HTML document specify topics of the page, as a hierarchy from H1 down to H6. The tags are H1, H2, H3, H4, H5, H6. The contents of the heading elements can be a sequence of inline elements.
The heading tags have the following attributes in HTML 4
* coreattr
ID
CLASS
STYLE
TITLE
* i18n
DIR
LANG
* events
ONCLICK
ONDBLCLICK
ONMOUSEDOWN
ONMOUSEMOVE
ONMOUSEOUT
ONMOUSEOVER
ONMOUSEUP
ONKEYDOWN
ONKEYPRESS
ONKEYUPHeadings in HTML pages
The heading elements of an HTML document organize the content in a way similar to an outline. There are six levels of headings, which correspond to the levels of an outline.
The top (most important) level heading uses the H1 tag, and the lowest (least important) supported level uses the H6 tag. Typically, browsers render the headings as bold type, in decreasing sizes, by default. This default rendering can be changed by styles, though.
Usually, a document should have one or more H1 elements, each followed by one or more H2 elements. Each H2 element can be followed by one or more H3 elements, and so on. When headings are used this way, they mimic the structure of an outline. Text and other content can follow any of the headings, as needed.
Usually, the page headings should coordinate with the title. For example, the title of this page is
<TITLE>Using Headings - HTML Tutorials - w3mentor</TITLE>
and the page headings are
<H1>Using Headings</H1> <H2>HTML Tutorial - w3mentor</H2>
Creating a HTML page
Development of HTML pages can start with a basic template, which includes the framework elements. Specific information can then be added to the page as needed. An HTML page begins with a Document Type Definition (DTD), which identifies the specification against which the page should be interpreted. This is followed by the page itself, embedded in HTML tags. Contained within the HTML element are the HEAD element and the BODY element.
The DTD is not an HTML element; it is actually an SGML element.
The HEAD element contains additional information which is used to interpret the document, as well as information that is used by indexing robots. None of the contents of the HEAD element is normally shown in the browser window proper. The HEAD element is required to contain a TITLE element, which is shown on the title bar of the browser window. The META element used below identifies the character set in which the page is encoded for the HTML versions.
The BODY element contains the information which will be show in the browser window. Since these are blank documents, the body element does not contain anything.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE><!-- Put the page TITLE here --></TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=us-ascii">
</HEAD>
<BODY>
<!-- Put the page content here -->
</BODY>
</HTML>Format in HTML pages
In most cases, the format of the HTML text does not affect how the page appears in a browser. The page contents are reformatted according to the HTML tags.
When saving an HTML page from a general text editor, always explicitly use the extension “.htm” or “.html”. If you do not do this, the editor will probably add the extension “.txt”, and the browser will not recognize it as an HTML page.
HTML pages do not have to be loaded from the Internet to be displayed in a web browser.
From Netscape Navigator, choose File from the main menu, and Open Page … from the submenu. Click Choose File from the dialog box, select the file you want to display, and click Open.
From Microsoft Internet Explorer, choose File from the main menu, and Open … from the submenu. Click Browse from the dialog box, select the file you want to display, and click OK.
Empty elements in HTML
Tags for empty elements do not occur in pairs. They consist of the keyword enclosed in “angle brackets.” No page text is contained within them.
For example, the horizontal rule tag, keyword HR, puts a horizontal line on the page.
Example:
<P> This is a paragraph, which will be formatted into left justified lines to fit the available space. </P> <HR> <P> Another paragraph, which will be set apart from the previous paragraph by a blank line and by the horizontal rule. </P>
Output:
This is a paragraph, which will be
formatted into left justified
lines to fit the available space.
Another paragraph, which will
be set apart from the previous
paragraph by a blank line and
by the horizontal rule.
Introduction to HTML
Hypertext markup language, HTML, is the basic language of the web page. Writing HTML is not programming. HTML is not a procedural language. Writing HTML is more like word processing than programming. Like word processing, there are two approaches to write an HTML page. There are WYSIWYG (What You See Is What You Get) editors for HTML, which will allow your to compose a page, and see the result as you are doing it. The alternative is to use any text editor, such as notepad, wordpad, or even edit.
HTML uses tags, which are keywords enclosed in “angle brackets” (“<" and ">“) to define the meaning of the text and the format of a page. Working with the HTML directly gives you more flexible control over the page and how it will appear.
There are two categories of elements; container elements and empty elements. Container elements have a pair of tags, and the text in between is contained within thos tags. The first, or opening, tag is the keyword enclosed in “angle brackets.” The second, or closing, tag is the same as the opening tag, except that the keyword is preceeded by a (forward) slash, “/”.
For example the paragraph tag (keyword P) opens a paragraph with
<P>
and closes it with
<P>
The text in between will be seen on the web page as a paragraph.
HTML is not case sensitive, and the tags and attribute names are customarily in upper case.
Example:
<P> This is a paragraph, which will be formatted into left justified lines to fit the available space. </P> <P> Another paragraph, which will be set apart from the previous paragraph by a blank line. </P>
Output:
This is a paragraph, which will be
formatted into left justified
lines to fit the available space.
Another paragraph, which will
be set apart from the previous
paragraph by a blank line.
