CSCI E-1 | Lecture 10 | Website Development

www.fas.harvard.edu
- TLD
- domain
- subdomain
- host
What is a webserver?
- holds info that gets presented as website
- communicates via http protocol
- web pages often written in HTML (Hypertext Markup Language)

root = / on UNIX/Linux/Mac OS X
root = c:\ on Windows
On FAS:
- /
- /home or /nfs/home
- /home/[a,b,c,...z]/[a,b,c,...z]/[username]
- e.g.: /home/m/a/malan
Public HTML directory
- /home/[a,b,c,...z]/[a,b,c,...z]/[username]/public_html
- e.g.: /home/m/a/malan/public_html
Creating a web page
- mkdir ~/public_html
- cd ~/public_html
- pico [filename].html (then hit enter)
  - pico is a text editor
  - pico command prompts at bottom of screen
- default web page is index.html
- page posted on: http://www.people.fas.harvard.edu/~[username]
- e.g.: http://www.people.fas.harvard.edu/~malan
- Every web page MUST have a head and a body
- file lives here:
  - /home/[a,b,c,...z]/[a,b,c,...z]/[username]/public_html/index.html
  - e.g.: /home/m/a/malan/public_html/index.html
- use the fixwebfiles command to fix file permissions

HTML vs. XHTML
- HTML invented by Tim Berners-Lee
- HTML evolved to support more visual features
- HTML is much looser than XHTML
- XHTML has a more formal structure
Markup
- tags
  - doctype
  - head
  - title
  - body
- demo: Hello, World!
- What is a tag?
  - A container for markup elements
  - All tags should be closed in XHTML
  - Close tags "symmetrically"
  - html, head, title, body, div, font, etc...
- What is an attribute?
  - Attributes describes or controls tag behavior or display
  - demo: bgcolor
  - attribute values (or just values) should be in quotes
  - color values in hexadecimal
    - RGB: RR+GG+BB: 00ff00: green
  - valid attributes and values vary per tag
  - order of attribute/value pairs does not matter
  - bgcolor, color, face, size, etc...
demo: css.html
indentation

common mistakes when editing web pages on FAS
- modifying source code locally, not on FAS
(X)HTML ignores whitespace
tags that are opened and closed in one set of brackets
- br, hr, img, etc...
- e.g.: <br />
creating hyperlinks
- anchor tags
- <a href="[some reference]">some text</a>
- demo: mailto.html
using the 'xhtml' command
- helps avoid typing the doctype
- usage: xhtml [filename]
  - e.g.: xhtml sample.html
- then edit with pico
  - e.g.: pico sample.html
demo: 3.html
demo: style.html

well-formedness:
- attributes must be lowercase
- values must be in quotes
- tags must be "balanced"
validity
- tags must be lowercase
- legitimate tags
- conforms to dtd

Lecture 10: Website Development