Html notes with Examples

HYPERTEXT MARKUP LANGUAGE
• Not a programming language but it is a Markup Language
• Programming Language VS Markup Language
• Programming:
• Conditions i.e. if, if else, nested if.
• Loops i.e. for, while, Do-while.
• Logics.
• Markup:
• We create document structure.
• That documents are our Web-Pages.

HTML REQUIREMENTS
• Text Editor
• Notepad/Notepad++/Dreamweaver/Atom
• File Extension:-
• .htm/.html
• Web browser:-
• Any Web browser but Firefox is for best uses.

HTML FILE STRUCTURE
<html>
<head>
</head>
<body>
</body>
</html>
 Starting of HTML.
 Root of Web Page Documents.
 Invisible Part(the content in this tag, we write, is not
visible on the Web Browser).
 It links the CSS file, Javascript file , Bootstrap, font-
awesome, Jquery or any other file that we want to link.
 It contains the title of the web page
 Visible Part(the content in this tag is visible on the Web
Browsers).

HEAD - TAGS
• <title></title>
• <meta/> It is only for SEO(Search Engine Optimize).
• <link/> Link the CSS files
• <style></style> contains the CSS properties and Values
• <script></script> It is for JavaScript and Jquery file.
• <base/>
Note:- For the Description of theses tags Checkout the HTML5 Videos.

Base tag in details
• It set the default path for files
Example:- with base tag
<html>
<head>
<base href=“d:images” target=“_blank” / >
</head>
<body>
<img src=“pic1.png”/>
<img src=“pic2.jpg”/>
</body>
</html>
Example:- Without Base tag
<html>
<head>
</head>
<body>
<img src=“d:imagespic1.png”/>
<img src=“d:imagespic2.jpg”/>
</body>
</html>

BODY TAGS - 1
• Headings
• <h1> Heading 1 </h1>
• Bold
• <b> </b>
• <strong> </strong>
• Italic
• <i> </i>
• <em> </em>
• Underline
• <u> </u>
• Paragraph
• <p> </p>
• Image
• <img/>
• Break Line
• <br/>
• Pre Formatted Tag
• <pre> </pre>
Example: <pre width=“150”></pre>
• Horizontal Line
• <hr/>

BODY TAGS - 2
• Blockquote
• <blockquote> it give the Left and right
margin </blockquote>
• Quote
• <q> it add the “double inverted comma”
</q>
• Font
• <font color=“red”>Red font</font>
• Strikethrough
• <s> Line between the text like THIS </s>
• Big text
• <big> </big>
• Monotype font or Typewriter Text
• <tt> </tt>
• Abbreviation Tag
• <abbr title=“Hypertext Markup
Language>HTML</abbr>
• Blink Tag
• <blink> </blink>
• Superscript
• <sup> </sup>
• Subscript
• <sub> </sub>
• Small Text
• <small> </small>

BODY TAGS - 3
• Center
• <center> </center>
• Bi- directional Override
• <bdo dir=“ltr”> </bdo>
• <bdo dir=“rtl”> </bdo>
• Special Tag | Unicode Character
•   |    Space
• © | ©  Copyright©
• ® | ®  Register ®
• Form
• <form> </form>
• Ordered List
• <ol>
<li></li>
</ol>
• Unordered List
• <ul>
<li></li>
</ul>
• Definition List
• <dl>
<dt> definition Title </dt>
<dd> definition data </dd>
</dt>

BODY TAGS - 4
• Anchor tag |URL tag
• <a href=“www.google.com”> Google </a>
• <a href=“www.google.com” target=“_blank” tittle=“it will open in new tab”> Google </a>
• <a href=“www.google.com” target=“_self”> Google </a>
• Link color Change
• Link Color Name
• alink Active color Name
• vlink Visited color link
Example: <body link=“blue” alink=“yellow” vlink=“red”> </body>

BODY TAGS - 5
• Table tag with example
<table>
<caption> Demo table</caption>
<thead> <tr><td> this is the Table Heading</td></tr></thead>
<tfoot> <tr><td> this is the Table Footer </td></tr></tfoot>
<th></th>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

BODY TAGS - 6
• Other Attributes of Table tag
• Cellspacing  outer space of the Cells
• Cellpadding  inner space of the Cells
• Rowspan  merge multiple Rows
• Colspan  merge multiple Columns

Note
To see all other tags with their examples
Checkout My HTML5 tutorials Videos
in
my Playlist.

Html notes with Examples

More Related Content

What's hot (20)

Similar to Html notes with Examples (20)

Recently uploaded (20)

Html notes with Examples