1. Web Design 3080 – Week 2 More Fun With Delicious.com Setting up a ‘network’. 1.Go to Delicious.com and sign up for a personal account 2.Once your account is set up, click the ‘network’ link. 3.Add your class account to your network (gh3080am or gh3080pm) Sharing Links 1.In your account, add a new page 2.Tag as usual but also add the tag “for:gh3080am” or “for:gh3080pm” depending on your class. Logout when finished. 3.Login to the class Delicious page 4.Look under “Inbox”. 5.Click ‘Network’ in the main menu to see bookmarks from everyone in your network.

2. Web Design 3080 – Week 2 Introduction to website basics Website basics: How the Web Works Client / server architecture Packet switching URL components IP addresses, domains, name servers HTML: the components of a web page links, images, tags in general what is a markup language?

3. Week 2 internet “client” Web browser Web Server database Static pages How the Web Works… The internet is a packet-switched network No pre-set path for data to travel

4. Week 2 What’s in a URL? http:// http://www.uoguelph.ca http://www.uoguelph.ca/~jmccartn http://www.uoguelph.ca/~jmccartn/overview.htm http://www.uoguelph.ca/~jmccartn/article.htm?pageid=1234

5. Week 2 IP Addresses and the Domain Name System Domain name = ‘speed dial’ Real location is IP (Internet Protocol) address eg. 142.106.87.55 Domain ‘mapped onto’ IP address All domain records kept by domain name servers Updated frequently (daily or less) Changes are propagated over the DNS system DNS servers maintained by Internet Service Providers internet “client” Web browser Web Server database Static pages Name Server

6. Week 2 Basic HTML Structure HyperText Markup Language Markup languages contain presentation instructions for specific software applications (word processors, xml apps) HTML is a simple ‘tag-based’ language All instructions are contained within symbols – ‘tags’ Web browsers and other web-capable user agents can interpret HTML tags and render pages correctly. HTML is just text WYSIWYG editors are nice, but not necessary To see the code behind any website: CTRL-U (PC), option-apple-U (mac) or “View Source” (browser menu)

7. Week 2 Directory Structure Create the following folders: H:yourhomedirectory –3080 sandbox –Images –Css Public_html Open Wordpad Create a new file: index.htm and save it to your ‘sandbox’ folder From the class Resources page, download the images to your ‘sandbox/images’ folder (right click, save as)

8. Week 2 - HTML Metadata “Content”

9. Week 2 – HTML / Metadata Metadata is information about the web document: Web Design 3080: Guelph-Humber

10. Week 2 – HTML / basic tags Paragraph – must be ‘closed’ with Makes text bold Emphasis / italics Heading tag: largest title case progressively smaller heading sizes. line break – a self-closing tag horizontal rule (line) – a self-closing tag Some basic HTML tags:

11. Week 2 – HTML / basic tags Some more basic HTML tags: Bulleted lists: begins the list for each item in the list ends the list Numbered lists: begins the list for each item in the list ends the list

12. Week 2 – HTML / basic tags Tables Tables should be used to present tabular data only. Using tables for layout is no longer encouraged. Name Phone Joe Blow 416 555 5555 NamePhone Joe Blow416 555 5555

13. Week 2 – HTML / basic tags Nesting HTML Tags The right way: some text goes right here The wrong way: some text goes right here Tags must be in the correct order.

14. Week 2 – HTML / basic tags Still more basic HTML tags: Images Links click here for Blogger click here to send an email Comments

15. Week 2 – HTML / basic tags Hypertext links (AKA “anchors”) Absolute links Another Site Relative links Another Page

16. Week 2 – HTML / basic tags Deprecated Tags Some HTML tags should no longer be used: for bold text for italics should use All tags. Fonts should be set using Cascading Style Sheets (CSS)

17. Week 2 – Warning! Next Week: A TEST. Basic HTML and page structure In-class hand-written (yes)