Web Design – 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?

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

Week 2 What’s in a URL / URI ? Uniform Resource Locator / Uniform Resource Identifier Scheme (protocol) HostPathQuery

Week 2 IP Addresses and the Domain Name System Domain name = ‘speed dial’ Real location is IP (Internet Protocol) address eg 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

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

Week 2 - HTML Metadata “Content”

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

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

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

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 NamePhone Joe Blow

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.

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

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

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

Week 2 - Assignment Create 2 new HTML files from scratch using only a text editor (Notepad will do). Both files must contain the following elements: In the –page title –metatags for keywords, description, and author in the –two different levels of headers –some paragraph text –a link to the other file, ie each file must link to the other At least one of the files must have: –a list (either bulleted or numbered) –a link to an external website –comments properly 'commented out' –bold text –italicized text –a table Put your 2 files into your H:3080/labwork/ folder