1. Announcements

2. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language

3. What is WWW? zVia Internet, computers can contact each other zPublic files on computers can be read by remote user yusually HyperText Markup Language (.html) zHTTP - HyperText Transfer Protocol zURL - Universal Resource Locator - is name of file on a remote computer xhttp://www.msu.edu/~urquhar5/tour/active.html

4. How to make a web page zDefine the two basic steps required in making a web page.

5. Two Basic Steps zCreate an HTML File zUpload file to server

6. .html zWeb documents are text files with.html extension zThese text files have HTML “tags” in them

7. HTML Tags zEach opening HTML tag has a closing HTML tag that matches it. y for begin paragraph is followed by for end paragraph y goes at beginning of paragraph y goes at end of paragraph

8. Example of Tags z Here is the paragraph about something Here is the second paragraph What it will look like: Here is the paragraph about something. Here is the second paragraph.

9. Essential HTML Tags z begins HTML document z begins body of document z Here’s a header in big type z Here’s a paragraph z ends body z ends HTML document

10. Browser Output of Page If you opened that page in Netscape Navigator, it would look like this: Here’s a header in big type Here’s a paragraph

11. View Page Source zUsing “View Page Source” allows you to see the HTML behind a page zWhen we get into advanced HTML pages, this can be really important for learning how someone did something zhttp://puffin.bird.audubon.org/http://puffin.bird.audubon.org/

12. File Transfer Protocol zFTP Program (also called FTP client) used to transfer files from your computer to your public web directory housed on the MSU computers zWS_FTP LE is a good, free FTP program zIn MSU Labs, can directly save stuff in your AFS space, on the P: drive, in the web directory

13. Your personal web space zhttp://www.msu.edu/~pilotname/index.html zThree steps: yMake your pilot web space public (in advanced features) yCreate a file named index.html yUse FTP to transfer a file named index.html into your web directory

14. Web Design Packages zMicrosoft FrontPage zAdobe GoLive zNetscape Composer zMacromedia DreamWeaver

15. Netscape Composer zNetscape Composer allows WYSIWYG (what-you-see-is-what-you-get) editing of web pages zControls similar to Microsoft word – font formatting, colors, etc.

16. Macromedia Dreamweaver zExcellent Site Building Tool zAllows organization of files, ftp, and WYSIWYG editing all-in-one zPrincipal program we will use in class zCreate page, then go to Site | Put and it transfers it for you!

17. Dreamweaver zYou can download a trial version of Macromedia Dreamweaver by going to: zhttp://www.macromedia.com/software/dreamweaver/trial/ zExpires in 30 days

18. HTML Advanced zNeoTrace zHyperlinks and WWW zAdvanced HTML Formatting

19. Where is a Domain Server? zDomain www.microsoft.com is on a server owned by Microsoft. But where is the server? zHow does your computer contact that server?

20. NeoTrace zNeoTrace is a shareware program that allows you to watch the “hops” and “stops” in a search for a web document

21. What is a Hyperlink? zHyperlinks (also called “links”) are references in an HTML file that allow a user to connect to a different URL zHyperlinks are the magic behind the WWW - they transport you to a different world zMichigan State UniversityMichigan State University zYou may link to any page you wish!

22. Hyperlinks in HTML Code Text for link

23. Hyperlinks in Action Welcome to Lyman Briggs School. Lyman Briggs School is a residential science program. What it will look like: Welcome to Lyman Briggs School. Lyman Briggs School is a residential science program.

24. Local Hyperlinks zIf you are linking to a file in your directory, you do not need the entire URL. Personal Statement zYou may also link to a location within the page (link to a “target”) zDone

25. Inserting a Link in Macromedia Dreamweaver Highlight Text Go to Link part of properties box (may need to expand box using lower right arrow) Local : Click on Folder to Right of Link Box and find file -or- Remote: Type in hyperlink – must include http:// e.g. http://www.harvard.edu

26. Question? zHow would you make a three column layout in a web page? zTalk to your neighbor and figure it out

27. Tables in HTML zTables are incredibly difficult to hand code. zWhy? Each cell needs a tag, each row needs a tag, and the outer table needs a tag. zUse Microsoft Word or Netscape Composer to edit tables. I recommend NC. zDone

28. Why Tables? zCONTROL! zTables allow you to control where items appear on pages. zLBS Homepage is all tables (without borders)

29. Inserting Tables in Macromedia DreamWeaver

30. A Word about Frames zFrames are also used to control layout zEach cell is a separate window zFrames are BAD! because they are user- UN-friendly

31. Graphics zQuestion: How does a web page include graphics? zAre the graphics included in the HTML file or separate files?

32. Graphics: JPGs zJPG (JPEG) is a file format standing for Joint Photographic Experts Group zUse.jpg ending on files zJPGs are the best format for color photos and high-color images on the web zScanned photos should be saved as JPGs zPhotoshop, SuperPaint or other image editor is good for editing JPGs

33. Graphics: GIFs zGIF stands for Graphic Image Format z.gif ending on GIF files zGIFs are perfect for graphical images with only a few colors (e.g. text headers) zVery bad for photographs zPhotoshop, SuperPaint, PowerPoint and others good for GIFs

34. Graphics in HTML z zCan include size parameters y zNote: No closing tag!