Internet Web Programming
Cyclesheet 01
Name:Kajol Kumari Rauniyar
Reg No:19MCA0251
HYPER TEXT MARKUP LANGUAGE (HTML)
1) Introduction to HTML
a) Introduction to HTML a. Create a webpage that prints your name to the screen.
SOURCE CODE:
<html>
<body>
<!-- print name to the screen -->
<h2>Kajol Rauniyar</h2>
</body>
</html>
OUTPUT:
b) Create a webpage that prints the numbers 1 - 10 to the screen.
SOURCE CODE:
<html>
<body>
<!-- print the numbers 1 to 10 to the screen -->
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
OUTPUT:
c) Create a webpage and set its title to "This is a webpage".
SOURCE CODE:
<html>
<head>
<!--title page start-->
<title>This is a webpage</title>
<!-- title page end -->
</head>
<body>
<p>The title tag goes in the head section of an HTML document.</p>
</body>
</html>
OUTPUT:
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.
SOURCE CODE:
<html>
<head>
<!--title of the page to the current date-->
<title>3rd December 2019 </title>
</head>
<body>
<!--print a message-->
<h2>When was this webpage created?</h2>
<p>Check page's title for the answer.</p>
</body>
</html>
OUTPUT:
e) Create a webpage that prints any text of your choice to the screen; do not include a head
section in the code.
SOURCE CODE:
<html>
<!--NO head Section-->
<body>
<!--content start-->
<p>This semester we are going to study Internet Web Programming
Language</p>
</body>
</html>
OUTPUT:
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.
SOURCE CODE:
<html>
<head>
<meta http-equiv="refresh"
content="5;url=file:///D:/vit/winter%20semester/internet%20web%20program
ming%20lab/cyclesheet/cyclesheet1b.html" />
<title>Refresh Its Page in 5 Sec</title>
</head>
<body>
<!--print a message-->
<p>Hello guys! Hope you are enjoing the Internet Web Programming Class</p>
</body>
</html>
OUTPUT:
2) HTMLTEXT EXERCISES
a) Print your name in green
SOURCE CODE:
<html>
<head>
<title>Print your name in green color</title>
</head>
<body>
<font color="green">Kajol Rauniyar</font>
</body>
</html>
OUTPUT:
b) Print the numbers 1 - 10, each number being a different color.
SOURCE CODE:
<html>
<head>
<title>Print the 1-10 number in different color</title>
</head>
<body>
<!-- print the 1-10 number in differnt color -->
<font color="#2CEF43">1</font>
<font color="#CD5C5C">2</font>
<font color="#FF5733">3</font>
<font color="#2CECEF">4</font>
<font color="#2C7BEF ">5</font>
<font color="#AE2CEF">6</font>
<font color="#EF2C87">7</font>
<font color="#EF2C55">8</font>
<font color="#842CEF">9</font>
<font color="#688e23">10</font>
</body>
</html>
OUTPUT:
c) Prints your name in a Tahoma font.
SOURCE CODE:
<html>
<head>
<title>Using Tahoma Font</title>
</head>
<body>
<!-- font family tahoma -->
<font face="Tahoma">Kajol Rauniyar</font>
</body>
</html>
OUTPUT:
d) Display a part of a word with bold underline
SOURCE CODE:
<html>
<head>
<title>Using bold and underline text</title>
</head>
<body>
<!-- -->
<b><u>Kajol Rauniyar</u></b>
</body>
</html>
OUTPUT:
e) Print a paragraph with 4 - 5 sentences. Each sentence should be a different font.
SOURCE CODE:
<html>
<head>
<title>paragraph with 4 - 5 sentences. Each sentence should be a different font </title>
</head>
<body>
<!-- using different font face -->
<p>
<font face="Courier New">
A.P.J. Abdul Kalam, in full Avul Pakir Jainulabdeen Abdul Kalam, (born October
15, 1931, Rameswaram, India—died July 27, 2015, Shillong), Indian scientist and politician
who played a leading role in the development of India’s missile and nuclear weapons
programs.
</font>
<font face="Times New Roman"> He was president of India from 2002 to 2007.Kalam
wrote several books, including an autobiography, Wings of Fire (1999). Among his numerous
awards were two of the country’s highest honours, the Padma Vibhushan (1990) and the Bharat
Ratna (1997).
</font>
<font face="Helvetica">
Kalam earned a degree in aeronautical engineering from the Madras Institute of
Technology and in 1958 joined the Defence Research and Development Organisation (DRDO).
</font>
<font face="Georgia">
He soon moved to the Indian Space Research Organisation, where he was project
director of the SLV-III, India’s first indigenously designed and produced satellite launch vehicle.
Rejoining DRDO in 1982, Kalam planned the program that produced a number of successful
missiles, which helped earned him the nickname “Missile Man.”
</font>
</p>
</body>
</html>
OUTPUT:
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.
SOURCE CODE:
<html>
<head>
<title>
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.
</title>
</head>
<body>
<!-- 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. -->
<p>One particular book which is recommended reading is <u>The Street Lawyer</u> by
<u>John Grisham</u>. This book is about a lawyer who begins re-evaluating his priorities in life
when a bad
incident occurs within his law 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 courts. <u>The Street Lawyer</u> is a <b><i>great</i></b>
book. It is <b><i>well written</i></b> and <b><i>interesting</i></b>. Other books by
<u>John Grisham</u> include <u>The Firm</u>, <u>The Pelican Brief</u>, and <u>The
Client</u>.</p>
</body>
</html>
OUTPUT:
g) Print your name to the screen with every letter being a different heading size.
SOURCE CODE:
<html>
<head>
<title>Print your name to the screen with every letter being a different heading size.
</title>
</head>
<body>
<!-- print name with different heading size -->
<h5>K</h5>
<h4>a</h4>
<h3>j</h3>
<h2>o</h2>
<h1>l</h1>
</body>
</html>
OUTPUT:
h) Write a comment line on your code and make sure it is not displayed in the page.
SOURCE CODE:
<html>
<head>
<title>Write a comment line on your code and make sure it is not displayed in the
page</title>
</head>
<body>
<!-- print name with different heading size -->
<h2>Kajol</h2>
</body>
</html>
OUTPUT:
i) Print a2+b2=2ab
SOURCE CODE:
<!DOCTYPE html>
<html>
<body>
<P>a<sup>2</sup>+b<sup>2</sup>=2ab
</body>
</html>
OUTPUT:
j) Print H2O
SOURCE CODE:
<!DOCTYPE html>
<html>
<body>
<P>H<sub>2</sub>O
</body>
</html>
OUTPUT:
k) Display a c code as it is in the page
SOURCE CODE:
<!DOCTYPE html>
<html>
<body>
<h2>Computer Code</h2>
<p>Some programming code:</p>
<code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>
</body>
</html
OUTPUT:
l) Set the background color of the page as yellow.
SOURCE CODE:
<html>
<body bgcolor="yellow">
<h1>Hello world!</h1>
</body>
</html>
OUTPUT:
m) Set an image as background of the page
SOURCE CODE:
<!DOCTYPE html>
<html>
<body>
<img src="nepal.jpg" alt="Nepal is covered by mountains" width="1330">
</body>
</html>
OUTPUT:
n) Set the font size as 10. Print it. Again try to decrease the font size. Check whether the
font size is reduced
SOURCE CODE:
<!DOCTYPE html>
<html>
<body>
<p><font size="10">This is large text!</font></p>
<!-- reduced font size -->
<p><font size="6">This is small text!</font></p>
</body>
</html>
OUTPUT:
o) Apply marquee for your name
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Marquee your name</title>
</head>
<body>
<marquee>Kajol Rauniyar</marquee>
</body>
</html>
OUTPUT:
p) Display a paragraph contents in a single line.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paragraph contents in a single line. </title>
</head>
<body>
<p>
This paragraph
contains multiple tabs and line breaks
in the source code
and dispaly in single line of code.
</p>
</body>
</html>
OUTPUT:
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
SOURCE 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
<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
</body>
</html>
OUTPUT:
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.
SOURCE CODE:
<html>
<body>
<h1>Unalphabetized list</h1>
Lina<sub>1</sub>
<br />
mariam<sub>2</sub>
<br />
Asmi<sub>5</sub>
<br />
Ereeda<sub>10</sub>
<br />
Faridoon<sub>8</sub>
<br />
Binita<sub>3</sub>
<br />
Crystal<sub>6</sub>
<br />
Deepak<sub>7</sub>
<br />
Kajol<sub>4</sub>
<br />
Harnesh<sub>9</sub>
<h1>Alphabetized list</h1>
Asmi
<br />
Binita
<br />
Crystal
<br />
Deepak
<br />
Ereeda
<br />
Faridoon
<br />
Harnesh
<br />
Kajol
<br />
Lina
<br/>
Mariam
</body>
</html>
OUTPUT:
c) Print two lists with any information you want. One list should be an ordered list, the
other list should be an unordered list.
SOURCE CODE:
<html>
<body>
<h2>Ordered List Of Hardware Device</h2>
<ol type="1">
<li>CD-ROM drive</li>
<li>DVD drive</li>
<li>Hard disk</li>
<li>Modem</li>
</ol>
<h2>Unordered List of Web languages</h2>
<ul type="square">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
</ul>
</body>
</html>
OUTPUT:
d) Print a list which starts with 7 with the type i
SOURCE CODE:
<!DOCTYPE html>
<html>
<body>
<h2>Programming Language</h2>
<ol type="I" start="7">
<li>PHP</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Ajax</li>
<li>Jquery</li>
<li>Laravel</li>
<li>CSS3</li>
<li>Wordpress</li>
<li>React Js</li>
<li>Angular Js</li>
<li>Vue JS</li>
</ol>
</body>
</html>
OUTPUT:
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
SOURCE CODE:
<html>
<body>
<h1>Nepal</h1>
<hr width="100%" />
<p>
Nepal is a nation between India and Tibet known for its temples and Himalayan
mountains, which include Mt. Everest. Kathmandu, the capital, has a mazelike old
quarter filled with Hindu and Buddhist shrines. Around Kathmandu Valley are
Swayambhunath, a Buddhist temple with resident monkeys; Boudhanath, a massive
Buddhist stupa; Hindu temples and cremation grounds at Pashupatinath; and the
medieval city of Bhaktapur.
</p>
</body>
</html>
OUTPUT:
f) Print a definition list with 5 items.
SOURCE CODE:
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language (HTML) is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such as
JavaScript.Web browsers receive HTML documents from a web server or from local
storage and render the documents into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for the appearance of
the document.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language like HTML.CSS is a
cornerstone technology of the World Wide Web, alongside HTML and JavaScript.CSS is
designed to enable the separation of presentation and content, including layout, colors,
and fonts.This separation can improve content accessibility, provide more flexibility and
control in the specification of presentation characteristics, enable multiple web pages to
share formatting by specifying the relevant CSS in a separate .css file, and reduce
complexity and repetition in the structural content.</dd>
<dt>JavaScript</dt>
<dd>JavaScript often abbreviated as JS, is a high-level, just-in-time compiled,
object-oriented programming language that conforms to the ECMAScript specification.
JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation,
and first-class functions.Alongside HTML and CSS, JavaScript is one of the core
technologies of the World Wide Web.JavaScript enables interactive web pages and is an
essential part of web applications. The vast majority of websites use it,and major web
browsers have a dedicated JavaScript engine to execute it.</dd>
<dt>Jquery</dt>
<dd>jQuery is a JavaScript library designed to simplify HTML DOM tree traversal
and manipulation, as well as event handling, CSS animation, and Ajax.It is free, open-
source software using the permissive MIT License. As of May 2019, jQuery is used by
73% of the 10 million most popular websites.Web analysis indicates that it is the most
widely deployed JavaScript library by a large margin, having 3 to 4 times more usage
than any other JavaScript library</dd>
<dt>PHP</dt>
<dd>PHP is a general-purpose programming language originally designed for web
development. It was originally created by Rasmus Lerdorf in 1994;the PHP reference
implementation is now produced by The PHP Group.PHP originally stood for Personal
Home Page,but it now stands for the recursive initialism PHP: Hypertext
Preprocessor.PHP code may be executed with a command line interface (CLI),
embedded into HTML code, or used in combination with various web template systems,
web content management systems, and web frameworks. </dd>
</dl>
</body>
</html>
OUTPUT:
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).
SOURCE CODE:
<html>
<body>
<address>
Kajol Rauniyar<br />
Kathmandu, Nepal<br />
P.O. Box 45810
</address>
<br /><br />
<center>
<address>
Harnesh Raman<br />
Nadi, Fiji<br />
P.O. Box 56782
</address>
</center>
</body>
</html>
OUTPUT:
h) Print ten acronyms and abbreviations of your choosing, each separated by two lines.
Specify the data that the abbreviations and acronyms represent
SOURCE 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 />
<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>
OUTPUT:
4) HTML IMAGE EXERCISES
a) Display five different images. Skip two lines between each image. Each image should
have a title.
SOURCE CODE:
<html>
<head>
<title>Five images</title>
</head>
<body>
<img src="images/nepal.jpg" alt="Nepal" title="Nepal" />
<br /><br />
<img src="images/flag.jpg" alt="Flag" title="Flag" />
<br /><br />
<img src="images/kathmandu.jpg" alt="Kathmandu" title="Kathmandu" />
<br /><br />
<img src="images/pokhara.jpg" alt="Pokhara" title="Pokhara" />
<br /><br />
<img src="images/pashupatinath.jpg" src="Pashupatinath" title="Pashupatinath" />
</body>
</html>
OUTPUT:
b) Display an image that has a border of size 2, a width of 200, and a height of 200.
SOURCE CODE:
<html>
<body>
<img src="nepal.jpg" width="200" height="200" alt="Tree" border="2" />
</body>
</html>
OUTPUT:
c) Display the image towards the right corner of the webpage
SOURCE CODE:
<html>
<body>
<img src='nepal.jpg' style='position:fixed; top:0; right:0;' width='' height='' alt='Right
Corner' />
</body>
</html>
OUTPUT:
5) HTML TABLES
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Html Tables</title>
</head>
<body><center>
<table border="2" bordercolor="#eee">
<tr>
<th colspan="4">Purchased Equipments(June,2006)</th>
</tr>
<tr>
<th rowspan="2">Item Num</th>
<th rowspan="2">Item picture</th>
<th>Item Description</th>
<th>price</th>
</tr>
<tr>
<th>Shipping Handling,Installation,etc</th>
<th>Expenses</th>
</tr>
<tr>
<td rowspan="2" align="center">1</td>
<td rowspan="2"><img src="images/computer.jpg" width="100"
height="100" alt=""></td>
<td>IBM Clone Computer</td>
<td>$400.00</td>
</tr>
<tr>
<td>Shipping Handling,Installation,etc</td>
<td>$20.00</td>
</tr>
<tr>
<td rowspan="2" align="center">2</td>
<td rowspan="2"><img src="images/printer.jpg" width="100"
height="100" alt=""></td>
<td>1GB RAM Module for Computer</td>
<td>$50.00</td>
</tr>
<tr>
<td>Shipping Handling,Installation,etc</td>
<td>$10.00</td>
</tr>
<tr>
<th colspan="4">Purchased Equipment(June,2006)</th>
</tr>
</table>
</center>
</body>
</html>
OUTPUT:
6) HTML Forms Design the following Form
SOURCE CODE:
<html>
<head>
<title>Fruit Survey</title>
<style>
.Dropdown{
height: 60px;
max-height: 60px;
form{
width:500px;
background-color: #eee;
}
.heading{
background-color: #e1e1e1;
</style>
</head>
<body>
<center>
<form method="POST">
<fieldset>
<div class="heading"><label><h2 align="right">The World Of
Fruits</h2></label></div>
<table>
<h2 align="right">First Servey</h2>
<tr>
<td><label for="">Name </label></td>
<td><input name="name" type="text" size="30"><br></td>
</tr>
<tr>
<td><label for="">Address</label></td>
<td><input name="address" type="text" size="30"><br></td>
</tr>
<tr>
<td><label for="">Email</label></td>
<td><input name="email" type="email" size="30"><br></td>
</tr>
<tr>
<td><label for="">How many pieces of fruit do you eat per
day?</label></td>
<td><input name="0" type="radio" value="0">0</td>
</tr>
<tr>
<td></td>
<td><input name="1" type="radio" value="0">1</td>
</tr>
<tr>
<td></td>
<td><input name="2" type="radio" value="2">2</td>
</tr>
<tr>
<td></td>
<td><input name="3" type="radio" value="3">More than 2</td>
</tr>
<tr>
<td>my favourite fruit</td>
<td class="dropdown">
<select name="fruits" multiple>
<option value"Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Plum">Plum</option>
<option value="Pomegranate">Pomegranate</option>
</select>
</td>
</tr>
<tr>
<td>Would you like to brouhure</td>
<td><input type="checkbox" name="howdid" value="friend"></td>
</tr>
<tr>
<td><center><input type="button" name="submit" value=" submit
"></center></td>
</tr>
</table>
</fieldset>
</form>
</center>
</body>
</html>
OUTPUT:
7) HTML Frames.
Design the following using frames.
SOURCE CODE:
<html>
<head><title>Frames 2</title></head>
<frameset rows="20%,*">
<frame name="navF" src="heading.html">
<frameset cols="30%,*">
<frame name="upperF" src="intro.html">
<frame name="lowerF" src="course.html">
</frameset>
</frameset>
</html>
INTRO.HTML
<!DOCTYPE html>
<html>
<head>
<title>Intro</title>
<Style>
body{
background-image: url(images/nepal.jpg);
background-repeat: no-repeat;
background-size: cover;
max-height: 100%;
height: 530px;
}
</Style>
</head>
<body>
<ul>
<li><a href="login.html" target="mainF"><font color="red" >USER
LOGIN</font></a><br><br></li>
<li><a href="profile.html" target="mainF"><font color="red">USER
PROFILE</font></a><br><br></li>
<li><a href="catalog.html" target="mainF"><font color="red" >BOOKS
CATALOG</font></a><br><br></li>
<li><a href="shopping.html" target="mainF"><font color="red">SHOPPING
CART</font></a><br><br></li>
<li><a href="order.html" target="mainF"><font color="red" >ORDER
CONFORMATION</font></a><br><br></li>
<li><a href="payment.html" target="mainF"><font
color="red">PAYMENT</font></a><br><br></li>
</ul>
</body>
</html>
HEADING.HTML
<!DOCTYPE html>
<html>
<head>
<title>heading</title>
<style type="text/css">
h2{
position: absolute;
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<img src="images/book1.jpg" alt="Book heading" style="width:100%;"><h2><font
color="red">Amazon Book World</font></h2>
</body>
</html>
COURSE.HTML
<!DOCTYPE html>
<html>
<head>
<title>Course</title>
</head>
<body bgcolor="#7EFCF0">
<center><h2><font color="purple">USER'S PROFILE</font></h2></center>
<table border="3" align="center" cellspacing="3" bordercolor="#fff" bgcolor="#eee">
<tr>
<th>S.No</th>
<th>User Name</th>
<th>DOB</th>
<th>Address</th>
<th>Occuption</th>
</tr>
<tr>
<td>1</td>
<td>Ramu.P</td>
<td>12th 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>23rd May 1982</td>
<td>H.NO.22/12/1,Patel road,Hyd</td>
<td>Driver</td>
</tr>
<tr>
<td>3</td>
<td>Pavara. V</td>
<td>12th Jan 1980</td>
<td>H.No. 1/99.S.R>Nagar,Hyd</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>4</td>
<td>Seshu D</td>
<td>07th March 1984</td>
<td>H.No.1/99,S.R.Nagar,Hyd</td>
<td>Driver</td>
</tr>
<tr>
<td>5</td>
<td>Surendra</td>
<td>29rd MAy 1982</td>
<td>H.NO.22/12/1,BAla NAgar,Hyd</td>
<td>Professor</td>
</tr>
</table>
<br><br><br>
<center><a href="home.html"><font color="purple">Home</font></a>
</body>
</html>
OUTPUT:
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.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<style>
p.mix{
border-style: dotted dashed solid double;
position: absolute;
height: 40px;
left:600px;
width : 900px;
margin-top:360px;
}
</style>
<link rel="stylesheet" type="text/css" href="8.css">
</head>
<body style = "text-align:center;"bgcolor="grey" font:"Times New Roman">
<pre>
<div class="cclass" id="welcome">
<h1 align="left"> Hello World!</h1>
<p align="left"><b>
This example contains some advanced CSS methods you
may not have learned yet but, we will explain these
few methods in a later chapter in the tutorial.
</b></p>
</div>
<img src="images/owl1.jpg" align="left" alt="owl" width="360" height="400">
<p class="mix" align="left">This is some text in a paragraph</p>
</pre>
</body>
</html>
EXTERNAL.CSS
div
{
position: absolute;
height: 300px;
left:600px;
width: 900px;
background-color: #f1e8e8;
}
h1
{
color: black;
}
img
{
margin-left:95px;
}
p
{
color: black
}
OUTPUT:
9) Write the CSS code necessary to recreate the following appearance on-screen, exactly as
shown.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>CSS Code</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<center>
<div id="all">
<h1>WALL-E</h1>
<p class="title">
Walt Disney Studios Motion Pictures
| Release date: Jun 27, 2008
</p>
<div id="menu">
<ul>
<li><a class="active"
href="#Summary">Summary</a></li>
<li><a href="#critic">Critic Reviews</a></li>
<li><a href="#User">User Reviews</a></li>
<li><a href="#Details">Details and Credits</a></li>
<li><a href="#Trailers">Trailers and
Videos</a></li>
</ul>
</div>
<div id="body">
<ul>
<li>
<div id="pic">
<img src="images/walle.jpg"
alt="walle" width="100" height="200" />
</div>
</li>
<li>
<div id="rating"><h2>94</h2></div>
</li>
<li>
<div id="score">
<div id="inner">
<h2>Metascore</h2>
<p>
Universal acclaim <br />
based on 39 Critics
<ul type="disc">
<li>
Starring: Ben Burtt, Elissa
Knight, Jeff Garlin
</li>
<li>
Summary: After hundreds of
lonely years of doing what he
was built for, Wall-E
discovers a new purpose in
life when he meets a sleek
search robot named EVE.
[Walt
Disney Pictures]
</li>
</ul>
</p>
</div>
</div>
</li>
</ul>
</div>
</center>
</body>
</html>
MYSTYLE.CSS
body{
background-color:#eee;
}
#all {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-color:#fff;
padding:40px 40px;
margin:40px;
transition: 0.3s;
width: 60%;
}
#all h1{
text-align:center;
font-size: 25px;
font-weight:bold;
text-transform: uppercase;
}
.title{
text-align:left;
font-family: tahoma;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#menu ul li {
float: left;
}
#menu ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
margin:2px;
background-color: #333;
text-decoration: none;
}
#rating{
margin: auto;
background-color: green;
width: 50px;
height: 100px;
color: #fff;
text-align: center;
position: relative;
padding: 10px;
}
#rating h2{
font-size: 33px;
}
#body ul{
margin:0;
padding:0;
overflow: hidden;
}
#body ul li{
float:left;
}
#body ul li #rating{
display:block;
color:white;
margin:30px 4px 0px 0px;
}
#body ul li div img{
display:block;
color:white;
margin: 20px 4px 0px 0px;
}
#body ul li #score #inner{
display: block;
position: relative;
bottom: 185px;
text-align: left;
left: 190px;
color: black;
margin: 20px 4px 0px 0px;
}
#body ul li #score #inner ul{
overflow: inherit;
}
OUTPUT:
