Web Design for Beginners - Part 1
-
02Jun2011
Introduction
In the coming few weeks I will upload a range of tutorials aimed at everyone and anyone who is interested in web design and would like a place to start. The tutorials will be covering the most basic aspects of web design from which software packages to use right up to developing a basic but fully functional W3C HTML and CSS compliant *(see hint 1) website of your own.
(1) What Is W3C Compliance?
W3C or World Wide Web Consortium provide guidelines by which websites and web pages should be structured and created to ensure that your website/web pages display correctly on a range of media devices and browsers. For more information visit the World Wide Web Consortium website.
W3C or World Wide Web Consortium provide guidelines by which websites and web pages should be structured and created to ensure that your website/web pages display correctly on a range of media devices and browsers. For more information visit the World Wide Web Consortium website.
Software
What software do I need to begin developing websites and is it going to cost me a lot of money? There are hundreds of very useful and expensive programs on the web that will aid you in all aspects of the development process, from designing the layout of the site to writing the code. However all the software you will need to develop a full functional website can be downloaded for free, some of which you may already have on your computer. Why use expensive packages if everything can be done for free? This is really down to preference and time. Expensive packages such as the Adobe suite will help to increase productivity by providing useful features such as a drag and drop interface *(see hint 2).
(2) A drag an drop interface allows the user to drag commonly used elements such as a text boxes or buttons directly into your website code, this will then automatically generate the necessary code needed to display the element.
During this tutorial I will be using a small selection of the available free programs, any that I use I will make sure and provide a link so you may download the program and follow along. So without further ado I will begin the tutorial.
Hello World!
Many website developers, myself included, start by storyboarding the entire website user functionality from start to finish before creating any website elements, graphical or otherwise. But for the sake of this tutorial, and your sanity, we are going to jump straight into development.
Open up a standard text editor, if you are using a Windows XP, Vista or Windows 7 PC this is called 'Notepad' and usually comes with any PC as standard. If you are on an Apple Mac I believe the program is called 'TextEdit'.
Begin by copying and pasting the below HTML *(see hint 3) into your text editor.
(3) HTML stands for HyperText Mark-up Language and is the most common markup langauge for web pages. A mark-up language is a set of mark-up tags and HTML uses markup tags to display web pages. More information on HTML.
<html> <head> <title>My First Website</title> </head> <body> Hello World! </body> </html>
Next click File > Save As (or equivalent for Mac users). Select your desktop as the file destination and enter in your file name followed by .html e.g. my-first-webpage.html. Now change the file type from Text Document to All Files. Click save.
Browse to your desktop and open the file you have just saved by double clicking it. Your web browser should now open displaying the text 'Hello World!' and the title of the web page will read 'My First Website'.
The Code Explained
Ok so lets break down what we have just typed to help us better understand it.
Firstly we begin by typing <HTML> this is the HTML opening tag, it tells the browser that this document is a HTML document.
Secondly we open a head tag with <HEAD>, this tag defines where the header code will be placed such as the TITLE and the META tags which I will explain in a later tutorial. The HEAD tag is always opened and closed after the opening HTML tag and before the opening BODY tag.
Thirdly we open the TITLE tag with <TITLE> and close it with </TITLE>. Between the opening and closing TITLE tags we place the text 'My First Website'. This is the text to be displayed in the title bar at the very top of the browser window.
We now close the HEAD tag with </HEAD> telling the browser that the header code has finished.
Just below the HEAD tag is the BODY tag. The BODY tag is the element where all the visible page information goes, or in the case of our example the 'Hello World!' message.
We then finish by closing our BODY tag followed by closing our HTML tag which we opened at the beginning.
Conclusion
Congratulations, you have now created your first website. Ok so it may not be the most functional and attractive website that you have come across but if you uploaded this any web server it will render correctly. In Part 2 of this tutorial I will move on to slightly more advanced HTML tags progressing then into styling our webpage with CSS. Check back soon for Part 2.
In the coming few weeks I will upload a range of tutorials aimed at everyone and anyone who is interested in web design and would like a place to start. The tutorials will be covering the most basic aspects of web design from which software packages to use right up to developing a basic but fully functional W3C HTML and CSS compliant *(see hint 1) website of your own.