Design Primer 1: Basics
For those of you who are feeling adventurous, the following is a basic introduction to the nuts and bolts of web site design (this covers the actual code of web pages; if you would like try designing using visually-based software such as Microsoft's FrontPage, there are numerous internet resources you can look into).
Note that in these tutorials, HTML elements introduced in the text will appear as new HTML, and HTML you type in the computer will appear as:
previously seen HTML
new HTML
Please also note that the text in Internet Explorer used for the examples in these tutorials has been set to be HUGE so it can be seen in the screen-shots. Yours won't appear quite as large!
The Basics
The language of web pages is Hypertext Markup Language (HTML). It uses tags that describe what the contents of a web page are and how they should be displayed to the user. Writing HTML doesn't require any special software - all you need is a word editor and a browser (e.g. Notepad and Internet Explorer, both included with Windows).
The HTML tags are nothing more than simple text characters. The browser (e.g. Internet Explorer) looks at the tags and determines how to display the page. An HTML tag starts with < and ends with >. Anything within the < and > is not shown on the screen, but interpreted by the browser to determine how to display the other content on the web page. All tags in HTML must be opened (started) and then closed (stopped) with a /. For example <b> indicates to start bold, </b> indicates to stop bold. Lets try a little example. Type the following into Notepad:
Save the file as web1.html in the folder c:\website (you will need to create the folder c:\website on your computer). Now open web1.html in Internet Explorer by opening Internet Explorer and clicking File > Open and then clicking the Browse… button. Find web1.html in the c:\website folder and click the Open button. Now click the OK button and the web1.html web page we just created will appear in Internet Explorer as follows:
Okay, it's not much to look at, but it's your first web page! However, it's not a complete web page just yet. We need to add some things to give Internet Explorer more information about the page. Firstly, we should tell Internet Explorer that this is a web page. We do this by putting <html> at the top of the page, and </html> at the bottom of the page (all tags must be closed, remember?). In general, everything in your web page should be between these tags.* So now we have:
<html>
<b>Hello</b>
</html>
If you look at this in Internet Explorer (just save web1.html in Notepad and then click the Refresh button in Internet Explorer to update the web page), you won't see any change. That's because Internet Explorer figured you just forgot these tags and assumed they should be there. Regardless of Internet Explorer's forgiving behaviour, it's always better to do things properly from the start!
So do we have a complete web page yet? Not quite. We've still got two more steps to go. The first step is adding the head and the body (the second step is adding the web page's title - we'll get to that after). The head of a web page contains information about the web page that Internet Explorer, search engines, etc. use to help figure out what is on the web page. Its tags are <head> and </head>. Anything in between these tags is in the head of the web page.
The body of the web page contains the information that will actually be shown on the screen. Its tags are <body> and </body>. Anything in between these tags is in the body of the web page. In our example, since we want to be able to see the Hello, we need to put it in the body. The head is always opened and closed before the body (in other words, the head is at the top of our HTML file). Both these tags, however, are within the <html> … </html> tags we already learned about. Let's update our example to include the head and the body:
<html>
<head>
</head>
<body>
<b>Hello</b>
</body>
</html>
Again if you save and refresh this, nothing changes on the screen. What's the point? For simple web pages, the divisions are not as important as they are in more advanced HTML, but it's always good to establish the proper habits early on! This said, let's get to the last step of creating a complete web page by actually placing something in the head - the page's title.
The web page's title is contained within the <title> and </title> tags (notice how tags are designed to be easy to remember?). The title is placed in the head of the page and contains the text that is shown in the blue bar at the very top of the Internet Explorer window - not actually on the web page itself! Let's update our example and see it in action:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<b>Hello</b>
</body>
</html>
Now save the web page and refresh Internet Explorer to see the results. Did you notice the title appear in Internet Explorer's blue bar at the top? Cool, huh? You might also notice that the title tags were indented. This is often done to indicate a hierarchy (or nesting) of tags. It makes the code easier to read. You might wonder why I didn't indent the head and body tags inside the html tags. Traditionally, it's not something web designers do, but there would be nothing wrong with doing it as I've shown here:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<b>Hello</b>
</body>
</html>
Makes it easier to follow, doesn't it? Well that's it! Your first HTML page. Congratulations!
Now that you have completed Part 1, you may want to learn about some of the fundamental HTML tags in Part 2.
* The exception is the doctype. This is a tag placed at the very top of the page that tells Internet Explorer what set of rules to use when interpreting HTML. It's not discussed here to prevent confusion, but it's not a bad idea to include it. It goes above the <html> tag and looks like this (don't worry about why it looks like it does, just copy and paste it into your page. Note that the tag should all be on the same line [it may roll over to the next line in this example]):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
