Web design – an easy level?

Web design – Easy to learn?

This ‘easy level’ tutorial is intended for the absolute beginner to web design. Some may say that I am throwing you into the deep end by explaining everything in the terms of HTML code rather than explain how to use the popular WYSIWYG applications currently on the market. Well, my response to that question is – although some may disagree, I believe that it is fundamentally important to understand the code that underpins the delivery of a web page.

In developing a habit of code-dependant design, you can truly control, optimise and debug a web page to enhance the experience for both the visitors and search engines.

Making a start with HTML – web page basics

Here is a break down of how a standard web page is structured:

<html>
<head>
<title>This is the title</title>
</head>
<body>

This is where the code for the page content will reside.

</body>
</html>

You can see from the above example that the self-explanatory code, or ‘<tags>‘ have a start position and an end position. The document starts and end with the <html> tag – the definition of an end tag is the same tag but with the addition of a / before the name, i.e. ‘</html>‘. This type of coding is know as mark-up. Those of you who used to word-process in the very early days of the humble personal computer may remember using a very similar language to specify bold/italic/underline, text alignments and font sizes.

With the <html> start and end tags you can see in the above example that the contents therein is split into two different areas – ‘<head></head>‘ and ‘<body></body>‘.

The Head tag

The head tag is used to store information to instruct both the search engine and web-browser to the content of the page. It can be used to define the page title (very important web optimising for the web). The page title can be seen on a finished and live page at the top left of your web-browsers window. It is a good idea to include a short but descriptive sentence within this tag, including any relevant keywords and phrases that will hopefully attract visitors.

Within the ‘<head>‘ tag, you may also consider adding meta-data such as keywords and descriptions as well as links to external CSS and Javascript.

The Body tag

The body tag is use to store the visible content of your web page. This can include text copy, images, tables, links and audio/visual media.

Although this tutorial only skims over the subject of HTML coding, I will give you a few pointers to creating a code-based text page.

Paragraphs

If you were to copy and paste the fully formatted content of a text document between the ” tags; although this textual content should be readable, all line-breaks, alignments and text styles will be lost. You must specify such text features using simple mark-up language.

Lets start by using paragraph. If there is a line break in your code, by the time a web-browser has translated it into a web page, it will have completely ignored it and carry the next line of text onto the previous. In order to specify line breaks and indeed paragraphs, you will need to consider the following code:

<p>This is a paragraph of text</p><p>This is another paragraph of text.</p>

The output of this will appear as:

This is a paragraph of text

This is another paragraph of text.

Other HTML formatting

Here is a list of other formatting mark-up codes that you might want to experiment with.

<b>bold text</b>
<i>italic text</i>
<div align=”center”>Centred text</div>
<div align=”left”>Left aligned text</div>
<div align=”right”>Right aligned text</div>
<br> – line break (you only need to add the end tag and not a start tag)

Conclusion

Again, this is only a simple introduction to HTML web design at an easy level. I have massively simplified the whole process of using code to create a web page. This tutorials intention is to introduce you to HTML code a dispel any preconceptions that HTML is difficult to learn – it isn’t!