The structure of a website

In this section we’ll comment on the necessary points to begin with web building and web design, and we’ll summarise the contents of the rest of pages of this section. The articles can be read independently, but it is also possible to study in sequence, going from the most basic parts to specific details and tricks, and concrete information about the programs and websites where you may get useful things to construct your Web.

We want to quickly learn to create contents for the Web and to publish them. Well— it won’t be very difficult. It was in the first years of the web, some years ago; now it’s more intuitive and the applications are much easier to run. Which is the best way to begin in this world of web edition and publishing? We think that the simpler way for most beginners is:

In the first place, to become familiar with the elements with which a web page is built, and learn the terminology that is used in web design and some basic coding. Easy, and better to do, not theoretically, but modifying pages Web or creating new simple pages.
Secondly, to learn to link webpages with other pages, to learn the basic rules of graphic design applied to the Web, and to use the images with effectiveness and good taste.
If we have curiosity —although this no longer compulsory, with today’s programs, we can study the languages in which modern web pages are based upon, and learn the basic tags of the HTML (or XHTML) and CSS markup languages.

En este manual tenemos información útil para todas estas fases del aprendizaje, e ideas para los más experimentados. En esta página planteamos unos consejos iniciales para que podáis planificar vuestra iniciación y comenzar a hacer cosas concretas. In this manual we have useful information about all these learning phases, and plenty of ideas for more experienced users and designers. In this page we explain some basic initial advice, so that you may plan your initiation and to begin making hands-on, practical exercices.

How to save and analyse complete web pages

The best way to begin in the edition and creation of Web pages is to save a published web page in the hard disk of your computer. First, it is necessary to know how to save it correctly (with all the graphic elements included.)

Either Internet Explorer, from its version 5, and Mozilla and Firefox can save both the HTML and all the other elements that build up a complete web page, simply selecting in the menu File|Save as complete web page. The program saves the page itself, and in addition, in a subfolder with the same name of the page, it saves all the auxiliary graphics and other files, such as style sheets, scripts or Flash movies.

On the other hand, there are utilities specialized in downloading pages (or even complete Web sites), for example WebReaper or Httrack. An extension of Mozilla based on httrack exists, the excellent Spiderzilla. There are other extensions for Mozilla or Firefox which help with downloading files or sites, like Magpie, DownThemAll and others.

As soon as you have some page saved in your system you can study it in detail.

Working with a basic editor.

Before investigating the markup language for web pages it is better to learn to modify some of the pages saved as we learnt before. Thus we will learn which are the elements of the page and how they are placed in it. It is something simple, really. It is enough to open the application FrontPage Express or Composer —the free web publishers included, respectively, with Explorer and Netscape, and get used quickly to the way in which we create and modify a page. These visual web editors are not very far from the way you work in a modern text processor. And yes, these programs, the word processors, may generate Web pages as well, although their code tends to be far worse than the one produced by a proper HTML editor. In particular, Word (at least in for many versions) produces incredibly bloated code, with lots of unnecessary elements.

Including images is very easy in a visual web publisher; in addition, all the referring properties of the image are accessible and controlable from menus and property palettes, very intuitive to use (in this example, Mozilla).

The help system of these web publishers is very complete and easy to understand, and there is no shortage of manuals you can buy in a bookstore. So, just with a little work, it is easy to learn the basics of web page edition in a simple visual editor. Now you can proceed to try new things:

Create tables.
Change the colours of the fonts, and the typeface used.
Change the graphic content. Delete, add, move the pictures...
Specify different kinds of text elements: paragraph blocks, lists, headings...
Create links inside a web page and links to other pages or to web addresses (or URLs.)

We can test all these options with a page created by ourselves, or modifying a page who we have saved in our computer.

Further steps.

In just a short time we already know how to create a simple Web page. FrontPage Express or Composer are, for starters, more than enough; and if we want to edit something at the level of HTML code, the Windows notepad or, especially, NoteTab (Lite or Pro) are perfectly good. The graphics can be created with some program that you have, or you can even generate them with a utility of online graphics generation.

A professional web publisher not only allows to control the design of individual pages, but also the whole site development and the links.

But creating a Web in most cases is not just publishing one page, the same way it’s not the same to write a page as writing a whole book. We must consider more things to create a functional, attractive Web site, and well organized. First of all, it is necessary to plan carefully, and to use a method of flexible and efficient work.

In this manual we have included several articles which will help you: basic ideas to create websites, notes about design of this manual’s website and many more interesting topics.

The tools commented, with some more services and programs we comment and link to in these articles, are all you’ll need to build and maintain a basic website, and even a site with some advanced features. The quality of your design is, of course, something else: it will depend on your good taste and your own creativity. If we want to create a real website and take it really seriously, you can upgrade your recently acquired basic skills with something extra:

Try a more advanced and powerful editor, such as the ones we comment on an (article about web editing programs.)
use some good graphic editors, preferably with some special features to optimize and create web graphics.
Use some style sheets to control all the presentation of your site.
Add some Java applet or some script to add new functionality to your site or improve its interativity or its look and feel.
Offer services that take advantage of certain websites: searches, site maps, mailing lists, forms...

We offer detailed information about all these topics in our pages. Learn, practise and enjoy!