HTML 20

1.
Body/ Head tag
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT
2 Font Tag
<html>
<body>
<p style="color:red">This is a paragraph.</p>
<p style="color:blue">This is another paragraph.</p>
</body>
</html>
OUTPUT
3 Tables
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
</style>
</head>
<body>
<h1>The table element</h1>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
OUTPUT
4 Lists OL
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT
5 UL
<html>
<body>
<h1>The ul element</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
OUTPUT
6 DD List
<html>
<body>
<h1>The dl, dd, and dt elements</h1>
<p>These three elements are used to create a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
OUTPUT
7 Frame
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.google.com" title="Google Free Online Web Tutorials">
</iframe>
</body>
</html>
OUTPUT
8 Forms
<html>
<body>
<h1>The form element</h1>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">

</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>
OUTPUT
9 Image
<html>
<body>
<h1>The img element</h1>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500"

height="600">
</body>
</html>
OUTPUT
10 Anchor Tag
<html>
<body>
<h1>The a element</h1>
<a href="https://www.google.com">Visit google.com!</a>
</body>
</html>
OUTPUT
11 CSS Inline
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
OUTPUT
12 External
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
OUTPUT
13 Internal
<html>
<head>
<style>
body {
background-color: linen;
h1 {
color: maroon;
margin-left: 40px;
</style>
</head>
<body>
</body>
</html>
OUTPUT
14 Marquee
<html>
<head>
<title>Example for HTML Marquee Tag</title>
</head>
<marquee width="40%" direction="up" height="30%">
This is sample scrolling text.
</marquee>
</html>
OUTPUT
15 Audio
<html>
<body>
<h1>The audio element</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
OUTPUT
16 Video
<html>
<body>
<h1>The video element</h1>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
OUTPUT
17 <Sub>
<html>
<body>
<h1>The sub and sup elements</h1>
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
</body>
</html>
OUTPUT
18 Cell Spacing
<html>
<head>
<style>
table, th, td {
padding: 5px;
table {
border-spacing: 15px;
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p><strong>Tip:</strong> Try to change the border-spacing to 5px.</p>
</body>
</html>
OUTPUT
19 Cell Padding
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
th, td {
padding: 15px;
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p><strong>Tip:</strong> Try to change the padding to 5px.</p>
</body>
</html>
OUTPUT
20 RowSpan
<html>
<head>
<style>
table, th, td {
</style>
</head>
<body>
<h1>The td rowspan attribute</h1>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
OUTPUT
21 Colspan
<html>
<head>
<style>
table, th, td {
</style>
</head>
<body>
<h1>The col element</h1>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
OUTPUT

HTML 20

Uploaded by

Copyright:

Available Formats

HTML 20

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 20

Uploaded by

Copyright:

Available Formats

1.

Body/ Head tag

<title>Title of the document</title>

<p style="color:red">This is a paragraph.</p>

<p style="color:blue">This is another paragraph.</p>

border: 1px solid black;

<h1>The table element</h1>

<h2>An ordered HTML list</h2>

<h1>The dl, dd, and dt elements</h1>

<p>These three elements are used to create a description list:</p>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

<h1>The iframe element</h1>

<iframe src="https://www.google.com" title="Google Free Online Web Tutorials">

<h1>The form element</h1>

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname"><br><br>

<label for="lname">Last name:</label>

<input type="text" id="lname" name="lname"><br><br>

<input type="submit" value="Submit">

server called "action_page.php".</p>

<h1>The img element</h1>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500"

<a href="https://www.google.com">Visit google.com!</a>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

<link rel="stylesheet" href="styles.css">

<title>Example for HTML Marquee Tag</title>

<marquee width="40%" direction="up" height="30%">

This is sample scrolling text.

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

<h1>The video element</h1>

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

<h1>The sub and sup elements</h1>

<p>This text contains <sub>subscript</sub> text.</p>

<p>This text contains <sup>superscript</sup> text.</p>

border: 1px solid black;

<p>Border spacing specifies the space between the cells.</p>

<p><strong>Tip:</strong> Try to change the border-spacing to 5px.</p>

border: 1px solid black;

<p><strong>Tip:</strong> Try to change the padding to 5px.</p>

border: 1px solid black;

<h1>The td rowspan attribute</h1>

<th>Savings for holiday!</th>

border: 1px solid black;

<h1>The col element</h1>

<col span="2" style="background-color:red">

<td>My first HTML</td>

<td>My first CSS</td>

You might also like