Scribd
Upload
75 views80 pages

HTML Examples

The document contains 47 examples of HTML code snippets and their outputs. The examples demonstrate various HTML tags like <html>, <body>, <p>, <h1>-<h6>, <img>, <a>, <style> and their usage to change text formatting, add images, hyperlinks, and style elements like colors, fonts, sizes and positioning on a webpage. The code examples cover basic to more advanced HTML features and CSS properties.

Uploaded by

Zara
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
75 views80 pages

HTML Examples

The document contains 47 examples of HTML code snippets and their outputs. The examples demonstrate various HTML tags like <html>, <body>, <p>, <h1>-<h6>, <img>, <a>, <style> and their usage to change text formatting, add images, hyperlinks, and style elements like colors, fonts, sizes and positioning on a webpage. The code examples cover basic to more advanced HTML features and CSS properties.

Uploaded by

Zara
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 80

 

 
 
 

Department of Computer Engineering


 
Academic Session: 2022

Lab Task 5
Project 0

Submitted to:

 Sir Sheheryar

Submitted by:

 Zara Khan
 22-CP-Omega

Subject Details:

 Computing Fundamentals (Lab)

 
 
Dated: 25-10-2022
Example1:

Code:
<html>
<body>
<a href="https://www.uettaxila.edu.pk/">Visit UET Taxila</a>
</body>
</html>
Output:

Example 2:
Code:
<html>
<body>
<img src="C:\Users\DELL\Pictures\learn-to-crochet-thumbnail.jpg"</img>
</body>
</html>
Output:

Example 3:
Code:
<html>
<body>
<img src="C:\Users\DELL\Pictures\learn-to-crochet-thumbnail.jpg" width="500"
height="600";></img>
</body>
</html>
Output:

Example 4:
Code:
<html>
<body>
<img src="C:\Users\DEL\Pictures\learn-to-crochet-thumbnail.jpg" alt="A girl doing Crochet"
width="500" height="600";></img>
</body>
</html>
Output:

Example 5:
Code:
<html>
<body>
<p style="color:purple;">I am purple</p>
</body>
</html>
Output:

Example 6:
Code:
<html lang="en">
<body>
This is english
</body>
</html>
Output:

Example 7:
Code:
<html lang="en-US">
<body>
United States English
</body>
</html>
Output:

Example 8:
Code:

<html>
<body>
<p title="Computing Fundamentals">Lab tasks 5</p>
</body>
</html>
Output:

Example 9:
Code:
<html>
<body>
<h1>Computing Fundamentals</h1>
<h2>Computing Fundamentals</h2>
<h3>Computing Fundamentals</h3>
<h4>Computing Fundamentals</h4>
<h5>Computing Fundamentals</h5>
<h6>Computing Fundamentals</h6>
</body>
</html>
Output:

Example 10:
Code:
<html>
<body>
<h1 style="font-size:85px;">Font size is 85</h1>
</body>
</html>
Output:

Example 11:
Code:
<html>
<body>
<p>Hello my name is Zara.</p>
<p>I am from CP department.</p>
</body>
</html>
Output:

Example 12:
Code:
<html>
<body>
<p>
My name is Zara
I am a student of Uet Taxila
I am studying Computer Engineering
and I am from the batch of 2022.
</p>
<p>
My name is Zara
I am a student of Uet Taxila
I am studying Computer Engineering
and I am from the batch of 2022.
</p>
</body>
</html>
Output:

Example 13:
Code:
<html>
<body>
<h2>Heading 2</h2>
<p>This is my text in Heading 2</p>
<hr>
<h3> Heading 3</h3>
<p>This is my text in heading 3.</p>
<hr>
</body>
</html>
Output:

Example 14:
Code:
<html>
<body>
<p>My name is<br>Zara Khan<br>Registration number: 22-CP-22</p>
</body>
</html>
Output:

Example 15:
Code:

<html>
<body>
<p>
If you can dream—and not make dreams your master;
If you can think—and not make thoughts your aim;
If you can meet with Triumph and Disaster
And treat those two impostors just the same;
</p>
</body>
</html>

Output:

Example 16:
Code:
<html>
<body>
<pre>
If you can dream—and not make dreams your master;
If you can think—and not make thoughts your aim;
If you can meet with Triumph and Disaster
And treat those two impostors just the same;
</pre>
</body>
</html>
Output:

Example 17:
Code:

<html>
<body>
<p style="color:purple;">This is purple</p>
<p style="color:deeppink;">This is deeppink</p>
<p style="color:blue;">This is blue</p>
</body>
</html>
Output:

Example 18:
Code:
<html>
<body style="background-color:deeppink;">
<h1>This is a deep pink web page.</h1>
<p>This is done by using CSS</p>
</body>
</html>
Output:
Example 19:
Code:
<html>
<h1 style="background-color:dodgerblue;">This is a dodger blue heading</h1>
<p style="background-color:yellow;">This is a yellow paragraph.</p>
</body>
</html>
Output:

Example 20:
Code:
<html>
<h1 style="color:tomato;">This is CSS color property</h1>
<p style="color:green;">This is a green paragraph.</p>
</body>
</html>
Output:
Example 21:
Code:
<html>
<h1 style="font-family:verdana;">This is a heading in Verdana font.</h1>
<p style="font-family:courier;">This is a paragraph in courier font.</p>
</body>
</html>
Output:

Example 22:
Code:
<html>
<h1 style="font-size:300%;">This is font size 450%</h1>
<p style="font-size:160%;">This is font size 178%.</p>
</body>
</html>
Output:

Example 23:
Code:
<html>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:right;">Right paragraph.</p>
</body>
</html>
Output:

Example 24:
Code:
<html>
<body>
<b>I have made this text bold</b>
</body>
</html>
Output:

Example 25:
Code:
<html>
<body>
<strong>This is a very important text!</strong>
</body>
</html>
Output:

Example 26:
Code:
<html>
<body>
<i>This is an italic text</i>
</body>
</html>
Output:

Example 27:
Code:
<html>
<body>
<em>What are your plans for today?</em>
</body>
</html>
Output:

Example 28:
Code:
<html>
<body>
<small>This is some smaller text.</small>
</body>
</html>

Output:

Example 29:
Code:
<html>
<body>
<p> Please remember to bring the <mark>eggs<mark><p>
</body>
</html>
Output:

Example 30:
Code:
<html>
<body>
<p>My favorite thing is <del>chocolate</del> balloon.</p>
</body>
</html>
Output:

Example 31:
Code:
<html>
<body>
<p>My favorite color is <del>purple</del><ins>blue</ins>.</p>
</body>
</html>
Output:

Example 32:
Code:
<html>
<body>
<p>This is <sup>very</sup>funny.</p>
</body>
</html>
Output:

Example 33:
Code:
<html>
<body>
<p>Here is a quote from uet taxila's website:</p>
<blockquote cite="https://web.uettaxila.edu.pk/AboutUs">
With phenomenal increase in students' enrollment in 1970's, a plan to establish additional campuses
of the University of Engineering and Technology Lahore was conceived. As a result of that, the
University College of Engineering Taxila was established in 1975. For three years it functioned at
Sahiwal. In 1978 it was shifted to its permanent location at Taxila. The College continued its working
under the administrative control of the University of Engineering and Technology, Lahore till October
1993. During this month it received its charter as an independent university under the University of
Engineering and Technology Taxila Ordinance 1993. At present total enrollment of undergraduate
and postgraduate students is above 2000.
</blockquote>
</body>
</html>
Output:

Example 34:
Code:
<html>
<body>
<p>A quote from the Uet taxila: <q>The Governor of Punjab is the Chancellor and the Education
Minister of Punjab is the Pro-Chancellor of the University.</q></p>
</body>
</html>
Output:

Examples 35:
Code:
<html>
<body>
<p>The popular university <abbr title="University of engineering and Technology">UET.</abbr> was
founded in 1993.</p>
</body>
</html>
Output:
Example 36:
Code:
<html>
<body>
<address>
Written by Zara Khan.<br>
Visit us at:<br>
uet,taxila.com<br>
Rawalpindi<br>
Pakistan
</address>
</body>
</html>
Output:

Example 37:
Code:
<html>
<body>
<p><cite>MonaLisa</cite> by Leonardo Da Vinci. Painted in 1893.</p>
</body>
</html>

Output:
Example 38:
Code:
<html>
<body>
<bdo dir="rtl"> Have you reached home yet?</bdo>
</body>
</html>
Output:

Example 39:
Code:
<html>
<body>
<!-- Here we are going to use the mark tag--!>
<p> We are currently in <mark>Turkey.</mark></p>
<!--Due to the mark tag "Turkey" was signified--!>
</body>
</html>
Output:

Example 40:
Code:
<html>
<body>
<p>This is a text.</p>
<!-- <p>This is another text. </p> --!>
<p>This here is also a text.</p>
</body>
</html>
Output:

Example 41:
Code:
<html>
<body>
<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>
</body>
</html>
Output:

Example 42:
Code:
<html>
<body>
<h1 style="background-color:purple;">Hey its purple</h1>
<p style="background-color:greenyellow;">this is greenyellow</p>
</body>
</html>
Output:

Example 42:
Code:
Output:
<html>
<body>
<h1 style="color:darkkhaki;">Dark Khaki</h1>
<p style="color:blueviolet;">This text is colored blueviolet</p>
<p style="color:Darkolivegreen;">This is darkolive green</p>
</body>
</html>
Output:

Example 43:
Code:
<html>
<body>
<h1 style="border:6px solid darkkhaki;">Hello World</h1>
<h1 style="border:3px solid darkorchid;">Hello World</h1>
<h1 style="border:8px solid Violet;">Hello World</h1>
</body>
</html>
Output:

Example 43:
Code:
<html>

<body>

<h1 style="background-color:rgb(255, 18, 71);">...</h1>

<h1 style="background-color:#7FFF00;">...</h1>

<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 59, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 1);">...</h1>

</body>

</html>

Output:

Example 44:
Code:
<html>
<body>
<h1 style="background-color:rgb(255, 87, 09);">rgb(255, 87, 09)</h1>
<h1 style="background-color:rgb(06, 50, 255);">rgb(06, 50, 255)</h1>
<h1 style="background-color:rgb(50, 179, 143);">rgb(50, 179, 143)</h1>
</body>
</html>
Output:

Example 44:
Code:
<html>
<body>
<h1 style="background-color:rgb(60, 60, 60);">grey</h1>
<h1 style="background-color:rgb(100, 100, 100);">grey</h1>
<h1 style="background-color:rgb(140, 140, 140);">grey</h1>
<h1 style="background-color:rgb(180, 180, 180);">grey</h1>
<h1 style="background-color:rgb(200, 200, 200);">grey</h1>
<h1 style="background-color:rgb(240, 240, 240);">grey</h1>
</body>
</html>
Output:
Example 45:
Code:
<html>
<body>
<h1 style="background-color:#DFFF00;">#DFFF00</h1>
<h1 style="background-color:#FFBF00;">#FFBF00</h1>
<h1 style="background-color:#FF7F50;">#FF7F50</h1>
<h1 style="background-color:#DE3163;">#DE3163</h1>
<h1 style="background-color:#6495ED;">#6495ED</h1>
<h1 style="background-color:#CCCCFF;">#CCCCFF</h1>
</body>
</html>
Output:

Example 46:
Code:
<html>
<body>
<h1 style="color:violet;">A violet heading</h1>
<p style="color:deeppink;">A deeppink paragraph</p>
</body>
</html>
Output:
Example 47:
Code:
<html>
<body>
<head>
<style>
body {background-color: darkorchid;}
h1 {color: yellow;}
p {color: blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:

Example 48:
Code:
<html>
<body>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
Output:

Example 49:
Code:
body { background-color: powderblue; }
h1 { color: blue; }
p { color: red; }

Example 50:

Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-family: verdana;
font-size: 170%;
}
p{
color: #404040;
font-family: courier;
font-size: 190%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:

Example 51:
Code:
<html>
<head>
<style>
p{
border: 2px solid magenta;
}
</style>
</head>
<body>
<p> Hello how are you? </p>
</body>
</html>
Output:
Example 52:
Code:
<html>
<head>
<style>
p{
border: 2px solid magenta;
padding: 30px;
}
</style>
</head>
<body>
<p> Hello how are you? </p>
</body>
</html>
Output:

Example 53:
Code:
<html>
<head>
<style>
p{
border: 2px solid magenta;
margin: 50px;
}
</style>
</head>
<body>
<p> Hello how are you? </p>
</body>
</html>
Output:

Example 54:
Code:
<html>
<head>
</head>
<body>
<a href="https://www.uettaxila.edu.pk /">Visit Uettaxila.com!</a>
</body>
</html>
Output:

Example 55:
Code:
<html>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
</body>
</html>
Output:
Example 56:
Code:
<html>
<body>
<a href="default.asp">
<img src="C:\Users\DELL\Downloads\html.png" alt="HTML tutorial"
style="width:50px;height:42px;">
</a>
</body>
</html>
Output:

Example 57:
Code:
<html>
<body>
<a href="mailto:[email protected]">Send email</a>
</body>
</html>
Output;

Exmaple: 58:
Code:
<html>
<body>
<button onclick="document.location='default.asp'">submit answer</button>
</body>
</html>
Output:

Examplw 59:
Code:
<html>
<body>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit
our HTML Tutorial</a>
</body>
</html>
Output:

Examplw 60:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
Output:
Examplw 61:
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2 id="C4">Chapter 4</h2>
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

Output:
Example 62:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="C:\Users\DELL\Downloads\html.png" alt="html" width="500" height="333">
</body>
</html>
Output:

Example 63:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>hello world!</p>
<img src="C:\Users\DELL\Downloads\html.png" alt="html logo" style="width:500px;height:600px;">
</body>
</html>
Output:

Example 64:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 80%;
}
</style>
</head>
<body>
<img src="C:\Users\DELL\Downloads\html.png" alt="HTML5" width="68" height="128">
<img src="C:\Users\DELL\Downloads\html.png" style="width:128px;height:128px;">
</body>
</html>
Output:

Example 65:
Code:
<html>
<body>
<p><img src="C:\Users\DELL\Downloads\happy.png" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
</body>
</html>
Output:

Example 66:

Code:
<html>
<body>
<p><img src="C:\Users\DELL\Downloads\happy.png" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
</body>
</html>
Output:

Example 67:
Code:
<html>
<body>
<img src="C:\Users\DELL\Desktop\cute.gif" alt="Computer Man" style="width:48px;height:48px;">
</body>
</html>
Output:

Example 68:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more
about the topic:</p>
<img src="C:\Users\DELL\Desktop\images.jfif" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
Output:

Example 69:
Code:
<!DOCTYPE html>
<html>
<body>
<img src="C:\Users\DELL\Desktop\images.jfif" alt="Workplace" usemap="#workmap">
</body>
</html>
Output:
Example 70:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer to go to a new page and read more about the topic:</p>
<img src="C:\Users\DELL\Desktop\images.jfif" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
</map>
</body>
</html>
Output:

Example 71:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p style="background-image: url('gra.avif');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>
</body>
</html>
Output:

Example 72:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url('gra.avif');
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>
Output:

Example 73:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('gra.avif');
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>By default, the background image will repeat itself if it is smaller than the element where
it is specified, in this case the body element.</p>
</body>
</html>
Output:

Example 74:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('gra.avif');
}
</style>
</head>
<body>
<h2>Background Repeat</h2>
<p>By default, the background image will repeat itself if it is smaller than the element where
it is specified, in this case the body element.</p>
</body>
</html>
Output:
Example 75:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('gra.avif');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background Repeat</h2>
<p>By default, the background image will repeat itself if it is smaller than the element where
it is specified, in this case the body element.</p>
</body>
</html>
Output:
Example 75:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('gra.avif');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background Cover</h2>
<p>Set the background-size property to "cover" and the background image will cover the
entire element, in this case the body element.</p>
</body>
</html>
Output:
Example 76:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source media="(min-width: 650px)" srcset="C:\Users\DELL\Downloads\html.png">
<source media="(min-width: 465px)" srcset="C:\Users\DELL\Downloads\html.png">
<img src="C:\Users\DELL\Desktop\gra.avif" style="width:auto;">
</picture>
<p>Resize the browser to see different versions of the picture loading at different viewport
sizes.
The browser looks for the first source element where the media query matches the user's
current viewport width,and fetches the image specified in the srcset attribute.</p>
<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support
the picture element, or if none of the source tags matched.
</p>
<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari
9.0 and earlier.</p>
</body>
</html>
Output:

Example 77:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source srcset="C:\Users\DELL\Downloads\html.png">
<source srcset="C:\Users\DELL\Downloads\html.png">
<img src="C:\Users\DELL\Downloads\html.png" alt="Beatles" style="width:auto;">
</picture>

<p>The picture element can be used when the image format is not supported by all
devices.</p>
<p>The device will use the first image format it supports, and ignore the rest of the
images.</p>
</body>
</html>
Output:
Example 78:
Code:
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="C:\Users\DELL\Downloads\favicon.ico">
</head>
<body>
Output:

Example 79:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>harib</td>
<td>mlaysia</td>
</tr>
<tr>
<td>zara</td>
<td>helllo</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Output:

Example 80:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:

Example 81:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Output:
Example 82:
Code:
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always start on a new
line and take up the full width available (stretches out to the left and right as far as it can).</p>
</body>
</html>
Output:

Example 83:
Code:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>
Output:

Example 84:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my
father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
</body>
</html>
Output:
Example 85:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Output:
Example 86:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Output:

Example 87:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: yellow;
color: black;

padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Output:

Example 88:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be
used by one HTML element within the page:</p>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Output:

Example 89:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Output:

Example 90:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>

Output:

Example 91:
Code:

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>

function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
Output:

Example 92:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>

Output:

Example 93:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;

text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next
to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller
screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in
our next chapter - HTML Responsive.)</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>

<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>

<p>Footer</p>
</footer>
</body>
</html>
Output:
Example 94:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Container for flexboxes */
section {
display: -webkit-flex;
display: flex;
}
/* Style the navigation menu */
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #ccc;
padding: 20px;
}

/* Style the list inside the menu */


nav ul {
list-style-type: none;
padding: 0;
}
/* Style the content */
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: #f1f1f1;
padding: 10px;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the menu and the content (inside the section) sit on top of each
other instead of next to each other */
@media (max-width: 600px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>CSS Layout Flexbox</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller
screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier
versions.</p>
<header>
<h2>Cities</h2>

</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>

<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Output:
Example 95:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Container for flexboxes */
section {
display: -webkit-flex;
display: flex;
}
/* Style the navigation menu */
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
/* Style the content */
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: #f1f1f1;
padding: 10px;
}
/* Style the footer */

footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the menu and the content (inside the section) sit on top of each
other instead of next to each other */
@media (max-width: 600px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>CSS Layout Flexbox</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller
screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier
versions.</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>

<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>

</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Output:
Example 96:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
@media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;

}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give
or take an hour depending on the weather conditions and your physical shape.</p>
<img src="C:\Users\DELL\Downloads\happy.png" style="width:5%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and
Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-
top:7px;fontsize:12px;"> This web page is a part of a demonstration of fluid web design made by
w3schools.com. Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>
Setting The Viewport
To create a responsive website, add the following <meta> tag to all your web pages:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Setting the Viewport</h2>
<p>This example does not really do anything, other than showing you how to add the
viewport meta element.</p>
</body>
</html>
Output:
Example 97:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and
down when resizing the browser window. Resize the browser window to see the effect.</p>
<img src="C:\Users\DELL\Downloads\happy.png" style="width:100%;">

</body>
</html>
Output:
Example 98:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<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"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>
Output:
Example 99:
Code:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Output:

Example 100:
Code:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Output:
Example 101:
Code:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Output:

Example 102:
Code:
<form action="/action_page.php">
<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"><br><br>
<input type="submit" value="Submit">
</form>
Output:

Example 103:
Code:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
Output:

Example 104:
Code:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Output:

Example 105:
Code:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Output:

Example 106:
Code:
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Output:

Example 107:
Code:
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Output:

Example 108:
Code:
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>

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


<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>

Output:
Example 109:
Code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>

<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Output:
Example 110:
Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the emoji image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="C:\Users\DELL\Downloads\happy.png" draggable="true"
ondragstart="drag(event)"
width="336" height="69">
</body>
</html>
Output:

You might also like