|
(please note: this tutorial assumes you are using the Windows operating system)
Step 1: Open your Notepad program. Click your Start button and select “Run..." from the Start menu. Type in “notepad" and click the OK button.
Notepad will open and you will be presented with a blank document. If you ever want more than one document open at a time you can always go back to “Run…", type notepad, and click OK.
Step 2: Let's create our directory structure. By “directory structure" I'm talking about how our site's files will be organized. A web site's directory structure is organized the same way all of your computer files are organized – by folders.
Where you create your web site's directory structure is a matter of preference. Most people prefer to put all of their work files in their “My Documents" folder. Let's start there and create a new folder called “Web". Once that is created open your “Web" folder and create a folder named “Site1". This “Site1" folder will be the starting folder (also known as the Root folder) of our site's directory structure. When you have created the “Site1" folder please open it and create two more folders: one named “images" and the other named “documents".
Your “images" folder will be used to store all of you site's future gif, png, and jpg images. Your “documents" folder will hold all of the documents you create that are associated with “Site1". An example document would be a word document that holds content that you have written for an area of your site. Perhaps your resume or a biography. Other documents would be Photoshop files, Flash documents, Excel sheets, and just anything else that will not be published live on your web site.
Step 3: Now that your directory structure is made, go back to Notepad. I am a HUGE advocate of S.D.F! SAVE DOCUMENTS FREQUENTLY! So before we even begin typing anything into our new document let's save it to our “Site1" folder.
Press these two keys together to save your document: Ctrl + S
After pressing these two keys together you will have a “Save As" dialogue window popup. From this screen find your “My Documents" folder, then your “Web" folder, then your “Site1" folder. In the “File Name:" field, type “index.html" and click the “Save" button. Make sure you do not enter “index.html.txt", it must be “index.html".
I will explain why your first file is name index.html. Web pages can be called numerous things: index.htm, index.php, index.asp, default.html, links.html, login.cfm, users.jsp, etc. but imagine if your site – www.mysite.com - had 100 pages, all with different names. What page would display first is someone went to www.mysite.com? By default, a server (a server is a computer where all of your web pages are stored) looks for index.html and will display this page when someone visits your site.
This is why our first Notepad file is named “index.html". This file will be our starting page for our site (also known as our “home page" or “main page").
Step 4: Now we can begin typing in our first HTML tags. For now I will do all of the work for you and just paste everything you need to start with to make your first page:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
</body>
</html>
Now I will explain what all of these tags mean and why they are in this order.
<html></html>
These tags are very important! Your HTML web page is not properly formed if they are missing or left out. The <html> tag must always be the first tag and the </html> tag must always be the last. The <html> tag is called and opening tag and the </html> tag is called the closing tag. You'll notice that what separates the two is that the </html> tag has a forward slash in it. The <html> tag is what tells your browser the page that the code it is reading is going to be a HTML document.
A HUGE rule of thumb when coding is that when you create an opening tag that you follow up with it's closing tag right after it. This is because it's easy to become lost in complex code and forget to close tags. When this happens it becomes a nightmare to debug and find which tag is not closed properly. You will not receive an error message if there is an HTML closing tag missing, your browser will simply show the HTML file to the best of it's power.
Web Jargon
- When a web browser program shows a web page it called “Rendering"
- When a web browser program reads a web page's HTML code is called “Parsing"
<head></head>
For now, just remember that the <head> tags surround the <title></title> tags. In future tutorials the purpose of the <head></head> tags will be explained further.
<title></title>
This tag, as you may have already guessed, tells the web browser what the name of the web page is. What you type between the <title></title> tags is what will be displayed in the title bar of your web browser.
<body></body>
The purpose of these tags is that they surround everything that will be rendered in your browser. Links, content, images, forms, etc.
Step 5: Now that we have our HTML code pasted in our “index.html" file in Notepad, pres Ctrl + S again. Your file's new data will be saved.
Step 6: Open your Internet Explorer web browser. When IE has opened select “File" from the menu, then “Open", browse for your “index.html" file located in your “Site1" folder and press the OK button.
Your web page will open and you should see “My First Web Page" in the title bar and a blank white screen.
Step 7: Lets put something in that blank white space. Between your <body></body> tags type “HELLO WOLRD!" Your file should look like this after:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
HELLO WORLD!
</body>
</html>
Press Ctrl + S to save, then go back to IE and press the refresh buton.
Congratulations! You have your very first web page!
In my opinion, making sure you have all of the above tags and follow the golden rule of closing tags when you open them EVERYTIME you create a web page is one of the toughest things in creating an HTML page from scratch. The next hardest thing would be to create complex tables, but tables will be covered in a future article :)
Step 8: Of course, HELLO WORLD on a web page has been done to death and boring. You can use new HTML tags to start filling out your home page.
To end this tutorial I will teach you an invaluable tag called the <a> tag. The <a></a> tags create a link. I have modified our “index.html" code below to illustrate how these two links work.
<head>
<title>My First Web Page</title>
</head>
<body>
<a href="http://www.url.biz">Free Ad Placement</a>
</body>
</html>
You'll notice that the <a> tag has grown to <a href="http://www.url.biz">. The “href" part is called a Tag Property. If we put <a>Free Ad Placement</a> the link would not go anywhere. The “href" property tells the browser where to go to when the user clicks that link. In our example the browser will go to the URL.biz web site.
Almost all tags have their own Tag Properties. The <a> tag and <body> tag have several that will be covered in the future.
Here is a short list of the most common tag properties used by HTML tags. | NAME | VALUE | EXAMPLE | EXPLANATION | | height | 0 - Infinity
0% - Infinity | <img height="10">
<img height="10%"> | This property determines an HTML object's height. You can specify the height in either pixels or percentage. Percentages are always determined by the amount of space the object is contained within (i.e. User's browser window height or a table cell's height). | | width | 0 - Infinity
0% - Infinity | <img width="50">
<img width="50%"> | This property determines an HTML object's width. You can specify the width in either pixels or percentage. Percentages are always determined by the amount of space the object is contained within (i.e. User's browser window width or a table cell's width). | | align | left
center
right
justify
| <td align="left">
<td align="center">
<td align="right">
<td align="justify"> | If you've ever used a word processing program (and I really hope you have) you should be somewhat familiar with text alignment. | | class | (css style name) | <p class="style1"> | Only if you are using a Cascading Style Sheet should you be worried about the "class" property. Using the class property will apply the specified style to your HTML object. | | name | (a name) | <input name="email"> | The "name" property is most often used with form objects like text boxes, radial options, drop down boxes, etc. Anchors can be created when the "name" property is applied to the <a> tag. | | tabindex | 0 - Infinity | <input tabindex="6"> | Using the tab key is a quick way to jump through a web page's HTML objects. Forms are the most common example. | Make sure you go to my site for examples of how these properties work!
|
