Scribd
Upload
4 views

HTML NOTES

The document contains various examples of HTML code demonstrating fundamental concepts such as paragraph tags, headings, lists, tables, forms, and CSS styling. It showcases how to create structured web pages with different elements, styles, and functionalities. Each section illustrates specific HTML features and attributes, providing a comprehensive overview of web development basics.

Uploaded by

arbabnicharii
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

HTML NOTES

The document contains various examples of HTML code demonstrating fundamental concepts such as paragraph tags, headings, lists, tables, forms, and CSS styling. It showcases how to create structured web pages with different elements, styles, and functionalities. Each section illustrates specific HTML features and attributes, providing a comprehensive overview of web development basics.

Uploaded by

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

<Html>

<Head>

<title>

Example of Paragraph tag

</title>

</Head>

<Body>

<p> <!-- It is a Paragraph tag for creating the paragraph -->

<b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web
pages and applications. This language

is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it
provides a flexible way for designing the

web pages along with the text.

</p>

HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end
tag, attributes and the text between them</i>.

</p>

</Body>

</Html>

<!DOCTYPE html>

<html>

<head>

<title>

beautiful and simple website using html only

</title>
</head>

<body background="1.jpg">

<br />

<h3 align="center">

<font face="Lato" size="6">LOGO</font>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<font face="cinzel" size="4">

<a href="#">HOME</a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#">VIDEOS</a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#">PORTFOLIO</a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#">PICTURE GALLERY</a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#">CONTACT US</a>

</font>

</h3>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<h1 align="center">

<font face="Lato" color="#017bf5" size="7">

BEAUTIFUL AND SIMPLE WEB PAGE

</font>

</h1>
<h3 align="center">

<font face="Lato" color="#000" size="5">

USING HTML ONLY

</font>

</h3>

<br />

<h3 align="center">

<a href="#">

<font face="Lato" color="#000">GET STARTED</font>

</a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#">

<font face="Lato" color="#fff">SUBSCRIBE US</font>

</a>

</h3>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>


</body>

</html>

<!DOCTYPE html>

<html>

<body>

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For 50 years, WWF has been protecting the future of nature.

The world's leading conservation organization,

WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally.

</blockquote>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For 50 years, WWF has been protecting the future of nature.

The world's leading conservation organization,


WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally.

</blockquote>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:Gray;">Gray</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Colspan/Rowspan</title>


</head>

<body>

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

</body>

</html>

<!DOCTYPE html>

<html>

<body>
<h2>HTML Buttons</h2>

<p>HTML buttons are defined with the button tag:</p>

<button>Click me</button>

</body>

</html>

<!DOCTYPE html>

<html>

<body style="background-color:powderblue;">

<h1>This is a heading</h1>

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

</body>

</html>

10

<!DOCTYPE html>

<html>

<body>

<p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

</body>

</html>
11

<!DOCTYPE html>

<html>

<body>

<p>This is some normal text.</p>

<p><small>This is some smaller text.</small></p>

</body>

</html>

12

<!DOCTYPE html>

<html>

<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>

</html>

13

<!DOCTYPE html>

<html>

<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

</body>

</html>
14

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;">

Your browser does not support the HTML canvas tag.

</canvas>

</body>

</html>

15

!DOCTYPE html>

<html>

<body>

<h2>Demo of action attribute of form element</h2>

<form action="action.html" method="post">

<label>User Name:</label><br>

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

<label>User Password</label><br>

<input type="password" name="pass"><br><br>

<input type="submit">

</form>

<p><b>It will redirect to a new page "action.html" when you click on submit button</b></p>

</body>

</html>
16

<!DOCTYPE>

<html>

<head>

<style>

h1{

color:white;

background-color:red;

padding:5px;

p{

color:blue;

</style>

</head>

<body>

<h1>Write Your First CSS Example</h1>

<p>This is Paragraph.</p>

</body>

</html>

17

<!DOCTYPE html>

<html>

<head>

<style>

h2,p{
background-color: #b0d4de;

</style>

</head>

<body>

<h2>My first CSS page.</h2>

<p>This is an example of CSS background-color of heading and Paragraph.</p>

</body>

</html>

18

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("write down the name and extension of your image");

margin-left:100px;

</style>

</head>

<body>

<h1>This is DIT Class</h1>

</body>

</html>

if you want to repeat background on a single page

<!DOCTYPE html>

<html>
<head>

<style>

body {

background-image: url("gradient_bg.png");

background-repeat: repeat-x;

</style>

</head>

<body>

<h1>Hello Javatpoint.com</h1>

</body>

</html>

19

CSS Borders examples

<!DOCTYPE html>

<html>

<head>

<style>

p.none {border-style: none;}

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}


p.outset {border-style: outset;}

p.hidden {border-style: hidden;}

</style>

</head>

<body>

<p class="none">No border.</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="hidden">A hidden border.</p>

</body>

</html>

20

<!DOCTYPE html>

<html>

<head>

<title> CSS border-radius </title>

<style>

div {

padding: 50px;

margin: 20px;
border: 6px ridge red;

width: 300px;

float: left;

height: 150px;

p{

font-size: 25px;

#one {

border-radius: 70px;

background: lightgreen;

#two {

border-radius: 25% 10%;

background: orange;

#three {

border-radius: 35px 10em 10%;

background: cyan;

#four {

border-radius: 50px 50% 50cm 50em;

background: lightblue;

</style>

</head>

<body>

<div id = "one">

<h2> Welcome to the javaTpoint.com </h2>


<p> border-radius: 90px; </p>

</div>

<div id = "two">

<h2> Welcome to the javaTpoint.com </h2>

<p> border-radius: 25% 10%; </p>

</div>

<div id = "three">

<h2> Welcome to the javaTpoint.com </h2>

<p> border-radius: 35px 10em 10%; </p>

</div>

<div id = "four">

<h2>Welcome to the javaTpoint.com</h2>

<p>border-radius: 50px 50% 50cm 50em;</p>

</div>

</body>

</html>

21

The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a
container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The
<div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the
<div> tag!

22

<!DOCTYPE>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

margin-left: auto;

margin-right: auto;
border-collapse: collapse;

width: 500px;

text-align: center;

font-size: 20px;

</style>

</head>

<body>

<table>

<tr>

<th>First_Name</th>

<th>Last_Name</th>

<th>Subject</th>

<th>Marks</th>

</tr>

<tr>

<td>James</td><td>Gosling</td><td>Maths</td><td>92</td>

</tr>

<tr>

<td>Alan</td><td>Rickman</td><td>Maths</td><td>89</td>

</tr>

<tr>

<td>Sam</td><td>Mendes</td><td>Maths</td><td>82</td>

</tr>

</table>

</body>

</html>

23

<!DOCTYPE html>
<html>

<head>

<title> border-spacing property </title>

<style>

table{

border: 2px solid blue;

text-align: center;

font-size: 20px;

background-color: lightgreen;

th{

border: 5px solid red;

background-color: yellow;

td{

border: 5px solid violet;

background-color: cyan;

#space{

border-collapse: separate;

border-spacing: 45px;

</style>

</head>

<body>

<h1> The border-spacing Property </h1>

<h2> border-spacing: 45px; </h2>

<table id = "space">
<tr>

<th> First_Name </th>

<th> Last_Name </th>

<th> Subject </th>

<th> Marks </th>

</tr>

<tr>

<td> James </td>

<td> Gosling </td>

<td> Maths </td>

<td> 92 </td>

</tr>

<tr>

<td> Alan </td>

<td> Rickman </td>

<td> Maths </td>

<td> 89 </td>

</tr>

<tr>

<td> Sam </td>

<td> Mendes </td>

<td> Maths </td>

<td> 82 </td>

</tr>

</table>

</body>

</html>

24

<!DOCTYPE html>
<html>

<head>

<title>text-decoration</title>

<style>

h1 {

color: red;

h2{

color: blue;

body {

text-align: center;

p{

font-size: 30px;

#p1 {

text-decoration: underline;

#p2 {

text-decoration: line-through;

#p3 {

text-decoration: overline;

#p4 {

text-decoration: overline underline line-through;

</style>

</head>
<body>

<h1>Welcome to the javaTpoint.com</h1>

<h2>text-decoration: text-decoration-line;</h2>

<div>

<p id="p1">This is underline</p>

<p id="p2">This is line-through</p>

<p id="p3">This is overline</p>

<p id="p4">This is the combination of lines</p>

</div>

</body>

</html>

25

<!DOCTYPE html>

<html>

<head>

<title>

CSS word-spacing Property

</title>

<style>

body{

text-align: center;

#space{

word-spacing: 60px;

p{
color: red;

font-weight:bold;

font-size: 40px;

</style>

</head>

<body>

<h1>The word-spacing Property</h1>

<div>

<h2>word-spacing: normal;</h2>

<p>

This is a paragraph

</p>

</div>

<div>

<h2>word-spacing: 40px;</h2>

<p id= "space">

Welcome to Webpage Designing

</p>

</div>

</body>

</html>

26

<!DOCTYPE html>

<html>

<head>

<title>

CSS word-spacing Property


</title>

<style>

body{

text-align: center;

#space{

word-spacing: 60px;

p{

color: red;

font-weight:bold;

font-size: 40px;

</style>

</head>

<body>

<h1>The word-spacing Property</h1>

<div>

<h2>word-spacing: normal;</h2>

<p>

This is a paragraph

</p>

</div>

<div>

<h2>word-spacing: 40px;</h2>

<p id= "space">

Welcome to Webpage Designing

</p>

</div>
</body>

</html>

27

<!DOCTYPE html>

<html>

<head>

<title>

button background Color

</title>

<style>

body{

text-align: center;

button {

color:lightgoldenrodyellow;

font-size: 30px;

.b1 {

background-color: red;

.b2 {

background-color: blue;

.b3 {

background-color: violet;
}

</style>

</head>

<body>

<h1>The background-color property.</h1>

<button class="b1">Red color button</button>

<button class="b2">Blue color button</button>

<button class="b3">Violet color button</button>

</body>

</html>

29

<!DOCTYPE html>

<html>

<head>

<title>CSS Lists</title>

<style>

.num{

list-style-type:decimal;

.alpha{

list-style-type:lower-alpha;

.roman{

list-style-type:lower-roman;

.circle{

list-style-type:circle;

.square{
list-style-type:square;

.disc{

list-style-type:disc;

</style>

</head>

<body>

<h1>

Welcome to the CSS ORder and Unordered list

</h1>

<h2>

Ordered Lists

</h2>

<ol class="num">

<li>one</li>

<li>two</li>

<li>three</li>

</ol>

<ol class="alpha">

<li>one</li>

<li>two</li>

<li>three</li>

</ol>

<ol class="roman">

<li>one</li>

<li>two</li>

<li>three</li>

</ol>

<h2>

Unordered lists
</h2>

<ul class="disc">

<li>one</li>

<li>two</li>

<li>three</li>

</ul>

<ul class="circle">

<li>one</li>

<li>two</li>

<li>three</li>

</ul>

<ul class="square">

<li>one</li>

<li>two</li>

<li>three</li>

</ul>

</body>

</html>

30

<html>

<head>

<title>CSS hsl color property</title>

<style>

h1{

text-align:center;

}
#rgb{

color:rgb(255,0,0);

#rgba{

color:rgba(255,0,0,0.5);

#hex{

color:#EE82EE;

#short{

color: #E8E;

#hsl{

color:hsl(0,50%,50%);

#hsla{

color:hsla(0,50%,50%,0.5);

#built{

color:green;

</style>

</head>

<body>

<h1 id="rgb">

Hello World. This is RGB format.

</h1>

<h1 id="rgba">

Hello World. This is RGBA format.

</h1>

<h1 id="hex">
Hello World. This is Hexadecimal format.

</h1>

<h1 id="short">

Hello World. This is Short-hexadecimal format.

</h1>

<h1 id="hsl">

Hello World. This is HSL format.

</h1>

<h1 id="hsla">

Hello World. This is HSLA format.

</h1>

<h1 id="built">

Hello World. This is Built-in color format.

</h1>

</body>

</html>

31

<html>

<head>

<title> Gallery </title>

<style>

body

background-color:#ff0006;

h1

{
font-size:80px;

box-shadow: 5px 5px 5px black;

color=red;

text-align:center;

font-family: time new roman, arial;

color:red;

table

width: 100%

border: 2px solid red;

td

width:25%;

border: 10px solid red;

padding: 5px;

cellspacing:10px;

</style>

</head>

<body>
<h1>

Picture Gallery

</h1>

<table>

<tr>

<td> <a href="result 2021.xlsx"><img src="building1.jpg" width=320px></a>

<td> <img src="building2.jpg" width=320px>

<td> <img src="building1.jpg" width=320px>

<td> <img src="building1.jpg" width=320px>

</tr>

<tr>

<td> <img src="building1.jpg" width=320px>

<td> <img src="building2.jpg" width=320px>

<td> <img src="building1.jpg" width=320px>

</tr>

<tr>

<td> <img src="building1.jpg" width=320px>

<td> <img src="building2.jpg" width=320px>

<td> <img src="building1.jpg" width=320px>

</tr>

<tr>

<td> <img src="building1.jpg" width=320px>

<td> <img src="building2.jpg" width=320px>

<td> <img src="building1.jpg" width=320px>

</tr>
</body>

</html>

32

You might also like