| You Can Create A Simple Web Page Right Now! | |
| A Brief Intro | |
| If you have a basic
knowledge of computers, I am very confident that you can complete this
very simple web page tutorial.
To complete this lesson you do not need to know a lot of technical stuff. The best way to learn HTML, like anything else, is by doing. In this lesson I use bold to distinguish some techy terms and try to explain them to you. Don't be disappointed when you see your results at the end of this lesson. This is very basic stuff but nonetheless very useful info to take you to the next level if you decided to pursue this further. Let's get started... |
|
| First... | |
 |
Go to Start>Programs>Accessories>Notepad Once Notepad is on your screen [If you followed the instructions above] simply type this in exactly as you see it. <html> <head> <title></title> </head> <body> </body> </html> You might be saying at this point, that is just too easy. Well in essence that's true. What you have actually done was created the html codes that will hold all of your information. These are the most important elements in learning how to code html. The items you see above are called codes. Codes are really just text [alpha-numeric characters] and are so called because they are the building blocks for creating webpages. Each element you see .ie. html head, title, etc. are contained within a tag and are so-called. HTML stands for Hypertext Markup Language and it's the language format for the web. Unfortunately the term is beyond the scope of this lesson. Think of creating html pages in this way. Say you want to write a letter, do a presentation, create a flyer for your business or whatever, you will more than likely do it in Microsoft Word or maybe Microsoft Powerpoint or even Notepad. You can do the same thing with HTML. Only now your browser will display your final work instead because now you are coding for the web. Your browser [Internet Explorer, Firefox, Netscape, etc.] have to parse [interpret] the codes before it can display content to your visitors. Summary: What have you done so far? Simply put, you told the browser to prepare your page so that when you write what you want, it will display in the browser window. So now that your codes are all in place, what's next? Now you will add content to your page. You should still have Notepad open and all those text typed in exactly as you see them above without anything else on your page. Be sure to use all lower case letters. Now let's write some information between those tags. Click your mouse cursor between the <title></title> as below... <title>|</title> Now type this My First Web Page Your text should now look exactly like this... <title>My First Web Page</title> Now in Notepad go to your file menu and click on "Save As". Then on the bottom where it says "Save as type:" click on the arrow on the right and select "All Files(*.*). Now type in the word index.htm in the File_name: box and click "Save". Now go to "Start>Documents" and look in the list that comes up for the file called index.htm and click it. You should now see your Browser come up with a blank page. But look in the top most left corner of that page and you will now see "My First Web Page". It is located on the same line where the title of your browser resides. For example, if your browser is Internet Explorer, the words "Internet Explorer" will be located immediately to the right of the page title you wrote. Summary: What have you done so far? You told the browser whatever I write between these title tags make it show up in the top left corner of the browser window. You might be asking what's the sense in doing this? Well there are many but it also helps the search engine as well to properly display search results when visitors are sorting through your pages in google for instance. Now leave this page open but go back to your Notepad again. Now look for the <body> text you typed in earlier and click your mouse at the end of the word body and space it like this <body |> If you are using Internet Explorer browser type in the word bgcolor="silver" Your text should now look exactly like this... <body bgcolor="silver"> If you are using Netscape browser then type this in but it might be safe to use the above codes as well. <body bgcolor="#C0C0C0"> #C0C0C0 is called a hexadecimal color which in this case makes it the equivalent of silver. It's just basically what the browser will use to interpret your color properly. But as you may also note, browsers can also interpret the actual word 'silver' but you want to be careful in the event some browsers won't so be safe and use the hex equivalent instead. Now go back again and save this page but this time [provided you did not close Notepad] click on "File" "Save". If you did close Notepad then go back up in this lesson to read up on how to reopen it and save. Now once again click to open the other window where you saw the "My First Web Page" window. Then on your keyboard press "F5". F5 will refresh the page and update the page to show the new information. Notice that now your background is now silver! Summary: What have you done so far? You told the browser whatever I type in the body tag make it change my background color to the one I specify. In this case silver. Summary: The word "bgcolor" stands for background color. The equivalent numbering system that is used for displaying color values is called hexadecimal. |
| A Word of Caution | |
 |
Some versions of Netscape will not recognize colors when you type them in as words. i.e. <body bgcolor="silver"> In other words, some earlier versions of Netscape browsers will not display your web page background colors unless you use the hexadecimal equivalent. In this case the hexadecimal equivalent of silver will be COCOCO. That is the letter C and the number zero. This is only a practice page and should not be necessarily used on a professional level. |
| Let's Continue... | |
 |
Once again go back to Notepad and this time look for <body> </body> And place your mouse like below... <body> | </body> Now type this... I finally wrote my first web page! Your page should now look exactly like this... <body> I finally wrote my first web page! </body> Once again Save that file then go back to your silver background page window and press F5 on your keyboard and now you should see your new text. Summary: What have you done so far? You told your browser whatever I type between these two body tags make them show up in my browser. Note that none of your codes showed up while viewing your web page in your browser. If you ever see them, you did something wrong. The problem is usually forgetting to use the < > properly or typing the brackets too many times. You must close your tags. For instance, <title means you forgot to close the tag like this <title> However, as you can see from these lessons, your tags can also show up in your actual pages if this is what you intended for them to do. A brief explanation on tags. Many tags has to be opened and closed before they can work properly. For instance, the title tags has to look like this <title> </title> The forward slash before the second word "title" is letting the browser know that the title tag ends here. That way your title will display properly. Note that this is also true of other tags but not necessarily true of all tags! Not to complicate things but these days more tags are been closed to comply to new standards but this is beyond the scope of this lesson. |
| Diploma Time... | |
 |
Congratulations! You have created your first web page! As you can see this is just a very basic lesson but still not one to be taken too lightly. The standards do change from time to time so you will have to further advance your skills if you are serious about building websites. I recommend www.w3schools.com whenever you are ready to dive more into codes.
Feel free to contact me and I will be glad to be of further help if I can. Gracias mi gente!. |