How to build a Website - the easy way (FSoso, 9.08)

What is needed:

1 - Structure the pages and the documents

2 - Get access to a Web Host (server) with enough storage space (1 GB is adequate). This supplies also a Domain name (e.g. www.antikythera-me.co or mtwright.xxprovider.com), and a password to upload a set of documents (see Wool Ball below)

3 - Some program to edit Webpages

4 - Some knowledge of HTML (HyperText Markup Language), the syntax of Web documents. The whole syntax is too complex, and never needed, but a basic understanding helps with simple diagnostics.

I'll discuss briefly points 1-4. A booklet, or some Web pages on the subject, may help as well - see refs - although most go beyond the scope.

 

1 - Structuring data.

The CD gathering M.T. Wright papers is an excellent example. There is :

To transform this structure into a Website is extremely simple :

Papers and documents must be in a format recognised by IE and other Web browsers :

.doc   .pdf   .jpeg (images)   .ppt   .pps (slides)   .avi (videos) etc.

IMPORTANT - like the CD itself, a Website is a self-consistent package. It can be transferred to a CD, to a computer or USB key, to another Web site, without any change.

See it as a Wool-ball : internal parts are tightly threaded, but it can be handled as a whole as long as the internal structure is maintained.

 

2 - Web hosting

Some space for personal Web pages is usually available from the Internet (connection) provider.

When this is not the case (it seems so for virgin.net), there are no-charge providers (apparently not in UK !!) which can provide reasonable performance and space. In this case, however, the domain name is not arbitrary.

It looks like             e-mailname.provider.xx  like for instance   fsoso.free.fr    or   fabio.soso.users.ch

To upload a file tree to a personal Web space an ftp (file transfer protocol) program is useful. I'm happy with Filezilla, in the Portable Software Package.

 

3 - A Web page editor

I don't believe either in editors that pretend to control the whole tree, or in "graphic" editors proposed online. I may change my mind when I'm proved wrong…

The best tool for me is msoft  Frontpage, which is part of some " msoft packages" (I may help with that).
Then search Google for Frontpage Tutorial...

Note that msoft Word allows to compose a document (e.g index) and save it as an HTML document. It is not the worst way.

It's usually easier to have one page with the desired characteristics (background colour, Title and text layout, text fonts…), open it as a template and save it with a different name for modification (same as in Word).


4 - Some knowledge of HTML syntax

A Web page is basically a text page (can be made with Notepad) ending with the extension .htm (or .hml, equivalent). The syntax can be very simple (although some people make it complicate at will and produce Web pages slow to open or which don't work).

The main difference with text editors (Word and the like) is that the tags which alter the appearance of the text are "visible" (quite useful !).

For instance, a phrase in bold will show in Notepad as :

<b> Phrase in bold </b> will then show the phrase in bold

<I> …..</I> in italics

<font colour="red"> words in red </font>

etc.

See references for more details.

 

BOOKS

Probably the simplest book available on the subject, e.g.

HTML, XHTML, and CSS   by Elizabeth Castro (Author).

 

WEB TUTORIALS

Couple of simple tutorials (most of the others are beyond the scope) :

see "Basic HTML commands/tags" (other pages of this site are misleading) in :

http://www.ncsu.edu/cc/edu/html_trng/basic_commands.html#A

Some more explanations (only the first two positions : "Start learning HTML now!" And "Try it yourself") in :

http://www.w3schools.com/html/default.asp

 

 

UNDERSTANDING HTML

NB - What follows is NOT the way in which one usually edits Web pages. It is just an exercise intended to explore HTML grammar. A WYSIWYG editor (What You See IS What You Get), like KompoZer above, is used instead. But some knowledge of HTML allows to understand what may be wrong - Wish the same were possible with Word & alike.

Intro

The simplest HTML document, e.g. newpage1.htm, may look like this :

<html>
<head>
 
<title>My first Web page</title>
 
</head>

<body>

Blah blah blah

</body>
</html>

 
Explanation : <html> defines the document as one using the HTML syntax

The <head> area defines some characteristics of the document (nothing appears to the reader) -- <head> or <HEAD> is the same; tags are not case sensitive.

<title> is the name which appears in the upper banner of the Browser window.

<body> opens the text area

</body> </html> mark the end of the document.

NB Each <tag> is followed by the </tag> end of tag mark, when its scope is over.

Let's try it

(1) Example 1 Launch notepad.exe (right click on Desktop and chose New Text Document) and type in :

<html>
<head>
<title>My first Web page</title>
</head>
<body>
Any text, like :
The device is displayed in the Bronze Collection of the National Archaeological Museum of Athens, accompanied by a reconstruction made and offered to the museum by Derek de Solla Price. Other reconstructions are on display at the American Computer Museum in Bozeman, Montana and the Children's Museum of Manhattan in New York.
 
</body>
</html>

Save it (on the Desktop or in a new folder for HTML trials) as MyPage1.htm -- or save it as .txt and then rename the extension to .htm

 

(2) Click on the icon MyPage1.htm => look at it with IExplorer or any other Browser.

In the IExplorer top menu chose View => Source.

A Notepad window opens, showing the text typed in (1).

 

(3) Modify the text in the Notepad window, in order to experiment different tags (see examples here below). After each change :

a) Notepad => Edit => Save

b) IE window => View => Refresh

to see how the Web page changes.

Repeat sequence a) + b) to see the results of each modification, until you feel at ease with the mechanism.

NOTE see below some Examples of simple changes : text in red are comments, not to be typed in…

 

(4) Any moment, MyPage1.htm can be saved as MyPage2.htm (IE Save As menu - verify that it is saved in the same location as Page1) - to preserve interesting results.

To modify MyPage2.htm, repeat steps from (2) onwards.

 

Example 2

<html>
<head>
<title>My first Web page</title>
</head>

<body>

<p>The device is displayed in the Bronze Collection of the National Archaeological Museum of Athens, accompanied by a reconstruction made and offered to the museum by Derek de Solla Price. </p>

<p>Other reconstructions are on display at the American Computer Museum in Bozeman, Montana and the Children's Museum of Manhattan in New York. </p>

 <--! This text is a comment : <p> is the tag for "paragraph"; note that a blank line is displayed between teo paragraphs by the IE browser; for this tag, the end </p> is not mandatory  -->

</body>
</html>

Example 3

<html>
<head>
<title>My first Web page</title>
</head>

<body>

<b>  <p>  The device is displayed in the Bronze Collection of the National Archaeological Museum of Athens, accompanied by a reconstruction made and offered to the museum by Derek de Solla Price. </p></b>

<p>Other reconstructions are on display at the American Computer Museum in Bozeman, Montana and the Children's Museum of Manhattan in New York. </p>

 <--! This text is a comment : <b> is the tag for "bold" -->

</body>
</html>

 

Example 4

<html>
<head>
<title>My first Web page</title>
</head>

<body>
<H1 align="center">Antikythera mechanism</H1>                     <!-- <H1> is the tag Header1 -->

<p>The device is displayed in the Bronze Collection of the National Archaeological Museum of Athens, accompanied by a reconstruction made and offered to the museum by Derek de Solla Price. </p>

<p>Other reconstructions are on display at the American Computer Museum in Bozeman, Montana and the Children's Museum of Manhattan in New York. </p>

</body>
</html>

 

Example 5

<html>
<head>
<title>My first Web page</title>
</head>

<body bgcolor="navy" text="white" >                <!-- Changing background and text colours -->

<H1 align="center"> Title of document</H1>     
</p>
<p>…</p>
<p>Another phrase, and yet another phrase.</p>

</body>
</html>

 

Example 6

<html>
<head>
<title>My first Web page</title>
</head>

<body bgcolor="navy" text="white" leftMargin="80" rightMargin="80" topmargin="30" >            
<--! Changing margins, here expressed in pixels -->

<H1 align="center"> Title of document</H1> </p>

<p>…</p>
<p>Another phrase, and yet another phrase.</p>

</body>
</html>

 

(5) At this point, one can insert in the Body area a longer text (copy/paste any document) and see the result.

(6) Further, open with Microsoft Word a document e.g. what_is on_this_CD.doc, and Save As => HTML document.
(if Word does not provide this feature, use OpenOffice Writer in the Portable Soft, to do the same)

Click on what_is on_this_CD.htm and see it with IE.

Have a look at the source (Wiew=>Source). See that, apart from couple of META tags in the Header and the hyperlinks at the bottom of the page (to be discussed later), the Body tags look familiar.

 

IN SUMMARY

Have a domain name, a provider (with an  ftp access and password) with sufficient volume, a Web editor (e.g. Word), an ftp tool (portable FileZilla is the best), and structure your site (like when you need to organize data on your computer  or in a CD).

Avoid current errors :

1st  - people spend a lot of time building their "Home" page, with colours, animations and the like, rather than taking care of the overall clearness and consistency (and keeping the site updated). Be simple, don't waste time on the details in the beginning.

2nd - Keep the whole site in a consistent directory of your computer* - file transfer between this directory and the internet server is done only via ftp. Organize docs in an easy-to-remember structure.
[* you can check that all your links are correct WITHIN this folder, even before before uploading them]

3rd - Before goiing too far, try to make a very simple Home page, upload it and check that you see it by Internet Explorer (ar another web browser).