Scribd
Upload
271 views6 pages

HTML5 ELearning Kit For Dummies - (HTML5 Elearning Kit For Dummies®)

Uploaded by

umalkhair
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
271 views6 pages

HTML5 ELearning Kit For Dummies - (HTML5 Elearning Kit For Dummies®)

Uploaded by

umalkhair
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

17

Creating the Framework for an HTML Document

The preceding examples introduce just some


of the simpler features that help with website
GO ONLINE
accessibility. The W3C site on accessibility
contains a wealth of informa-
tion. For a quick overview, go to
Building accessibility into your design plans www.w3.org/WAI/users/
offers some major advantages: In addition overview.html. Specific
to being the right thing to do, it can expand guidelines for website authors
your web audience by a significant propor- can be found at www.w3.org/
tion. Also, because accessibility standards TR/wai-aria-practices.
require a kind of design simplicity, acces-
sible websites are often clean, intuitive
to use, and easy to navigate. And search
engines love them!

Creating the Framework


for an HTML Document
This section walks you through the basics of setting up a web page. In keep-
ing with programming-book tradition, you start with an absolutely basic
HTML document called HelloHTML.htm. This file is a prop on which to hang
a few discussion points. The following sections explain the role each part of
this document plays in displaying a web page. You can see the code in Listing
1-1 or check out the sample file ch1_01.htm, which you can download from
this book’s companion site (see the Introduction for details).

Listing 1-1:  HelloHTML.htm
Copyright © 2012. John Wiley & Sons, Incorporated. All rights reserved.

<!DOCTYPE html >


<html lang=”en”>
<head>
<title>Hello World Example</title>
<link rel=” ” type=” ” href=” ”
<meta http-equiv=”content-type” content=”text/
html;charset=utf-8” />
</head>
<body>
<h1 id=’h1’>Hello HTML!</h1>
<p id=’p1’><strong>HTML</strong> was invented by
<em>Tim Berners-Lee</em> in 1993. All markup
was considered <b>semantic.</b></p>
</body>
</html>

Hilgraves, R, & Boumphrey, F 2012, HTML5 ELearning Kit for Dummies, John Wiley & Sons, Incorporated, Somerset. Available from: ProQuest Ebook Central. [27 September 2022].
Created from rmit on 2022-09-27 07:59:57.
18
Lesson 1

Figure 1-2 shows what you see when you run and view the preceding code in
the Chrome browser.

Figure 1-2

You can run HTML files from your local folders. Double-clicking an HTML
file displays it in your default browser. To see a web page in another
browser, right-click it and then choose your desired browser from the
context menu that appears.
HTML5 is actually quite relaxed about what’s needed for a legal document. I
urge you, however, to use the somewhat stricter XHTML rules. Doing so will
make your site backward-compatible with older browsers that don’t support
HTML5 and make your code easier to read. The examples you see throughout
Copyright © 2012. John Wiley & Sons, Incorporated. All rights reserved.

this book show XHTML markup.

Starting with the DOCTYPE


An HTML document starts with a Document Type Declaration (also known
as a DOCTYPE or DTD). In HTML5, the DOCTYPE is <!DOCTYPE html >. A
DOCTYPE enables a user agent (also known as a browser) to see what kind of
document it must handle. You can see the DOCTYPE for the HelloHTML.htm
file at the top (refer to Listing 1-1).

Although the DOCTYPE has angle brackets like an HTML tag, it isn’t a tag.
You know this because it begins with an exclamation mark (!).

Hilgraves, R, & Boumphrey, F 2012, HTML5 ELearning Kit for Dummies, John Wiley & Sons, Incorporated, Somerset. Available from: ProQuest Ebook Central. [27 September 2022].
Created from rmit on 2022-09-27 07:59:57.
19
Creating the Framework for an HTML Document

EXTRA INFO
Previous version of HTML and XHTML had much more complicated DTDs. For example, here is one of the pos-
sible DTDs for an XHTML document (there are actually several options):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.
w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
It contains, as well as the type of the document — HTML — a public declaration, and a site where the user
agent can find another document to validate this one. That last sentence was probably a lot of gibberish to you.
It’s all about XML! If you want to find out more (and you don’t need to for this book), see XML For Dummies, 4th
Edition by Lucinda Dykes and Ed Tittel.
One of the beautiful things about HTML5 is that it doesn’t require you to spell out all the gibberish; it just
assumes that if you say that it’s an HTML document, you mean that it’s the most recent version, or HTML5.
Makes sense, right?

Setting up the root element


In XHTML, all well-formed documents must have a root element that encloses
the whole document. In Listing 1-1, you see the opening tag for the root ele-
ment under the DOCTYPE:

<html lang=”en”> EXTRA INFO


In another document, you may
The closing tag of the root element, </html>, find a root element that looks
appears at the end of the document. You may something like this:
find it interesting that the DOCTYPE’s name is
always the same as the root element. <html xmlns=”http://
www.w3.org/1999/
xhtml” >
Copyright © 2012. John Wiley & Sons, Incorporated. All rights reserved.

The root element is also a good place to tell the


user agent what language the document uses The x m l n s attribute is a
with the lang attribute. The attribute’s “en” namespace attribute. Namespaces,
value tells the browser that the web page is in which are beyond the scope of
English. this book, enable you to include
mark up from other document type
In XHTML, all attribute values must be in quota- languages such as ‘mathml’
tions. (This is not necessary in HTML5, but is a and ‘musicml’. Again see
good practice.) In general, you can use single or XML For Dummies, 4th Edition by
double quotations. The important thing is that Lucinda Dykes and Ed Tittel for
the quotations are present. further information.

Hilgraves, R, & Boumphrey, F 2012, HTML5 ELearning Kit for Dummies, John Wiley & Sons, Incorporated, Somerset. Available from: ProQuest Ebook Central. [27 September 2022].
Created from rmit on 2022-09-27 07:59:57.
20
Lesson 1

Filling up the head


The head of an HTML document is enclosed in <head> tags. Elements in
this section aren’t meant to be viewed but contain a lot of information that
enables a browser to display your web page. The following sections intro-
duce you to the most important elements you insert between the <head>
tags. In the example page, HelloHTML.htm, the head of the document looks
like this:

<head>
<title>Hello World Example</title>
<meta http-equiv=”content-type” content=”text/
html;charset=utf-8” />
</head>

The important tags are highlighted so you can easily see them.

The <title> element


The HTML specification requires HTML documents to include a <title> ele-
ment. The text it contains doesn’t appear in the browser window, but does
display the page title in the browser title bar, an important job. Also search
engines, such as Google and Yahoo!, give a high rating to the information in
the title, so try and make the title short and informative. You can see that the
title for HelloHTML.htm looks like this:

<title>Hello World Example</title>

In the browser, Hello World Example appears in the browser’s title bar.

The <link> element


Copyright © 2012. John Wiley & Sons, Incorporated. All rights reserved.

The link element is used for linking to other files. The most important use is
for linking to a file containing a CSS code, which contains the formatting and
positioning instructions for your web page content. You find details about
creating CSS in Lessons 4 and 5, and Lesson 5 has specifics about linking a
CSS file to an HTML file.

For now, notice that the <link> element contains three attributes, which are
empty (don’t contain any values yet) in HelloHTML.htm:

<link rel=” “ type=” “ href=” “

Here’s a brief introduction to what each attribute does:

✓ rel tells the user agent that it’s dealing with a link to a style sheet.
✓ type gives the media type of the style sheet.
✓ href tells the agent where to find the style sheet file.

Hilgraves, R, & Boumphrey, F 2012, HTML5 ELearning Kit for Dummies, John Wiley & Sons, Incorporated, Somerset. Available from: ProQuest Ebook Central. [27 September 2022].
Created from rmit on 2022-09-27 07:59:57.
21
Creating the Framework for an HTML Document

The <meta> element LINGO


Meta tags are mainly for providing information
about your page, but have some other nifty A media type, formerly known
uses. Search engines use them to categorize and as a mime type, tells the web
rank your pages. The basic syntax is browser how to handle a linked
file. Media types are usually two-
<meta name=”value” content=”value”/> part identifiers that give a broad
description of the file, followed
name usually takes the value of keywords, by a slash (/), followed by a more
description, or summary. specific description. For example,
the media type for an HTML docu-
Here are a couple examples from a page about ment is “text/html”, and the
knee ligament repair: media type for a CSS style sheet is
“text/css”.
<meta name=’description’ content=’A
paper describing the
various techniques for
repairing Anterior Cruciate Ligaments; their
short and long term results’ />

<meta name=’keywords’ content=’Knee; Orthopedic Surgery;


Sports Medicine; ACL; Anterior Cruciate
Ligament; surgical outcomes;’ />

Here is a meta tag with the http-equiv attri-


bute, which you see in Listing 1-1. This meta tag
EXTRA INFO
is designed to complement information found You may also find a <base> ele-
in the HTTP header. One possible value of the ment in the <head> of a web
http-equiv attribute is content-type. A page. The <base> element tells
content-type meta tag tells the browser what the user agent what the base
set of characters the web pages uses. For exam- element is for the page. Include
ple, a web page written in Japanese might use the <base> element if you think
Copyright © 2012. John Wiley & Sons, Incorporated. All rights reserved.

EUC-JP or SHIFT_JS. One of the most commonly you’ll be manually moving the
used character set values is UTF-8. page around a lot. Otherwise, this
element is rarely used. Modern
<meta http-equiv=”content- site maintenance software auto-
type” content=”text/ matically changes relative href
html;charset=utf-8” /> and src values.

Adding the document body


The <body> section is where you put all the text, images, links, tables, and
anything else you want people to see when they visit the page. In other
words, you build your HTML page here. Lesson 2 is devoted to specifics

Hilgraves, R, & Boumphrey, F 2012, HTML5 ELearning Kit for Dummies, John Wiley & Sons, Incorporated, Somerset. Available from: ProQuest Ebook Central. [27 September 2022].
Created from rmit on 2022-09-27 07:59:57.
22
Lesson 1

about filling the <body> element with content, but you can see examples of
elements within the body in the example HelloHTML.htm file:

<body>
<h1 id=’h1’>Hello HTML!</h1>
<p id=’p1’><strong>HTML</strong> was invented by
<em>Tim Berners-Lee</em> in 1993. All markup
was considered <b>semantic.</b></p>
</body>

Before you start building web pages in HTML, knowing the following quirks
about how HTML elements work will help you code pages that look the way
you intend them to:

✓ Block versus inline elements: Block elements, as their name suggests,


are blocks of text. When a user agent sees a block element, it adds a
line break before and after the element. Inline elements are contained in
block elements, and do not have line breaks before or after them.
The <body> in HelloHTML.htm contains two block and three inline ele-
ments. In the preceding code, the block elements, shown in green, are
the heading <h1> and the paragraph <p>. The inline elements, shown
in maroon, are the <strong>, <em>, and <b> elements. Both <strong>
and <b> apply bold to the text; <em>, which stands for emphasis, applies
italics.

How do you know whether an element is a block or an inline element?


Well, most elements are block elements. Throughout this book, I typically
mention when an element is inline. Or, if an element isn’t adding a line
when you display a page in the browser, you’re dealing with an inline
element. Also good to know: You can change a block element into an
inline element or vice versa, using CSS. Find out how in Lessons 4 and 5.
Copyright © 2012. John Wiley & Sons, Incorporated. All rights reserved.

✓ Semantic versus style elements: Semantic HTML elements are names


that are meaningful in English; the element describes the type of content
it surrounds. The user agent decides how to present the HTML element,
and most browsers use a similar presentation method. However, because
the elements have a semantic meaning, an aural or a Braille browser can
present your document in a suitable manner. Styling refers to such mat-
ters as color, indentation, and letter and word spacing — in short, how
your plain text and other items should appear in the browser.
You might argue that the <b> tag is a styling tag. Yes and no. The mean-
ing of bold is so well known that it has taken on a semantic meaning.

Hilgraves, R, & Boumphrey, F 2012, HTML5 ELearning Kit for Dummies, John Wiley & Sons, Incorporated, Somerset. Available from: ProQuest Ebook Central. [27 September 2022].
Created from rmit on 2022-09-27 07:59:57.

You might also like