3. Build a personal Website with links, Pictures,sound, videos,and Games 1.Respect teammates. 2.Respect equipment. 3.No bad things.

4. Ugly Average Amazing

5. Hero:Eli Manning Favorite Quote:”Think About it.” Hobbies:Playing sports,Video games,Listening to music.

6. URL for websites built by Build-it-yourself workshops http://biyweb.tripod.com URL for transferring files from your computer to the Tripod Web server http://ftp.tripod.com Uid: biyweb Password: password

7. Goals Sell?? Convince?? Share?? Who are you speaking to?

8. 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/webchart.html http://www.build-it-yourself.com/project-website/

9. Website Designers Plan 1. How the Internet works 2. Web page vocabulary 3. Web page grammar 4. Tricks 5. Pictures, Audio, Video 6. Build-Your-Own-Site www.Build-It-Yourself.com

10. You, Client Internet Components Domain Name Server 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. Your local Internet Service Provider

11. Route Server You, Client Internet Components Domain Name Server 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 local Internet Service Provider Routers & Switches Website Internet Service Provider

12. Route Server You, Client Internet Components Domain Name Server Routers & Switches I N T E R N E T B A C K B O N E Your local Internet Service Provider Routers & Switches Website Host Server Website Internet Service 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.

13. Set up your work folders. www.Build-It-Yourself.com documents Desktop your name yourname-lab-book.ppt yourname-web-page.html C: or Hard Drive images cat.jpg ball.gif song.wav movie.wmv Never leave your files on the desktop. Files left on the desktop will get deleted.

14. 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.

15. 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. Title How many HTML commands are there? Web Browser (What are 2 popular browsers?) Application that converts HTML to a screen display

16. 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 likewww.hotshot.com 231.987.520.52

17. 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)

18. 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 ?

19. View / Source Code html file sections (index.html) www.Build-It-Yourself.com

20. 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

21. HTML Source Code Body Section Indent your code so it can be read and edited easily. Hot Shot Web Designer www.Build-It-Yourself.com

22. Web Design Hot Shot Web Designer

23. Bad HTML code www.Build-It-Yourself.com Web Design Good HTML code Hot Shot Web Designers Hot Shot Web Designer Hot Shot Web Designers <meta name=“keywords” content= hot shots, smarties, your name> <meta name= “description” content= Best Web designers on the planet!> Hot Shot Web Designer

24. 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

25. Editing A Simple Table Add text here that describes your research, storylines, goals, and solution.

26. Team 1: Add text here that describes your research, storylines, goals, and solution. Team 2 Add text here that describes your research, storylines, goals, and solution. www.Build-It-Yourself.com Editing Simple Table Change Image Change Text

27. Favorite Web Sites Build Your Own Toys http://www.build-it-yourself.com/ Mechanical Toys http://www.cabaret.co.uk/ Mechanisms http://www.flying-pig.co.uk/mechanisms/ www.Build-It-Yourself.com

28. Deployment (FTP / Backup) You can set up a free Web Server space at: www.yahoo.tripod.com

29. 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

30. 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.

31. Website Map and Navigation Home Page Favorite Stuff Friends Favorite Web sites HobbiesHeroes

32. File Structure Folders Web Site index.html Section 1 Section ‘n’ Sec1 Imagessec-1.htmlsec-n.html Sec1 Images

33. File Structure File Names 1)Use long descriptive names like alex-home-page.html 2)Use lower case text 3)Use “-” not “_” or “ “ like hot-shot.html not hot_shot.html or not hot shot.html 4)Use no special characters in file names 5) Use no more than 27 letters in typing

34. Pictures, Audio and Video This is how to embed an audio: Record or search for an audio file and then embed it in your page.

35. 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. Hannah

36. 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.