HTML Basics 5: Lists

In previous blog posts, I have introduced some of the basic HTML tags that format a web page: paragraphs, headers, the tags that make up the page <head>, links, and images: HTML Basics 1*** HTML Basics 2: The Head Tag *** HTML Basics 3: Links *** HTML Basics 4: Images

The next most important tag is the List tag - which comes in three different flavours: Unordered lists, Ordered lists, and Definition lists.

An unordered list is a list of items in no particular order. Unordered lists can have bullet points or various other symbols that mark each new list item, or no particular list symbol at all. The default formatting for lists is to have them indented from the main text, and list items separated by a line break - this is called a block list. But with a Style Sheet (CSS), a list can be formatted whichever way you want! Lists offer a lot of flexibility in that respect. This is because for each type of list, there are at least two different tags. All the more opportunity to define a variety of styles.

One of the main uses for unordered lists are navigation menu. In this blog, all three main navigation menus are unordered lists - the navigation at the top which says "Home - Shop - Look - Listen - Read - Interact - Join", the one on the right side linking to the various subdomains and main sections of the site, and the subnavigation menu on the left, which allows you to navigate to the other parts of the "webdesign.asni.net" subdomain. (Remind me that I should write a blog about domains and subdomains sometime soon!) As you can see, they all look completely different, even though they are built using exactly the same tags.

The tags for an unordered list are <ul></ul> which encloses the entire list and marks it as an unordered list, and <li> </li>, which encloses each separate list item. So the code for the navigation bar at the top looks more or less like this:

• <ul>


• <li>Home</li>


• <li>Shop</li>


• <li>Look</li>


• <li>Listen</li>


• <li>Read</li>


• <li>Interact</li>


• <li>Join</li>


• </ul>

As you can see, even though the code is written as a block list, with line breaks between each list item, the navigation menu is displayed as an inline list. This has been defined in the style sheet - if you view the page without the style sheet (if you're browsing with Firefox, go to "View" "Page Style", then choose "No Style" - or equivalent in other browsers) you can see thebare bones of the page navigation, without all the fancy formatting.

Ordered lists are lists where items are listed in a particular order - they are typically preceded by numbers, or letters of the alphabet. A list of the days of the week might look like this:

1. Monday


2. Tuesday


3. Wednesday


4. Thursday


5. Friday


6. Saturday


7. Sunday

(unless you prefer to count Sunday as 1)

The tags for an ordered list are very similar to the unordered list - the main list tag is <ol> </ol> (instead of <ul> </ul>), and the individual list items are enclosed by the same <li> </li> tags as the unordered list - this makes it easy to convert an ordered list into an unordered one, or vice versa, if you change your mind - it is only the main list tag that needs to be changed, not every individual list item. The list tag automatically inserts a bullet point or the correct number for the item, and if you need to insert a new item in the middle of a numbered list, the numbers of the following items will automatically increase by one. Handy, eh?

The third kind of list, the Definition list, is a little bit different in that it consists of three parts. A definition list is a list such as can be found in a dictionary, consisting of a word or expression, and a definition of the meaning of that word or expression. For instance:

Monday:

The first day of the week

Tuesday:

the second day of the week

Wednesday:

the third day of the week

etc, would be a definition list.

By default, the word or expression to be explained (the "definition topic") is formatted differently from the explanaition, for instance it could be bold, or a different colour. The tags for the definition list are <dl></dl> as the main list tag, <dt></dt> for the definition topic, and <dd></dd> for the definition. In code, the list above would read as follows:

<dl>

<dt>Monday:</dt>

<dd>The first day of the week</dd>

<dt>Tuesday:</dt>

<dd>the second day of the week</dd>

<dt>Wednesday</dt>

<dd>the third day of the week</dd>

</dl>

Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

Planning your Site: The How

In my last blog, I talked about two of the most important questions you ought to ask yourself when planning your website: "Who will this site be for?" and "What do I want them to do?"

In this blog, I will look at some of the most obvious tasks a website can perform for you, and the technologies that are needed to make those tasks possible.

Most professional or business websites fulfill one or more of the following functions:

• present information about your work or your products in an easily accessible manner that can conveniently be kept up to date - the "brochure" website
• sell things, either directly through a shopping cart system, or by enabling people to place orders from a product catalogue - the "online shop" website
• offer user interaction: guest books or message boards to leave feedback, search functions to find targeted information, forms to request quotes, online booking systems, online help desks - the "interactive" website
• inform and entertain: blogs about topics relevant to your industry, collections of helpful or fun links, image galleries, online video or flash presentations, interactive games - the "brand building" website

Different technologies are needed to fulfill these different functions: a brochure type site may only require straightforward html/css - though it may be advisable to include features like a search function, login system, or catalogue type features, which would require Php/MySql, or another programming language that works with a database. And unless you are comfortable to update your own html, by using an html editor or even writing your own code, you may wish to have a content management system included, which also requires some programming.

Shopping carts can be installed either as ready made packages - Zendcart or Cubecart are popular systems, though it requires some programming expertise to set them up - or they can be custom programmed. Security is an important issue when it comes to e-commerce applications: you would want to make sure that your client's credit card information will be well protected! The simplest (and free) solution is using the Paypal system. This is only really advisable for shops with relatively few products, but it is a feasible solution if for one reason or another, you cannot run Php/MySql on your web server.

If you would like to interact with your clients via message boards, have "members only" features on your site, enable visitors to do site searches, or even upload content themselves, you will not get around using Php/MySql or one of the other web programming languages, such as ASP. All these features work with an online database, where information can by uploaded, by yourself or even by visitor to the site, depending on how it is set up. The Php scripts then pull this information from the database and automatically write the html code that is at the base of what your site visitors see. Not only does this make site maintenance and updates much faster and more painless, it also allows for all sorts of customizations - to the point where no two people will see exactly the same content when they visit your site! It does require a bit of setting up and programming, and the price tag for an interactive site is therefore quite a bit higher than that for a simple brochure type site or even an online shopping cart.

Flash is another technology which is very prominent on the web. Flash has got a bit of a bad name in some web design circles: not just because of the infamous (and once so popular) "Flash intro" that takes fifteen minutes to load and is a surefire way to make most prospective visitors click on to the next site - but mainly because sites which are built entirely in Flash, cannot be indexed by search engines. Obviously, this is not good for your search engine ranking! A Flash site essentially is a self contained file that is embedded in an html page. Search engines only read html, they do not read Flash - so any keywords you display within your Flash site will be invisible from the search engine's point of view.

The beauty of Flash, however, lies in using Flash components within an html context. Flash also comes with its own very powerful programming language, Actionscript 3.0. It is an essential technology if you wish to include rich multimedia content in your site: music clips, video, slide shows, animations, little interactive games or even just a few cool buttons that do interesting things.

Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

HTML Basics 4: Images

Another tag which is very common is the <img> tag - this embeds image files into your page. Imagine how drab the internet would look if it weren't possible to display images on a web page!

Images are separate files which need to be stored online separately, and then embedded in the HTML document. You could almost think of the image tag as another kind of link tag - except that, instead of opening a new document on a new page, it displays an external file as part of the page you are looking at. It is important to remember that all image files you are using in your website need to be uploaded to your server as well - unless they are already stored on another website, and you are pointing your image tags there.

In another blog, I talked at some length about the image formats that are used on the web - the most common are .jpg and .gif. Say you have written a piece of text for your web page, but now want to embed a graphic logo on the top of the page, and a photo next to your first paragraph. Both things are achieved with the same tag. The logo will most likely be a .gif file - which is more suitable for text and line art - say it is called logo.gif, and it will be stored on your own web server, in a folder called "images". To embed it in your page, you need to write the following line of HTML: <img src="/images/logo.gif"> - that's it! The part after the img src, between the quotation marks, needs to contain not only the file name but also the *path* to your file - directions for the browser to where your image is stored. In the above example, the file would be stored in a folder called "images" which is in the main directory of your web page (more about directories some other time!).

What if you want to use an image that is stored on a different website though? Say, your brother has taken some beautiful photos on his last holiday in Switzerland and uploaded them to his personal website, and you have asked him to use one of them to decorate your essay about dairy farming in Europe. In this case, you use the same tag, but your path is the full url of the image - that is, ithe precise location on the internet where the image file is stored. So your brother's website is called www.mybigbrother.com", the image is called "cow.jpg", and it is stored in a folder called "images within the main directory of your brother's website. The tag would then read: <img src="http://www.mybigbrother.com/images/cow.jpg"> - as you can see, the tag itself hasn't changed, only the information where the image is located.

By default, images are displayed at the point in the site where the image tag is inserted, and displace text. If you would like to float it on the right or left side next to a piece of text, insert the following in your image tag: <img src="http://www.mybigbrother.com/images/cow.jpg" float="left"> - this will display your brother's photo of a beautiful Swiss dairy cow on the left side next to the paragraph of text that follows it in the HTML code.

Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

HTML Basics 3: Links

In my last blog, I have been looking more closely at the <head> tag which is one half of every valid HTML document. A couple of blogs ago, I already talked about some of the most basic HTML tags that make up the <body> of the page: <p> for Paragraph, and the different levels of headers, <h1>, <h2>, <h3>, <h4> and <h5>. Today I'll introduce the next most important tag you'll find in almost any web page: Hyperlinks.

Hyperlinks - or links, for short - are fundamental to the whole idea of the internet. The very name of the coding language we use, HTML - short for Hypertext Markup Language - includes the idea that there be links. "Hypertext" means an enhanced form of text, where virtually every word or piece of information can lead off in a different direction, by virtue of linking that word or short piece of text to another page with additional information. Remember that originally, the internet was intended for academic and research purposes - and Hypertext is the triumph of the footnote. If you've ever written an academic paper of any sort, you may know how tempting it is to drown your main argument in reams and reams of footnotes providing additional - but sometimes barely related - information. With a Hypertext document, you can have all the footnotes you want, at a mouse click, without burdening down the main argument of your text.

All you need to do is insert a link that leads off to another page. And obviously, without links, there would be no World Wide *Web*, but only a vast collection of individual and separate pages, with no way to navigate from one to the other.

The link tag has a slightly different format than most of the other tags we have encountered so far, which simply open and close - for instance <p> and </p> which are the tags that surround a paragraph of text. The link tag also consists of an opening and closing tag, but the opening tag contains some additional information - most importantly, the url of the page you are linking to!

Say, I would like to insert a link to my own home page, www.asni.net. The correct url for this page actually read: http://www.asni.net - and if you are linking to a different domain on the net, you always need to include the http:// prefix (links from one page to another on the same website are a slightly different matter, but I will cover this some other time when I talk about navigation menus and directory structures).

The format of the link tag is <a href="http://www.asni.net">Link to Asni's home page</a>. The basic tag is <a></a> - this stands for "anchor" - these tags enclose the link text which is displayed on the site. Note that the text of the link does not have to be identical to the url of the page you are linking to! I could have written this link as <a href="http://www.asni.net">www.asni.net</a>, but still, the bit that tells me where the link is pointing to is the part after the 'href=' - the url of the page I am linking to, which is always enclosed in double quotes, and needs to include the http:// prefix.

By default, the new page opens in the same browser window or tab you have just been looking at. It is often a good idea to tell the browser to open a new window or tab intead - for instance if you are linking to an external page but would really like your visitors to come back to your page after they have looked at your link. This is achieved by inserting a target="_blank" into your anchor tag. The tag then reads as follows: <a href="http://www.asni.net" target="_blank">Link to Asni's home page</a>.

Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

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: 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

Hello World :: welcome to my brand new web design blog!

First of all, the good news – as of last Monday, I am officially running my new web design business! My Enterprise Allowance Grant has been approved, I’ve been given a little stack of money to buy things for my business, and all systems are go.

As a thoroughly productive start to my new business, the same day my latest website went live: www.juliecomparini.com is a personal portfolio site for my former fellow musician, and good friend, Julie Comparini, a singer based in Germany and specializing in the performance of medieval, renaissance and baroque music, as well as contemporary interdisciplinary theater projects.

The site is what we call a “static website”, using straightforward HTML and CSS. HTML stands for Hypertext Markup Language - this is the code that determines the structure and content of a web page – headlines, paragraphs, lists, block quotes and such – which will be displayed in a standardized format by your web browser.

CSS stands for Cascading Style Sheets – this is where all the fancy formatting goes. CSS offer the ability to determine the looks of a site in great variety and detail: font styles, sizes and colours, background colours and images, rollover effects, positioning of the individual elements of the site, and a number of other parameters.

The elegance of the system is that the same style sheet can be attached to a whole series of HTML pages, making sure that the styling for all pages is consistent. It also enables the designer to change the entire look of the site – say, the overall background colour, or the font style - by only changing one bit of code in one file. You can even write a whole new style sheet and attach it to the same old HTML page! So one day, your website could have sober businesslike look, and the next day, a crazy jungle theme, all by changing one line of code.

As someone who has done the hard yards of hand-coding my own html pages back in the days before CSS became widely supported, I can tell you, this technology cuts down on a lot of really tedious repetitive tasks! Of course, you have to know what you are doing – starting to work with style sheets was where I realized the limits of my self-taught html skills a few years ago, which is one of the many reasons I ended up getting myself a proper Diploma in Multimedia Design.

If you’d like to get some first hand experience of what a HTML page without its attached style sheet looks, you do the following little experiment (this works best with the Firefox browser – you can download it for free if you haven’t got it installed: ):

Load a web page – you’re welcome to use Julie’s as an example – then go to “View – Page Style” and choose “No Style”. Tadaaa! Not pretty, huh? The page content will still display properly (at least if the HTML page is set up the right way) and headlines, paragraphs and lists will still be recognizable, but all the fancyness is gone. (Make sure to switch your Style Sheets back on by selecting “Basic Page Style” after you’re done.)

I hope you have enjoyed this little glimpse into the mysteries of the art of building good websites. But I know, most of you just want to know: “And what is a websites going to cost me?” – Well, how long is a piece of string? It is really hard to quote people a price without knowing their ideas and requirements. But I will tell you how much I charge for a site like Julie’s, if you send me an email mentioning this blog.

Asni: Multimedia Art & Design:: webdesign.asni.net :: www.asni.net