HTML
History
HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012. In 2004, development began on HTML5 in the Web Hypertext Application Technology Working Group (WHATWG), which became a joint deliverable with the W3C in 2008, and completed and standardized on 28 October 2014.
What is HTML?
Hypertext Markup Language (HTML) is the standard markup language for creating web page and web applications With Cascading Style Sheet (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. Web Browsers receive HTML documents from a web serer or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML Tags:
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create strectured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.Browsers do not display the HTML tags, but use them to interpret the content of the page.
Example for Open tags:
<html>, <head>, <body>, <title>
Example for Closing tags:
</html>, </head>, </body>, </title>
HTML Deceleration tag:
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration <!DOCTYPE html>
HTML Formatting:
Formatting is one of the crucial sections of every development. For making any project or article or content looks attractive, readable and user-intractable, formatting plays a very important role. Formatting can be defined as the appearance of your documentation or presentation of your HTML code in a meaningful and nicer way. Formatting is mainly done for making the layout attractable. HTML provides various formatting tags. They are collectively called as formatting tags because they are meant for the above-mentioned purpose. So, in this chapter, you will learn about these formatting tags and how to use them.
Formatting elements in HTML were mainly created for displaying texts of a special type:
| Tags | Purpose |
<u> | For making text underlined. |
<b> | For making the text Bold. |
<strong> | Used in those texts which are important and needs to highlight. |
<i> | For making the text italics. |
<em> | For emphasizing the texts. |
<mark> | To make the texts marked or highlighted. |
<small> | For making texts small in size then the regular texts surrounded. |
<big> | For making texts bigger or larger in size then the rest of the texts surrounded. |
<del> | To show texts that have been deleted or removed or replaced. |
<ins> | To show texts that have been inserted or added |
<sub> | For giving any text the subscript effect. |
<sup> | For giving any text the superscript effect. |
<strike> | For displaying any text as strikethrough. |
<tt> | For displaying any font as a mono-spaced font. This tag is abbreviated as typewriter type font tag. |
HTML Tables:
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
Table Head:
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell.
HTML List tags:
HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain −
<ul>− An unordered list. This will list items using plain bullets.<ol>− An ordered list. This will use different schemes of numbers to list your items.<dl>− A definition list. This arranges your items in the same way as they are arranged in a dictionary.
Linking Documents:
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag.
Multi Line Text-Input Control:
This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.
HTML form tag:
The HTML <form> element defines a form that is used to collect user input.
Style Tag:
The HTML <style> tag is used to specify style sheet for the current HTML document. Following is an example to define few style sheet rules inside <style> tag.
Script Tag:
The HTML <script> tag is used to include either external script file or to define internal script for the HTML document. Following is an example where we are using JavaScript to define a simple JavaScript function.
HTML - Attributes:
We have seen few HTML tags and their usage like heading tags <h1>, <h2>,paragraph tag <p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts − a name and a value
The name is the property you want to set. For example, the paragraph
<p>element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all) are −
- Id
- Title
- Class
- Style
The "id" Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element −
If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.
We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish between two paragraph elements as shown below.
Example:
<p id = "html">This para explains what is HTML</p>
The "title" Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.
Example:
<h1 title = "html">This para explains what is HTML</h1>
The "class" Attribute
The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.
Example:
<h1 class = "html">This para explains what is HTML</h1>
The "style" Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
Example:
<h1 style = "font-family:arial; color:#FF0000;">HTML</h1>