Scribd
Upload
91 views

82 Govind2

The document provides instructions for 10 assignments on HTML, CSS, and JavaScript. The assignments include tasks like creating paragraphs and headings with different styling properties applied like borders, backgrounds, font sizes, etc. and observing the results. The last assignment involves displaying an image and applying styles on mouseover.

Uploaded by

Tanuj Chaudhari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
91 views

82 Govind2

The document provides instructions for 10 assignments on HTML, CSS, and JavaScript. The assignments include tasks like creating paragraphs and headings with different styling properties applied like borders, backgrounds, font sizes, etc. and observing the results. The last assignment involves displaying an image and applying styles on mouseover.

Uploaded by

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

MET IIT CDAC-ATC Nashik

Batch PGDAC SEP-2023


Lab Assignments
Date : 22-Nov-2023
Module Name: Web Technology

Due Date 26-Nov-2023

HTML - CSS - JavaScript


82_Govind Dudhate
---------------------------
1) create a para , apply border solid , change the dimension to 100X100.

<html>

<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla eius
repellat sequi doloremque aliquam
praesentium molestiae rem laboriosam, deserunt dolorum facere quidem ad
expedita officiis autem quo! Doloribus,
dolores dicta?
</p>
<style>
p{
border: 1px solid;
dimensions:100 * 100;
}
</style>
</body>

</html>

-----------------------------------------------------------------------------------
----------------------
2) create a para , apply border dashed , on mouse over show background color: grey.

<html>

<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero explicabo
sapiente enim nesciunt obcaecati!
Asperiores laboriosam, inventore, a quia quisquam nostrum nemo eius eveniet
quo tenetur beatae magni, quibusdam
facere?
</p >
<style>
p {
border: dashed;
padding: 10px;

}
p:hover{
background-color: grey;
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
----------------------
3) create a para & bold tag , apply background color to both .
( note down the diff. between para & bold . which one block element & inline
element?? )

<!DOCTYPE html>
<title>This a paragraph</title>
<body>
<p>This is a <b>CDAC</b>institute in nashik.</p>

<style>
p{
background-color: lightgrey;
padding: 10px;
}
b{
background-color: aquamarine;
}
</style>

</body>
-----------------------------------------------------------------------------------
-----------------------------
4) create a h1 tag apply font size 40px , with background any color & change its
font to medium .

<!DOCTYPE html>
<title>This is Q4</title>
<body>
<h1>I love Nagpur City</h1>

<style>
h1{
background-color: crimson;
padding: 10px;
font-size: 40px;
font-weight: medium;
padding: 10px;
text-align: center;

}
</style>
</body>

-----------------------------------------------------------------------------------
-----------------------------
5) create underline tag and remove its underline using css property.

<!DOCTYPE html>
<title>underline</title>
<body>
<p>This is <u><b>UNDERLINE</b></u> tag.</p>
<p class="no-underline">This is a paragraph without underline.</p>

<style>
p.no-underline{
text-decoration: none;
}
u{
text-decoration: underline;
}
b{
background-color: bisque;
}

</style>

</body>

-----------------------------------------------------------------------------------
----------------------------
6) create a para with dummy text & align its content with 4 diff. values
(left,center,justify,right : see the result one by one on browser)

<!DOCTYPE html>
<title>Dumy</title>

<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate laborum
natus ipsam. Quidem aliquid error
voluptatibus voluptates officiis sequi inventore id nemo facere quas
laborum sapiente, fuga voluptas
perspiciatis rem?
</p>

<style>
p{
/* text-align: center; */
/* text-align: left; */
/* text-align: justify; */
text-align: right;
}

</style>
</body>

-----------------------------------------------------------------------------------
----------------------------
7) create a para with dummy text & apply indent property with 100px value & see the
result on browser.

<html>
<title>Dummy text</title>

<body>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem nam
deserunt dignissimos praesentium quis
facere atque quasi repellendus, ipsum doloribus, corrupti dolorem ea libero
ratione ab commodi quod officiis
veritatis.
</p>

<style>
p{
text-indent: 100px;
}
</style>

</body>

</html>

-----------------------------------------------------------------------------------
-------------------------------
8) create a para with dummy text & apply decoration property with
( underline,overline,line-through & none) . see the result.

<html>
<title>paragraph</title>

<body>

<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur
dolorum illo quos deleniti. Commodi
nesciunt, debitis voluptate praesentium, deleniti tenetur, cumque non
soluta fuga dolorem nulla maxime
repellendus ex alias?F
</p>

<style>
p{
/* text-decoration: underline; */
/* text-decoration: overline; */
/* text-decoration: line-through; */
text-decoration: none;
}
</style>

</body>
</html>
-----------------------------------------------------------------------------------
--------------------------------------------------
9) create an anchor tag , change its color to red & remove its underline.
apply title tag , href with google page link.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

a {
color: red;
text-decoration: none;
}
</style>
<title>Red Anchor Tag Example</title>
</head>
<body>

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


</body>
</html>

-----------------------------------------------------------------------------------
------------------------------------------------------

10) show any image on browser with dimension 200X200 . apply border radius with
10px. on mouse over show image in circle format (i.e 50% border radius).

<!DOCTYPE html>

<head>

<title>Image Demo</title>
<style>
.image-container {
width: 200px;
height: 200px;
border-radius: 10px;
overflow: hidden;
position: relative;
}

.image {
width: 100%;
height: 100%;
object-fit: cover;
transition: border-radius 0.3s ease-in-out;
}
.image-container:hover .image {
border-radius: 50%;
}
</style>
</head>

<body>

<div class="image-container">
<img class="image"

src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRY
PDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/
RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc
3Nzc3Nzc3Nzc3N//AABEIAKoA/wMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAADAQIEBQYABwj/
xAA/
EAABAwMDAgMGAwYFAgcAAAABAAIDBBEhBRIxQVETImEGMnGBkaEHFPAVI0JSscEzYtHh8XLCJDQ1Q1Nzsv/
EABoBAAMBAQEBAAAAAAAAAAAAAAABAgMEBQb/
xAAhEQACAgMAAgMBAQAAAAAAAAAAAQIRAxIhEzEEQVFhIv/
aAAwDAQACEQMRAD8A9KYUdpQ2s9EVrVIDgU8JGgIgsgBFwTrLgmAgS2uue4MBcSAADcnosJq/
4n6XSymKghfWEEgvDtjcdu6PYm6N5ZcAvPIvxU08ECo06pbc8xyNd/
VWrPxF0N7GmM1DnHlnhgFv1KKYWjY2Q5TtF1V6T7S6ZqjtlPO5sn8kzdh/
3RtSlLWusRwpbopKys1mvZCPfWF1Wq8d528K91KLx929xN+FTig3vLSeFGxsolG1vmKPewFnZVhPReGDgKl
r5hC5guOUWOgVfUSsvt5U72dimkG53VBfGJ2lxI4U/
RHljdjTwbIsKNRAHRhrXFWtM8Dk3VXSMc8gm6tIacvdYJJktHVU922aE2hgd4oc7lWcem3ALgVJiovDOAqI
ZIpW2ajELomWARLLREUBISbEfaksgKAhqXai2XWQFAiwnhQ6yJ9sKwOMqNO+wN0rCjMVtO+cua7qs3X6E9r
tzRfK2dSQHF1lUVmowgbXDIKmy0jUh7By4J/iM/
mC8hd7fPPAenM9uXuFzuHzT6Lh68JmW5CUTRnhwXjknt7I33bn5psHt/M1/naQPRLocPamuaf4gl8p6/
ReTQfiJHgOc4H4KcPb+N8Mhgu+RrNwHr0T6PhI/FX2obQ0X7HpXn8zO0eMWn/
Db2+K8ekcCLNafkLqVrNa6o1DxZ3iWeQuklkPV3b0soBcXHr+v19VslSOaTthY3lnaxCc1/
AG71uUAG46fIcpwva/
rmxQCLGm1GqpXtfBM8Hm1yQtTp3tpXGERVEjpG2t58n6rDkn1x9k9kpaTZJpMabXo21Vrs7R4mXxngjp8Ut
J7QxF13uAJ7rLU9Y+M3Fj3BAyEWphjrI91LtinGdnR3+iyeP8OiOX9NXNq8c+4Nc0m3dZ7U377OuOVln1lR
TSObIC14NiClfqj3ixuQp0aL8iZsqefcA24sVpNDbE1p8oJXl0OoO3tIccLVaDrRaQ2/PdS0y4yTPRA94/
wwrnSyTtL1VaRLDLG0uIJIV8wxxjBGFCfRyRcwubtRRtcs9PrEVOLueLBJQe0tNUybGPaSPVaqRi4mksAus
EBlUxzQQQkfWRtGXBPYWocrrBAhrI5Dggou9p6p2FDrLrJnjMvbcnb290WKjiLqNNGDdHEje6j1crGNJcUm
x0VtZG0MdfKyVdQtkluN3KvptRjmmdExzcHukEDXNBuMrNyRpGNHzuJPUrjMRwSow3JHX7rqo5CT4t89Vwl
J5QGAkp9rIAkB+LqyikFLpwsf3s2SOzeAqB0h3taOpsrnU5xA8sYB+7aGNPwCEgbIUscj5mPcdobe9+Tjon
ksB27ic2NuVBdM6SUvdc9Bb9f5iiN487uub/
AETEkSmyAuDrD1t06EJwdewtfNiBnP8AugRuvfHJvb14KILG1znj5jhJlUPF/eDvW/
8AdOF7i4sc2bfr1CYHC1/jf4HkJwbtu0G/S/e3BSHQQdLknoLdf+VIheWkHF/
QqIHW9044+R4+9gitd8LngH9d/
wCqVjol1sMGpwiOQtZOMRyjFvQ+izEsL4JpIpWFsjDZy0bHHobNv0HT9H+vddXUsFeI/
wB4GTtG0ktvuHqUAZ+LKkNlfG5pY4ixUVt2Pc04INj8URzw3lJqyrNbpftZNRsaHkkBWcn4hXabBy89Moty
gveTwVPjRXlkvRptS9sKyqLmskIYeig6Tr9VRVrZvFNic5VE4m6QE37q9FRnu7tntVD7dbqMEyZsqPU/
xBqGPIaSR0s5ecRzyM4NvRDe97zcjKhYy3mbPTdC/
EOZpIqTb5rR0n4lU8kvh77HuTheHNDr8FP3SdAQjxxYllke01f4htiqWMD2+b1VgfbuNsQ8zSbX95eCfvSQ
bFSopKhvG5LxIryv8PYJfxFZE/
zPaB8VG1X8SIH0zmtfdxGLFeSTtmfcuBUV1wfN901iQnlZtdM9rqgVz5J5drCbgFaZnt/
TxgNMzXY6FeSXPdJc9Am8SBZZE0TeqY+UXUhunyfypr9PkvgFXsjKmDbP6pTP6qTBpUjrXBUluiOP8JS3iW
scitoR4upUzTx4rSfgM/2RqyUyyvceriVa02kGCVstiNoP9CqWVpBaH4Nk4yUvREouL6NbYAhuD3/
XyTyd3zx9Rj7oI5/X66IgBt9fryFQgrX3+HNvjgoweSbO5d5T6EcKOLAX/
hOeehTwLktzc82HDhwkykSPEt5iLG1/
lwUm+wIGdtxgXsRwhuuW3cQL3s2/1Tmv6swObnnacKRhBzeXytJtk9wiNkAAc1mTyScdighlrB3vG7Qb3yM
jKK19vMOD5rf/AKQMkNdIQN7sDAPcjn6iykRPsQQc9/
T9WUOI2AtcnjHwuCnB+PU+n69QkFDNS0+9SaiEeSbzEDo7qFGOnvf/
AAq+pCJGvjfe48wuPqnEsbjCzlNpmsIJrpQt0p5Hu/ZL+yXdir8StCaaht+ijySL8cCi/Y5JyCjs0XHCt/
Gbbom/mbcFG8h6QIEejNHP0spA0ePsEb83m90hqs3ujaQ6gK3SIQBgJ/
7LgH8LVHdWEHn7oTqt3f7oqRLlFE39mwDo1OFJTN6BVjqt38yA6seD7ydMneJcyU1OWnAWd1OiY2Qln9Ec1
x/
mUaeqEnJVRTTJm00QXxBoTWNaeSulkuTZB3ELYxNwGsHRK1rf5QhByJ0XL07OB49txgI4IAUSNOc42UMuLJ
W9vB4WHrPLPI08B5C1jHAgmR1mjJPosxqApn1Uz2SvILyeALLowI5vkO2iFezk9ge/
LAbcgn0yk8SNrv3bM9Ccrt73ZvzwOLLc5wzDGy13Fw4sMYP+ifd+3acXO11j16FBjIaBceU5t6dQitNutgf
KT6jj+32SKQ5ocHB4JJ5+nITwQL7eOh7tP6+yY17jlosTn4Ecp8A3u2hueLdLH/RJlLroeLmzc3PlJ/
lI4T23J3BuL7tv9QtVpHsgKuITyVRMbmjdtbtyrKo9ltHijIdM7fzua84K55fIxo6ofDyy9IwosMX9CfTlp
/
sjQeJLJanje93O1g+f9UfUaWLQqks1GGWdjh+4lb7kg5t8fT58cz9M1yoljMVNQsphsJY9zMbrjkcnF1W0p
K4IjxxhKsrILIp6V4EzPCu2+3qen9k17yeq1GnaF+2mukr6h0csVm3haACO2SVFr/
ZHUYqlrKCN1VE8+U3AcPjf+yNZfaJcoJ1Fmdc9yZuPdWOq6TW6S9sWoU7oXuF23IOPiDZV10hjt57ppJPVd
hKEC6Ns7ukO4IwIATHEIsWoAlxSG6KQF20FVZLRGN0NzXFTRD6LjD6I2FqVxjd2TTE49FZiH0XGK3RPYNSp
NOT0TTTH1Vx4Y7IbmZ4T3YtS6ZA5KWkFS97Qy9go+8Odhc1s66QoIAsUuCOEJ5yu37QSbWt0SaZSaHx7d1n
e7wQslWUrWVUzRgB5t9VpY5BI9ovZvJuqevYx9RJICLF5PyXRgTo5c7VlaG2wCl6WGL9e3VFMbWuy7rb7pp
kZHwcg3W5gIPMSbWHUfFcbfxO5x8COEJ84GG5xa6C55N7k+qBokOnAy3veyufZqmdUTCWUHafLHcWuFn4wH
Oz1W50ISafDEZNhjY3zRus2/U5sR9QfSyxyypUdPxYXPb8L/
WKv9k6MTGQ17RuA7+iodNfqeqObNU3iiLrsibz80rI6rWK51RVt20rXXihBxa+DfqthQUzIoN5aB8SvOeuO
P9PYUpTd+kMr9Lqa/
Ro6WOWEuDg4eIM3B6HpjF1l3UtTS1bmVNA6ms4AeYvZ8nIldrz49cdSsZNKGj3oTwegPp/
qp+sauTpExmj/
AMMcyC3pjvytcOWeNpfTOf5PxYZU5p9Ra6QaOmoRNU1ccfiOO3NuOefipFRX6ZQt8WZ83ly17y7nve30Xnm
vVkMOpRR0r/BnEMTXSusRD5GkhotYEkk35yqSbU6guuyRz4mnBe4uLj3dnN/
su9ps8nkTZ6o2h1eev1EavUVD9l2U0shds6YLul1RuoKmNjnOgdtYcnmwVI6oqppmBznvneLNa2wsDwAPkp
+m6xq1FWuhp9s+wEuhLt7SBk2Nz9lE4OuGmOcbqQR3OOOiQKfqNVR18cFZRQiHxWHxIx0cCogaCVlZq10Hl
dZSBG0C5Q37QcAIFQywSCyUlMumTQdrk4uCAClugYQvFkm8FBc6yQZyqJDFwshki6blNeUEs0fhHYoc22DL
n2v06qVNWMiDySH+l1Q1NZG+R0r23xgEXACyUbOmVIny1cTDYm1hfI4+Kp6zUJXvIZIGgcbXD6qHM8ySEkl
o6BMl8jdgNy7n0W8YGEp2K6pnB3eM7tnqhmolcbEk3THm7vskPlwtVwwa6c97z75KbylItb1SJhRy5K1IEA
StMax1dEH8N81u5W4pGfmAyM5PJusVpP8A5rf/ACC602i1boqtzjwRZc2f1Z2/F/Da0FFHb/
K1QtcbU1rjT0sxiiuL7OTbkeibRVRqpvDD9o/
id2V1TRxeHdmbfVedLj2fs9bj59FVpelQwM3vaG9XF2Sfiqz2rENVotZFSuBfE3f62Buf6KdrTtVke6Kghj
iZe3iSG/
0CqqbT62CJ5mkZIXX3kdQU4t2pMdbRcf4YjUKkVNfNPa4eevYAAf0TKZjp6mngO3LgLtN+e6jEFu1ru105r
zFK2RlgWm4twvYPnH7J1MRN+aqgWtu7a0noCc56YsoxlEFUJaVxBjN2H1XQeEKfZIA6zi63cFtvsUZ1H4fh
tDmPllttazpfhTXSvonxhgr6psb2uiftkBaQcn4KU0ZwVbaNpZ1E6nG2NgdFG1scjG2u5thb7/
dQ56Wejm8KpYWPH0WE5K6N4ReqZGkLgMIYa85Ut7brmMwpQ2iMGLvBUrw8pTGnYash7E97PKiujsnxx7wiw
USvcw7sJ7WEDKmPbs5Qi5pTsmqAOFgorzlWLg0twokkVyqTJaFmkJ3PcBtHug4+ZCgmYvD3bWeGwZwn1tRu
cW7iXcEBAdE5sQYfKCd7j37BUqQpWxniSzGzLNbyfRNldFD5YruJ5cf7Ib5LN2x4b3QwCRu5HdWiL+jgeVw
sTnhJZd0VEik3SJUiBHLkqRAEvTT+9d8AreGUxm4yqfT8PdfsraMeVvxWGU6/jltQVEke57XWJV/
o+qyeKxklrO6rOQtszCs6OO4a4c8WXDOj18a5RrZZYS0udINvdZiu9oad9SaGkYd19r3kYHwRdTrjpVHK+V
jwfDPhkcbuiwo1IR0srmWFVOTusLBt+T908OHZNszyfIjjdWQK0tdUymPbtDy0WPIBNvsg3wlcdwbgDHRIR
ZeolSPDl1haWdkEwfJC2ZnDmO6j07HsVOoXxNqHflInTSPu2EyOts7Ejvb5KBT7A7dILtC0egQQFrquqLGN
HmB4DQFnkyaqzbDgWSVNmx9mdIqNMpmt3ybnAmQi1iTbPGeB9Ef2n07xKRtUT54sZ6g91QaV7S1VRXiNrXi
mD/KQMkK69qq+OPS993PD3Nbsbg89F5/+/J09SagsXPRlza/
Nvil2WynTUzoZdjgbWBabcj9YTDJtFiF0v2ecmIXWT2ytQnEHKE4kcIoTYaZ7eiSCTbcnChve5cJSOU6Fv0
mSndlDjhDgShmcFqWOqsCLIphsmKW2NkN+Ex1QS/CR7ycqkS2gVVLTUpLmsb4hPN7lU808kry57ueifM/
e7c8gkoUQDpmNPVwC0jGiJTvgVtM7wxLIdu4YCG87QGE+VvHqVNqpN9Q8nDbljR2A/
wCFXEZJKcehJJcQvPC6y4+6kBVmZwC5cDZcOUAcUiVdi6YEugtZ5JGLK3pfMGj1ULTHhj2h0hYLXsAMrRRs
jPgl7Q/
cPe8Pr8VlkxyatGuHPGLpiwQlXdDEGkO9eFW0eo0LpXwuJZsO0k5bf4q3mfBBSunDwYmjduBx9V5+SErpo9
nHnxuNqRnvbipZUltK0gGEbjbAueB+u6xN+imV9ea/
UKioc4ASuuATawGB9lHkDTEXAtJBs7zBehhhpGjyPkZfJO0hlsXHCkwQsnG0vAco0brNtYEX4PBUqnqCBYA
NIx5RZWzKL/RZ4JWx+GNrgOCBlOZXGLT5KVrrmQgG/
QDlFD4nhxkJJti6rCLPdm+VKjapmiyuN6l5p2rMo2NbDE4uJ5xj5HlXkdQZYX1OwmaJt4g5w8p9ALAfc+qy
VKDuBIwr2lrmwRuEjTtIsSFLxpOw882qbJWjVQq9Haxxc6anbI5xceu6/wDc/
ZR5Hg9VV0lYyi1F08TJPych2vJabD/
jKvtRpow1tRCQGuALgDgXvn7JSiOEiBvKI6QIRHmsmPae6migoDXY6rpIwQmMbYXzdOaS82CVC4MLG2tdKI
gBe6K6ElODA1qYiI5ljcoZdc2Ut7Ab8KK7aHKkSyqawHABcTgW6lG/LiIh5y4Z9ApMETaWkbI+
+9w3EcKunqHyuIvZvZO3J0imlBWxZpQXC3RBf5nXGAkxynO8tvULRJIxbvol+iROcLFNKYjlwSJQgDu6Vou
5qQo1LH4koHbumDLfRRul2EOG3+Kx2/
NStY1Z1M51NSABtrPIbYH4LqakbUExnzRC2WnJ+huu1qKCCkZTSiUEeaMtdfPrfJ+HRPv0Z8I1FeCFpZTyP
lfztIUqTUKqOdhmZLDC4hr3NcHN2+o4UV35k0kTpNkkJJvLELH/AKXdkagc6mZPURMEjIxd0ZGD6EKG/
wBRpGH3EujPSGWJlNK0OkF2OFtrrnr2N0urF9LRzXxgtIwRdU+n09PU6j4tI10cDCXyRvyGgdu+VL9pJXfs
yTLg7FwR6qNelt86Y97XRyFruQUrTYkj5LpJfFsSxod1I6pGk/
wmy1Mx7PFc7ysc75JsrXsfZ4AIPHZHh8SW7W3NupccfQIE20gFpDnHkZ+qBosaWnEgcXVbWtYLu2tuVNpDT
NpGzthlqnB/Exs1p72UGkcyEj97ta4XcbnP0H9wpMFS5jH+BHIbv822zbHrc5JUsOF/
Wws1GBhaXbHR7dnutbx0VXotQ5kbtOq9oe4iFoJ53YYfhfB9Ldl1I6rEjZo3BrbFroiBtIv26/NR/
aKEQQUM8Vmm5Ac3FrZ/qk1aoafQm7N9p+FuESRp23CSabx5o6gX/
wDEsEhBFsnB+4KlR7XNssXw2TIAe4YJRoiGm90Sem8txhVkz3sftT9k+mWrpb8IUkhIsokL3kXIT3AuHKWo
7GzT7Qo+4PymTh17IIuBZWkRY/
UqkSRN2nkNFvkq7pZPd7rfgmK4KkE5bMUZTnea3oLJGpVRI3hclK4cJiGpVxSIEKj0jnNeNl8uF7C6jj3mq
6j8tK4tx5Ccd00KTonVNTLpkg8aISR7g3cPKb7b4KBUOdVOhndIHmNhDRJ5ST/1cFM11znUji4k/vm8n/
IEL2ZJfXPied0ZBuw5H0R9k/Rb+z7yWupZrMlNyWuwHD07q3qtKBbakhidJfzjg+gHZZ7S/
NrToHZhBNoz7o+XC1GmknYSTfc8/
ZZ5GaYyvo4aeCtNHE0Gcu3znnaOWt+t1A9pPy8tFUvY2UPZIBdxNi64z9Ck0N7/
AMzO7e7cXOub5OUHX3H9lNycuF/VHpgZg4NkreVz/
eKQKxD2yvidujNinyziUOA6m4HZB6rigaLiikiNO0yUwdgDcCriAwuG5jGtaBnuqLTSfDIvjOPkrXTgPyr8
dCkSyZThvhvsXG+dt0LWIRNo1RfPgkSN+F8/1TacneTf/wByT/tRqzGlV1v/
AIXf2QCKiPf+zqIk5DHfS6LTTFvvJYv/AEuj/wDo/
wC5yiyLFrpsnwspKppZyoTnRl13ZQn+4o7ihRByJ4cwDB+SC+Wxwo7Suk91CQ2+D3P3Jjghs94ovRWQf//
Z"
alt="Sample Image">
</div>

</body>

</html>

-----------------------------------------------------------------------------------
---------------------------------------------------------------------
11) create a para with dummy text , apply line-height double , word space with 20px
& letter space with 5px.

<html>
<title>Dummy Content</title>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est
laborum.</p>

<style>
p{
line-height: double;
word-spacing: 20px;
letter-spacing: 5px;
}
</style>
</body>

</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------------------
12) create a para with dummy text , use google font and apply any google font on
para as per your choice.

<html>
<title>Dummy Content para</title>

<body>

<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem, vel
sapiente! Error aut distinctio ullam
consequuntur, accusamus molestiae, incidunt, ipsa harum tempore dignissimos
eaque aliquid tempora maiores porro
quidem consectetur?
</p>

<style>
p{
font-family: Georgia, 'Times New Roman', Times, serif;
}

</style>
</body>

</html>

-----------------------------------------------------------------------------------
----------------------------------------------------------------
13) create a para & div with dummy text, identify the diff. between para & div ( &
when to use para ,div ? ) , with justification.

<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph vs. Division</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

.my-div {
border: 1px solid #333;
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>

<body>
<p>This is a paragraph. It is used for grouping and structuring text
content.</p>

<div class="my-div">
<p>This is inside a div. The div is a container element used for grouping
and applying styles to sections of
content.</p>
<p>Divs are often used for layout purposes and to group related content
together.</p>
</div>

</body>

</html

-----------------------------------------------------------------------------------
------------------------------------------------------------------
14) show city name data in unordered format.

<html>
<title>City</title>

<body>
<h1>City</h1>
<ul>
<li>New York</li>
<li>Los Angeles</li>
<li>Chicago</li>
<li>Houston</li>
</ul>
</body>
</html>

-----------------------------------------------------------------------------------
---------------------------------------------------------------
15) show city name data in order format.

<html>
<title>City</title>

<body>
<h1>City</h1>
<ol>
<li>New York</li>
<li>Los Angeles</li>
<li>Chicago</li>
<li>Houston</li>
</ol>
</body>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------
16) create a menu (horizontal menu) with the help of (ul li or ol li ).
use float or display property.

<!DOCTYPE html>
<body>

<h1>Menu</h1>

<ul class="menu">
<li>Tea</li>
<li>Coffee</li>
<li>Soft Drinks</li>

</ul>

<style>
ul.menu {
float: right;
display: flex;
}
</style>

</ol>
</body>

-----------------------------------------------------------------------------------
---------------------------------------------------------------------
17) create a para with dummy content . apply background color
(
RGB format , with some value
hexadecimal format (6 digit) , with some value
hexadecimal format (3 digit) , with some value
)

<!DOCTYPE html>

<head>

<title>Background Color Example</title>


<style>

body {
font-family: Arial, sans-serif;
margin: 20px;
}

.rgb-paragraph {
background-color: rgb(173, 216, 230);
padding: 10px;
margin-bottom: 20px;
}

.hex-6-paragraph {
background-color: #7fffd4;
padding: 10px;
margin-bottom: 20px;
}

.hex-3-paragraph {
background-color: #f0f;
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>

<div class="rgb-paragraph">
<p>This is a paragraph with an RGB background color (173, 216, 230).</p>
</div>

<div class="hex-6-paragraph">
<p>This is a paragraph with a hexadecimal background color (#7fffd4).</p>
</div>

<div class="hex-3-paragraph">
<p>This is a paragraph with a hexadecimal background color (#f0f).</p>
</div>

</body>
</html>

-----------------------------------------------------------------------------------
--------------------------------------------------
18) create a para with dummy content . apply background color with ( rgba() concept
. what is the use of [a] in rgba. ).

<!DOCTYPE html>
<head>
<title>Background Color with RGBA</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

.rgba-paragraph {
background-color: rgba(255, 0, 0, 0.5);
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>

<body>
<div class="rgba-paragraph">
<p>This is a paragraph with a red background color using RGBA (255, 0, 0,
0.5).</p>
</div>

</body>

</html>

<!-- A stands for alpha in rgba -->

-----------------------------------------------------------------------------------
--------------------------------------------------------------
19) create a div ( 100X100 dimension ). shift the div 300px from left side , 200px
from top.

<!DOCTYPE html>

<head>

<title>Moved Div</title>
<style>

body {
font-family: Arial, sans-serif;
margin: 20px;
}

.moved-div {
width: 100px;
height: 100px;
background-color: crimson;
left: 300px;
top: 200px;
}
</style>
</head>
<body>

<div class="moved-div"></div>

</body>
</html>-

-----------------------------------------------------------------------------------
--------------------------------------------------------------------
20) create a div ( 1200X600 dimension ). align the same div in center of the page .
( after zoom in , zoom out div must get aligned in center area).

<!DOCTYPE html>

<head>
<title>Centered Div</title>
<style>
/* Adding some basic styling for clarity */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #ecf0f1; /* Background color for visibility */
}

.centered-div {
width: 1200px;
height: 600px;
background-color: cyan;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="centered-div"></div>

</body>
</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------
21) create a div ( 100X100 dimension ). apply background color grey using inline
css only.

<!DOCTYPE html>

<head>
<title>Inline CSS Example</title>
</head>
<body>

<div style="width: 100px; height: 100px; background-color: grey;"></div>

</body>
</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------

22) create a div ( 100X100 dimension ). apply background color grey using inline
css. override inline css background color with the help internal css
( hint: use !important keyword).

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Override Example</title>
<style>

.override-div {
width: 100px;
height: 100px;
background-color: red !important;
}
</style>
</head>
<body>

<div style="width: 100px; height: 100px; background-color: grey;"


class="override-div"></div>

</body>
</html>

-----------------------------------------------------------------------------------
--------------------------------------------------------------------

23) apply color red to first letter of the given string in h1 tag
[
input : hello world
]

<!DOCTYPE html>

<head>
<title>Colored First Letters</title>
<style>

body {
font-family: Arial, sans-serif;
margin: 20px;
}

h1::first-letter {
color: red;
}
</style>
</head>
<body>

<h1>Hello world</h1>

</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------
24) apply background color grey to first line of the given string in p tag.

<!DOCTYPE html>
<head>
<title>Colored First Letters</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

p::first-line{
background-color: grey;
}

</style>
</head>

<body>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
voluptatem ullam dolor laborum voluptate
ipsa minima, exercitationem perspiciatis molestiae iusto iure tenetur
corrupti, excepturi ea, enim vel eos
veniam neque.
</p>

</body>

</html>

-----------------------------------------------------------------------------------
----------------------------------------------------------------------
25) generate ul li tag with city name & apply background color grey to first & last
li
[note: use filter in css ]

<html>
<title>Li Tag Generate</title>
<body>

<ul>

<li>Nagpur</li>
<li>Mumbai</li>
<li>Pune</li>

</ul>

<style>
/* ul{
background-color: gray;
} */

li:first-child,
li:last-child{
background-color: grey;
}
</style>

</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------
26) create 3 div with dummy content . apply different background color to
individual div with the help of class attribute.

<html>
<title>Class Attribute</title>
<body>

<div class="div1">
My name is Prachi Giradkar.
</div>

<div class="div2">
I am from Nagpur.
</div>

<div class="div3">
Currently staying in Nashik.
</div>

<style>
.div1{
background-color: red;
text-align: center;
padding: 10px;
}
.div2{
background-color: blue;
text-align: center;
padding: 10px;
}

.div3{
background-color: green;
text-align: center;
padding: 10px;
}
</style>
</body>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------
27) create 3 div with dummy content . apply different font size to individual div
with the help of id attribute.

<!DOCTYPE html>
<head>
<title>Styled Divs</title>
<style>

#div1 {
font-size: 16px;
padding: 10px;
margin-bottom: 10px;
}

#div2 {
font-size: 20px;
padding: 10px;
margin-bottom: 10px;
}

#div3 {
font-size: 24px;
padding: 10px;
}
</style>
</head>
<body>

<div id="div1">
<p>Dummy content for Div 1</p>
</div>

<div id="div2">
<p>Dummy content for Div 2</p>
</div>

<div id="div3">
<p>Dummy content for Div 3</p>
</div>

</body>
</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------------
28) create an example to show the advantage of class over id.

<!DOCTYPE html>

<head>
<title>Class VS ID Example</title>
<style>

.highlight, #special {
padding: 10px;
margin-bottom: 10px;
border: 1px solid cyan;
background-color: violet;
color: black;
}

.highlight {
font-size: 18px;
}

#special {
font-size: 24px;
}
</style>
</head>
<body>

<!-- Example using class -->


<div class="highlight">
<p>This is a highlighted element using class.</p>
</div>

<!-- Example using ID -->


<div id="special">
<p>This is a special element using ID.</p>
</div>

<!-- Reusing class for another element -->


<div class="highlight">
<p>This is another highlighted element using the same class.</p>
</div>

</body>
</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------------------

29) create a para with dummy content , apply border color,style & width to bottom
section of para. ( use individual property for color,style & width).

<html>
<title>Para with dummy content</title>

<body>

<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut magni itaque
provident est, illum repellendus
molestias quaerat recusandae at, delectus, voluptate similique sit eos ut?
Consectetur impedit eaque quaerat
ratione.
</p>
<style>
p{
border-bottom-color: rgb(250, 72, 72) ;
border-bottom-style: solid;
border-bottom-width: 4px;
padding: 10px;

}
</style>
</body>

</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------
30) How to defines the border radius property to bottom-left corner of para.please
write down the code in css.

<!DOCTYPE html>
<head>
<title>Bottom-Left Border Radius Example</title>
<style>

p {
border-bottom-left-radius: 10px;
border-bottom-color: #34d0db;
border-bottom-style: solid;
border-bottom-width: 5px;
padding-bottom: 10px;
}
</style>
</head>
<body>

<p>This is a paragraph with dummy content. The bottom section has a colored,
styled, and widthed border with a border radius applied to the bottom-left
corner.</p>

</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------
31) generate a para ( dimension 100X100 ) with content . shift content of the
paragraph from left & top ( use padding property ).

<!DOCTYPE html>

<head>
<title>Shifted Content </title>
<style>

p {
width: 100px;
height: 100px;
background-color: greenyellow;
padding-left: 20px;
padding-top: 30px;
}
</style>
</head>
<body>

<!-- Creating a paragraph with shifted content -->


<p>This is a paragraph with shifted content. The content is shifted 20px from t
he left and 30px from the top.</p>

</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------
32) generate a para ( dimension 100X100 ). apply 4 diff. border style, 4 diff.
border color & 4 diff. border width.

<html>
<title>Different styles</title>
<body>
<p style="border: 1px solid red; border-color: red; border-width: 10px;">
This is a paragraph with different styles.
</p>
<p style="border: 1px solid green; border-color: green; border-width:
10px;">
This is a paragraph with different styles.
</p>
<p style="border: 1px solid blue; border-color: blue; border-width: 10px;">
This is a paragraph with different styles.
</p>
<p style="border: 1px solid yellow; border-color: yellow; border-width:
10px;">
This is a paragraph with different styles.
</p>
</body>
</html>

-----------------------------------------------------------------------------------
--------------------------------------------------------------------------------
33) How to set the color:blue of the left border ( for paragraph ).

<!DOCTYPE html>

<head>
<title>Colored Left Border Example</title>
<style>

p{
width: 110px;
height: 120px;
background-color: #eaeef0;
padding-left: 20px;
padding-top: 30px;
border-left: 5px solid blue;
}
</style>
</head>
<body>

<!-- Creating a paragraph with a colored left border -->


<p>This is a paragraph with a colored left border. The left border is set to
blue.</p>

</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------------
34) How to set the style:dashed of the left border ( for paragraph ).

-->

<html>
<title>Dashed Left Border Example</title>
<style>

p{
width: 110px;
height: 120px;
background-color: aliceblue;
border-left: dashed;
padding: 10px;

}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to blue.
</p>
</html>

-----------------------------------------------------------------------------------
---------------------------------------------------------------
35) How to set the width:medium of the left border ( for paragraph ).

<html>
<title>Dashed Left Border Example</title>
<style>

p{
width: medium;
height: 120px;
background-color: aliceblue;
border-left: dashed;
padding: 10px;

}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to blue.
</p>
</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------------
36) create a para with dummy content , set text with lowercase , uppercase &
capitalize format ( see the result on browser one by one )

<html>
<title>Dashed Left Border Example</title>
<style>

p{
width: medium;
height: 50px;
/* text-transform:capitalize; */
/* text-transform: lowercase; */
text-transform: uppercase;
background-color: aliceblue;
padding: 10px;

}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to blue.
</p>
</html>

-----------------------------------------------------------------------------------
--------------------------------------------------------------
37) create a para with dummy content , how to set different font weight for the
paragraphs? ( use online help for font weight values )

<html>
<title>Dashed Left Border Example</title>
<style>

p{
width: medium;
height: 50px;
/* font-weight: lighter; */
/* font-weight: bold; */
/* font-weight: normal; */
font-weight: 800;
}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to
blue.
</p>
</html>

-----------------------------------------------------------------------------------
---------------------------------------------------
38) create a para with dummy content , apply font size in em (i.e 2em ,
1.5em ,... ). note down the relation between em and px.

<html>
<title>paragraph</title>
<style>

p{
width: medium;
height: 50px;
/* font-size: 2em; */
font-size: 1.5em;
}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to
blue.
</p>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------
39) create a para with dummy content . set the padding of a paragraph element from
all side with value 20px.

<html>
<title>paragraph</title>
<style>

p{
width: medium;
height: 50px;
padding: 20px;
background-color: antiquewhite;
}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to blue.
</p>
</html>

-----------------------------------------------------------------------------------
--------------------------------------------------

40) create a para with dummy content .set the padding of a paragraph element from
top & bottom only with value 20px.

<html>
<title>Padding Example</title>
<style>

p{
width: medium;
height: 50px;
padding-top: 20px;
padding-bottom: 20px;
background-color: rgb(234, 156, 54);
}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to blue.
</p>
</html>

-----------------------------------------------------------------------------------
------------------------------------------------
41) create a para with dummy content .set the padding of a paragraph element from
right & left only with value 20px.

<html>
<title>Padding Example2</title>
<style>

p{
width: medium;
height: 50px;
padding-right: 20px;
padding-left: 20px;
background-color: rgb(234, 156, 54);
}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to blue.
</p>
</html>
-----------------------------------------------------------------------------------
---------------------------------------------------------------------------
41.2) create a para with dummy content .set the padding of a paragraph element
having top 20px , right-left 40px , bottom 40px.

<html>
<title>Padding Example2</title>
<style>

p{
width: medium;
height: 50px;
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
background-color: rgb(234, 156, 54);
}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to blue.
</p>
</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------------------
42) create a para with dummy content .set the padding of a paragraph element having
top 20px , right 40px , bottom 60px , left 10px.

<html>
<title>Padding Example2</title>
<style>

p{
width: medium;
height: 50px;
padding-top: 20px;
padding-left: 10px;
padding-right: 40px;
padding-bottom: 60px;
background-color: rgb(54, 234, 219);
}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to blue.
</p>
</html>
-----------------------------------------------------------------------------------
--------------------------------------------------------------------------------
43) How to specify the space between words in paragraph element? use para with
dummy content.

<html>
<title>Padding Example2</title>
<style>

p{
word-spacing: 10px;
background-color: azure;
}
</style>

<p>
This is a paragraph with a dashed left border. The left border is set to blue.
</p>
</html>

-----------------------------------------------------------------------------------
--------------------------------------------------------------------------------
43) How to specify the space between letter in paragraph element? use para with
dummy content.

<html>
<title>Letter Spacing</title>
<style>
p {
letter-spacing: 10px;
background-color: rgb(75, 134, 91);
}
</style>

<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex iure suscipit
alias laudantium culpa animi voluptatem
deserunt, explicabo saepe? Ut eaque ipsa alias. Magnam dicta dolore autem.
Quas, minus suscipit?
</p>

</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------------------
44) How to specify the space between lines in paragraph element? use para with
dummy content.

<html>
<title>Line Spacing</title>
<style>
p {
line-height: 1.5;
background-color: rgb(75, 134, 91);
}
</style>

<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex iure suscipit
alias laudantium culpa animi voluptatem
deserunt, explicabo saepe? Ut eaque ipsa alias. Magnam dicta dolore autem.
Quas, minus suscipit?
</p>

</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------------------
45) How to set the maximum width of a paragraph element?

<html>
<title>Maximum Width</title>
<style>
p {
max-width: 400px;

background-color: rgb(242, 181, 68);


padding: 10px;
}
</style>

<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex iure suscipit
alias laudantium culpa animi voluptatem
deserunt, explicabo saepe? Ut eaque ipsa alias. Magnam dicta dolore autem.
Quas, minus suscipit?
</p>

</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------------------
46) How to set the minimum width of a paragraph element?

<html>
<title>Miniimum Width</title>
<style>
p {
max-width: 200px;
background-color: rgb(242, 68, 135);
padding: 10px;
}
</style>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex iure suscipit
alias laudantium culpa animi voluptatem
deserunt, explicabo saepe? Ut eaque ipsa alias. Magnam dicta dolore autem.
Quas, minus suscipit?
</p>

</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------
47) write down a code to show the diff. between height , min-height & max-height .
use 3 diff. div with border or background color.

<!DOCTYPE html>

<head>

<title>Height, Min-Height, Max-Height Example</title>


<style>
.div1 {
height: 150px;
border: 2px solid #3498db;
padding: 10px;
}

.div2 {
min-height: 100px;
border: 2px solid #e74c3c;
padding: 10px;
}

.div3 {
max-height: 200px;
border: 2px solid #2ecc71;
padding: 10px;
}
</style>
</head>

<body>

<div class="div1">Fixed Height</div>


<div class="div2">Minimum Height</div>
<div class="div3">Maximum Height</div>

</body>

</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------
48) generate ul li with city name. & set the different type list style.
<!DOCTYPE html>

<head>

<title>List Style Example</title>


<style>

#list1 {
list-style-type: none;
}

#list2 {
list-style-type: circle;
}

#list3 {
list-style-type: square;
}

#list4 {
list-style-type: disc;
}
</style>
</head>

<body>

<ul id="list1">
<li>New York</li>
<li>London</li>
<li>Tokyo</li>
</ul>

<ul id="list2">
<li>New York</li>
<li>London</li>
<li>Tokyo</li>
</ul>

<ul id="list3">
<li>New York</li>
<li>London</li>
<li>Tokyo</li>
</ul>

<ul id="list4">
<li>New York</li>
<li>London</li>
<li>Tokyo</li>
</ul>

</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------
49) creat a para with dummy content , How to set a paragraph to a small-caps font?

<!DOCTYPE html>

<head>

<title>Small Caps Example</title>


<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

p {
font-variant: small-caps;

}
</style>
</head>

<body>

<p>This is a paragraph with dummy content. It is set to small-caps font.</p>

</body>

</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------
50) create a div with dummy content , How to specify all the border properties in
one declaration? (i.e. short hand property )

<!DOCTYPE html>

<head>
<title>Border Shorthand Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

div {
width: 200px;
height: 100px;
border: 2px dashed #3498db;
padding: 10px;
}
</style>
</head>

<body>

<div>This is a div with dummy content and a specified border.</div>

</body>

</html>

-----------------------------------------------------------------------------------
------------------------------------------------------------------
51) create a div with dummy content , having width : 1000px , align the same div in
center of the screen (hint: use margin)

<html>
<title>Margin</title>
<body>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque voluptates
ab placeat, corporis provident delectus similique accusantium, veniam nam
temporibus sequi repellat voluptatum maiores animi unde expedita cum quis
quidem?
</div>
<style>
div {
width: 1000px;
text-align: center;
margin: auto;
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
---------------------------------------------------------------
52) create a div (having width:100px , height:100px ). apply padding from all side
with 40px value. (use individual property for padding or shorthand property)

<!DOCTYPE html>
<title>Padding Example</title>
<body>
<div style="width: 100px; height: 100px; padding: 40px">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque voluptates
ab placeat, corporis provident delectus similique accusantium, veniam nam
temporibus sequi repellat voluptatum maiores animi unde expedita cum quis
quidem?
</div>
</body>
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
--
53) create a div (having width:100px , height:100px ). on mouse over scale it using
transform property (hint: use scale() , scaleX() , scaleY() )

<html>
<title>Tranform Example</title>
<body>
<div
style="
width: 500px;
height: 200px;
background-color: rgb(0, 255, 229);
transform: scale(1.5,1.5);
"
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque voluptates
ab placeat, corporis provident delectus similique accusantium, veniam nam
temporibus sequi repellat voluptatum maiores animi unde expedita cum quis
quidem?
</div>
</body>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
----
54) Print some preformatted text of your choosing. (hint: use the <pre> tag)

<html>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.


</pre>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
----
55) Create some links to various search engines (google, yahoo, altavista, lycos,
etc)

<html>
<title>Links Example</title>
<body>
<a href="https://www.google.com">Google</a>
<a href="https://www.yahoo.com">Yahoo</a>
<a href="https://www.altavista.com">Altavista</a>
<a href="https://www.lycos.com">Lycos</a>
<a href="https://www.bing.com">Bing</a>
</body>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-----
56) Create links to five different pages on five different websites that should all
open in a new window.

<html>
<title>Links</title>
<body>
<a href="https://www.google.com" target="_blank">Google</a>
<a href="https://www.yahoo.com" target="_blank">Yahoo</a>
<a href="https://www.altavista.com" target="_blank">Altavista</a>
<a href="https://www.lycos.com" target="_blank">Lycos</a>
<a href="https://www.bing.com" target="_blank">Bing</a>
</body>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
----
57) Display an image that has a border of size 2, a width of 200, and a height of
200.

<html>
<title>Image Example</title>
<body>
<img
src="https://www.google.com/images/srpr/logo11w.png"
border-size="2"
width="200"
height="200"
/>
</body>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
----------
58) Display an image that when clicked will link to google.com (should be opened in
a new window).

<html>
<title>Image Example</title>
<body>
<img
src="https://www.google.com/images/srpr/logo11w.png"
border-size="2"
width="200"
height="200"
onclick="window.open('https://www.google.com')"
/>
</body>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-----------
59) create a div tag with dummy content & displays text in italic format.

<html>
<title>Italic format Example</title>
<body>
<div style="font-style: italic">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</div>
</body>
</html>
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
---------
60) how to indent first line of paragraph having dummy content?

<html>
<title>Indent Example</title>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id
est laborum.
</p>
<style>
p {
text-indent: 2em;
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
---------
61) how to indent all lines of paragraph having dummy content? (hint: read
blockquote)

<html>
<title>Indent all lines</title>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id
est laborum.
</p>
<style>
p {
/* text-indent: 2em; */
margin-left: 2em;
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------
62) why class is required in css ? how to define class in css. show example with
advantage of class.
a)can we have class name multiple time in a page?
b)can we have multiple class in single tag?
if a) & b) is true then please prove it using proper example.

in css:-

.my-class {
color: blue;
font-size: 16px;
}

in html :-
<p class="my-class">This is a paragraph with the 'my-class' style.</p>

<p class="my-class">This is the first paragraph with 'my-class' style.</p>


<p class="my-class">This is the second paragraph with 'my-class' style.</p>

<p class="class1 class2">This paragraph has both 'class1' and 'class2' styles.</p>

<p class="my-class">This is the first paragraph with 'my-class' style.</p>


<p class="my-class">This is the second paragraph with 'my-class' style.</p>
<p class="class1 class2">This paragraph has both 'class1' and 'class2' styles.</p>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------
63) why id is required in css ? how to define id in css. show example with
advantage of id.
a)can we have id name multiple time in a page?
b)can we have multiple id in single tag?

if a) & b) is true then please prove it using proper example.

/* IN CSS */
#my-id {
color: red;
font-size: 18px;
}

<!-- IN HTML -->


<p id="my-id">This is a paragraph with the 'my-id' style.</p>

<p id="unique-id1">This is the first paragraph with the 'unique-id1' style.</p>


<p id="unique-id2">This is the second paragraph with the 'unique-id2' style.</p>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------
64) create an example for border style property with different values (like: solid,
dashed , inset , outset etc...)

<html>
<title>Bordr example</title>
<body>
<h1>Bordr example</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<style>
p {
border: 1px solid red;
border: dashed;
border: inset;
border: outset;
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
--------------------------------------------------------------------------
65) create an example for border width property with different values (like: thin,
medium, etc... and also with px value)

<html>
<title>Bordr example</title>
<body>
<h1>Bordr example</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<style>
p {
border: 1px solid red;
border: 1px thin;
border: 1px medium;
border: 1px thick;
}
</style>
</body
</html>

-----------------------------------------------------------------------------------
---------------------------------------------------------------------------
66) create an example for border color property with different values (like: blue
color i.e predfiend , hexa decimal value , rgb color value ).

<html>
<title>Border color property example</title>
<body>
<h1>Border color property example</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<style>
p {
border: 1px solid red;
border: 1px solid blue;
border: 1px solid rgb(0, 0, 255);
border: 1px solid rgba(0, 0, 255, 0.5);
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
--------------------------------------------------------------------
67) create an example for border radius property with different values.

<html>
<title>Border radius example</title>
<body>
<h1>Border radius example</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<style>
p {
border: 1px solid red;
border-radius: 10px;
border-radius: 10px 10px 10px 10px;
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------
68) generate a table with tr and td, show 3 X 3 column ,row table with dummy
content.

<html>
<title>Table Example</title>
<body>
<h1>Table Example</h1>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------
69) generate a table with tr and td, show 3 X 3 column ,row table with dummy
content. apply width 300px , use border collapse property in css.

<html>
<title>Table example</title>
<body>
<h1>Table example</h1>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

<style>
table {
border-collapse: collapse;
width: 300px;
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------
70) what is cellspacing in table? please write down sample code for the same.

<html>
<title>cellspacing example</title>
<body>
<h1>cellspacing example</h1>
<table cellspacing="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

<style>
table {
border-collapse: collapse;
width: 100%;
}

table,
th,
td {
border: 1px solid black;
}

th,
td {
padding: 8px;
text-align: left;
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
-------------------------------------------------------------------
71) what is cellpadding in table? please write down sample code for the same.

<!DOCTYPE html>

<head>

<style>

table {
border-collapse: collapse;
width: 100%;
}

table, th, td {
border: 1px solid black;
}

th, td {
padding: 8px;
text-align: left;
}
</style>
<title>Table with Cellpadding</title>
</head>
<body>
<table cellpadding="10">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>
</body>
</html>

-----------------------------------------------------------------------------------
--------------------------------------------------------------------
72) show an example for vertical alignment in table with sample code.

<!DOCTYPE html>

<head>

<style>

table {
border-collapse: collapse;
width: 100%;
}

table, th, td {
border: 1px solid black;
}

th, td {
padding: 8px;
text-align: center;
vertical-align: middle;
}
</style>
<title>Table with Vertical Alignment</title>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>
</body>
</html>

-----------------------------------------------------------------------------------
----------------------------------------------------------------------
73) what is the use of iframe? please create a sample code for iframe tag.

<!DOCTYPE html>

<hea
<title>IFrame Example</title>
</head>
<body>
<h2>Embedded Google Maps</h2>
<p>Check out this embedded Google Map:</p>

<iframe
width="600"
height="450"
frameborder="0"
style="border:0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d2488.8627898550425!2d-0.12814428422927263!3d51.50779047963638!2m3!1f0!2f0!3f0!
3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876035bfad3d0b9%3A0x8c0d8d219b199f80!2sBig
%20Ben!5e0!3m2!1sen!2suk!4v1635197824049!5m2!1sen!2suk"
allowfullscreen=""
aria-hidden="false"
tabindex="0">
</iframe>

<p>End of example.</p>
</body>
</html>

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------
74) create a sample code for video tag with controls.
<!DOCTYPE html>
<head>

<title>Video Example</title>
</head>
<body>
<h2>Sample Video with Controls</h2>

<video width="640" height="360" controls>


<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<p>End of example.</p>
</body>
</html>

-----------------------------------------------------------------------------------
----------------------------------------------------------------------
75) create a sample code for audio tag with controls.

<html>
<title>Auio tag example</title>
<body>
<audio controls>
<source src="C:\Users\CDAC\Downloads\angry horse.mp3" type="audio/mpeg" />
Your browser does not support the audio tag.
</audio>
</body>
</html>

-----------------------------------------------------------------------------------
---------------------------------------------------------------------
76) create a para with dummy content , highlight or apply background color on some
words using span tag.

<!DOCTYPE html>
<title>Dummy content example</title>
<body>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<style>
span {
background-color: yellow;
}
</style>
</body>
-----------------------------------------------------------------------------------
------------------------------------------------
76) create a para with dummy content , highlight or apply background color on some
words using mark tag

<!DOCTYPE html>
<title>Dummy content example</title>
<body>
<mark>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</mark>
<style>
mark {
background-color: rgb(255, 0, 247);
}
</style>
</body>

-----------------------------------------------------------------------------------
--------------------------------------------
77) create a para with dummy content & hide this para using display & visibility
property ( note down the diff between none & hidden value)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<style>
p {
display: none;
visibility: visible;
}
</style>
</body>
</html>
-------------------------------------------------------------------------
78) create a para (100X100 dimension ) on hover rotate it with 100deg , -50deg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure voluptatibus
laborum nam est saepe odio rem numquam corporis aperiam. Molestias neque
expedita illum veritatis in magni cupiditate doloremque sequi qui?
</p>

<style>
p {
width: 100px;
height: 350px;
background-color: red;
}
p :hover {
/* transform: rotate(100deg); */
transform: rotate(-50deg);
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
--------------
79) create a para (100X100 dimension ) on hover shift it with
translate,translateX,translateY property

-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure voluptatibus
laborum nam est saepe odio rem numquam corporis aperiam. Molestias neque
expedita illum veritatis in magni cupiditate doloremque sequi qui?
</p>
<style>
p {
width: 100px;
height: 350px;
background-color: rgb(0, 145, 255);
}
p :hover {
transform: translate(100px, 100px);
transform: translateX(100px, 100px);
transform: translateY(100px, 100px);
}
</style>
</body>
</html>

-----------------------------------------------------------------------------------
---------------------------------

80) create a para (100X100 dimension ) on hover move it with skew,skewX,skewY


property

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure voluptatibus
laborum nam est saepe odio rem numquam corporis aperiam. Molestias neque
expedita illum veritatis in magni cupiditate doloremque sequi qui?
</p>
<style>
p {
width: 100px;
height: 350px;
background-color: rgb(0, 145, 255);
}
p :hover {
transform: skew(10deg, 10deg);
transform: skewX(10deg);
transform: skewY(10deg);
}
</style>
</body>
</html>
-----------------------------------------

You might also like