Making Web Pages
Examples from Lecture
When you load an HTML page, right-click and choose "View Source" to see the source code for that page.
Connecting to midd-unix
- Open Computer and type \\midd-unix\username in the address bar, adding your real username. Enter your username and password when prompted.
- Double click on the public_html folder. This is where you put html files. Any file you put in this directory will be accessible at http://community.middlebury.edu/~username/
HTML
Content
- Headings: <h1> (biggest), <h2>, <h3>, ... <h6> (smallest)
- Text: <p>Ordinary text goes inside paragraph tags</p>
- Images: <img src="imagename.jpg">
- Links: <a href="destination.html">
- Emphasis: <em>
Layout
CSS
Styles can be applied to any element. Most commonly, they are applied to elements like paragraphs, links, and lists.
Colors
Colors can be specified using several different ways:
- 16 built-in names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
- RGB codes: rgb(x,y,z), where x, y, and z are amounts of red, green, and blue, each between 0 and 255.
Common attributes
- color - the text color
- background - the background, either a color or an image
- font-size - font size, e.g. "12pt"
- font-family - font face, e.g. "Helvetica" or "Arial"
- font-weight - either "bold" or "normal"
- font-style - either "italic" or "normal"
- text-align - text alignment, "center", "left", or "right"
Link Styles
Links have a special syntax that allows you to do fancy hover effects:
- a - all links get this style
- a:hover - a link gets this style only when the mouse is over it
More Resources