JAI NARSINGH
JAIPUR
SkillEnhancement Course
FrontendWebDesigning
Practical file 2024-
25Class: -
Submittedby: Submittedto:
Practical1
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLBasics</title>
</head>
<body>
<!--Thisisacomment.Commentsareignoredbythebrowserandhelpexplainthecode.-->
<!--HeadingTags-->
<h1>WelcometoHTMLBasics</h1>
<h2>UnderstandingTagsandElements</h2>
<!--ParagraphTag-->
<p>HTMLstandsfor<b>HyperTextMarkupLanguage</b>.Itisusedtostructurecontentontheweb.</p>
</body>
</html>
OUTPUT
Practical2
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLListsExample</title>
</head>
<body>
<!--Heading-->
<h1>HTMLLists</h1>
<p>Hereareexamplesofdifferenttypesoflistsin HTML:</p>
<!--UnorderedList-->
<h2>UnorderedList</h2>
<p>Anunorderedlistdisplaysitemswithbulletpoints:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!--OrderedList-->
<h2>OrderedList</h2>
<p>Anorderedlistdisplaysitemswithnumbers:</p>
<ol>
<li>Wakeup</li>
<li>Brushyourteeth</li>
<li>Havebreakfast</li>
</ol>
<!--DescriptionList -->
<h2>DescriptionList</h2>
<p>Adescriptionlistpairstermswithdescriptions:</p>
<dl>
<dt>HTML</dt>
<dd>HyperTextMarkupLanguage,usedtostructurecontentontheweb.</dd>
<dt>CSS</dt>
<dd>CascadingStyleSheets,usedtostyletheappearanceofwebcontent.</dd>
</dl>
</body>
</html>
OUTPUT
Practical3
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLHyperlinksExample</title>
</head>
<body>
<!--Heading-->
<h1>HTMLHyperlinks</h1>
<p>Hyperlinksallowyoutonavigatetootherpagesorsections.Belowareexamples:</p>
<!--ExternalLink-->
<h2>ExternalLink</h2>
<p>Clickthelinkbelow to visitGoogle:</p>
<ahref="https://www.google.com"target="_blank">GotoGoogle</a>
<!--DownloadLink-->
<h2>DownloadLink</h2>
<p>Clickthelinkbelowtodownloadasamplefile:</p>
<ahref="sample-file.pdf"download>DownloadFile</a>
</body>
</html>
OUTPUT
Practical4
<!DOCTYPEhtml>
<html>
<head>
<title>ColorsandTypography</title>
<style>
/*Typographystyles*/ h1,
h2, h3 {
font-family:Arial,sans-serif;
p{
font-size:16px;
}
.highlight{
font-weight:bold;
font-style: italic;
text-decoration:underline;
}
/*Colors*/
.primary {
color:white;
background-color:#007bff;
padding: 10px;
border-radius:5px;
}
</style>
</head>
<body>
<h1>ColorsandTypography</h1>
<h2>TypographyExamples</h2>
<p>Thisisastandardparagraph.Thetextisstyledwiththedefaultfontfamilyandsize.</p>
<pclass="highlight">Thisishighlightedtext.Itusesbold,italic,andunderlineforemphasis.</p>
<h2>ColorExamples</h2>
<pclass="primary">Thisisaprimary-coloredtextboxwithwhitetextandabluebackground.</p>
</body>
</html>
OUTPUT
Practical5
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>CSSBoxModel</title>
<style>
/*Boxmodeldemonstration*/
.box{
width:200px; /*Contentwidth*/
height: 100px; /*Contentheight*/
margin: 20px; /* Space outside the border */
padding: 15px; /* Space inside the border */
border:5pxsolid#007bff;/*Borderwidthandcolor*/
background-color: #f8f9fa; /* Background color */
.box.content{
background-color:#d4edda;/*Lightgreentorepresentcontent*/
height: 100%; /* Fill the available height */
</style>
</head>
<body>
<h1>CSSBoxModel</h1>
<div class="box">
<!--Content-->
<divclass="content">ContentArea</div>
</div>
</body>
</html>
OUTPUT
Practical6
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>CSSClassandIDExample</title>
<style>
/*Stylingfortheclasscanbeusedmultipletimes*/
.class-box{
background-color:#d1e7dd;/*Lightgreen*/
color: #0f5132; /* Dark green */
padding:20px;
margin: 20px;
/*StylingfortheIDcanbeonlyusedonceinonepage*/ #id-
box {
background-color:#cff4fc;/*Lightblue*/ color:
#055160; /* Dark blue */
padding:20px;
margin: 20px;
</style>
</head>
<body>
<h1>CSSClassandIDExample</h1>
<p>Inthisexample,youcanseethedifferencebetweenaclassandanIDinCSSstyling.</p>
<!--Usingaclass-->
<divclass="class-box">
Thisisaboxstyledwitha<strong>class</strong>selector. Classes
can be reused multiple times.
</div>
<!--UsinganID-->
<divid="id-box">
Thisisaboxstyledwithan<strong>ID</strong>selector. IDs
are unique and should be used only once.
</div>
<!--Anotherelementwiththesameclass-->
<divclass="class-box">
Thisisanotherboxstyledwiththe<strong>sameclass</strong>selector.
</div>
</body>
</html>
OUTPUT
Practical7
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>ResponsiveWebsitewithMediaQueries</title>
<style>
/*Generalstylingfortheboxes*/
.box{
width:25%;/*Defaultwidthforlargerscreens*/
margin: 10px;
padding:20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color:#f9f9f9;
text-align: center;
display:inline-block;/*Makesboxesalignhorizontally*/
}
/*Mediaqueryfortabletsandsmallerdevices*/
@media (max-width: 768px) {
.box{
width:45%;/*Adjustwidthfortablets*/
}
/*Mediaqueryforsmallphones*/ @media
(max-width: 480px) {
.box{
width:100%;/*Fullwidthforsmallscreens*/
</style>
</head>
<body>
<divclass="box">Box1</div>
<divclass="box">Box2</div>
<divclass="box">Box3</div>
</body>
</html>
OUTPUT
Practical8
<!DOCTYPEhtml>
<html>
<title>ResponsiveLayoutExample</title>
<style>
body{
font-family:Arial,sans-serif;
}
/*LayoutStyling*/
.container {
display:flex;
flex-wrap:wrap;/*Ensurescontentwrapsforsmallerscreens*/
}
header {
width:100%;
background-color:#4CAF50;
color: white;
padding: 20px;
text-align:center;
}
nav{
width:100%;
background-color:#333;
color: white;
padding: 10px;
text-align:center;
nava{
color: white;
text-decoration:none;
margin: 0 15px;
font-weight:bold;
.main {
flex:2;
padding: 20px;
background-color:#f4f4f4;
.sidebar{
flex: 1;
padding: 20px;
background-color:#ddd;
footer
{width:100%
background-color:#333;
color: white;
text-align:center;
padding: 10px;
/*MediaQueriesforResponsiveDesign*/
@media (max-width: 768px) {
.main,.sidebar{
flex:1;/*Stackmainandsidebarequally*/ width:
100%;
}
}
@media(max-width:480px){
nav a {
display:block;/*Stacknavigationlinksforsmallerscreens*/
margin: 10px 0;
}
}
</style>
</head>
<body>
<header>
<h1>ResponsiveLayout</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<divclass="container">
<div class="main">
<h2>MainContent</h2>
<p>Thisisthemaincontentarea.Ittakesupmorespaceonlargerscreens.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Thisisthesidebararea.Itstacksbelowthemaincontentonsmaller screens.</p>
</div>
</div>
<footer>
<p>©2024ResponsiveLayout</p>
</footer>
</body>
</html>
OUTPUT
Practical 10
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>CSSGridExample</title>
<style>
/*GridContainer*/
.grid-container{
display: grid;
grid-template-columns:1fr1fr1fr;/*Threeequalcolumns*/ gap:
10px; /* Space between grid items */
padding:10px;
/*GridItems*/
.grid-item{
background-color:#4CAF50;
color: white;
text-align: center;
padding: 20px;
border-radius:5px;
/* Responsive Design */
@media(max-width:768px){
.grid-container{
grid-template-columns:1fr1fr;/*Twocolumnsontablets*/
@media(max-width:480px){
.grid-container{
grid-template-columns:1fr;/*Singlecolumnonsmalldevices*/
}
</style>
</head>
<body>
<h1>CSSGridExample</h1>
<divclass="grid-container">
<divclass="grid-item">Item1</div>
<divclass="grid-item">Item2</div>
<divclass="grid-item">Item3</div>
<divclass="grid-item">Item4</div>
<divclass="grid-item">Item5</div>
<divclass="grid-item">Item6</div>
</div>
</body>
</html>
OUTPUT
Practical 11
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>BootstrapResponsiveness</title>
<!--BootstrapCSS-->
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"rel="stylesheet">
</head>
<body>
<divclass="container">
<h1class="text-centermt-4">BootstrapResponsiveGrid</h1>
<!--RowwithColumns-->
<div class="row">
<divclass="col-12col-md-6col-lg-4">
<divclass="p-3borderbg-light">Column1</div>
</div>
<divclass="col-12col-md-6col-lg-4">
<divclass="p-3borderbg-light">Column2</div>
</div>
<divclass="col-12col-md-6col-lg-4">
<divclass="p-3borderbg-light">Column3</div>
</div>
</div>
<!--AnotherRow-->
<divclass="rowmt-4">
<divclass="col-12col-sm-6">
<divclass="p-3borderbg-primarytext-white">50%WidthonSmallScreens</div>
</div>
<divclass="col-12col-sm-6">
<divclass="p-3borderbg-secondarytext-white">50%WidthonSmallScreens</div>
</div>
</div>
</div>
<!--BootstrapJSBundle-->
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OUTPUT
Practical 12
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>BootstrapComponentsDemo</title>
<!--BootstrapCSS-->
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"rel="stylesheet">
</head>
<body>
<divclass="containermt-4">
<h1class="text-centermb-4">BootstrapComponentsDemo</h1>
<!--Buttons-->
<h2>Buttons</h2>
<buttonclass="btnbtn-primary">Primary</button>
<buttonclass="btnbtn-secondary">Secondary</button>
<buttonclass="btnbtn-success">Success</button>
<buttonclass="btnbtn-danger">Danger</button>
<!--Forms-->
<h2class="mt-4">FormControls</h2>
<form>
<divclass="mb-3">
<labelfor="exampleInputEmail1"class="form-label">Emailaddress</label>
<inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp">
<divid="emailHelp"class="form-text">We'llnevershareyouremailwithanyoneelse.</div>
</div>
<divclass="mb-3">
<labelfor="exampleInputPassword1"class="form-label">Password</label>
<inputtype="password"class="form-control"id="exampleInputPassword1">
</div>
<div class="mb-3form-check">
<inputtype="checkbox"class="form-check-input"id="exampleCheck1">
<labelclass="form-check-label"for="exampleCheck1">Rememberme</label>
</div>
<buttontype="submit"class="btnbtn-primary">Submit</button>
</form>
<!--BootstrapJSBundle-->
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OUTPUT
Practical 13
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>SimpleJavaScriptProgram</title>
<style>
#output{
margin-top:20px;
font-size: 18px;
color: #4CAF50;
button{
padding: 10px 20px;
background-color:#007BFF;
color: white;
border-radius:5px;
cursor: pointer;
button:hover { /*hoverpseudoclass*/
background-color: #0056b3;
</style>
</head>
<body>
<h1>SimpleJavaScriptProgram</h1>
<p>Clickthebuttonbelowtodisplayagreetingmessage:</p>
<buttononclick="showMessage()">ClickMe</button>
<pid="output"></p>
<script>
//JavaScriptfunctiontodisplayamessage
function showMessage() {
const outputElement = document.getElementById('output');
outputElement.textContent='Hello,welcometoJavaScriptprogramming!';
}
</script>
</body>
</html>
OUTPUT
Practical 14
<!DOCTYPE html>
<html>
<head>
<title>JavaScriptFunctionsExample</title>
<style>
input, button {
margin: 10px;
padding: 10px;
font-size:16px;
button{
background-color:#007BFF;
color: white;
border: none;
border-radius:5px;
cursor: pointer;
}
button:hover{
background-color:#0056b3;
#result{
margin-top:20px;
font-size: 18px;
color: #4CAF50;
}
</style>
</head>
<body>
<h1>JavaScriptFunctionsExample</h1>
<p>Enteranumbertocalculateits square:</p>
<inputtype="number"id="numberInput"placeholder="Enteranumber">
<buttononclick="calculateSquare()">CalculateSquare</button>
<pid="result"></p>
<script>
//Functiontocalculatethesquareofanumber
function calculateSquare() {
letinput=document.getElementById('numberInput').value;//Gettheuserinput input =
parseInt(input);
letresultElement= document.getElementById('result');
//Validateinput if
(input === '') {
resultElement.innerHTML='Pleaseenteranumber!';
return;
// Calculate the
squareletsquare=input*i
nput;
//Displaythe result
resultElement.innerHTML='Thesquareof'+input+"is"+square;
</script>
</body>
</html>
OUTPUT
Practical 15
<!DOCTYPEhtml>
<html>
<head>
<title>DOMManipulationExample</title>
<style>
body{
text-align:center;
}
input, button {
margin: 10px;
padding: 10px;
font-size:16px;
button{
background-color:#007BFF;
color: white;
cursor: pointer;
}
button:hover{
background-color:#0056b3;
</style>
</head>
<body>
<h1>DOMManipulationExample</h1>
<p>Enteracolornameorhexcodetochangethebackgroundcolor:</p>
<inputtype="text"id="colorInput"placeholder="e.g.,redor#ff5733">
<buttononclick="changeBackgroundColor()">ChangeColor</button>
<pid="message"></p>
<script>
//Functiontochangethebackgroundcolor function
changeBackgroundColor() {
letcolorInput=document.getElementById('colorInput').value;//Getuserinput
letmessage=document.getElementById('message');//Selectthemessageelement
// Change the background color of the body
document.body.style.backgroundColor=colorInput;
//Updatethemessage
message.innerHTML='Backgroundcolorchangedto:'+colorInput;
</script>
</body>
</html>
OUTPUT
Practical 16
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>AutoImageSlider</title>
<style>
.slider{
position: relative;
max-width:500px;
margin: 0 auto;
overflow: hidden;
border:2pxsolid#ddd;
border-radius: 10px;
.slider img {
width:100%;
display:none;/*Hideallimagesbydefault*/
.sliderimg.active{
display:block;/*Showtheactiveimage*/
.controls{
margin-top:10px;
.controlsbutton{
padding:10px20px;
margin: 5px;
font-size: 16px;
border: none;
border-radius:5px;
cursor: pointer;
.controls button:hover {
background-color:#ddd;
</style>
</head>
<body>
<h1>AutoImageSlider</h1>
<divclass="slider">
<imgsrc="https://via.placeholder.com/500x300?text=Image+1"class="active"alt="Image1">
<imgsrc="https://via.placeholder.com/500x300?text=Image+2"alt="Image2">
<imgsrc="https://via.placeholder.com/500x300?text=Image+3"alt="Image3">
</div>
<divclass="controls">
<buttononclick="prevSlide()">Previous</button>
<buttononclick="nextSlide()">Next</button>
</div>
<script>
//JavaScriptfortheslider let
currentSlide = 0;
letslides=document.querySelectorAll('.sliderimg');
letintervalTime=3000;//Timeintervalinmilliseconds(3seconds) let
autoSlideInterval;
// Show a specific slide
functionshowSlide(index){
slides.forEach(slide=>slide.classList.remove('active'));//Hideallslides
slides[index].classList.add('active'); // Show the current slide
//Showthenextslide
function nextSlide() {
currentSlide=(currentSlide+1)%slides.length;//Loopbacktothefirstslide
showSlide(currentSlide);
//Showthepreviousslide
function prevSlide() {
currentSlide=(currentSlide-1+slides.length)%slides.length;//Loopbacktothelastslide showSlide(currentSlide);
// Start auto-sliding
functionstartAutoSlide(){
autoSlideInterval=setInterval(nextSlide,intervalTime);
}
// Stop auto-sliding
functionstopAutoSlide(){
clearInterval(autoSlideInterval);
}
//Startauto-slidewhenthepageloads
window.onload = startAutoSlide;
// Pause auto-slideonhover
let slider = document.querySelector('.slider');
slider.addEventListener('mouseover',stopAutoSlide);
slider.addEventListener('mouseout', startAutoSlide);
</script>
</body>
</html>
OUTPUT
Practical 17
<!DOCTYPEhtml>
<html>
<head>
<title>JavaScriptAlerts,Confirms,andPrompts</title>
<style>b
utton{
margin: 10px;
padding:10px20px;
font-size: 16px;
background-color:#007BFF;
color: white;
border: none;
border-radius:5px;
cursor: pointer;
button:hover{
background-color:#0056b3;
#output{
margin-top:20px;
font-size: 18px;
color: #4CAF50;
}
</style>
</head>
<body>
<h1>JavaScriptAlerts,Confirms,andPrompts</h1>
<buttononclick="showAlert()">ShowAlert</button>
<buttononclick="showConfirm()">ShowConfirm</button>
<buttononclick="showPrompt()">ShowPrompt</button>
<pid="output"></p>
<script>
//Functiontodemonstratealert function
showAlert() {
alert("Thisisanalertbox!ClickOKtocontinue.");
//Functiontodemonstrateconfirm function
showConfirm() {
letuserResponse=confirm("Doyoulikethisdemo?"); let
output = document.getElementById('output');
if(userResponse){
output.innerHTML="YouclickedOK!";
}else {
output.innerHTML="YouclickedCancel!";
//Functiontodemonstrateprompt function
showPrompt() {
let userInput = prompt("What is your name?");
letoutput=document.getElementById('output');
if(userInput){
output.innerHTML="Hello,"+userInput+"!Welcometothedemo.";
}else {
output.innerHTML="Youdidnotenteranything.";
}
</script>
</body>
</html>
OUTPUT
Practical 18
<!DOCTYPEhtml>
<html>
<head>
<title>PasswordValidation</title>
<style>
form{
max-width: 300px;
margin: 0 auto;
padding:
20px;border:1pxsolid
#ccc; border-radius:
5px;
}
input{
width: 100%;
padding: 10px;
margin:10px0;
border:1pxsolid#ccc;
border-radius: 5px;
}
button {
width:100%;
padding:10px;
background-color:#007BFF;
color: white;
border: none;
border-radius:5px;
cursor: pointer;
}
button:hover{
background-color:#0056b3;
.error {
color:red;
font-size:14px;
}
.info{
color: green;
font-size:14px;
}
</style>
</head>
<body>
<h1>PasswordValidation</h1>
<formid="passwordForm"onsubmit="returnvalidateForm()">
<inputtype="text"id="name"placeholder="Name">
<pclass="error"id="nameError"></p>
<inputtype="email"id="email"placeholder="Email">
<pclass="error"id="emailError"></p>
<inputtype="password"id="password"placeholder="Password">
<pclass="error"id="passwordError"></p>
<pclass="info"id="passwordInfo"></p>
<buttontype="submit">Submit</button>
</form>
<script>
functionvalidateForm(){
let isValid = true;
//Getinputvalues
constname=document.getElementById("name").value.trim();
constemail=document.getElementById("email").value.trim();
constpassword=document.getElementById("password").value.trim();
//Geterrorelements
constnameError=document.getElementById("nameError");
constemailError=document.getElementById("emailError");
constpasswordError=document.getElementById("passwordError"); const
passwordInfo = document.getElementById("passwordInfo");
//Clearpreviouserrormessages
nameError.innerHTML = "";
emailError.innerHTML = "";
passwordError.innerHTML = "";
passwordInfo.innerHTML = "";
//Validatename
if(name===""){
nameError.innerHTML="Nameisrequired.";
isValid = false;
//Validateemail
if(email===""){
emailError.innerHTML="Emailisrequired.";
isValid = false;
}
//Validatepassword
if(password===""){
passwordError.innerHTML="Passwordisrequired.";
isValid = false;
}elseif(password.length<6){
passwordError.innerHTML="Passwordmustbeatleast6characterslong.";
isValid = false;
}else {
passwordInfo.innerHTML="Passwordlength:"+password.length+"characters";
returnisValid;//Returntrueiftheformisvalid
</script>
</body>
</html>
OUTPUT
Practical 19
<!DOCTYPEhtml>
<html>
<head>
<title>jQueryExample</title>
<!--IncludejQueryfromaCDN-->
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body{
text-align:center;
button {
margin:10px;
padding:10px20px;
font-size: 16px;
background-color:#007BFF;
color: white;
cursor: pointer;
button:hover{
background-color:#0056b3;
</style>
</head>
<body>
<h1>SimplejQueryExample</h1>
<pid="message">Thisisaparagraphthatcanbehiddenorshown.</p>
<buttonid="hideButton">Hide</button>
<buttonid="showButton">Show</button>
<script>
//jQueryreadyfunction
$(document).ready(function(){
//Hidetheparagraphwhen"Hide"buttonisclicked
$("#hideButton").click(function(){
$("#message").hide();
});
//Showtheparagraphwhen"Show"buttonisclicked
$("#showButton").click(function(){
$("#message").show();
});
});
</script>
</body>
</html>
OUTPUT
Practical 20
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metaname="description"content="LearnthebasicsofSEOwiththissimpleandoptimizedHTMLwebpage.Follow best
practices for better search engine rankings.">
<metaname="keywords"content="SEO,HTML,BestPractices,WebpageOptimization">
<metaname="author"content="YourName">
<title>SEOBestPracticesinHTML</title>
<linkrel="stylesheet"href="styles.css">
<linkrel="canonical"href="https://www.example.com/seo-best-practices">
<!--OpenGraphforSocialSharing-->
<metaproperty="og:title"content="SEOBestPracticesinHTML">
<metaproperty="og:description"content="LearnthebasicsofSEOwiththissimpleandoptimizedHTMLwebpage.">
<metaproperty="og:url"content="https://www.example.com/seo-best-practices">
<metaproperty="og:image"content="https://www.example.com/images/seo-preview.png">
<!--Favicon-->
<linkrel="icon"href="favicon.ico"type="image/x-icon">
</head>
<body>
<header>
<h1>SEOBestPractices</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Whatis SEO?</h2>
<p>SearchEngineOptimization(SEO)isthepracticeofoptimizingyourwebsitetoimproveitsvisibilityonsearch engines
like Google.</p>
</section>
<section>
<h2>ImageOptimizationExample</h2>
<imgsrc="https://www.example.com/images/seo-tips.png"alt="SEOTipsInfographic">
</section>
<section>
<h2>ContentisKing</h2>
<p>Focusoncreatinghigh-quality,informative,andengagingcontentthataddsvaluetoyouraudience.Avoid keyword
stuffing and prioritize user experience.</p>
</section>
</main>
<footer>
<p>©2024YourName.Allrightsreserved.</p>
<p><ahref="https://www.example.com/privacy-policy">PrivacyPolicy</a></p>
</footer>
</body>
</html>
OUTPUT
