Intro to HTML!


Do you ever wonder what's behind the scenes when you visit a webpage?

Web pages are written in Hyper Text Markup Language, or HTML for short. HTML is made up from a set of commands, or tags which determine how and where text appears on the screen. The best part about HTML is that you don't need to buy or download a fancy editor to create beautiful web pages. You can use any simple text editor, and most operating systems come with one. for Windows users there's "notepad," for Mac users there's "TextEdit," and for Unix users there's "vi." This tutorial will cover the basics of using "notepad."

First up, there's a little bit of file management involved. Every web page should live in its own folder, so let's start by creating a folder for your page. In this example we will place our web site in a sub folder of "My Documents."html1.JPG

From within your "My Documents" folder, right-click in the window that contains your files. From this menu select "New -> Folder"
html2.JPG

When your new folder appears, name it "web" Note that I choose simple names with NO SPACES, and NO CAPITAL LETTERS in them. Most web servers are case sensitive and none of them allow spaces in a name, therefore using capitals and spaces and in web addresses are a terrible idea and should be avoided at all costs. If you wish to separate words use underscores instead like this: "my_web_page." If the file name had spaces in it, the person trying to find your site would have had to type: "my%20web%20page." (Not very user friendly is it?) Using the smallest name possible makes your site easier to access.

html3.JPG

Double-click your new web folder. Now it's time to create our html file. Now click the "Start" bar and go to "Run."


html4.JPG

When the run dialog box opens, type "notepad" and click "ok." This opens "notepad" which is Windows' built in text editor.
We're almost ready to get started.

html5.JPG

...but before we do, we need to set up the file as an html file, not the default txt file.
To do this we need to click "File -> Save As..."


html6.JPG


Navigate to your "web" folder by clicking on "My Documents" on the left-hand side, then clicking your "web" folder in the main window.


html7.JPG

Now we need to change the file type by clicking on "Save as type" down at the bottom of the window and selecting "All Files."


html8.JPG

Now you're ready to name your file. The opening page of your website should be called "index.html"
This is a reserved name that the web browser will seek out when a user enters your url. You can name the sub pages whatever you want as long as they use ".html" as their extension.

html9.JPG


Phew! Now we're ready to get started! Click here to continue...