EX.NO.
8 CREATE A WEBSITE USING HTML: TO EMBED AN IMAGE MAP IN A
WEB
PAGE, TO FIX THE HOT SPOTS
AIM:
To create a web page with the following using HTML
a. To embed a map in a web page
b. To fix the hot spots in that map
c. Show all the related information when the hot spots are clicked.
DESCRIPTION:
<img> tag is used to add the image to our webpage.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>INDIA MAP</title>
</head>
<body>
</map>
</body>
</html>
OUTPUT:
RESULT:
Thus the program is executed and results were obtained successfully.
EX.NO. 9 APPLY STYLE SPECIFICATIONS IN HTML PAGE USING CSS
AIM:
To apply the style specifications in HTML page using CSS
DESCRIPTION:
CSS is used to apply the style in the web page which is made up of HTML
elements. It describes
the look of the webpage.
CSS provides various style properties such as background color, padding,
margin, border-color,
and many more, to style a webpage.
Each property in CSS has a name-value pair, and each property is
separated by a semicolon (;).
To use CSS with HTML documents, there are three ways:
o Inline CSS: Define CSS properties using style attribute in the HTML
elements.
o Internal or Embedded CSS: Define CSS using <style> tag in <head>
section.
o External CSS: Define all CSS property in a separate .css file, and then
include the file with
HTML file using tag in section.
1) Inline CSS:
Inline CSS is used to apply CSS in a single element. It can apply style
uniquely in each element.
To apply inline CSS, you need to use style attributes within HTML element.
We can use as many
properties as we want, but each property should be separated by a
semicolon (;).
2) Internal CSS:
An Internal stylesheet contains the CSS properties for a webpage in
<head> section of HTML
document. To use Internal CSS, we can use class and id attributes.
We can use internal CSS to apply a style for a single HTML page.
3) External CSS:
An external CSS contains a separate CSS file which only contains style
code using the class
name, id name, tag name, etc. We can use this CSS file in any HTML file
by including it in
HTML file using <link> tag.
If we have multiple HTML pages for an application and which use similar
CSS, then we can use
external CSS.
There are two files need to create to apply external CSS
o First, create the HTML file
o Create a CSS file and save it using the .css extension (This file only will
only contain the styling
code.)
o Link the CSS file in your HTML file using tag in header section of HTML
document.
SOURCE CODE:
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Learning HTML with External CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">Thisis a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
Style.css:
body{
background-color:lavender;
text-align:center;
h2{
font-style:italic;
size:30px;
color:#f08080;
p{
font-size:20px;
.blue{
color:blue;
.red{
color:red;
.green{
color:green
OUTPUT:
RESULT:
Hence the output for the sample code using basic HTML tags has been
displayed
EX.NO. 10
DEVELOPING DYNAMIC WEB APPLICATION USING HTML, CSS AND
JAVASCRIPT
AIM:
To develop a dynamic web application using HTML, CSS and JavaScript.
DESCRIPTION:
Step1: Create a HTML, CSS and JavaScript files and link them using style
tag and script tag
Respectively.
Step 2:
Step 3: Using JavaScript manipulate the buttons to increase and decrease
the size of the heading.
Step 4: Now create an input box and
Step 5: Now in JavaScript create an variables templi, tempdiv and tempbtn
and create element by create
Element function and create li, div, button and equate it to the above
variables.
Step 6: Now manipulate it such that when user clicks enter the input get
displayed as list and when we
click on the element then we should strike the list and when we click the
button the entire element gets
removed using addEventListener function.
Step 7: Create two input boxes such that we could select colors in it.
Step 8: Now manipulate it such that when we change colors then the
linear gradient of the background
changes.
SOURCE CODE:
Homepage.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping List</h1>
<div class="button-container">
<button id ="inc" class="top">Increase</button>
<button id ="dec" class="top">Decrease</button>
</div>
<p id="first">Get it done today</p>
<input id="input" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul id="todo">
</ul>
<label for ="color">Enter the color</label>
<input id="color1" type="color" name="color" class="col">
<input id="color2" type="color" name="color" class="col">
<script type="text/javascript" src="script.js"></script>
<h3> </h3>
</body>
</html>
CSS:
Style.css
*{
font-size: medium;
}
body{
margin-left: 40%;
background-image: linear-gradient(to right,yellow,red);
h1{
font-size: 32px;
.coolTitle {
text-align: center;
font-family: 'Oswald', Helvetica, sans-serif;
font-size: 40px;
transform: skewY(-10deg);
letter-spacing: 4px;
word-spacing: -8px;
color: tomato;
text-shadow:
-1px -1px firebrick,
-2px -2px firebrick,
-3px -3px firebrick,
-4px -4px firebrick,
-5px -5px firebrick,
-6px -6px firebrick,
-7px -7px firebrick,
-8px -8px firebrick,
-30px 20px 40px dimgrey;
.done {
text-decoration: line-through;
}
li{
font-size: larger;
.button-container{
display: flex;
gap:20px;
.top{
font-size: 15px;
background-color: green;
color: #f5f5f6;
border:0;
border-radius: 20px;
.top:hover{
background-color:red;
.flex{
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 10px;
margin-bottom: 10px;
.buttons {
margin-left: 10px;
border:0;
border-radius: 20px;
background-color: green;
color: #f5f5f6;
.buttons:hover{
background-color:red;
.col{
margin: 10px;
h3{
color: #f5f5f6;
JAVASCRIPT
Script.js
let h1 = document.querySelector("h1");
let inc=document.querySelector("#inc");
let dec =document.querySelector("#dec");
let s = 32;
function SizeIncrement(){
s+=2;
h1.style.fontSize=s+"px";
function SizeDecrement(){
s-=2;
h1.style.fontSize=s+"px";
inc.addEventListener("click", SizeIncrement);
dec.addEventListener("click", SizeDecrement);
let btn=document.querySelector("#enter");
let input=document.querySelector("#input");
let ul=document.querySelector("#todo");
function checkLength(){
return input.value.length;
function Adder(){
var templi=document.createElement("li");
var tempbtn=document.createElement("button");
var tempdiv=document.createElement("div");
tempbtn.classList.add("buttons");
tempdiv.classList.add("flex");
templi.classList.add("lii");
templi.appendChild(document.createTextNode(input.value));
tempbtn.innerHTML="delete";
ul.appendChild(tempdiv);
tempdiv.append(templi,tempbtn);
input.value="";
function AddByClick(){
if(checkLength()>0){
Adder();
function AddByPress(event){
if(checkLength()>0 &&event.which===13){
Adder();
}
function deleted(element){
if(element.target.className==="buttons")
element.target.parentElement.remove();
var con=1;
function done(element){
if(element.target.className==="lii"&&con==1)
element.target.classList.add("done");
con = 0;
else if(element.target.className==="lii"&&con==0)
element.target.classList.remove("done");
con = 1;
function Checker(element){
deleted(element);
done(element);
btn.addEventListener("click",AddByClick);
input.addEventListener("keypress",AddByPress);
ul.addEventListener("click",Checker);
let body = document.querySelector("body");
let c1= document.querySelector("#color1");
let c2= document.querySelector("#color2");
let p=document.querySelector("h3");
function ColorOneChanger(){
body.style.backgroundImage="linear-gradient(to
right,"+c1.value+","+c2.value+")";
// p.innerHTML= c1.value+","+c2.value;
p.textContent = c1.value+","+c2.value; }
function ColorTwoChanger(){
body.style.backgroundImage="linear-gradient(to
right,"+c1.value+","+c2.value+")" }
c1.addEventListener("input",ColorOneChanger);
c2.addEventListener("input",ColorTwoChanger);
OUTPUT:
RESULT:
Thus the above program was successfully completed and verified.
