HTML Markup and Document Structure CHAPTER 1 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A...

1

HTML Markup and Document StructureCHAPTER 1

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

2

CSS & HTMLCSS = 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)


3

HTMLHTML = 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/


http://www.w3schools.com/tags/

http://www.w3schools.com/tags/

4

TAGSThere 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.

5

AttributesAttributes 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 informationsrc="./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.

6

HTML Tags Used in This ChapterBlock Level Text Elements:

h1, h2, h3, h4, h5, h6 : Headings (h1 being the highest level)p : Paragraphol : Ordered List li : List Itemblockquote : Stand alone quotation

Inline Text Elements:a : Anchor (link) img : Imageem : Italicstrong : Importanceabbr : Abbreviationcite : Citationq : Quotation within text


7

Headings & ParagraphsBy far the most common tags

You will normally start the page with the h1 tagStructure different levels of information using h2, h3,… etc. tagsActual 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 pageE.g., <title> My York University Home Page </title>


8

Compound ElementsSome 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 ulHere 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>

9

Nested TagsIn 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>


10

Anatomy of an HTML DocumentThere 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>

11

The HTML TemplateLine 1: Identifies this document as an HTML document

Line 2: Root level tag marking the beginning and the end of the documentIts end tag on line 10 is the very last tag in the documentHas 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.


12

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>

13

Links & ImagesThe 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


14

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


15

Figure 1.4


<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <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>

16

Rendering AnalysisYou 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


17

Let’s add an image



<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>

18

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 textSlightly greater in heightExtending 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!

https://addons.mozilla.org/en-us/firefox/addon/toggle-web-developer-toolbar/

https://addons.mozilla.org/en-us/firefox/addon/toggle-web-developer-toolbar/

19

Another Nesting ExampleA 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 (&)



<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>

http://www.elizabethcastro.com/html/extras/entities.html

http://www.elizabethcastro.com/html/extras/entities.html

20

One More Nesting ExampleThe 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



<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>

21

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 CHAPTER 1 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A...

Documents

Transcript of HTML Markup and Document Structure CHAPTER 1 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A...