Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore BCA121_Web Designing(Draft 2)

BCA121_Web Designing(Draft 2)

Published by Teamlease Edtech Ltd (Amita Chitroda), 2020-12-15 07:49:12

Description: BCA121_Web Designing(Draft 2)

Search

Read the Text Version

can play 2 This event is generated when enough data is available that the media can be played. ended 3 This event is generated when playback completes. error 4 This event is generated when an error occurs. loaded data 5 This event is generated when the first frame of the media has finished loading. load start 6 This event is generated when loading of the media begins. pause 7 This event is generated when playback is paused. play 8 This event is generated when playback starts or resumes. progress 9 This event is generated periodically to inform the progress of the downloading the media. rate change 10 This event is generated when the playback speed changes. .101 CU IDOL SELF LEARNING MATERIAL (SLM)

seeked 11 This event is generated when a seek operation completes. seeking 12 This event is generated when a seek operation begins. suspend 13 This event is generated when loading of the media is suspended. volume change 14 This event is generated when the audio volume changes. waiting 15 This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). Following is the example which allows to play the given video − <!DOCTYPE HTML> <html> <head> <scripttype=\"text/javascript\"> functionPlayVideo(){ var v = document.getElementsByTagName(\"video\")[0]; v.play(); } </script> </head> .102 CU IDOL SELF LEARNING MATERIAL (SLM)

<body> <form> <videowidth=\"300\"height=\"200\"src=\"/html5/foo.mp4\"> Your browser does not support the video element. </video> <br/> <inputtype=\"button\"onclick=\"PlayVideo();\"value=\"Play\"/> </form> </body> </html> This will produce the following result − Configuring Servers for Media Type Most servers don't by default serve Ogg or mp4 media with the correct MIME types, so you'll likely need to add the appropriate configuration for this.  AddType audio/ogg .oga  AddType audio/wav .wav  AddType video/ogg .ogv .ogg  AddType video/mp4 .mp4 5.3 WORKING WITH FRAMES IN HTML HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are .103 CU IDOL SELF LEARNING MATERIAL (SLM)

organized: into rows and columns. Disadvantages of Frames There are few drawbacks with using frames, so it's never recommended to use frames in your WebPages −  Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up.  Sometimes your page will be displayed differently on different computers due to different screen resolution.  The browser's back button might not work as the user hopes.  There are still few browsers that do not support frame technology. Creating Frames To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame. Note − The <frame> tag deprecated in HTML5. Do not use this element. Example Following is the example to create three horizontal frames − <!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <framesetrows=\"10%,80%,10%\"> <framename=\"top\"src=\"/html/top_frame.htm\"/> <framename=\"main\"src=\"/html/main_frame.htm\"/> <framename=\"bottom\"src=\"/html/bottom_frame.htm\"/> .104 CU IDOL SELF LEARNING MATERIAL (SLM)

<noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html> This will produce the following result – Example Let's put the above example as follows, here we replaced rows attribute by cols and changed their width. This will create all the three frames vertically − <!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <framesetcols=\"25%,50%,25%\"> <framename=\"left\"src=\"/html/top_frame.htm\"/> .105 CU IDOL SELF LEARNING MATERIAL (SLM)

<framename=\"center\"src=\"/html/main_frame.htm\"/> <framename=\"right\"src=\"/html/bottom_frame.htm\"/> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html> This will produce the following result – The <frameset> Tag Attributes Following are important attributes of the <frameset> tag – Table 5.6 attributes of the <frameset> tag Sr.No Attribute & Description 1 cols Specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of the four ways − Absolute values in pixels. For example, to create three vertical frames, use cols = \"100, 500, 100\". A percentage of the browser window. For example, to create three vertical frames, use cols = \"10%, 80%, 10%\". .106 CU IDOL SELF LEARNING MATERIAL (SLM)

Using a wildcard symbol. For example, to create three vertical frames, use cols = \"10%, *, 10%\". In this case wildcard takes remainder of the window. As relative widths of the browser window. For example, to create three vertical frames, use cols = \"3*, 2*, 1*\". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth. 2 Rows This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For example, to create two horizontal frames, use rows = \"10%, 90%\". You can specify the height of each row in the same way as explained above for columns. 3 Border This attribute specifies the width of the border of each frame in pixels. For example, border = \"5\". A value of zero means no border. 4 frame border This attribute specifies whether a three-dimensional border should be displayed between frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder = \"0\" specifies no border. 5 frame spacing This attribute specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing = \"10\" means there should be 10 pixels spacing between each frames. The <frame> Tag Attributes Following are the important attributes of <frame> tag – .107 CU IDOL SELF LEARNING MATERIAL (SLM)

Table 5.7 the <frame> Tag Attributes Sr.No Attribute & Description 1 src This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src = \"/html/top_frame.htm\" will load an HTML file available in html directory. 2 name This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link. 3 frameborder This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no). 4 marginwidth This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth = \"10\". 5 marginheight This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight = \"10\". 6 noresize By default, you can resize any frame by clicking and dragging on the borders of .108 CU IDOL SELF LEARNING MATERIAL (SLM)

a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize = \"noresize\". 7 scrolling This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either \"yes\", \"no\" or \"auto\". For example scrolling = \"no\" means it should not have scroll bars. 8 longdesc This attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = \"framedescription.htm\" Browser Support for Frames If a user is using any old browser or any browser, which does not support frames then <noframes> element should be displayed to the user.So you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand <frameset> element then it should understand what is inside the <body> element which is contained in a <noframes> element.You can put some nice message for your user having old browsers. For example, Sorry!! your browser does not support frames. as shown in the above example. Frame's name and target attributes One of the most popular uses of frames is to place navigation bars in one frame and then load main pages into a separate frame. Let's see following example where a test.htm file has following code − <!DOCTYPE html> <html> <head> <title>HTML Target Frames</title> </head> .109 CU IDOL SELF LEARNING MATERIAL (SLM)

<framesetcols=\"200, *\"> <framesrc=\"/html/menu.htm\"name=\"menu_page\"/> <framesrc=\"/html/main.htm\"name=\"main_page\"/> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html> Here, we have created two columns to fill with two frames. The first frame is 200 pixels wide and will contain the navigation menu bar implemented by menu.htm file. The second column fills in remaining space and will contain the main part of the page and it is implemented by main.htm file. For all the three links available in menu bar, we have mentioned target frame as main_page, so whenever you click any of the links in menu bar, available link will open in main page. Following is the content of menu.htm file <!DOCTYPE html> <html> <bodybgcolor=\"#4a7d49\"> <ahref=\"http://www.google.com\"target=\"main_page\">Google</a> <br/> <br/> <ahref=\"http://www.microsoft.com\"target=\"main_page\">Microsoft< /a> <br/> <br/> <ahref=\"http://news.bbc.co.uk\"target=\"main_page\">BBC News</a> .110 CU IDOL SELF LEARNING MATERIAL (SLM)

</body> </html> Following is the content of main.htm file − <!DOCTYPE html> <html> <bodybgcolor=\"#b5dcb3\"> <h3>This is main page and content from any link will be displayed here.</h3> <p>So now click any link and see the result.</p> </body> </html> When we load test.htm file, it produces following result − Now you can try to click links available in the left panel and see the result. The target attribute can also take one of the following values – Table 5.8 target attribute Sr.No Option & Description 1 _self Loads the page into the current frame. .111 CU IDOL SELF LEARNING MATERIAL (SLM)

2 _blank Loads a page into a new browser window. Opening a new window. 3 _parent Loads the page into the parent window, which in the case of a single frameset is the main browser window. 4 _top Loads the page into the browser window, replacing any current frames. 5 targetframe Loads the page into a named targetframe. 5.4 FRAMES TYPES One of the uses of frames has always been to load navigation bars in one frame and then load main pages into a separate frame. A-frame tag defines one single window frame within a <frameset>. <frame> has browser support in Chrome, Internet Explorer, Mozilla, Safari and Opera Mini. The different and some commonly used attributes in the frame are attributes such as border, scrolling, src, name, etc. Types of Frame Tag The <frameset> Tag Attribute There are five important attributes of the <frameset> and we discuss it here : 1. Col: The vertical frames are given by the col attribute. The width, however, can be specified in 4 ways:  Pixels: absolute values can be mentioned in pixels. If we have to create three vertical frames, we can give the value: cols=”100,50,100”. .112 CU IDOL SELF LEARNING MATERIAL (SLM)

 Percentage: The percentage of the browser window can be mentioned. If we have to create three vertical frames, we can give the value: cols=”40%,20%,40%”We can also make use of the wildcard here (*) and let the wildcard take the remaining of the window which remains un-mentioned. cols=”30%,*,30%” Output: 2. Rows: The horizontal frames are given by the row attribute. It specifies the rows in a frameset. If we have to create three horizontal frames we use: Eg:Rows=”10%,80%,10%’. We can also set the height of each row as we had done in the case of columns previously. Output: .113 CU IDOL SELF LEARNING MATERIAL (SLM)

3. Border: It specifies the width of border of each frame in pixels. E.g.: border=”4”. If border=”0”, means there is no border. 4. Frameborder: If a three-dimensional border needs to be displayed between frames then we use this attribute. The value which the attribute takes is either 1 or 0 (Yes or No). E.g.: frameborder=”0” means no border. 5. Framespacing: This attribute specifies the amount of space between frames in a frameset. Any integer value can be given here for this attribute. E.g.: framespacing=”12” means between the frames there should be the spacing of 12 pixels.The <frae> Tag Attribute There are 8 attributes that can be listed here in this section. 1. src: We provide the file name to this attribute that is supposed to be loaded into the frame. The value of this attribute can be any URL. E.g.: src= www.facebook.com 2. name: This attribute provides a name to the frame. It defines which frame a document should be loaded into. If you have multiple links in one frame which loads into another frame then we make use of this attribute. Then the second frame needs a name to identify itself as the target of the link. E.g.: name=” abc.htm” 3. frameborder: This attribute is specified to show if the borders are to be shown or not. The value takes up is 1 or 0 (Yes or No). .114 CU IDOL SELF LEARNING MATERIAL (SLM)

4. marginwidth: The attribute is helpful at specifying the width of the space between the left and right of the frame’s border and also the content of the frame. The value is given in pixel. E.g.: marginwidth=”10”. 5. marginheight: The attribute is helpful at specifying the height of the space between the top and the bottom of the frame’s border and also the content of the frame. The value is given in pixel. E.g.: marginheight=”10”. 6. noresize: This attribute basically prevents the user from making any changes to the already present frames. In the absence of this attribute, any frame can be resized. E.g.: noresize=” noresize” 7. scrolling: This attribute takes control of the appearance of the scrollbars which are present on the frame. The value either a ‘yes’, ‘no’, or ‘auto’E.g.: scrolling=” no” means it should not have scroll bars. 8. longdesc: This attribute lets you provide a link to another page containing a long description of the content of the frame. E.g.: longdesc=” framedesc.htm” Frames and Browser Support Old browsers do not support frames then <noframes> elements should be displayed to the user.In practice the <body> element should be placed inside <noframes> element because the <frameset> element is supposed to replace the <body> element. If the browser fails to understand <frameset> element then it understands the contents of the <body> element which is contained in <noframes> element. 5.5 SUMMARY  HTML5 features include native audio and video support without the need for Flash.  The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.  The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are  Ogg − Ogg files with Theodora video codec and Vorbis audio codec.  mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec. .115 CU IDOL SELF LEARNING MATERIAL (SLM)

 The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.  HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.  To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame.  If a user is using any old browser or any browser, which does not support frames then <noframes> element should be displayed to the user.  Frames allow you to have multiple sections of the browser window, called frames, each showing their own .html file within the frame. This used tobe common practice when trying to show separate sections of a site in separate sections of the browser window, such as a header at the top, navigation at the side, and the rest was page content that someone could scroll down without making the header and navigation disappear.  You can define an inline frame with the <iframe> tag. The <iframe> tag is not used within a <frameset> tag. Instead, it appears anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser displays a separate document, including scrollbars and borders. 5.6 KEY WORDS/ABBREVIATIONS  Pixels: Pixels are a method of measurement used in the computer world. Your computer screen's resolution is measured in pixels, 832*624, 640*480, etc. They are the number of \"dots, or pixels, that computer displays horizontally and vertically. This allows for a standard to be set, so that a 100*50 picture always comes up as the same relative size, but could vary in absolute size depending on the resolution of your monitor.  Containers: Containers refer to the area enclosed by <start> and </stop> tags where the commands take effect. Some tags, such as <HTML> enclose the entire document, others .116 CU IDOL SELF LEARNING MATERIAL (SLM)

enclose lists, and others can enclose a single world. One of the more common problems in writing HTML is when one forgets to add a stop tag and close of the container, thus leaving the tag to affect the rest of the document. So try and keep track of each container that you create.  Tags: Tags are the commands that give HTML documents their functionality. They consist of commands placed within < and >. Some tags work by placing a start and stop tag at each end of the desired text, such as below <big>.This makes the text bigger <big>.The stop tags are often the same as the start with the addition of \"/\" at the beginning of the stop tag. Using both of these tags places the desired text in a container. But not all tags need to use a container, and thus don't need a stop tag. In the glossary below you will find a \"</>\" next to the tags that require a stop tag.  Web Browsers: Web browsers are the applications that allow one to view HTML documents from either your own computer or from any other computer connected to the internet. 5.7 LEARNINGACTIVITY 1.WAP to illustrate the concept of frame. __________________________________________________________________________ __________________________________________________________________________ 2. WAP to illustrate the concept of video tags. __________________________________________________________________________ __________________________________________________________________________ 5.8 UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Questions 1. Illustrate purpose of introducing Frames Pages in web pages? 2. List the main elements of Banner and Contents Frames Page. 3. State and Write down the different ways to control the appearances of the Frames. 4. State the procedure to set the Initial pages of a Frame. 5. State the purpose behind to develop personal web pages? B. Multiple Choice Questions 1.The <nav> element (Navigation Element) defines .117 CU IDOL SELF LEARNING MATERIAL (SLM)

(a)set of graphics .118 (b)( A set of websites (c)set of navigation pages (d) A set of navigation links 2.The use of <EMBED…> tag is (a) It displays server information (b) It puts a server plugin in the page (c) It puts a browser plugin in the page (d) It displays sounds and movies in the page 3.The HTML <canvas> tag is used to (a) Draw graphics on the fly via scripting (b) Create frames on the fly via scripting (c) Draw graphics on the basis of HTML code (d) Create forms for input user information 4. Which of the followings is true regarding the <caption> tag? (a) It defines a caption for table. (b) It can specify only one caption per table. (c). It must be inserted immediately after the <table>tag (d) All of these 5. The uses of <mark> tag is (a) to display movies in the page. (b) to highlight parts of the text. (c) to underline parts of the text. (d) to display graphics in the page. Answers 1. (d), 2. (c), 3. (a), 4. (d), 5. (b) CU IDOL SELF LEARNING MATERIAL (SLM)

5.9 REFERENCES  Programming: Computer Programming For Beginners: Learn The Basics Of HTML5” by Joseph Connor  HTML: CSS Programming, For Beginners, Learn Coding Fast!” by Ray Yao and Html CSS  “Ultra-HTML Reference: An in-depth reference book for the HTML programming language” by Michael Abelar  http://www.myreadingroom.co.in/notes-and-studymaterial/69-html/833-frames-in- html.html  https://www.w3schools.com/tags/tag_audio.asp  https://www.tutorialspoint.com/html5/html5_audio_video.htm  https://www.freetimelearning.com/html5/html5-audio-video-tags.php  Make your Web page picture perfect with frames JenniferHeinz  Implementing HTML FramesW3C Working Draft 31-Mar-97Murray Maloney .119 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT6 CASCADING STYLE SHEETS 1 Structure 6.0 LearningObjectives 6.1 Introduction 6.2 Concept of CSS 6.3 Creating Style Sheet 6.4 Types of style sheets 6.5 Summary 6.6 KeyWords/Abbreviations 6.7 LearningActivity 6.8 Unit End Questions (MCQ andDescriptive) 6.9 Suggested Readings 6.0 LEARNINGOBJECTIVES After studying this unit, you will be able to:  Discuss Concept of CSS  Explain Creating Style Sheet  Discuss types of style sheet 6.1 INTRODUCTION CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc. A document is usually a text file structured using a markup language — HTML is the most common markup language, but you may also come across other markup languages such as SVG or XML. Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge , are designed to present documents visually, for example, on a computer screen, projector or printer.CSS can .120 CU IDOL SELF LEARNING MATERIAL (SLM)

be used for very basic document text styling — for example changing the color and size of headings and links. It can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation 6.2CONCEPT OF CSS When a browser displays a document, it must combine the document's content with its style information. It processes the document in a number of stages, which we've listed below. Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways. But this is roughly what happens. The browser loads the HTML (e.g. receives it from the network).It converts the HTML into a DOM (Document Object Model). The DOM represents the document in the computer's memory. The DOM is explained in a bit more detail in the next section. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images and videos ... and linked CSS! JavaScript is handled a bit later on in the process, and we won't talk about it here to keep things simpler. The browser parses the fetched CSS, and sorts the different rules by their selector types into different \"buckets\", e.g. element, class, ID, and so on. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree).The render tree is laid out in the structure it should appear in after the rules have been applied to it. The visual display of the page is shown on the screen (this stage is called painting).The following diagram also offers a simple view of the process. Table 6.1 simple view of CSS Fig 6.1 simple view of CSS .121 CU IDOL SELF LEARNING MATERIAL (SLM)

Features Below are the advantageous features of CSS:  CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.  Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.  Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.  Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.  Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.  Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make them compatible to future browsers. 6.3CREATING STYLE SHEET Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the consortium was founded in 1994.Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi- colon (;). Example First let's consider an example of HTML document which makes use of <font> tag and associated attributes to specify text color and font size − Note − The font tag deprecated and it is supposed to be removed in a future version of .122 CU IDOL SELF LEARNING MATERIAL (SLM)

HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will work with an example using the font tag. <!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <p><fontcolor=\"green\"size=\"5\">Hello, World!</font></p> </body> </html> We can re-write above example with the help of Style Sheet as follows − <!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> .123 CU IDOL SELF LEARNING MATERIAL (SLM)

<pstyle=\"color:green; font-size:24px;\">Hello, World!</p> </body> </html> This will produce the following result – 6.4TYPES OF STYLE SHEETS You can use CSS in three ways in your HTML document −  External Style Sheet − Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.  Internal Style Sheet − Define style sheet rules in header section of the HTML document using <style> tag  Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using style attribute. Let's see all the three cases one by one with the help of suitable examples. External Style Sheet If you need to use your style sheet to various pages, then it’s always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag. Example Consider we define a style sheet file style.css which has following rules − .red { color: red; } .124 CU IDOL SELF LEARNING MATERIAL (SLM)

.thick { font-size:20px; } .green { color:green; } Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let's make use of the above external CSS file in our following HTML document − <!DOCTYPE html> <html> <head> <title>HTML External CSS</title> <linkrel=\"stylesheet\"type=\"text/css\"href=\"/html/style.css\"> </head> <body> <pclass=\"red\">This is red</p> <pclass=\"thick\">This is thick</p> <pclass=\"green\">This is green</p> <pclass=\"thick green\">This is thick and green</p> </body> </html> This will produce the following result – .125 CU IDOL SELF LEARNING MATERIAL (SLM)

Internal Style Sheet If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the HTML document using <style> tag. Rules defined in internal style sheet overrides the rules defined in an external CSS file. Example Let's re-write above example once again, but here we will write style sheet rules in the same HTML document using <style> tag − <!DOCTYPE html> <html> <head> <title>HTML Internal CSS</title> <styletype=\"text/css\"> .red { color: red; } .thick{ font-size:20px; } .126 CU IDOL SELF LEARNING MATERIAL (SLM)

.green { color:green; } </style> </head> <body> <pclass=\"red\">This is red</p> <pclass=\"thick\">This is thick</p> <pclass=\"green\">This is green</p> <pclass=\"thick green\">This is thick and green</p> </body> </html> This will produce the following result – Inline Style Sheet You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This should be done only when you are interested to make a particular change in any HTML element only.Rules defined in line with the element overrides the rules defined in an external CSS file as well as the rules defined in <style> element. .127 CU IDOL SELF LEARNING MATERIAL (SLM)

Example Let's re-write above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements. <!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title> </head> <body> <pstyle=\"color:red;\">This is red</p> <pstyle=\"font-size:20px;\">This is thick</p> <pstyle=\"color:green;\">This is green</p> <pstyle=\"color:green;font-size:20px;\">This is thick and green</p> </body> </html> This will produce the following result − .128 CU IDOL SELF LEARNING MATERIAL (SLM)

6.5 SUMMARY  Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.  CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, and variations in display for different devices and screen sizes as well as a variety of other effects.  CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.  CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.  These ratified specifications are called recommendations because the W3C has no control over the actual implementation of the language. Independent companies and organizations create that software.  CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.  These ratified specifications are called recommendations because the W3C has no control over the actual implementation of the language. Independent companies and organizations create that software.  Use an internal stylesheet when you want an HTML document to have a unique style. An internal stylesheet is defined using the <style> tag and goes in the head section of an HTML document.  Use an external stylesheet when you want to apply one style to many pages. If you make one change in an external stylesheet, the change is universal on all the pages where the stylesheet is used. .129 CU IDOL SELF LEARNING MATERIAL (SLM)

6.6KEY WORDS/ABBREVIATIONS  Attribute: A property of an HTML element used to provide additional instructions to a given HTML tag. The attribute is specified in the start of HTML tag.  Document content: Parts (such as text and graphics) of a web document that you want the user to see.  Elements: An element in HTML refers to a tag (such as <head>, <body>, and <p>) or element of structure of a document (such as body, title, and paragraph).  Frames: HTML supports frames to divide a web page into independent and scrollable sections. Having two frames on a web page is like loading three separate pages in the browser. A common use for frames is to place the navigation on the left, and content on the right. Frames (used at the top of a web page to specify HTML version)  FTP: FTP stands for File Transfer Protocol. FTP is a robust method for transferring files between computers using TCP/IP. TCP stands for Transmission Control Protocol and IP stands for Internet Protocol. TCP is responsible for transporting data and IP is responsible for making sure data goes to the correct address.GIF (Graphics Interchange Format):A file format (commonly used for web pages) used for storing image files. 6.7LEARNINGACTIVITY 1. WAP to Demonstrate External and internal style sheet. __________________________________________________________________________ __________________________________________________________________________ 2. Design a webpage using HTML and External Style sheets. __________________________________________________________________________ __________________________________________________________________________ 6.8 UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Questions 1 State the term ‘Rule’ in respect of CSS. 2 Explain embedded style sheet? Explain with example. 3 Explain external Style Sheet? How to link? .130 CU IDOL SELF LEARNING MATERIAL (SLM)

4 State different ways to apply styles to a Web page? 5 Create an HTML document to display the text in the title bar of the browser. “Welcome to 5 th semester B. Multiple Choice Questions 1. Which of the following property specifies whether an element is an accelerator indicator or not. (a) move (b) @keyframes (c) accelerator (d) none of the mentioned 2. Which of the following property is used to define the animations that should be run? (a) animation-delay (b) animation-iteration-count (c) animation-duration (d) animation-name 3. Which of the following property is used to define the number of times an animation should play? (a) animation-direction (b) animation-iteration-count (c) animation (d) animation-timing-function 4. Which of the following property is used to indicate whether the backside of an element is visible if the element is rotated to display the back? (a) background-clip b) backface-visibility (c) behavior (d) background-origin .131 CU IDOL SELF LEARNING MATERIAL (SLM)

5. Which of the following property defines a relationship between bound elements(s) and some code or content? (a) behavior (b) anim (c) binding (d) none of the mentioned Answers 1. (c), 2. (d), 3. (b), 4. (b), 5. (c) 6.9 REFERENCES  CSS Secrets: Better Solutions to Everyday Web Design Problems 1st Edition by Lea Verou  CSS: The Missing Manual 4th Edition by David Sawyer McFarland  CSS in easy steps 4th Edition by Mike McGrath  https://www.w3.org/Style/CSS/Overview.en.html  https://www.tutorialspoint.com/css/index.htm  https://www.codecademy.com/learn/learn-css  An Introduction To Cascading Style Sheets (CSS)B. Douglas Blansit Pages 395-409 | Published online: 18 Dec 2008  Ten more CSS tricks you may not know Author: Web Credible Date: May 2006  Author: Web Credible .132 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 7 CASCADING STYLE SHEETS 2 Structure 7.0 LearningObjectives 7.1 Introduction 7.2 CSS Properties 7.3 CSS Styling (Background, Text Format, Controlling Font) 7.4 Summary 7.5 KeyWords/Abbreviations 7.6 LearningActivity 7.7 Unit End Questions (MCQ andDescriptive) 7.8 References 7.0 LEARNINGOBJECTIVES After studying this unit, you will be able to:  Explain CSS Properties  Discuss CSS Styling (Background, Text Format, Controlling Font) 7.1 INTRODUCTION CSS is used to control the style of a web document in a simple and easy way.CSS is the acronym for \"Cascading Style Sheet\". This tutorial covers both the versions CSS1, CSS2 and CSS3, and gives a complete understanding of CSS, starting from its basics to advanced concepts. Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.CSS is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. I will list down some of the key advantages of learning CSS:Cascading Style Sheet (CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font-family, color, etc. .133 CU IDOL SELF LEARNING MATERIAL (SLM)

property of elements on a web page. Thereare three types of CSS which are given below:  Inline CSS  Internal or Embedded CSS  External CSS 7.2 CSS PROPERTIES Here are some basic CSS properties to work with.  Text Properties  List Properties  Border Properties  Font Properties Text Properties Table 7.1 text properties Property Description Values color Sets the color of a text RGB, hex, keyword line-height Sets the distance between lines normal, number, length, % Increase or decrease the space between normal, length letter-spacing characters text-align Aligns the text in an element left, right, center, justify text- Adds decoration to text none, underline, overline, line- decoration through text-indent Indents the first line of text in an element length, % .134 CU IDOL SELF LEARNING MATERIAL (SLM)

text- Controls the letters in an element none, capitalize, uppercase, transform lowercase List Properties Table 7.2 List Properties Property Description Values list-style Sets all the properties for a list in list-style-type, list-style-position, list- one declaration style-image, inherit list-style- Specifies an image as the list-item URL, none, inherit image marker list-style- Specifies where to place the list- inside, outside, inherit position item marker list-style-type Specifies the type of list-item none, disc, circle, square, decimal, marker decimal-leading-zero, armenian, georgian, lower-alpha, upper- alpha, lower-greek, lower-latin, upper-latin, lower-roman, upper-roman, inherit Border Properties Table 7.3 Border Properties Property Description Values border Sets all the border border-width, border-style, border-color properties in one .135 CU IDOL SELF LEARNING MATERIAL (SLM)

declaration border-bottom Sets all the bottom border border-bottom-width, border-bottom-style, properties in one border-bottom-color declaration border-bottom- Sets the color of the bottom border-color color border border-bottom- Sets the style of the bottom border-style style border border-bottom- Sets the width of the border-width width bottom border border-color Sets the color of the four color_name, hex_number, borders rgb_number, transparent, inherit border-left Sets all the left border border-left-width, border-left-style, border- properties in one left-color declaration border-left- Sets the color of the left border-color color border border-left- Sets the style of the left border-style style border border-left- Sets the width of the left border-width width border .136 CU IDOL SELF LEARNING MATERIAL (SLM)

border-right Sets all the right border border-right-width, border-right-style, properties in one border-right-color declaration border-right- Sets the color of the right border-color color border border-right- Sets the style of the right border-style style border border-right- Sets the width of the right border-width width border border-style Sets the style of the four none, hidden, dotted, dashed, solid, double, borders groove, ridge, inset, outset, inherit border-top Sets all the top border border-top-width, border-top-style, border- properties in one top-color declaration border-top- Sets the color of the top border-color color border border-top- Sets the style of the top border-style style border border-top- Sets the width of the top border-width width border Sets the width of the four thin, medium, thick, length, inherit border-width borders .137 CU IDOL SELF LEARNING MATERIAL (SLM)

Font Properties Table 7.4 Border Properties Property Description Values font-style, font-variant, font-weight, font- font Sets all the font properties size/line-height, font-family, caption, icon, in one declaration menu, message-box, small-caption, status-bar, inherit Specifies the font family for family-name, generic-family, inherit font-family text font-size Specifies the font size of xx-small, x-small, small, medium, large, x-large, text xx-large, smaller, larger, length, %, inherit Specifies the font style for normal, italic, oblique, inherit font-style text font- Specifies whether or not a normal, small-caps, inherit variant text should be displayed in a small-caps font Specifies the weight of a normal, bold, bolder, lighter, font-weight 100, 200, 300, 400, 500, 600, 700, 800, 900, font inherit Careful, many of these are not supported! 7.3 CSS STYLING (BACKGROUND, TEXT FORMAT, CONTROLLING FONT) One of the most common parts of website design is the styling of fonts and text. Whether it's changing the default black color of a font, changing the font itself, or just changing its size, .138 CU IDOL SELF LEARNING MATERIAL (SLM)

CSS alters the way text is rendered on a web page. It also helps to understand how fonts are designed such as using \"serif\" or \"sans-serif.\" Having some knowledge in font layouts and design and knowing how to work with these designs in CSS will help you when you design your pages. Font Families and CSS When websites were first popping up on the web and HTML was still a new language, website designers were forced to use fonts that were installed on the user's computer. If the font wasn't installed, the browser would use a default font. Now, you can use fonts that are used and defined in external files. For instance, Google Fonts lets you download a CSS and JS file that define a font that you can then use in your web pages. However, you should always define a default font family, and you can do this in CSS. The font specified will be used in your pages, but should something happen where the font can't be rendered (such as a user with a very old browser), the browser will default to a specified font family. There are only a few font families. The two most commonly used are \"Times New Roman\" and \"Arial.\" To define a font family, use the following CSS code. p{ font-family: \"Arial\", Helvetica, sans-serif; } The above code defines the font family \"Arial,\" which is a commonly used font. The second parameter, \"Helvetica,\" is the \"fallback\" font in case this Arial font fails. When you define fonts on your website, you start with the font you want to display, and then define a fallback font in case it fails. This fallback font is a safeguard and should be something that is installed on all browsers and operating systems. Finally, the sans-serif or serif is defined. Arial is a sans-serif font, but Times New Roman uses serif. You can define either one when you specify the font family. Changing Font Styles If you recall from chapter two, we mentioned that using HTML tags that define font styles such as italics, underline or bold were discouraged. But what if you want to italicize a font or use a style? The answer is to use CSS. CSS has a \"font-style\" property that lets you define a style. For instance, suppose you want to add an italics style to the previously used paragraph class. You can use the following code for font styles. p{ font-family: \"Arial\", Helvetica, sans-serif; .139 CU IDOL SELF LEARNING MATERIAL (SLM)

font-style: italic; } You can also bold a font, which is usually common among page designs. The \"font-weight\" style is used to add bold text. You can stack these styles. In other words, you can use italics and bold in the same CSS class definition. The browser will use both styles when it renders the web page text. The following code uses both italics and bold font. p{ font-family: \"Arial\", Helvetica, sans-serif; font-style: italic; font-weight: bold; } CSS lets you switch back to a \"normal\" font style. Let's say you use the above CSS class in your code. As you know from previous chapters, the above class will apply to all <p> tags in the HTML document. What if you don't want to use this style with all paragraphs, so you want to define an alternative CSS class for other paragraph tags. Look at the following CSS classes. p{ font-family: \"Arial\", Helvetica, sans-serif; font-style: italic; font-weight: bold; } p.normal { font-family: \"Arial\", Helvetica, sans-serif; font-weight: normal; } Now look at the following HTML code. <!DOCTYPE html> <html> <head> .140 CU IDOL SELF LEARNING MATERIAL (SLM)

<link rel=\"stylesheet\" type=\"text/css\" href=\"/mystyles/styles. css\"> <title>This is my first web page</title> </head> <body> <p> This paragraph contains bold and italic text. </p> Interested in learning more? Why not take an online class in CSS? <p class=\"normal\"> This is normal font without bold or italics. </p> </body> </html> Notice that the two CSS styles apply to the same tag, the <p> tag. However, one defines a normal font weight while the other applies more styles. In the HTML code, there are two <p> tags. The first has no class defined while the second defines the \"normal\" class. In this example, the first paragraph uses the global <p> tag CSS style. The text within has bold and italicized font. The next paragraph tag overwrites the default, global <p> tag CSS style. This tag uses the class property to then use normal font weight and styles. It still defines the Arial font family, but stops the bold and italics from flowing to the second <p> tag. This type of styling is common when you need to use several styles for one specific tag throughout your web pages. Setting Font Sizes We've already seen how to set a font's color using the \"color\" CSS property, but what about changing a font's size? Standard font sizes have changed over the years. It used to be that small fonts were standard in web page styles. Now, larger fonts are used to make it easier for desktop and mobile users to read the content. You can use pixels to define your font sizes, but current website design calls for the \"em\" property. Em styles use ratios of pixel font sizes. The default pixel size for any browser is 16 pixels. Since em styles are a ratio of the browser's text size, an em value of 1 is 16 pixels. An em of 2 is 32 pixels. You can use decimal values to create text sizes based on the standard 16-pixel size. For instance, the .141 CU IDOL SELF LEARNING MATERIAL (SLM)

<h>tags are common header tags used to create headers and sub headers within your content. The <h1> tag is the first header on the page, and it usually is a larger font than the rest of the text on the page. Review the following CSS class. h1 { font-size: 40px; } Instead of using the 40 pixel font size, you can use the em standard. The following code defines 40 pixel font sizes using the em standard. h1 { font-size: 2.5em; } You might wonder how to figure out the appropriate em size for a particular font size. The em size is pixel/16. In other words, 40pixels/16 = 2.5em. Also note that you must define your units when you declare your font styles. The \"40px\" tells the browser to use pixels, and the \"em\" tells the browser to use em ratios. You can also use percentages to define your font sizes, although this isn't as common as the other two values. Just like em and pixels, you must define your units by using the percentage character. The following code tells the browser to use a 100% sized font, which as you recall is 16 pixels. h1 { font-size: 100%; } Notice that the recent <h1> tag will use 16 pixels as the size, which means that the header text would be the same size as the rest of the text on the page, unless you specify a smaller font for the rest of the HTML. Using font styles is as common as using HTML in web design. You will always need to specify your fonts throughout the page, so you should become familiar with the different font families, sizes, and styles. These styles will change in different areas of your HTML, which can be specified in your CSS files Styling Page background The default, standard background color on a web page is white. In many website design projects, you want to change this color to something more suitable for your layout. You can use a color, a gradient, or even an image for your background. When you set your background, the entire page is set with the color or image and any layers or elements overlap .142 CU IDOL SELF LEARNING MATERIAL (SLM)

the background. Old style HTML pages placed the background settings directly in the HTML's <body> tag, but now standards require you to use CSS for background styling. Using a Standard Color The first step in understanding HTML and CSS backgrounds is using colors. You can set a background color either as a predefined color value such as \"red\" or \"green,\" or you can use hexadecimal color codes. Hexadecimal color codes give you more granular control over the colors shown, and they are generally suggested rather than using predefined color values. With hexadecimal color values, there is no chance of the browser not being able to understand what color to use. The following CSS class sets the background to black. body { background-color: #000000; } You can also use predefined color labels. The above code uses the hexadecimal notation. The following code uses the predefined \"black\" name. body { background-color: black; } The above code sets the background of the entire page, but you can also use the same CSS declarations for other HTML tags. For instance, it's common to use background colors in div HTML tags. The following CSS code sets a background to blue for div tags. div { background-color: #6495ed; } Using Background Images While background colors in HTML pages are popular, you also need to use images in many instances. You might not use an image for the entire page, but you'll use background images with div, table, and other HTML tags. These images can be used to set an image with text that describes a product or service. Whatever you use it for, the \"background-image\" CSS property is commonly used among most HTML website designs. One issue to note with background images is that you should not leech bandwidth from other sites. This means that you don't use URLs or images located on other sites. If the image is freely available and you have rights to use it, you should download the image to your cloud server or to the local web .143 CU IDOL SELF LEARNING MATERIAL (SLM)

server and place it in a directory. You then use this local image to define your HTML backgrounds. Using a remote image uses not only your bandwidth needlessly, but you also use anotherwebmaster’s bandwidth, which is generally discouraged across the web as unethical. To use a background image for the entire, use the following CSS code. body { background-image: url(\"/images/myimage.png\"); } The above code sets the body of the HTML page to \"/images/myimage.png.\" Of course, you need this image stored on your local web server in the \"images\" directory for this code to work. You can save your images in any directory, but the images must be accessible by the CSS file and web server. The images must also have read rights for the public, or you could get a permission error when the viewer tries to open the web page. The above CSS class sets the image for the body, but you might also want to use images in a div tag. The following CSS code sets an image for a div with the set class name of \"divimage.\" div.divimage { background-image: url(\"/images/myimage.png\"); } The above two examples defined one image to the background, but images rely on sizing. What happens when the image is a small square? The image won't satisfy the requirements for a large background, and then your website design looks awkward. You can remedy the situation by setting the \"background-repeat\" property. This property uses an image and then repeats this image either horizontally or vertically. With the repeat property, you use the \"x\" or \"y\" values. The \"x\" line runs horizontally and the \"y\" line runs vertically. This means that you can repeat an image from left to right of the screen or from top to bottom. For example, suppose you want to repeat one tall image from left to right across the page in a linear fashion. The following code repeats the image across the x axis. body { background-image: url(\"/images/myimage.png\"); background-repeat: repeat-x; } As stated, you can also repeat an image across the y axis using the \"repeat-y\" value. The following code repeats a background image from the top to the bottom of the page. .144 CU IDOL SELF LEARNING MATERIAL (SLM)

body { background-image: url(\"/images/myimage.png\"); background-repeat: repeat-y; } What if you want to repeat the image in both directions? In other words, what if you have one small image that you want to repeat across the entire page? You can also perform a full repeat using the repeat value. The following code repeats the image across the entire page. body { background-image: url(\"/images/myimage.png\"); background-repeat: repeat; } Incidentally, the background property also has a shorthand concept. You can use a shorthand property and value to reduce the lines of CSS code and use only one line of code for all values. The following code is an example. body { background: #000000 url(\"/images/myimage.png\") repeat; } Notice that the values from previous CSS code are all inserted into the one line of code in the above CSS. The \"background\" property sets all values of each individual property. The above line of code sets the color background as black, the image that an overlay the black background is \"myimage.png,\" and the image is repeated across the entire page. Of course, you can also use any of the other background values you've seen in this section. By default, background images are placed at the top left corner of a web page. This x, y axis position is 0,0. Moving to the right of the screen increases the x axis value and moving down the screen increases the y value. This is important when you position elements on your web page. The background image properties let you define the location of an image on your page. For instance, you might want to center the image in an element. If you don't define a location, the default is the top-left corner of the element. In all HTML styling, the top-left corner is the default, but you can define location by changing the x, y values just like in any graphing calculations. CSS also gives you the ability to use predefined values such as \"center,\" \"left center,\" or \"center bottom.\" There are a number of predefined positions you can use depending on where you want the image to show up on your page. For instance, the following CSS class positions an image in the center of a div element. .145 CU IDOL SELF LEARNING MATERIAL (SLM)

div { background-image: url ('/images/myimage.png '); background-repeat: no-repeat; background-position: center; } In the above code, we use the same image as we have used in other code examples. The image is set not to repeat but it displays in the center of the div. You can also use percentages to define the location of an image. Percentages are a percentage from the x, y axis at 0,0, which again is the top-left corner. 100%,100% is the bottom-right corner, so percentages move diagonally down and to the right of the screen. For instance, the following CSS class places an image in the center of the screen instead of using the \"center\" value. body { background-image: url ('/images/myimage.png '); background-repeat: no-repeat; background-position: 50% 50%; } The background and background image properties are valuable assets when working with website design. These properties set the overall look and feel of your site as you place text on the foreground. Remember to use a good color or image for your background or your users can have a hard time reading the text. The text and background colors or images must work together to define a good user interface. 7.4 SUMMARY  Cascading Style Sheets (CSS) are used to control the presentation of a single or many web pages. In the earlier web pages, the display attributes were put in the particular tags. One of the major problems of such a situation was that if you have to insert same style to number of occurrences of that tag in same or different pages, you have to enter that style in every tag. Not only this was tedious and time consuming but also are difficult to change. But, if you use Cascading style sheet, you can set same formatting style to all such tags or elements using a single rule. This rule can then be applied to all the occurrences of that element.  The font properties are most commonly used style sheet property. It allows you to .146 CU IDOL SELF LEARNING MATERIAL (SLM)

control the appearance of text in a web document.  The font-family property allows you to specify typefaces that should be used for the text. The typeface is the name of font.  The font-size property is used to specify a size of the text. You can specify a size value for this property in several ways  The font-style property is used to specify a normal and italic font for the text.  As you know, there are two types of lists namely ordered lists and unordered lists. In ordered lists, the list items are marked with bullets and in unordered lists, list items are marked with numbers or letters.  The list-style-type property is used for specifying the ‘list style type’. Using this property, you can set different list item marker for ordered and unordered lists.  The list-style-type property is used for specifying the ‘list style type’. Using this property, you can set different list item marker for ordered and unordered lists.  The style definition includes different property values in different categories such as colors, fonts, list, alignments of text and many more.  The text-align property specifies the horizontal alignment of text in an element. By default, it is left. You can define the alignment of the text by the following manner: 7.5 KEY WORDS/ABBREVIATION  Elements: An element in HTML refers to a tag (such as <head>, <body>, and <p>) or element of structure of a document (such as body, title, and paragraph).  Entities: Entities are those characters that do not appear on the keyboard (i.e., ™ ©, ®, etc.) or characters that have special meaning in HTML (i.e., <, >, &, etc.).  Form: A mechanism that enables a user to supply input to the web page author.  Footer text: The text that is not specifically related to the content of the webpage and that appears on every webpage is referred to as footer text. The most notable example of footer text is the copyright statements at the bottom of webpages.  Frames: HTML supports frames to divide a web page into independent and scrollable sections. Having two frames on a web page is like loading three separate pages in the browser. A common use for frames is to place the navigation on the left, and content on the right. .147 CU IDOL SELF LEARNING MATERIAL (SLM)

7.6 LEARNINGACTIVITY 1. WAP to Demonstrate frame. __________________________________________________________________________ __________________________________________________________________________ 2. WAP to Demonstrate Images Map. __________________________________________________________________________ __________________________________________________________________________ 7.7 UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Questions 1. Explain font-family? How you can define font-family property for the element in Inline style definition? 2. State different possible values in text-align property? 3. Create a page using BOLD, ITALICS, SMALL, SUPERSCRIPT, SUBSCRIPT, UNDERLINE element. 4. Create an HTML document to display the text in the title bar of the browser. “Welcome to 1st semester”. 5. Explain different forms of color notation in External Style Sheet definition. B. Multiple Choice Questions 1. Which of the following tag is used to linked information should be placed inside? (a) <head> (b) <html> (c) <div> (d) <body> 2. Which of the following tag can be used to embed a Document-wide styles in a document’s head element? (a) <head> (b) <style> .148 CU IDOL SELF LEARNING MATERIAL (SLM)

(c) <script> (d) <html> 3. The ________________ directive allows style sheets to be grouped and joined together, though some might wonder what the value of this function is given what linked styles provide. (a) <head> (b) <style> (c) <script> (d) @import 4. Which of the following measurement defines a measurement relative to a font’s x-height? (a) ex (b) em (c) pt (d) px 5. Which of the following measurement defines measurement as a percentage? (a) % (b) cm (c) em (d) in Answers 1. (a), 2. (b), 3. (d), 4. (a), 5. (a) 7.8 REFERENCES  Positioning in CSS: Layout Enhancements for the Web 1st Editionby Eric A. Mey  Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web Pages Paperback – Illustrated, September 18, 2012  HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself 3rd Edition by Julie Melon  http://www.egyankosh.ac.in/bitstream/123456789/51959/1/Block-1.pdf  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference .149 CU IDOL SELF LEARNING MATERIAL (SLM)

 https://www.tutorialrepublic.com/css-reference/css3-properties.php  https://www.w3.org/Style/CSS/all-properties.en.html  Layout for the Web with CSS Regions and ExclusionsBy Christian CantrellPublished: August 3rd, 2012  Mastering CSS Principles: A Comprehensive Guide The Smashing EditorialJuly 2, 2012 .150 CU IDOL SELF LEARNING MATERIAL (SLM)


Teamlease Edtech Ltd (Amita Chitroda)

BCA121_Web Designing(Draft 2)
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS