HTML Lab 2

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 
< body bgcolor="lime" >

< body bgcolor="#f1f1f1" >

< 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>
</tr>
<tr>
</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>
</tr>
<tr>
</tr>
</table>
Table Caption
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
</tr>
<tr>
</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>

HTML Lab 2

Uploaded by

Copyright:

Available Formats

You might also like

HTML Lab 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Lab 2

Uploaded by

Copyright:

Available Formats

Basic HTML Document

HTML Background with Images

<li>Apply to wet hair</li>

<li>Massage gently into hair and scalp</li>

<li>Wringing excess water from hair</li>

<li>Rinse thoroughly with warm water</li>

Creating an Unordered List

<li>Don‘t run with scissors</li>

<li>Don‘t play with your food</li>

<li>Don‘t forget to wash your hands</li>

<li>Type defaults to disc</li>

<li>First nest defaults to circle</li>

<li>Third nest defaults to square...</li>

<li>and continues as square until you set a <tt>type</tt>

<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"/>

<p>Setting image Border</p>

<img src="test.png" alt="Test Image" border="3"/>

<embed src="DikiDike.mp3" >

<noembed><img src="yourimage.gif" alt="Alternative Media" ></noembed>

<noembed><img src="yourimage.gif" alt="Alternative Media" ></noembed>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

Cellpadding and Cellspacing Attributes

<table border="1" cellpadding="5" cellspacing="5">

Colspan and Rowspan Attributes

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

<td colspan="3">Row 3 Cell 1</td>

Table Height and Width

<table border="1" width="400" height="150">

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

<table border="1" width="100%">

<caption>This is the caption</caption>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

Table Header, Body, and Footer

<table border="1" width="100%">

<td colspan="4">This is the head of the table</td>

<td colspan="4">This is the foot of the table</td>

<h2>Text input fields</h2>

<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">

You might also like