8 - La Salle University

pogonotomygobbleAI and Robotics

Nov 15, 2013 (3 years and 7 months ago)

64 views

Chapter 8 Structure and Semantics

[more on proper HTML to hold the CSS]


CSS layouts often built on poor HTML principles. Need proper use of:

<div> (division: block
-
level) and <span> (inline)

(HTML5 replaces most <div>s with <section> <aside> etc.)


<div>
and <span> are sort of structural only

[that's partly why there is still some debate about
their use] So


<div id="navigation"> is OK (id=identification means there's only one on the page) but
some prefer < ul class="navigation> if it's only a list of link
s and nothing else.


Make class and id names meaningful for later/other developers. Don't name them for design e.g.
id="orangebox"


Class=classification so there can be more than one on a page (e.g class="post")

id can be



CSS selector [see chap 9]



target
anchor to replace name=""



way to reference current W3C DOM for JavaScript [getElementByID()]



to connect to databases (also <object>??)


For use elsewhere, start id names with letter, e.g. id="item4"


Semantic Markup [again] and reusability


Plain outline
style means easier findability and screen readers


Note example (p. 155) has no <img /> no <td> and no attributes such as bgcolor=,
width=;


This also allows changes in the presentation e.g. via JavaScript [or rel="alternate" CSS links]

[We will look at
these later

see the A
A
A

choices at the
Washington Post
]


It's reusable [think ZenGarden] because it's free of presentation.


Still CSS presentation has common problems:


1.

Classitis (adding class="" when it's no
t needed, e.g. on every paragraph; Dreamweaver might
do this [another reason to know how to handcode]

2.

Divitis

similarly. [e.g don't use <div> to create line breaks] don't use <div
class="headline">, use <h1>

3.

Inline CSS <div style="">

4.

Inline JavaScript <spa
n onclick="function();">


Do use id=""