Session 2

WWW WORKSHOP

SESSION 2
TEXT STRUCTURES & FILE TRANSFER

Text Styles
Lists
Links
File Transfer
Exercise

Text Styles

The user has control over various aspects of text appearance, notably headings, font size and style, and colour. To experiment with these, open this document using composer:

Click on the link
Go to the file menu.
Select "edit"

Headings

There are six heading styles: H1 to H6, in decreasing order of importance. A level 4 heading is about the same size as normal text. To try these out:

Point the cursor at any word
Go to the heading menu at the bottom left of the tool bars (usually marked "Normal").
Select a variety of heading styles and observe results.

Notice that with headings, the entire text in the current paragraph changes since the entire paragraph surrounding the position of the cursor is made into a heading.

Font Size, Style and Colour

You can experiment with font sizes and styles using the menus immediately to the right of the heading menu. This time, however, it is necessary to select a particular piece of text. This is the only text affected by subsequent changes of font, style, colour or weight.

Exercise

Try to make the word "without" large, helvetica, bold, and red.

Lists

HTML provides three kinds of list:

Click on the links to see examples of each kind. Ordered and unordered lists are easily created as follows:

Put a carriage return at the end of each list item.
Select entire list.
Select appropriate list icon. List can be undone by pressing icon a second time.

N.B To insert vertical space between list items, go to the the "insert" menu and select "New Line Break"

The technique for creating description lists is slightly different.

Put a carriage return at the end of each description title and each description text.
Select each description title and mark it as such using heading menu.
Select each description text and mark it as such using heading menu.

Hypertext Links

A link (often called an anchor) is the textual device used within a hypertext to point somwhere else. Each link is associated with two pieces of information, namely

A destination, i.e. where the anchor is pointing. Roughly, there are three classes of place to consider:
1. Somewhere else in the same document as the link. For instance this link points to the contents section of this document.
2. Somewhere in the same directory hierarchy as the link. For instance, this link points to session 1 of this course.
3. Somewhere on an entirely different server, e.g. SearchMalta.com.
Content. This is usually a piece of text or an image. If this is a text item, the display style before and after clicking is determined by the browser. On this browser, such items are blue initially and change colour once selected.
You may wish to find out how to change the appearance and behaviour of links

Inserting Local Links with Composer

Links can be inserted with Composer. Initially, we will try inserting strictly local links links into this document.

Click on the above link. Then, on the file menu, choose "Edit Page". In the browser, go back to this page in order to follow instructions.
The idea will be to create links at the top of the page which will point to numbers further down the document which cannot be seen immediately.
Place the cursor on the number 28.
Create a target: go to the target icon and select a target name (e.g. "twenty-eight").
Now we will create a pointer to that target near the top of the page.
Put the cursor near the top of the page.
Select the "link" icon
Fill in some text content for the link.
Fill in the target by clicking targets in the current page. link option under the insert of Composer.
Fill in the relevant parts of the dialogue box
Click OK
You may wish to edit the page further. When you are happy with it, save it in a local file.
Reload your file in the browser to test the link.

FTP File Transfer

FTP stands for file transfer protocol. This is used for transferring files either from your computer to a server (uploading) or from a server to your computer (downloading). For the time being, you need only worry about uploading your pages to the server. In this case we will attempt to upload the numbers page to the server from your local directory. To perform the transfer we will use the "smartFTP" program.

Locate the smartFTP icon on your desktop and double click it.
Find the local browser icon (a small screen just under the help menu) and click it. Locate the file you want to transfer by opening the appropriate directory from the left window.
In the address field put staff.um.edu.mt/your-usernname.
Fill in the login field with your username.
Fill in the password with your password.
Click on public_html.
Drag the file you want to transfer from the local browser to the server directory window. The file should be transferred there.
Connect your browser to the address
http://staff.um.edu.mt/username/filename
Anyone in the world browsing that address will see that file!

Exercise

The aim of this exercise is to consolidate the skills you have acquired so far by

Creating a home page on the local machine
Transferring it to the server.

Part 1. Creating the Home Page

Create a new directory called "Home" within the "My Documents" directory on your local machine. Call the new file index.html for yourself or your organisation. You should use

Appropriate fonts, colours and weights.
Different sizes of heading.
Different kinds of list. Usually, bullet lists are sufficient but you may wish to use the other types.
Hypertext links from one part of the document to another. A typical use of this, within a single document, is as a table of contents, as seen at the top of this document

You can either start from scratch or use the page as a starting point. If you want to use one of these start as a basis you have to make a local copy first. To do this first browse the page and then use save-as