M02 un12 p01
Upcoming SlideShare
Loading in...5
×
 

M02 un12 p01

on

  • 464 views

 

Statistics

Views

Total Views
464
Views on SlideShare
464
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

M02 un12 p01 Presentation Transcript

  • 1. Unit 12 – Style Sheets Presentation 1 Web Programming
  • 2. Revision
    • List any 5 controls that can be added to a Form.
    • State the difference between Text Field and Text Area.
    • Mention the use of Action and Method attributes of <FORM> tag.
    • State the difference between radio button and check box.
    • Which tag is used to add drop-down list box to a form?
  • 3. Objectives
    • At the end of this presentation, you will be able to
    • List the advantages of using Style Sheets
    • Add External Style Sheet to your Web pages
    • Add Internal Style Sheet to your Web pages
    • Add Inline Style Sheet to your Web pages
  • 4. CSS
    • CSS stands for Cascading Style Sheets.
    • A Style Sheet contains a set of instructions that modifies the values of the attributes of a tag.
    • Styles can be defined in 3 ways using:
      • External Style Sheets
      • Internal Style Sheets
      • Inline Style Sheet
  • 5. External Style Sheets
    • In the External Style Sheets, the tags that are necessary to create styles are saved in a file with extension .css.
    • The file is linked to the HTML file by using the <LINK> tag in the HTML file.
    • <Href> attribute is used to assign URL of the style sheet file.
  • 6. Hands-On!
    • Open the HTML file Ext_CSS.HTML in IE.
    • This HTML document illustrates the use of External Sheets in a Web page.
  • 7. Lab Exercise
    • Open D12_1.html in Internet Explorer.
        • Locate the tag which is used to call the external style sheet file into html file.
        • Identify the attribute which is used to define the relationship between the linked file and the HTML file.
        • Name the attribute which is used to specify the type of the file.
  • 8. Lab Exercise
    • Open D12_1.html in Internet Explorer.
      • View the source code in the Notepad.
      • Change the background and text colour as shown in the following Figure.
  • 9. Lab Exercise
    • Create an external style sheet and display the output as given in the following Figure.
  • 10. Internal Style Sheets
    • <STYLE> tag is used to create internal style sheet.
    • <STYLE> tag is placed inside the <HEAD> tag.
  • 11. Hands-On!
    • Open the HTML file Int_CSS.HTML in IE.
    • This HTML document illustrates the use of Internal Sheets in a Web page.
  • 12. Inline Style Sheet
    • Inline styles are inserted directly into the tags by assigning styles to the Style attribute of respective tags.
  • 13. Hands-On!
    • Open the HTML file Inl_CSS.HTML in IE.
    • This HTML document illustrates the use of Inline Styles in a Web page.
  • 14. Order of Precedence
      • The following is the order of precedence followed by a browser:
            • Inline Style Sheet
            • Internal or Embedded Style Sheet
            • External or Linked Style Sheet
            • Default style used by the browser (If the Style is not specified).
  • 15. Lab Exercise
    • Create an external style sheet and display the output as given in the following Figure.
  • 16. Activity 2.12.1
    • Create a Web page that explains Cascading Style Sheets as shown in Figure.
    • Save the HTML file as Activity1.html in
    • C:HTMLUnit12Activity folder.
    • The content of the same page is continued in the
    • next Figure.
  • 17. Activity 2.12.1 Contd.
  • 18. Activity 2.12.2
    • As explained earlier, the Web pages created in the Activities of all the units from 3 to 12 will lead to the creation of a Web Site. The Web pages in all the Activities should be linked together. Do the following to create the home page for this Web site.
    • Create a Web page as shown in the figure whose continuation is given in the next figure. The files to be linked and their location are given in the Table.
    • Save the HTML file as Index.html in C:HTML folder.
  • 19. Activity 2.12.2 (Contd..)
  • 20. Activity 2.12.2 (Contd..) C:HTMLUnit 4Activity Activity2.html Changing the Size of the Text C:HTMLUnit 4Activity Activity1.html Making the Text Bold, Italic and Underlined C:HTMLUnit 3Activity Activity4.html Scrolling the Text C:HTMLUnit 3Activity Activity3.html Drawing Horizontal Rule C:HTMLUnit 3Activity Activity2.html Inserting Line Breaks and Paragraphs C:HTMLUnit 3Activity Activity1.html Adding Headings C:HTMLUnit 3Activity Activity5.html Basics of HTML C:HTMLUnit 7Activity Activity3.html About the Internet Location File to be linked Link in the left frame
  • 21. Activity 2.12.2 (Contd..) C:HTMLUnit 9Activity Activity1.html Adding Tables C:HTMLUnit 8Activity Activity1.html Inserting Music, Movie and Animation C:HTMLUnit 7Activity Activity1.html Inserting Images C:HTMLUnit 6Activity Activity1.html Adding Hyperlinks C:HTMLUnit 5Activity Activity3.html Definition List C:HTMLUnit 5Activity Activity2.html Unordered List C:HTMLUnit 5Activity Activity1.html Ordered List C:HTMLUnit 4Activity Activity3.html Positioning and Striking the Text Location File to be linked Link in the left frame
  • 22. Activity 2.12.2 (Contd..) C:HTMLUnit 12Activity Activity1.html Cascading Style Sheets C:HTMLUnit 11Activity Activity2.html Adding Forms and Controls C:HTMLUnit 10Activity Activity6.html Creating Frames Location File to be linked Link in the left frame
  • 23. Activity 2.12.3
    • The home page shown in following Figure contains two vertical frames. Load the file Index.html located at C:HTML folder in the left frame and Activity3.html located at C:HTMLUnit 7Activity folder in the right frame. When a link in the left frame is clicked, the corresponding page should be opened in the right frame. The link, the file to be linked and its location is given in the Table in the previous slide.
  • 24. Activity 2.12.3 (Contd…)
  • 25. Activity 2.12.3 (Contd…)
    • Create a Web page shown in the previous slide.
    • Save the HTML file as Main.html in C:HTML folder.
    • 3. All the Web pages of a Web site should have the same appearance. So create an external style sheet file Style.css in C:HTML folder. The commands in Style.css is shown below:
    • H1 {Text-Align:Center;Color:Firebrick}
    • H2 {color:Firebrick}
    • H3 {color:Firebrick}
    • BODY {Background:Lightyellow;Font-Size:14pt}
    • FONT {Font-Size:14pt}
  • 26. Activity 2.12.3 (Contd…) 4. Add the following code inside the <HEAD> tag in all the activity files created. <LINK Rel=&quot;Stylesheet&quot; Href=&quot;C:HTMLStyle.css&quot;> 5. Open the Main.html folder in Internet Explorer and browse the Web site created.
  • 27. Summary
    • In this presentation, you learnt the following:
    • CSS stands for Cascading Style Sheets.
    • The 3 types of Style Sheets are Internal Style Sheet, External Style Sheet and Inline Style Sheet.
    • In the External Style Sheets, the tags that are necessary to create styles are saved in a file with extension .css.
  • 28. Summary
    • In the Internal Style Sheets, the tags that are necessary to create styles are placed inside the <STYLE> tag.
    • In the Inline Styles, the values that are necessary to create styles are assigned to the Style attribute of respective tags.
    • Inline styles hold the highest priority among the Style Sheets.
  • 29. Assignment
    • Name the three Style Sheets.
    • List the advantages of using Style Sheets.