Name – Sahil Sarwar (150)
Assignment -1 HTML & CSS
Question 1
Step 1
<html>
<head>
<link rel="stylesheet" type="text/css" href="blog1.css">
<title>blog1</title>
</head>
<body>
<p>My blog about my life</p>
</body>
</html>
CSS
p{
text-align:center;
margin-top:30px;
font-weight:bold;
background-color:yellow;
font-size:38px;
}
Output
Step 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog2</title>
Name – Sahil Sarwar (150)
<link rel="stylesheet" href="blog2.css">
</head>
<body>
<h3>Menu</h3>
<p>
<a href="#">Today</a>
<br>
<a href="#">Yesterday</a>
<br>
<a href="#">Last Week</a>
<br>
<a href="#">Archives</a>
</p>
</body>
</html>
CSS
h3{
font-size: 30px;
font-weight: bolder;
}
p{
text-align: left;
font-size: 20px;
}
Output
Step 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog3</title>
Name – Sahil Sarwar (150)
<link rel="stylesheet" href="blog3.css">
</head>
<body>
<ul>
<li class="lista">
Meeting with superwiser
</li>
<li class="listb">14 Dec 2011</li>
<li>Today I went to university by bus</li>
<li>I had a meet with my PhD superviser</li>
</ul>
<ul>
<li class="lista">
New Car!!!
</li>
<li class="listb">12 Dec 2011</li>
<li>Today I bought my new car. It's a Honda Accord and it's a really nice.</li>
<li>I met some friends at a pub.</li>
</ul>
<ul>
<li class="lista">
Visit my parents
</li>
<li class="listb">10 Dec 2011</li>
<li>Tried to contact my PhD superviser. He was out of his office.</li>
<li>I visited my parents and we had a nice dinner together.</li>
</ul>
</body>
</html>
CSS
body{
border-left: 3px solid green;
}
li{
padding: 15px;
font-size: 25px;
text-align: left;
}
.lista{
font-size: 30px;
font-weight: bolder;
padding: 15px;
}
.listb{
font-size: 25px;
font-weight: bold;
Name – Sahil Sarwar (150)
padding: 15px;
text-align: left;
}
ul{
padding: 15px;
list-style: none;
}
Output
Step 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog4</title>
<link rel="stylesheet" href="blog4.css">
</head>
<body>
<h3>Last points</h3>
<p>
<a href="#">Meeting with supervisor</a>
<br>
<a href="#">New Car!!!</a>
<br>
<a href="#">Visit my parents</a>
</p>
</body>
</html>
CSS
body{
border: 3px dashed green;
}
Name – Sahil Sarwar (150)
h3{
font-size: 35px;
font-weight: bolder;
text-align: right;
padding: 2px;
}
p{
font-size: 25px;
padding: 2px;
text-align: right;
}
Output
Step 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog5</title>
</head>
<body>
<center>
<p>
Contact us:
<a href="#">email@something.com</a>
</p>
</center>
</body>
</html>
Name – Sahil Sarwar (150)
Output
Step 6
<frameset rows="10%,*,10%" frameborder="no">
<frame src="blog1.html">
</frame>
<frameset cols="15%,70%,15%">
<frame src="blog2.html"></frame>
<frame src="blog3.html"></frame>
<frame src="blog4.html"></frame>
</frameset>
<frame src="blog5.html"></frame>
</frameset>
Output
Question 2
Step 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Name – Sahil Sarwar (150)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS1</title>
<link rel="stylesheet" href="js1.css">
</head>
<body>
<h3>JS Documentation</h3>
<hr size="3">
<p>Introduction</p>
<hr size="3">
<p>What you should already know</p>
<hr size="3">
<p>JavaScript and Java</p>
<hr size="3">
<p>Hello World</p>
<hr size="3">
<p>Variables</p>
<hr size="3">
<p>Declaring Variables</p>
<hr size="3">
<p>Variable scope</p>
<hr size="3">
</body>
</html>
CSS
h3{
font-size: 50px;
font-weight: bolder;
font-family: Tahoma;
padding-left: 60px;
}
p{
font-size: 30px;
font-family: Tahoma;
padding-left: 60px;
color: grey;
}
body{
margin-left: 5%;
}
Name – Sahil Sarwar (150)
Output
Step 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS2</title>
<link rel="stylesheet" href="js2.css">
</head>
<body>
<h3>Introduction</h3>
<p>JavaScript is a cross-platform,object-
oriented scripting language. It is a small and lightweight language. Inside a
host environment(for example- a web browser), JavaScript can be connected to t
he objects of its environment to provide programmatic control over them.</p>
<p>JavaScript contains a standard library of objects, such as Array, Date
and Math, and a core set of language elements such as operators, controlb stru
ctures, and statements. core JavaScript can be extended for a variety of purpo
ses by supplementing it with additional objects: for example:</p>
<ul>
<li>Client side JavaScript extends the core language by supplying
</li>
</ul>
</body>
</html>
CSS
h3{
font-weight: bolder;
font-size: 45px;
margin-top: 50px;
margin-left: 5%;
Name – Sahil Sarwar (150)
}
p{
font-size: 40px;
margin-top: 10px;
margin-left: 10%;
padding-top: 10px;
color: grey;
}
li{
font-size: 40px;
margin-right: 10%;
margin-left: 10%;
color: grey;
}
body{
padding-right: 10%;
}
Output
Step 3
<html>
<head>
<title>My JS</title>
</head>
<frameset cols="30%,*" noresize="true">
<frame src="js1.html">
<frame src="js2.html">
</frameset>
</html>
Name – Sahil Sarwar (150)
Output
Question 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<link rel="stylesheet" href="table.css">
</head>
<body>
<h3>
CURRICULUM
<br>
VITAE
</h3>
<header>
PERSINAL DATA
</header>
<P>
<i>Name:</i>
Azamat
<br>
<i>Surname:</i>
Azamat
<br>
<i>Date of birth:</i>
30.07.74
<br>
<i>Place of birth:</i>
Bishkek, Kyrgystan
</P>
Name – Sahil Sarwar (150)
<header>
EDUCATION
</header>
<table>
<tbody>
<tr>
<td class="l">2005-2009</td>
<td class="r">Computer Engineering inthe technocal University
of Kyrgystan in Bishkek</td>
</tr>
<tr>
<td class="l">2001-2005</td>
<td class="r">High School "Manas" in Osh</td>
</tr>
<tr>
<td class="l">1995-2001</td>
<td class="r">Primary School</td>
</tr>
</tbody>
</table>
<header>
PROFESSIONAL EXPERIENCE
</header>
<table>
<tbody>
<tr>
><td class="l">2007-2009</td>
<td class="r">Computer teacher in High School in Bishkek</td>
</tr>
<tr>
<td class="l">2005-2007</td>
<td class="r">Secretary of Department of Software</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS
body{
border:3px solid black;
margin: auto;
width:35%;
Name – Sahil Sarwar (150)
height:55%;
}
h3{
text-align: center;
background-color: lightgray;
color: blue;
letter-spacing: 8px;
font-weight: bolder;
font-size: 40px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
}
p{
font-family:Arial, Helvetica, sans-serif;
font-size: 25px;
margin-left:10px;
margin-top:0;
padding-bottom: 50px;
}
header{
font-weight: bold;
font-size: 30px;
color: brown;
letter-spacing: 8px;
margin-left: 10px;
}
table{
padding:20px;
}
td{
font-family:Arial, Helvetica, sans-serif;
margin-left:7px;
padding-bottom:20px;
}
td.l{
font-weight: bold;
font-size: 25px;
padding-left: 20px;
padding-right: 50px;
font-family:Arial, Helvetica, sans-serif;
width: 250px;
}
td.r{
font-size: 25px;
font-family:Arial, Helvetica, sans-serif;
}
Name – Sahil Sarwar (150)
Output
Question 4
Step 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kitten Kare</title>
<link rel="stylesheet" href="kitten.css">
</head>
<body>
<h3>Kitten Kare</h3>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</body>
</html>
CSS
h3{
font-size: 50px;
background-color: lightgrey;
padding: 30px;
Name – Sahil Sarwar (150)
margin-bottom: 0px;
}
.navbar{
background-color: black;
}
.navbar ul{
overflow: auto;
margin: 0px;
padding: 1px;
}
.navbar li{
float: left;
list-style: none;
margin: 6px 6px;
border-right: 2px solid white;
padding-right: 10px;
}
.navbar li a{
padding: 3px 3px;
text-decoration: none;
color: white;
font-size: 30px;
}
body{
margin-left: 30px;
}
Output
Step 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kitten2</title>
Name – Sahil Sarwar (150)
<link rel="stylesheet" href="kitten2.css">
</head>
<body>
<h3>Welcome!</h3>
<img src="bear1.jpg" alt="Image Not Fount">
<p>The domestic cat[1][2](Feelixx catus[2] or Felix Silvestris Catus[4], i
nformally Felis Domesticus[6][7] is a small, usually furry, domesticated, carn
ivorous mammal. It is often called the housecat when kept as an indoor pet,[8]
or simply the cat when there is no need to distinguish it from other felids o
r felines Cats are valued by humans for companionship and the ability to hunt
vermins and household pests. They are primarily nocturnal.[9]</p>
<p>Cats are similar in anatomy to the other felids, with strong, flexible
bodies, quick reflexes and sharp retractable claws.</p>
</body>
</html>
CSS
h3{
font-size: 50px;
font-weight: bold;
}
p{
font-size: 30px;
}
body{
padding-left: 100px;
}
Output
Step 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kitten3</title>
Name – Sahil Sarwar (150)
<link rel="stylesheet" href="kitten3.css">
</head>
<body>
<h3>Cat Body Types</h3>
<table>
<ul>
<li>Oriental</li>
<li>Foreign</li>
<li>Semi-Forign</li>
<li>Seme-Cobby</li>
<li>Cobby</li>
</ul>
</table>
</body>
</html>
CSS
h3{
font-size: 40px;
font-weight: bold;
}
li{
font-size: 30px;
}
Output
Stop 4
<html
><head>
<title>Kitten Kare</title>
</head>
<frameset rows="13%,80%" frameborder="no">
<frame src="kitten.html">
<frameset cols="70%,9%" frameborder="no">
<frame src="kitten2.html">
Name – Sahil Sarwar (150)
<frame src="kitten3.html">
</frameset>
</frameset>
</html>
Output
