subscribe to receive this blog per email :: unsubscribe from the mailing list

Thursday, March 25, 2010

HTML Basics

This week, I had the pleasure to teach my first class "Online Promotion for Everyone" at our very own Featherston Community Centre - the classes are scheduled to take place once a month, on the last Wednesday of the month, from 7.30 pm to 8.30 pm. The next class will take place on 28 April. The cost is $ 12 per person per session - and they're definitely not only open to Featherstonians! So if you want to get some hands on introduction to web technologies, and how to use them to promote your business and career, do come along. More information here:

As is often the case, the first class turned out a bit different from what I had expected to cover. The participants were very keen to get their hands on to actually building a simple website, so instead of dwelling on the theory, we got very hand-on right away. Participants had written their very own web page by the end of the class!

HTML is all about structure. The code consists of a number of tags which indicate the function and level of importance of each part of the page, and each bit of text or other information within it. At first sight, it might seem as if HTML is just a means to format text - different sizes of text for headlines, sub-headers and paragraphs, bulleted or numbered lists, indented block quotes, and tables. These tags make up a good part of the html we use day by day.

Browsers render these tags in a particular fashion - however, this is different depending on what browser is used. A site written in simple HTML gives the author very little control about the details of the graphic representation, such as what fonts are being used, or the precise size of text and headlines. But the beauty of the language is that if the tags are used correctly, the *structure* of the information will be comprehensible no matter how precisely each browser is programmed to format the tags.

The structure of a basic HTML document is very simple, really. The page opens and closes with the <html> </html> tags - usually this tag includes some information as to which version of HTML is being used, the language, and character set, but it can be used on its own, to tell the browser that this is an HTML document.

The rest of the page consists of two sections - the <head> </head>, and <body> </body>. Inside the <head> tag, there is information as to the content of the following page: keywords and/or a short description inside the <meta> tag, styles used, and script languages, if any. Most of the information inside the <head> does not get displayed - but it is an important section for your search engine optimization.

The only tag inside the <head> which is actually visible in your browser is the <title></title> tag. This is the short line of text which is displayed on top of your browser window when you view a web page. It is also one of the first places search engines look to find out what a web page is about - therefore it pays to pay some attention to finding a good title for each of your web pages.

The <body> </body> tag contains all the information which is actually displayed on your web page. This will be mainly text, as well as images, links to other pages, and other media files such as audio, video or flash animations. The most commonly used tags for text are <p> </p> for paragraph - the main body of text on your page - and the varying levels of headlines: <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4> and <h5> </h5>. These tags ensure that text is displayed in a comprehensible fashion, with appropriate breaks and whitespace, as well as varying sizes for the headers and sub-headers, even if no other styling information is supplied.

The idea of the different levels of header tags is not so much to give different options for size, but again, to make the function of each headline clear. The <h1> tag should only be used once in each page and contains the main title or headline that is displayed inside your page (this is different from the <title> tag inside the <head> section of the HTML document, which appears on top of your browser window - though it may well contain the same line of text).

<h2> is the first level of section header, which can then be subdivided further into sub-sections with the <h3>, <h4> and <h5> tags. Of course, not all header tags need to be used in every page! Often a <h1> and a few <h2>'s will provide all the structure you need for your page.

(to be continued)

Asni: Multimedia Art & Design:: ::

Friday, March 12, 2010

Size matters

Of the many things a web designer needs to juggle in order to deliver the best possible site, loading times are an aspect that sometimes does not get the attention it deserves.

With broadband connections becoming ever more common, it is easy to be a little cavalier about this aspect, but it pays to remember that not everyone is working on a Macbook Pro with a turbo speed internet connection. In that respect, the fact that professional web designers are likely to work with equipment and setup that is at the more capable and up to date end of the spectrum, sometimes is a bit of a liability.

Loading times are determined not only by the nature of the internet connection (broadband or dial-up, wireless or cable, etc.) - which are largely the choice of each individual consumer. Factors outside the consumer's control also contribute: the quality of the phone lines if it is an ADSL broadband or a dial-up connection, modem speeds, the distance from the server, or how busy a site is at any given time. As a web designer, one has little control over those issues. What the web designer *can* control is the size of the files that make up a web page, which is the third part of the download speed equation.

A regular html document is usually tiny, in terms of byte size. Where the problems arise is when the page includes a lot of images or media files. Video and audio files are notoriously heavy and require special treatment. Images, however, are a standard component of most web pages, both as part of the information that is being presented, and as part of the CSS style that makes the page look pretty.

Browsers only accept certain image formats: JPG, GIF and PNG, with JPG and GIF being the most common. All these image formats save file size by loosing information. JPG files use compression - they calculate averages for areas that are of a similar colour. GIFs and PNGs use indexed colour - only a certain pre-determined number of colour values is preserved in the image. JPGs are generally best for photographs and images that use gradients and smooth colour progressions, while GIF and PNG are appropriate for images (such as logos or fancy text fonts) which use lines and flat areas of the same colour.

Once the colour information is lost, it cannot be retrieved. Incidentally, this fact offers some protection for artists or photographers who are concerned that their images might be used illegally if they are posted on the internet. Generally the quality of images which are used within websites is so low that they are useless for most commercial purposes, such as printing them out. They can still be used on other websites of course - therefore it is advisable to watermark each image with your copyright notice and website url. That done, you can then look at it as free advertising. :)

Downsizing the image to the smallest possibly file size without visible loss of quality is a bit of a balancing act. There are no standard rules for this - what is acceptable depends very much on each individual image, and so it is best to adjust each image individually. A good eye will serve you better than any mathematical formulas! But it pays to make the effort: nothing is worse than a web page that wastes people's time by taking too long to download. Chances are most people will never wait that long!

Asni: Multimedia Art & Design:: ::