programming4us
programming4us
WEBSITE

Smashing Html5 : The Top of the HTML5 Document

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

he code above the <body> tag adds no content to the Web page, but it influences how the page appears and informs the browser that it’s a Web page and what kind of Web page it is. Figure 1 shows the general organization of the first part of the Web page.

977279-fg0501.eps

Figure 1: Organizing the top of a Web page.

The <html> tag is the root element, and within that element, you can include a language attribute. Then within the <head> container are metadata elements.

Other than the CSS3 scripts, the examples so far have not put a lot of tags into the head of the HTML5 document. The <meta> tag has many uses, but so far, we’ve used it only to specify the character set.

Setting your home base

Within the typical Web site, you’re likely to have several different pages to which your page will link. In fact, the typical Web site is arranged as a navigation system that links different pages. If you set a <base> tag in the head of your page with a link to a URL, you can reference other pages relative to the base page.

<!DOCTYPE HTML>

<html><head>

<base href=”http://www.sandlight.com/html5/smashing/ “>

<style type=”text/css”>

body {

background-color:#FCC;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Home Base</title></head>

<body>

<h1>This Is the Home Base</h1>

<a href=”FirstBase.html”>First Base</a>

</body></html>

<!DOCTYPE HTML>

<html><head>

<base href=”http://www.sandlight.com/html5/smashing/ “>

<style type=”text/css”>

body {

background-color:#FC0;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>First Base</title>

</head>

<body>

<h1>This Is First Base</h1>

<a href=”Base.html”>Home Base</a>

</body>

</html>

What is happening here? The <base> tag is telling your browser how to resolve any references to other documents in your HTML — such as the <a href=”Base.html”> anchor tag. Your browser will know to look for the Base.html document in the location specified in the <base> tag; namely, http://www.sandlight.com/html5/smashing/.

Adding character to your site with metadata

To this point, we’ve used the <meta> tag to establish that your site uses the UTF-8 character set, but the meta element can do much more. Think of the meta element as the one that performs multitasks. One of the most important attributes of the meta element is the name and contents pair. With the name attribute set to keywords, you can specify the contents on your site. In this way, the search engines can find your site when people are trying to find your products or services — or just the topics you’d like to include on your Web pages. For example, suppose your site has links to blogs and other sites on topics about dog kennels. Your meta tag would look something like this:

<meta name=”keywords” content=”kennels, dog fences, pet containment”>

Each of the content values must be separated by a comma. These tokens can be directly related to your content or what someone might look for. Content meta tags are easy to set and you can help users find their way to your site.

One other <meta> tag attribute that’s very cool is http-equiv set in the Refresh state. Using this attribute, you can automatically refresh a page or even change HTML pages. For example, you could have part of your site have an automatic slide show to display photos of a party or friends in a club. The tag format for using the Refresh state is:

<meta http-equiv=”Refresh” content=”[secs]”>

For example, the following tag refreshes (reloads) the page every 30 seconds:

<meta http-equiv=”Refresh” content=”30”>

Not only can you reload the same page, but you can reload different pages. If you want to load a sequence of pages, you can set the initial meta tag set as follows, to set the page assigned as a URL value after 1⁄2 second:

<meta http-equiv=”Refresh” content=”.5; URL=pg2.html”>

Notice how the content value of both the number of seconds and the URL are in the same set of quotation marks. The following HTML5 code launches a series of pages that keep refreshing until a home page is loaded:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<meta http-equiv=”Refresh” content=”.5; URL=pg2.html”>

<title>Image 1</title>

</head>

<body>

<img src=”one.png” alt=”one”>

</body>

</html>

After the initial page, you would have the following sequence — only one per page:

• Page 2: <meta http-equiv=”Refresh” content=”.5; URL=pg3.html”>

• Page 3: <meta http-equiv=”Refresh” content=”.5; URL=pg4.html”>

• Page 4: <meta http-equiv=”Refresh” content=”.5; URL=pg5.html”>

• Page 5: <meta http-equiv=”Refresh” content=”.5; URL=homeNow.html”>

The home page, homeNow.html, would have no Refresh state in the <meta> tag. In fact, other than the meta element with the Content-Type, it would have no other meta tag. (This thing would go on forever if you looped the home page back to the first page!)

Knowing when you need a script

The more you use HTML5, the more you need a script to get the most out of your Web pages. The most common scripting language used with HTML5 is JavaScript. Your browser has an interpreter for JavaScript just as it does for HTML5. Fortunately, JavaScript is easy to learn and can work in small snippets — even non-developers can do it.

To include JavaScript, all you need to do is to add a little script to the head of your page. Here’s the tag format:

<script type=”text/javascript”>

The JavaScript program goes into the remainder of the <script> container.

<!DOCTYPE HTML>

<html>

<head>

<script type=”text/javascript”>

alert(“I can do JavaScript!”);

</script>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>A Taste of JavaScript</title>

</head>

<body>

A regular Web page....

</body>

</html>

When you test that little program, you’ll see an alert box pop up (shown in Figure 2).

977279-fg0502.eps

Figure 2: A JavaScript alert window.

As a side note, you’ll see that the JavaScript alert window is loaded before your Web page loads. That’s because everything in the head container loads first. If you have a more elaborate JavaScript program that will be used in your HTML5 page, you’ll want to test it on different browsers and also put it in an external JavaScript file. Figure 3 shows the same alert window in Safari on an iPhone; you can clearly see that the Web page associated with the HTML5 code has not loaded.

As soon as the user clicks OK, the Web page loads. In the meantime, you can see the files from the directory in the background on your mobile device. Additionally, notice that the alert window shows the domain where the JavaScript resides. Some browsers, such as Google’s Chrome, first check to see if the user wants to accept the JavaScript from the named site before it shows the actual alert (a double alert!).

977279-fg0503.eps

Figure 3: Alert window loading before Web page.

As with style sheets, JavaScript programs can be loaded from external files. However, instead of using the link element, the JavaScript files are loaded using the script element, as the following example shows:

<script type=”text/javascript” src=”smashingJS.js”></script>

The JavaScript file is saved using the .js extension, just as CSS3 files are saved using the .css extension.

Other  
  •  The Alfa Romeo Mito – A Usable And Fun Package
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 8) - SEO Page Optimization - Edit Display Templates
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 7) - SEO Page Optimization - Edit Master Pages
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 6) - SEO Page Optimization - Upload Design Files
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 5) - SEO Page Optimization - XML Site Map, Site Design Manager
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 4) - SEO Page Optimization - Page-Level SEO, Site Collection SEO
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 3) - Using the Content Search Web Part, Managed Navigation
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 2) - Catalog Enable List/Library
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 1) - Content Authoring Improvements, Image Rendition
  •  Smashing Html5 : Working with Color Values - Integrating Your Color Palette with Your Web Page
  •  
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    REVIEW
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us
    Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
    programming4us
     
     
    programming4us