Beginning Web Design - Part 1: Basic HTML
This is the first in a series of tutorials about the basics of web design. These articles are written for individuals that have no prior computer programming knowledge but has basic computer skill: web browsing, file management, and word processing.
Make your first web page
Open a simple text editor program. On Windows computers use NotePad in your Start > Programs > Accessories. On a Macintosh SimpleText on Mac OS 9 and below and Mac OS X use TextEdit in your Application folder. If you are using TextEdit please make a new file then choose Format > Make Plain Text in the main menu bar.
In a new text document type the following and save as my_first_page.html. Make sure you put the .html extension at the end and on the Mac make sure to uncheck hide extension checkbox in the save dialog.
Now go to your favorite web browser and using the open file from the file menu choose the my_first_page.html file on your hard drive and open.
You should see a web page with Hello World Wide Web! inside the browser window.
Now lets see how the code works:
To start an HTML document you have to markup your content. Tags in HTML are markers describe to the web browser what it should do with the content of your web page. Tags are created using the “less than” < and “greater than” > characters example <p> describes a paragraph on the page. Tags always should have a start tag <p> and a close tag </p>. Some tags are self closing tags like the image tag <img />, but we will get to the image tag later.
The very first tag is the <html> tag. This tells the browser its a HTML page.
<html> </html>
Next is the head tag with a title tag that describes the title of the page and shows up on the top frame of the browser window. Notice the title tag is inside the head tag this is important in HTML and is called nesting. Some tags require other tags to be nested inside of itself. The head tag itself has to be nested in the html tag. A html tags have to be nested into the html tag. The html tag is called the root tag. We will see more about nesting later. Lets move on.
Next we need to nest the body tag in the html tag below the head tag. The body tag is where all the text and images go. Anything you see inside the browsers window is controlled by what you put inside the body tag.
Now that we have a place to put some text on the web page (the body tag) lets put a line of text. Nest a paragraph tag (the p tag) inside the body with the text you want inside the p tag like below.
This is the simplest HTML example and we will learn much more in this series of tutorials.
