HTML provides a way of displaying Web pages with text and images or multimedia content. HTML is not a programming language, but a markup language. An HTML file is a text file containing small markup tags. The markup tags tell the Web browser, such as Mozila Firefox or Google Chrome, how to display the page. An HTML file must have an htm or html file extension. HTML stands for HyperText Markup Language.
HTML pages are of two types:
•Static Pages – Static pages, as the name indicates, comprise static content (text or images). So you can only see the contents of a web page without being able to have any interaction with it.
•Dynamic Pages – Dynamic pages are those where the content of the web page depend on user input. So interaction with the user is required in order to display the web page. For example, consider a web page which requires a number to be entered from the user in order to find out if it is even or odd. When the user enters the number and clicks on the appropriate button, the number is sent to the web server, which in turn returns the result to the user in an HTML page.
Tags
A tag is a bit of text that acts as a point demarcation. To create a tag, HTML gives certain characters special meaning: the angle brackets < and >.
Putting characters within angle brackets creates a tag.
<h1> A heading </h1>
There are two tags:
Start tag or opening tag and End tag or closing tag. An end tag always matches a start tag, except that it has an extra forward slash after the opening angle bracket.
<h1> A heading </h1>
Type of Tag
•Container Tag – Which has opening and closing Tag.
Ex: –
<html> ……. </html>
<head> ……. </head>
<body> ……. </body>
•Empty Tag – which has only opening tag.
Ex: –
<br>
<area>
<base>
<hr>
<img>
<input>
Element
The combination of a start and end tags define an element. Everything between the two tags is referred to as the contents of the element.
<h1> A heading </h1>
Attribute
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: – a name and a value, separated by an equals sign.
<p lang = “en-us”>Paragraph in English </p>
The attribute name indicates what kind of extra information you are supplying about the element’s content. It should be written in lowercase.
The value is the information or setting for the attribute. It should be placed in double quotes. Different attributes can have different values.
In this example an attribute called lang is used to indicate the language used in this element. The value of this attribute on this page specifies it is in US English.
Note: – HTML5 allows you to use uppercase attribute names and omit the quote marks, but this is not recommended.
HTML Tag
<HTML> is a starting tag. To delimit the text inside, add a closing tag by adding a forward slash “/” to the starting tag. Most but not all tags have a closing tag. It is necessary to write the code for an HTML page between <HTML> and </HTML>. This <HTML> tells the browser is ‘this is the start of an HTML document’ and </HTML> ‘this is the end of an HTML document’.
<html>
……………………..
………………………
………………………….
</html>
Head Tag
Before the <body> element you will often see a <head> element. This contains information about the page, rather than information that is shown within the main part of the browser. You will usually find a <title> element inside the <head> element. <head> is opening head tag and </head> is closing head tag.
<html>
<head>
<title> Hello </title>
</head>
</html>
Title Tag
The contents of the <title> element are either shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page (if your browser uses tabs to allow you to view multiple pages at the same time). <title> is opening title tag and </title> closing title tag.
<html>
<head>
<title> Hello </title>
</head>
</html>
Body Tag
Everything inside this element is shown inside the main browser window. <body> is opening body tag and </body> is closing tag.
<html>
<head>
<title> Hello </title>
</head>
<body>
<h1> Body of Page </h1>
</body>
</html>
HTML
| Version | Year |
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML 5 | 2014 |
HTML 4.01
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
HTML 5
HTML 5 enables to create more interactive websites by embedding audio, video and graphics on the web page.
The purpose of HTML5 is primarily to make it easier for web developers.
New features: –Browser Support –Geolocation –Offline Application Cache –Web Storage –Error Handling –New Application Programming Interface (API) –New Structure
Application Programming Interface
•2D drawing on a web page
•Drag and Drop
•Timed Media Playback
•Browser History Management
New Structure
•<article>
•<aside>
•<header>
•<details>
DOCTYPE declaration
<!DOCTYPE html>
It is an instruction to the web browser about what version of HTML the page is written in.
The <!DOCTYPE> declaration is not case sensitive.
<br>
The <br> tag in the HTML code inserts a line break in the text.
Headings
Heading defines the format and structure of a document. There are six heading tag: – •<h1> …… </h1> •<h2> …… </h2> •<h3> …… </h3> •<h4> …… </h4> •<h5> …… </h5> •<h6> …… </h6>
Any text inside these tags is displayed differently depending on the heading number.
Note : – 1.<h1>…… </h1> is largest heading tag and <h6>……. </h6> is smallest. 2.Heading get their own line on the web pages by starting from a new line.
Paragraph
The <p> tag is used to create new paragraph on web page. It has a closing tag </p> which is optional because a paragraph automatically ends when we start another paragraph.
<p> ………………………. </p>
Note : – –Number of line in a paragraph depends on the size of web browser window. –If we resize the browser window, the number of lines in this paragraph will change.
Subscript
A subscript is a text that appears smaller than a regular text.
The <sub>….. </sub> tag is used to create a subscript on a web page.
Superscript
A Superscript is a text that appears smaller size above the regular text.
The <sup>…… </sup> tag is used to create a subscript on a web page.
