Chapter-3(HTML5)

Document Sample
Chapter-3(HTML5) Powered By Docstoc
					3. HEAD CONTENTS
         3.1. The Root element – html element

The <html> element represents the root of the HTML document. This element is not under
the <head> element but <head> element is under the <html> element.

Content Attributes:- All global attribute and manifest attribute

Example:

The <html> element in the following example declares that the document’s language is
English.

<! DOCTYPE html>

<html lang=”en”>

<head>

<title>Test page</title>

</head>

<body>

<h1>heading 1</h1>

</body>

</html>

The above example also describes the <head>, <title> and <body> element. Here after we
describe all the head content elements in this chapter except <title> element which is already
described.

       3.2.   The base element (empty)

This element sets a base for all relative URLs within the document.

Attributes support:

target:- The value assigned to this attribute display the result when hyperlinks or forms cause
navigation. Some special keywords are assigned to this attribute which are described below:

   •   _self: Load the result into the same HTML4 frame (or HTML5 browsing context) as the
       current one. This value is the default if the attribute is not specified.

   •   _blank: Load the result into new unnamed window
   •   _parent: Load the result into the new frame of the current browsing context. If there is
       no parent, this option behaves the same way as _self.

   •   _top: In HTML4: Load the result into the full, original window, cancelling all other
       frames. In HTML5: Load the result into the top-level browsing context. If there is no
       parent this option behaves the same way as _self.

href:- In this both absolute and relative URL are allowed.



Notes:

   •   There must be no more than one <base> element per document.

   •   A <base> element must have an either href attribute, a target attribute or both.

   •   A <base> element, if it has target attribute must come before any elements in the
       head tree that represents hyperlinks.

   •   A <base> element, if it has href attribute must come before any other elements in the
       head tree that have attributes defined on taking URLs except the <html> element.

   •   If there are multiple <base> elements with href attribute, only the first href and target
       values are used, all are ignored.

NOTE:- The <base> element is an empty element (empty elements are those which don’t
have an end tag and this kind of elements have a trailing slash {/} with an space in XHTML)

Example:

<! DOCTYPE html>

<html>

<head>

<title>This is an example</title>

<base href=”http://www.example.com/news/index.html”>

</head>

<body><p><a href=”archives.html”>archives</a>.</p>

</body>

</html>

The link archives.html actually link to “http://www.example.com/news/archives.html”
       3.3. The link element (empty)

The <link> element specifies the relationship b/w the current documents and other
documents. Possible use of this element is linking the document to style sheet and defining
relational framework for navigation.

Attributes support:

href:- This attribute specifies the URL of the linked resource. A URL might be absolute or
relative. It must be present in the <link> element.

hreflang:- This attribute indicates the language of the linked resource. It is optional if the
default language is English.

media:- This attribute says which media the resource applies to. The value must be a valid
media query. By default, it will be set to all means that default links applies to all media.

rel:- This attribute defines a relationship of the linked document to the current document.
The attribute must be a space-separated list of link type values. The most common use of this
attribute is to specify a link to an external style sheet: the rel attribute is set to “stylesheet”.

type:- This attribute is used to define the type of context linked to. The value of the attribute
should be MIME type such as text/html, text/css and so on. The most common current value
is text/css.

sizes:- This attribute defines the sizes of the icons for visual media contained in the resource.
It must be present only if the rel contains the icon link type values.

title:- The title attribute gives the title of the link. It is optional and the value contain is text.

NOTE:- There can be more than one <link> element with the same rel=”stylesheet” in the
document and this cannot affect the document. Actually each link created is handled
separately.

Examples:

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”all”>

We can also specify alternative style sheets. The user can choose which style sheet to use.
This provides a way for users to see multiple version of the page.

<link href=”default.css” rel=”alternative stylesheet” type=”text/css” title=”default style”>

<link href=”fancy.css” rel=”alternative stylesheet” hreflang=”fr” type=”text/css”
title=”fancy”>

The following example shows to link a pdf document to the web page.
<link rel=”alternate” href=”/en/pdf” hreflang=”en” type=”application/pdf”>

This following example shows the use of sizes attribute

<link rel=”icon” href=”favicon.ico” sizes=”16x16” type=”image/png”>



       3.4. The meta element (empty)

The <meta> element represents various kinds of metadata that cannot be expressed using
the <title>, <base>, <link>, <style> and <script> elements. The <meta> element must be
within the 512 bytes of the page in the head section.

Attributes support:

charset:- This attribute declares the charset encoding used on the page. Authors are
suggested to use only UTF-8 as the charset value and must not use UTF-7, CESU-8, SCSU etc
as it is harmful for webpage. It is strongly recommended to use this attribute with UTF-8
value. Otherwise several cross- scripting technique (like UTF-7) may harm the page user.

content:- This attribute gives the value associated with the http-equiv or name attribute
depending on the context. The value can be text or integer number.

http-equiv:- This attribute defines the pragma that can alter servers and user-agent
behaviour. The value of this pragma is defined using the content and can be one of the
following.

   •   default-style: This pragma (value) specified the preferred stylesheet to be used on the
       page. The content attribute must contain the id of a <link> element whose href
       attribute links to a CSS stylesheet

   •   refresh: This pragma (value) specifies:

           the number of seconds until the page should be reloaded, if the content
              attribute contains only a positive integer.

           the number of seconds until the page should be redirected to another, if the
              content attribute contains a positive integer followed by the string ;url=” and a
              valid url.

name:- This attribute defines the name of a document-level metadata. It should not be set if
one of the attribute itemprop, http-equiv, or charset, is also set. It associates with a value,
connected by the content attribute. The possible values are:

    application-name: defining the name of the web application running in the webpage.

    author: defining in free format, the name of the author of the document, which is
       contained in the content attribute.
    description: contain a short and accurate summary of the content of the page. The
      summary contained in the content attribute.

    generator: containing, in free format, the identifier to the software that generate the
      page.

    keywords: containing, as strings separated by commas, relevant words associated with
      the content of the page.

    creator: defining, in a free format, the name of the creator of the document. Note that
      it can be the name of the institution. If there are more than one, several
      <meta> element should be used;

    googlebot: which is a synonym of robots, but is only followed by Googlebot, the
      indexing crawler for Google;

    publisher: defining, in a free format, the name of the publisher of the document. Note
      that it can be the name of the institution;

    robots: defining the behaviour that cooperative crawlers should have with the page. It
      is a comma-separated list of values taken in the following list:

Value             Description                                                  Used By
index             Allows the robot to index the page                           All
noindex           Prevent the robot to index the page                          All
follow            Allows the robot to follow the links on the page             All
nofollow          Prevent the robot to follow the links on the page            All

There are some other values which are used by search engines only.
Examples:
<meta charset=”utf-8”>
<meta http-equiv=”refresh” content=”300”> {Reloads the page every 5 minutes}
<meta http-equiv=”refresh” content=”20; url=page4.html”> {Redirects to page4 every 20
seconds}
<meta name=”robots” content=”nofollow, noindex”>
<meta name=”keywords” content=”baby, tricks, garden”>
<meta name=”description” content=”How to use meta tags”>
<meta name=”generator” content=”frontweaver 8.2”> {Here is a tool called frontweaver, to
identify itself as a tool to generate the page}
NOTE:- There is also more than one <meta> element per document page but with charset
attribute there is not more than one.


      3.5. The style element
The <style> element contains style information for a document. It is used mostly for CSS to
embed stylesheet inside the document.

Attributes support:

type:- This attribute defines the styling language as MIME type. text/css is assumed if
attribute is absent.

media:- Should be a media query values like print, all, screen etc. The default is all if it is
omitted.

scoped:- If this attribute is present, then style applies only to its parent element and its
children, otherwise to the whole document.

title:- Specifies alternative style sheets.

Example:

<style type=”text/css”>

body { color: red; font-family: arial; }

</style>

or it simply be

<style> ------------ </style>



       3.6. The script element

This element is used to embed an executable script within HTML document i.e. anywhere in
the document whether inside the <head> or it is <body> element.

Attributes support:

async:- This is a Boolean type attribute. It has no effect on inline scripts. It allows you to
specify that a script should load asynchronously (meaning it should load as soon as it’s
available) without causing other elements on the page to delay while it loads.

defer:- This is also a Boolean type attribute. It is set to indicate to a browser that the script is
meant to be executed after the document has been parsed.

src:- This should be used to link to an external script (to specify the URI of an external script)

type:- This attribute identifies the scripting language of code embedded within a script. This
is specified as a MIME type. E.g. of supported MIME type are text/javascript, text/ecmascript,
application/javascript etc. If this attribute is absent, the script should be treated as JavaScript.
Example:

<script type=”text/javascript”>

--------

---------------

</script>

or simply it be

<script>------------ </script> {can be embedded anywhere in the document.}

Script Languages:

The following lists some MIME type strings and the languages to which they refer:

"application/ecmascript"

"application/javascript"

"application/x-ecmascript"

"application/x-javascript"

"text/ecmascript"

"text/javascript"

"text/javascript1.0"

"text/javascript1.1"

"text/javascript1.2"

"text/javascript1.3"

"text/javascript1.4"

"text/javascript1.5"

"text/jscript"

"text/livescript"

"text/x-ecmascript"

"text/x-javascript"



           3.7. The noscript element
It defines a section of HTML to be inserted if a script type on the page is unsupported or if the
scripting is currently turned off in the browser. It has no effect in XHTML. It can be used
anywhere in the document.

Example:

<noscript>

<a href=”http://www.mozilla.com/”>External link</a>

</noscript>

<p>Rocks!</p>

Result with scripting enabled

Rocks!

Result with scripting disabled

External Link

Rocks!

				
DOCUMENT INFO
Shared By:
Stats:
views:27
posted:1/8/2012
language:English
pages:8
Description: This is my HTML5 notes, Hope you like it