CS 328 - Week 3 Lecture 1 - 2016-02-01
* moving to the CLIENT TIER, now;
* grabbing material from Chapter 2, Chapter 6 sections
6.1, 6.2 from course text on HTML5
* while HTML5 (and CSS3 and client-side JavaScript)
may be served to a browser via a web server,
it is actually EXECUTED within a browser
ON the client;
* HTML - HyperText Markup Language
* HTML5 - a more-recently-created dialect of HTML
CSS - Cascading Style Sheets
* CSS3 - the recent version of CSS we'll be using
XML - eXtensible Markup Language
* a meta-language for making markup languages
to describe DIFFERENT things
* HTML5 - a markup language - special "stuff" embedded
into one's document, one's data, essentially,
to specify document STRUCTURE at a higher and more
abstract level;
* HTML was created around 1991 by Tim Berners-Lee
... see pp. 14-15 of the course text
* 2011-12 - HTML5 is developed by W3C,
a new version of HTML intended to address the
evolution of the web into a platform for apps
and multimedia
* STILL -- try to consider HTML5 as focusing
mostly on CONTENT and STRUCTURE
(because how it LOOKS should be handled by CSS3,
and how it ACTS/BEHAVES should be handled by other
languages that interact with HTML) <- e.g.,
client-side JavaScript
* VOCABULARY!
* the "stuff" embedded within your document
can include HTML tags
< > - these are written inside angle brackets
* tags have names
in well-structured HTML5, these are written in
all-lowercase
MOST tags come in PAIRS, with an opening tag
and a closing tag:
e.g.,
<p> ... </p>
^ this is an example of an opening tag
^ a closing tag will typically be
a / followed the same name as the
opening tag
* a PAIR of HTML opening and closing tags
along with their enclosed content
is collectively called an ELEMENT
attribute
|
V V attribute value
* <p class="western"> <- start tag
I think www stands for wild wild west. <- content
</p> <- end tag
^ this whole thing is an element!
* in well-structured HTML5, attribute values
are always written in quotes
(they can be single OR double quotes, I think --
double-quotes always work...)
* you can have multiple attribute="value"
pairs in an opening tag --
just separate them by white space
* there's a bit more to an HTML5 document, though, than
JUST elements;
here's the basic HTML document STRUCTURE:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
* explaining this a bit...
here's your HTML5 comment:
<!-- I am a multi-line
HTML comment -->
<!DOCTYPE html> <!-- the document type definition,
NOT actually an element;
it should be the FIRST THING in
your HTML5 file!!!!!!! -->
<html>
<head>
<!-- general information about the page -->
</head>
<body>
<!-- generally holds the contents of the document
(probably to be displayed) -->
</body>
</html>
* two types of elements:
* block elements
* like a paragraph or a bulleted list
* general represents a significant page element
* can contain MUCH content
* (and often many nested elements)
* inline elements
* represent a "smaller" element of the page
* MUST be nested within a block element!
* cannot CONTAIN block elements