1. Basic Web Publishing BA209 Arturo Perez-Reyes

2. Web is a communication protocol The Internet is A net of nets That use the TCP/IP protocol To publish on it, you need A server that runs the HTTP protocol A folder that has been de-cloaked HTML text files as well as media like images Some way to move files: drag and drop or FTP

3. Publishing to a UNIX server Set privileges for web directory chmod -R 755 public_HTML Create server shortcut to homepage chmod 711 ~yourID Then FTP upload all files to shell account ftp://haas.berkeley.edu/home/mba99/userID/ View at HTTP://haas.berkeley.edu/~userID

4. Publishing to our NT server Privileges and shortcuts already set by staff Save files from desktop to your “I” drive I:\yourID\file.html View at HTTP://web.haas.berkeley.edu/www/yourID

5. Help on the desktop Your desktop already has shortcuts to Your Web directory on “I” A sample homepage on “I” You can Modify the existing file with Composer Or write over the sample with better First let’s learn to code

6. HTML is just text You can create and edit it with Notepad or save as “text” in WP It is case insensitive is the same as It does not recognize returns or tabs To return you use or To create spaces, use nbsp;

7. Basic page Descriptive title for each page Anything placed here is visible to the world.

8. Basic tags for BODY Text Your name Format Creates a double space Creates a single space Line Creates a line

9. It should like this Descriptive title for each page Your name Some text that about yourself or this page.

10. Save it In your “I” drive, create a folder called test Save the file to I:\yourID\test\ Call it index.htm View it with a browser

11. It should look like If not, then Reload or Refresh the browser

12. Common tags TEXT TEXT TEXT makes it blink TEXT TEXT centers TEXT

13. Common links Check out my resume Mail me!

14. Links explained Note the space between IMG and SRC. It’s the only one. The filename has no path, so it must be in the same folder. Check out my resume Ditto. Only one space in tag. Text can be anything. If filename was “http://www.yahoo.com”, you’d go there Use relative links for local files; absolute for external Mail me! One space in tag. Initiates an e-mail to you from them.

15. Go get an image HTTP://ftp.sunet.se/pub/pictures/ Save it to the your test directory Memorize the exact title. Is it GIF or JPG? Type it into tag:

16. Code looks like this Descriptive title Your name Some text about the image or about you. Check out my resume Mail me!

17. And displays like this

18. Beautify with an editor View your page in Netscape Navigator Go to the File menu Select Edit Page You are now in Netscape Composer The interface is WYSIWYG Save to your test directory

19. Using Composer Inserts picture Line Table Inserts internal anchor Inserts hyperlink Use Save, not Publish on NT Just like a word processor

20. Format image and name Put cursor near top of page Insert a Table from Composer toolbar In dialog box, set to one row and two columns Now drag and drop your photo into one cell Copy and paste the your name in to the other Save the file and then Preview it in a browser Don’t like border? Change with Format/Table

21. Change your color scheme Go to the Format menu Choose Page properties Pick a ready-made scheme Or create your own Try a background image

22. Things to try You can alter border thickness or turn off You can change the alignment of text You can define the width of a table in pixels or percentages Tables & cells can have background images

23. Now visit Haas-made page Open in Netscape, either I:\yourID\index.htm http://web.haas.berkeley.edu/www/yourID/ Examine the alternatives and chose The staff has produced six different schemes View the most promising with Composer

24. Edit to make it yours Delete tables by selecting on either side Beware of center- weighted formats Update email link

25. Now get a sample resume Use Netscape Communicator to go to http://haas.berkeley.edu/~perezre/Resume.html Now steal the code Go to File menu Select Edit Page Change some text and then view Save to your test directory with same name as in your HTML code: index.htm

26. Alternatives for resume Start from scratch with the Word web wizard Change a Word or WordPerfect file From File menu, Save as HTML The resulting file will have too many spaces Edit it with Composer or Frontpage You’ll have better results importing the file Start MS Frontpage Open the document, edit, and save

27. Try some Javascript http://www.haas.berkeley.edu/~perezre/Intersession/ <INPUT TYPE=BUTTON VALUE="Click me" onClick="alert(‘Your text goes here')"> See the example in action and get more at

28. Helpful resources A brief guide to the code An excellent place to see it in action http://www.mountaindragon.com/html/ http://www.werbach.com/barebones/ http://haas.berkeley.edu/~perezre/How_To.html My list of resources and help files

29. The End