Sei sulla pagina 1di 12

EX NO: 3

WEBPAGE CREATION USING CSS

AIM: To write a HTML program to design a webpage using cascading style sheet. DESCRIPTION: Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML. CSS TYPES: External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, we can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section Eg: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Internal Style Sheet An internal style sheet should be used when a single document has a unique style. Define internal styles in the head section of an HTML page, by using the <style> tag. Eg: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> Inline Stylesheet To use inline styles use the style attribute in the relevant tag. The style attribute can contain any CSS property.

27

Eg: <p style="color:sienna;margin-left:20px">This is a paragraph.</p> CSS SYNTAX A CSS rule has two main parts: a selector, and one or more declarations: Selector {property: value;} The selector is normally the HTML element to style. Each declaration consists of a property and a value. The property is the style attribute to change. Each property has a value.

CSS SELECTORS: The id Selector: The id selector is used to specify a style for a single, unique element.The id selector uses the id attribute of the HTML element, and is defined with a "#". Eg: #para1 { text-align:center; color:red; } The class Selector: The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. The class selector uses the HTML class attribute, and is defined with a "." Eg: .center {text-align:center;} ALGORITHM 1. 2. 3. 4. 5. 6. Start. Create the college webpage by using the concept of stylesheets. Under the menu-Department,design a sub menu CSE,EEE,ECE and IT. Hyperlink each department to its corresponding html page. Apply the CSS concept in all the three ways and view the webpage. Stop.

28

PROGRAM : list.css -

ul li {

list-style:none; float:left; padding : 10px; }

index.html -

<html> <head> <style type="text/css"> body { background-image : url("images/bg.jpg"); background-attachment : fixed; background-repeat : repeat-x ; } ul.main {

color:#FFFFFF;

29

background-color:#13357F; position : absolute; top:60px; left : 30px; } ul.sub { color:#000000; display:none; position : absolute; top:25px; left : 180px; } ul.main li { border-left-color:#FFFFFF; border-left-style:solid; border-left-width:thin; list-style:none; display:inline; padding : 10px; } ul li:hover ul.sub, li:hover ul li { padding : 5px; display:block; } </style> <link rel="stylesheet" type="text/css" href="list.css" title="list" /> </head> 30

<body bgcolor="#44AAE8"> <img src="images/logo.jpg" style= " position : absolute; top:3px;" align="center" /> <p style= " position : absolute; top:0px; left : 320px;" align="center" > <font size = "2.4" color=WHITE><b>SRI VENKATESWARA COLLEGE OF ENGINEERING</b> </font></p> <p style= " position : absolute; top:15px; left : 280px;" align="center" > <font size = "1.5" color=WHITE> Pennalur, Sriperumbudur - 602105 :: Tamilnadu, India<br/> Approved by A.I.C.T.E and Affiliated to Anna University, An ISO 9001:2008 Certified Institution<br/> (Previously affiliated to University of Madras from the year 1985 to 2001)<br/></font></p> <img src="images/isologo.jpg" width = "100" height="60" align = "right" /> <ul class = "main" align="center"> <font size = "2"> <li> Home </li> <li> About Us </li> <li><a href="#"> Department </a> <ul class = "sub"> <li> <a href="eee.html"> EEE </a></li> <li> <a href="ece.html"> ECE </a></li> <li> <a href="cse.html"> CSE </a></li> </ul></li> <li> Faculty </li> <li> Student</li> 31

<li> Campus News</li> <li> SVCE Alumni</li> <li> Our Progress </li> <li> Transport </li> <li> News_letter </li> </font> </ul>

<img src="images/twentyfive.jpg" height=300 width=300 style="position:absolute; top:180px; left:70px;"/> <p style="position:absolute; top:180px;left:550px;"> <font size=5><b>MISSION</b></font></p> <p style="position:absolute; top:230px;left:400px;"><font size=4.5> To develop SVCE into a " CENTRE OF EXCELLENCE " offering Engineering Education to men and women at undergraduate and postgraduate degree levels, bringing out their total personality, emphasizing ethical values and preparing them to meet the growing challenges of the industry and diverse societal needs of our nation</font></p> </body> </html>

eee.html -

<html> <head> </head> <body background="images/img.jpg"><br> <center> <h2>ELECTRICAL AND ELECTRONICS ENGINEERING</h2> 32

<p><font size=5>The Department of Electrical Engineering was started in the year 1985 to cater to the needs of the electrical engineering subjects of Computer Science and Engineering, Electronics and Communication Engineering and Mechanical Engineering. Because of its academic excellence, the undergraduate programme offered by the department has been accredited by National Bureau for Accreditation (NBA), AICTE for five years. It has also paved the way for a Master's Programme with Power Electronics & Drives as specialization from 2002. Electrical & Electronics Engineering department has been recognised as a modal research centre of Anna University, Chennai in the year 2008 and faculty members of affliated Anna University, Chennai are pursuing their full time and part time research courses.<br/><br/> Programmes run by the department are,<br/> - B.E. Electrical and Electronics Engineering <br/> - M.E. Power Electronics and Drives. </font></p> <a href="index.html">HOME</a> <a href="ece.html">NEXT</a> </body> </html>

ece.html -

<html> <head> </head> <body background="images/img.jpg"> <center> <br> <h2>ELECTRONICS AND COMMUNICATION ENGINEERING</h2>

33

<p><font size=5>This is one of the three major departments that was started during the establishment of the College in 1985. Right from its inception, the Department has been laying more emphasis on teaching and research activities in diversified areas there by moulding students to be critical thinkers, skilled communicators, and ethical leaders. <br/> <br/> The department of Electronics and Communication Engineering has been recognized as a Research Centre with effect from May 2009. </font></p> <br><br> <a href="index.html">HOME</a> <a href="cse.html">NEXT</a> </body> </html>

cse.html -

<html> <head> </head> <body background="images/img.jpg"> <center> <br> <h2>COMPUTER SCIENCE AND ENGINEERING </h2> <p><font size=5>The Department of Computer Science and Engineering was established in the year 1985. Over the past few years, the department has acquired national and international importance. This has been achieved by the collective and responsive effort of the faculty, the supporting staff and the students.<br/>The department is well equipped with excellent computing facilities, and has highly qualified faculty specialized in areas like Multimedia 34

Communications, Wireless Networking, VLSI design, Data Mining etc.<br/> Programmes run by the department are,<br/><br/> - B.E. Computer Science and Engineering <br/> - M.E. Computer Science and Engineering </font></p> <br><br> <a href="index.html">HOME</a> <a href="eee.html">NEXT</a> </body> </html>

35

OUTPUT:

36

37

RESULT: Thus a webpage has been designed using the concept of Cascading Stylesheets.

38

Potrebbero piacerti anche