HTML cơ bản - p 27 pdf

For example: Exit There are two ways to open new browser windows: using a target attribute in an anchor or area element, and using JavaScript’s window.open method.. The following anchor

provides the styles All three divisions are hidden by the rule display: none; This

will be changed for the first division by some JavaScript when the page loads

Setting the position property to “absolute” frees the three divisions from the content flow, allowing them to find their new common location, with

respect to the tabbed section container A width is given for the division

ele-ments as a percentage of the “tabbed” section’s width Otherwise, they would

extend to the window’s right margin A negative number for the z-index

property allows other content—the bottom border of the labels—to cover these

divisions

The JavaScript code in Example 5.6c defines the two functions setTab and showTab, which are called by the onclick attributes in the tab labels, plus a

jQuery statement to initialize the first tab The JavaScript functions use the

jQuery library to make it easy to address the elements using their CSS

selec-tors The jQuery methods show and hide are perfect for applications like this

The first line of Example 5.6c loads in the jQuery library from Jquery.com’s

API server Alternatively, you can download the library and reference it from

your own website Loading it from an external source let’s you test the code on

your local computer

example 5.6c: JavaScript and jQuery functions for tabbed content

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

// Set the active tab

function setTab(me) {

$('#tabs a').css('border-bottom-color', 'black'); // reset all

$(me).css('border-bottom-color',

$(me).css('background-color')); // set label

$(me).blur(); // lose your focus

}

// Show the selected division

function showTab(tab) {

$('#tabbed div').hide(); // hide all divisions

$(tab).show('slow'); // show active division

}

// Activate the first tab

$(document).ready( function () { // wait til the DOM is ready

showTab('#tab1'); // display the first tabbed area

setTab($('#tabs a:first')); // make the first label active

});

</script>

The basic idea is to reset all labels or tabs and then set or show the selected

one There are other ways to approach this problem For example, a global

variable can be set by the function that keeps track of which tab is the

cur-rently active one A JavaScript function running in an HTML5-capable

browser can set local and session storage items to keep track of the active tab

settings in between page visits The code matters less than the fact that it takes

so little of it to achieve the objective

The setTab function takes as its single argument the anchor element object

that called it, which is referred to as me inside the function The first line of the

function resets all the labels by restoring the bottom border The second line

sets the bottom border color of me to its background color, effectively making

that line disappear The blur method, in the third line, removes any

highlight-ing the browser may have added, such as a dotted border, to the tab label when

it was clicked

The showTab function takes the tabbed division’s id selector as its argument

The first line hides all the divisions using jQuery’s hide method The second

line applies the show method to the selected division The show method is

ani-mated by giving it the 'slow' argument As with Example 5.5, this provides the

visual sense of one section of content replacing another And, although this

pleasing effect cannot be demonstrated on paper, I hope you enjoy the

beauti-ful photograph in Figure 5.6, which was taken by Heidi Cohen and used with

her kind permission

Script elements can go anywhere in an HTML file Small JavaScript

func-tions, like those used in the preceding example, can be collected into the

cen-tral script file, functions.js, so that they can be accessed easily in other pages

Script elements can also be placed in the body of an HTML page, making it

possible to use variations of these techniques in blog pages and other content

management systems

Figure 5.6: a tabbed content section created with html, CSS, and JavaScript

ope n i ng n e W W i n DoWS

When a visitor clicks a link in a page, she expects to go to a new page, which

will replace the current page in her browser’s current window However,

some-times we want to break away from the common expectation and open a new

window on the subject The most common case is having links to external sites

open in new windows as opposed to the baseline behavior for in-site links

Another case is providing help information on instructional pages, where just

enough help is provided in a pop-up window, along with links to other

docu-mentation and resources

For a broad definition, consider a window to be any rectangular screen object that has a title bar and content area Most windows have other optional

properties in common that can be enabled or disabled by both the developer

and site visitor These include the ability to be resized, whether the window

can be dragged to other screen locations, and whether scrollbars are enabled

The most trivial window, therefore, is the browser’s Alert window, since all it

does is present a message along with an OK button to acknowledge that you

have seen it The following code sets an array, message, with messages that are

displayed in an alert box when various links are clicked:

<script type="text/javascript">

messages = [

'Follow the yellow brick road',

'Boldly go where no one has gone before',

'Go to jail Go directly to jail Do not pass go'

];

</script>

<a href="#" onclick="alert(messages[1]);">Directions</a>

The confirm method is similar to alert It presents a browser alert box with

OK and Cancel buttons The method returns the value true if the user clicks

OK and false if the user clicks Cancel This can be used to conditionally follow

a link For example:

<a href="exit.html" onclick="return confirm('Are you Sure?');">Exit</a>

There are two ways to open new browser windows: using a target attribute

in an anchor or area element, and using JavaScript’s window.open method The

following anchor element, for example, opens its linked page in a new window

that is a clone of the existing window:

<a href="http://outThere.com/" target=" _blank">New Adventures</a>

The special target attribute value _blank creates an unnamed window

The other special values are _parent, _top, and _self, to target other windows

depending on their relationship to the window that does the opening Any

other target value is considered to be a name If a window already exists with

that name, the new page replaces the document in the named window

Other-wise, a new window with that name is created

When more control of the opened window’s features is needed, the

JavaScript window.open method is used:

window.open(URL, name, features);

The URL is the location of the document to be loaded in the window The

name identifies an existing window to open the document in If it is omitted,

or if no window by that name exists, the document opens in a new window

with that name For example, this anchor element, when clicked:

<a href="#" onclick="window.open('help.html', '',

'width=450,height=600,scrollbars=1');">help</a>

opens a new unnamed 450-by-600-pixel window, loaded with the document

help.html

The list of features is a string with comma-separated values There are dif-ferences between browsers, but here are the commonly supported features:

status The status bar at the bottom of the window toolbar The standard browser toolbar, with buttons such as Back

and Forward location The Location entry field where you enter the URL menubar The window’s menu bar

resizable Allows/disallows the user to resize the window scrollbars Enables the scrollbars if the document is bigger than the

window height Specifies the window’s height in pixels (example:

height=350) width Specifies the window’s width in pixels height and width take values in pixels The other features can be given val-ues of 1 or 0 to enable or disable that feature The window.open method returns

a window object that can later be used to manipulate that window For

exam-ple, the following HTML creates two buttons—one to open a new window, and

another to close it:

<button onclick="thatWindow =

window.open('pop.html', '', 'width=450,height=600');">

Open that window

</button>

<button onclick="thatWindow.close();">Close that window!</button>

By default, a browser shifts focus to the new window, possibly placing it on top of the window that opened it If you would rather keep the focus on the

current window, add self.focus(); after the open command:

<button onclick="

thatWindow = window.open('pop.html','','width=450,height=600');

self.focus();">Open that window</button>

Page Head Information

Now that you have seen some of the interesting things that can go in an

HTML document’s body, it is time to learn what else is in its head Here are a

few facts about head elements to guide your understanding:

. Head elements are a mixed bag of different tags, many of which do

nothing

. The title element is required All other head elements are optional

. Head elements are rarely nested inside each other Most are self-closing

. HTML comments can go in the document head They are always useful

. The order of elements in the head generally does not matter

Ordering does matter with style and script elements in that later CSS rules

can override earlier ones, and a JavaScript function defined with a given name

replaces any earlier defined function that has the same name But it does not

matter if style elements are placed before script elements or vice versa

m eta e le m e ntS

The meta element, or tag, represents various kinds of information about a

document that cannot be expressed using the title or other elements The

meta element has three different uses, depending on which of the three

follow-ing attributes is present in the self-closfollow-ing tag: name, http-equiv, or charset

Only one of these attributes can be present in a meta element

If either the name or http-equiv attribute is present, the content attribute

must also be present Without content attributes, these meta elements have no

reason to exist The charset attribute specifies the character encoding to apply

to the document’s data A document should have only one meta element with a

charset attribute Here’s an example:

<meta charset="utf-8"/>

meta elements with name attributes say things about a document Each such

meta element defines one item of data expressed as a name/value pair using the

name and content attributes, respectively For example:

<meta name="author" content="Murasaki Shikibu"/>

The following meta tag names are generally recognized by most browsers:

. application-name The name of the application if the web page is one Only one meta tag with name="application-name" should be in a document

. author The author of the document’s content, not the HTML programmer

. generator The HTML programmer or software, such as CMS, that generated the page

. keywords A list of comma-separated keywords that characterize the content

. description A brief description or summary of the document’s content After the title element, the next most interesting element in a document’s head to a robot is the meta tag with the description content Since this text may

be used in search engines’ result pages, it should be a clear, concise, and honest

statement of the web page’s content or concept

When the name attribute has the value "keywords", the content attribute should contain a comma-separated list of tokens Each token is a string of

characters not containing a comma Leading and trailing spaces are ignored

but spaces and other punctuation within each token are kept For example,

this meta tag has six keyword tokens:

<meta name="keywords"

content="Lincoln, Gettysburg Address, Civil War,

battle, battlefield, dedication"/>

Here are a few points to keep in mind when figuring out what keywords to assign to a page:

. Don’t use punctuation Most search engines strip such characters

when scanning a page’s keywords Few people use punctuation in their searches

. Major search engines do not place much importance on meta key-words Historically, they have not provided any more accurate

informa-tion about a page than would result from a thorough scan of the actual content

. Keywords should appear in the body of the page Do not add keywords

to the meta tag that are synonyms of other keywords if those synonyms

are absent from the body content Search engines may rank your site

lower if they think the keywords misrepresent the content

. Keep the list short Over time, you can use the analytical tools provided

by Google, Yahoo!, and other search sites to see what keywords people

actually used to find your site and adjust your meta tags and content

accordingly

A meta element with the http-equiv attribute must also have a content

attribute The value of the http_equiv attribute is a “pragma” name, essentially

an HTTP request option Most of the pragmas are now handled with other

elements The only remaining pragma of interest is “Refresh,” which directs

the browser to load or reload a page after some delay It is useful for pages that

reflect up-to-the-second information

For example, a news organization’s front page could include the following

markup in the page’s head element to make that page automatically reload

every 300 seconds (5 minutes):

<meta http-equiv="Refresh" content="300"/>

To specify that a different page should be loaded in place of the current

page, the URL is given in the content, separated from the delay time by a

semicolon:

<meta http-equiv="Refresh" content="10;url=another_ page.html"/>

If a meta refresh is used on a page, it should be the only meta refresh in

that document Setting the time delay to 0 effectively creates a redirect

How-ever, if the need to redirect visitors from one page to another is permanent, it

is more efficient to use the web server’s Redirect directive in the virtual server’s

configuration section or in a htaccess file

li n k e le m e ntS

The link element allows a document to be linked to other resources The

destination of the link element is provided by the href attribute, which must

be present and must contain a valid URL. A link element must also have a rel

attribute to indicate the type of relationship the link represents. A link element

is ignored if either the href or rel attribute is missing

link elements can be used to import external resources that augment the current document or inform user agents about the relationship that exists

between the current document and other documents on the Web Each link is

handled separately If two link elements have the same rel attribute, they each

count as a separate reference or resource For instance, given two stylesheet

links, such as these:

<link rel="stylesheet" href="styles1.css" type="text/css"/>

<link rel="stylesheet" href="styles2.css" type="text/css"/>

the browser first loads all the CSS rules in styles1.css and then adds all the

CSS rules in styles2.css The normal rules of CSS cascading then apply to the

combined stylesheet

The behavior a browser should follow for links to external resources depends on the rel attribute’s value and, in some instances, the value of a type

attribute link elements that provide relationship context for the current

docu-ment are mostly ignored by browsers but do provide important information to

search robots and other interested user agents

Here are rel values and their href descriptions for resource links:

. stylesheet The URL of a stylesheet that will be imported into the document at that point

. sidebar The document should be retrieved and loaded into the brows-er’s sidebar, if it has one

. icon Imports a favorites icon to represent the current document in the browser

. prefetch Specifies that a resource should be preemptively fetched and cached

Firefox, Chrome, Safari, and Opera also recognize the rel attribute value

“alternate stylesheet", which instructs the browser to present an option to

the user to switch stylesheets

Here are rel values and their href descriptions for relationship links:

. alternate An alternative representation of the current document, such

as an RSS feed

. archives A collection of records that the current document belongs to

or might belong to in the future

. author The current document’s author’s home or profile page

. canonical The official or authoritative URL for the current document

. first Indicates that the current document is part of a series The href

points to the first page in the series

. help A link to help documentation

. index A link to a table of contents or index listing that includes the

cur-rent document

. last Indicates that the current document is part of a series The href

points to the last page in the series

. license A reference page documenting the licensing terms of a

copy-right covering the current document

. next The URL of the document that follows the current document in a

series

. pingback The address of the pingback server for the current document

. prev The URL of the document that precedes the current document in

a series

. search A link to a page for searching through the current document’s

content and its related pages

. tag The URL is a reference page for a tag that applies to the current

document

. up A link to the parent of the current document in a tree-structured

collection of pages

link elements are not required They are provided primarily to make the

Web more knowledgeable about the resources it hosts and as an aid to

organi-zations that deploy custom robots Here are some additional examples:

<link rel="stylesheet" href="/css/style.css" type="text/css"/>

<link rel="alternate" type="application/rss+xml"

title="example.com RSS Feed" href="http://example.com/feed/"/>

<link rel="pingback" href="http://example.com/xmlrpc.php"/>

<link rel="icon" href="/favicon.ico"/>

<link rel="index" title="example.com" href="http://example.com"/>

<link rel="canonical" href="http://example.com"/>