3080-03 - University of Guelph

Download Report

Transcript 3080-03 - University of Guelph

Web Design 3080-03 – Week 2
Introduction to website basics
Website basics:
How the Web Works
Client / server architecture
Packet switching
URL components
IP addresses, domains, name servers
the components of a web page
links, images, tags in general
what is a markup language?
Week 2
How the Web Works…
Web Server
Web browser
The internet is a
No pre-set path for
data to travel
Week 2
What’s in a URL / URI ?
Uniform Resource Locator / Uniform Resource Identifier
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
Name Server
Web Server
Web browser
Static pages
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 < and > 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
Week 2 – HTML / Metadata
Metadata is information about the web document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Design 3080-03 : Guelph-Humber</title>
<meta name=“Keywords" content=“University of Guelph, Humber College, Web
Design, 3080, best class ever" />
<meta name="Description" content=“This page contains information about the Web
Design 3080-03 class at Guelph-Humber." />
<link type="text/css" rel="stylesheet" href=“css/3080style.css" />
Week 2 – HTML / basic tags
Some basic HTML tags:
<p> Paragraph – must be ‘closed’ with </p>
<strong> Makes text bold </strong>
<em>Emphasis / italics </em>
tag: largest title case</h1>
<h2> <h3> <h4> <h5> progressively smaller header
<br /> line break – a self-closing tag
<hr /> horizontal rule (line) – a self-closing tag
Week 2 – HTML / basic tags
Some more basic HTML tags:
Bulleted lists:
<ul> begins the list
<li> for each item in the list </li>
<li> for each item in the list </li>
</ul> ends the list
Numbered lists:
<ol> begins the list
<li> for each item in the list </li>
<li> for each item in the list </li>
</ol> ends the list
Week 2 – HTML / basic tags
Tables should be used to present tabular data only. Using tables for
layout is no longer encouraged.
<td>Joe Blow</td>
<td>416 555 5555</td>
Joe Blow
416 555 5555
Week 2 – HTML / basic tags
Nesting HTML Tags
The right way:
<p><strong>some text goes right here</strong></p>
The wrong way:
<strong><p>some text goes right here</strong></p>
Tags must be in the correct order.
Week 2 – HTML / basic tags
Still more basic HTML tags:
<img src=“myphoto.jpg” height=“100” width=“250” alt=“This is me on
vacation” align=“left”>
<a href=“http://www.blogger.com”>click here for Blogger</a>
<a href=“mailto:[email protected]”>click here to send an email</a>
<!- - anything between these tags will not display on screen
Week 2 – HTML / basic tags
Hypertext links
(AKA “anchors”)
Absolute links
<a href=“http://www.anothersite.com/somepage.html”>Another
Relative links
<a href=“anotherpage.html”>Another Page</a>
<a href=“anotherdirectory/anotherpage.html”> Another Page </a>
<a href=“../anotherdirectory/anotherpage.html”> Another Page </a>
Week 2 – HTML / basic tags
Deprecated Tags
Some HTML tags no longer be used:
<b> </b>
for bold text
<i></i> for italics
should use <div align=“center”></div>
All <font> 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 <head>
– page title
– metatags for keywords, description, and author
in the <body>
– 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/