There are three key components to an HTML hyperlink:

The Unique Resource Locator or URL – this is the unique address on the web of the place you are linking to

The anchor tag – the hyperlink tag itself, this contains the URL (destination) and the text describing the link

The anchor text – the text in the anchor tag that describes the destination of the link

URL’s can also be absolute or relative depending on where the destination files you are linking to reside. Lets look at an example of each:

Absolute URL:

http://www.design.paulfeatherstone.co.uk/blog/intro.php

With the full URL used my link can be used anywhere on the web and will link to my design blog. When I need to link to my blog from within my own site I do not need to use the full URL though, I can use a relative URL because my blog folder lives on the same server as all of my other files and folders. I therefore use the following relative link:

Relative URL:

/blog/intro.php

This achieves the same thing with less HTML code, or markup as it is known, which keeps code to a minimum and optimises performance for the user whilst also saving you (the budding web designer) time. Relative URL’s can also be used from within a particular folder as well as within a particular hosting server.

URL’s are also case sensitive so be very careful when choosing a naming convention for your URL’s – try to avoid capitalization where possible and stick to lower case – it will make life simple in the long run!

At this point you may be scratching your head and wondering what this long string of words actually means? Lets take a look at each section of our URL in more detail by referring to our previous example:

http://www.design.paulfeatherstone.co.uk/blog/intro.php

Each section of the URL means the following:

http:// – this is the protocol indicator, used to tell servers how to send HTML information across the web. Also notice the variation of https:// for secure sites, more on this later in the series. There are various protocols used on the web but don’t worry too much about this now..

www.design.paulfeatherstone.co.uk – this is the hostname or domain name, just to complicate things further this is also an example of a sub domain. My main domain name is paulfeatherstone and I have created a sub section of this called design (always shown as a prefix and a dot). The www prefix is not necessary but has become a common naming convention for the web that most people recognise and use. The host or domain name is you unique place on the web, when people type this address they are served with the content you provide (i.e. your web pages, etc)

blog – this is the directory or folder that my blog files live in, within any website you will find a fairly common set of folders such as blog, images, documents, etc. As with a personal computer, the files contained within a server are arranged in this way

intro.php – within the blog directory or folder you will find my intro page, it’s written in php so you will find it at intro.php

Lets now take a look at how to construct a basic HTML link, firstly let ‘s look at the whole hyperlink:

<a href=”http://www.paulfeatherstone.co.uk”>Link to the Paul Featherstone homepage</a>

Lets now break the whole link apart:

<a – the opening tag, this stands for anchor tag

href – this is the part of the tag that enables you to jump from one bit of information to another on the web

http://..etc – this is the URL which we broke down earlier in the post

Using descriptive text in anchor text is important to ensure compliance with WCAG standards for accessibility so avoid using anchor text such as ‘click here’, etc. Descriptive text is also good for search engines – it tells them a lot more about the meaning of your web pages.

Later in this series we will explore the use of images for links instead of text and also how to insert jump links so users can get straight to the content they are looking for.

There are three main tags required for the creation of basic HTML lists:

<ul> – unordered list
<ol> – ordered, or numbered list
<li> – the list item itself, this lives inside the <ul> and <ol> tags

So, lets put this together to make our first list:

<p>This is my first list:</p>
<ul>
<li>My first list item</li>
<li>My second list item</li>
<li>My third list item</li>
</ul>

This will display as:

This is my first list:

• My first list item
• My second list item
• My third list item

So there you go – your first list! Lets look at how to write an ordered or numbered list in HTML:

<p>This is my second list:</p>

<ol>
<li>My first list item</li>
<li>My second list item</li>
<li>My third list item</li>
</ol>

Unlike the unordered list this list will appear as:

This is my second list:

1. My first list item
2. My second list item
3. My third list item

And there you have it – simple HTML lists.

In our next post we look at links, the element that the world wide web is built around.

Use these tags to enter content between the body tags in your HTML page.

Some important formatting HTML tags are:

HTML Headings

Headings are key components of any HTML document both from a structure perspective but also for search engines to use to make sense of the information hierarchy in your pages.

Heading tags run from one to six with one being the largest size of title and six being the smallest. Tags should always be used in sequence running in order from one to six (or as many as you need in the HTML document you are creating). Search engines will not like headings in the wrong order and it can also create a confusing experience for the user. As with other aspects of web design, consistency is key!

So, the heading tags are:

• <H1>Heading one</H1>
• <H2>Heading two</H2>
• <H3>Heading three</H3>
• <H4>Heading four</H4>
• <H5>Heading five</H5>
• <H6>Heading six</H6>

HTML Paragraphs

Okay, so you have headings, now time for some paragraphs.

All paragraphs need to live in the <p> tag..so:

<p>This is a paragraph talking about how much I like my new found web design skills</p>

Remember, same format as previously stated: angle brackets for tags and backslash to close.

Bold and italic HTML text tag

If you want to bold the text in your paragraph simple use the bold tag: <b>Some text to bold</b>. Want to bold part of a paragraph of text, simple: <p>This bit is not to be in bold <b>but this bit is</b></p>

You could also use the strong tag to bold: <strong>Some text here</strong>.

For italic text you can use: <i>some text in italics</i>. Same structure and tag format.

Next, how to make lists in HTML.

HTML web pages are a combination of text, links and objects such as images and multimedia files. Tags are used to write HTML and always take the form of:

<Tag>some content</Tag>

Tags can also live inside other tags, otherwise known as nesting or nested tags:

<Tag>

<Tag 2>some stuff here!</Tag 2>

</Tag>

Don’t worry, you will become used to tags and may even grow to love them (see “I have become a computer nerd”: chapter 22!)

Every web page is made up of a standard set of components, each has its’ own tag. These tags are common to every HTML page and provide the structure, they are:

• Doctype – identified doc as HTML, includes version type
• HTML – defines doc as HTML
• Head – container for info about the document
• Title – provides descriptive title for doc
• Meta – provides specific data about doc including info for search engines
• Body – contains all info within main body of HTML document

This is how they look in an HTML page

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> <title>Untitled Document</title> </head>  <body> </body> </html>

Notice that all of the components follow the same tag format mentioned previously – an opening tag and then a closing tag that includes a back slash.

That’s all for now, more tags in the next section!

Tools you need to start web designing

This post will provide you with information on how to get started with web design and tells you the basics.

There are a number of things you will need before you can start to think about how to construct on the web:

• Editor – some way of creating documents in HTML/php/css format
• FTP – a way of transferring files (uploading / downloading) to the web
• Design software – I’m assuming you will want some kind of graphics in your website
• Browsers – it is useful to think about browsers at this stage as sites can appear differently in different types

For editing you web pages you can use a basic text editor or something more sophisticated such as Adobe Dreamweaver or Microsoft Expression. You can even use Microsoft Word to create web pages believe it or not.

File Transfer Protocol, or FTP for short, is the main method of transferring (that’s uploading and downloading) files to the web. More sophisticated web design packages such as those produced by Adobe and Microsoft include this facility as standard. If you choose to use a [cheaper or free] alternative then you will have to find a separate FTP programme to use. There are many good free FTP programmes available, Google this term or search on Download.com for some examples.

Nice graphics help create a high quality user experience for your websites through good design. You don’t have to use expensive software (see Adobe Creative Suite), there are plenty of goof free tools out there on the web. As long as you can crop and resize graphics you will find them of some use. Icons and buttons can often be accessed via free sites, this may avoid the need for graphics editing when you are creating your site(s).

At this point it is worth thinking about browsers, sites will often look different depending on which browser they are being viewed on. Although this is becoming less of an issue to web designers as web standards actually become standard across different browsers, it is still a consideration. The main differences exist between Internet Explorer version 6 (still used by many users) and all other browsers. As a minimum try to test your websites on Mozilla and IE 6 / later version.

Understanding the language of the web: HTML and CSS

There are two key points to understanding how to design a basic website – one is the language of the web – Hyper Text Markup Link – HTML, the other is the method of styling your HTML code so that it looks visually appealing and doesn’t appear like a word processor document – Cascading Style Sheets – CSS.

In order to understand how these two languages work together think of HTML as the steel frame of a building – it provides structure but no style. Think of CSS as the design of the walls which fit around the steel frame – thus defining the look and feel of the building – or in our case our website.

Stylesheets are defines by lines of code in our HTML documents or web pages, typically there exist multiple stylesheets for multiple tasks or browsers. For example, you may need a stylesheet for how your web site looks in a browser and a separate one for print. You may also require one stylesheet so your site looks okay in IE6 and another for alternative / newer browsers.

Read the next article for more detailed information on how to become a web designer. Next: the basics of HTML, lets get started!

http://www.greetingcardassociation.org.uk/home/