Scribd
Upload
15 views15 pages

F 910

Uploaded by

md21arshad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views15 pages

F 910

Uploaded by

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

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.

You might also like