basic web publishing ba209 arturo perez-reyes. web is a communication protocol the internet is a net...

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 accountftp://haas.berkeley.edu/home/mba99/userID/

View at

HTTP://haas.berkeley.edu/~userID

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

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

<blink> is the same as <BLINK>

It does not recognize returns or tabs

To return you use <p> or <br>

To create spaces, use nbsp;

Basic page

<HTML>

<HEAD>

<TITLE>Descriptive title for each page</TITLE>

</HEAD>

<BODY>

Anything placed here is visible to the world.

</BODY>

</HTML>

Basic tags for BODY

Text

<H1>Your name</H1>

Format

<P> Creates a double space

<BR> Creates a single space

Line

<HR> Creates a line

It should like this

<HTML>

<HEAD>

<TITLE>Descriptive title for each page</TITLE>

</HEAD>

<BODY>

<H1>Your name</H1>

<P>

<HR>

<P>

Some text that about yourself or this page.

</BODY>

</HTML>

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

<B>TEXT</B> TEXT

<I>TEXT</I> TEXT

<U>TEXT</U> TEXT

<STRIKE>TEXT</STRIKE> TEXT

<BLINK>TEXT</BLINK> makes it blink TEXT

<CENTER>TEXT</CENTER> centers TEXT

Common links

<IMG SRC=“your_photo.jpg”>

<A HREF=“resume.html”>Check out my resume </A>

<A HREF="mailto:[email protected]”>Mail me!</A>

Links explained

<IMG SRC=“your_photo.jpg”>

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.

<A HREF=“resume.html”>Check out my resume </A>

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

<A HREF="mailto:[email protected]”>Mail me!</A>

One space in tag. Initiates an e-mail to you from them.

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: <img src=“image.jpg>

http://ftp.sunet.se/pub/pictures/



Code looks like this<HTML>

<HEAD>

<TITLE>Descriptive title</TITLE>

</HEAD>

<BODY>

<H1>Your name</H1>

<P>

<HR>

<img src=”image.gif"><p>

Some text about the image or about you.<p>

<A HREF=“resume.html”>Check out my resume </A><p>

<A HREF="mailto:[email protected]">Mail me!</A>

</BODY>

</HTML>

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 tryYou 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

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

Edit to make it yours

Delete tables by selecting on either side

Beware of center-weighted formats

Update email link

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

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

http://www.haas.berkeley.edu/~perezre/Intersession/

<FORM> <INPUT TYPE=BUTTON VALUE="Click me" onClick="alert(‘Your text goes here')"></FORM>

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

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














The End

basic web publishing ba209 arturo perez-reyes. web is a communication protocol the internet is a net...

Documents