Web Pages 101!

Goals:

HTML and CSS are languages used to code the content/structure and appearance of a web page, respectively.
HTML consists of elements of various types (e.g., html, head, body, li). Some elements may be nested in other elements.
CSS specifies how a page should be presented on screen, i.e., rendered. CSS consists of formatting rules for HTML elements. In this example, the rules set color choices for all li and h1 elements.

HTML elements are programmed using tags, which typically consist of a start tag and an end tag. For example, <html> </html> denotes the html element, which contains the entire document.
Different elements serve different purposes. head stores information about the page, such as CSS formatting rules. body contains the visible content of the document, which may consist of headings (h1), paragraphs (p), list items (li), and more.
A CSS rule consists of a selector (which identifies the element or elements) and a declaration block (which specifies formatting rules).

Save each of the following in a folder called WebPages.

An index.html file is the default file web servers look for when serving a page for a website. For example, when you enter pencilcoder.net (a website address) in your browser's toolbar, the file that you actually see is pencilcoder.net/index.html.

Create a script called index.html, in which you share some aspects of your personal history. In addition to the html and body elements, structure your document using header (h1, h2, etc.), paragraph (p), and list (ul, li) elements.
FormattedIndex.html: fancy-up a copy of your index.html program using CSS. Add your formatting rules in a style element, which should appear in the document's head. Consider adding id properties to specific page elements so you can target them for special formatting. Add div elements—containers for a block of other HTML elements—to break up your document into sections that you can differentiate with style attributes such as background-color, border, padding, and margin.
Create a web page called Separate.html that includes its CSS code in a separate document, called Separate.css. You won't need a style element. Rather, use a link element in the document head to include your stylesheet settings:
```
<link rel="stylesheet" href="Separate.css">
```
(Unlike tags for most elements, the opening and closing tags for the link element are combined in a singleton tag, i.e., <link>.)