M02 un12 p01

Unit 12 – Style Sheets

Presentation 1

Web Programming

Revision

1. List any 5 controls that can be added to a Form.

2. State the difference between Text Field and Text Area.

3. Mention the use of Action and Method attributes of <FORM> tag.

4. State the difference between radio button and check box.

5. Which tag is used to add drop-down list box to a form?

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

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

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.

Hands-On!

• Open the HTML file Ext_CSS.HTML in IE.• This HTML document illustrates the use of

External Sheets in a Web page.

Lab Exercise

1. Open D12_1.html in Internet Explorer.

a. Locate the tag which is used to call the external style sheet file into html file.

b. Identify the attribute which is used to define the relationship between the linked file and the HTML file.

c. Name the attribute which is used to specify the type of the file.

Lab Exercise

1. Open D12_1.html in Internet Explorer.

a. View the source code in the Notepad.

b. Change the background and text colour as shown in the following Figure.

Lab Exercise

3. Create an external style sheet and display the output as given in the following Figure.

Internal Style Sheets

• <STYLE> tag is used to create internal style sheet.

• <STYLE> tag is placed inside the <HEAD> tag.

Hands-On!

• Open the HTML file Int_CSS.HTML in IE.• This HTML document illustrates the use of

Internal Sheets in a Web page.

Inline Style Sheet

• Inline styles are inserted directly into the tags by assigning styles to the Style attribute of respective tags.

Hands-On!

• Open the HTML file Inl_CSS.HTML in IE.• This HTML document illustrates the use of

Inline Styles in a Web page.

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).

Lab Exercise

4. Create an external style sheet and display the output as given in the following Figure.

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:\HTML\Unit12\Activity folder.• The content of the same page is continued in the

next Figure.

Activity 2.12.1 Contd.

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.

Activity 2.12.2 (Contd..)

Activity 2.12.2 (Contd..)Link in the left

frameFile to be linked Location

About the Internet Activity3.html C:\HTML\Unit 7\Activity

Basics of HTML Activity5.html C:\HTML\Unit 3\Activity

Adding Headings Activity1.html C:\HTML\Unit 3\Activity

Inserting Line Breaks and Paragraphs

Activity2.html C:\HTML\Unit 3\Activity

Drawing Horizontal Rule Activity3.html C:\HTML\Unit 3\Activity

Scrolling the Text Activity4.html C:\HTML\Unit 3\Activity

Making the Text Bold, Italic and Underlined


Changing the Size of the Text




Positioning and Striking the Text


Ordered List Activity1.html C:\HTML\Unit 5\Activity

Unordered List Activity2.html C:\HTML\Unit 5\Activity

Definition List Activity3.html C:\HTML\Unit 5\Activity

Adding Hyperlinks Activity1.html C:\HTML\Unit 6\Activity

Inserting Images Activity1.html C:\HTML\Unit 7\Activity

Inserting Music, Movie and Animation


Adding Tables Activity1.html C:\HTML\Unit 9\Activity



Creating Frames Activity6.html C:\HTML\Unit 10\Activity

Adding Forms and Controls


Cascading Style Sheets Activity1.html C:\HTML\Unit 12\Activity

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:\HTML\Unit 7\Activity 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.

Activity 2.12.3 (Contd…)


1. Create a Web page shown in the previous slide. 2. 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}


4. Add the following code inside the <HEAD> tag in all the activity files created.<LINK Rel="Stylesheet" Href="C:\HTML\Style.css">5. Open the Main.html folder in Internet Explorer and browse the Web site created.

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.

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.

Assignment

1. Name the three Style Sheets.

2. List the advantages of using Style Sheets.

M02 un12 p01

Technology

Transcript of M02 un12 p01