HTML Markup and Document Structure: Charles Wyke-Smith: Stylin' With CSS: A Designer'S Guide (3 Edition)

HTML Markup and
Document Structure
CHAPTER 1
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 1

CSS & HTML
CSS = Cascading Style Sheets
 CSS is used to separate the styling (look and formatting) of a web page from its content
 Typically used for web pages (HTML) but also with XML
 Advantages of using CSS

 Easier to see content
 Consistency of look and feel
 Reduced repetitive HTML tagging
 Use the same content for different rendering styles (on screen, print, voice, etc)
 Esthetic changes can be applied easily (e.g., one edit to change all headings)
 CSS specification describes a priority scheme to determine which style rules apply if more
than one rule matches against a particular element (hence cascading)

HTML
HTML = Hyper Text Markup Language
An HTML page consists of:
 A Document Type Declaration, which triggers the rendering mode e.g., <!DOCTYPE html>
 A system of directives (called tags) on how to render content in a web browser
 Character based content
 Entity references
An online reference for the full HTML syntax can be found at the link below:
 http://www.w3schools.com/tags/

TAGS
There are three types of tags:
An Enclosing Tag: a pair of words enclosed in angle brackets
 Start (opening) tag: e.g., <p> for paragraph
 End (closing) tag: e.g., </p> for end of paragraph
 Syntax: <tag name attribute_1="value" attribute_2="value" > Your text here </tag name>
Non Enclosing Tag: only the start tag, used to include a reference to an entity
 Syntax: <tag name attribute_1="value" attribute_2="value" />
 E.g., <img class="yorku" src="./Images/YorkU.jpg" alt="York University Logo" />
Structural Tags: for grouping related sets of content tags
 E.g., header, nav, article, section, aside, footer
Always code the end tags, even though HTML 5 works in

many cases without them.
Align start and end tags to help you see the structure better.

Attributes
Attributes provide the browser with additional information about the tag
The <img> tag on the previous page has three attributes:
class="yorku" tells the browser how to associate this image with CSS information
src="./Images/YorkU.jpg" tells the browser where to find the actual file containing the image to
be displayed.
alt="York University Logo" is the text displayed when the image is not available, or read out when the
page is rendered in audio mode.
Always code the alt attribute on any <img> tag.

Otherwise audio rendering does not work well, nor does displaying
when the file is missing.

HTML Tags Used in This Chapter
Block Level Text Elements:
h1, h2, h3, h4, h5, h6 : Headings (h1 being the highest level)
p : Paragraph
ol : Ordered List
li : List Item
blockquote : Stand alone quotation
Inline Text Elements:

a : Anchor (link)
img : Image
em : Italic
strong : Importance
abbr : Abbreviation
cite : Citation
q : Quotation within text

Headings & Paragraphs
By far the most common tags
You will normally start the page with the h1 tag
Structure different levels of information using h2, h3,… etc. tags
Actual text goes into p tags
h1 headings will be typically the most prominent (unless you change their styling in CSS)
Search engines typically look for h1 tags (after title tags)
title tags are used to provide a descriptive name for a web page
E.g., <title> My York University Home Page </title>

Compound Elements
Some tags are designed to work only in combination with other tags
E.g., The List Item tag li only works inside an Ordered List tag ol or an Unordered List tag ul
Here is a simple ordered list with three items and how it is rendered:
<ol>
<li> First Item </li>
<li> Second Item </li>
<li> Third Item </li>
</ol>

Nested Tags
In the previous example you can see that the <li> </li> pair of tags, including the text between
them, appears in its entirety between the <ol> </ol> pair of tags
This approach is called nesting of tags
In nesting tags you must place end tags in reverse order of the start tags (i.e., the end tag of the
most recent start tag must come first).
Wrong: <p> That car is <em> fast </p>. </em>
Right: <p> That car is <em> fast </em>. </p>

Anatomy of an HTML Document
There are some elements that must be present in every web page
Think of these elements as a template with which you start all web pages
HTML 5 has greatly simplified this template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> An HTML Page </title>
</head>
<body>
<! – Your web page contents follows this comment tag -->
</body>
</html>

The HTML Template
Line 1: Identifies this document as an HTML document
Line 2: Root level tag marking the beginning and the end of the document
Its end tag on line 10 is the very last tag in the document
Has only two child tags: head and body
Line 3: Starts the section that tells the browser how to display the page
Line 4: Identifies the character encoding to use
Line 5: identifies the text to display at the top of the browser window when this page is rendered
Line 7: Starts the section that contains your actual content
Line 8: This is a comment. Comments are not displayed on the web page.

A More Complete Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8“ />
<title> An HTML Page </title>
</head>
<body>
<h1> Stylin’ with CSS </h1>
<p> Great Web pages start with great HTML markup! </p>
<a href="http://www.Pateanu.ca/yorku"> My Website </a>
<img src="images/carina.jpg" alt="My Dog, Carina" />
</body>
</html>

Links & Images
The previous example introduces two new elements:
Links are tags that provide a reference to a URL (Universal Resource Locator)
 They use the <a> inline anchor tag with:
 The href attribute that specifies the URL
 A text that will become the active link
Images are tags that provide the location of a graphic file
 They use the <img> inline tag with:
 The src attribute that specifies the location of the image file
 The alt attribute that specifies what to display when the image is missing, or read out in voice rendering mode

Block vs. Inline
 Notice that while heading and paragraph are stacked on top of each other, the link and image
are side by side
 That’s because <h1> and <p> are “block tags” while <a> and <img> are “inline tags”
 Almost all tags have a display property of either block or inline
 Tables have their own display properties

Figure 1.4
<!DOCTYPE html>
<html>
<head>
<title>Stylin' with CSS - Figure 1.4 Block and Inline Elements</title>
</head>
<body>
<h1>Types of Guitars</h1>
<p>Guitars come in two main types: electric and acoustic.</p>
<h2>Acoustic Guitars</h2>
<p>Acoustic guitars have a large hollow body that projects the sound of the strings.</p>
<h3>Nylon String Acoustic Guitars</h3>
<p>Descendants of the gut-strung instruments of yore, nylon string guitars have a mellow tone.</p>
<h3>Steel String Acoustic Guitars</h3>
<p>Steel string guitars first appeared in country music and today most acoustic guitars have steel strings.</p>
<h2>Electric Guitars</h2>
<p>Electric guitars have a solid or hollow body with pickups that capture the string vibration so it can be amplified.</p>
<h3>Solid Body Electric Guitars</h3>
<p>Solid body electric guitars are commonly used in rock and country music.</p>
<h3>Hollow Body Electric Guitars</h3>
<p>Hollow body acoustic guitars are commonly used in blues and jazz.</p>
</body>
</html>

Rendering Analysis
You can see three different levels of headings, styled differently
Each element starts on a new line, because headings and paragraphs are block tags
Space is added around the edges of the text, so that the text does not touch on the edges of
the browser window
Space has also been added between lines

Let’s add an image
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Types of Guitars</h1>
<p>Guitars come in two main types: electric and acoustic.</p>
<h2>Acoustic Guitars</h2>
<p>Acoustic guitars have a large hollow body that projects the sound of the strings.</p>
<h3>Nylon String Acoustic Guitars</h3>
<p>Descendants of the gut-strung instruments of yore, nylon string guitars have a mellow tone.</p>
<h3>Steel String Acoustic Guitars</h3>
<p>Steel string guitars first appeared in country music and today most acoustic guitars have steel strings.</p>
<h2>Electric Guitars</h2>
<img src="images/guitar.jpg" alt="Electric guitar" />
<p>Electric guitars have a solid or hollow body with pickups that capture the string vibration so it can be amplified.</p>
<h3>Solid Body Electric Guitars</h3>
<p>Solid body electric guitars are commonly used in rock and country music.</p>
<h3>Hollow Body Electric Guitars</h3>
<p>Hollow body acoustic guitars are commonly used in blues and jazz.</p>
</body>
</html>

How much space does an element take?
We can use the Web Developer Tool in Firefox to help visualize elements in an HTML page
If not loaded already, you can add it on from here:
https://addons.mozilla.org/en-us/firefox/addon/toggle-web-developer-toolbar/
If it is downloaded press Shift+F2 and it will show up at the bottom of the browser window
Click on the Inspector tab; as you scroll to different elements in your HTML source, the browser
window highlights the space occupied by that element
Block elements occupy a box much larger than the text
Slightly greater in height
Extending over across the entire width of the window (their parent is body)
 When you highlight the tag body, you see it occupies the entire browser window
When you use nesting, you place boxes inside boxes

That’s why visually showing nesting by indenting tags
is a very good idea!
Another Nesting Example
A blockquote is indented by default
A cite is italic by default
Special symbols use a construct called HTML Entities
Start with &, end with ; and contain a list of characters that describe the entity
Full list here: http://www.elizabethcastro.com/html/extras/entities.html
Because of the special use of the character &, when you actually need it in the text, it is inserted as an entity (&)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> A quote on guitars: </p>
<blockquote> “ Sometimes you want to give up the guitar, you’ll hate the guitar.
But if you stick with it, you’re gonna be rewarded. ”
<cite> Jimmy Hendrix </cite>
</blockquote>
</body>
</html>

One More Nesting Example
The strong tag styles the text in bold
The em tag styles the text in italic
The abbr tag gives useful information to browsers, translation systems and search-engines
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> It is <strong> absolutely critical </strong> that <em> everyone </em>
does this <abbr title=“as soon as possible”> ASAP </abbr>!</p>
</body>
</html>

The Document Object Model (DOM)
The DOM is the browser’s view of the elements on the page, the state of every element’s
properties and the family-tree like relationships between the elements.
By referencing a specific location in the DOM with CSS, you can select an HTML element, and
modify its style properties.
In the small sample below, the DOM hierarchy tells us that:
section is the parent of h1 and p (the immediate ancestor above them)
h1 and p are children of section (the immediate descendants below it)
h1 and p are siblings (they share a parent – section)
section, h1, and p are descendants of body
<body>
<section>
<h1> The Document Object Model </h1>
<p> The page’s HTML markup structure defines the DOM. </p>
</section>
</body>

HTML Markup and Document Structure: Charles Wyke-Smith: Stylin' With CSS: A Designer'S Guide (3 Edition)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Markup and Document Structure: Charles Wyke-Smith: Stylin' With CSS: A Designer'S Guide (3 Edition)

Uploaded by

Copyright:

Available Formats

HTML Markup and

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 1

 Advantages of using CSS

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 2

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 3

Always code the end tags, even though HTML 5 works in

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 4

Always code the alt attribute on any <img> tag.

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 5

Inline Text Elements:

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 6

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 7

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 8

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 9

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 10

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 11

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 12

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 13

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 14

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 15

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 16

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 17

When you use nesting, you place boxes inside boxes

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 19

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 20

CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 21

You might also like