4 2
Giz nn
FIGURE
‘Lang attribute inserted in opening tag
Atte name
‘cheag>
bakeland Seeds Ged and Sreakfast ~ About Uac/eitle>
meta element with charset attribute
FIGURE
<!DocTYeE keml>
<html Lang="en*>
<head>
<title>bakeland.aeeds Bed and Sroskfast - About Us
Lakeland Reeds Sed and Sreakfast
Filename: aboutus.htal
Faduna Sgal
10/23/18
HIWLS and CSS3 Tliusteated Unit 3, Lessons
Daas.)
aaa
[> t Atribute va
“ for >. D
ee asain na sa aa esecanci>
eatin Se Tess
TABLE Bt: Basic Lang attribute values
de German he Hebrew 1 usian
el Greek hi Hindi sa Sanskrit E
en English it ttalan ur Urdu I
es Spanish je Japanese zh Chinese 5
Structuring Content in a Web Document ITMILS & CSS3
Ud
exiting elements
your code editor
‘dents new elements
tomatic, you
‘ay not need to
«ess [Spacebay] at
[L Remember to
compare your code
othe figures to
Confirm indents
he h2 element
ars a heading
hat’ atthe second
lighest heading level
‘the document.
Implement the div Element
To create the basic structure of a web page, you use the html, head, and body elements. In addition,
you can add content to the body section with elements such as h1 and p. It can be useful to group
content within the body section to help keep the code organized, especially in larger web documents,
The div element is used as a parent element for other elements on your page that function together.
For instance, you could use a div element to mark a heading element and its related paragraph
elements as a group. QEEEB> The code for the Lakeland Reeds About Us page includes content specific to
this page. You organize the code by adding a div element enclosing the content specific to this page, which
includes the h2 heading and the fist p element.
1. Return to aboutus.html in your editor, click after the closing tag, then press
[Enter] to add a new line
2. Press [Spacebar] six times or as needed to create an indent that matches the indent for
the preceding tag, then type
‘The
tag is the opening tag for the div element and should be indented 3 spaces more than the
opening tag.
3. Click after the first closing tag, then press [Enter]
4, Press [Spacebar] six times or as needed to create an indent that matches the indent for
the opening
tag, then type
‘The div element contains both the h2 element and the first p element between its opening and closing tags.
5. Click before the opening
tag, press [Spacebar] three times or as needed to create
an indent, click before the first opening
tag, then press [Spacebar] three times or as
needed to create an indent
Becauise you are adding a parent element, you increase the indentation of tags for child elements to keep your
code readable. Compare your code to FIGURE, which shows the code containing the new div element.
6. Save your document, return to your browser, then refresh or reload aboutus.html in
your browser
‘As shown in FIGURE B-6, the appearance ofthe page in the browser does not change. Because the div
‘element is used for structuring code, adding the div element to the document does not change the way the
document is rendered. The document looks the same after the div element is added as it did before.
Many users want a proces of finding and consuming web content with the goal of removing hal the words. This helps focus your
that is dynamic and fast-paced. When you write content forthe \witng and reduces the content of your web page tothe essential,
web, you should keep ths in mind, Web content should generallybe which makes it easier fr web users to scan and rad.
brief and scannable. A user should be able to get the gist of what ‘ter you publish content onlin, it's crucial to keep it up to
your page contains with a quick glance. his allows ser to quickly _date—outof date information makes your website's content sem
decide to tay on the page ifthe page contains the information Unreliable. You can minimize the amount of regular updating you
they/'e looking for, orto navigate elsewhere and keep looking, You need to do by reducing or eliminating relative references to dates,
‘an make content scannable by incuding a shor, descriptive head- (such as “5 years ago” or “in 18 months") or labeling specific
ing at the top, and by breaking the content itsef into sections with _ dates as being inthe future (such as “The building will be
headings. After writing the actual content, itcan be useful toreviseit completed in 2013.")
HED St cturing Content in a Web Document (Code containing new civ element
1
2
3
_ takeland Reeds Bed and Breakfast - About Us
Lakeland Reeds Bed and Breakfast
Filename: aboutue.heml
Author: your first and last name
Date: today’s date |
HIMLS and CSS3 Illustrated Unit 8, Leseons |
>
_ fs
[ch2>About Us
|
iakeiand Reeds is an ideal place to unplug from your daily routine. We're
Inexe to help you get the most out of your time with us, from cances and life
lvests for a day out on the lake, to DVDs and popcorn for a quiet evening in. We
Look forward to welcoming you!
tag, press [Enter], press [Spacebar] six times or as
needed to create the indent, then type
The header element marks content that occurs at the start of a document.
3, Click after the closing tag, press [Enter], press [Spacebar] six times or as needed
to create the indent, then type
Aheader element is added as the parent element of the h1 element.
4. Click just before the opening
tag, then press [Spacebar] three times or as needed
to create the indent
5. Click after the closing
tag, press [Enter], press [Spacebar] six times or as needed
to create the indent, then type
A footer clement is added as the parent element of the second p element,
7. Click just before the second opening
tag, then press [Spacebar] three times or as
needed to create the indent
8. In the head section, click after the tag, press [Enter], press [Spacebar] six times
or as needed to create the indent, then type
A script element references an external script file whose name is specified as the sre attribute value.
FIGURE B-8 shows the completed code.
9. Save your document, return to your browser, then refresh or reload aboutus.html
Like the div element, semantic elements do not change the page's display in a browser.
10. If you have access to Internet Explorer 8 or an earlier version of Internet Explorer, use it
to open aboutus.html
Because of the script element you added to the document's head section, the document is displayed
correctly in older versions of Internet Explorer
Structuring Contentin a Web Document FIGURE 8-7; Wireframe for Lakeland
eds Aout Us page
Pageheader —-—>| Lakeland Reeds Bed & Breakfast
description of amenities
“content |
Page footer —1—>] contact information
SRetemnene
FIGURE B-8: Code with semantic elements and script element
Date: today’s date ——————
BIMES and CSS3 Tilustreted Cait 3, Attribute value
se enclosed in
neta charset="utf-8">
Sieglot sfotodesnixs canton 6204.30" nript>-t $$
pleas
|
Atribute name
feheadex>
‘hi>Lakeland Reeds Bed and Breakfast |
kneader> ‘
“ as parent of h1 element
“p>iakeland Reeds is an ideal place to unplug from your daily routine. We're
se dlement added 9g #27 Yo" get the most out of your time with us, fron canoes and Life
footer element added as ° TPs oc on the lake, to DVDs and popcorn for a quiet evening in. We
parent of second p element >,
sd to welcoming you!
‘
I
| sence
int
‘TABLE B-2: Selected HTMLS semantic elements
article stand-alone piece of work, such as a single entry in a blog
aside part of a page tha’ tangential to the main page content, such asa sidebar or pull quote
footer information about a section or document that usually appears atthe end, such as contac information, atibutions,
and/or footnotes
header information about a section or document that usually appears atthe beginning, such as a heading, logo, and/or e
table of contents i
nav, ‘main elements of site and page navigation 2
section section of content focused on a common theme, such as a chapter of a larger work 5
Structuring Content in a Web Document oe)
Ua
Learning
Outcomes
Use a named
character
reference
Use a numesic
character
reference
you're using 3
code eit the
character reference
you type may appear
asta, This wil not
affect the content
\when the page is
rendered by your
browse
Use Special Characters
Most text is added to web pages simply by typing it. However, a handful of common characters, such as
the & symbol, run the risk of being misinterpreted by user agents as computer instructions rather than as
plain text. In addition, many characters, such as bullet symbols, do not appear as keys on standard
keyboards. Character references, which are specially formatted codes that represent characters in the
HTML document character set, are used when these characters are needed on a web page. Character
references always begin with an ampersand (&) and end with a semicolon (). The ret of the code consists
of either a pound sign (#) followed by numbers or an English language abbreviation for the associated
character name. Every character has a number code, known as a numeric character reference, but
only a few commonly used characters also have an abbreviation-based alternative, known as a named
character reference. Character references exist for all characters you can type; however, the only
characters for which i's important to use the codes are those listed in TABLE B-3. (EXE You replace the
word and in the name of the business with an ampersand symbol (&) in both the main page heading and the
‘title element to match the appearance ofthe organization name on signs and other branded materials. You
also replace each hyphen (-) in the footer with a bullet character (0).
1. Return to aboutus.html in your editor, then locate the title element
2. Delete the word and in the name Lakeland Reeds Bed and Breakfast, type samp;, then
be sure there is a space before and after the character reference
3. Locate the hi element
4, Delete the word and in the name Lakeland Reeds Bed and Breakfast, type amp;, then
be sure there is a space before and after the character reference
5. Delete the first hyphen (-) within the footer element, type «#8226;, then be sure
there is a space before and after the character reference
6, Delete the second hyphen (-) within the footer element, type «#8226 ;, then be sure
there is a space before and after the character reference
FIGURE B-9 shows the special characters inserted in the code for the web page.
7. Save your work, then refresh or reload aboutus.html in your browser
As shown in FIGURE B-10, the word and in the browser title bar and in the main web page heading is replaced
with the ampersand (&) symbol, and each hyphen in the final line of text is replaced with the
bullet (*) character.
UTF8 is the most commonly used character encoding on the operating systems use different default fonts, and a given font
‘web today. This encoding supports character references for ‘may contain characte descriptions for some, but not al, UTF-8
thousands of characters. These symbols may include characters in characters. For this reason, it’s important to test a page
different writing systems and international curency symbols, as containing alss-common special character in ll browsers that
wel as cons and pictograms fora variety of themes, You can go you anticipate your audience will use to view the page, This lets
to unicode.org/chars or filformat nf to browse supported ‘you confizm that the characteris recognized and displayed when
‘characters by subject. Note that not all symbols are displayed in _the page i rendered in a browser, or make adjustments if the
every browser or operating system, This is because browsers and characters not recognized.
ERED Strvcturing Content in a Web Document for special characters inserted in web page
‘
Lakeland Reeds Bed campy Breakfast - About Us
Lakeland Reeds Bed and Sreakfam
Filename: aboutus.ntml
your first and last name
today’s date
(S53 Illustrated Unit B, Lessons
=rate-o">
jodernizr.custom. 62074. js">
boay>
About Use /h2>
lakelend Reeds is an ideal place to unplug Your/daity routine. We're
here to help you get the most out of your from canoes and life q
vests for a day out on the lake, to DVD ‘a quiet evening in. We
look forward to welcoming you!
