Scribd
Upload
371 views

Assignment - 1 HTML & CSS: Output

The document contains steps to create an HTML assignment with CSS styling. It includes 6 steps to create different blog pages and style them with CSS. It also includes 3 questions with steps to create JavaScript documentation pages, frame them together, and create a curriculum vitae page with a styled table. The final part includes the start of a website for a kitten daycare service with navigation.

Uploaded by

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

Assignment - 1 HTML & CSS: Output

The document contains steps to create an HTML assignment with CSS styling. It includes 6 steps to create different blog pages and style them with CSS. It also includes 3 questions with steps to create JavaScript documentation pages, frame them together, and create a curriculum vitae page with a styled table. The final part includes the start of a website for a kitten daycare service with navigation.

Uploaded by

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

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy