3080-03 - University of Guelph

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
HTML:
•
•
•
the components of a web page
links, images, tags in general
what is a markup language?
Week 2
How the Web Works…
Web Server
database
“client”
internet
Web browser
The internet is a
packet-switched
network
No pre-set path for
data to travel
Static
pages
Week 2
What’s in a URL / URI ?
Uniform Resource Locator / Uniform Resource Identifier
http://www.uoguelph.ca/guelphhumber/media_studies/3080.htm?section=03
Scheme
(protocol)
Host
Path
Query
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
Name Server
Web Server
“client”
database
internet
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
<html>
<head>
Metadata
</head>
<body>
“Content”
</body>
</html>
Week 2 – HTML / Metadata
Metadata is information about the web document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<H1>Header
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
sizes.
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
Tables should be used to present tabular data only. Using tables for
layout is no longer encouraged.
<table>
<tr>
<td>Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Joe Blow</td>
<td>416 555 5555</td>
</tr>
</table>
Name
Phone
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:
Images
<img src=“myphoto.jpg” height=“100” width=“250” alt=“This is me on
vacation” align=“left”>
Links
<a href=“http://www.blogger.com”>click here for Blogger</a>
<a href=“mailto:[email protected]”>click here to send an email</a>
Comments
<!- - 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
Site</a>
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
<center></center>
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/
folder

3080-03 - University of Guelph

Transcript 3080-03 - University of Guelph

Directory