build a personal website with pictures, links, and favorite stuff. 1) respect teammates 2) respect...
TRANSCRIPT
![Page 1: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/1.jpg)
![Page 2: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/2.jpg)
Build a personal website with pictures, links, and favorite stuff.
1) Respect teammates
2) Respect equipment
3) No bad things
![Page 3: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/3.jpg)
AUDIENCE
Friends, Kids my age and people looking for some good Real Time Strategy games.
GOALS
Share games and things about me
![Page 4: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/4.jpg)
Ugly
Average
Way Cool
![Page 5: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/5.jpg)
You can set up a free Web Server space at:
www.yahoo.tripod.com
Url for Websites built in B-I-Y workshops:
http://biyweb.tripod.com
FTP URL for transferring files from your computer to the tripod web server:
PWD: password
![Page 6: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/6.jpg)
Website Designers Goal
Evolve fromknow-nothing,
nat-brainrookies …
intoIncredibleWebsite
Designers
Reference Websites:http://navigators.com/internet_architecture.htmlhttp://www.rci.rutgers.edu/~au/workshop/int-def.htmhttp://www.profitgate.net/webchart.htmlhttp://www.build-it-yourself.com/project-website/
![Page 7: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/7.jpg)
Website Designers Plan
1. How the Internet works2. Web page vocabulary3. Web page grammar4. Tricks5. Pictures, Audio, Video6. Build-Your-Own-Site
www.Build-It-Yourself.com
![Page 8: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/8.jpg)
Set up your work folders.
www.Build-It-Yourself.com
documents
Desktop
your nameyourname-lab-book.pptyourname-web-page.html
C: orHard Drive
images
cat.jpgball.gifsong.wavmovie.wmv
Never leave your files on the desktop. Files left on the desktop will get deleted.
![Page 9: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/9.jpg)
You,Client
Internet Components
DomainNameServer
Type a URL like ‘www.build-it-yourself.com’ in theaddress 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 pagefrom the Internet at the appropriate IP address.
Your localInternetService
Provider
![Page 10: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/10.jpg)
RouteServer
You,Client
Internet Components
DomainNameServer
Routers&
Switches
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.
Your localInternetServiceProvider
Routers&
SwitchesWebsiteInternetServiceProvider
![Page 11: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/11.jpg)
RouteServer
You,Client
Internet Components
DomainNameServer
Routers&
Switches
I N T E R N E T B A C K B O N E
Your localInternetServiceProvider
Routers&
Switches
WebsiteHost
Server
WebsiteInternetService
Provider
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.
![Page 12: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/12.jpg)
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.
![Page 13: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/13.jpg)
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.
<font color = “red”> Title </font>
How many HTML commands are there?
Web Browser (What are 2 popular browsers?)
Application that converts HTML to a screen display
![Page 14: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/14.jpg)
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
![Page 15: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/15.jpg)
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)
![Page 16: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/16.jpg)
HTML
• Stands for: Hypertext Markup Language
• Is the document format used on the world wide web
• Is read by web browsers that then display the web page
What is ?
www.Build-It-Yourself.com
HTML
What are browsers ?
![Page 17: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/17.jpg)
View / Source Code
html file sections (index.html)
<html>
<head>
< ! - - page description info - - >
</head>
<body>
< ! - - page layout code - - >
</body>
</html>
www.Build-It-Yourself.com
![Page 18: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/18.jpg)
View Source Code / Save As / Edit
www.Build-It-Yourself.com
Find a Web page you like.
View ‘Source’
Save as ‘intro-page.html’ in a folder named ‘your name’ in the folder ‘My Documents’
My Documents/john/intro-page.html
Launch a text editor like Notepad or Simple Text. Open the file, ‘intro-page.html’
Create a sub-folder called ‘images’ and save your favorite pictures in this folder.
Edit the tags, text and image names. Then save the html file.
Launch Internet Explorer. File / Open ‘intro-page.html’
Click on ‘Refresh’ after an edit is made and saved.
1
2
3
4
5
6
7
![Page 19: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/19.jpg)
HTML Source Code Body Section
Indent your code so it can be read and edited easily.
<body bgcolor=“purple”>
< ! - - The Title Section Starts Here - - >
<center>
<font size=“6” color=“red” face=“arial”>
Hot Shot Web Designer
</font>
<img src=“turnip-head.jpg” border=1>
</center>
</body> www.Build-It-Yourself.com
![Page 20: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/20.jpg)
www.Build-It-Yourself.com
Web Design
Hot Shot Web Designer
![Page 21: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/21.jpg)
Bad HTML code
www.Build-It-Yourself.com
Web Design
Good HTML code<html><head><title> Hot Shot Web Designers </title><meta name=“keywords” content=hot shots, smarties, your name> <meta name= “description” content=Best Web designers on the planet!></head><body bgcolor=purple><!-- The Title Section Starts Here --><center><font size=6 color=red face=arial>Hot Shot Web Designer<p></font><img src="images/head-turnip.jpg" border=1 width="250" height="367"></center></body></html>
<html><head> <title> Hot Shot Web Designers </title> <meta name=“keywords” content= hot shots, smarties, your name> <meta name= “description” content= Best Web designers on the planet!></head>
<body bgcolor=purple><!-- The Title Section Starts Here --> <center> <font size=6 color=red face=arial>
Hot Shot Web Designer<p> </font> <img src="images/head-turnip.jpg" border=1> </center></body></html>
![Page 22: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/22.jpg)
Project Planning (Teamwork)
• 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’Click on ‘Intro HTML page’View Source and edit the color and text.
www.Build-It-Yourself.com
![Page 23: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/23.jpg)
www.Build-It-Yourself.com
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.
![Page 24: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/24.jpg)
<div align="center"> <table border="0" cellpadding="5" cellspacing="5" width="650"> <tr> <td width="250" valign="top" align="left"> <img border="0" src="images/placemark.jpg"> </td> <td width="400" valign="top" align="left"> <font face="Times New Roman" size="4" color="gray"> Team 1:<br>
Add text here that describes your research, storylines, goals, and solution. </font> </td> </tr> <tr> <td width="250" valign="top" align="left"> <img border="0" src="images/placemark.jpg"> </td> <td width="400" valign="top" align="left"> <font face="Times New Roman" size="4" color="gray"> Team 2<br>
Add text here that describes your research, storylines, goals, and solution. </font> </td> </tr> </table></div><p> www.Build-It-Yourself.com
Editing Simple Table
Change Image
Change Text
![Page 25: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/25.jpg)
Favorite Web Sites
Build Your Own Toyshttp://www.build-it-yourself.com/
Mechanical Toyshttp://www.cabaret.co.uk/
Mechanismshttp://www.flying-pig.co.uk/mechanisms/
www.Build-It-Yourself.com
![Page 26: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/26.jpg)
Deployment (FTP / Backup)
You can set up a free Web Server space at:www.yahoo.tripod.com
![Page 27: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/27.jpg)
Preparing Images
1. Capture JPG’s and GIF’s from Web sites
2. Make your own image in Power Point, Appleworks Paint
3. Download photos from a camera
Process image in:
Photoshop
Paintshop Pro
Free Online Tool for editing gif’s (crop and size):http://www.gifworks.com
![Page 28: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/28.jpg)
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:
1) Goals and accomplishments
2) Hobbies and interests
3) Friends and heroes
4) Favorite quotes and jokes
5) Short story about how you would like your future to unfold.
![Page 29: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/29.jpg)
Website Map and Navigation
Home Page
FavoriteStuff
Friends FavoriteWeb sites
Hobbies Heroes
![Page 30: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/30.jpg)
File Structure Folders
Web Site
index.html Section 1 Section ‘n’
Sec1 Imagessec-1.html sec-n.html Sec1 Images
![Page 31: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/31.jpg)
File Structure
File Names1) Use long descriptive names like
patrick-home-page.html2) Use lower case text3) Use “-” not “_” or “ “ like hot-shot.html
not hot_shot.html or not hot shot.html
4) Use no special characters in names Ex. !@#$%^&*()+5) Do not use more than 27 characters
![Page 32: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/32.jpg)
Pictures, Audio and Video
This is how to embed an audio:
<embed src=“burp.wav” autostart=true>
Record or search for an audio file and then embed it in your page.
![Page 33: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/33.jpg)
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.
<body background=“sparkle-background.gif”>
Hannah
![Page 34: Build a personal website with pictures, links, and favorite stuff. 1) Respect teammates 2) Respect equipment 3) No bad things](https://reader035.vdocuments.mx/reader035/viewer/2022062802/56649ea95503460f94bacca6/html5/thumbnails/34.jpg)
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.