Introduction to Web Design and Development

This series of articles is being started assuming you have a basic knowledge of computers, the Internet, and the way web pages work. However, the entire process – from typing the page in notepad to uploading your entire website with an FTP (File Transfer Protocol) client – will be covered.
Before we get dirty, it’s important to note that you don’t have to spend a lot of money or download a fancy editor to make web pages. If you’re serious about getting into web design or making a clean and usable web site, you will want to be familiar with how to code the website. The best way to do that is to start off with a simple text editor. Notepad is a good program to start with while you are learning.
Of course, the first thing you will want to do is to launch notepad. That’s easy enough!
We’re going to be using XHTML 1.0 Transitional, so this is how we will start the document –
The first line tells us that we’re going to be using XHTML Version 1.0 (it says XML because XHTML is a combination of HTML and XML) and what type of encoding to use (UTF-8 is standard).
On the next line, the code tells the browser that we’re using XHTML 1.0 Transitional and where to find the DTD (Document Type Definition).
The last line tells the browser that the rest of the document is going to be coded with HTML using the XHTML 1.0 namespace.
Anything that lies between and is treated as header information and is NOT displayed in the main browser window. However, whatever you type in the second line between will be displayed at the very top of the browser. In our case, it will read “My First Web Page.”
If you haven’t been exposed to HTML code before, whenever we put a “/” right after the opening bracket that tells the browser to stop using that HTML element. So, here, we’re telling the browser that we want the title of our page to be “My First Web Page” and then to stop using the “title” element.
Another important thing to note about closing HTML / XHTML elements is that if it is nested in another element, it MUST be closed before that other element is closed. For example, we opened the “head” element, opened the “title” element, closed the “title” element, and then closed the “head element.” This is the clean error-free way of coding.
The next element we will type is –
This tells the browser that everything between them and tags will be displayed in the main browser window.
This is all we are going to put on our web page for now, so we can finish out the document by typing –
This closes the body and the entire document.
The only thing left you have to do is to save the file. Click on File, Save As and where it asks for the filename, type “myfirstpage.htm”. And, be sure to use the quotes this time! If you don’t, notepad will save the file as text and it won’t display properly in your browser.
You can test the page by opening it with your favorite browser. Don’t be disappointed that it looks so dull. We’ll build on our XHTML knowledge and be able to have a professional looking web site!