Basic Web Publishing BA209 Arturo Perez-Reyes

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

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

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

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

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;

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

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

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

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

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

Common tags TEXT TEXT TEXT makes it blink TEXT TEXT centers TEXT

Common links Check out my resume Mail me!

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 “ you’d go there Use relative links for local files; absolute for external Mail me! One space in tag. Initiates an to you from them.

Go get an image Save it to the your test directory Memorize the exact title. Is it GIF or JPG? Type it into tag:

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

And displays like this

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

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

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

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

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

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

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

Now get a sample resume Use Netscape Communicator to go to 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

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

Try some Javascript <INPUT TYPE=BUTTON VALUE="Click me" onClick="alert(‘Your text goes here')"> See the example in action and get more at

Helpful resources A brief guide to the code An excellent place to see it in action My list of resources and help files

The End