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

2. 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

3. 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

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

5. 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

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

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

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

9. 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)

10. 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

11. Inline styling Hard to maintain -> not recommended

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

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

14. 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

15. 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: http://imc320.bigbigdesign.net/assets/week-2.zip

16. 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

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

18. 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

19. 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

20. 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

21. Resources HTML 4.01 / XHTML 1.0 Reference: http://www.w3schools.com/tags/default.asp http://www.w3schools.com/tags/default.asp List of CSS properties: http://meiert.com/en/indices/css-properties/ http://meiert.com/en/indices/css-properties/ Smashing Magazine: www.smashingmagazine.com www.smashingmagazine.com http://www.smashingmagazine.com/2011/0 1/18/time-saving-and-educational- resources-for-web-designers/