ADVANCED HTML AND CSS 7.1 INTRODUCTION An effective way to organize web documents, visually, and also logically can, be achieved by dividing the page into different parts. In each part of the document, presentation of information in a well design layout with proper placing of text, images, audio and video is also very important. The creation of document with different layouts, dividing the page into different parts and getting user information can be possible by using some advance HTML elements such as table, frames and forms in your web page. In this lesson, you will learn some more advanced features of HTML and Cascading Style Sheets (CSS) such as Nésting Frames and Tables; adding effects to anchor tag; positioning of HTML elements; layers and layout settings in web page. 7.2, OBJECTIVES ; After going through this lesson, you will be able to: * create table and use of its various attributes; ‘© use forms to accept data; © add CSS effects to anchor tags, known as links, in a web page; and © explain the positioning of HTML elements.Advanced HTML and CSS :: 141 7.3 TABLES Tables are used to display data in Tabular format, containing rows and columns, on the screen. The HTML tag is used to define table. The table element can contain the following: * : Table Row, is to specify the row in the table, tags (or between the pair of TH tags) code another table. The second table ‘must begin and end in the same cel. Following is the example of using another table and other tags inside a table cell.

: It is used to specify the caption (Label) for the table. The CAPTION element, by default is center-aligned at the top of the Table. It’s ALIGN attribute can take value left, right, center to align the caption. ‘+

Table Heading and	Table Data. © : Table Data, within the row you create columns by	tag. The table data can consist of lists, images, forms and other element. The TD is a true container that can hold other HTML elements and more tables. Example: A Simple table in HTML ‘ 42 :: Certificate in Web Designing and Development TEST TABLE HEADING | HEADING 2 HEADING 3 CELL 1 CELL 2 CELL 3 CELL 4 CELL 5 CELL 6 The output of Simple table HTML code is shown in figure 7.1 5 ASW TABLEDNHTR x © D te:7/C:/Documents%20ande%20Setungs/Admnstator/OES'? 6) ‘TEST TABLE HEADING 1 HEADING 2 HEADING 3 CELI = CELL2. CELL. CELL4 © CELLS-—CELLS Figure- 7.1 : A simple Table without border view in browser Attributes of > CELLSPACING: used to set the space bétween the cells in a table. It takes value in pixel. i > CELLPADDING: used to set the space between the cell data and cell wall ina table, It takes value in pixel. v WIDTH: used to set the width of the table, as either an absolute with in pixels, or a percentage of the documents width. For example: attributes Advanced HTML and CSS :: 143 D> CELL 5 TEST TABLE HEADING 1 HEADING 2 HEADING 3 CELL 1 CELL 2 CELL 3 CELL 4 CELL 6 The output of attribute code is shown in Fig. 7.2 COLSPAN: Specifies the number of columns the cell can span, The default COLSPAN for any cell is 1. Certificate in Web Designing and Development CELL | Cell Spans 2 Columns CELL 2 CELL 3 CELL4 The output of COLSPAN code is shown in figure 7.2 Figure 7.2 A sample view - COLSPAN ROWSPAN: Specifies the number of rows the cell can span. The default ROWSPAN for any cell is 1. Example: Use of ROWSPAN re 2 Cell Spans 2 rows CELL 2 CELL 3 CELL 4 CELL 5 Nested Tables ‘Advanced HTML and CSS :: 145 ‘Nested Tables means making a table inside another table. Since only the TH and TD tags can hold data, you will have to code a full table inside the TH or TD tag of another table. Hint: Code the first table completely then between the	and the

<1D>

• This is another cell
• Using list inside this cell

146 3: Certificate in Web Designing and Development Row 2, Column 2

Name Salary Ram Kumar 5000 Sheela Agarwal 7000

Row 2, Column 1

This will produce following result: * This is another cell © Using list inside this cell] Fig. 7.3 Nested table Effect of Nested Tables on Web Pages: Asingle table on a web page will generally not affect speed of downloading process. But, the moment you put one table within another table, it gets more complicated for the browser to render, and so the page loads slowly. And the more tables nested inside one another, the slower the page will load. ‘Normally, when a page loads, the browser starts at the top of the HTML and loads it sequentially down the page. However, with nested tables, it has to find the end of the table before it can display the entire thing, To avoid the above problem, you can convert nested tables into slightly more complex single tables by using the rewspan and colspan attributes on your table cells, Guidelines for making Accessible Tables Screen readers read the content of web pages as if there were no HTML tags at all. They read everything in the order that it appears in the source markup. Center for Persons with Disabilities at Utah State University in USA suggest the following guidelines for making HTML table accessible to people with disabilities. 1. Avoid tables with more than two levels of row and/or column headers 2. Use proportional sizing, rather than absolute sizing. The rule that appliesAdvanced HTML and CSS to layout tables also applies to data tables. Let the browser window determine the width of the table whenever possible, to reduce the horizontal scrolling required for those with low vision. 3. Provide names or titles for data tables using the tag. Tables ought, to have some sort of title or caption to them, Itis not absolutely necessary to have caption tags on every data table for the sake of accessibility, but it is still a good practice. 4, Header Tags: When you use the table header () tag, most browsers provide the text to become bold and centered, which can be a nice visual effect, but the tag should only be used in data tables. Do not use it in Jayout tables because you may confuse screen reader user. 5. Use the simplest possible table configuration. Visually Challenged users will “see” all the contents from tables. Their screen readers will inform the number of rows and columns in the table. When they try to navigate from one area to the other within the table, they may become disoriented. The rule of thumb here is, the simpler the better. 6. Designate row and column headers using the tag. The very first step towards creating an accessible data table is to designate row and/or column headers. This is easy enough to do. In the markup, the tag is used for table data cells and the tag is used for table header cells. INTEXT QUESTION 7. 1. Write True and False against the following statments: (a) WIDTH specifies the height of a cell. (b) CELLPADDING used to set the space between the cell data and cell ue wall in a table. (©) Table in HTML is defined row by row. The tags define a new row. 7.4 FORMS Forms are used in HTML for getting inputs from the users. It can be a registration form, feedback form, order form and so on. To take appropriate data inputs, form has components like text fields, radio buttons, check boxes, list boxes and so on. When data entry is complete, the user submits the form by clicking the submit button on the page. After submission, the data are sent to server for processing and the processing is done through CGI Scripts, PHP, ASP, or servlet etc. This CGI scripts resides at the server side.148 :: Certificate in Web Designing and Development After the user fills the form and clicks the submit button, the data pass either through method POST (used to pass large amount of data) or GET (used to pass small amount of data, passed along with the URL) to the server side. ‘Then the server handles data and performs appropriate action. Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user. A simple syntax of using

is as follows: form clements like input, textarea etc.

Most frequently used

application/x-www-form-urlencoded - This is the standard method most forms use. It converts spaces to the'plus sign and non- alphanumeric characters into the hexadecimal code for that character in ASCII text, > mutlipart/form-data - This allows the data to be sent in parts, with each consecutive part corresponding the a form control, in the order they appear in the form. Each part can have an optional content-type header of its own indicating the type of data for that form control. There are different types of form controls that you can use to colllect data from a visitor to your site. ‘Text input controls © Buttons ‘© Checkboxes and radio buttons © Select boxesAdvanced HTML and CSS :: 149 © File select boxes Hidden controls ‘© Submit and reset button Forms - Text Input Controls: There are actually three types of text input used on forms: ‘© Single-line text input controls: Used for items that require only one line of user input, such as search boxes or names. Password input controls: Single-line text input that mask the characters @user enters. ‘* Multi-line text input controls: Used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created with the element. Single-line Text Input Controls Single-line Text Input Controls are created using an <input> element whose type attribute has a value of text. Here is a basic example of a single-line text input used to take first name and last name: <FORM action="egi-bin/hello_get.cgi" method="get"> First name: <INPUT type="text" name=" <BR> Last name: <INPUT type="text” name="last_name" /> <INPUT type="submit" value="submit" /> </FORM> This will produce the following result: Fig. 7.4: Single line text input150 :: Certificate in Web Designing and Development Following is the list of attributes for <input> tag. © type: Indicates the type of input control you want to create. This element jg also used to create other form controls such as radio buttons and checkboxes. «name: Used to give the name part of the name/value pair that is sent to the server, representing each form control and the value the user entered. ‘© value: Provides an initial value for the text input control that the user will see when the form loads. «size: Allows you to specify the width of the text-input control in terms of characters. © maxlength: Allows you to specify the maximum number of characters a user can enter into the text box. Password Input Controls This is also a form of single-line text input controls created using an <input> element whose type attribute has a value of password, Here is a example ofa single-line password input used to take user password: <FORM acto Login : <INPUT type="text" name="login" /> <BR> Password: <INPUT type="password" name="password" /> <INPUT type="submit" value="submit” /> </FORM> /egt-bin/hello_get.cgi" method="get"> This will produce following result: Login : L_ Password: [————~*& Lt Fig. + Single line password input Multiple-Line Text Input Controls Ifyou want to allow a visitor to your site to enter more than one line of text, you should create a multiple-line text input control using the <textarea> clement.Advanced HTML and CSS :: 151 Here is abasic example of a multi-line text input used to take item description: <FORM action="/https/www.scribd.com/egi-bin/hello_get.cgi” method="get"> Description : <br /> <TEXTAREA rows="5" cols="50" name="description”> Enter description here...

This will produce following result: Fig. 7.6 : Multiline text input Following are the details of above used attributes for tag. ‘© name: The name of the control. This is used in the name/value pair that is sent to the server. © rows: Indicates the number of rows of text area box. © cols: Indicates the number of columns of text area box. Checkboxes Control Checkboxes are used when more than one option is required to be selected. ‘ They are created using <INPUT> tag as shown below. Here is example of HTML code for a form with two checkboxes <FORM action="/https/www.scribd.com/egi-bin/checkbox.cgi" method="get"> <INPUT type="checkbox" name="maths” value="on"> Maths <INPUT type="checkbox" name="physics” value="on"'> Physics <INPUT type="submit” value="Select Subject" /> </FORM>152 :: Certificate in Web Designing and Development ‘The result of this code is the following form: es Physics (Select Subject) | Fig. 7.7 : Check box Following is the list of important checkbox attributes: * type: Indicates that you want to create a checkbox, ‘© name: Name of the control. ‘© value: The value that will be used, if the checkbox is selected. More than one checkbox should share the same name only, if you want to allow users to select several items from the same list. ‘© cheeked: Indicates that when the page loads, the checkbox should be selected. Radiobox Control Radio Buttons are used when only one option is required to be selected. They are created using <input> tag as shown below: Here is an example HTML code for a form with two radio button: <FORM action="/https/www.scribd.com/egi-bin/radiobutton.cgi” method="post"> <INPUT type="radio" name="subject” value="maths" /> Maths <INPUT type="radio" name="subject" value="physics" /> Physics ‘<INPUT type="submit" value="Select Subject” /> </FORM> The result of this code is the following form : O Maths ‘ O Physics (Select Subject Fig. 7.8 : Radio button Following is the list of important radiobox attributes: ‘© type: Indicates that you want to create a radiobox. ‘© name: Name of the control. ‘* value: Used to indicate the value that will be sent to the server if this option is selected. ‘* checked: Indicates that this option should be selected by default when the page loads.‘Advanced HTML and CSS :: 153 7.5 ACCESSIBLE FORMS Forms are not the easiest of things to use for people with disabilities. Labels Each form field should have its own label. The label tag sorts this out, a for attribute that associates it to a form element, example: <FORM> <LABEL for="yourName">Your Name</label> <input type="text” ourName" |> name="yourName” id=" Labels have the added bonus of visual browsers rendering the labels themselves clickable, thus putting the focus on the associated form field. Note: name and id are both required - the name for the form to handle that field and the i for the label to associate it to. Fieldset and legends In order to have combined input, you can create group fields, for example name (first, last, middle, title ete.) or address (line 1, line 2, district, state, ‘country, postal code ete.) using the fieldset tag. Within the field set, you can set a legend with the legend tag. Visual browsers tend to represent field sets with a border surrounding them and legends breaking the left of the top border. <FORM action="somescript. php” > <FIELDSET> <LEGEND>Name</LEGEND> _<P>First name <input type="text” name="firstName” /></P> § <P>Last name </FIELDSET> <FIELDSET> <LEGEND>Address~/legend> <P> Address <TEXTAREA namie="address" >

Postal code Physics Hindi ‘The result of this code is the following form: Fig. 7.9: Drop down box Following is the list of important attributes of : + value: The value that is sent to the server if this option is selected. ‘+ selected: Specifies that this option should be the initially selected value when the page loads. + Iabel: An alternative way of labeling options. Option groups The tag is used to group related option groups in a drop-down list. Ifyou have a long list of options, groups ofrelated options are easier to handle for a user, It requires a label attribute, the value of which is displayed as a —_ 4Advanced HTML and CSS non-selectable pseudo-heading preceding that group in the drop-down list of visual browsers. Example source code and their output result are given below: India China Pakistan Frances/OPTION> Russia UK Canada Mexico USA The result of this code is the following form Fig. 7.10 : Option groups : Label attributes File Select Boxes Ifyou want to allow a user to upload a file to your web site from his computer, you will need to use a file upload box, also known as file select box. This is also created using the element.156 :: Certificate in Web Designing and Development Here is an example HTML code for a form with one file select box:

This will produce following result: This is page 10 Fig. 7.12 : Hidden form controls Submit and Reset Button These are special buttons which can be created using First name:
Last name: -| Here

There

Limbo

The above example shows that tabbing would jump from “Here” to “Limbo” to “There”. Access keys ‘Access keys allow easier navigation by assigning a keyboard shortcut to a link (which will usually gain focus when the user presses “Alt” or “Ctrl” + the access key)158 :: Certificate in Web Designing and Development Some page For users who do not use pointing devices, this can be a quick way to navigate. The trouble is that the user may not be knowing what are different access keys unless these are explicitly stated, although some assistive software will tell the user about it. INTEXT QUESTION 7.2 2. Write True or False against following statments: (a) RADIO is used for attributes. (6) Drop down menu is not supported in HTML. (©) Text Input Controls may be used for multi-line input. (d) End user can see the hidden form controls. 7.7 CASCADING STYLE SHEETS (CSS) - ADVANCED In the previous lesson Basic HTML & CSS you have learnt the core concepts ofCSS. In this lesson, you will get attention to some more advanced aspects ofCSS such as: adding effects to your anchor tags; and positioning of HTML elements in a web page. 7.7.1 Advantages of CSS Cascading Style Sheets, generally referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable, CSS is created and maintained through a group of working people called as World Wide Web Consortium or W3C. CSS is easy to learn and understand, but it provides powerful control over the presentation ofan HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML. The Advantages of CSS are: © 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, as well as a variety of other effects. ‘¢ 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.Advanced HTML and CSS © 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 to all the occurrences of that tag. + 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 far better look to your HTML page in comparison of 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 ofa website can be presented for handheld devices such as Personal Digital Assistants (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 its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers. Part of CSS rules Each rule has two parts: 1. a selector that defines the HTML element(s) to which the rule applies 2. a collection of one or more declarations, made up of a property and a value, which describe the appearance of all the elements that match the selector ‘Types of CSS The three types of CSS style declaration are as follows 1. Internal (Embedded) Styles are defined in the section of the current web page. Declaration: 2. Inline Styles are defined within the HTML markup of a particular page element, Example: 3. External Styles are written in a separate document and then attached to cone or more web pages. Example: 160 :: Certificate in Web Designing and Development 7.7.2 CSS Selectors InCSS, pattern matching rules determine which style rules apply to elements in the document tree. These pattems called selectors, may range from simple element names to rich contextual pattems. Ifall conditions in the pattem are true for acertain element, the selector matches the element. ‘The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case- insensitive, but in XML they are case-sensitive. ‘The following table summarizes CSS selector syntax: Table 7.1 CSS Selectors syntax Described in Pattern | Meaning Section * ‘Matches any element. Universal selector E Matches any E element (Le.,anelementof | Type selectors type E). 7 EF Matches any Felement thatis a descendant | Descendant of an E element. selectors E>F Matches any F element that isa child of an | Child selectors element E. Esfirst-child| Matches element E when Eis the firstchild | pseudo class/ of its parent. Elements slink Matches element E if Bis the source anchor | Pseudo-class/ E:visited | of ahyperlink of which the targetis not yet | Ejements visited (:link) or already visited (-visited). ‘ Eaactive E:hover | Matches E during certain user actions. Pseudo-class/ Esfocus j Elements E+F Matches any F element immediately ‘Adjacent meleciors preceded by a sibling element E. E{foo] Matches any E element with the “foo” | Attribute selectors attribute set (Whatever the value). E{foo=” | Matches any E element whose “foo” warning”] | attribute value is exactly equal to | Attribute selectors “warning”, E[foo- ‘Matches any E element whose “foo™ waming"] | attribute value is a list of space-separated | values, one of which is exactly equal to | Attribute selectors “warming”.Advanced HTML and CSS :: 161 Eflangi=" | Matches any E element whose “lang” en”) attribute has a hyphen-separated list of values beginning (from the left) with “en”. Attribute selectors Emyid | Matches any E element with ID equal to | ID selectors “myid”. DIV. Language specific. (in HTML, the same a8 warning | DIV{(class~="warning”].) Class selectors Source: World Wide Web Consortium (W3C) http://www.w3.org/TR/CSS2/ selectorhtml 7.7.3 Selector Syntax A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo- classes, in any order. The simple selector matches if all of its components match. The terminology used here in CSS 2.1 is different from what is used in CSS3. For example, a “simple selector” refers to a smaller part of a selector in CSS3 than in CSS 2.1 A selector is a chain of one or more simple selectors separated by Combinators. Combinators are: white space, “>”, and “+”. White space may appear between a combinators and the simple selectors around it. The elements of the document tree that match a selector are called subjects of the selector. A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and Combinator to achain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector. ” One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject. 7.7.4 Grouping When several selectors share the same declarations, they may be grouped into a comma-separated list In this example, you condense three rules with identical declarations into one. Thus, HI { font-family: sans-serif }162 :: Certificate in Web Designing and Development H2 { font-family: sans-serif } H3 { font-family: sans-serif } is equivalent to: HI, H2, H3 { font-family: sans-serif } CSS offers other “shorthand” mechanisms as well, including multiple declarations and shorthand properties. 7.7.5 Universal Selector The universal selector, written “*”, matches the name of any element type, It matches any single element in the document tree. If the universal selector is not the only component of a simple selector, the “*” may be omitted. For example: ©. *[lang=fi] and [lang=fr] are equivalent. © *.warning and .waming are equivalent. © *#myid and #myid are equivalent. _ 7.7.6 Type selectors A ne selector matches the name of a document language element type. A ype selector matches every instance of the element type in the document tree. ‘The following rule matches all H1 elements in the document tree: HI { font-family: sans-serif } 7.7.7 Descendant Selectors oa ‘At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., “Match those EM elements that are contained by an Hi element”). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form “A 3” matches when an element is an arbitrary descendant of some ancestor element a, For example, consider the following rules: HI { color: red } EM { color: red } Although the intention of these rules is to add emphasis to text by changing. its color, the effect will be lost in a case such as:Advanced HTML and CSS :: 163 This headline is very important The following code will change the text color to blue whenever EM occurs with HI HI { color: red } EM { color: red } HI EM { color: blue } The third rule will match the EM in the following fragment: This headline is very important The following selector: DIV*P. ‘matches a P clement that is a grandchild or later descendant of'a DIV element. Note the white space on either side of the “*” is not part of the universal ‘selector; the white space is a combinator indicating that the DIV must be the ancestor of some element, and that element must be an ancestor of the P. ‘The selector in the following rule, which combines descendant and attribute selectors, matches any element that has the “href” attribute set and is inside a P that is itself inside a DIV: DIV P *[HREF] 7.7.8 Child Selectors A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”. ‘The following rule sets the style of all P elements that are children of BODY: BODY > P { line-height: 1.3 } ‘The following example combines descendant selectors and child selectors: DIV OL>LIP It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant ofa DIV. Notice that the optional white space around the “>” combinator has been left out. 7.7.9 Adjacent Sibling Selectors Adjacent sibling selectors have the following syntax: El + E2, where E2 is164 +: Certificate in Web Designing and Development the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and El immediately precedes E2, ignoring non- clement nodes (such as text nodes and comments). Thus, the following rule states that, when a P element immediately follows a MATH element, it should not be indented: MATH + P { text-indent: 0 } The next example reduces the vertical space separating an H1 and an H2 that immediately follows it: Hi + H2 { margin-top: -Smm } The following rule is similar to the one in the previous example, except that it adds a class selector. Thus, special formatting occurs only when H1 has class="opener”: H.opener + H2 { margin-top: -Smm } 7.7.10 Attribute Selectors CSS allows authors to specify rules that match elements which have certain attributes defined in the source document. Matching attributes and attribute values Attribute selectors may match in four ways: {ATT] Match when the element sets the “att” attribute, whatever the value of the attribute. [ATT=val] Match when the element’s “att” attribute value is exactly “val”. IATT~=val] Represents an element with the att attribute whose value is a white space- separated list of words, one of which is exactly “val”. If “val” contains white space, it will never represent anything (since the words are separated by spaces). If “val” is the empty string, it will never represent anything either. Attribute values must be identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language. For example, the following attribute selector matches all H1 elements thatspecify the “title” attribute, whatever its value: Hiftitle] { color: blue; } In the following example, the selector matches all SPAN elements whose “class” attribute has exactly the value “example”: SPAN{class~example] { color: blue; } Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute. Here, the selector matches all SPAN elements whose “hello” attribute has exactly the value “Cleveland” and whose “goodbye” attribute has exactly the value “Columbus”: SPAN[helk leveland"][goodbye="Columbus"] { color: blue; } The following selectors illustrate the differences between “=” and “~=”. The first selector will match, for example, the value “copyright copyleft copyeditor” for the “rel” attribute. The second selector will only match when the “href” attribute has the value “http://www.w3.org’”. Afrel—="copyright"] Afhref"hetp://www.w3.org/"] 7.7.11 Class Selectors ‘Working with HTML, authors may use the period (.) notation as an alternative to the ~= notation when representing the class attribute. Thus, for HTML, div. value and div[class~=value] have the same meaning. The attribute value must immediately follow the “period” (..). For example, you can assign style information to all elements with class-—"pastoral" as follows: * pastoral { color: green } /* all elements with class~pastoral */ or just -pastoral { color: green } /* all elements with class~=pastoral */ The following assigns style only to H1 elements with class~="pastoral”: Hi pastoral { color: green } /* H1 elements with class~=pastoral */ Given these rules, the first H1 instance below would not have green text, while the second would:166 :: Certificate in Web Designing and Development Not green/H1> element yee first-line pefirst-line | Selects the first line of every

element . irst-child pifirst-child | Selects every

elements that is the first child of its parent :before prbefore Insert content before every

element after prafter Insert content after every

element slang(language) | p:lang(it) Selects every

element with a lang attribute value starting with “ The syntax of pseudo-classes: selectorspseudo-class {property:value;} CSS classes can also be used with pseudo-classes: selector.class:pseudo-class {property:valu Link Selector You can apply what you already learnt in the previous lessons to links (ie. change colors, fonts, underline, etc). The new point is that CSS allows you to define these properties differently, depending on whether the link is unvisited, visited, active, or whether the cursor is on the link. This makes it possible to add fancy and useful effects to your website. To control these effects you can use so-called pseudo-classes. Example Link.css Select and style unvisited, visited, hover, and active links: ink ——_{color:green;} fed {color:green;} over {color:red;} tive {color:yellow;} *168 :: Certificate in Web Designing and Development Use az link and a: visited for unvisited and visited links respectively. Links that are active have the pseudo-class a: active and a: hover is when the cursor is on the link. Example Link.html

Mouse over and click the link: nios.ac.in

Output in Browser Fig. 7.14: Sample output for Link.html Pseudo-class: hover The pseudo-class :hover is used when the mouse pointer hovers over a link.Advanced HTML and CSS :: 169 This can be used to create interesting effects. For example, if we want our links to.be yellow and be italicized when the cursor is pointed at them, our CSS should look like this: Example, Select and style a link when you mouse over it: achover t background-color:yellow; font-style: italic; } The hover selector can be used on all elements, not only on links. Example Hover.html nios.ac.in ; wikipedia.org

Note: The -hover selector style links on mouse-over.

170 =: Certificate in Web Designing and Development Output in Browser Fig, 7.15 : Sample output for hover.html Navigation Bars Having easy-to-use navigation is important for any web site. With CSS you can transform normal HTML menus into good-looking navigation bars. Navigation Bar = List of Links A navigation bar needs standard HTML as a base. In below example, source codes will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the

and
• elements make perfect sense: ‘ Example NaviagtionBar.html x
  Home
  • News
  • About

  A background color is added to the links to show the link area.

  Notice that the whole link area is clickable, not just the text.

  The above example code: list-style-type:none - Removes the bullets. A navigation bar does not need list markers Setting margins and padding to 0 to remove browser default settings To build a vertical navigation bar, style elements is used in to the code. Output in Browser ‘A baceround colori added tothe Eek to show the ak area. Fig. 7.16 : Sample output for Navigation Bar Now let’s remove the bullets and the margins and padding from the lis 7.9 CSS FLOAT With CSS float, an element can be pushed to the left or right, allowing other172 :: Certificate in Web Designing and Development elements to wrap around it. Float is very often used for images, but itis also useful when working with layouts. Elements are floated horizontally; this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can, Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it, The elements before the floating element will not be affected. If an image is floated to the right, following text flows around it, to the left: Example: img c float:right; } Example CSSFloat.html

  In the paragraph below, we have added an image with style float:right. The result is that the image will float to the right in the paragraph.

  National Institute of Open Schooling. National Institute of Open Schooling...

  Output in Browser Fig. 7.17: Sample output for Float Turning off Float - Using Clear Elements after the floating element will flow around it. To avoid this, use the clear property.The clear property specifies which sides of an element other floating elements are not allowed. Add a text line into the image gallery, using the clear property: Example: -text_line { clear:both; 3 7.10 CLEAR The clear CSS property specifies whether an element can be next to floating clements that precede it or must be moved down (cleared) below them, The clear property applies to both floating and non-floating elements.174 :: Certificate in Web Designing and Development Property Values Value Description left No floating elements allowed on the left side right No floating elements allowed on the right side both No floating elements allowed on either the left or the right side none Default. Allows floating elements on both sides inherit Specifies that the value of the clear property should be inherited from the parent element ‘Table 7.3 ‘When applied to non-floating blocks, it moves the border edge of the element down until itis below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur. When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones. The floats that are relevant tobe cleared are the earlier floats within the same block formatting context. Example Clear.Html No floating elements allowed on the left or the right side of a specified paragraph: This text appear afier clear property.
  '95" height="84" />Advanced HTML and CSS :: 175 ‘The output of the above code is given below. fa ‘This text appear afer clear property This is some text. Fig. 7.18 : Clear Property 7.11 VISIBILITY Aproperty called visibility allows you to hide an element from view. You can use this property alongwith Javascriptto create very complex menu and very complex webpage layouts, ‘You may choose to use the visibility property to hide error messages that are only displayed ifthe user needs to see them, or to hide answers to a quiz until the user selects an option. Note: Remember that the source code will still contain whatever isin the invisible paragraph, so you should not use this to hide sensitive information such as credit card details or passwords. The visibility property can take the values listed in the table that follows: ‘Table 7.4 : visibility values Value Description Visible | The box and its contents are shown to the user. Hidden | The box and its content are made invisible, although they still affect the layout of the page. Collapse | This is for use only with dynamic table columns and row effects. Here is the example:

  ‘This paragraph should be visible in normal way.

  This paragraph should not be visible.

  176 :: Certificate in Web Designing and Development This will produce following resul This paragraph should be visible in normal we 7.12 POSITIONING CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can also specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element. ‘Now you will leam three type of CSS positioning like Relative, Absolute and Fixed and their properties with examples: You can use two values top and left, alongwith position property to move an HTML element anywhere in HTML document. Here’s a: quick reference when moving HTML elements in CSS. © Move Left - Use a negative value for left. ‘© Move Right - Use a positive value for left. © Move Up - Use a negative value for top. ‘© Move Down - Use a positive value for top. Note: You can use bottom or right values as well in the same way as top and left. Relative Positioning Relative positioning changes the position of the HTML element relative to where it normally appears, So “left:20” adds 20 pixels to the element’s LEFT position. Here is the example:

  This div has absolute positioning,

  This will produce following result: This div has absolute positionin Fixed Positioning Fixed positioning allows you to fix the position of an element to a particular spot on the page - regardless of scrolling. Specified coordinates will be relative to the browser window. Here is the example:

  This div has fixed positioning.

  Scroll down this page using scrollbar available at right side:

  This will produce below output in browser. Fig. 7.19 : Fixed positioning178 :: Certificate in Web Designing and Development 7.13 CSS LAYERS CSS gives you opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other. The z-index property is used alongwith position property to create an effect of ayers. You can specify which element should come on top and which element should come at bottom. ‘A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.
  n:relative;‘Advanced HTML and CS 179 This ll produce following result: Fig. 7.20: CSS Layers 7.14 LAYOUTS In previous sections, you have already learnt the designing of page layouts using HTML Tables. However you must know CSS also provides plenty of controls for positioning elements in a document is pivotalto the future of web documents and will be supported by most browsers © CSSismoreexact than tables, allowing your document to be viewed as you intended, regardless of the browser window. © Keeping track ofnested tables can be a difficult task, © CSS rules tend to be well organized, easily read, and easily changed. CSS also provides table-layout property to make your tables load much faster. Following is the example: CSS table layout cell 1 '200">CSS table layout cell 2 ixed;width:600px;"> Simple Column Layout Here are the steps to create a simple Column Layout using CSS:180 :: Certificate in Web Designing and Development ‘Set the margin and padding of the complete document as follows: Now wewill define a column with yellow color and later we will attach this rule to a

  : Upto this point we willhavea document with yellow body, so lets now define another division inside level: Now we will nest one more division inside level! and we will change just background color: Finally we use the same technique, nest a level3 division inside level2 to get the visual layout for the right column:Advanced HTML and CSS :: ‘Complete source code

  Final Content goes here... Final Content goes here... Final Content goes here...

  _

  This section will expand when you will put more content here:

  In similar way you can add top navigation bar or ad bar at the top of the page. ‘This example code will produce following result: Fig. 7.21 : Simple Column Layout‘Advanced HTML and CSS :: 183 ‘The CSS muiti-column layout extends the block layout mode to allow the easy definition of multiple columns of text. People face problems in reading text if lines are too long; ifit takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximumuse ofa large screen, you should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without foreing column breaks at fixed positions, or severely restricting the markup allowed inthe text, or using heroic scripting. This limitation is solved by adding new CSS properties to extend the traditional block layout mode. Here is an example ofa simple three-column class: -webkit-column-gap: 20px; } Of which you would apply to a block of text like so: Sample HTML: ‘

  You might also like

  • Chapter - 7

    

    No ratings yet

    Chapter - 7

    46 pages
  • Unit 2 - WD

    

    No ratings yet

    Unit 2 - WD

    39 pages
  • Chapter 4. HTML Tables: Objectives

    

    No ratings yet

    Chapter 4. HTML Tables: Objectives

    16 pages
  • CH 07

    

    No ratings yet

    CH 07

    34 pages
  • HTML How To Createtables

    

    No ratings yet

    HTML How To Createtables

    15 pages
  • HTML - Unit - 2 Table and Hyperlink

    

    No ratings yet

    HTML - Unit - 2 Table and Hyperlink

    3 pages
  • Wta Svit Notes Mod 2

    

    No ratings yet

    Wta Svit Notes Mod 2

    40 pages
  • Tables and Forms

    

    No ratings yet

    Tables and Forms

    69 pages
  • Chapter 3 - Table & Forms

    

    No ratings yet

    Chapter 3 - Table & Forms

    96 pages
  • Lecture04 WT HTML Tables

    

    No ratings yet

    Lecture04 WT HTML Tables

    48 pages
  • Notes11 Htmltables

    

    No ratings yet

    Notes11 Htmltables

    10 pages
  • ch09 Tables

    

    No ratings yet

    ch09 Tables

    16 pages
  • TABLES

    

    No ratings yet

    TABLES

    20 pages
  • Unit 4 - 5

    

    No ratings yet

    Unit 4 - 5

    26 pages
  • Unit 4

    

    No ratings yet

    Unit 4

    46 pages
  • WEB TECHNOLOGIES - ITC 351 Lecture - 5

    

    No ratings yet

    WEB TECHNOLOGIES - ITC 351 Lecture - 5

    20 pages
  • Module 4 Responsive Web Design

    

    No ratings yet

    Module 4 Responsive Web Design

    52 pages
  • Tables

    

    No ratings yet

    Tables

    6 pages
  • Tables and CSS, Links and Images

    

    No ratings yet

    Tables and CSS, Links and Images

    25 pages
  • Unit II - Lesson 9 - HTML Table

    

    100% (1)

    Unit II - Lesson 9 - HTML Table

    14 pages
  • Lab 6 HTML Tables: Objectives

    

    No ratings yet

    Lab 6 HTML Tables: Objectives

    9 pages
  • Unit 4

    

    No ratings yet

    Unit 4

    7 pages
  • HTML Document Tables

    

    No ratings yet

    HTML Document Tables

    3 pages
  • Lecture 2 - HTML II 04022025 112406am

    

    No ratings yet

    Lecture 2 - HTML II 04022025 112406am

    30 pages
  • Web Unit 2

    

    No ratings yet

    Web Unit 2

    39 pages
  • Chapter 6 Tables 126-143

    

    No ratings yet

    Chapter 6 Tables 126-143

    18 pages
  • 3-Tables and Frames

    

    No ratings yet

    3-Tables and Frames

    10 pages
  • Chapter 8 (Table Markup)

    

    No ratings yet

    Chapter 8 (Table Markup)

    13 pages
  • HTML Tables Tutorial With Notepad

    

    No ratings yet

    HTML Tables Tutorial With Notepad

    25 pages
  • HTML Tables

    

    No ratings yet

    HTML Tables

    22 pages
  • Note 02 HTML PDF

    

    No ratings yet

    Note 02 HTML PDF

    46 pages
  • Term-II Worksheet-1 HTML - Images, Links and Tables

    

    No ratings yet

    Term-II Worksheet-1 HTML - Images, Links and Tables

    4 pages
  • Ip Chapter 11

    

    No ratings yet

    Ip Chapter 11

    27 pages
  • Table

    

    No ratings yet

    Table

    29 pages
  • HTML Tables and Forms & Advanced CSS

    

    No ratings yet

    HTML Tables and Forms & Advanced CSS

    39 pages
  • HTML Part 4

    

    No ratings yet

    HTML Part 4

    3 pages
  • HTML Basics:: For Customized Training Related To Javascript or

    

    No ratings yet

    HTML Basics:: For Customized Training Related To Javascript or

    21 pages
  • (M4-MAIN) Responsive Web Design - 2

    

    No ratings yet

    (M4-MAIN) Responsive Web Design - 2

    52 pages
  • WD Chap4

    

    No ratings yet

    WD Chap4

    34 pages
  • Lesson 6 Notes

    

    No ratings yet

    Lesson 6 Notes

    4 pages
  • ConnollyHoar - 3rded - Chapter 05 - 2025-01-09 - 20-53

    

    No ratings yet

    ConnollyHoar - 3rded - Chapter 05 - 2025-01-09 - 20-53

    50 pages
  • Module 2 18CS63

    

    No ratings yet

    Module 2 18CS63

    40 pages
  • Q2 Module 5

    

    No ratings yet

    Q2 Module 5

    10 pages
  • HTML

    

    No ratings yet

    HTML

    12 pages
  • Delhi Public School Bangalore - East Computer Science More On Html5 Notes Grade Vii

    

    No ratings yet

    Delhi Public School Bangalore - East Computer Science More On Html5 Notes Grade Vii

    1 page
  • Tables in HTML

    

    No ratings yet

    Tables in HTML

    7 pages
  • Web-Module II - Chapter1

    

    No ratings yet

    Web-Module II - Chapter1

    16 pages
  • 0000web Technology Sec5

    

    No ratings yet

    0000web Technology Sec5

    24 pages
  • Quarter 2 Week 5: Information and Communications Technology (ICT) Grade 10 Webpage Design Special Science Course

    

    No ratings yet

    Quarter 2 Week 5: Information and Communications Technology (ICT) Grade 10 Webpage Design Special Science Course

    12 pages
  • Web Assignment

    

    No ratings yet

    Web Assignment

    17 pages
  • HTML Tables

    

    No ratings yet

    HTML Tables

    13 pages
  • HTML Table 1

    

    No ratings yet

    HTML Table 1

    14 pages
  • Web Basics (HTML5) Classbook Lesson03 Tables

    

    No ratings yet

    Web Basics (HTML5) Classbook Lesson03 Tables

    20 pages
  • 5C. Guide 4 SMT 1

    

    No ratings yet

    5C. Guide 4 SMT 1

    6 pages
  • COMPUTER PROGRAMMING GR 11 HTML5 List, Table and Image

    

    No ratings yet

    COMPUTER PROGRAMMING GR 11 HTML5 List, Table and Image

    25 pages
  • Lecture 3 - HTML - Links Table & List

    

    No ratings yet

    Lecture 3 - HTML - Links Table & List

    34 pages
  • MODULE - II (Tables)

    

    No ratings yet

    MODULE - II (Tables)

    29 pages
  • Week 6 Lecture 2: Tables

    

    No ratings yet

    Week 6 Lecture 2: Tables

    2 pages
  • Table

    

    No ratings yet

    Table

    5 pages

  CSS table layout cell 3