Sie sind auf Seite 1von 40

WEBTECH LAB

CYCLE SHEET 1

Q1. CODE

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​meta​ ​http-equiv​ = ​"refresh"​ ​content​ = ​"5; url =
C:\Users\user\Desktop\html-basics\excerise-1.html"​ ​/>
​<​meta​ ​http-equiv​ = ​"expires"​ ​content​ = ​"5; url =
C:\Users\user\Desktop\html-basics\excerise-1.html"​ ​/>
​<​title​>​This is a webpage-22/7/20​</​title​>
</​head​>
<​body​ ​background-color:​ ​black​>
​<​h1​ ​style​ = ​"color:blueviolet"​>​Khyati Gupta​</​h1​>
​<​hr​>
​<​p​>​1​</​p​>
​<​p​>​2​</​p​>
​<​p​>​3​</​p​>
​<​p​>​4​</​p​>
​<​p​>​5​</​p​>
​<​p​>​6​</​p​>
​<​p​>​7​</​p​>
​<​p​>​8​</​p​>
​<​p​>​9​</​p​>
​<​p​>​10​</​p​>
​<​hr​>
​<​p​>
When was this webpage created?​<​br​>
Check page's title for the answer.
​</​p​>
</​body​>
</​html​>
Q2. CODE

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​title​>​19BIT0285​</​title​>
</​head​>
<​body​>
​<​strong​><​font​ ​color​= ​"green"​>​Khyati Gupta 19BIT0285​</​font​></​strong​><​br​>
​<​hr​>
​<​font​ ​color​ = ​"pink"​>​1​</​font​><​br​>
​<​font​ ​color​ = ​"blue"​>​2​</​font​><​br​>
​<​font​ ​color​ = ​"green"​>​3​</​font​><​br​>
​<​font​ ​color​ = ​"red"​>​4​</​font​><​br​>
​<​font​ ​color​ = ​"black"​>​5​</​font​><​br​>
​<​font​ ​color​ = ​"midnightblue"​>​6​</​font​><​br​>
​<​font​ ​color​ = ​"orange"​>​7​</​font​><​br​>
​<​font​ ​color​ = ​"darkblue"​>​8​</​font​><​br​>
​<​font​ ​color​ = ​"purple"​>​9​</​font​><​br​>
​<​font​ ​color​ = ​"magenta"​>​10​</​font​><​br​>
​<​hr​>
​<​p​ ​style​= ​"font-family:Tahoma;"​>​Hello It's Me​</​p​>
​<​hr​>
WO​<​u​><​b​><​font​ ​color​ = ​"blue"​>​R​</​font​></​b​></​u​>​D.​<​br​>
​<​hr​>
​<​p​ ​style​= ​"font-family: verdana;"​>​Hello It's Me​</​p​>
​<​p​ ​style​= ​"font-family: 'Times New Roman', Times, serif;"​>​Hello It's
Me​</​p​>
​<​p​ ​style​= ​"font-family: 'Segoe UI', Tahoma, Geneva, Verdana,
sans-serif;"​>​Hello It's Me​</​p​>
​<​p​ ​style​= ​"font-family: 'Courier New', Courier, monospace;"​>​Hello It's
Me​</​p​>
​<​p​ ​style​= ​"font-family: Arial, Helvetica, sans-serif;"​>​Hello It's
Me​</​p​>
​<​h6​>​K​</​h6​>
​<​h5​>​H​</​h5​>
​<​h4​>​Y​</​h4​>
​<​h3​>​A​</​h3​>
​<​h2​>​T​</​h2​>
​<​h1​>​I​</​h1​>
​<​br​>
​<​hr​>
​<!--This is a comment-->​<​br​>
​<​br​>
​<​hr​>
​<​p​>​ a​<​sup​>​2​</​sup​>​ + b​<​sup​>​2​</​sup​>​ = 2ab​</​p​><​br​>
​<!--"sup is for superscript"-->
​<​hr​>
​<​p​>​H​<​sub​>​2​</​sub​>​O​</​p​>
​<!--"sub is for subscript"-->
​<​hr​>
C code
​<​p​ ​style​=​"font-family: monospace;"​>
int main(){​<​br​>
int a=1,b=2,c;​<​br​>
c=a+b;​<​br​>
printf("c");​<​br​>
}
​</​p​>
​<​hr​>
​<​p​ ​style​ = ​"background-color: rgb(199, 199, 52);"​>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
recusandae neque eum provident dicta a, veniam eius ad, unde pariatur
impedit reiciendis quae sunt nostrum obcaecati quaerat enim odio
similique!
​</​p​>
​<​hr​>
​<​p​ ​style​ = ​"background-image:
url(https://wallup.net/wp-content/uploads/2019/09/110394-cats-grey-kittens
-fluffy-fat-grass-animals-cat-kitten-baby-cute-748x468.jpg);"​>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto
ratione voluptatibus adipisci? Error dolorum saepe laboriosam? Corporis,
accusantium. Quo quae autem eveniet doloremque laboriosam dolor, assumenda
maiores vitae sapiente? Facilis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis sit
praesentium nulla delectus. Laborum quo eum nihil culpa, hic consequatur
aut, repellat ducimus veritatis sit deleniti labori
osam officia exercitationem cupiditate.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quae
maiores eveniet pariatur ullam quia obcaecati tempore necessitatibus
consectetur earum vel optio labore sapiente id deserunt, cum magnam dolore
recusandae!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil
deleniti libero, repellat cum tempora cupiditate velit odio atque earum
laudantium vitae veritatis inventore ducimus iure in quod obcaecati rem
deserunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
maxime, quas facilis ut quod voluptatibus, laboriosam doloribus culpa
inventore earum sint quaerat nisi molestiae fuga aspernatur a nobis magnam
porro?
Lorem ipsum dolor sit amet consectetur adipisicing elit. A velit,
cupiditate natus labore beatae soluta facere quos, reiciendis
necessitatibus explicabo reprehenderit sint obcaecati recusandae ducimus
quasi commodi facilis impedit vitae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
consectetur fugiat iste officia dolore, eius omnis ipsum nisi.
Reprehenderit harum vel minus ullam consequuntur molestiae eveniet
doloremque illo, alias magni.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos,
ipsum aut earum laboriosam eos perferendis qui consequuntur accusantium
porro magni, tempora consequatur accusamus beatae. Blanditiis corrupti
unde animi. Saepe, autem?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
temporibus. Dolorem eveniet dolore molestias! Eaque earum, dolores
voluptate corporis sint quis consectetur voluptatibus molestias quas ex
reprehenderit deleniti illo minima.
​</​p​>
​<​hr​>
​<​p​ ​style​=​"font-size:10;"​>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error odio
aperiam asperiores numquam perspiciatis neque quis voluptatum quia.
Laboriosam velit quibusdam molestiae amet ducimus obcaecati, quisquam
debitis minus doloremque neque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
molestiae minima inventore odio magni iste. Eum tempore odit culpa quidem
eaque neque tenetur at magni, qui ea placeat perspiciatis incidunt!
​</​p​>
​<​p​ ​style​=​"font-size: 0.50em;"​>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
odio aperiam asperiores numquam perspiciatis neque quis voluptatum quia.
Laboriosam velit quibusdam molestiae amet ducimus obcaecati, quisquam
debitis minus doloremque neque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
molestiae minima inventore odio magni iste. Eum tempore odit culpa quidem
eaque neque tenetur at magni, qui ea placeat perspiciatis incidunt!
​</​p​>
​<​hr​>
​<​marquee​ ​height​ =​"100px"​ ​direction​=​"down"​>
Khyati made this!
​</​marquee​>
​<​hr​>
​<​p​>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim
voluptate corporis obcaecati, ducimus
expedita illum
placeat fugit
facere natus molestias wdcjhajkjwecnxjknrwrubceenmxkl !
​</​p​>
</​body​>
</​html​>
Q3. CODE

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​title​>​19BIT0285​</​title​>
</​head​>
<​body​>
​<​h2​ ​style​ = ​"text-align: center"​>​Squares of numbers:​</​h2​>
​<​p​ ​style​= ​"text-align: center"​>
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​<​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​<​br​>
20​<​sup​>​2​</​sup​>​ = 400​<​br​>
​</​p​>
​<​hr​>
<​h1​>​Unalphabetized list​</​h1​>

Dikshita​<​sub​>​3​</​sub​>
<​br​>
Khyati​<​sub​>​5​</​sub​>
<​br​>
Shambhavi​<​sub​>​6​</​sub​>
<​br​>
Piyush​<​sub​>​7​</​sub​>
<​br​>
Vandit​<​sub​>​10​</​sub​>
<​br​>
Sattaki​<​sub​>​8​</​sub​>
<​br​>
Shambhavi​<​sub​>​9​</​sub​>
<​br​>
Gauri​<​sub​>​4​</​sub​>
<​br​>
Aditi​<​sub​>​1​</​sub​>
<​br​>
Anamika​<​sub​>​2​</​sub​>

<​h1​>​Alphabetized list​</​h1​>
Aditi
<​br​>
Anamika
<​br​>
Dikshita
<​br​>
Gauri
<​br​>
Khyati
<​br​>
Rinisha
<​br​>
Piyush
<​br​>
Sattaki
<​br​>
Shambhavi
<​br​>
Vandit
<​hr​>
<​ol​>​Branches of Engineering:
​<​li​>​IT​</​li​>
​<​li​>​CSE​</​li​>
​<​li​>​MECHANICAL​</​li​>
​<​li​>​BIOTECHNOLOGY​</​li​>
​<​li​>​CHEMICAL​</​li​>
​<​li​>​ELECTRONICS​</​li​>
</​ol​>
<​ul​>
My Roommates:
​<​li​>​Gargi​</​li​>
​<​li​>​Natasha​</​li​>
​<​li​>​Priyasha​</​li​>
​<​li​>​Harshitha​</​li​>
</​ul​>
<​hr​>
<​ol​ ​type​=​"i"​ ​start​=​"7"​>​Skincare brands:
​<​li​>​Innisfree​</​li​>
​<​li​>​Kiehl's​</​li​>
​<​li​>​Tony Moly​</​li​>
​<​li​>​Garnier​</​li​>
​<​li​>​Pond's​</​li​>
​<​hr​>
​<​h1​>​Khushi​</​h1​>
​</​ol​>
​<​hr​ ​width​=​"100%"​>
​<​p​>
Khushi is Khyati's pet name. Most peole are unaware of it.K that's
it have some Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis similique aspernatur, deleniti quas vel aut obcaecati
voluptatibus. Quam molestiae illo perspiciatis quos distinctio ipsum,
praesentium veniam ullam vero quaerat pariatur. ​</​p​>
​<​hr​>
​<​dl​>​ My names:
​<​dt​>​Khyati​</​dt​>
​<​dt​>​Khushi​</​dt​>
​<​dt​>​Gulla​</​dt​>
​<​dt​>​Chotu​</​dt​>
​</​dl​>
​<​hr​>
​<​address​>
House no. 2B,​<​br​>
Air Force Residential Colony, ​<​br​>
Mudfort ​<​br​>
Fictitious town, state.
​</​address​>
​<​center​>
​<​address​>
House no. 15/B,​<​br​>
Street no. 54, ​<​br​>
Sector- 72/B ​<​br​>
Fictitious town, state.
​</​address​>
​</​center​>
​<​hr​>
​<​abbr​ ​title​=​"Chhattisgarh"​>​CG.​</​abbr​><​br​>
​<​abbr​ ​title​=​"Information Technology"​>​Info tech.​</​abbr​><​br​>
​<​abbr​ ​title​=​"Example"​>​Eg.​</​abbr​><​br​>
​<​abbr​ ​title​=​"Mathematics"​>​Math.​</​abbr​><​br​>
​<​hr​>
​<​acronym​ ​title​ = ​"Institute of Electrical and Electronics
Engineers"​>​IEEE​</​acronym​><​br​>
​<​acronym​ ​title​ = ​"Vellore Institute of Technology"​>​VIT​</​acronym​><​br​>
​<​acronym​ ​title​ = ​"Knowledge Center for Success"​>​KCS​</​acronym​><​br​>
​<​acronym​ ​title​ = ​"Information Technology"​>​IT​</​acronym​><​br​>
​<​acronym​ ​title​ = ​"Hypertext Markup Language"​>​HTML​</​acronym​><​br​>
​<​hr​>
</​body​>
</​html​>
Q4. CODE

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​title​>​19BIT0285​</​title​>
</​head​>
<​body​ ​bgcolor​=​"#dddddd"​>
​<​center​>
​<​h1​>​This is a collection of html exercises on images​</​h1​>
​<​h1​ ​>​This is image 1​</​h1​>
​<​img​ ​src​=​"a.jpg"​ ​alt​=​"bts"​,​ ​height​=​"10%"​,​ ​width​= ​"10%"​ ​>
​<​br​>
​<​br​>
​<​h1​>​This is image 2​</​h1​>
​<​img​ ​src​=​"b.jpg"​ ​alt​=​"bts"​,​ ​height​=​"10%"​,​ ​width​= ​"10%"​ ​>
​<​br​>
​<​br​>
​<​h1​>​This is image 3​</​h1​>
​<​img​ ​src​=​"c.jpg"​ ​alt​=​"bts"​,​ ​height​=​"10%"​,​ ​width​= ​"10%"​ ​>
​<​br​>
​<​br​>
​<​h1​>​This is image 4​</​h1​>
​<​img​ ​src​=​"d.jpg"​ ​alt​=​"bts"​,​ ​height​=​"10%"​,​ ​width​= ​"10%"​ ​>
​<​br​>
​<​br​>
​<​h1​>​This is image 5​</​h1​>
​<​img​ ​src​=​"e.jpg"​ ​alt​=​"bts"​,​ ​height​=​"10%"​,​ ​width​= ​"10%"​ ​>
​<​br​>
​<​br​>
​<​hr​>
​<​h2​>​This is an image with border size=2, width=200 and height=200​</​h2​>
​<​img​ ​src​=​"a.jpg"​,​ ​alt​=​"beautiful image"​,​ ​border-size​= ​"2"​,height​=​"200"​,
width​=​"200"​>
</​center​>
<​hr​>
<​h2​ ​style​=​"text-align: right;"​>​This image is towards the right corner​</​h2​>
<​img​ ​src​ =​"b.jpg"​style​=​"float:right;"​>
</​body​>
</​html​>
Q5. CODE

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​title​>​19BIT0285​</​title​>
</​head​>
<​body​>
​<!​DOCTYPE​ ​html​>
<​html​>
<​head​>
</​head​>
<​body​>
​<​center​>
​<​h1​>​Table Exercise​</​h1​>
<​table​ ​border​ = ​"1"​ ​cellspacing​ = ​"2"​,​ ​cellpadding​ = ​"2"​>
​<​tr​>
​<​td​ ​colspan​=​"5"​ ​style​=​"text-align: center;"​><​b​>​Purchased
Equipments(June,2006)​</​b​></​td​>
​</​tr​>
​<​tr​>
​<​th​ ​rowspan​=​"2"​>​Item Number​</​th​>
​<​th​ ​rowspan​=​"2"​>​Item Picture​</​th​>
​<​th​>​Item Description​</​th​>
​<​th​>​Price​</​th​>
​</​tr​>
​<​tr​>
​<​td​><​b​>​Shipping,Handling,Installation,etc.​</​b​></​td​>
​<​td​><​b​>​Expense​</​b​></​td​>
​</​tr​>
​<​tr​>
​<​td​ ​rowspan​=​"2"​>​1.​</​td​>
​<​td​ ​rowspan​=​"2"​><​img​ ​src​=​"c1.jpg"​></​td​>
​<​td​>​IBM Clone Computer​</​td​>
​<​td​>​$400.00​</​td​>
​<​tr​>
​<​td​>​Shipping Handling,Installation, etc.​</​td​>
​<​td​>​$20.00​</​td​>
​</​tr​>
​</​tr​>
​<​tr​>
​<​td​ ​rowspan​=​"2"​>​2.​</​td​>
​<​td​ ​rowspan​=​"2"​><​img​ ​src​=​"c2.jpg"​>​ ​</​td​>
​<​td​>​1GB RAM Module for Computer​</​td​>
​<​td​>​$50.00​</​td​>
​<​tr​>
​<​td​>​Shipping Handling,Installation, etc.​</​td​>
​<​td​>​$14.00​</​td​>
​</​tr​>
​</​tr​>
​<​tr​>
​<​td​ ​colspan​=​"5"​ ​style​=​"text-align: center;"​>​Purchased
Equipments(June,2006)​</​td​>
​</​tr​>

</​table​>
</​center​>
</​body​>
</​html​>

</​body​>
</​html​>
Q6. CODE

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​title​>​19BIT0285​</​title​>
​<​style​>
​.page​ {
​display​: ​block​;
​margin-left​: ​35%​;
​margin-right​: ​35%​;
​margin-top​: ​5%​;
​background-color​: ​#cccccc​;
​padding​: ​20px​ ​20px​;

}
​#headline​{
​background-color​: ​grey​;
​text-align​: ​center​;
​margin-top​: ​-20px​;
​width​: ​100%​;
}
​h3​{
​text-align​: ​right​;
​padding​: ​10px​ ​0px​;
​margin-right​: ​20px​;
}
​.fruits​{
​float​: ​right​;
}
​.info​{
​display​: ​block​;
​margin-left​: ​20%​;
}
​</​style​>
</​head​>
<​body​>

​<​form​>
​<​div​ ​class​=​"page"​>
​<​div​ ​id​=​"headline"​><​h3​>​The World of Fruit​</​h3​></​div​>
​<​h3​>​Fruit Survey​</​h3​>
​<​div​ ​class​=​"info"​>
​<​label​>​Name​</​label​>
​<​input​ ​type​=​"text"​ ​name​= ​"name"​><​br​>​ ​<​br​>
​<​label​>​Address​</​label​>
​<​input​ ​type​=​"address"​ ​name​= ​"address"​><​br​>​ ​<​br​>
​<​label​>​Email​</​label​>
​<​input​ ​type​=​"email"​ ​name​= ​"email"​>
​</​div​>
​<​br​>​ ​<​br​>
​<​label​>​How many pieces of​<​br​>​ fruit do you eat​<​br​>​per
day?​</​label​>
​<​div​ ​class​=​"fruits"​>
​<​label​>​0​</​label​>
​<​input​ ​type​=​"radio"​ ​name​ = ​"0"​>​ ​<​br​>
​<​label​>​1​</​label​>
​<​input​ ​type​=​"radio"​ ​name​ = ​"1"​>​ ​<​br​>
​<​label​>​2​</​label​>
​<​input​ ​type​=​"radio"​ ​name​ = ​"2"​><​br​>
​<​label​>​More than 2​</​label​>
​<​input​ ​type​=​"radio"​ ​name​ = ​"num"​>​ ​<​br​><​br​><​br​>
​</​div​>
​<​br​><​br​><​br​><​br​><​br​><​br​>
​<​label​ ​for​=​"items"​>​My favourite fruit​</​label​>

​<​select​ ​id​=​"items"​>
​<​option​ ​value​=​"item-1"​>​Apple​</​option​>
​<​option​ ​value​=​"item-2"​>​Banana​</​option​>
​<​option​ ​value​=​"item-3"​>​Plum​</​option​>
​<​option​ ​value​=​"item-4"​>​Pomegrenate​</​option​>
​</​select​><​br​><​br​><​br​>
​<​label​>​Would you like a ​<​br​>​ brochure? ​</​label​>
​<​input​ ​type​ = ​"checkbox"​ ​name​ = ​"check"​><​br​>​ ​<​br​>
​<​button​ ​align:​ ​"center"​>​Submit​</​button​>
​</​div​>

​</​form​>
</​body​>
</​html​>
Q7. CODE

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​title​>​19BIT0285​</​title​>
</​head​>
<​body​>
​<​h1​>​AMAZON BOOK WORLD​</​h1​>

​<​a​ ​href​=​"something.com"​>​USER LOGIN​</​a​><​br​>


​<​a​ ​href​=​"something.com"​>​USER PROFILE​</​a​><​br​>
​<​a​ ​href​=​"something.com"​>​BOOKS CATALOG​</​a​><​br​>
​<​a​ ​href​=​"something.com"​>​SHOPPING CART​</​a​><​br​>
​<​a​ ​href​=​"something.com"​>​ORDER CONFIRMATION​</​a​><​br​>
​<​a​ ​href​=​"something.com"​>​PAYMENT​</​a​>

​<​table​ ​border​=​"2"​,cellspacing​ = ​"2"​,​ ​cellpadding​ = ​"2"​>


​<​tr​>
​<​td​>​S no.​</​td​>
​<​td​>​Username​</​td​>
​<​td​>​DOB​</​td​>
​<​td​>​Address​</​td​>
​<​td​>​Occupation​</​td​>
​</​tr​>
​<​tr​>
​<​td​>​1.​</​td​>
​<​td​>​Ramu P.​</​td​>
​<​td​>​12​<​sup​>​th​</​sup​>​ Jan 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​>​23​<​sup​>​rd​</​sup​>​ May 1982​</​td​>
​<​td​>​H no. 22/12/11, Patel Road,Hyd.​</​td​>
​<​td​>​Driver​</​td​>
​</​tr​>
​<​tr​>
​<​td​>​3.​</​td​>
​<​td​>​Pavani V.​</​td​>
​<​td​>​27​<​sup​>​th​</​sup​>​ July 1983​</​td​>
​<​td​>​H no. 12/25, Ameerpet,Hyd.​</​td​>
​<​td​>​Software Engineer​</​td​>
​</​tr​>
​<​tr​>
​<​td​>​4.​</​td​>
​<​td​>​Seshu D.​</​td​>
​<​td​>​07​<​sup​>​th​</​sup​>​ Jan 1984​</​td​>
​<​td​>​H no. 1/99, S.R Nagar,Hyd​</​td​>
​<​td​>​DBA​</​td​>
​</​tr​>
​<​tr​>
​<​td​>​5.​</​td​>
​<​td​>​Surendra​</​td​>
​<​td​>​29​<​sup​>​th​</​sup​>​ May 1982​</​td​>
​<​td​>​H no. 22/12/11, Bala Nagar,Hyd.​</​td​>
​<​td​>​Professor​</​td​>
​</​tr​>
​</​table​>
​<​a​ ​href​ = ​"home"​>​Home​</​a​>

</​body​>
</​html​>

Q8. CODE

HTML

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​link​ ​rel​=​"stylesheet"​ ​href​=​"external.css"​>
​<​title​>​19BIT0285​</​title​>
</​head​>
<​style​>
​h2​{
​color​: ​blue​;
}
​#two​{
​padding​: ​4%​;
}
</​style​>
<​body​>
​<​img​ ​src​ = ​"img.png"​ ​alt​= ​"owl"​>
​<​div​ ​class​ = ​"intro"​>
​<​h2​ ​style​=​"background-color: lightblue;"​>​Hello World!​</​h2​>
​<​p​ ​id​ = ​"one"​>​This example contains some advanced CSS methods you
<​br​>
may not have learned yet. But, we will explain these​<​br​>
methods in a later chapter in this tutorial.​</​p​>
​</​div​>
​<​br​>
​<​p​ ​id​ = ​"two"​ ​style​=​"padding: 2%;"​>​This is some text in a
paragraph.​</​p​>

</​body​>
</​html​>

CSS

*
{
padding​:​0​;
margin​:​0​;
box-sizing​: ​0​;
background-color​: ​cadetblue​;
}

img​{
​height​: ​100%​;
​width​: ​20%​;
​margin-left​: ​15%​;
​margin-top​: ​12%​;
}
.intro​{
​margin-left​: ​40%​;
​margin-right​: ​15%​;
​margin-top​: ​-20.5%​;
​padding​: ​4%​;
​background-color​: ​lightblue​;
}

#one​{
​background-color​: ​lightblue​;
}
#two​{
​border-bottom-style​:​dashed​;
​border-top-style​: ​dotted​;
​border-left-style​: ​solid​ ;
​border-right-style​: ​solid​;
​margin-bottom​: ​0​;
​margin-top​: ​0​;
​margin-left​: ​40%​;
​margin-right​: ​15%​;
​padding​: ​2%​;
}

Q9. CODE

HTML

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​link​ ​rel​ =​"stylesheet"​ ​href​ = ​"style.css"​>
​<​title​>​19BIT0285​</​title​>
</​head​>
<​body​>
​<​div​ ​class​=​"white"​>
​<​h1​ ​style​=​"text-align: center;"​>​WALL-E​</​h1​>
​<​p​ ​style​ = ​"font-size: large; margin-left:2%;"​>​Walt Disney Studios
Motion|Release date:June 27,2008​</​p​>
​<​br​>
​<​br​>
​<​ul​ ​class​ = ​"b"​>
​<​li​><​a​ ​href​=​"ex-9.htm"​>​Summary​</​a​></​li​>
​<​li​><​a​ ​href​ = ​"ex-9.htm"​>​Critic Reviews​</​a​></​li​>
​<​li​><​a​ ​href​ = ​"ex-9.htm"​>​User Reviews​</​a​></​li​>
​<​li​><​a​ ​href​ = ​"ex-9.htm"​>​Details and Credits​</​a​></​li​>
​<​li​><​a​ ​href​ = ​"ex-9.htm"​>​Trailers and videos​</​a​></​li​>
​</​ul​>
​<​img​ ​src​ = ​"poster.jpg"​,​ ​alt​ = ​"WALL-E"​>
​<​p​ ​id​ = ​"score"​>​94​</​p​>
​<​h1​ ​id​= ​meta​>​Metascore​</​h1​>
​<​p​ ​id​ = ​"meta1"​>
Universal Acclaim​<​br​>
based on 39 critics
​</​p​>
​<​ul​ ​class​ =​"a"​>
​<​li​>​Starring: Ben Burtt,Elissa Knight,Jeff Garlin​</​li​>
​<​li​>​Summary: After hundereds of lonely 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 named EVE.[Walt Disney
Pictures]​</​li​>
​</​ul​>
​</​div​>
</​body​>
</​html​>
CSS

body
{
background-color​: ​gray​;
padding​: ​30px​;

}
img​ {
​margin-left​: ​40px​;
​margin-right​: ​10px​;
}
a:link​ {
​color​: ​green​;
​background-color​: ​transparent​;
​text-decoration​: ​none​;
}
​a:visited​ {
​color​: ​white​;
​background-color​: ​transparent​;
​text-decoration​: ​none​;
}
​a:hover​ {
​color​: ​white​;
​background-color​: ​transparent​;
​text-decoration​: ​underline​;
}
​a:active​ {
​color​: ​yellow​;
​background-color​: ​transparent​;
​text-decoration​: ​none​;

}
ul.b​ ​li​{
​display​: ​inline​;
​background-color​: ​black​;
​color​: ​white​;
​margin​: ​auto​;
​padding-right​: ​5%​;
​padding-left​: ​5%​ ;
​padding-top​: ​0.5%​;
​padding-bottom​: ​0.5%​;
}
#score
{
​background-color​: ​darkgreen​;
​width​: ​10px​;
​height​: ​10px​;
​padding-bottom​: ​7%​;
​padding-top​: ​5%​;
​padding-left​: ​5%​;
​padding-right​: ​5%​;
​font-size​: ​30px​;
​color​: ​white​;
​margin-top​: ​-15%​;
​margin-left​: ​15%​;
}
#meta​{
​margin-left​:​27%​ ;
​margin-top​: ​-16%​;
}
#meta1​{
​margin-left​:​27%​ ;
​margin-top​: ​7%​;
​font-size​: ​20px​;
}
ul.a​ ​li
{
​margin​:​auto​;
​margin-left​: ​30%​;
​font-size​: ​20px​;

}
.white​{
​background-color​: ​white​;
​padding​: ​20px​;
​align-content​: ​center​;

Q10. CODE

HTML

<!​DOCTYPE​ ​html​>
<​html​>
<​head​>
<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
<​link​ ​rel​ = ​"stylesheet"​ ​href​ = ​"style.css"​>
<​title​>​19BIT0285​</​title​>
</​head​>
<​body​>

<​h2​ ​style​=​"text-align:center"​>​BROADBAND PRICE TABLE​</​h2​>


<​div​ ​class​=​"columns"​>
​<​ul​ ​class​=​"price"​>
​<​li​ ​class​=​"header"​>​Standard​</​li​>
​<​li​ ​class​ = ​grey​>​Unlimited Download​</​li​>
​<​li​>​20GB Storage​</​li​>
​<​li​>​Unlimited Speed​</​li​>
​<​li​>​30 Domains​</​li​>
​<​li​ ​style​=​"background-color: orangered;"​><​a​ ​href​ = ​"Ex10.html"​>​GET
STARTED​</​a​></​li​>
​</​ul​>
</​div​>

<​div​ ​class​=​"columns"​>
​<​ul​ ​class​=​"price"​>
​<​li​ ​class​=​"header"​ ​style​=​"background-color:rgb(194, 79,
133)"​>​Enhanced​</​li​>
​<​li​ ​class​=​"grey"​>​Unlimited Download​</​li​>
​<​li​>​20GB Storage​</​li​>
​<​li​>​Unlimited Speed​</​li​>
​<​li​>​30 Domains​</​li​>
​<​li​ ​style​=​"background-color: rgb(194, 79, 133);"​><​a​ ​href​ =
"Ex10.html"​>​GET STARTED​</​a​></​li​>

​</​ul​>
</​div​>

<​div​ ​class​=​"columns"​>
​<​ul​ ​class​=​"price"​>
​<​li​ ​class​=​"header"​ ​style​=​"background-color: rgb(72, 156,
156);"​>​Unlimited​</​li​>
​<​li​ ​class​=​"grey"​>​Unlimited Download​</​li​>
​<​li​>​20GB Storage​</​li​>
​<​li​>​Unlimited Speed​</​li​>
​<​li​>​30 Domains​</​li​>
​<​li​ ​style​=​"background-color: rgb(72, 156, 156);"​><​a​ ​href​ =
"Ex10.html"​>​GET STARTED​</​a​></​li​>
​</​ul​>
</​div​>
</​body​>
</​html​>

CSS

*​ {
​box-sizing​: ​border-box​;
​padding-left​: ​10%​;
​padding-right​: ​10%​;
}

​body​{
​background-image​: ​url​(​'bg.jpg'​);
}

​h2​ {
​margin-top​: ​12%​;
}

​.columns​ {
​float​: ​left​;
​width​: ​33.3%​;
​padding​: ​8px​;
}

​.price​ {
​list-style-type​: ​none​;
​border​: ​1px​ ​solid​ ​#eee​;
​margin​: ​0​;
​padding​: ​0​;
}

​.price:hover​ {
​box-shadow​: ​0​ ​8px​ ​12px​ ​0​ ​rgba​(​0​,​0​,​0​,​0.2​)
}
​.price​ ​.header​ {
​background-color​: ​orangered​;
​color​: ​white​;
​font-size​: ​25px​;

​.price​ ​li​ {
​border-bottom​: ​1px​ ​solid​ ​#eee​;
​padding​: ​20px​;
​text-align​: ​center​;
}

​.price​ ​.grey​ {
​font-size​: ​20px​;

​.button​ {
​background-color​:​rgb​(​194​, ​79​, ​133​);
​border​: ​none​;
​color​: ​white​;
​padding​: ​10px​ ​25px​;
​text-align​: ​center​;
​text-decoration​: ​none​;
​font-size​: ​18px​;
}

a​ {
​color​: ​white​;
​font-size​: ​24px​;
​text-decoration​: ​none​;
}
Q11. CODE

HTML

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
<​head​>
​<​meta​ ​charset​=​"UTF-8"​>
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width, initial-scale=1.0"​>
​<​link​ ​rel​ = ​"stylesheet"​ ​href​ = ​"style.css"​>
​<​link​ ​rel​=​"stylesheet"
href​=​"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-a
wesome.min.css"​>
​<​title​>​19BIT0285​</​title​>
</​head​>
<​body​>
​<​header​>
​<​nav​>
​<​ul​ ​class​ = ​"a"​ ​type​ = ​"none"​>
​<​li​ ​style​=​"font-size: 40px;"​><​img​ ​src​ = ​"z.png"​ ​alt​ = ​"z"​,
style​=​"height: 5%; width: 5%;"​>​ ZORO​</​li​>
​<​li​ ​style​=​"font-size: 20px;"​>​Travel Diaries​</​li​>
​</​ul​>
​<​ul​ ​class​=​"b"​>
​<​li​><​a​ ​href​ = ​"ex-11.htm"​>​HOME​</​a​></​li​>
​<​li​><​a​ ​href​ = ​"ex-11.htm"​>​BLOG​</​a​></​li​>
​<​li​><​a​ ​href​ = ​"ex-11.htm"​>​RESUME​</​a​></​li​>
​<​li​><​a​ ​href​ = ​"ex-11.htm"​>​CONTACT​</​a​></​li​>

​</​ul​>
​</​nav​>
​</​header​>
​<​div​>
​<​img​ ​src​=​"z1.jpg"​ ​style​=​"width: 100%;, height:5%;"​>
​<​div​ ​class​=​"text"​><​p​ ​style​=​"background-color: #413d3d; color:
black;"​>​Refelctions on my holiday to the United States...
​</​div​>
​<​button​ ​class​ = ​"button-right"​style​=​"opacity: 100%; margin-left:
3%;"​>​See Article >​</​button​>

​</​div​>
​<​section​>
​<​article​ ​class​=​"art"​>
​<​h2​>​I'm a great travellar​</​h2​>
​<​br​>
​<​br​>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequatur autem, excepturi possimus cumque molestiae aspernatur
inventore maxime eum amet, laborum minima aliquid. Porro corrupti itaque
impedit. Quis, voluptate repellendus? Eos?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
harum corrupti, dolores debitis autem itaque voluptate veniam velit
molestias nam ipsum dignissimos voluptatibus culpa fugit et iste facere.
Consectetur, blanditiis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam
illum aliquam facilis ex vel omnis modi non. Sapiente error assumenda
pariatur debitis culpa maiores, ullam labore officia ut laudantium
temporibus?
​<​br​>
​<​br​>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam
temporibus rem beatae fuga consectetur voluptatibus! Molestias aliquid
beatae dicta assumenda, similique qui impedit corporis, veritatis dolore
magnam perferendis optio quaerat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat
molestiae maxime, atque ipsum quos neque eveniet rem odit asperiores illo
autem dignissimos. Repudiandae quasi ipsum molestiae fugiat numquam.
Suscipit, quibusdam!
​<​br​>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores,
reiciendis! Odio nostrum maiores vel distinctio aliquam, veritatis minus.
Ullam commodi doloremque ipsum rerum dolor laboriosam nobis corrupti sint,
eaque minus.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus
possimus at ullam autem ut veritatis reiciendis inventore? Suscipit labore
dignissimos adipisci molestiae. Nemo repellendus quam itaque nisi laborum
possimus veniam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
repellat recusandae in ex corporis totam tenetur explicabo? Ratione
numquam eum dolore, dicta itaque eius eveniet repellat debitis quam?
Natus, quo.
​</​article​>
​<​aside​>
​<​h2​>​ABOUT THE AUTHOR​</​h2​>
​<​img​ ​src​ = ​"z2.jpg"​ ​style​=​"height: 20%; width: 50%;"​>
​<​br​>
​<​div​ ​class​ = ​"aside"​>
Let me introduce myself: my name's Zozor. I was born on 23 Nov
2005.
​<​br​>
​<​br​>
A bit meager, is it not? This why I've now decided to write my
blogography to let my readers know who I really am.
​<​br​>
​<​br​>
​<​a​ ​href​=​"#"​ ​class​=​"fa fa-facebook"​></​a​>
​<​a​ ​href​=​"#"​ ​class​=​"fa fa-twitter"​></​a​>
​<​a​ ​href​=​"#"​ ​class​=​"fa fa-vimeo"​></​a​>
​<​a​ ​href​=​"#"​ ​class​=​"fa fa-flickr"​></​a​>
​<​a​ ​href​=​"#"​ ​class​=​"fa fa-wifi"​></​a​>
​</​div​>
​</​aside​>
​</​section​>
​<​footer​>

​<​div​ ​class​ = ​"tweet"​>


​<​h3​>​MY LAST TWEET​</​h3​>
Hee-Haw!
​<​br​>
​<​br​>
​<​br​>
12/05 23:12
​</​div​>
​<​div​ ​class​ = ​"tweet1"​>
​<​h3​>​MY PICTURES​</​h3​>
​<​img​ ​src​ = ​"z3.jpg"​ ​style​=​"height: 8%; width: 8%;"​>
​<​img​ ​src​ = ​"z4.jpg"​ ​style​=​"height: 8%; width: 8%;"​>
​<​img​ ​src​ = ​"z5.jpg"​ ​style​=​"height: 10%; width: 7%;"​>
​<​img​ ​src​ = ​"z6.jpg"​ ​style​=​"height: 11%; width: 9%;"​>

​</​div​>
​<​div​ ​class​ = ​"tweet2"​>
​<​h3​>​MY FRIENDS​</​h3​>

​<​ul​ ​type​ = ​"disk"​>


​<​li​>​Pupi the rabbit​</​li​>
​<​li​>​My Baobab​</​li​>
​<​li​>​Kalwali​</​li​>
​<​li​>​PercevaLeu​</​li​>
​</​ul​>
​<​ul​ ​type​ = ​"disk"​>
​<​li​>​Ji​</​li​>
​<​li​>​Super Cucumber​</​li​>
​<​li​>​Prince​</​li​>
​<​li​>​Mr Fan​</​li​>
​</​ul​>

​</​div​>

​</​ul​>
​</​footer​>

</​body​>
</​html​>

CSS

*
{
​background-color​: ​rgb​(​207​, ​157​, ​75​);
}
ul.b
{
​margin-top​: ​1%​;
​margin-left​:​75%​ ;
}
nav​ ​ul.b​ ​li
{
​display​: ​inline​;
​font​: ​40px​;
​margin-left​:​3%​;
}
.gsb
{
​background-image​: ​url​(​z1.jpg​);
}
button
{
​background-color​: ​red​;

}
.text​{
​position​: ​absolute​;
​bottom​: ​-90px​;
​left​: ​-20px​;
​margin​: ​30px​;
​background-color​: ​#413d3d​;
​border​: ​1px​ ​solid​ ​black​;
​opacity​: ​0.9​;
​width​: ​98%​;
}
​.text​ ​p​{
​font-weight​: ​bold​;
​opacity​: ​100%​;
}
​.button-right
{
​position​: ​absolute​;
​bottom​: ​-50px​;
​right​: ​20px​;
}
​.art
{
​width​: ​60%​;
​padding​: ​2%​;
}
​aside​{
​width​: ​30%​;
​margin-left​: ​67%​;
​margin-top​: ​-30%​;
​background-color​: ​rgb​(​49​, ​46​, ​46​);
​color​: ​white​;
}
​aside​ ​h2​{
​margin-left​: ​20%​;
​margin-top​: ​-25%​;
​background-color​: ​rgb​(​49​, ​46​, ​46​);
​color​: ​white​;
}
​aside​ ​img​{
​margin-left​: ​25%​;
}
​.aside
{
​padding​: ​10%​;
​background-color​: ​rgb​(​49​, ​46​, ​46​);
​color​: ​white​;
}
.tweet
{
​margin-left​: ​2%​;
}
​.tweet1
{
​margin-left​: ​27%​;
​margin-top​: ​-9.5%​;
}
.tweet2
{
​margin-left​: ​60%​;
​margin-top​: ​-9%​;

}
footer​ {
​width​: ​100%
}

​footer​ ​ul​ {
​display​: ​inline-table​;
​list-style-type​: ​disc​;
​margin​: ​0px​ ​25px​ ​0px​ ​25px​;
}
​.fa​ {
​padding​: ​20px​;
​font-size​: ​30px​;
​width​: ​50px​;
​text-align​: ​center​;
​text-decoration​: ​none​;
}

​.fa:hover​ {
​opacity​: ​0.7​;
}
​.fa-flickr​ {
​background​:​pink​;
​color​: ​white​;
}
​.fa-vimeo​ {
​background​: ​rgb​(​105​, ​105​, ​206​);
​color​: ​white​;
}
​.fa-facebook​ {
​background​: ​#3B5998​;
​color​: ​white​;
}

​.fa-twitter​ {
​background​: ​#55ACEE​;
​color​: ​white​;
}

​.fa-wifi​ {
​background​:​orange​;
​color​: ​white​;
}
​.fa​ {
​padding​: ​20px​;
​font-size​: ​30px​;
​width​: ​20px​;
​height​: ​20%​;
​text-align​: ​center​;
​text-decoration​: ​none​;
}