Scribd
Upload
71 views

HTML 20

The document contains examples of various HTML elements for formatting text and embedding media. It demonstrates the use of headings, paragraphs, lists, tables, forms, images, video, audio and links. Styling is shown through inline, internal and external CSS. Elements like colspan and rowspan are used to control table cells.

Uploaded by

Lakshya Chauhan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
71 views

HTML 20

The document contains examples of various HTML elements for formatting text and embedding media. It demonstrates the use of headings, paragraphs, lists, tables, forms, images, video, audio and links. Styling is shown through inline, internal and external CSS. Elements like colspan and rowspan are used to control table cells.

Uploaded by

Lakshya Chauhan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

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>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>
</html>

OUTPUT

13 Internal

<html>

<head>

<style>

body {

background-color: linen;

h1 {
color: maroon;

margin-left: 40px;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

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

border: 1px solid black;

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: 1px solid black;

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 {

border: 1px solid black;

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

border: 1px solid black;

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy