HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.
Basic HTML Document:
In its simplest form, following is an example of an HTML document:
<! DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>In between content part is availability</p>
</body>
</html>
HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most
of the tags have their corresponding closing tags. For example, <html> has its closing
tag</html> and <body> tag has its closing tag </body> tag etc.
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and mainly comprises
of document header which is represented by <head>...</head> and
document body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML
tags like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the
document title.
<body> This tag represents the document's body which keeps other HTML tags
like <h1>, <div>, <p> etc.
<h1> This tag represents the heading.
<P> This tag represents a paragraph.
<!DOCTYPE> Declaration
The declaration tag is used by the web browser to understand the version of the HTML used in the
document.
Creating HTML Document:
Open Notepad or another text editor.
At the top of the page type <html>.
On the next line, indent five spaces and now add the opening header tag: <head>.
On the next line, indent ten spaces and type <title> </title>.
Go to the next line, indent five spaces from the margin and insert the closing header tag:
</head>.
Five spaces in from the margin on the next line, type<body>.
Now drop down another line and type the closing tag right below its mate: </body>.
Finally, go to the next line and type </html>.
In the File menu, choose Save As.
In the Save as Type option box, choose All Files.
Name the file template.htm.
Click Save.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also
has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
Heading
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag
Line Break Tag
Whenever you use the <br> element, anything following it starts from the next line.
You can use <center> tag to put any content in the center of the page or any table cell.
<hr> tag creates a line from the current position in the document to the right margin and breaks the line
accordingly.
Preserve Formatting
Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.
Nonbreaking Spaces
you should use a nonbreaking space entity instead of a normal space.
Formating Tags
<b>...</b> element is displayed in Bold
<i>...</i> element is displayed in italicized
<u>...</u> element, is displayed with underline
<strike>...</strike> element is displayed with strikethrough
<sup>...</sup> element is written in superscript; the font size used is the same size
<sub>...</sub> element is written in subscript
<ins>...</ins> element is displayed as inserted text
<del>...</del> element, is displayed as deleted text
<big>...</big> element is displayed one font size larger than the rest of the text surrounding.
<small>...</small> element is displayed one font size smaller than the rest of the text surrounding.
Text inside a <blockquote> element is usually indented from the left and right edges of the
surrounding text
<address>...</address> element is used to contain any address.
META TAGS:
<meta lan="en-us">
<meta charset="UTF-8">
<meta charset="UTF-16">
<meta name="viewport" content=" ">
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta name="author" content=" ">
Father Of HTML: Tim Berners-Lee
HTML VERSIONS:
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Image Tag
<img src="Source Of Image.Image format(Jpg,Png) " alt=" Text to display if
image not loaded">
List Items:
Three Types
1.Ordered List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol type=”1”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
2. Unordered List
Unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
3. Description List
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
