<html>
<head>
<ttile> WebPage Title </title>
<meta charset=”UTF-8”>
</head>
<body>
</body>
</html>
<! DOCTYPE html> = defines declaration of HTML5 Document
<html> </html> = root element ,All other elements come under this tag
<head> </head> = contains meta information about element
<title></title> = title of the webpage
<body></body> = Main part of the HTML document
2 PARAGRAPH
<p></p>
3 HEADINGS
<h1>Big </h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6> Small </h6>
4 BREAKS
<br>
5 USE OF STYLE ATTRIBUTE
<body style=”background-color: powderblue;”>
Text </body> = Background
Color
<p style =”color:red;”> Text </p> = Text
Color
<h1 style =”font-family: verdana;”> Heading </h1> = Font type
<h2 style =”font-size: 300% ;”> Heading </h2> = Font size
<h3 style =”text-align:center ;”> Center Heading </h3>
= Text Alignment
<h3 style =”border:2px solid orange ;”>
Daily Experience </h3> = Border
6 HTML FORMATTING
<b> Bold text</b>
<strong> Important text </strong>
<i> italic text </i>
<em> emphasized text </em>
<mark> Marked or highlighted in yellow text </mark>
<small> small text </small>
<ins> inserted text <ins>
<del> deleted text</del>
<sub> subscript text</sub>
<sup> Superscript text </sup>
<pre> Text </pre> = to display text such as poems. It preserves both
spaces and line breaks.
<marquee> Text </marquee> =
Text moving from right to left continuously
7 HYPERLINKS
<a href=” http://www.harshanavalkar.blogspot.com”
target = “_blank” title=”Harsha Navalkar Blog”> Daily Experience </a>
Different types of targets
- · _blank
- · _self
- · _parent
- · _top
<a href=” happypic.png” alt = “Daily Experience
Tutorials style=” width:42px; height:42px; border:0; ”> Daily Experience </a>
- · Creating a bookmark using hyperlinks
<h2 id =”c4”> CHAPTER 4 </h2>
<a href= “#c4”>
Jump to Chapter 4 </a>
8 HTML IMAGES
<img src =”coolimage.jpg”
alt=”Girl in a jacket” style= “width:500px; height:600px; float:right; ”> </img>
9 QUOTATIONS AND CITATIONS
<q> small quotation </q>
<blockquote cite = “http://www.harshanavalkar.blogspot.com”> Daily Experience </blockquote>
<abbr> Abbreviation </abbr>
<address> contact Info </address>
<cite> title of the work </cite>
<bdo dir=”rtl”> text will be written from right to left </bdo>
10 COMMENT
<!—Comment ----Ã
11 HTML TABLES
<table style=”width:100%”>
<caption> Entries </caption>
<tr>
<th> Name </th>
<th> age</th>
<th> roll no</th>
</tr>
<tr>
<td>Hina </td>
<td> 20</td>
<td>1</td>
</tr>
<tr>
<td> Gita</td>
<td> 22</td>
<td> 2</td>
</tr>
</table>
- · Column span
<th colspan =”2”> name </th>
·
- Row span
<th rowspan =”2”> name </th>
12 HTML LISTS
·
- Unordered lists
- · Ordered lists
- · Description list
- · Nested list
- · Unordered lists
<ul style= “list-style-type:disc;”>
<li> coffee</li>
<li> green tea </li>
<li> black tea </li>
</ul>
Type = disc, circle, square, none
- · Ordered lists
<ol
type=”1” start=”50”>
<li> coffee</li>
<li> green tea </li>
<li> black tea </li>
</ol>
Type = “1”, “A”,”a”,”I”,”I”
- · Description list
<dl>
<dt> coffee <dt>
<dd> Brown color </dd>
<dt> milkshake </dt>
<dd> white color </dt>
</dl>
·
- Nested list
<ul>
<li> coffee </li>
<ul>
<li> latte </li>
<li> cappuccino </li>
<li> mochaccino </li>
</ul>
<li> tea</li>
ul>
<li> masala tea </li>
<li> green tea </li>
<li> black tea </li>
</ul>
</ul>
13 HTML CLASSES
<style>
.state { background-color : orange;
color : white;
padding : 10px;
}
</style>
<h2 class=”state”> Maharashtra </h2>
<p>
Description of Maharashtra </p>
<h2 class=”state”> Karnataka </h2>
<p>
Description of Karnataka </p>
14 HTML ID ATTRIBUTE
<style>
#state { background-color : orange;
color : white;
padding : 10px;
text-align: center;
}
</style>
<h2 id=”state”> Maharashtra </h2>
<p>
Description of Maharashtra </p>
15 HTML VIEWPORT
<meta name=”viewport” content=”width=device-width,
initial-scale=1.0”>
16 HTML
MULTIMEDIA
- · Audio
<audio controls >
<source src =”a.mp3” type=”audio/mp3”>
</audio>
<video width=”320” height = “240”
autoplay>
<source src =”movie.mp4” typw=”video/mp4”>
</video>
17 HTML LAYOUT
·
<header></header>
·
<nav></nav>
·
<aside></aside>
·
<article></article>
·
<footer></footer>
<body>
<header> States </header>
<section>
<nav>
<ul>
<li> <a href=”#”> Maharashtra </a></li>
<li> <a href=”#”> Karnataka </a></li>
<li> <a href=”#”> Telangana </a></li>
</ul>
</nav>
<article>
<h1> Maharashtra </h1>
<p> information about Maharashtra </p>
</article>
</section>
<footer>
<p> written by Harsha Navalkar </p>
</footer>
</body>
18 HTML FORMS
<form action=”actionpage.php” target=”_blank”
method=”post”>
<fieldset>
<legend> personal Info</legend>
First name: <br>
<input type=”text” name=”fname”>
<br>
Last name: <br>
<input type=”text” name=”lname”>
<br>
Email: <br>
<input type=”email” name=”email”>
<br>
<input type=”radio” name=”gender” value=”male”
checked>male <br>
<input type=”radio” name=”gender” value=”female”
checked>female <br>
<input type=”radio” name=”gender” value=”other”
checked>other <br>
<select name=”division”>
<option value=”A” selected> A </option>
<option value=”B” selected> B </option>
<option value=”C” selected> C </option>
<textarea name=”message” rows=”10” cols=”30”>
</textarea>
<input type=”submit” value=”submit”>