Attractive Web Designing

Chapter 3 Attractive Web Designing Theory Part 1. What is a style in a Web page ? The tags, attributes and page layout used to make contents of the web page attractive can altogether be called its Style. 2. What is Cascading Style Sheets ? (CSS) Styles in a web page are used for making the page attractive. Cascading Style Sheets are files that contains code for designing a web page. The same style sheet can be used for several web pages. CSS technology is developed to avoid repetition of the code effectively. 1. LAB 3.1 (Adding Cascading style for a Paragraph tag) Eg:1 Step1 : Open school resources from Home folder. Copy the files banner, mohiniyatam, poem, school kalolsavam to a folder named Kalolsavam2016 . Step2 : Application-Accesseries-Text Editor and type the following html code in this file. <!DoctypeHTML> <html> <head> <title>School Kalolsavam2016</title> <style> body { font-family: Verdana; color:blue; font-size : 40px; } </style> </head> <body> <h1>Group Items </h1> <p> Oppena<br> Thiruvathira<br> Kolkali<br> Mohiniyattam<br> </p> </body> </html> Step3 : Save the file with extension . html and save in your folder. Eg:2 <!Doctype HTML> <html> <title> School Kalolsavam2016 </title> <style> p { font-family:Liberation Sans; color:#401d9a; font-size:20px } </style> <style> c { font-family:Liberation Sans; color: #FF5733 ; font-size:40px } </style> </head> <body> <h3>Single Items </h3> <p> Mohiniyattam<br> Bharathanatyam </p> <h1> Group Items</h1> <c> Oppena<br> Thiruvathira </c> </body> </html> 2. LAB 3.2 (Familiarising Different Style ) In the above Lab work 3.1 , Change font family, color and font size try different styles in your web page. 3. LAB 3.3 (Applying Cascading Style to the Heading tag ) Replace the letter p by h1 , you can apply the style in 3.1 to the heading Only. By replacing “h1” by the word “body” you can apply the style to the all body of your web page. Theory Part 3. What is “Element Selector “ ? Element selectors are elements for selecting tags of specified names. In the above LAB works we used Element selectors p, h1, body. 4. What is “Class Selector”? Class selectors are used to give distinct properties to different contents that are included in the same page using the same tag. Example p.blue. 4. LAB 3.4 ( Giving different format to Paragraph tags ) Step1 : Type the following codes in a text editor. <!DOCTYPE html> <html> <head> <title>School Kalolsavam2016</title> <style> p.red { font-family:Verdana; color:#0000ff; font-size:40px; } p.blue { font-family:DejaVu Sans Light; color:#ff0000; font-size:20px; } </style> </head> <body> <h3>Group Items </h3> <p class="red"> KOLKALI <br> MOHINIYATTAM </p> <p class="blue"> OPPANA<br> KATHAKALI </p> </body> </html> 5. LAB 3.5 ( Giving background colour ) <!DOCTYPE html> <html> <head> <title>School Kalolsavam2016</title> <style> p.red { font-family:Verdana; color:#0000ff; font-size:40px; } p.blue { font-family:DejaVu Sans Light; color:#ff0000; font-size:20px; } </style> </head> <body bgcolor = #cfd2d6> <h3>Group Items </h3> <p class="red"> KOLKALI <br> MOHINIYATTAM </p> <p class="blue"> OPPANA<br> KATHAKALI </p> </body> </html> 6. LAB 3.6 ( Modifying background of Heading ) <!DOCTYPE html> <html> <head> <title>School Kalolsavam2016</title> <style> p.red { font-family:Verdana; color:#0000ff; font-size:40px; } p.blue { font-family:DejaVu Sans Light; color:#ff0000; font-size:20px; } h3 { font-family : URW Bookman L; color : #00ff00; font-size: 30px; background : #ff0000; } </style> </head> <body bgcolor = #cfd2d6> <h3> Group Items</h3> <p class="red"> KOLKALI <br> MOHINIYATTAM </p> <p class="blue"> OPPANA<br> KATHAKALI </p> </body> </html> 7. LAB 3.7 ( Difference while using Cascading Style Sheet ) Step 1 : Open 36.html Step2 : Cut all Css code from this file and past it in new Text Editor. Save the file by the file name “10Estyle.css” Step3.: Save the file 36.html by using ' Save As ...' and give name 37.html Step4. : Open both 36.html and 36._new.html and find the difference. 8. LAB 3.8 ( Add CSS file in the Web Page ) <!DOCTYPE html> <html> <head> <title>School Kalolsavam2016</title> <link rel = "stylesheet" type ="text/css" href ="10EStyle.css"> </head> <body bgcolor = #cfd2d6> <h3> Group Items</h3> <p class="red"> KOLKALI <br> MOHINIYATTAM </p> <p class="blue"> OPPANA<br> KATHAKALI </p> </body> </html> 9. LAB 3.9 ( More Web Pages using external style sheet link ) Type these codes and save in different html pages. Before that create My_style.css file containing all your styles My_style.css 39_1.html <!DOCTYPE html> <html> <head> <title>School Kalolsavam2016</title> <link rel = "stylesheet" type ="text/css" href ="My_style.css"> </head> <body bgcolor = #cfd2d6> <h3> Group Items</h3> <p class="red"> KOLKALI <br> MOHINIYATTAM </p> <p class="blue"> OPPANA<br> KATHAKALI </p> </body> </html> 39_2.html <!DOCTYPE html> <html> <head> <title>School Kalolsavam2016</title> <link rel = "stylesheet" type ="text/css" href ="My_style.css"> </head> <body bgcolor = #cfd2d6> <h3> Group Items</h3> <p class="green"> KOLKALI <br> MOHINIYATTAM </p> <p class="yellow"> OPPANA<br> KATHAKALI </p> </body> </html> 39_3.html <!DOCTYPE html> <html> <head> <title>School Kalolsavam2016</title> <link rel = "stylesheet" type ="text/css" href ="My_style.css"> </head> <body bgcolor = #cfd2d6> <h1> Group Items</h1> <p class="red"> KOLKALI <br> MOHINIYATTAM </p> <p class="yellow"> OPPANA<br> KATHAKALI </p> </body> </html> ASSIGNMENT Make attractive the “STUDENT PAGE “ in www.snmhss.org.

Attractive Web Designing

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support