Scribd
Upload
3 views36 pages

HTML Markup Tags and Lists Guide

The document provides an overview of various HTML text markup tags, including paragraph, heading, blockquote, and formatting tags such as bold, italic, and underline. It also covers lists, images, and hyperlinks, demonstrating how to create ordered and unordered lists, as well as how to incorporate images from different sources. Additionally, it includes examples of using meta elements and inline quotations.

Uploaded by

kothakotamounika8
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
3 views36 pages

HTML Markup Tags and Lists Guide

The document provides an overview of various HTML text markup tags, including paragraph, heading, blockquote, and formatting tags such as bold, italic, and underline. It also covers lists, images, and hyperlinks, demonstrating how to create ordered and unordered lists, as well as how to incorporate images from different sources. Additionally, it includes examples of using meta elements and inline quotations.

Uploaded by

kothakotamounika8
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

Text markup Tags

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Demonstration of text markup tags</title>
</head>
<body>
<!-- dummy paragraph -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum nulla
maiores vel explicabo veniam quidem voluptatem repudiandae
doloremque iusto eveniet? Unde minus aliquam alias tempore sed, sit
itaque molestiae mollitia.
<!-- paragraph tag -->
<p>this is a paragraph tag where i can write<br> paragraphs, multiple
lines and etc</p>
<!-- preserve white space tag -->
<pre> this is
used to
preserve
white
space
in the lines we write
</pre>
<!-- heading tag -->
<h1>this is heading</H1>
<h2>this is heading</h2>
<h3>this is heading</h3>
<h4>this is heading</h4>
<h5>this is heading</h5>
<h6>this is heading</h6>
<!--block quote tag -->
<p>this is not block quote tag</p>
<blockquote>this is used to block quote the content</blockquote>
<!-- font style tags like blod, italics,underline -->
<b>this is to bold the text</b>
<i>this to italise the text</i>
<u>this is to underline the text</u>
<!-- Horizontal rule tag -->
<hr>
<hr>
<!-- em, strong, and code tag -->
<em>emphasis tag</em>
<p>this is %d the<strong>strong tag</strong></p>
<!-- metaelement -->
<meta name="Web development" content="teachings of developing
web application">
<!-- strike tthrough text -->
<s>this is to strike th content</s><br>
<!-- superscript and subscrip -->
X<sup>2</sup></br>
X<sub>2</sub></br>
<!-- code tag -->
<code>printf("this is to print");
scanf("%d",&a);
</code><br>
<!-- inline quotation -->
<q>this is a short phrase</q><br>
<!-- big and small content -->
This is a <big>big text</big><br>
This is a <small>small text</small><br>
<!-- insert and delete the words -->
this next word is<ins>inserted</ins><br>
this next word is<del>deleted</del>
</body>
</html>

List and types of list


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Lists</title>
</head>
<body>
<h1>Demonstration of ordered list</h1>
<ol type="I">
<li>vegetarian</li>
<ul type="square">
<li>idli</li>
<dl>
<dt>tatte idli</dt>
<dd>it will be in terms of plate</dd>
<dt>spoon idli</dt>
<dd>here size will be in terms of spoon</dd>
</dl>
<li>dosa</li>
<dl>
<dt>masala Dosa</dt>
<dd>it consists of yummy masala potato stuffing in it</dd>
<dt>set dosa</dt>
<dd>it is the dosa that contains onions and some greens in
it</dd>
</dl>
<li>vada
<dl>
<dt>number1</dt>
<dd>pervada</dd>
<dt>number2</dt>
<dd>vada curry</dd>
</dl>
</li>
</ul>

<li>Non vegetarian</li>
<ul type="square">
<li>Chicken biryani</li>
<li>mutton biryani</li>

</ul>
</ol>

</body>
</html>

Images and Hyperlinks


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>image and hyperlinks</title>
<style>
img {
float: left; /* or right */
margin: 10px;
}
</style>
</head>
<body>
<!--images from the same folder-->
<img src="[Link]" alt="exafluence logo" height="450"
width="600px" title="exafluence" loading="lazy"><br>
<!-- images from another folder -->
<img
src="[Link]
ted_Wallpaper_Windows_10_-_Wallpaper_Engine.gif/640px-
Animated_Wallpaper_Windows_10_-_Wallpaper_Engine.gif"
alt="datascience road map image" style="float: right;">
<!-- images on another server/website -->
<img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2w
CEAAkGBxITEhUSEhIVFRUXFRcVFxUVFRUVFRYVFhcXGBUXGB
UYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxA
QGi0mHx8tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0
tLS0tLS0tLS0tLf/AABEIATMApAMBIgACEQEDEQH/
xAAbAAACAwEBAQAAAAAAAAAAAAADBAACBQEGB//
EAEAQAAIBAgQDBgMFBgQGAwAAAAECAAMRBBIhMQVBURM
iYXGBkQahsTJCUsHRI2JyguHwFBWiwgczU5Ky8UOT8v/
EABoBAAMBAQEBAAAAAAAAAAAAAAECAwAEBQb/
xAAqEQACAgEEAQMFAAIDAAAAAAAAAQIRAwQSITFBBRNRIjJ
hcdGBwQYjof/
aAAwDAQACEQMRAD8A+Q4DBaBiN9R4CaCpLpSsAJdVknI4pT3cl
Qs6VlwJILJgSsfwHDO0tmbLfZQMzEc/KLnynp/g7DZsz/ezBfTc/
l7RW6VglKkAoU1w9Sq5v3VAVSOYBIA/
dtbWeXaoSSTqWNyfEm5t0nvPjjDB6QekQcmjW2IBI08QcwngSIsHuVj
Q5VnBOWlgJ20ccLhqoDjTuk2K76HT1mljcGxUNTTNbRkOvkwvMcm
2s3a2OyBFJAsgPLb9d4k15EbaaozaIRnFNqdr6bldQL63vlMEcJRL9mFc
Ne1ja5/
hJNve0M+IDnkKincfetqCB02Noz8T4e6UcVT7p0VrcmGqn6j2ixf1UUU
23TM3F4CgCV7V0cfdqhfnbaZ7UypsbehuCOonoeOUlxOHXFIO+gC1A
OnP2Jv5GebpyzZSDtFykFUSNIJKiRVMKfIiRKst4w1ORaMomNuM90s
ZJonDyRrG3o3ss5lhiJUybPNTBZZVhDWlWWLY1gJocI4tUw7Fksbgix
vbXnbqImwlIWrQT0Hw9xUClUw7i7Nc0idRnO4PrZveY44fmKlTZGU
MDvbe49LfSes+FeFABWZe+3evzUHbKeR/WU4/
gKaV0Qns6dQsudRqhbfwtmGv8XKQcqdIEZp3R4t1W/
dNx66eHjJaN8U4a+Hqmm+vNWGzLyI/
SLyqlwUsBUWCxlUsbnkAPYWh3EXcQtjxKVvunnlHy7v+2egRK5w1m
Wwe4AYWzhbOrW9WHiBMWhT7R6adSq/
PX6mei+KMdauqA2VUAuPuknRh5ZR6XESVME5W0jM4BiRTex1pV
QVqJzF9CQOeh8yPKZOMw3Z1Gp3vlYrfqAdD6ixj/
YXfIxAz21+7c7MPC/yM9K2IXD06LPTV6dRAlVWAJJA3zHc/
oIybYXPa7+TxyLoDca30vqLdRyhMs1eM8KSmRVonPRqDuk7qT90+Pj
4RCmkFG3p8oGtCHp4WHp040iyiZGc2J/
4ScmkBJCT3sWIlTC2lSIKFTKWnCJe0qWipDoE8LgMMHfvtlpjV28L7
DqTtBMY3wdFaqi1GtSDZ3PRVFzpzOlh5zPofwe7x2PFDCGuBldhakp+
1c6A28Br6TBxVRcRw/tGbvIVR+ockKCfA3U+8V+Jsd2ymo2g0WlT/
AAU82rN+8SPkZs8H+HKdOiqV6jK2MAXILAJbvpe+7Xyi/
jbnIQja57FUVFJsxExaYnDGjWJGIogmkTr2gX7SX5NYHzsPGeczzX41
wmrTf7LZ0IV8oJOYXC1BbkwW9+o8RMGo2plEq4LJfBd2gWnC8qW
mHSof4CyjEUi2wY38splMfie2qvU/
ExIHhy+UTRiDcQ1KBoG3mx3BMLqHPdBBGhJBvfu2+h0m1xWmXV
KKkEKXKnXvKLkDTmF5c7TEwYGYMfsp328hsPU2HrPW8F4ZW7IV
Kgy2Be53tqL+GjGJKTjyiOV1TMDhGOQK1CrrSfY/
gbrbpt7Xiz4coxQ2uDa41B6EHoRYw/F8OQ7MFspYnTlfqOWsUFTa/
S0eLT5RlzyvIyIRTFVqQq1IysDiHzSRdq0kbkTaGJlHaBetBiqNST6dfXl
HCoBwCxAUEk7Aak+kep8KA/5tZKZ/
CL1XH8SrovqREDiKpXKgCqdwhFz/
ABG+Y+RhMFhKlw1RWVFOaxGVSBc6XsNSAPWTbGcWjuNwaUms
9TNcXAQa2/
ezaKfeanA+FBlasy2VV0BJYkm9sx0A2vtcaHpMxKBdmr17Cne5swJboi
258pscL4jmw2Lf7IGQIg2UZalh89+ZMFujSclH8iPAKJxmJRG2aorMO
QporEqOgsoX1j//
ABE4pnxgpqSFoALcbhzZmI8R3R6RH4P4ouE7bEEXZaeSmDsajkW9g
CT4CYZYsSzG5JLEnmTqSfWaqH23K2fQqPFazU6eMpt3goR2IUMSrE
EsoJup7vqOUrxvhNDilJ6+GAp4ynpWpbB7c/
Xk3ofAGCqDDoqALUY0icji62Vcx08WsfU9JoYA4XFMMRgnFDFKuq
i17EC6um1WnsDbXTkZKFuTOdTqTa6Pk1RSCVYEEEgg6EEaEEdZW
89L8cresHel2Vc6VAtzSq2+zVpsdfAqddBPPIkt4PQi7imcELTaUKSCKZ
8mjg8YqWJUNY5sp2Zx9nN+6uptzM9Zw7F1HwOKxFVizOMgOwC3C
qAOQuWng7z2HEMSKXDKdLnUKfU1D+UjldbV8s580OvyzPp8bOgdc
y5QDtmvzIPMbaGIcQ7P7VJu6funRlPlzHlETUgTUl44knaHjhSdoZWrL
9vE884zytD7Bhq87ESZIaG9tDz1ZUNA5oSkCTYbmBm2JDeGQfbZcw
+6u+duQtzUc/
ab3BeHZmAqENUrEd062UakkeA5bbegeDUUF2zXCJd6luWtlQH11jPA
cSS2JxTX/Z0SEv8AdzaIvyt6mcmSTadHJN7r/
Bk8Yxxeo6qx7NSVVRtlB0NvGwMVpYkrTqINnyX/
AJST+kEBYTQ4Nw8VCzubU6Yzv1YDXKPMAy/
EY8luEuSuMpZaKJzDZn/
jdQQLeC5fUmDwNMM6Kdiyg+V9Z7bA8Nw2NpVBlKOQatIlySrsFzi3
Nc1veeIp3B10IO3QjeIp7hVNTTSNLE4/
NiTUGwDAfwKrfXU+s88jMrBlYqwNwykgg9QRtNENa+m6ke4t+cUK
R4xoMUkqNHF/
EFavTNLE2qjdahAFVGGxDD7Q5EHe+8zaSSoWHSGSHSSXBV6cVcT
QcRKqIqQYsXZps/EmMzdjTB0Skh/mZQT8ssxyJ0gkwvGm0/
gdxTafwVJnBLZZW0okMQzk7O2hMVInIYJJNYu4qZdDbX+9dDKKI9
wumDUBb7KAu3kutvU2HrFk6QZuka2O/
Y4dKP36hz1PAcl+nsYOnicmEamN6tbX+Cmqn/
yIijGpXqFgCST6ActeU0P8kfJn7SnlUNmsWYi2rW0sx8LySiq+rvs41S4b
5MnKToNT0Gs06l6eFCA3aq+uU3uq20031C7eMSz5j2dMWzafvN5nkP
Aaec9hwzhH+HHbVyP2S5U00AAu7a8yxIHgPGNNW0jZJJUJ8JSqtbDl
NkT9ojHK2VrqxCnew19PGKfFVDJiXtaz2fTa50b3IJ9Y7xbEGtgqOKW
6utVtQdVuSN/
+2Aq8Wp4mmqYgWrDRawFh4Bx0PXlIQj9W5flMWN3f+GYNSAjFZS
NDvtFyJ0xLopCpB2hVE0hrOsYrUEbcRciCIEwGWQJDFZZVlBtwLs5
DSjSJL5IGxN5nmnIEjjU5BSiORt4FaUkdWlJBuF3mYFjOGIAa+oNhlG
hNjffkNBArC00JICi5JAA5knQCUkVk7Ru8Gw5xL5WtTw9MZ6mXugL
0J5sbc/
EwtfinbPWCjLSFBlpINAqplO3Uhbn+kHxnEijSGDpm5BzV2H3qmndvz
A/LzmPw+g1SoqJuTYnkFOjE+FrycI29xzKKdvwN/
DtMGupOwuSegtqfa/
qRNz494oXFNUAWm2pA55bZdeY1v526CaGB+HsPWweING6lLrnzX
NQooY/y309DPH8QxgqUMPbcBg3mLAfKx9Zp7lJV0zL65p/
B6L4QHbYLEYc8muPDMth81Mz+CcF7WjXxFRitKgq5soBZ3qHKiLf
Qa7k7dDJ8EYsJXKHaohX+Ze8v0YesbwnE+w/
xeGZc9GscrAHKysjlqbqSCNOh38JOP05JJ+R1xka/
yZz4JamQYcu7lXaojZQaYTUkve2XKCcxtArwLEligotcdne5UC9X/
lAMTlYtfu2JvynpG+K7CmgpHIuFq4VyWGeoKoF6m1gwsLA300vKv8
a5rI9E9mhwrUwrAPfCfZDEixD636crzoVDrb8mb8O/
CtSuWNQNSQU67qxygs9Ad9cjHMQDoSBYHTeYtMaT11P46DMtSrQ
JqKmLpjJUCIVxb5zcFCbqSQOs8pSXSLNmlVcHGWBKxpxARYiWCy
zqiXMgEoayyQkradvM0KdtLpTkQRmkklLgRsi05yMASSdkrPNqI7han
ZDtQe9qKfgeb+gOnifCJzf4bTpYdRWrDPVAvTonZL6q9Q8t7hd9b26X
yOkejk4RWhwdUQVcUzgvqlBBetU/ea98i+Jl+P4qlh/
2dJSjsgzAWOS5NyTYEuVtvt6mbXwo64jFZ3uf2bVO99qqykLnI2VAW
sqjp4Txvxe18ZWtoA9tPIX+ZJiwjJu2Qim57We2/
wCGGPBw+MU27ppsB0VgU36d0e8+dUW0Avp/6/
QR74c4s2HarbapQemR42zKR4gqPeIUFlX2WjDbJv5PZYH4ZY4H/
MaNbMabAvRKWZQHK582Y3W6nkNAZo1fh4VMLW4iauVc4tSCZm
OdgoJbMABmJ66C8J8FcVp4f/
DpWdOwrUa9CuodGKB6jMjOoJK789sxjmHx1N+F4xM6KXr0jRotUQ
P2NLs1AtffKnqb9ZOcU3ZpRjdnjquHbKHKsFOzFTlPk2x2gX4fV/
6VTlfuNz0XlzO3WfR+L8Uwx/
xrh0NGrg6NOhTBFxUUWC9nupQ3NyBb1i3xJxxu1wSUsUvZdjhkrBaq
FM9NwzZ9dCLDWZJIntS8nzupg6ii5pOBfLcowGb8NyN/
CanEuFdlUKUmasoRGLilUTKWFyCrC4trrPb/ABRxSnVpcVUYim/
aVsO2HXtkN1QU85pgtpax+cdxXF6P+MxdVcTSs/
DRSRhWTvVhsoOb7Wh/
szSSY+1fJ8xqYaoGCGm4c7IVYMellteLVqDqbOjKejKV+s+r4PECvUw
606lKo54S9Gq3aqaivZQQHue/
c89PtazzPxxg67VKKVQlJKWFy0mesrCqKNg9iunaEkDL4DWaKpCuF
KzxeWS00qfDblB2tEZ0apc1LBcubuPp3XOXQeI6xerhrIj5kOcN3Va7pl
Nu+v3b7jqIUyQtLAS2WWVI1gL0hHKYi9NYzTnPNk5hBJOXnZKyZ5
Wm8Zpa9+oSRfa+rt0/U/0idEddgLky71b+AGgHID++c7qPXPV/
AVa+LqFtzQe3IaMlgByAA28J5zjrh8RWcbGo1vIGwPyhOC8RNCsKnR
XH/
cpA+doipmRNQrI5AxTjFNJxRDoJgykGw6azXw+HiGEXWeiwdPSRmc
0nZn1qEU7M30mvxFgg5E9DMWrjL/
8Axj3b9ZJzSPV0Po+XUpTb2xfn+BVwrdB7j6Xl2wpG4tFdNCBr/
Fp7f1jNHG1F0JFuh/ST9z5PXn/
xuDX0ZHf5X8CYfEPSzZLWdcjqyqyutwbMrAg6gH0gK+IZ8oa2VbhV
VVVFBN2sqgAXOpO5jnbo4sSFbkRt66ROpTKmxlsbtcHz/
qHp+bRyqfT6a6YMiDhTBmPR5yOqIZEgljVIQWCTOqkIFhFErUkpErB
l5IFmkiUNR5kwZeWqGBneeqEDy6GBWGSYWQxTMMpgFhkExGQ/
gjrPR4aoFGpA8NZg8PoG80OIYpA6o11IysW3GsjlTStHq+j6TS6nJKOd
v8eP2MYumrvrf7Og0F7X0mTVSnfS+njcRzi4OXNTa7Lr3TrbqBMg1gx
zC2t8ynTffL+k5WrPtmseGKxQXCXH6JVPRgvqbfrL0su4e58oUYBH1z
f91jra14BOEZD9q/gu/tCkmuybjljLdt4/
Yeib1AnPfTpvNMkEhTYi2n00PvMjP2bZicz2y5FN7DxI20sNIfA1XqVd
em2wAHKbbt6GjOGVe3linfhhsXhyviDsfy84m818dorC/
Ty3mNUM6oPcj4L1jQw0mqePG+Hyvxfg6pjVKpM4vLLWmkjy3GzW
WrKPUiK1oZWvItE9lHHaSEyyQDWeWcyhE6TJediPSZ1RGKaSlFJpY
bD3hSJyYKlRvNTBYC8bwPD78p6TA8PA3l4YrISkLcM4b4TJ+NsFke
m/
4wVPmu3yPyntqKgRXj3DlxNE09Aw7yN0Ybeh2PnDmwboNI6dBn9n
Mpvo+X4TF9m/
2A3MXJH0M0mxFCobm1NjvcZlPmOXpMzGUGpsUdbOpsb7jw8ucXSt
1nluJ9jj1W1U+U+jVqLTG59ab3HqrbQNQpbu1X8so/JosB/
dozh67r9nKP5RFqiqzRlw+AvD6IVr9nUcfiNl/
wBP9Y8oqahECX37wznzP5CJYqrn1JIPPpf8ppcE+HmqJ2zk5Ncovq1tP
QXhjCU3wCerxaaNt8FEBykHfn57xarSmji6YXQaCJl51Rx7FR8d6hq3q
87yVx0v0ZtVDAkzSqqIlVWZo5SUmj9CZqNHcO8i0SmjRUTkqtSdi0c/
J42WUSl4egJ1nqD2CoXnpOHYOZGAIE2UxoAlYJEpG5h0VYZ8cBPM
VeK+MUbiJPOX9xIk4nrhxCNYfFTx+GxJJm1hqhjrJYVEzfjXAnOK41
DAKfBhtfzFvaeQ7Ozec+n1KqupQjMCNVOlx/
fOeP41wrI6dmlQg3JDZSV8yp2nFqMXO6J7Wk1cdihPx0ZNoRJ10I3BH
mLRvCcNqvbKht1Og9zOVJvhHpb4x5bALTLEKouSQAPE6CfWVwK0
6CUl2RAPM8z73nkuCcPSg2c95+vIeX6z0qcRuLEzt08FFc9s8P1HVLK1
GPSPKcbo2Jnmqtaxnu+L0gw0nheKYexMGRUzghyD/
wATAVasSd5XtZEqoDPaRihUmerw9NoriLKJrpW0nIitWSDaR2GOTC
0ntAmcBlkdpqU8XaR8cZl5jITGugbR44kmFo1DM9DGqDQNgcbN7Am
eiwrWE83w47TezWWFToTadxWNtFqWMNQOL7Lf5iZfEa8V4bjMpfx
Fv9LH62gnNtMziM01avUsScikE/
vG+g+p9J7PDAZQBtaeOwjZfTX+ZhoPbWeg4fjOpFuWmv8AWShKqZ
m+S2MciIjiJB3jXEagInmcZV1jbmCSPR/
5ncbzD4nVBmcuMIgquJvGcrBGIrXOsFLVGvKRaLI6DCq8ATIrTUBo
ZFSdi+aSEG0GwlLQpEqVmHKATolpLQjHRCU21grxrhuF7Vwt7Dcnn
a428dYrdDQxuclGPbNPhjkmw8/
ADxmtUxagWHe9bCUUIt6a2Att18fEzMasADmBNiQQPCc08sn9p9Hp/
S8OBXmqT/
8AENPVvuAPDKv1MBRoIW7uYE6a2tuIKhVvqFb11j2HqprdRvYdS0S
5JnVLS6fPGpJGaKxLE+J06dPlNPC4m0vU4ZTLG2YG1zqLX9RM2mT
tv5TpjJS6PktbocullU/
PRqYjF3ExsVUvG6uHqZc1tPMX9t5k1KkajkXJRmlCZxjKkzFUjs5JeS
MMSQySTGOSTskxixlTO3lGaYxCZCZWQmYayTQ4HVy1fHKQPcG3
ymdebWA4MHorVzlXLNbYrobDxGxmcdyofFm9rJHJ8MfxChyCyldOQ
JB6HTURRK5BscjcgWuDYdbjX1gnSops9wfxA3Vh+RhKlc2tfTxsx+c5
XBx4Z9LDVwzLfF0NGqzCwK/y/
qbAQJdKfeL3YbAC6r9NYgwgla5tygUQz1d/
scxnEXYXLcrADQa+HrD8NvYam/PQAW0tr13mRizqB/
d5r8HBJvyHXrOnHGj5z1DP7uS76NajSAOYm5HsOs8riGBZsu1zbyvpN
rimMspRdzofATAMeZxQRycMtKmIUKkzgM40qYwS+aS8redBmMWv
JK3kmMEYwcLlubdYKZGTOSSSCExyer+HcSGw5p/eRifIMbg/
WeWjGBxjUnzr5EcmHMGFOhZK0epaxBHIjWZFaiV038ZqUcSjrmXnu
Oh5iL1SL3tax08+UWUbG0+olhdeDMKyoTKua3Ujx5TRxLZatwBZrEi
wOU7G3Scx9VwSgYhb7DbWTjH5OvJrW1UVRiVAdCb6k8vnNPBVS
EtFKYsWbXoL8z4/3zhUeUOFna8SMaqvFTAwoko0uRKPAYE0oTLm
UIjDol5aVnRCwtFgZJJIBaHMMt3HqfYExUiaeCpaVH6I4HmUb9RM91
sbekCfItlEGo85US9py0ISSTtpJgjmBrlDpsdCJrLUFs2hB/
paYmFUkgDU975CO4em6GzDuG17EEbixuNoLJtWXq1NVB3Jax8NPz
gMVUIzEnUkHz3/AKR7A8JeqqszZRmbXc6ZRp7GC4pgiauQdAPb/
wBiK+7CvgrgME7KahIAIOp3HJTbpeW/ypz9gq/h9k+x/
WcxjGmMiki9RU3O1MXf0zP8pXBVa7aoduZCjXz6wxt8gditekymzqVP
Q/lA3mjxOrXawqi9joQBa/
mJn1Ftp4awtq6MmVMq0IyW308Ofty9ZQmYYCRK26awz78thyHQSrO
3U+V4bCVprqLjTU+wJ/KDWGor9onkh+ZC/wC6G7DKqsd7XHz/
AE+c1hsVnZwSQWaz1ODwZNO34qd/Wo6Bf9KmZGIpak+N/
djb5WnqUOVXufsLSUeYBH1ImTicGRTcW72VD/KHt/
WcuPLbZNGH2fey+fyBgpoVKRNToSbe9MH84KjhLkM3dS9yT0BtoO
ZM6dyGFHH0vLJT1IJtYanpqIXH0bMfFmHtb9YTEUyGcW1uxA/
m0hsI1wpQrhwQVCtpsdV3tz3mnXVQhtobEkfzZRp5xM4YKzKBe1Oof
nTt+nvGQwz5DqOypHbUFnW/
1kXka6FaLYXFmkqDUgnUdLlVv4a54zhaqVqxddlAzXBvufracrUkYUw
B3rBrbaKxPrq0rwjCFDUA5si6/hXeRlm/
62vILRm8YSzqo1a3zc5mPzt6TRwmHyIg521/
d6k9TCrhA1Q1G3vb00LemtvGGxII052ufEm5Vff6SmPKuEB9GaQHcq
L8r+Q118Zj1kPaG+n3h+X9+E36arTQksAcxuxNrtz335+0VxFEM2YbA
XU+Ztb3jOVcvyKnRgqb6nzPn/
7hKNLMHPQfXSHyG5UC92Olr6C+g8zaaWBwVlYkc1Ph3d9Oep94znS
KJmNi6JD2t4ewAPzvJTobnoT/
AKb3PuAPWa+HwgarULXKoovp97Rj9DFlp3os/
wCI5V8i1v8AaPeD3EGwOBwt1fqVFvNiSP8AxENximM+QbBLDxOdr
kf/
AF2m2uEVVZRulj5lVNvYj5mIUaXeDHalTbXcFkNQDzJOY+hiRyqTv
4NZ551y6Wuefgek5NinSp0xaroxudVZjuRqRoDptJK7g2blRbKb7s4J9tB
7gStRCcx5ZBa/
XMco8RoPnF8Nis9NX6nXwPX0jai4Ck8hrzupBGnpPOtxfPySToWTDL
qQNQS2YjUBWAtby+giPFaJJTcaWt+8wCix56mblgWb95c23MgD6ge0
HTpXIuLd+4va1rE3A9B7SkM3NjJmLjcPY3tmbtDbTQbH1/
rC0cH+1DWuhzsSfO4+nzmlxOlcKbaX/
wB1xfxvYTnD001At9m38N7xve+ixrK1aIcEc9c3iMxJF/
5PnC06QHfvdiqoT/CTfT1+U7nsPBifYkk/M/
KDw72Pz9+k55TdcCORMXS75PJVsP5iD+kPhH0153+epgala+oFxcano
B+tvaCpVrWBP93tA7lChWzRXfw6fP8AIQNat3rfhFydN+nhtvOUqh/
r1hTSW19wfbTkesSEnF8mTMGopamLAC9QakFiTfKCM17nQwuIfIoS
9yDc33t/+vpNE01zAnqPIbDMPAXJi1TDXfOdVF9PxG/
2T6ge061lUh+0XoYZUTOVuxBtpr3iNvHbWcZbg/
hy2FjoTmNz47LrGbl2tfYa8h3rAfUyYeiEQKdQii/mMu/
jpaR9ylb7N0gdcBQy83Y3PMDQMT85Q0LZFPLLfT733j+fnCslyb+Z99
ZWtsLHfnz6QKbFbIznvHUZtup028BJQTIip0BubaAksW+pnEOgsPxb62
A6f31naBLc7DTTnc9bc5raRkyHDo9iQNrd4XOkkx+M8SFOpkFzZRex2
PQ+P6yS0cGWStMO2Ql8LVWzMt+7a9vcT0NM7ea/MSSR9T94Z/
cMMdfIsB5WvC0Rq3k3zZpJJxig8SLqt/
8AqL8iD+Zg0PdXyf8A3TskaP2jeCvFhbbpA/
eH8IkkmX2E2CxJ0ty1nKI1X+WcklF9oB9F1A5EgHyO8PQW1l5AEW8
rzskhPoZC1+7fxt7EQlbTQfhLepI1kkm8hQIm1NrdR9Y3UFs1uo+pkkiy/
wB/wLEwf2d/L+/mZWsdaY5ZV+YJP1nJJVf0HgM51T+I/wB/
KDrnJTcroQfoLiSSNDtfsKPAO5JJJuTqZJJJ7J0H/9k=" alt="click here"
height="300" width="300" title="clickherebutton" loading="lazy">

<!-- creating link and link opens in new tab -->


<a href="[Link]" rel="list" target="_top" title="listpagelist">click
here for link</a>
<!-- creating image as link -->
<a href="[Link]">click on this to go to>
<img src="[Link]" alt="image link">

</a>
<!-- link to an email address -->
<a href="[Link] download>send
mail</a>
<!-- button as link -->
<button onclick="[Link]='[Link]'">HTML
Lists</button>
<!-- <img src="[Link]
alt="MSDS_logo"> -->
</body>
</html>
Note: link to find coordinates of an image
[Link]
[Link]

Complex image Maps


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>

<img src="[Link]" alt="complex_image" usemap="#shapemap">

<map name="shapemap">

<area shape="circle" coords="91,285,85" title="Circle"


href="[Link]
<area shape="rect" coords="580,363,421,363" alt="Ractangle"
href="[Link]
<area shape="poly" coords="224,203,218,366,380,368" title=""
href="[Link]

</map>

</body>
</html>
Table and Nested Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Demonstration of nested table</title>
<style>
table{
width: 50%;

}
td,th{
border: 2px solid blue;
padding: 10px;
text-align: center;
}
th{
background-color: aqua;
}
</style>

</head>
<body>
<h1>simple table</h1>
<table>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
</tr>
<tr>
<td>pallavi</td>
<td>k</td>
<td>28</td>
</tr>
<tr>
<td>priyanka</td>
<td>pal</td>
<td>29</td>
</tr>
<tr>
<td>Divya</td>
<td>G</td>
<td>28</td>
</tr>

</table>
<h1>Nested Table</h1>
<table>
<tr>
<th>Category</th>
<th>Details</th>
</tr>
<tr>
<td>Electronics</td>
<td>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Smartphone</td>
<td>$500</td>
</tr>
<tr>
<td>Laptop</td>
<td>$1000</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Furniture</td>
<td>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Sofa</td>
<td>$300</td>
</tr>
<tr>
<td>Table</td>
<td>$150</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Embedding a web Page


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Embedding a Web Page</title>
</head>
<body>
<h1>Embedding a Google Map</h1>
<iframe src="[Link]" width="300" height="300">list</iframe>
</body>
</html>

Setting and Modifying Field Properties in Web Applications


<html>
<head>
<title> CompleteForm</title>
</head>
<body>
<h1>Registration Form</h1>
<form>

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


<!-- <label for="fname">First name:</label><br> -->
<input type="text" id="lname" name="lname">
<label for="lname">Last name:</label><br>
<input type="password" id="password" name="password"
minlength="8" required> <br>
<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="Html">
<label for="html">CSS</label><br>
<input type="radio" id="python" name="fav_language" value="Html">
<label for="html">Python</label><br>
<input type="checkbox" name="vehical1" id="vehical1">
<label for="vehical1">i have a car</label>
<input type="checkbox" name="vehical2" id="vehical2">
<label for="vehical2">i have a bike</label>
<input type="checkbox" name="vehical3" id="vehical3">
<label for="vehical3">i have a boat</label>
<select name="country" id="country" required>
<option value="">select your country</option>
<option value="us">united states</option>
<option value="ca">canada</option>
<option value="uk">united Kingdom</option>
<textarea name="comments" id="comments" rows="4" cols="50"
placeholder="Enter your comments"></textarea>
</select>
<input type="submit" value="submit">

</form>
</body>
</html>
CSS
Ways to insert CSS

HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<!-- External CSS -->
<link rel="stylesheet" href="[Link]">
<!-- internal CSS -->
<style>
h2{
text-align:center;
color:rgb(116, 8, 92)
}
</style>
</head>
<body>
<h2>this is second heading</h2>
<h1>this is first heading</h1>
<!-- inline CSS -->
<p style="color: blue ; font-family: 'Segoe UI', Tahoma, Geneva,
Verdana, sans-serif; font-size: large;">this is the paragraph</p>
</body>
</html>

CSS code([Link])
body{
background-color: rgb(43, 226, 73);
}
h1 {
color: rgb(104, 10, 10);
text-align: center;
}
Simple Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Selectors</title>
<style>
/* universal Selector */
*{
text-align: center;
color: brown;
}
/* element Selector */
p{
color: blue;
text-align: right;
}
/* id selector */
#para1{
color: black;
text-align: center;
font-size: x-large;
}
/* class selector */
.center{
text-align: left;
color:blueviolet;
}
.large{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<!-- element selector -->
<p>This is a paragraph tag</p>
<!-- id selector -->
<p id="para1">Hello World</p>
<!-- class selector -->
<h1 class="center large">This is class selector heading</h1>

</body>
</html>
Contextual Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Contextual Selectors</title>
<style>
/* descendent selector */
h1 em{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: blue;
}
h2 b em{
color: rgb(214, 226, 43);
}
/* child Selector */
h3 > b{
color:brown
}
/* adjacent selector */
p+h3{
color: aqua;
font-size: xx-large;
}
/* general sibling selector */
h3~h4{
text-align: center;
color: blueviolet;
}
</style>
</head>
<body>
<!-- Descendent Selector -->
<h1>this is a <em>heading</em>tag</h1>
<h2>this is a <b>heading <em>tag</em>used to bold</b></h2>
<hr><hr>
<!-- Child Selector -->
<h3>this is a <b>heading <em>tag</em>used to bold</b></h3>
<hr><hr>
<!-- Adjacent Sibling Selector -->
<p>This is a paragraph1</p>
<h3>this is heading 4</h3>
<p>this is paragraph2</p>
<h3>this is another heading1</h3>
<hr><hr>
<!-- General Sibling Selector -->
<h4>This is a heading 4</h4>
<h3>This is another heading4</h3>
<h4>This is a heading 4</h4>

</body>
</html>
CSS Properties
1. Color and Background Property
Background Property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Background</title>
<style>
/* shorthand property called background */
body {
background: #ffffff url("img_tree.png") no-repeat right top;

body {
/* Background image */
background-image:
url("[Link]
cs=srgb&dl=[Link]&fm=jpg");
/* Background Repeat */
background-repeat: repeat;
/* background position */
background-position: right top;
/* Background attacment-Gives scrolling effect */
background-attachment: ;

</style>
</head>
<body>
<!-- Background color with opacity -->
<h1 style="background-color: green; opacity: 1;">This is a heading 1
tag</h1>
<h1 style="background-color: green; opacity: 0.6;">This is a heading
1 tag</h1>
<h1 style="background-color: green; opacity: 0.3;">This is a heading
1 tag</h1>
<h1 style="background-color: green; opacity: 0.1;">This is a heading
1 tag</h1>
<p>The background-image scrolls. Try to scroll down the page.</p>
<hr><hr>
/* we need more content to scroll the background image */
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
</body>
</html>

Color Property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Properties of CSS</title>
</head>
<body>
<!-- Color Properties -->
<!-- Background color -->
<h1 style="background-color:Tomato;">Tomato</h1>
<!-- Text color -->
<h2 style="background-color: bisque; color: brown;"> this is the
text color text</h2>
<!-- Border color -->
<h2 style="border: 2px solid violet;">check the border</h2>
<hr><hr>
<!-- Css color values -->
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99,
71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%,
64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>


<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99,
71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%,
64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be


specified using RGB, HEX, HSL, or even transparent colors using RGBA or
HSLA color values.</p>

</body>
</html>

2. Font Property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>font properties</title>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>
3. Text Property
!<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: rgb(248, 28, 28);
color: white;
text-decoration: wavy;
}

div {
background-color: blue;
color: white;
text-decoration: double;

}
</style>
<title>text property</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>

</body>
</html>

4. Box Model Property


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Box model</title>
<style>
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<!-- Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent -->
<img src="[Link]
[Link]?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="350"
height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is
also 350px. The total height of this element is 80px.</div>

</body>
</html>

5. Border Property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Border Properties</title>
<style>
h2 {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
/* borderstyles and border width(Top Left Bottom Right)*/
[Link] {border-style: dotted; border-width: 1px 5px 10px 15px;}
/* border color(Top Left Bottom Right) */
[Link] {border-style: dashed; border-color: red green blue;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<!-- Border individual sides -->
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</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="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>
CSS Absolute and Relative Positioning Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position property</title>
<style>
[Link] {
position: static;
border: 3px solid #73AD21;
}
[Link] {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
[Link] {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
[Link] {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

[Link] {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
[Link] {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>
<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;


<div class="absolute">This div element has position: absolute;</div>
</div>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its
scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.</p>
</div>

</body>
</html>

Z-Indexing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-index property</title>
<style>
img {
position: absolute;
left: 20px;
top: 0px;
z-index: -1;
}
/* Here we see that an element with greater stack order is always above an element with a
lower stack order: */
.container {
position: relative;
}

.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}

.gray-box {
position: absolute;
z-index: 3; /* gray box will be above both green and black box */
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}

.green-box {
position: absolute;
z-index: 2; /* green box will be above black box */
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="[Link]
cs=srgb&dl=[Link]&fm=jpg" height="200" width="200">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
<h1>Z-index Example</h1>

<p>An element with greater stack order is always above an element with a lower stack order.</p>

<div class="container">
<div class="black-box">Black box (z-index: 1)</div>
<div class="gray-box">Gray box (z-index: 3)</div>
<div class="green-box">Green box (z-index: 2)</div>
</div>

</body>
</html>
Animating Objects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s;
animation-fill-mode: forwards;
}
h1 {
width: 250px;
height: 100px;
background-color: red;
animation-name: example2;
animation-duration: 4s;
position: relative;
animation-delay: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}
p{
/* width: 300px; */
height: 100px;
background-color: red;
animation-name: example1;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
@keyframes example2 {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

@keyframes example1 {
from {background-color: red;}
to {background-color: yellow;}
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>


<p>The animation-timing-function property specifies the speed curve of the animation. The
following example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

You might also like