Web Tech: Assignment

WEB TECH
ASSIGNMENT
- DIVYA UDAYAN
RISHI RAJ GUPTA
18BIT0195

1) Introduction to HTML
a. Create a webpage that prints your name to the screen.
CODE:
<HTML>
<HEAD>
<TITLE>Welcome </TITLE>
</HEAD>
<BODY>
<H1> RISHI RAJ GUPTA </H1>
</BODY>
</HTML>
1

b. Create a webpage that prints the numbers 1 - 10 to the screen.
CODE:
<html>
<body>

1 2 3 4 5 6 7 8 9 10
</body>
</html>
c. Create a webpage and set its title to "This is a webpage".
CODE:
<html>
<head>

<title>This is a webpage</title>
</head>
<body>
The title tag goes in the head section of an HTML document.
</p>
</body>
2

</html>
d. Create a webpage that prints the message "When was this webpage created?Check page's title for the
answer." to the screen, and set the title of the page to the current date.
Code:
<html>
<head>
<title>18 july, 2019</title>
</head>
<body>

When was this webpage created?
Check page's title for the answer.
</body>
</html>
3

e. Create a webpage that prints any text of your choice to the screen; do not
include a head section in the code.
f. Create a webpage which keeps track of the browsers information and do the following
refreshes its page in 5 seconds, expires in a duration of time
CODE:
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello to HTML</p>
</body>
</html>
4

2
HTML TEXT EXERCISES
a. Print your name in green
b. Print the numbers 1 - 10, each number being a different color.

5

c. Prints your name in a Tahoma font.
Code:
<html>
<body>
<font face="Tahoma">abc</font>
</body>
</html>
d. Display a part of a word with bold underline.
Code:
<html>
<body>
<font face="ariel"><b><U>Under</U></b><BR></font>
</body>
6

</html>
e. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font
Code:
<html>
<body>
<p>
<font face="Courier New">
HTML full for is Hyper Text Markup Language.
</font>
<font face="Times New Roman">
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
</font>
<font face="Helvetica">
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page
7

</font>
<font face="Georgia">
HTML is used to specify the way webpages look, not how they
function.
</font>
</p>
</body>
</html>
f. Print a paragraph that is a description of a book; include the title of the book as well
as its author. Names and titles should be underlined, adjectives should be italicized
and bolded.
CODE:
<html>
<body>
8

<p>
A book which is worth reading is <u>The hope</u> by <u>RISHI RAJ</u>. This book is about a life
who begins arranging his ways in life when some thing unusal
occurs within his firm. Consequently, he becomes acquainted with the inner city streets, and
realizes the harsh existence of the homeless, and vows to give them a chance in the life. <u>The
Hope</u> is a <b><i>great</i></b>
book. It is <b><i>perfect written</i></b> and <b><i>interesting</i></b>. Other books by <u>RISHI

RAJ</u> include <u>The ODOUR</u>, <u>The BELIEF</u>, and <u>The CLUE</u>.
</p>
</body>
</html>
g. Print your name to the screen with every letter being a different heading size.
CODE:
<html>
<body>
<h5>R</h5>
<h4>I</h4>
9

<h3>S</h3>
<h2>H</h2>
<h1>I</h1>
</body>
</html>
h. Write a comment line on your code and make sure it is not displayed in the page
CODE:
<html>
<head> 
<title>This is document title</title>
</head> 
<body>
10

<p>Document content goes here.....</p>
</body>
</html>
i. Print a2+b2=2ab
j. Print H2O
<html>
<head>
</head>
<body>
<p>Document content goes here.....</p>
<p>a<sup>2</sup>+b<sup>2</sup>=2ab</p>
11

<p>H <sub> 2 </sub>O
</body>
</html>
k. Display a c code as it is in the page
Code:
<html>
<head>
</head>
<body>
#include<stdio.h> <br>
int main()<br>
{
<p>printf() displays the string inside quotation</p>
<p>printf("Hello, World!");</p>
12

<p>return 0;</p>
}<br>
</body><br>
</html>
l. Set the background color of the page as yellow
13

m. Set an image as background of the page
n. Set the font size as 10. Print it. Again try to decrease the font size. Check whether
the font size is reduced.
CODE:
<HTML>
<HEAD>
<TITLE>Welcome </TITLE>
</HEAD>
<BODY bgcolor="yellow">
<FONT COLOR="green" SIZE="10" FACE="Arial">
RISHI RAJ GUPTA
<FONT COLOR="green" SIZE="4" FACE="Arial"><BR>
RISHI RAJ GUPTA
</body>
</HTML>
14

o. Apply marquee for your name
CODE:
<MARQUEE>RISHI RAJ GUPTA </MARQUEE>
15

p. Display a paragraph contents in a single line.
3) HTML TEXT FORMATTING, LISTS EXERCISES
a. Print the squares of the numbers 1 - 20. Each number should be on a separate line,
next to it the number 2 superscripted, an equal sign and the result.
Code:
<html>
<body>
1<sup>2</sup> = 1
<br />
2<sup>2</sup> = 4
<br />
3<sup>2</sup> = 9
<br />
4<sup>2</sup> = 16
<br />
5<sup>2</sup> = 25
<br />
6<sup>2</sup> = 36
<br />
7<sup>2</sup> = 49
16

<br />
8<sup>2</sup> = 64
<br />
9<sup>2</sup> = 81
<br />
10<sup>2</sup> = 100
<br />
11<sup>2</sup> = 121
<br />
12<sup>2</sup> = 144
<br />
13<sup>2</sup> = 169
<br />
14<sup>2</sup> = 196
<br />
15<sup>2</sup> = 225
<br />
16<sup>2</sup> = 256
<br />
17<sup>2</sup> = 289
<br />
18<sup>2</sup> = 324
<br />
19<sup>2</sup> = 361
17

<br />
20<sup>2</sup> = 400
</body>
</html>
b. Prints 10 names with a line break between each name. The list should be
alphabetized, and to do this place a subscripted number next to each name based on
where it will go in the alphabetized list. (Example: Alan1). Print first, the
unalphabetized list with a subscript number next to each name, then the
alphabetized list. Both lists should have an <h1> level heading.
18

Code:
<html>
<body>
<h1>Unalphabetized list</h1>
Boby<sub>3</sub>
<br />
Ram<sub>5</sub>
<br />
Sundra<sub>6</sub>
<br />
Sita<sub>7</sub>
<br />
Wasim<sub>10</sub>
<br />
Thakur<sub>8</sub>
<br />
Wazib<sub>9</sub>
<br />
Jaan<sub>4</sub>
<br />
Aman<sub>1</sub>
<br />
Anna<sub>2</sub>
19

<h1>Alphabetized list</h1>
Aman
<br />
Anna
<br />
Boby
<br />
Jaan
<br />
Ram
<br />
Sundar
<br />
Sita
<br />
Thakur
<br />
Wasim
<br />
Wazib
</body>
</html>
20

c. Print two lists with any information you want. One list should be an ordered list,
the other list should be an unordered list
code:
<html>
<body>
<b>Hardware </b>
<ol type="I">
<li>monitor</li>
<li>mouse</li>
<li>Hard disk</li>
21

<li>cpu</li>
</ol>
<b>Software</b>
<ul type="square">
<li>utorrent</li>
<li>chrome</li>
<li>cpp</li>
<li>microsoft office</li>
</ul>
</body>
</html>
22

d. Print a list which starts with 7 with the type i

Code:
<html>
<body>
<b>beverage </b>
<ol type="I" start="7">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
23

e. Prints an h1 level heading followed by a horizontal line whose width is 100%.
Below the horizontal line print a paragraph relating to the text in the heading.
Code:
<html>
<body>
<h1>Biscuit</h1>
<hr width="100%" />
<p>
a small baked unleavened cake, typically crisp, flat, and sweet.
"a chocolate biscuit .synonyms: cracker, wafer.
Porcelain or other pottery which has been fired but not glazed.
"biscuit ware".
</p>
</body>
</html>
24

f. Print a definition list with 5 items
<html>
<body>
<dl>
<dt>Cpp</dt>
<dd>A programming language</dd>
<dt>Hammer</dt>
<dd>A tool</dd>
<dt>Tomato</dt>
<dd>A vegetable</dd>
<dt>Technology</dt>
<dd>The development of tools which serve as a means to
certain objectives</dd>
<dt>Megabyte</dt>
25

<dd>A unit of data consisting of 1024 kilobytes</dd>
</dl>
</body>
</html>
g. Print two addresses in the same format used on the front of envelopes (senders
address in top left corner, receivers address in the center)
Code;
<html>
<body>
<address>
Rishi raj gupta<br />
1234 vellore Street<br />
P.O. Box 632014
26

</address>
<br /><br />
<center>
<address>
Shubhum<br />
55 Street lucknow<br />
Metrpolitan, delhi 11111
</address>
</center>
</body>
</html>
27

h. Print ten acronyms and abbreviations of your choosing, each separated by two
lines. Specify the data that the abbreviations and acronyms represent
Code:
<html>
<body>
<abbr title="Abstract">Abstr.</abbr>
<br /><br />
<abbr title="Biochemistry">Biochem.</abbr>
<br /><br />
<abbr title="Example">Ex.</abbr>
<br /><br />
<abbr title="Literature">Lit.</abbr>
<br /><br />
28

<abbr title="Mathematics">Math.</abbr>
<br /><br />
<acronym title="World Wide Web Consortium">W3C</acronym>
<br /><br />
<acronym title="Institute of Electrical
and Electronic Engineers">IEEE</acronym>
<br /><br />
<acronym title="International Standards Organization">
ISO
</acronym>
<br /><br />
<acronym title="Hyper Text Markup Language">HTML</acronym>
<br /><br />
<acronym title="Beginners All Purpose
Symbolic Instruction Code">BASIC
</acronym>
<p>
Move your mouse over an abbreviation or acronym to get more data.
</p>
</body>
</html>
29

4) HTML IMAGE EXERCISES
a. Display five different images. Skip two lines between each image. Each image
should have a title.
Code:
<html>
<head>
<title>Five images</title>
</head>
<body>
<img src="C:\Users\Rishi Raj Gupta\Desktop\watermelon.jpg" alt="skyt" title="watermelon" />
<br /><br />
<img src="C:\Users\Rishi Raj Gupta\Desktop\apple.jpg" alt="Sky" title="apple" />
30

<br /><br />
<img src="C:\Users\Rishi Raj Gupta\Desktop\mango.jpg" alt="sky" title="mango" />
<br /><br />
<img src="C:\Users\Rishi Raj Gupta\Desktop\banana.jpg" alt="sky" title="banana" />
<br /><br />
<img src="C:\Users\Rishi Raj Gupta\Desktop\kiwi.jpg" src="sky" title="kiwi" />
</body> </html>
31

b. Display an image that has a border of size 2, a width of 200, and a height of 200.
c. Display the image towards the right corner of the webpage
32

5.
Code:
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
width: 100%;
}
td, th {
border: 10px solid #dddddd;

33

padding: 8px;
}
{
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table border ="3">
<tr>
<th colspan="4" align="centre">Purchased instruments</th>
</tr>
<tr>
<th rowspan="2">Item Num</th>
<th rowspan="2">Item picture</th>
<th>Item Discription</th>
<th>Price</th>
</tr>
<tr>
<th>Shipping handle</th>
<th>Expense</th>

34

</tr>
<tr>
<th rowspan="2">1</th>
<td rowspan="2">pic</td>
<td>IBM Clone Computer</td>
<td>$400.00</td>
</tr>
<tr>
<td >Shipping handling ,Installtion,etc.</td>
<td>$20.00</td>
</tr>
<tr>
<th rowspan="2">2</th>
<td rowspan="2">pic2</td>
<td>1 GB RAM Module for Computer</td>
<td>$50</td>
</tr>
<tr>
<td>Shipping Handling,Installation ,etc. </td>
<td>$14.00</td>
</tr>
<tr>
<th colspan="4">Purchased Equipments (JUNE 2019)</th>
</table>
35

</body>
</html>
36

6.
<html>
<head>
<title>Document</title>
</head>
<style>
body {
padding: 0;
margin: 0;
height: 100%;
background: rgb(230, 223, 223);
}
</style>
<body>
37

<div class="main" style=" width: 35%; margin-left: 32.5%; margin-top: 5%; border: 2px solid
black; ">
<div style="text-align: right; background: rgb(124, 123, 123); padding: 1;">
<h1 style="margin-right: 10%;">The World of Fruit</h1>
</div>
<h2 style="text-align: right; margin-right: 20%;">Fruit Survey</h2>
<form>
<div>
<div style="margin-top: 1%;">
<label for="name" style="margin-left: 50%;">Name</label>
<input name="name" type="text" style="margin-left: 1%;">
</div>
<label for="address" style="margin-left: 47.5%;">Address</label>
<input type="text" name="address" style="margin-left: 1%;">
</div>
<label for="email" style="margin-left: 50%;">Email</label>
<input type="text" name="email" style="margin-left: 1%;">
</div>
</div>

<p style="display: inline-block; vertical-align: top; margin-left: 34%;">How may pieces of
fruit <br>do you eat par day?</p>
38

<div style="display: inline-block; vertical-align: top;margin-top: 3%;">
<div>
<input type="radio" name="0">
<label for="0">0</label>
</div>
<div>
</div>
<div>
</div>
<div>
<input type="radio" name="more">
<label for="more">More than 2</label>
</div>
</div>
<br>
<p style="display: inline-block; vertical-align: top; margin-left: 34%;">My favourite fruit</p>
<div name="fruit" style="display: inline-block; margin-top: 1%; margin-left: 3%;">
<ul style="list-style: none; overflow-y: scroll; border: 1px solid black; padding: 5%;
overflow-x: hidden;">
<li>Apple</li>
39

<li>Banana</li>
<li>Plum</li>
<li>Pomegranate</li>
</ul>
</div>
<br>
<p style="display: inline-block; margin-left: 37%; margin-top: 0%;">Would you like a <br>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp brochure?</p>
<input type="checkbox" name="brochure" style="display: inline-block; vertical-align: top;

margin-top: 1%;">
<br>
<button style="margin-left: 50%;">submit</button>
</form>
</div>
</body>
</html>
40

7HTML Frames.
Design the following using frames.
41

Code:
a) <html>
<head>
<title>Amazon</title>
</head>
<body bgcolor="lightblue">

<header>
<font color="red"> <h1 align="center" color="red">AMAZON BOOK WORLD</h1></font>
42

</header>
</body>
</html>
b)<html>
<body background="7a.jpg">
<div class="main" align="center" >
<div class="menu">
<ul>
<h1><li><a href="#">USER LOGIN</a></li></h1>
<h1><li><a href="#">USER PROFILE</a></li></h1>
<h1><li><a href="#">BOOKS CATALOG</a></li></h1>
<h1><li><a href="#">ORDER CONFORMATION</a></li></h1>
<h1><li><a href="#">PAYMENT</a></li></h1>
</ul>
</div>
<div class="profile">
</body>
</hmtl>
c)
<html>
<body background="shadow.png">
<h2 align="center">USER'S PROFILE</h2>
<div class="horizontal-line"></div>
43

<table align="center" border="1">
<tr>
<th>S.no</th>
<th>User<br>name</th>
<th>DOB</th>
<th>Address</th>
<th>Occupation</th>
</tr>
<tr>
<td>1</td>
<td>Ramu.P</td>
<td>12th Jan<br>1980</td>
<td>H.No:22/12/1,M.G.Road,Vij.</td>
<td>Engineer</td>
</tr>
<tr>
<td>2</td>
<td>Mohan.R</td>
<td>23rd May<br>1982</td>
<td>H.No:22/12/11,patel<br>Road,Hyd.</td>
<td>Driver</td>
</tr>
<tr>
<td>3</td>
44

<td>Pavani.V</td>
<td>27th July<br>1983</td>
<td>H.No:12/25,Ameerpet,Hyd.</td>
<td>Software<br>Engineer</td>
</tr>
<tr>
<td>4</td>
<td>Seshu.D</td>
<td>07th March<br>1984</td>
<td>H.No:1/99,S.R.Nagar,Hyd.</td>
<td>DBA</td>
</tr>
<tr>
<td>5</td>
<td>Surendra</td>
<td>29rd May<br>1982</td>
<td>H.No:22/12/11,Bala<br>Nagar,Hyd.</td>
<td>Professor</td>
</tr>
</table>
</body>
</html>
d)<html>
45

<frameset framespacing=10 rows="20%,*">
<frame name="linktutorial" src="rrg.html" noresize scrolling="no"> <frameset framespacing=20

cols="30%,*"> <frame name="tabletutorial" src="rrg2.html" scrolling="no" noresize > <frame
name="formtutorial" src="rrg3.html" > </frameset>
</frameset>
</html>

46

8) Create an external style sheet named as “external.css” and provide some styles for h2, p
and body tags. Create an html file named as “welcome.html” and link the external style
sheet. Include internal style sheet for body tags. Include a <p> tags with inline style sheet.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./external.css">
</head>
<style>
body{
47

margin: 0;
padding: 0;
height: 100%;
}
img{

height: 100%;
}
.container{
width: 60%;
margin-left: 35%;
margin-top: 5%;
}
.container .main{
padding: 2%;
}
.container .main h2{
text-transform: capitalize;
font-size: 200%;
48

font-weight: 900;
}
</style>
<body>
<div style="height: 600px; margin-left: 3%; float: left;">
<img src="owl.PNG">
</div>

<div class="container">

<div class="main">
<h2>hello world!</h2>
<p style="margin-left: 5%;">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex ducimus earum, ea
quisquam aliquid dicta possimus ratione commodi voluptate reprehenderit ipsum vel neque esse
illum! Voluptate facere magni dolorum molestias!
</p>
</div>
<p style="padding: 1%; border-top: 2px dotted black; border-bottom: 2px dashed black;
border-left: 2px solid black; border-right: 2px solid black;">Lorem ipsum dolor sit amet
consectetur adipisicing elit.</p>
</div>
49

</body>
</html>
50

9) Write the CSS code necessary to recreate the following appearance on-screen, exactly as
shown.
< html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<style>
body{
margin: 0;
padding: 2% 7.5% ;
background: #666262;
}
.container{
padding: 20px;
background: #ffffff;
}
.main-heading{
text-align: center;
}
.nav-bar{
51

margin: 4% 0;
}
.nav-bar a{
text-decoration: none;
color: white;
background: #000000;
padding: 0 20px;
margin-right: 3px;
}
.poster-image, .rating, .metascore{
display: inline-block;
vertical-align: top;
}
.rating{
background: green;
color: white;
font-size: 30pt;
padding: 20px;
margin: 5px;
}
.metascore{
width: 50%;
}
</style>
52

<body>
<h1 class="main-heading">WALL-E</h1>
<p class="studio-details">WALT DISNEY Studios Motion Pictures | Realease data: AUG

2019</p>
<nav class="nav-bar">
<a href="#">Summary</a>
<a href="#">Critic Reviews</a>
<a href="#">User Reviews</a>
<a href="#">Details and Credits</a>
<a href="#">Trailers and Videos</a>
</nav>
<div class="poster-image">
<img src="C:\Users\Rishi Raj Gupta\Desktop\disney.jpg" alt="Wall-E" width="100"

height="200">
</div>
<div class="rating">
<p>33</p>
</div>
<div class="metascore">
<h2>Metascore</h2>
<p>Universal acclaim<br>based on 39 Critics</p>
<ul>
<li>Starring: Ben Burtt, Elissa Knight, Jeff Garlin</li>
53

<li>Summary: After hundreds of linely years of doing what he<br>was built for, Wall-E
discovers a new purpose in life when<br>he meets a sleek search robot namved EVE. [Walt
Disney<br>Pictures]</li>
</ul>
</div>
</div>
</body>
</html>
54

10) Design the following web page using HTML5 and CSS:
Code:
Html
<html>
<head>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css">
</head>
<body>
<header>
<div class="logo">
<img src="C:\Users\Rishi Raj Gupta\Desktop\zozor_logo.png" alt="zosor travels" style="display: inline-block;">
<h1 style="display: inline-block;">ZOZOR</h1>

<p>Travel diaries</p>
</div>
<nav>
<a href="#">HOME</a>
<a href="#">BLOG</a>
<a href="#">RESUME</a>
<a href="#">CONTACT</a>
</nav>
</header>
55

<div class="banner">
<div>
<p>Reflections on my holidays in the United States......</p>20:33 13-08-201920:36 13-08-2019
<button>See Article <i class="angle right icon"></i></button>
</div>
</div>
<section class="main-content">
<article class="main-paragraph">
<div>
<img src="C:\Users\Rishi Raj Gupta\Desktop\pin.png" alt="para symbol">
<h2>I'M A GREAT TRAVELLER</h2>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius voluptates perferendis voluptatum, asperiores
iusto architecto aliquid. Aliquam nam nulla accusamus molestiae cum, molestias magnam quos ipsam debitis rem.
Voluptatem, fuga.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos necessitatibus eius iusto beatae, deserunt officia
soluta est alias velit totam nemo ipsa odio voluptatem! Porro, sapiente tempora. Illum, doloribus fugiat?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis soluta numquam quia et, quibusdam
reprehenderit obcaecati aliquid dolore laborum quidem odit minus porro iusto unde laudantium minima sunt doloribus
atque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae magnam voluptates at facilis numquam,
non officiis incidunt aspernatur similique veniam deserunt, autem ut doloremque exercitationem neque reprehenderit.
Illum, placeat perspiciatis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque corporis aperiam recusandae voluptatibus
iusto ex doloribus optio, ratione nisi, ducimus sunt temporibus, harum asperiores impedit quidem eos minus facere
consectetur?
56

</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis error asperiores suscipit dicta sequi dolorem
dignissimos aliquam, harum quos repellendus culpa quibusdam ipsam unde consequuntur assumenda eum tempore
sint quis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique accusantium velit adipisci vero
necessitatibus, et laborum perferendis ullam nam repellendus optio labore consequuntur iste cum rem architecto
recusandae excepturi inventore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero eveniet ad tempora iusto qui vel hic officia
minus excepturi! Quae ea minima perferendis maiores placeat impedit esse voluptates minus saepe.
</p>

</article>

<aside class="about-author">
<h3>ABOUT THE AUTHOR</h3>
<img src="C:\Users\Rishi Raj Gupta\Desktop\zozor.png" alt="">
<div class="about">
<p>
Let me introduce myself: My name's Zozor, I was born Novermber 23rd 2005
A bit meager, is it not? This is why I've now decided to write my biography to let my readers know who I
really am.
</p>
<p style="font-size: 200%; text-align: center">
<i class="facebook square icon" style="color: rgb(12, 114, 197)"></i>
<i class="twitter square icon" style="color: rgb(89, 187, 243)"></i>
<i class="vimeo square icon" style="color: rgb(12, 114, 182)"></i>
<i class="flickr icon" style="color: rgb(249, 249, 255)"></i>
57

<i class="rss square icon" style="color: rgb(255, 208, 0)"></i>
</p>
</div>
</aside>
</section>
<footer>
<div class="tweet">
<h2>MY LAST TWEET</h2>
Hee-haw!
<br>
<br>
<br>
12/05 23:12
</div>
<div class="images">
<h2>MY PICTURES</h2>
<p>
<img src="C:\Users\Rishi Raj Gupta\Desktop\pic1.jpg.png" alt="1">
</p>
</div>
<div class="friends">
58

<h2>MY FRIENDS</h2>
<ul>
<li>Pupi the rabbit</li>
<li>mr boabob</li>
<li>kaiwaii</li>
<li>perveval. eu</li>
</ul>
<ul>
<li>Ji</li>
<li>Super Cucumber</li>
<li>Prince</li>
<li>Mr Fan</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
Css
html{
59

}
header{
border: 4px solid red;
padding: 1%;
border-radius: 20px;
}
.logo{
}
.logo h1, .logo p{
margin: 0%;
}
nav{
border: 4px solid blue;
padding: 1%;
margin-left: 65%;
}
nav a{
text-decoration: none;
60

color: #000000;
margin-right: 10px;
}
.banner{
background: url("sanfrancisco.jpg");
background-size: cover;
height: 205px;
padding-top: 1px;
margin-top: 5px;
border: 4px solid orange;
}
.banner div{
height: 50px;
width: 100%;
background: rgba(0,0,0,0.5);
margin-top: 150px;
}
.banner div p{
color: white;
margin-left: 2px;
}
61

.banner div button{
margin-left: 70%;
background: red;
border: 1px solid red;
border-radius: 5px;
height: 70%;
}
.main-content{
margin-top: 20px;
border: 4px solid rgb(21, 78, 21);
padding: 1%;
}
.main-paragraph , .about-author{
text-align: justify
}
.main-content .main-paragraph div img{
float: left;
margin-right: 10px;
margin-bottom: 0;
}
62

.main-paragraph{
width: 70%;
margin-right: 15px;
border: 4px solid #000000;
padding: 1%;
}
.about-author{
position: relative;
width: 24.5%;
background-color: #797878;
border: 4px solid rgb(211, 6, 149);
padding-bottom: 0%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.about-author h3{
text-align: center;
}
.about-author img{
margin-left: 30%;
63

}
footer{
border: 4px solid blue;
margin-top: 10px;
padding: 0.5%;
}
.tweet, .images, .friends{
width: 32.25%;
}
.tweet{
padding: 0.5%;
}
.tweet h2{
text-align: center;
}
.images{
text-align: center;
64

padding: 0%;
}
.images p, .images h2{
margin: 4px;
}
.images img{
width: 24%;
}
.friends{
text-align: center;
}
.friends ul{
list-style: none;
text-align: left;
margin: 1.75%;
}
65

66

67

Web Tech: Assignment

Uploaded by

Copyright:

Available Formats

Web Tech: Assignment

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech: Assignment

Uploaded by

Copyright:

Available Formats

RISHI RAJ GUPTA

a. Create a webpage that prints your name to the screen.

<H1> RISHI RAJ GUPTA </H1>

b. Create a webpage that prints the numbers 1 - 10 to the screen.

c. Create a webpage and set its title to "This is a webpage".

The title tag goes in the head section of an HTML document.

<title>18 july, 2019</title>

When was this webpage created?

Check page's title for the answer.

include a head section in the code.

refreshes its page in 5 seconds, expires in a duration of time

<title>Meta Tags Example</title>

<meta http-equiv = "refresh" content = "5" />

a. Print your name in green

b. Print the numbers 1 - 10, each number being a different color.

c. Prints your name in a Tahoma font.

d. Display a part of a word with bold underline.

e. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font

<font face="Courier New">

HTML full for is Hyper Text Markup Language.

<font face="Times New Roman">

HTML describes the structure of a Web page

HTML consists of a series of elements

HTML elements tell the browser how to display the content

book. It is <b><i>perfect written</i></b> and <b><i>interesting</i></b>. Other books by <u>RISHI

<head>

<title>This is document title</title>

</head>

<p>Document content goes here.....</p>

<title>This is document title</title>

<p>Document content goes here.....</p>

<p>H <sub> 2 </sub>O

k. Display a c code as it is in the page

<title>This is document title</title>

<p>printf() displays the string inside quotation</p>

l. Set the background color of the page as yellow

m. Set an image as background of the page

the font size is reduced.

<FONT COLOR="green" SIZE="10" FACE="Arial">

RISHI RAJ GUPTA

<FONT COLOR="green" SIZE="4" FACE="Arial"><BR>

RISHI RAJ GUPTA

o. Apply marquee for your name

<MARQUEE>RISHI RAJ GUPTA </MARQUEE>

p. Display a paragraph contents in a single line.

3) HTML TEXT FORMATTING, LISTS EXERCISES

next to it the number 2 superscripted, an equal sign and the result.

alphabetized list. Both lists should have an <h1> level heading.

the other list should be an unordered list

d. Print a list which starts with 7 with the type i

<ol type="I" start="7">

e. Prints an h1 level heading followed by a horizontal line whose width is 100%.

<hr width="100%" />

a small baked unleavened cake, typically crisp, flat, and sweet.

"a chocolate biscuit .synonyms: cracker, wafer.

f. Print a definition list with 5 items