CS 328 - Week 3 Lecture 2 - 2016-02-03
* our HTML in this course is expected
to be strict-style HTML5
* we'll have a required validator (for
pages you're submitting for this
class) -- more on that on Friday!
* e.g., if your element has a start
tag and content, thou shalt have
an end tag
* our DOCTYPE will be html
<!DOCTYPE html>
...and it should be the first thing in
the file...
* if your element is one that does
not ever have content, thou shalt
indicate that its tag is both
start tag and end tag by ending
it with />
<hr />
* if your element has attributes,
each must always have a value,
and that value is written in
quotes (I believe double- or
single-quotes are OK for strict-style)
* in proper XML,
every document has exactly one ROOT element,
ALL the other elements are nested within
the root element
(note that the document type definition
at the beginning --
<!DOCTYPE ...>
...is NOT considered an element!)
* the root element for HTML is
the html element
* and, the html element must have two
children elements:
* the head element - contain general info
about the document as a whole
* the body element - document's content
* more elements!
* title element
* this belongs in the head element
* it is a kind of identifier for the
page (web crawlers often display a
found page using the title
element's content)
* it often is displayed in the tab
or border of browser
* within the body element,
two important categories of elements
are:
* block elements
* are "top-level" elements in a
head element
* usually a significant element of
the page
* typically a browser displays each
block element preceded by a line break
and with vertical margins above and
below it (and this can of course
be modified using CSS, cascading
style sheets)
* inline elements
* usually "smaller" elements of
the page
* MUST be nested within a block
element!
* CAN contain other inline elements --
BUT it CANNOT contain block elements
* <p> - paragraph element
* a major block element!
* yes, remember the closing tag!!!
* note that any white space and new line
characters in its content tend to be
ignored
* h1 h2 h3 h4 h5 h6 - heading elements
* these are block elements
* semantically, these are intended to
be headings, sub-headings, sub-sub-headings,
etc. within the content
* SEMANTIC HTML - choose an element based
on the CONTENT within a document,
NOT how its looks in the browser!
...then use CSS to style them as you wish!
* COURSE STYLE STANDARD: you are expected
to use semantic HTML in this class
* hr element
* IS a block element!
* horizontal rule - horizontal line -
separates sections of a document
* course style: it has no content, so write
it as: <hr />
* em and strong elements
* these are INLINE elements
* these are SEMANTIC elements (somewhat
replacing older, so-called PHYSICAL elements,
now replaced with CSS)
* em - means content is being emphasized
* strong - means content is being STRONGly
emphasized
* img element
* is an inline element, DOES need to be
within a block element!
* no-content element! but attributes!
* (end its start tag with /> )
* has both some required and some optional
attributes
* src attribute is required! how to
find the image file;
* absolute - fully-specified URL
* relative - leaves off the protocol,
site name, and directory info UP TO
the directory where the page resides
(don't start with a /, it'll think it
is the root directory of the web server
where the page resides...!)
* alt attribute - alternative text to display
if the image cannot be be loaded
* required attribute in HTML5!
* optional attributes such as
width and height -
given as a number or %,
it is how wide and high in pixels or
percentage of window that
the image will be displayed
* a element - anchor element
* an inline element
* can be used (amongst other purposes)
to indicate a hyperlink
* if it is a hyperlink, it has an attribute
href
href's value -- what/where the browser
should go when the user clicks its
contents -- can also be an absolute
URL or a relative reference
<a href="http://users.humboldt.edu/smtuttle">
S. Tuttle's home page </a>