Basic HTML Document
<html>
<head>
<title> Web and Database Level I </title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML Basic Tags
Heading Tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
Paragraph Tag <p> </p>
Line Break Tag <br /> or <br />
HTML Comments <!-- ...-- >
HTML Tag vs. Element
<h1><i></i> </h1> an example of tag
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
Core Attributes
Id
Title <h3 title="Hello HTML!">Titled Heading Tag Example</h3>
Class class="className1 className2 className3"
Style <p style="font-family:arial; color:#FF0000;">Some text...</p>
HTML Header Section
1 <title>, <title>HTML Title Tag Example</title>
2 <base>, <base href="http://www.tutorialspoint.com/" />
3 <link>, <link rel="stylesheet" type="text/css" href="/css/style.css" />
4 <style>, <style type="text/css">.myclass{ background-color: #aaa;padding: 10px; }</style>
5 <script>, <script type="text/JavaScript">function Hello(){alert("Hello, World"); }</script>
6 <meta>, <meta http-equiv="refresh" content="30" />
HTML Body Section Text Formatting
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses a <i>italicized</i> typeface.</p>
<p>The following word uses a <u>underlined</u> typeface.</p>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
<p>I want to drink <del>wine</del> <ins>Fanta</ins></p>
<p>I want to drink <del>wine</del> <ins>Fanta</ins></p>
<p>The following word uses a <big>big</big> typeface.</p>
HTML Body Section Phrase Tags
<p>The following word uses a <em>emphasized</em> typeface.</p>
<p>The following word has been <mark>marked</mark> with yellow</p>
<p>The following word uses a <strong>strong</strong> typeface.</p>
<p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>.</p>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
<p>The following word is a <dfn>special</dfn> term.</p>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
<p><code>document.write("<var>user-name</var>")</code></p>
<p>Result produced by the program is <samp>Hello World!</samp></p>
<address>388A, Road No 22, Jubilee Hills – Hyderabad</address>
HTML Body Section Fonts
Set Font Size
<font size="1">Font size="1"</font><br />
<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font>
Relative Font Size
<font size="-1">Font size="-1"</font><br />
<font size="+1">Font size="+1"</font><br />
<font size="+2">Font size="+2"</font><br />
<font size="+3">Font size="+3"</font><br />
<font size="+4">Font size="+4"</font>
HTML Background with Colors
<!-- Format 1 - Use color name -->
< body bgcolor="lime" >
<!-- Format 2 - Use hex value -->
< body bgcolor="#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
< body bgcolor="rgb(0,0,120)" >
HTML Background with Images
<body background="/images/html.gif">
Inserting Character Entities
Type © to display the copyright symbol:
<p> Copyright © 2003 </p>
Type ® to produce the registered symbol:
<p>W3C ®</p>
Type ™ to produce the trademark symbol:
<p>Alpha-Gizmo™</p>
Enter ¼ to produce the fraction one-quarter:
<p>¼ teaspoon salt</p>
Enter ½ to produce the fraction one-half:
<p>½ teaspoon sugar</p>
Enter ¾ to produce the fraction three-quarters:
<p>¾ cup of honey</p>
Enter ¢ to produce the cent symbol:
<p>10¢</p>
Enter £ to produce the British Pound symbol:
<p>£125,000</p>
Enter ¥ to produce the Japanese Yen symbol:
<p>¥500,000</p>
Enter € to produce the European Union’s Euro symbol:
<p>€700</p>
Creating HTML Lists
<p>To shampoo, follow these steps:</p>
<ol>
<li>Apply to wet hair</li>
<li>Massage gently into hair and scalp</li>
<li>Rinse thoroughly</li>
</ol>
<p>Then, to condition proceed by:</p>
<ol start=”4”>
<li>Wringing excess water from hair</li>
<li>Apply conditioner and massage gently into hair from roots to ends</li>
<li>Rinse thoroughly with warm water</li>
</ol>
Creating an Unordered List
<h1>Points to Remember</h1>
<ul>
<li>Don‘t run with scissors</li>
<li>Don‘t play with your food</li>
<li>Don‘t forget to wash your hands</li>
</ul>
nested list
<ol type="I">
<li>Main Idea</li>
<ol type="A">
<li>Subordinate Idea</li>
<ol type="1">
<li>Supporting Detail</li>
<ol type="a">
<li>Example</li>
<li>Example</li>
</ol>
<li>Supporting Detail</li>
</ol>
</ol>
</ol>
<ul>
<li>Type defaults to disc</li>
<ul>
<li>First nest defaults to circle</li>
<ul>
<li>Third nest defaults to square...</li>
<ul>
<li>and continues as square until you set a <tt>type</tt>
attribute</li>
</ul>
</ul>
</ul>
</ul>
Insert Image
<p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" />
Set Image Location/width and height
<img src="images/test.png" alt="Test Image" />
<p>Setting image width and height</p>
<img src="test.png" alt="Test Image" width="150" height="100"/>
boarder
<p>Setting image Border</p>
<img src="test.png" alt="Test Image" border="3"/>
html meltimedia
<embed src="DikiDike.mp3" >
<noembed><img src="yourimage.gif" alt="Alternative Media" ></noembed>
</embed>
<embed src="tokofitoko.mp4">
<noembed><img src="yourimage.gif" alt="Alternative Media" ></noembed>
</embed>
HTML Tables
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
Cellpadding and Cellspacing Attributes
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
Colspan and Rowspan Attributes
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr> <td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td> </tr>
<tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
Table Height and Width
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
Table Caption
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
Table Header, Body, and Footer
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 11</td>
<td>Cell 12</td>
<td>Cell 13</td>
<td>Cell 14</td>
</tr>
</tbody>
</table>
HTML form
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
