Your First Webpage
December 14th, 2011OK, So you want to learn some HTML.
I will not go into exactly what HTML is, however, there are plenty of places to research this area if you want to.
Lets begin with your first HTML document.
Open HTML-Kit.
Create a new html page.
As you can see, HTML-Kit already populates the basic codes you need to build a web page:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
Note that for each opened tag <html> <head> <title> and <body> there is a closed tag: </title> </head> </body> and </html>
It is between these tags that the magic happens.
For instance, <title>Untitled</title> will display Untitled on the top of the browser when this page is opened.
So, lets make this more personal, replace Untitled with your name, or something you would like others to see.
<title>American-Trucker</title>
Now that a nice title has been put into action, lets work on the body.
Notice the space between <body> and </body>? This is where you place the code for your website.
Lets type a welcome message:
Hello, and welcome to my website.
Click on the file button on the menu, and click “Save As”. NOTE: You may want to create a new folder to save your future projects in as we go. Future projects will include images and other files you will need.
Once saved, open you web browser, click File– Open, and navigate to the page you just saved. This will display your page in your browser, so you can see exactly how it will look.
NOTE: You can also click on the Preview button on the bottom of HTML-Kit to preview using the HTML-Kit built in browser.
Now, go back to HTML-Kit, and find where we just edited the text:
Hello, and welcome to my website.
At the end of this line, lets make the browser move to the next line down. We do this by creating a break tag:
Hello, and welcome to my website.<br />
And now lets add another line of text.
Hello, and welcome to my website.<br />
I hope you enjoy your visit.
Either click save, or preview in the HTML-Kit browser to see the changes.
Click Save if you have not already done so, so we can begin working on the next lesson.
Enjoy!!