Week 2: Building a Simple Website IMC 320 Web Publishing Spring 2011

HTML elements The things that make up an HTML document Element/attribute syntax (from w3schools.com)w3schools.com An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes Can be nested; not case-sensitive

Key HTML elements Document: html Page head: head Contains style, meta tags, scripts, and links to files containing these thing Not visible to page viewer Page body: body Contains content of page Visible

Key HTML elements Paragraph: p Headings: h1, h2, h3, etc. Link: a Link text Image: img

Key HTML elements Lists Ordered list: ol (has numbers) Unordered list: ul (has no numbers, can have bullets or images or...) List item: li (the things in the list) Can be nested

Key HTML elements Line break: br Rule: hr Comment:

Key HTML elements Tables table tbody tr (table row) th (table head) td (table... data?)

Key HTML tags Bold: strong Italics: em Underline: u Strikethrough: s Block quotation: blockquote Code: code

Attributes Provide additional information about HTML elements Specified in the start tag Come in name/value pairs: name=“value” First Post! Enclose values in quotes Not case-sensitive (but use lowercase)

Attributes: IDs and classes ID Only one of each per page h1#site-name or #site-name Class Can have many of same per page h2.entry-title or.entry-title

Inline styling Hard to maintain -> not recommended

Spacing and position Width Margin Padding Div -> a block of elements

Cascading Style Sheets(CSS) In page head:... As separate file:

FTP with Dreamweaver Local folder Site name (DW) FTP host (A Small Orange server) your domain name (not subdomain) Host directory (remote folder) public_html/[subdomain directory] Login & password Passive FTP

Lab part 1 1. Create subdomain 2. Set up Dreamweaver site 3. Download files & unzip 4. Create index.html 5. Insert text 6. Set up folders 7. Style document 8. Upload and view 9. Style some more Files:

Site menus/navigation Make a bunch of links Use an unordered list Get rid of bullets Make the list items display as blocks Float the list items Style the hovers and visited links

Consistency across pages Included files Various methods depending on server settings and type PHP: create file with repeated elements change filename extension to.php

Consistency across pages Dreamweaver templates Select what’s editable and what’s fixed Can have multiple templates per site Use conditions to determine what’s included Reduces processing on server Need to check out and reapply templates to all files to which it applies

List => Flexible photo gallery Remove list styling Reset margin and padding Set width and height of list element Float list element Optional: Set image width and height Style borders style captions

Lab part 2 Create a navigation menu Create a template from the repeatable parts of your page, including menu Create photo gallery page Create contact page Link it all together

Resources HTML 4.01 / XHTML 1.0 Reference: List of CSS properties: Smashing Magazine: /18/time-saving-and-educational- resources-for-web-designers/