learn good habits that will serve you well in the future
Internet, the Web, and HTML
p. 12.
- web as subset of internet
- html as markup for the web
- client/server
- URL as a path to document on a server p. 27.
SGML and HTML
- SGML parent of HTML and XML - all are plain text (text editors)
- logical presentation rather than cosmetic
- viewer-agnostic: trust the browser!
- prolog or declaration
- container elements (
<foo>this text is contained</foo>) and empty elements (<foo />) p.21.
- element names and attributes (key/value pairs) p. 22.
- nesting p.23.
specific to HTML
- rendered in a browser (the web client). Source is accessible.
- comments
- whitespaces compress to one whitespace: use spacing for markup clarity. p.24.
- links
- embedded documents (images, sounds, etc)
- .html extension (.htm .shtml, etc)
minimalist html
<HTML>
<HEAD>
<TITLE>This is my page title</TITLE>
</HEAD>
<BODY>
And this is some text
</BODY>
</HTML>
Practicum: minimalist web page on the localhost
pp 36-38.
- create a minimal webpage using the format above
- view it in your browser
- change the webpage
- view the changed page in your browser
Topics for discussion: URL; browser cache, refresh/reload, saving your work, backups.
Text Formatting
<P> paragraph
<BR> linebreak
<HR> horizontal rule, size width, align. p. 95
<BLOCKQUOTE></BLOCKQUOTE>
<PRE></PRE>
<NOBREAK></NOBREAK>
<WBR> suggested break, if necessary
- Ordered and Unordered lists, List Items
Practicum: second web page on the localhost
- create a second web page that contains a blurb about a pet you have (or had in the past). If you have never had a pet, use an imaginary one. :-)
- give it a descriptive name.
links (anchors)
- a link:
<A HREF="URL goes here">my text that will be a link</A>
- relative (
somefile.html) p.28. . and ..
- absolute (
http://hostname/path/to/somefile.html) p. 27.
- internal
- hyperlink:
<A HREF="#name">my text that will be a link</A>
- target:
<A NAME="name">my text that will be the target for an internal link</A>
Practicum: site organization of second web page on the localhost
Organization of a web site... hierarchy, maintainability.
- make a subdirectory called
pets
- move your pets html to that dir
- make both pages link to each other
Organization becomes more and more important as the site grows and gains more types of media.
graphics
- body tag attributes: background, bgcolor (#rrggbb)
- each graphic is a separate document
- the browser renders the page...
- horking an image...
- inlining the image
<IMG SRC="/path/to/image">
- inlining from the internet
Font and text styles
BASEFONT tag
TEXT tag
link, vlink, alink tag
basefont tag
FONT FACE="" SIZE="3" COLOR="" tag. pp. 45-50.
BIG, SMALL, SUB, SUP, U, STRIKE, CODE and the much-detested "blink" tag.
BIG
FONT FACE="" SIZE="3" COLOR="" tag. pp. 45-50.
FONT FACE="" SIZE="3" COLOR="" tag. pp. 45-50.
Homework
- read news:comp.infosystems.authoring.html
- surf and look at pages; view the source to see how things are done.
http://www.mousetrap.net/syllabus/wpd1/day1.html
$Id: day1.orb,v 1.14 2002/06/15 03:04:08 mouse Exp $
Remember, your login is based on your machine's hostname, not on any other number.
~/[initials] refers to the subdirectory under your homedir, named after your initials. Everything except for .dotfiles will be stored in your ~/[initials] directory.
