Basic Web Design Tutorial Part 1

Example 1 – a simple HTML webpage

I’ll drop you straight into the web design with an example. Create a text file and copy the code below. Save it as “index.html” on your computer somewhere. Now double click it to open it in your default web browser.

<html>
<head>
<title>The Hello World Page</title>
</head>
<body>
Hello World!
</body>
</html>

Or view mine: Example 1 (opens in a new browser window)

Note: most web servers run Unix style operating systems (as opposed to windows). Unix systems are case-sensitive with filenames, so on a Unix system you can create “MyFile.html” and “myfile.HTML” and these are 2 separate files. To avoid confusion just use all lowercase in all of your filenames and directory names. By default a webserver which is asked for a page from “http://www.mydomain.com/” will return the file called “index.html” on the server. This is the best place to put the website homepage.

Notice how the title bar of your web browser includes the name of the page.

Note: most browsers have a “View Source” option somewhere (under the View menu on Firefox). This will show you the HTML source for the page you’re looking at.

OK, so what does it mean? Well, the things inside the angle brackets – that’s < and > – they’re tags. They tell the browser things and don’t really appear in the page (as such).

<html> on the first line means “start of the HTML section” and the </html> on the last line means “end of the HTML section”.

Inside that are two other sections, the HEAD section and the BODY section. The HEAD section gives the browser information about the page (such as in this case the title of the page – which usually appears on the browser window bar and will be used if you bookmark it). The BODY section contains everything that will be displayed in your main browser window, in this case just the words “Hello World!”.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Leave a Comment