HTML (Basic to Advance)

Why we learn HTML
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.
HTML is a MUST for students and working professionals to become a great Software Engineer specially
when they are working in Web Development Domain. I will list down some of the key advantages of learning
HTML:
1. Create Web site - You can create a website or customize an existing web template if you know HTML
well.
2. Become a web designer - If you want to start a career as a professional web designer, HTML and CSS
designing is a must skill.
3. Understand web - If you want to optimize your website, to boost its speed and performance, it is good to
know HTML to yield best results.
4. Learn other languages - Once you understands the basic of HTML then other related technologies like
JavaScript, php, or angular are become easier to understand.

HTML Program
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>

Applications of HTML
As mentioned before, HTML is one of the most widely used language over the web. I'm going to list
few of them here:
1. Web pages development - HTML is used to create pages which are rendered over the web. Almost
every page of web is having html tags in it to render its details in browser.
2. Internet Navigation - HTML provides tags which are used to navigate from one page to another and
is heavily used in internet navigation.
3. Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs, desktop or
laptops owing to responsive design strategy.
4. Offline support - HTML pages once loaded can be made available offline on the machine without
any need of internet.
5. Game development- HTML5 has native support for rich experience and is now useful in gaming
development arena as well.

HTML Tags
1. <!DOCTYPE...> - This tag defines the document type and HTML version.
2. <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.
3. <head> - This tag represents the document's header which can keep other HTML tags like <title>,
<link> etc.
4. <title> - The <title> tag is used inside the <head> tag to mention the document title.
5. <body> - This tag represents the document's body which keeps other HTML tags like <h1>, <div>,
<p> etc.
6. <h1> - This tag represents the heading.
7. <p> - This tag represents a paragraph.

Basic Tags
(Heading Tags)
Heading TagsAny 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.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>

Basic Tags
(Heading Tags)
</body>
</html>
O/P:

Basic Tags
(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 as shown below in the example −
Ex: <!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

Basic Tags
(Line Break Tag)
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an
example of an empty element, where you do not need opening and closing tags, as there is nothing to
go in between them.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>

Basic Tags
(Line Break Tag)
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
O/P: Hello
You delivered your assignment ontime.
Thanks
Mahnaz

Basic Tags
(Centering Content)
You can use <center> tag to put any content in the center of the page or any table cell.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>

Basic Tags
(Centering Content)
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
O/P: This text is not in the center.
This text is in the center.

Basic Tags
(Horizontal Lines)
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position
in the document to the right margin and breaks the line accordingly.
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

Basic Tags
(Preserve Formatting)
Sometimes, you want your text to follow the exact format of how it is written in the HTML document.
In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the
source document.
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>

Basic Tags
(Preserve Formatting)
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
O/P: function testFunction( strText ){
alert (strText)
}

Basic Tags
(Nonbreaking Spaces)
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to split the
"12, Angry" and "Men" across two lines −
An example of this technique appears in the movie "12 Angry Men."
In cases, where you do not want the client browser to break text, you should use a nonbreaking space
entity   instead of a normal space.

Basic Tags
(Nonbreaking Spaces)
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
O/P: An example of this technique appears in the movie "12 Angry Men."

Elements
Example:
<p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is
paragraph</p> is a paragraph element.
Note: <P> </p> - is tag
<p>xyz</p> - is element

Attributes
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.

Attributes
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>

Attributes
Output:
This is left aligned
This is center aligned
This is right aligned

Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all) are −
• Id
• Title
• Class
• Style

Core Attributes
ID:
• 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.
Ex: <p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

Core Attributes
Title:
The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute −
Example:
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
O/P: Titled Heading Tag Example

Core Attributes
Class:
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.
Syntax: class = "className1 className2 className3"

Core Attributes
Style:
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
O/P: Some text...

Formatting
List of Formatting:
Bold
Italic
Underlined
Strike : strikethrough
Monospaced: <tt> monospaced </tt>
Superscript: <sup>superscript</sup>
Subscript: <sub>subscript </sub>
Inserted: <ins>inserted</ins>
Deleted: <del>deleted<del>
Larger: <big>larger</big>
Smaller: <small>small</small>

Formatting
Grouping
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>

Formatting
<div id = "content" align = "left" bgcolor = "white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
O/P:

Phrase Tags
(Emphasized Text)
Anything that appears within <em>...</em> element is displayed as emphasized text.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>
O/P:
The following word uses an emphasized typeface.

Phrase Tags
(Marked Text)
Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>
O/P: The following word has been marked with yellow.

Phrase Tags
(Strong Text)
Anything that appears within <strong>...</strong> element is displayed as important text.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
O/P: The following word uses a strong typeface.

Phrase Tags
(Text Abbreviation)
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute must
contain this full description and nothing else.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>
O/P: My best friend's name is Abhy.

Phrase Tags
(Acronym Element)
The <acronym> element allows you to indicate that the text between <acronym> and </acronym> tags is an acronym.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>
O/P: This chapter covers marking up text in XHTML.

Phrase Tags
(Text Direction)
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>
O/P: This text will go left to right.
This text will go right to left.

Phrase Tags
(Special Terms)
The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a special term.
It's usage is similar to italic words in the midst of a paragraph.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>
O/P: The following word is a special term.

Phrase Tags
(Short Quotations)
The <q>...</q> element is used when you want to add a double quote within a sentence.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>
O/P: Amit is in Spain, “I think I am wrong”.

Phrase Tags
(Programming Variables)
This element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that
element is a variable.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>
O/P: document.write("user-name")

Phrase Tags
(Address Text)
The <address>...</address> element is used to contain any address.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>Teka Naka,Nagpur - Maharashtra</address>
</body>
</html>
O/P: Teka Naka,Nagpur - Maharashtra

Meta Tags
Meta tags always used inside of the head section <head>…</head>
Name: Name for the property. Can be anything. Examples include, keywords, description, author,
revised, generator etc.
Content: Specifies the property's value.
Scheme: Specifies a scheme to interpret the property's value (as declared in the content attribute).
http-equiv: Used for http response message headers. For example, http-equiv can be used to refresh
the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Meta Tags
(Specifying Keywords)
You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the
search engines while indexing your webpage for searching purpose.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" /> --- Name
<meta name = "description" content = "Learning about Meta Tags." /> --- Content
<meta name = "revised" content = “Skyline, 14/01/2020" /> --- Scheme
<meta http-equiv = "refresh" content = "5" /> --- http-equiv
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" /> --- Cookie
<meta name = "author" content = “Punit Pandey" /> --- Author Name

Meta Tags
(Specifying Keywords)
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
O/P: Hello HTML5!

Comments
<!DOCTYPE html>
<html>
<head> 
<title>This is document title</title>
</head> 
<body>
 --- Valid Comment
< !-- This is not a valid comment --> --- Not Valid Comment
 --- Multiline Comment

Comments
 --- Conditional Comments
<p>Document content goes here.....</p>
<p>This is <comment>not</comment> Internet Explorer.</p> --- Comment Tag
 --- This comment use only JS with HTML

Comments
 --- CSS Comment
</body>
</html>

Images
Syntax:
<img src = "Image URL" ... attributes-list/>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>

Images
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/xyz.png" alt = “demo Image" /> --- Insert Image
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/> --- Width/Height
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/> --- Set Image Border
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/> --- Alignment
</body>
</html>

Tables
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1“cellpadding = "5" cellspacing = "5“bordercolor = "green" bgcolor = “red“
background = "/images/demo.png“width = "400" height = "150"> --- for table boarder, padding ,
background color, background image, change size

Tables
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td> --- for row and column
<td>Row 2, Column 1</td> -- for table creation
<th>Name</th> --- Heading

Tables
</tr>
</table>
</body>
</html>
O/P:

Tables
(Nested Tables)
You can use one table inside another table.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">

Tables
(Nested Tables)
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</html>

Tables
(Nested Tables)
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
O/P:

Lists
<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.

Lists
(Unordered)
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>

Lists
(Unordered)
<ul type = "square“, "disc“, "circle"> --- Attributes use any one
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
O/P:

Lists
(Ordered)
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>

Lists
(Ordered)
<ol type = "1“, “I”, “i”, “A”, “a”> --- Attributes use any one
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
O/P:

Text Links
Syntax:
<a href = "Document URL" ... attributes-list>Link Text</a>
Attribute:
_blank: Opens the linked document in a new window or tab.
_self: Opens the linked document in the same frame.
_parent: Opens the linked document in the parent frame.
_top: Opens the linked document in the full body of the window.
targetframe: Opens the linked document in a named targetframe.
Example: <a href = "/html/index.htm" target = "_blank">Opens in New</a>

Email Links
Syntax:
<a href = "mailto: abc@example.com">Send Email</a>
Example:
<a href = "mailto:abc@example.com?subject = Feedback&body = Message"> Send Feedback </a>

Blocks
(div)
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>

<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>

Blocks
(div)
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>

<div style = "color:blue">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>

Blocks
(div)
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>
O/P:

Blocks
(span)
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>
O/P:

Backgrounds
(BGCOLOR)
• Bgcolor : (<tagname bgcolor = "color_value"...>)

<table bgcolor = "lime" >

<table bgcolor = "#f1f1f1" >

<table bgcolor = "rgb(0,0,120)" >

Backgrounds
(BACKGROUND)
• <tagname background = "Image URL"...>

Fonts
• <font size = "1">Font size = "1"</font><br /> --- > 1
• <font size = "-1">Font size = "-1"</font><br /> --- > -1
• <font face = "Times New Roman" size = "5">Times New Roman</font><br /> --- > Times New
Roman
• <font color = "#FF00FF">This text is in pink</font><br /> --- > font color

HTML (Basic to Advance)

Recommended

More Related Content

What's hot (20)

Similar to HTML (Basic to Advance) (20)

More from Coder Tech (9)

Recently uploaded (20)

HTML (Basic to Advance)