DEPARTMENT OF MECHANICAL ENGINEERING

UNIVERSITY OF BATH

IT PACKAGES                                                                   ME20261

HTML and Dreamweaver – creating your own web pages

 

What is HTML ?

HTML is HyperText Markup Language, which is a collection of platform-independent styles, indicated by markup tags, that define the components of a World Wide Web document. HTML was invented by Tim Berners-Lee when at CERN, Geneva. He was knighted in the New Year’s Honours list.

An HTML document is a plain text (ASCII) file that can be created using a text editor such as Notepad, available on your Windows-based PC.

 

What are Dreamweaver 4 and FrontPage? (You will use Dreamweaver 4, Front page not currently available)

Dreamweaver 4 is a Macromedia package and FrontPage is a Microsoft package which are used to create, edit and view pages using a WYSIWYG (What You See Is What You Get) interface similar to word processing programs such as Word. All text, styles and page formatting are based on HTML standards and the HTML text may be viewed. Indeed, if you right click on any web page and View Source you can inspect the HTML text.

 

Getting started – creating a University of Bath personal home page

You need to create a personal home page as a base for the web pages that you create.

Click on Start button at bottom left of screen and then Run immediately above.

A window appears. Type in telnet midge and click OK.

Enter your username and password when prompted.

At the midge $ prompt type mkhome and return.

At the midge $ prompt type telnet midge and return.

You will then be asked several questions about your status. Provide the answers, which usually correspond to default entries. mkhome then creates a simple home page based on this information.

The home page should then appear on your screen. The home page is the parent directory for any web pages you may wish to create. You need to provide a link from the home page to a folder held within the H drive which will allow your web pages to be accessed. See information below.

You can recreate or alter your home page by running mkhome again.

 

Accessing and editing your personal home page and create a folder for web pages

Your home page is available at the folder: H:\dos\public_html\

You can access the file by selecting the H drive and clicking on public_html.

Externally, it will be accessible to anyone at the address: http://students.bath.ac.uk/user/

(otherwise known as a URI or Uniform Resource Identifier) where user is your username.

As a depository for all of the web pages that you are going to create you need to open public_html and create a folder. Call it something like My Stuff (or Index or Documents). You can create a link between your home page and this folder where you can save your web pages. This is achieved by creating a link like the University of Bath link at the bottom of your home page. You need to insert a line of HTML code into your home page below your postal address.

Open the software package FrontPage (Start, Programs, Microsoft FrontPage) (sorry not available this year).

Click on File and Open and a window opens. Look in H:public-html. Click on the icon labelled home. Select HTML on the middle tab at the bottom. You will now see the HTML code for your web page. Scroll down to the end of the code for your address to just below </address></dd>.

Now insert the following line of code (all on one line):

<dt>External Home Page: </dt> <dd><a href="http://students.bath.ac.uk/~username/My Stuff/">http://students.bath.ac.uk/~ username/My Stuff</a></dd>

A simpler, alternative line of code is:

<p><a href="http://students.bath.ac.uk/username/doc">My Stuff</a></p>

This line should be followed on the next line by: </dl>

Finally click on Save As and select H:public_html. 

You should then have a link to My Stuff on your home page.

 

Creating a very basic HTML document via Notepad

We're now going back to basics and creating a web page (HTML document) using HTML code.

Click on Start, then Programs, then Accessories, then Notepad.

You can now produce an HTML document using HTML tags such as <body> or <P>. Each document comprises head and body text. The head contains the title and the body contains the main text which is composed of headings, paragraphs, lists, tables, images, hypertext links and so on.

Try typing the following example or something similar into Notepad:

<html>

<head>

<TITLE>HTML for Sports Technologists</TITLE>

</head>

<body>

<H1>Writing web pages is fun especially if you are sporty</H1>

<P>This is the first paragraph.</P>

<P>This is paragraph number two.</P>

<A HREF="http://www.google.com">Google</A>

</body>

</html>

OK, when you’ve done that got to File and Save As. At the top of the window in the Save In box select your H drive and the folder public_html/My Stuff. Now this bit is important! The File name should end in .html and the Save as type should be All files.

You can then open the document from your My Stuff file and it should look something like this:

 

Writing web pages is fun especially if you are sporty

This is the first paragraph.

This is paragraph number two.

Google

 

Clicking on Google should open up the Google front page.

Now you can get some practice composing your own web pages using HTML and you should use the NCSA Beginner's Guide to HTML for inspiration. The web page explains the function of Markup tags. The web reference is given below together with two other useful sources for HTML.

 

HTML references

NCSA Beginner's Guide to HTML:

http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

Webmonkey – The Web Developer’s Resource:   http://hotwired.lycos.com/webmonkey/

Devguru Home Page:   http://www.devguru.com/

University of Bath references for making your home page

Making a new contact details home page:   http://internal.bath.ac.uk/eng-app-sci/it/php.html

Making a Personal Home Page with mkhome:    http://www.bath.ac.uk/web/info/mkhome/

Saving Word documents to your web page

If you want to save a Word document onto the web go to File, Save as HTML and direct it to your H:public_html/My Stuff folder.

 

 

Using  Dreamweaver to create web pages (current web page package available in PC room)

Dreamweaver is not "installed" on the lab and library PCs as such. It is on the BUCS terminal servers. You can connect to a terminal server from anywhere on campus.

 

With windows XP just go to:

 

Start->Programs->Accessories->Communications->Remote Desktop Connections and enter:

 

terms

 

as the computer name. After a few seconds a remote desktop will pop up showing the standard windows logon screen.

Just logon using your normal BUCS credentials (make sure the domain name is set to "campus" - you may need to click on the Options button to check this).

You now have an open session on the terminal server.

Just go to the Start->Programs menu and start up Macromedia Dreamweaver.

 

Your H: drive and My Documents folder will be mapped so you can access your documents and save any new ones.

When you have finished just start_>logoff. If you want access to your own PCs desktop then you can minimise the remote desktop in the usual windows way.

 

 

Using FrontPage to create web pages (not available this year)

Instructions are available at many sites on the web, for example:

http://bullpup.lib.unca.edu/library/workgroups/webteam/fp2kintro.html (solid introduction with a list of other links included).

http://studentweb.austincollege.edu/guides/frontpage.htm (very simple introduction)

http://freesitetemplates.com/templates/videos/frontpage2000/ (see animated Viewlets)

To save your FrontPage-generated web pages go to File, then Save In box and select your H drive and the folder public_html/My Stuff and Save.

 

Happy page-making!

 

Dr Martin Ansell

12th February 2005