beginning html xhtml css and javascript phần 9 potx

with rules in a style sheet clear = left | right | none | all Breaks the flow of the page and moves the break down until the specified margin is clear form ’ s processing application as

In this exercise, you create a linked table of contents that will sit at the top of a long document in an

ordered list and link to the headings in the main part of the document

The XHTML file ch08_exercise1.html is provided with the download code for this book, ready for

you to create the style sheet Your style sheet should do the following:

Set the styles of all links including active and visited links

Make the contents of the list bold

Make the background of the list light gray and use padding to ensure the bullet points show

Make the width of the links box 250 pixels wide

Change the style of heading bullet points to empty circles

Change the style of link bullet points to squares

Your page should look something like Figure A - 13

Answer

To start off, you can create a rule that applies to the < body > element to control the background color of the page and the font used

body { background-color:#ffffff;

font-family:arial, verdana, sans-serif;

font-size:12px;}

There were several tasks that related to the list of bullet points that make up the contents If you look at the following rule, you can see it starts by setting the background color of the list to a light gray This is followed by a property that sets the default style of bullet points to empty circles Then all the text is made bold The fourth property sets the padding to the left of the list Finally, the width of the lists are set to 250 pixels wide

ul { background-color:#d6d6d6;

ul ul { list-style:square;

width:220px;}

The final item on the list was to set the styles of all links including active and visited links, which requires another four rules:

a:link { color:#0033ff;;

text-decoration:none;}

a:visited { color:#0066ff;

text-decoration:none;}

a:active { text-decoration:underline;}

a:link:hover { color:#003399;

background-color:#e9e9e9;

text-decoration:underline;}

Exercise 2

In this exercise, you test your CSS positioning skills You should create a page that represents the links to

the different sections of the chapter in a very different way Each of the sections will be shown in a

different block, and each block will be absolutely positioned in a diagonal top left to bottom right

direction The middle box should appear on top, as shown in the Figure A - 14

Figure A-14 You can find the source XHTML file ( ch08_exercise2.html ) with the download code for this chapter

Next, you can set a rule that applies to all of the < div > elements Even though you will be changing the

background color of two of the boxes, whenever boxes are taken out of normal flow there is a risk that

they will overlap, so you should give them a background color (because by default boxes have no

background)

You can also set some common properties, adding padding to each box, as well as a border and the width of the boxes

div { background-color:#ffffff;

top:70px;

z-index:2;

background-color:#d6d6d6;}

div.page2 { position:absolute;

top:170px; left:100px;

z-index:3;}

div.page3 { position:absolute;

Take another look at the article page from the Guardian newspaper ’ s web site; it is shown again in Figure

A - 15 List all the different elements on the page that would have been listed in the design stage, and put them together in their relevant grouping or categories For example, the main article section of the page might need a list like this:

TitleSummaryAuthorDate

Answer

It should look something like the following list (although there will be some slight differences depending

on the level of detail you have gone into and the names you have chosen)

Site name / link to home pageSearch

Navigation

Travel, Environment, Blogs, Video, Community, Jobs

Breadcrumb trail Article

Title

SummaryAuthorDateArticle historyMain photographPhotograph captionArticle body Social media links Buzz Up, Digg Tools

Print, Send to friend, Share, Clip, Contact

Change text size Related article links

Most viewed articles Last 24 hours, last 7 days, most talked about

Best sellers from shop

Exercise 2

Try to recreate the structure of the page you can see in Figure A - 15 It sits in the 12 - column 960 - pixel grid

we were using in this chapter, so you have seen much of the code you need already — you just need to assemble it correctly

Answer

The code in ch09_eg07.html and ch09_eg07.css shows several configurations for columns on the grid, and covers most of what you need for the example

What is missing from this example is a CSS class that splits the page into two, which is needed because

the main article only takes up half of the page You also need to add a margin to the right-hand side of

the first column The new rules should look like this:

Now, you have all of the combinations of columns that you need; you can start to build up the structure

that is shown in Figure A - 15

If you look at the main article, which takes up half of the page, we will use the new class we created for

that Next to that is a column that takes up one - sixth of the page, so we will use the appropriate column

for that — column4of6 The final column there takes up one - third of the page, so we use the class

the right is different than the others because it does not have a margin to the right And for clarity, it

helps to use the class that represents the element ’ s position

At the top of the page, all of the elements either take up the full width of the page, or fit into thirds of

< title > Layout Example < /title >

text size < /div >

< div id=”header clear” > ad < /div >

< div class=”column1of3 clear” > site name < /div >

< div class=”column2of3” > empty < /div >

< div class=”column3of3” > search < /div >

< div class=”column4of6” > socia media links, tools, and other links < /div >

the shop < /div >

< div class=”clear” > < /div >

< /div >

In this exercise, you should add a second page to the Try It Out form at the end of the chapter

You should also add the following:

An indication at the top of the page as to how much of the form the user has completed

A Back button and a Proceed button at the bottom (instead of the Submit button)

Information Form control Required

When you have finished, the page should look something like Figure A - 16

❑

❑

Answer

To start, you need to add indicators to show how far the user is through the form You are indicating that

they are at step 2 of 3 So you create an element to contain each of the steps

If you are following the same approach as you did in the last chapter, you could use a < div > element for

each of these steps and call these column1of3 , column2of3 , and column3of3 , or you could just create

one class that represents all of them, called step

In this case, however, you will use an unordered list for each of the steps rather than a < div > element

since they are related points

Because you are going to use the CSS float property to make these list items sit next to each other, and

because the form is in normal flow, the form might end up sitting next to the three steps unless you use

the CSS clear property When you come to the CSS, you will create a CSS rule that will use the clear

property, and attach it to any element that has a class attribute whose value is clear

< br class=”clear” / >

Then there is the main part of the form, which collects the address details You will change the < legend >

for the fieldset at the same time as adding the address fields:

Figure A-16

< form name=”frmExample” action=”” method=”post” >

< span class=”next” > < input type=”submit” value=”Proceed” / > < /span >

< div class=”clear” > < span class=”required” > < /span > = required < /div >

.steps li {display:inline; float:left; width:100px; margin:20px;

border:1px solid #000000;}

.steps on {border: 1px solid #666666; background-color:#efefef;

color:#000000; background-color:#ffffff;}

You also need to add the class that describes how to clear content that comes after floated elements:

.clear {clear:both;margin:20px;}

Finally, in order to make the next button sit to the right of the form, you need to float that element to the

right of the fieldset:

The exercise is based around a counter (to work out where you are in your tables); each time the code is

run, the counter increments by 1 So, you need to make sure the counter can go up to 20, rather than 10

This goes in the condition of the while loop:

As you can see, this code is no longer than the loop in ch11_eg09.html , but it writes out twice the

numbers, which really shows you the power of using loops in your code

Exercise 2

Modify ch11_eg06.html so that it can say one of three things:

“ Good Morning ” to visitors coming to the page before 12 p.m (using an if statement)

“ Good Afternoon ” to visitors coming to the page between 12 and 6 p.m., again using an if

statement (Hint: You might need to use a logical operator.)

❑

❑

“ Good Evening ” to visitors coming to the page after 6 p.m up until midnight (again using an if statement)

Answer

This script needs to use the getHours() method of the date object to determine the time and then uses

if statements to check the appropriate time for each statement presented to the user

Note how the afternoon uses a logical operator to check that it is after 12 but before 6 p.m

if (time > = 12 & & time < 18) document.write(‘Good Afternoon’)

The function should check that the user has done the following things:

Entered his or her name

Provided a valid e - mail address

Selected one of the radio buttons as an answer to the question

Given an answer for the tiebreaker question and that it is no more than 20 words

These should be in the order that the controls appear on the form

Here is the code for the form:

prizes!) < /h2 >

this question: “What color are strawberries?” Then provide an answer for

the tie-breaker question: “I would like to win a case of Jenny’s Jam

< td > < input type=”radio” name=”radAnswer” value=”Red” / > Red < br / >

running — it starts off with a value of true , which is switched to false if any of the form fields fail to meet the requirements

function validate(form) { var returnValue = true

First you have to check whether the value of the txtName field has a value in it:

var name=form.txtName.value

if (name==””) {

returnValue = false;

alert(“You must enter a name”) document.frmCompetition.txtName.focus();

}

Next you have to check whether the e - mail address follows the format it is supposed to If the address

is empty, it will not match the regular expression; therefore you do not need to check if the control is empty first:

var email=form.txtEmail.valuevar rxEmail = /^\ w(\.?[\w-])*@\w(\.?[\w-])*\.[a-z]{2,6}(\.[a-z]{2})?$/i;

if (!rxEmail.test(email)) {

returnValue = false;

alert(“You must enter a valid email address”) document.frmCompetition.txtEmail.focus() }

Next you must loop through the radio buttons to see if an answer was provided This involves looping through the buttons and testing whether each button has the checked property If a radio button has been checked then a variable (in this case called radioChosen ) is changed to have a value of true Once all of the radio buttons have been looped through, there is a conditional if statement checking whether the value of this attribute is true or false

var radioChosen = false;

var radioButtons = form.radAnswer;

if (radioButtons[i].checked) {

radioChosen=true;

}}

if (radioChosen == false) { returnValue = false;

alert(“You did not answer the question”);

}

Finally, you come to the < textarea > element and the tiebreaker This one needs to have a value, but

must not be longer than 20 words To start then, it is checked to see if it has any value at all:

Then the value entered is split into separate words using the split() function of the string object and a

regular expression Because the split() function splits the string after spaces, you can check how many

words were entered simply by finding out the length of the array created by the split() function

Because the array is zero - based, you need to find out whether the number of items in the array is less

than or equal to 20 If there are too many words, the user is warned and told how many words she

entered in order to help her make the response shorter

var tieBreakerWords = tieBreaker.split(/\s+/g);

Please be aware that this appendix features deprecated elements, which are marked with the word “ deprecated ” next to them; you should avoid using these elements where possible because they are marked for removal from future specifications

There are also several elements that are used just to control the presentation of documents, without describing their contents or the structure of the information in the document You should avoid using these elements, and aim to use CSS to control the presentation of your documents instead

When an element has only been introduced recently, I will note the first version of Internet Explorer (IE) and Firefox (FF) to support the element next to the element ’ s name, starting with IE6 and FF2

Finally, all attribute values should be given inside double quotation marks, and any attribute listed without a value should have the name of the attribute repeated as its value in order to be XHTML - compliant — for example, disabled = “ disabled ”

to left)

document

this element

over this element

element has focus

key while this element has focus

element has focus

button while the cursor is over this element ’ s content

while over this element ’ s content

element, and has moved outside of its border so that it is no longer over the element

element ’ s content

while the cursor is over this element ’ s content

document

of a link in an image map

the link rel = relationship (same | next |

Indicates the relationship of the current document

to the target document

document to this one shape = circ | circle | poly |

Defines the shape of a region in an image map

order target = < window_name > | _parent |

Defines the name of the frame or window that should load the linked document

< applet > (Deprecated )

Used to place a Java applet or executable code in the page

Takes only the attributes listed in the table that follows

align = top | middle | bottom | left

| right | absmiddle | baseline |

Aligns the applet within the containing element

< applet > for browsers that support the element, but are unable to execute it

downloaded to the browser and searched for

with rules in a style sheet

downloaded

right of the < applet > in pixels

applet

to run

bottom of the < applet > in pixels

< area >

Used to specify coordinates for a clickable area or hotspot in an image map

for this area

image cannot be loaded

used to identify it

associated with the area

Defines the shape of a region

order

Defines the name of the frame or window that should load the linked document

< b >

The content of the element should be displayed in a bold font

< base >

Specifies a base URL for the links in a document

Supports only the attributes listed in the table that follows

this document

Defines the name of the frame or window that should load the linked document

< basefont > (Deprecated)

Specifies a base font to be the default font when rendering a document

Supports only the attributes listed in the table that follows

used as wallpaper for the background of the whole document

onload = script event handler Specifies a script to run when the page loads

unloaded

< br / >

Inserts a line break

Supports only the attributes listed in the table that follows

with rules in a style sheet clear = left | right | none | all Breaks the flow of the page and moves the break

down until the specified margin is clear

form ’ s processing application as part of the name/

value pair (required)

(continued)

the button

focus

processing application as part of the name/value pair (required)

< caption >

The content of this element specifies a caption to be placed next to a table

the caption; in Netscape it sets vertical position

character is set to

the element

Specifies the alignment within the containing element

embedded object in pixels

to the left and right of the embedded object

embedded object

associated with the object can be downloaded

object

above and below the embedded object

< form >

Containing element for form controls and elements

processing application can handle

application that will handle the form

values

browser to the processing application

values are reset

is submitted

Defines the name of the frame or window that should load the results of the form

< frame >

Specifies a frame within a frameset

Supports only the attributes listed in the table that follows

element frameborder = no | yes | 0 | 1 Specifies the presence or absence of a frame

border

frame

if the content does not fit in the space in the browser

frameset

(continued)

allowing you to control layout of the frameset

frames in this frameset

the frameset

you to control the layout of the frameset

within its containing element

< hr / >

Creates a horizontal rule across the page (or containing element)

Supports only the attributes listed in the table that follows

align = center | left | right Specifies the horizontal alignment of the rule

in a style sheet

percentage of the containing element

replaced by the DOCTYPE declaration in XHTML

align = absbottom | absmiddle |

baseline | bottom | top | left |

Specifies the alignment of the frame in relation to surrounding content or margins

0 disables them

frame

surrounding content in pixels

and surrounding content in pixels

appear if the content is too large for the frame

align = absbottom | absmiddle

| baseline | bottom | top |

left | middle | right |

Specifies the alignment of the image in relation to the content that surrounds it

load the image (required); also used in accessibility devices

— you must use this property if the image is a link, to prevent borders from appearing

the left and right of the image

image

played; can take a value of infinite

that can be displayed while the full image is loading

define the links for the image (server - side image map)

above and below the image

< input type= “ button ” >

Creates a form input control that is a button a user can click

processing application as part of the name/value pair (required)

application as part of the name/value pair

< input type= “ checkbox ” >

Creates a form input control that is a checkbox a user can check

make the checkbox selected by default)

processing application as part of the name/value pair (required)

application as part of the name/value pair

< input type= “ file ” >

Creates a form input control that allows a user to select a file

processing application as part of the name/value pair (required)

application as part of the name/value pair

< input type= “ hidden ” >

Creates a form input control, similar to a text input, but is hidden from the user ’ s view (although the value can still be seen if the user views the source for the page)

application as part of the name/value pair (required)

part of the name/value pair

< input type= “ image ” >

Creates a form input control that is like a button or submit control, but uses an image instead of a button

button

intervention

form ’ s processing application as part of the name/

value pair (required)

processing application as part of the name/

value pair

< input type= “ password ” >

Creates a form input control that is like a single - line text input control but shows asterisks or bullet

marks rather than the characters to prevent an onlooker from seeing the values a user has entered This

should be used for sensitive information — although you should note that the values get passed to the

servers as plain text (If you have sensitive information, you should still consider making submissions

safe using a technique such as SSL.)

processing application as part of the name/value pair (required)

element

changes

element

application as part of the name/value pair

< input type= “ radio ” >

Creates a form input control that is a radio button These appear in groups that share the same value for

the name attribute and create mutually exclusive groups of values (only one of the radio buttons in the

group can be selected)

processing application as part of the name/value pair (required)

tabindex = number Defines this element ’ s position in the tabbing order

application as part of the name/value pair

< input type= “ reset ” >

Creates a form input control that is a button to reset the values of the form to the same values present when the page loaded

tabindex = number Defines this element ’ s position in the tabbing order

application as part of the name/value pair

< input type= “ submit” >

Creates a form input control that is a Submit button to send the form values to the server

processing application as part of the name/value pair

application as part of the name/value pair

< input type= “ text ” >

Creates a form input control that is a single - line text input

processing application as part of the name/value pair (required)

element

changes

application as part of the name/value pair

< isindex > (Deprecated)

Creates a single - line text input; you should use the < input > element instead Only the attributes listed

in the table that follows are supported

< legend >

The content of this element is the title text to place in a < fieldset > It could be used in HTML 5 to

provide a title for < figure > and < details > elements

element

the fieldset

< li >

The content of this element is an item in a list The element is referred to as a line item For appropriate

attributes, see the parent element for that kind of list ( < ul > , < ol > , < menu > )

Defines a link between the document and another resource Often used to include style sheets in documents

Takes only the attributes listed in the table that follows

http - equiv = string Specifies the HTTP equivalent name for the meta

information; causes the server to include the name and content in the HTTP header

lang = language_type Specifies the language used in this element

xml:lang = language_type Specifies the language used in this element