CS 318 - Week 3 Lab - 2-4-13
Intro to HTML5 (and setting up web pages on nrs-projects)
* HTML5 reference: for the basics, Chapter 2 of the course
textbook;
* put web pages under public_html on nrs-projects
* your home directory, public_html, and its
subdirectories must be at least world-executable
for web pages in those subdirectories to be
visible on the web
* let's say you made a page stuff.html in public_html
on nrs-projects (and that your username is ab13)
http://nrs-projects.humboldt.edu/~ab13/stuff.html
* NOTE -- you DON'T put public_html IN the web
address! (in the URL - uniform resource locator)
* NOTE -- for nrs-projects, you DO need a ~ before
your username in the URL
* (and you put its path relative to public_html
after your ~username/ in the URL)
* and, if you put the URL for a directory but not
a particular file,
the webserver will look for an index.html in that
directory, and display that if it finds it
* note that a web page, whether .html or something
else, must be at least world-readable for
the web-server to read it --
so: chmod 644 blah.html
HTML5...
* HTML - HyperText Markup Language
HTML5 is a more-recently-created dialect of HTML
CSS - cascading style sheets
XML - eXtensible Markup Language
* HTML is a markup language
* you have your content,
and then additional things -- markup -- embedded
with the content;
* in HTML, this markup consists of tags,
<...>
* HTML was designed to document structure
within content -- and that's still the
case in HTML5
* originally created in 1991 by Tim Berners-Lee
* the last major version of HTML, HTML 4.01,
was published by W3C in 1999
* XHTML -- a redefinition of HTML 4.01 written
in XML -- had its 1.0 version standard
approved in 2000, and its 1.1 version in 2001.
* HTML5 - developed by W3C in 2011-2012
...we'll be using HTML5 in this course;
"properly-written" HTML5 focuses solely on
a document's structure and content --
how it looks, how it behaves are tasks for
OTHER languages;
* element - [p. 16, course text] - "A piece of
HTML markup that SURROUNDS text content and
decribes its MEANING in the page
figure 2.2 illustrates the "basic" parts of
an HTML tag:
below is an element p
attribute
| value <-- in HTML5, attribute values
| | are enclosed in quotes
v V
<p class="western"> <--- start tag
Here, I am the content of a lovely paragraph.
I can take many many many lines.
</p> <--- end tag
* some elements don't have content -- they are
both opened and closed in a single tag,
and in CS 318 we'll be strict about this,
ending them with />
<hr /> -- horizontal rule, a horizontal line
to separate sections
* the img element can have multiple attribute-value
pairs --
src - put the image to be displayed --
either its URL or its file name relative
to this page
width
height - include the number of pixels wide
or high you'd like to display the
image
alt - alt text, to describe the image for
screen readers or if image downloads
are turned off, etc.
<img src="peter.jpg" width="200" height="100"
alt="Peter and the Wolf handbill" />
* but we should get to basic HTML5 page structure!
* IN CS 318, to follow class coding standards,
* thou shalt include a DOCTYPE to start
one's HTML5 page
<!DOCTYPE html>
* thou shalt follow that with an html element,
containing head and body elements
* (and thou shalt include a title element in the head element,
giving a descriptive title for the browser window to display
in the border - NOT as part of the page itself - when displaying
this page;)
* these are demo'd in html5-0.html, a "simplest" example
of an HTML5 page;
* there are two categories of elements,
block elements and inline elements
block element - e.g., a paragraph, a bulleted list,
etc. -- represents a significant element in page,
it may contain MUCH content spanning multiple lines,
it can contain many elements nested within it,
and basically a browser typically
displays each block element with a line break and
vertical margins above and below it
* a few example block elements: (and these were gradually added
to html5-1.html during lab)
* element p - paragraph
* it is a CS 318 class coding standard that you are expected
to have opening and closing tags (<p> AND </p>) for *every*
p instance
* heading elements:
h1 h2 h3 h4 h5 h6
* use these SEMANTICALLY, to indicate major
headings, subheadings, sub-subheadings, etc. --
(then use CSS to make them look as you'd like)
* [aside:
HTML comment:
<!-- hello -->
]
* <hr /> -- also a block element, a "horizontal rule", a horizontal
line separating sections
* inline element - represents a "smaller" element
in the page, and must be NESTED WITHIN a
BLOCK element
* some example inline elements:
elements em and strong
element em is for emphasized content,
element strong is for strongly emphasized content
(and that's how you should use these;)
* img element -- as described earlier -- is also an inline
element;
* in this class, ALL img instances are expected to
include an alt tag
* and of course hyperlinks!
<a href="where-to-go"> <-- URL or a filename relative
to curr page's location
the text to be hyperlinked
</a>