John's

1
John's
Web Design Lab Book
www.Build-It-Yourself.com
2
Website Designers Goal
Evolve from know-nothing, nat-brain rookies
into Incredible Website Designers
Reference Websites http//navigators.com/internet
_architecture.html http//www.rci.rutgers.edu/au/
workshop/int-def.htm http//www.profitgate.net/web
chart.html http//www.build-it-yourself.com/projec
t-website/ http//www.htmlcodetutorial.com/
www.Build-It-Yourself.com
3
Favorite Web Sites
Build Your Own Toys http//www.build-it-yourself.c
om/ Mechanical Toys http//www.cabaret.co.uk/ Me
chanisms http//www.flying-pig.co.uk/mechanisms/
Pixar http//www.pixar.com/
www.Build-It-Yourself.com
4
Website Designers Plan

• How the Internet works
• Web page vocabulary
• Web page grammar
• Programming tricks
• Pictures, Audio, Video
• Web site plan and navigation
• Build-Your-Own-Site

www.Build-It-Yourself.com
5
Website Development Tools
Gimp Freeware version of Photoshop. http//www.gi
mp.org/downloads/ Free Online Tool for editing
gifs (crop and size). http//www.picresize.com/
Free Online Tool for making animated
gifs. http//www.myspacegens.com/handler.php?gena
nimatedimagepviewid2818834919 Notepad
Advanced Text Editor http//notepad-plus-plus.org/
download Setting up text editor on
Macs http//www.build-it-yourself.com/biy-project
s/proj-web-design/resources/mission-web-design-tex
tedit-tutorial.ppt
www.Build-It-Yourself.com
6
Project Planning (Teamwork)
Extreme Programming

• Share ideas
• Build on others ideas
• 2 heads better than 1 teamwork
• www.build-it-yourself.com
• Go to Projects.
• Scroll down to Incredible Web Designers.
• Download your lab book template.

www.Build-It-Yourself.com
7
Internet Components
Your local Internet Service Provider
You, Client
Type a URL like www.build-it-yourself.com in
the address bar of your Web browser. Your local
ISP (or Internet Service Provider) will convert
this URL to an IP (or Internet Protocol) address
by looking it up on a Domain Name Server. Your
local ISP will then request a Web page from the
Internet at the appropriate IP address.
Domain Name Server
www.Build-It-Yourself.com
8
Internet Components
Routers Switches
Routers Switches
Your local Internet Service Provider
Website Internet Service Provider
You, Client
Domain Name Server
Route Server
I N T E R N E T B A C K B O N E
A Route Server will determine the best route from
your ISP to the ISP that hosts the Website you
want.
www.Build-It-Yourself.com
9
Internet Components
Routers Switches
Routers Switches
Your local Internet Service Provider
Website Internet Service Provider
Website Host Server
You, Client
Domain Name Server
Route Server
I N T E R N E T B A C K B O N E
When the Website Internet Service Provider gets a
Web page request, it sends back all the
information necessary to display that Web page to
the IP address associated with your client
computer.
10
Internet Speed
4/10ths of a second time to blink your eye.
3/10ths of a second time to send a signal
from Boston to China and back.
www.Build-It-Yourself.com
11
Web Design
Hot Shot Web Designer
www.Build-It-Yourself.com
12
View / Source Code
html file sections (index.html) lthtmlgt ltheadgt lt
! - - page description info - -
gt lt/headgt ltbodygt lt ! - - page layout code -
- gt lt/bodygt lt/htmlgt
www.Build-It-Yourself.com
13
HTML Source Code Body Section
Indent your code so it can be read and edited
easily. ltbody bgcolorgraygt lt ! - - The Title
Section Starts Here - - gt ltcentergt ltfont
size6 colorpurple facearialgt Hot Shot
Web Designer lt/fontgt ltimg srcimages/turnip-hea
d.jpg border1gt lt/centergt lt/bodygt
RGB 000000 FFFFFF WHITE FF0000 - RED
www.Build-It-Yourself.com
14
Web Design
Bad HTML code
Good HTML code
lthtmlgtltheadgtlttitlegt Hot Shot Web Designers
lt/titlegtltmeta namekeywords contenthot shots,
smarties, your namegt ltmeta name description
contentBest Web designers on the
planet!gtlt/headgt ltbody bgcolorgraygtlt!-- The Title
Section Starts Here --gtltcentergt ltfont size6
colorpurple facearialgtHot Shot Web
Designerltpgtlt/fontgtltimg src"images/head-turnip.jpg
" border1 width"250" height"367"gtlt/centergtlt/bod
ygtlt/htmlgt
lthtmlgt ltheadgt lttitlegt Hot Shot Web Designers
lt/titlegt ltmeta namekeywords content hot
shots, smarties, your namegt ltmeta name
description content Best Web designers on
the planet!gt lt/headgt ltbody bgcolorgraygt lt!--
The Title Section Starts Here --gt ltcentergt
ltfont size6 colorpurple facearialgt Hot Shot
Web Designer lt/fontgt ltpgt lt! line feed or
space tag --gt ltimg src"images/head-turnip.jpg
" border1gt lt/centergt lt/bodygt lt/htmlgt
www.Build-It-Yourself.com
15
Web Design
Web Page
HTML code
Browser
lthtmlgt ltbody bgcolorgraygt lt!-- The Title Section
Starts Here --gt ltcentergt ltfont size6
colorpurple facearialgt Hot Shot Web
Designer lt/fontgt ltpgt lt! line feed or
space tag --gt ltimg src"images/head-turnip.jpg
" border1gt lt/centergt lt/bodygt lt/htmlgt
Hot Shot Web Designer
www.Build-It-Yourself.com
16
View Source Code / Save As / Edit
1
Find a Web page you like.
2
View Source COPY all source code to a text
editor (Notepad or Apple Works).
3
Save as name-description.html in your folder in
the folder My Documents My Documents/john/john-t
urnip-head.html
Create a sub-folder called images and save your
favorite pictures in this folder. To get
pictures (JPGs or GIFs) from the Web, search
Google Images. Right click (or CTRL click on
Macs) on a picture and save the image to you
images folder.
4
5
Edit the tags, text and image names. Then save
the html file.
Launch Internet Explorer. File / Open
john-turnip-head.html Click on Refresh after
an edit is made and saved.
6
www.Build-It-Yourself.com
17
Set up your work folders.
Never leave your files on the desktop. Files
left on the desktop will get deleted.
Desktop
documents
C or Hard Drive
yourname-lab-book.ppt yourname-web-page.html
your name
cat.jpg ball.gif song.wav movie.wmv
images
www.Build-It-Yourself.com
18
File Structure

• File Names
• Use long descriptive names like
• school-date-name-description.html
• Specify names in hierarchical order (Earth,
  Country, State, Street)
• Use only lower case text.
• Use - between words.
• Do not use _ or
• Good biy-hot-shot.html
• Bad biy_hot_shot.html
• Bad biy hot shot.html

www.Build-It-Yourself.com
19
Internet Definitions
Internet The name given to the collective
electronic network of computers and computer
networks which are inter-connected throughout the
world. Like a network of highways. WorldWideWeb
WWW The name given to the collection of
computers which serve information in hypertext
format to the INTERNET Like the US Post Office
that uses the
network of highways to deliver letters
based on ZIP codes.
www.Build-It-Yourself.com
20
Internet Definitions
HTML - Hyper Text Markup Language the text
markup language used to insert tags which allow a
Web browser to correctly display a hyper-text
document. ltfont color redgt Title
lt/fontgt How many HTML commands are there? Web
Browser (What are 2 popular browsers?) Application
that converts HTML to a screen display
www.Build-It-Yourself.com
21
Internet Definitions
Server A server is a computer that controls
information on a network. Domain Name
Server Translates a Web address like
www.hotshot.com to an IP address
like 231.987.520.52
www.Build-It-Yourself.com
22
Internet Definitions
Client Dial Up / DSL / Cable / T1 transmission
speed ISP (Internet Service Provider) Domain Name
Servers IP address (Intrnet Protocol) Routers /
Switches Server TCP/IP (Transmission Control
Protocol / Internet Protocol) FTP (File Transfer
Protocol)
www.Build-It-Yourself.com
23
Editing A Simple Table
Add text here that describes your research,
storylines, goals, and solution.
Add text here that describes your research,
storylines, goals, and solution.
www.Build-It-Yourself.com
24
Editing A Simple Table
Add text here that describes your research,
storylines, goals, and solution.
Add text here that describes your research,
storylines, goals, and solution.
www.Build-It-Yourself.com
25
Editing A Simple Table
lttablegt
table
lttrgt
lttdgt
lttdgt
row
data
data
lt/tdgt
lt/tdgt
lt/trgt
lttrgt
lttdgt
lttdgt
row
data
data
lt/tdgt
lt/tdgt
lt/trgt
lt/tablegt
www.Build-It-Yourself.com
26
Editing Simple Table
ltdiv align"center"gt lttable border"0"
cellpadding"5" cellspacing"5" width"650"gt
lttrgt lttd width"250" valign"top"
align"left"gt ltimg border"0"
src"images/placemark.jpg"gt lt/tdgt lttd
width"400" valign"top" align"left"gt
ltfont face"Times New Roman" size"4"
color"gray"gt Team 1ltbrgt Add text
here that describes your research, storylines,
goals, and solution. lt/fontgt lt/tdgt
lt/trgt lttrgt lttd width"250"
valign"top" align"left"gt ltimg
border"0" src"images/placemark.jpg"gt
lt/tdgt lttd width"400" valign"top"
align"left"gt ltfont face"Times New
Roman" size"4" color"gray"gt Team
2ltbrgt Add text here that describes your
research, storylines, goals, and solution.
lt/fontgt lt/tdgt lt/trgt
lt/tablegt lt/divgt ltpgt
Change Image
Change Text
www.Build-It-Yourself.com
27
Navigation
ltbody bgcolorgray"gt lt!-- The Title Section
Starts Here --gt ltcentergt ltfont size6
colorpurple facearialgt Hot Shot Web
Designerltbrgt lt/fontgt lt!-- Navigation --gt ltfont
face"arial" size"4"gt lta href"index.html"gtHome
lt/agt lta href"table.html"gtPage 2lt/agt
lt/fontgt ltpgt
www.Build-It-Yourself.com
28
Audio and Video
You can embed sound effects or videos on a
page ltembed srcimages/burp.wav
autostarttruegt Record or search for an audio
file (.WAV) or a video file (.WMV) Save the WAV
or WMV files to your images folder and then
embed them inside your ltbodygt tags.
www.Build-It-Yourself.com
29
Scrolling Title
You can embed sound effects or videos on a
page ltembed srcimages/burp.wav
autostarttruegt Record or search for an audio
file (.WAV) or a video file (.WMV) Save the WAV
or WMV files to your images folder and then
embed them inside your ltbodygt tags.
www.Build-It-Yourself.com
30
HTML Questions

• If you forget the format for an HTML command,
• search Google.
• Search Key Examples
• - html table border color
• html align text
• A good HTML code syntax reference is
• http//www.htmlcodetutorial.com/

www.Build-It-Yourself.com
31
Preparing Images

• Capture JPGs and GIFs from Web sites.
• Make your own image in Power Point, Appleworks
  Paint.
• Download photos from a camera.
• Process images.
• Gimp Freeware version of Photoshop.
• http//www.gimp.org/downloads/
• Free Online Tool for editing gifs (crop and
  size).
• http//www.picresize.com/
• Free Online Tool for making animated gifs.
• http//www.myspacegens.com/handler.php?genanimat
  edimagepviewid2818834919

www.Build-It-Yourself.com
32
Designing your Web site
Audience Who are you speaking to? (Young, grown
up, boys or girls? Interested in entertainment,
hobbies, or evaluating your work?) Goals Sell
or Convince (For example, demonstrate that you
have mastered HTML and therefore should have a
budget to buy some new hardware or
software) Share (Share a story, information, or
links to cool sites.)
www.Build-It-Yourself.com
33
Designing your Web site

• Design, code and link 3 pages that would let an
  alien from another universe know who you are.
• Possible sections include
• Goals and accomplishments
• Hobbies and interests
• Friends and heroes
• Favorite quotes and jokes
• Short story about how you would like your future
  to unfold.

www.Build-It-Yourself.com
34
Website Map and Navigation
Home Page
Favorite Stuff
Favorite Web sites
Friends
Hobbies
Heroes
www.Build-It-Yourself.com
35
File Structure Folders
Web Site
index.html
Section n
Section 1
Sec1 Images
sec-1.html
sec-n.html
Sec1 Images
www.Build-It-Yourself.com
36
Development (Code Tricks)
You can add interesting background effects or a
background image. If you do this, make sure your
page information does not get lost in a complex
background picture. ltbody backgroundsparkle-bac
kground.gifgt
Hannah
www.Build-It-Yourself.com
37
Development (Code Tricks)
Design your Web site so that no page, including
pictures, requires more than 100k bytes of
download data. Time to view a page that requires
100K of information ___ Telephone modem download
time. ___ Cable download time. ___ DSL download
time. ___ Wireless download time. ___ T1 download
time.
www.Build-It-Yourself.com
38
Deployment (FTP / Backup)
Web Server
A free website account can be created on
www.tripod.com Google also has a free web server
(search for 'google web pages') Or students can
use the BIY tripod account www.tripod.com UID
biyweb PWD password To upload your files 1)
Click on Build a site of your own 2) Click on
File Manager (top menu bar) 3) Click on New
Directory Create a new folder with your
name. 4) Create a new directory in your 'name'
folder called 'images' 5) Change 'upload via' to
'single files' Browse to select your html files
and then click on upload to get them on the
Tripod web server 6) Follow the same procedure to
upload your jpg or gif files to the images
folder. To view your files You should see your
new website at http//biyweb.tripod.com/name/home
-page.html You must create your own 'name'
folder. Then home-page.html should be the main
page file name of your website.
www.Build-It-Yourself.com
39
Deployment (FTP / Backup)
Web Server
You can set up a free Web Server space
at www.tripod.com URL for Websites built in
Build-It-Yourself Workshops http//biyweb.tripod.c
om FTP URL for transferring files from your
computer to the Tripod Web Server ftp.tripod.com U
ID biyweb PWD password
www.Build-It-Yourself.com
40
Deployment (FTP / Backup)
Web Server
You can set up a free Web Server space
at http//members.000webhost.com/ URL for
Websites built in Build-It-Yourself
Workshops http//biy.herobo.com FTP URL for
transferring files from your computer to the
000Webhost Web Server ftp//biy.herobo.com
????? UID john_at_build-it-yourself.com PWD
west0000
www.Build-It-Yourself.com