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: webdesign.asni.net
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:: webdesign.asni.net :: www.asni.net
Posts
