HTML Tutorial
HTML tutorial will help you in creating website, after study the tutorial you will just one step ahead of creating your own website. HTML is easy to understand and you will enjoy it to learn.
 |
| HTML tutorial for beginners with examples |
History
In late 1991, the first version of HTML was described by Tim Berners-Lee.
Version
|
Published year
|
HTML+
|
1993
|
HTML 2.0
|
1995
|
HTML 3.2
|
1997
|
HTML 4.01
|
1999
|
Creating a HTML page
Web developers often use HTML editors like Adobe Dreamweaver, Komodo Edit, Microsoft Web Expression, Komodo IDE, Aptana Studio, NetBeans, NetObjects Fusion, CoffeeCup HTML Editor, etc. these professional HTML editor can offer convenience and added functionality. But you don't need a special tool for making HTML, you can write HTML by using a basic text editor such as Notepad on Windows, TextEdit on MacOS, gedit on Ubuntu Linux etc. This is the best way to learn HTML.
Create a HTML page using Notepad on Windows.
1) Open a Notepad
2) Type HTML code into your Notepad
3) Click on the "File" menu and then on "Save as".
4) Select "UTF-8" in the dropdown menu of the "Encoding".
5) Type your file name with the .htm or the .html file extension.
Attribute - HTML tutorial for beginners with examples
HTML Attributes are property of the elements which may have values and these attribute values are always enclosed in quotes. It’s providing to the browser with some additional information about an elements how the elements should appear or behave. HTML elements can contain one or more attributes, attribute names and attribute values are case-insensitive and separated by an equals (=) sign.
Color - HTML tutorial for beginners with examples
A color value may either be a hexadecimal number or color names. Color numbers are prefixed by a hash mark. The color names are case-insensitive.
Comment - HTML tutorial for beginners with examples
The comment tag are used for written comments in an HTML document, it starts with the <! -- opening tag and end with --> tag. Comments are not displayed in the browser. Comments are used to explain the source code, which can help later when edit the source code. The Comment tag is supported in all major browsers.
Div - HTML tutorial for beginners with examples
The HTML <div> element is block level element, starts with the <div> opening tag and end with </div> tag. In an HTML document, the div element can be used as a container for grouping other HTML element. <div> tag is supported in all major browsers.
DOCTYPE - HTML tutorial for beginners with examples
The <! DOCTYPE> declaration give information to the web browser about what version of HTML is used, <! DOCTYPE> declaration is supported in all major browsers. The <! DOCTYPE> is placed in very first thing in HTML document before the HTML elements.
HTML 5 DOCTYPE
HTML 5 is not based on SGML therefore does not require a reference to a DTD.
HTML 4.01 DOCTYPE
HTML 4.01 was based on SGML and the <! DOCTYPE> declaration refers to a DTD.
Element - HTML tutorial for beginners with examples
An Element is an individual component of an HTML document. Element starts with a start tag / opening tag and ends with an end tag / closing tag. Everything between the start tag and the end tag are the element content. Elements are always case-insensitive. Some element types have no content; these Empty elements are closed in the start tag. Most elements can have attributes. Most elements can contain other elements there are called nested element.
Head - HTML tutorial for beginners with examples
HEAD Element starts with the <head> opening tag and end with </head> tag. The HEAD element is usually placed the first in the HTML element (that which starts with the <html> opening tag and ends with the </html> tag) but before the BODY element (that which starting with <body> and ending with </body>). HEAD element contains descriptive information about the document, such as <title>, <link>, <meta>, <style>, <script> etc. These elements are not displayed directly by the browsers but they function behind the scenes.
Heading - HTML tutorial for beginners with examples
In an HTML document Headings are defined with the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags, from <h1> for the most important to <h6> for the least important. A browser automatically adds some empty space before and after the Headings. Headings are supported in all major browsers.
Horizontal Line - HTML tutorial for beginners with examples
In an HTML document the <hr /> tag creates a horizontal line. The <hr> tag has no end tag, it is an empty tag. The <hr> tag is supported in all major browsers.
Image - HTML tutorial for beginners with examples
Images are defined with the <img> tag in an HTML document. src attribute is use for location of the image. alt attribute is use for short description of the image. Height attribute is use for specify the height of the image. Width attribute is use for specify the width of the image.
Line Break - HTML tutorial for beginners with examples
In a HTML document the <br /> tag is used for a single line break. The <br> tag has no end tag, it is an empty tag. The <br> tag is supported in all major browsers.
Link- HTML tutorial for beginners with examples
An anchor tag "a" is used to define a link and the destination of the link is defined in the "href" attribute of the tag.
List - HTML tutorial for beginners with examples
Definition Lists
In an HTML document, a Definition list starts with the < dl> tag and end with </dl>, <dt> tag is used for item of the list and <dd> tag is used for describes the item in the list.
Unordered Lists
An unordered list starts with the <ul> tag and end with </ul> and list item starts with the <li> tag end with the </li> tag in an HTML document.
Ordered Lists
An ordered list starts with the <ol> tag and end with </ol> and list item starts with the <li> tag end with the </li> tag in an HTML document.
Meta - HTML tutorial for beginners with examples
META element is placed inside the HEAD element (that which starts with the <head> opening tag and ends with the </head> tag). Meta elements are typically used to specify page description, keywords, author of the document and other metadata. The <meta> tag provides information about your HTML document. Metadata will not be displayed on the page, but it is used by browsers, search engines, or other web services. Usually Metadata gives information to browsers like how to display content of the HTML document, name and other information about the author, last modified information of the page, when the page will reload and etc.
Paragraph - HTML tutorial for beginners with examples
In an HTML document paragraphs are defined with the <p> tag, starts with the <p> opening tag and end with</p> tag .Browsers automatically adds an extra blank line before and after a paragraph. The <p> tag is supported in all major browsers.
Script - HTML tutorial for beginners with examples
The HTML SCRIPT Element places a script within in the HEAD element (that which starting with <head> tag and ending with </head> tag) or BODY element (that which starting with <body> tag and ending with </body> tag) in an HTML document. Using SCRIPT Element, you can create dynamic web pages; SCRIPT Element is supported in all major browsers. It is used to define a client-side script, such as a JavaScript or VBScript. SCRIPT element makes the page more interactive.
Span - HTML tutorial for beginners with examples
The HTML <span> Element is an inline element. The HTML <span> element can be used as a container for text in an HTML document, <span> tag is supported in all major browsers.
Table - HTML tutorial for beginners with examples
In an HTML document, the table starts with <table> tag and ends with </table> tag. The <tr> tag set marks the beginning and end of a row. The <td> tag set marks each cell within the row.
Text Formatting - HTML tutorial for beginners with examples
<b> tag is used for bold text
<i> tag is used for italic text
<sub> tag is used for subscripted text
<sup> tag is used for superscripted text
<big> tag is used for big text
<small> tag is used for small text
<strong> tag is used for strong text
<em> tag is used for emphasized text
Title - HTML tutorial for beginners with examples
TITLE Element starts with the <title> opening tag and end with </title> tag in an HTML document. The TITLE element is placed inside the HEAD element (that which starts with the <head> opening tag and ends with the</head> tag). The TITLE element contains your document title and identifies its content. The title is displayed in browsers titles, window titles, menus, etc. where there is only limited room therefore it should not be too much long characters in length.