Web Tutorial 2

Payza Signup
 
You are here: » Home » All posts

HTML5 is The New HTML Standard



HTML5

  • New Elements
  • New Attributes
  • Full CSS3 Support
  • Video and Audio
  • 2D/3D Graphics
  • Local Storage
  • Local SQL Database
  • Web Applications
HTML5 Example:
<video controls="controls" height="240" width="320">
<source src="movie.mp4" type="video/mp4"></source>
<source src="movie.ogg" type="video/ogg"></source>
<source src="movie.webm" type="video/webm"></source>
Your browser does not support the video tag.
</video>

HTML5 Introduction

What is HTML5?

HTML5 will be the new standard for HTML.

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

HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

How Did HTML5 Get Started?

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

Some rules for HTML5 were established:

New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public

The HTML5 <!doctype>

In HTML5 there is only one declaration, and it is very simple:


<!DOCTYPE html>

Minimum HTML5 Document

Below is a simple HTML5 document, with the minimum of required tags:

Minimum HTML5 Document
Below is a simple HTML5 document, with the minimum of required tags:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

HTML5 - New Features

Some of the most interesting new features in HTML5:
  • The <canvas> element for 2D drawing
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search



[Read More...]


HTML Tutorial Part-5: HTML Paragraph and HTML Text Formatting



Paragraphs are defined with the <p> tag.
Example:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Note: Browsers automatically add an empty line before and after a paragraph.

Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag:
Example:
<p>This is a paragraph
<p>This is another paragraph
The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.
Note: Future version of HTML will not allow you to skip end tags.

HTML Line Breaks:

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

he <br /> element is an empty HTML element. It has no end tag.
<br> or <br />

In XHTML, XML, elements with no end tag (closing tag) are not allowed.

Even if <br> works in all browsers, writing <br /> instead works better in XHTML and XML applications.

HTML Output - Useful Tips
You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.

HTML Text Formatting:

This text is bold

This text is big

This text is italic

This is computer output

This is subscript and superscript

HTML Formatting Tags:

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).
Remark     Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

HTML Text Formatting Tags

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

HTML "Computer Output" Tags

Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text 
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text

HTML Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

[Read More...]


HTML Tutorial Part-4



HTML Headings

Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<h1>HTML Headings H1</h1>
<h2>HTML Headings H2</h2>
<h3>HTML Headings H3</h3>
Note: Browsers automatically add some empty space (a margin) before and after each heading.

Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

HTML Lines

The <hr /> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:

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

HTML Comments

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

HTML Tip - How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"
To find out, right-click in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.
[Read More...]


HTML Attributes Reference:



A complete list of legal attributes for each HTML element is listed in our:
DTD: indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset

Tag Description DTD
<!--...--> Defines a comment STF
<!DOCTYPE>  Defines the document type STF
<a> Defines an anchor STF
<abbr> Defines an abbreviation STF
<acronym> Defines an acronym STF
<address> Defines contact information for the author/owner of a document STF
<applet> Deprecated. Defines an embedded applet TF
<area /> Defines an area inside an image-map STF
<b> Defines bold text STF
<base /> Specifies the base URL/target for all relative URLs in a document STF
<basefont /> Deprecated. Specifies a default color, size, or font for all the text in a document TF
<bdo> Overrides the current text direction STF
<big> Defines big text STF
<blockquote> Defines a long quotation STF
<body> Defines the document's body STF
<br /> Defines a single line break STF
<button> Defines a clickable button STF
<caption> Defines a table caption STF
<center> Deprecated. Defines centered text TF
<cite> Defines a citation STF
<code> Defines a piece of computer code STF
<col /> Defines attribute values for one or more columns in a table  STF
<colgroup> Specifies a group of one or more columns in a table for formatting STF
<dd> Defines a description of an item in a definition list STF
<del> Defines text that has been deleted from a document STF
<dfn> Defines a definition term STF
<dir> Deprecated. Defines a directory list TF
<div> Defines a section in a document STF
<dl> Defines a definition list STF
<dt> Defines a term (an item) in a definition list STF
<em> Defines emphasized text  STF
<fieldset> Groups related elements in a form STF
<font> Deprecated. Defines font, color, and size for text TF
<form> Defines an HTML form for user input STF
<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<h1> to <h6> Defines HTML headings STF
<head> Defines information about the document STF
<hr /> Defines a horizontal line STF
<html> Defines the root of an HTML document STF
<i> Defines italic text STF
<iframe> Defines an inline frame TF
<img /> Defines an image STF
<input /> Defines an input control STF
<ins> Defines text that has been inserted into a document STF
<kbd> Defines keyboard input STF
<label> Defines a label for an <input> element STF
<legend> Defines a caption for a <fieldset> element STF
<li> Defines a list item STF
<link /> Defines the relationship between a document and an external resource STF
<map> Defines a client-side image-map  STF
<menu> Deprecated. Defines a menu list TF
<meta /> Defines metadata about an HTML document STF
<noframes> Defines an alternate content for users that do not support frames TF
<noscript> Defines an alternate content for users that do not support client-side scripts STF
<object> Defines an embedded object STF
<ol> Defines an ordered list STF
<optgroup> Defines a group of related options in a drop-down list STF
<option> Defines an option in a drop-down list STF
<p> Defines a paragraph STF
<param /> Defines a parameter for an object STF
<pre> Defines preformatted text STF
<q> Defines a short quotation STF
<s> Deprecated. Defines strikethrough text TF
<samp> Defines sample output from a computer program STF
<script> Defines a client-side script STF
<select> Defines a drop-down list STF
<small> Defines smaller text STF
<span> Defines a section in a document STF
<strike> Deprecated. Defines strikethrough text TF
<strong> Defines strong text STF
<style> Defines style information for a document STF
<sub> Defines subscripted text STF
<sup> Defines superscripted text STF
<table> Defines a table STF
<tbody> Groups the body content in a table STF
<td> Defines a cell in a table STF
<textarea> Defines a multiline input control (text area) STF
<tfoot> Groups the footer content in a table STF
<th> Defines a header cell in a table STF
<thead> Groups the header content in a table STF
<title> Defines a title for the document STF
<tr> Defines a row in a table STF
<tt> Defines teletype text STF
<u> Deprecated. Defines underlined text TF
<ul> Defines an unordered list STF
<var> Defines a variable STF
<xmp> Deprecated. Defines preformatted text



Tag Description DTD
Basic
<!DOCTYPE>  Defines the document type STF
<html> Defines an HTML document STF
<body> Defines the document's body STF
<h1> to <h6> Defines HTML headings STF
<p> Defines a paragraph STF
<br /> Inserts a single line break STF
<hr /> Defines a horizontal line STF
<!--...--> Defines a comment STF
Formatting

<acronym> Defines an acronym STF
<abbr> Defines an abbreviation STF
<address> Defines contact information for the author/owner of a document STF
<b> Defines bold text STF
<bdo> Overrides the current text direction STF
<big> Defines big text STF
<blockquote> Defines a long quotation STF
<center> Deprecated. Defines centered text TF
<cite> Defines a citation STF
<code> Defines a piece of computer code STF
<del> Defines text that has been deleted from a document STF
<dfn> Defines a definition term STF
<em> Defines emphasized text  STF
<font> Deprecated. Defines font, color, and size for text TF
<i> Defines italic text STF
<ins> Defines text that has been inserted into a document STF
<kbd> Defines keyboard input STF
<pre> Defines preformatted text STF
<q> Defines a short quotation STF
<s> Deprecated. Defines strikethrough text TF
<samp> Defines sample output from a computer program STF
<small> Defines smaller text STF
<strike> Deprecated. Defines strikethrough text TF
<strong> Defines strong text STF
<sub> Defines subscripted text STF
<sup> Defines superscripted text STF
<tt> Defines teletype text STF
<u> Deprecated. Defines underlined text TF
<var> Defines a variable STF
<xmp> Deprecated. Defines preformatted text
Forms

<form> Defines an HTML form for user input STF
<input /> Defines an input control STF
<textarea> Defines a multiline input control (text area) STF
<button> Defines a clickable button STF
<select> Defines a drop-down list STF
<optgroup> Defines a group of related options in a drop-down list STF
<option> Defines an option in a drop-down list STF
<label> Defines a label for an <input> element STF
<fieldset> Groups related elements in a form STF
<legend> Defines a caption for a <fieldset> element STF
Frames

<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<noframes> Defines an alternate content for users that do not support frames TF
<iframe> Defines an inline frame TF
Images

<img /> Defines an image STF
<map> Defines an image-map  STF
<area /> Defines an area inside an image-map STF
Links

<a> Defines an anchor STF
<link /> Defines the relationship between a document and an external resource STF
Lists

<ul> Defines an unordered list STF
<ol> Defines an ordered list STF
<li> Defines a list item STF
<dir> Deprecated. Defines a directory list TF
<dl> Defines a definition list STF
<dt> Defines an item in a definition list STF
<dd> Defines a description of an item in a definition list STF
<menu> Deprecated. Defines a menu list TF
Tables

<table> Defines a table STF
<caption> Defines a table caption STF
<th> Defines a header cell in a table STF
<tr> Defines a row in a table STF
<td> Defines a cell in a table STF
<thead> Groups the header content in a table STF
<tbody> Groups the body content in a table STF
<tfoot> Groups the footer content in a table STF
<col /> Defines attribute values for one or more columns in a table STF
<colgroup> Defines a group of columns in a table for formatting STF
Styles

<style> Defines style information for a document STF
<div> Defines a section in a document STF
<span> Defines a section in a document STF
Meta Info

<head> Defines information about the document STF
<title> Defines the document title STF
<meta> Defines metadata about an HTML document STF
<base /> Specifies the base URL/target for all relative URLs in a document STF
<basefont /> Deprecated. Specifies a default color, size, or font for all the text in a document TF
Programming

<script> Defines a client-side script STF
<noscript> Defines an alternate content for users that do not support client-side scripts STF
<applet> Deprecated. Defines an embedded applet TF
<object> Defines an embedded object STF
<param /> Defines a parameter for an object STF
[Read More...]


HTML Tutorial Part-3



HTML Attributes

    HTML elements can have attributes
    Attributes provide additional information about an element
    Attributes are always specified in the start tag
    Attributes come in name/value pairs like: name="value"

Attribute Example:

HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<a href="http://www.webtutorial2.blogspot.com">This is a link</a>

Always Quote Attribute Values

Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style quotes are also allowed.

Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson'

HTML Tip: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive.
However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

Newer versions of (X)HTML will demand lowercase attributes.
[Read More...]


Subscribe to: Comments (Atom)
 
Payza Signup
Return to top of page Copyright © 2011 | Web Tutorial 2 Sponsored byTuli Host BD