** AhISee **   INTRODUCTIONS > Web A3  |<|Up|?|Menu|Search/Map|Translate|>| 
 

How to create your first web page: Part 3

Part 3 of this series introduces Style Sheets - what they are, what they are for, and why you should use them. Then we show you how to put a page up on the Internet for others to see, and change it when it becomes necessary.

[TOP]

 

Outline for Part 3:

 

[TOP]

Introduction to Stylesheets

Stylesheets are a recent addition to and extension of HTML. You'll remember that I said that HTML was conceived to specify the structure of the document. It was invented to meet the needs of scientists who needed to collaborate on complex technical projects, not to emulate the appearance of magazine pages.

However, making pages look good is a perfectly valid concern (!) and as the Internet became better known and more widely available – well, let's be honest, it was commercialized – graphic designers began a battle with the limitations of the medium that continues to this day. As a result of the need for controlling presentation, presentational and formatting tags were added to the original specification. This eventually led to a complete mess – in part, because the two main browser suppliers supported different features and tags, and not necessarily each other's same features and tags, and each added new features at whim.

The presentational and formatting tags are still available, and supported by most browsers now – but they are deprecated by the controlling standards body on the whole, because the style sheet has been introduced to (maybe!) solve the whole presentational problem. 'Deprecated' means that later versions of HTML will drop these tags, so you might as well learn how to do it right straight away! There is a catch – isn't there always? Not all browsers support style sheets properly. However, 'version 4' or better of all current common browsers supports at least some style sheet features, and that describes most of the browsers in use at the date of writing this. Support will increase, not diminish, in the near future.

[TOP]

The new way of controlling style

What is a style sheet? The general idea is this:

  1. A style sheet modifies the way the browser 'paints' a web page by way of a set of presentational rules

  2. These rules can either modify the particular effects produced by the standard tags, or you can specify your own new rules to apply to parts of your document.

 

This means that if you want all your heading 2 text to be in a particular font, and a particular color, you only need to specify the rule once – and every time the heading 2 tag is used, the browser will apply the rule and use that font and color.

This is much better than the old way of specifying font and color separately for every single instance of the heading. Moreover, because the rule is specified once in one place for all instances of the tag, graceful degradation can easily be arranged. What this means is that you can put an alternate specification for, say, the font to be used, so if the preferred font is not available on the user's machine, a second best choice can be used, and if that fails as well, then a last resort font can be used.

In this way you can get the best possible approximation to your intended appearance on whatever machine is displaying your web page. It does not mean that you have the same control over the web page that you would have over a printed page – that's simply not feasible (or even desirable, in my opinion – if you want paper, buy a magazine, I often do! Don't expect it to have interactive email forms :).

[TOP]

Types of style sheet

There are three different ways that style sheets can be used. These are:

  1. In-line style statements. These are applied within a single tag in a document as an attribute to modify its style [NOTE 1] . They replace the individual formatting and presentational tags, but don't bring the advantages of central control that are possible, so are best used only when there's no other option.

  2. Embedded style blocks. These are placed within the <head> and </head> tags of an individual web page. This is the basic way of styling a single page.

  3. Separate external style sheets linked to your document by a link, in the document head. The great advantage of this approach is that you can have a single style sheet that is linked to every page on your website. To change the appearance of the whole web site, just change the one style sheet!

 

I'm concentrating on you writing a single page here, so we'll look at embedded style blocks; have a look at the web site creation article for more details of linked style sheets.

[TOP]

Embedded style blocks

What does an embedded style section look like? Here's one:

<style type="text/css">
body { color: navy; font-family: Verdana; Arial; sans-serif; }
h2 { font-family: Tahoma; Arial; sans-serif;} </style>

 

Remember that this is inserted in the head of the HTML document, after the <head>

tag and before the </head>. I usually put it right at the end. Here you can see that a new pair of tags are used, <style> and a matching </style>. The opening <style> tag has the attribute 'type=”text/css”'. This is necessary to conform to standards. We've told the browser that the type of style sheet we're using is using the language 'text Cascading Style Sheets'. Other languages are possible, so this is a necessary step – though you'll find that, at the moment, it'll usually work without this (at least in Internet Explorer).

In between the <style> tags are the style selectors and their associated style rules which are within the curly brackets {…}.

The selector here is the tag name. For example, there is an HTML tag, <body>. In the style sheet, the selector body is associated with a set of style rules that state that anything within the body tags will be:

 

You'll notice that the color is specified by name. This is an improvement over the hexadecimal system described earlier for most normal individuals who can't count in hex, but don't get too excited – only a limited range of colors have been named. Still, it's a start :).

Next there is a selector for the heading 2 tag. This specifies that anything within the <h2> tags will be:

 

Well, that's it – a simple style sheet!


Go to your test document, and either type this in to the header or copy and paste it in. Then, refresh the browser view – and see the changed document. In the HTML view, the document head should now look rather like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Test Page</title>
<meta name="GENERATOR" content="Arachnophilia 4.0" >
<meta name="FORMATTER" content= "Arachnophilia 4.0" >
<style type="text/css">
body { color: navy; font-family: Verdana; Arial; sans-serif; }
h2 { font-family: Tahoma; Arial; sans-serif;}
</style>
</head>

Notice that in the browser view the headings as well as the body text are 'painted' in navy blue. That's because the headings are (if you note!) within the body of the document, and we've issues instructions that text within the body of the document should be navy blue. The headings inherit this setting from the body, unless anything is done to change that. In this way, it is not necessary to specify every single little detail of an HTML document.

[TOP]

Setting Margins

Let's set a margin – that always makes a page look smarter. Type in some extra rules in the style sheet body rules {…} section, so it looks like this (additional text emphasised):
body { color: navy; font-family: Verdana; Arial; sans-serif; margin-left: 10%; margin-right: 10%; }

Refresh your browser, and you now have a margin of 10% of the total page width on each side. Easy, isn't it? So what should we have after this? The beginning of your HTML document should look pretty much like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Test Page</title>
<meta name="GENERATOR" content="Arachnophilia 4.0" >
<meta name="FORMATTER" content= "Arachnophilia 4.0" >
<style type="text/css">
body { color: navy; font-family: Verdana; Arial; sans-serif; margin-left: 10%; margin-right: 10%; }
h2 { font-family: Tahoma; Arial; sans-serif;}
</style>
</head>

– the appearance of the rest of the page will depend on what you typed in.

That's as far as we're going with style sheets for now, because this should have given you the general idea. Experiment for yourself – check the links section for more information.

[TOP]

Summary – Style sheets

[TOP]

Publishing your web pages to the Internet

To publish your web pages to the Internet, you first need somewhere to put them. This is not obvious to everyone – if you haven't got some web space, go and get some and then come back! Assuming that you do have some space, you'll find that publishing web pages is harder and more technical than what we've done so far. It's not so hard that you can't master it, though.

[TOP]

Preparing for publishing

Let us start out with some preparatory moves. Earlier, we created a test HTML page with an image. At that time, you saved the page and (if you followed my advice) allowed Arachnophilia to copy the image to the same directory as the HTML page. You also set up a directory/folder on your computer in the C drive just for web page use – if you followed my advice! If you didn't do all this, then do it now, and ensure that the files in the folder are named with lower-case letters only, with no spaces or punctuation in the names. Now, I presume that you will not want to use the test page we developed earlier as your main web page on the Internet! So you might like to set up a suitable page to use for this – a home page. However, before doing that, if you are (as I suppose) new to all this, please have a quick look at this traffic advice   Open in popup window

There are many different ways you can go around making a home page. If you're not too good at design you'll find there are several home page creators available around the Internet – do a search. There's also an instant home-page-creator on Arachnophilia's web site. But if you want to understand what you are doing, you'd do better to design a simple one for yourself in Arachnophilia. Just set up a basic page with (perhaps) the following information on it:

 

Doing this will be a useful exercise in what can go wrong when you try to put a web page together. Don't be put off by this – each time you do another one it'll gets easier, until eventually you'll wonder what all the fuss was about!

When you have finished, save it in the folder/directory you created, and call it 'index.html' – unless your web space provider has given you different instructions. Some other options are default.html or welcome.html – but index.html usually works. Once you are happy with it, open the page from your hard disk using your browser's 'file – open' option and check it's still all OK.

As I mentioned earlier, most web space is provided on Unix-based server computers. Even if the web space is on a different type of machine, the predominance of Unix means that the methods you will need to use are the Unix type methods – they're standard. This means that you will need to transfer your web pages to the server computer by using FTP – Unix's File Transfer Protocol. This is somewhat dated, and was intended for use by people who worked daily with Unix machines. However, if you are using Arachnophilia as suggested, you're not going to have to get your toes very wet – because Arachnophilia can do it all for you! It has a built-in FTP function to 'Update your web site' which works rather well. But for it to work for you, you need to understand a bit about FTP.

[TOP]

FTP Modes

The main single thing that catches people out with FTP is that there are two modes of operation for file transfer. These two modes are:

The reason for the existence of these two modes is historical. However, the significance of them is this: binary mode was for transferring, originally, program code that can contain any character value representing an instruction. It is also used for any other file that may contain non-alphanumeric characters; for example, graphics files. ASCII mode was for transferring text files that do not contain any values outside the ASCII character set.{noteAscii}

So: transfer HTML files – which are text (you can sort-of read them) – using ASCII mode. Transfer any non-text file – like your graphics (you can't read them) – using binary mode. If you don't do this, your files may be converted into a mangled and meaningless mess. But as long as you use the standard conventions for file name extensions (the bit after the dot – .gif, for example, or .html), Arachnophilia will automatically choose the right mode for you when it updates your site. If it doesn't work right – check that your file name extensions are sensible. By this I mean that all your filename extensions should appear in this list:

html,htm,shtml,asp,stm,idc,htx,ssi,cfm,hts,css ; HTML files
txt,text,doc,bat,log,tbd ; text files
cgi ; CGI script files
pl,perl,pm ; Perl scripts
mid,rmi,wav,ra,ram ; sound files
gif,jpg,jpeg,png ; graphic files
url ; URL files
rtf ; RTF files
cpp,c,cc,h ; C and C++ source files
java,js ; Java/JavaScript source files

This is the list of file extensions from Arachnophilia. It knows about these, and so will transfer them using the correct mode. If you want to transfer something not in this list you will probably have a problem: see the Arachnophilia documentation for ways to deal with this (such as, adding them to the list shown above). If you use other FTP programs, sometimes you have to tell them what mode to use. Follow my advice on modes above, and you'll be OK. Some others use a list - like the one shown above - to figure out automatically what mode to choose for a file.

[TOP]

Setting up for FTP

To use any FTP program you are going to have to tell it how to reach your web space. The web space provider will have given you details for this: find them and have them available for this next task. I'll walk you through this process for Arachnophilia: it's almost exactly the same for most FTP programs. In Arachnophilia, select the 'Tools' menu item, and then 'Update Web Site'. A dialogue box will pop up. It has an example entry for you to see how they are set up. You will need to make a new entry. Using the data you have for your web space, you should fill in the dialog as follows:

  1. Select

    : pull down on the arrow and choose an empty slot (shown by a '-'). Select this.

  2. Site Name

    : This is a name you type in for your own reference. Call it 'My web space' or whatever you like.

  3. Server Name

    : this is the FTP name that you need to use to find the FTP access to your server. It very often will be the ISP's name with FTP in front: ftp.ispcompany.net - or something like this. Type in the name you have been given.

  4. User Name

    : this is your user account name. Type in the name you selected or have been given.

  5. Remote Directory

    : this is the FTP directory on the web server. With many accounts you will leave this blank; if in the data you have been given an FTP directory to type in, enter it here.

  6. Local Directory

    : select the directory that you set up earlier - the one I suggested that you called 'webpages' on your C drive. You can select 'include subdirectories' if you like - this will be needed later, if not right now.

  7. Password:

    Type in the password you have been assigned (or have chosen) for access to your account. Tick the 'save password' to avoid having to type it in every time.


Once you have filled in the form, click on the button marked 'Save and Exit'. Don't worry if you have made any mistakes. Now, select the same menu item. The dialogue box will appear again, this time with your data in it. If not, select the Site name you chose earlier. Check the information. If there any errors, correct them, save and exit again, and repeat until everything is correct.

[TOP]

Controlling which files are updated

Now you are almost ready to upload your pages. There is one other feature of the 'Upload Web Site' dialogue box you need to know about: the 'update method'. For now, just select 'Upload all files'. This is the best choice the first time you upload your site. But later on, you will only want to update files you have changed. We'll go into this very soon.

[TOP]

Updating your site

Right - nearly ready. If your Home Page is all set up and ready to go, then connect to the Internet. The easy way to do this is to connect to your ISP, either with your browser or by collecting email. Once on-line, then select 'Update web site' from Arachnophilia's menu and (after checking the details again) click the 'update site' button. If everything goes well, then you will see a progress bar showing the file upload taking place, and finally a report on what was uploaded. In your browser, go to your website address - whatever your ISP told you to use. If everything works OK, then you'll see your Home Page in all its gory details. If not - click on the 'Refresh' or 'Reload' button on your browser to refresh the cache (always do this after changing any of your web pages, or you'll probably still see the old versions from the browser cache). OK? Then log off. If not, you're going to have an interesting time finding out what went wrong. You should be able to identify in which part of the task the problem arose. The usual difficulties are:


If none of this works:


Contacting your ISP may be a first or last resort for you, depending on whether you have a free or paid account. With free accounts you often have to pay for technical support. Another alternative is to check the next section on using FTP software, so that you can see what has happened on your web space.

[TOP]

Correcting errors, making changes

It is almost inevitable that once you've put your web page up you'll see all sorts of errors in it that you hadn't noticed before. If not - well, congratulations, but it'll happen sometime. Even if you have no errors, you'll probably want to change things from time to time. The FTP client in Arachnophilia is designed for the job of making a duplicate copy of a model web site you've constructed in a folder/directory on your computer. It duplicates this structure by uploading it all to your web space, but it also handles updates and alteration to files quite nicely. So, when you see an error, fire up your HTML editor and make the changes that your page needs on your local copy of the page. Test it thoroughly on your computer to make sure that it works OK this time, and that you haven't introduced new errors while correcting the old ones. Yes, I have myself 'been there, done that'! 

Now you have to run the update to replace the old, faulty files on the web space with nice new shiny working ones from the copy of the site on your computer. Of course, you have to tell Arachnophilia what files to change. How is this done? You have two choices: you can either select 'Age method' or 'Archive method'. If you are not at all technical and want to know what's happening, I recommend you try 'Age method' - Arachnophilia will transfer a file to your site if the copy of the file on your computer has been changed recently. You set the time difference used to decide what 'recently' is, according to your needs, in the text box just under 'Age method'. If you set this to 2 hours - '2:00' - then any file altered within the last 2 hours will be uploaded to your web site, replacing any file with the same name that is already there. If you are more technical and know what an 'archive bit' is, then you can choose that method - you won't in that case need me to explain it. Or you can just leave it alone, and let it use the default, which is the archive bit method. See Arachnophilia Help for the Site Upload tool for more details. 

To actually change the files, first specify the file update method as discussed just above in the Web Site Update dialog box, reached from 'Tools-Web Site Update'. Make sure that 'Update Method-Upload all files' is not selected, unless that's what you really want to do. Select the update method you want to use, 'age method' or 'archive method'. Make sure that the age is set in the box just below 'age method', and that it includes the files that you've recently changed and excludes ones that you haven't. When everything is as you want it, connect to the Internet as usual, with your browser or email client, and when logged on, click on the 'Update Site' button. If all is well, you'll see the progress bar appear as usual, and at the end you'll get a report on what has changed. Use the usual resources if it all goes awry - Help file, web sites and so on. Get used to checking all these resources - usually whatever happens to you will have happened to someone else before and they'll have written a long complaint about it, together with a solution!

Using FTP programs to view files, delete files and alter your site

One thing that Arachnophilia can't do is to delete files on your web space when you don't want or use them any more, or show you what is there and where it is. To do this you need some FTP software. There are various choices, as usual, but I've selected a program called FTP Explorer. It's free to individual users - if you are a company you have to pay for it. Go and download a copy at:

http://www.ftpx.com

Install it as usual. Next, you need to set up the details for the FTP transfers, just as with Arachnophilia. The only major differences are that it calls the details for a site the 'profile' and there are a couple of extra boxes:


Incidentally, if your ISP has told you to use a port other than '21' then that'll mean Arachnophilia's update tool won't work: nor will many other FTP programs. Now, add the profile using the 'Add' button, 'Save' the details and then connect to the Internet as usual. Once connected, select your FTP profile and 'Connect' to your site. You should see the index.html file you uploaded earlier, any graphics files you uploaded, and indeed anything else you included in your 'webpages' directory. You can select any of these files and delete them if you wish, but be careful! Your ISP may well have put some other files in your web space. Don't delete these without checking that that's OK - some of them may be important for the functioning of your site. Only delete files you have uploaded, as a rule. 

If you cannot connect with FTP explorer and have the same problem with Arachnophilia - and if you've only just set up your web space - try waiting 24 hours, before trying again. I've found that sometimes (depending on your location) it can take some time before you can actually access your space. But if it still doesn't work after a day, there's something wrong with the FTP details that you have, or that you have entered into the programs. 

Well - that's it, then. A quick introduction? A little over 12,000 words, in fact - but there was a lot to cover. The material presented here should be enough to get you going. There's much more to learn, but also many places you can find the info. Check the links section for some suggestions - after we run one final summary. And I wish you - Good luck with your web page writing!

[TOP]

Summary - Publishing your pages

[TOP]

Notes on Links

I've made various links available to different resources. I've only listed resources, software tools, utilities and so on that I have checked personally and found useful - this obviously doesn't mean that there aren't many many more, just as good, that I don't know about.

You may be surprised that the list is quite short. Although if you do a web search for resources you'll get a load of hits, not many of the sites are (in my opinion) of much use. Sites often just dangle a titbit or two of information for you, and hope to get your email address. I haven't listed anything like that. Many of the resources here will not require you to get out your wallet, either...

[TOP]

HTML tools, utilities...

As I've emphasized several times, my choice of Arachnophilia as an example HTML tool does not mean that you have to use it. I reckon it has sufficient neat ideas in it to warrant its presence on your computer even if you also use other tools, as I do. We'll go into what some of these features are in later articles. Mac enthusiasts may like to note that it is a descendent of Apple Writer!

There are many other HTML editors and tools available, but not so many free-of-cost ones that are useful. There are many console-style (that is, a bit like DOS) tools such as VI, EMACS and so on, which I won't recommend to beginners unless you are using Unix-alike systems, in which case you've already got them!

[TOP]

Browsers 

As most Internet users know, the two most common browsers are (as I write), first Microsoft Internet Explorer (most users at time of writing) and second (at time of writing) Netscape Navigator. There's often been a great deal of fuss about which of these is 'better' and the fuss continues, with governmental interference abounding. They are BOTH based on the same original code from the US publicly financed National Center for Supercomputing Applications (NCSA). 

One lot wrote the code, left and came up with Netscape. The other lot took the public code, modified and extended it and came up with MS IE. Is there any original code left in there? I don't know, but the credits are still there in the Microsoft version, at least. Which is better? What's 'better'? They both can do absolutely horrible things, both usually work; both companies are commercial entities out to make money. Navigator 4 (at least) is more pedantic about correct HTML, which can be very useful for testing your pages. MS IE is very forgiving, which can also be useful! At the time of writing, Navigator 5 had been released (they've called it Navigator 6, mind you!). Reports are still coming in on it...

My advice: use both major browsers. You'll need at least to check that your web pages work in both browsers.

There are lots of other antique browsers, but only one other contemporary force (at the time of writing). Opera Software AS has a nice, neat, small, very fast and very useable browser that supports most web standards and is now free (we'll, it's advertising-supported - it is cheap to buy, though, if you don't want ads [who does??]). It is written from scratch without NCSA code. Try it - you may like it.

If you really want to get into this web stuff, then you'll also want to check your pages in Lynx. Why? Because it's a quick way of testing compatibility of your pages with, for example, text reading software used by some people, and also shows you what the indexing software robots will see. However, it's not for computer neophytes. It's not hard to set up, but just a little unfamiliar if you only know Windows. Anyway, go and have a look at the links.

Footnotes

 [Note 1] You've seen how this works with other tags - extra instructions are placed within the brackets

|<|Up|?|^|Menu|Search/Map|Translate|> |  GOTO 

 

ahisee?? AhISee!

Valid HTML 4.01!

Entire Site Copyright © 2001 J. Roberts and AhISee.com - All Rights Reserved.
Problems, questions or comments about the content? Go to the contacts page
Problems, questions or comments about this web site? Send mail to our webmaster