Html lesson1 - 03/09/02 02:27 AM
You will need the following for this lesson.
1.) A text editor. (something like notepad, ***Not Like MS Word***)
2.) An Internet Browser.
3.) A basic desire to learn html.
So please open up your text editor and lets beguin!!!
Starting to look like that jiberish you used to see hu? But now it should make more sense to you. This concludes lesson one.
1.) A text editor. (something like notepad, ***Not Like MS Word***)
2.) An Internet Browser.
3.) A basic desire to learn html.
So please open up your text editor and lets beguin!!!
HTML
Every html page starts with the <html> tag. it must also end with the closeing html tag </html> The next tag you will see in every html page is <head> then <title>. Both of these have closeing tags as well so your document looks like this so far. <html> <head> <title> </title> </head> </html> Not so hard is it? Lets make a html page now shall we. Pull up note pad, or your text editor now. Okay in between the <title> tags, type in My First Page!!! Now we will add another tag to this lesson. <body> and of course </body> This is where most of your code will go. For now we will simply type in Hello world between them. So your code should look like this now. <html> <head> <title>My First Page</title> </head> <body> Hello World </body> </html> Now Click on >File >Save As > Use the drop down menu to get to desktop and save it as Lesson_1.html You should now have a icon on your Desktop that looks something like your browsers icon. You can double click on it, or click here to veiw your work. Notice in the upper left of the browser... Look it's what you typed in between the title tags. Hello world shold be in the white portion of the browser. Pretty neat hu? Now close notepad. I had you do this for a reason. You need to know how to ga back and make changes after you have closed Notepad. You can get back to the code a few ways. Open notepad click on > File > Open > Use the drop down menu to select desk top > Down at the bottom where it says File of type set that to All Files (*.*) Now see your Page? Double click on it. Right click on the icon on the desk top > Select Open with > Notepad (or other text editor) Double click on the icon then right click anywhere in the page and select veiw source. All of these will open your html code up for you again so you may edit it some more. Nifty hu? So lets do just that. Open your code back up in Notepad. In many tags in html you can add many different variables. This holds true for the <body> tag. <body bgcolor="black" text="white" link="red" vlink="red" alink="red"> What this dose is fairly simple bgcolor="black" This made your back groung color black. text="white" This will make the default for your text color white. Link="red" This will make your links red. vlink="red" This will make your visited links red. For instance, somone clicks a link then comes back the link will still be red instead of purple. alink="red" This makes active links red. So once again here is your code at this point. <html> <head> <title>My First Page</title> </head> <body bgcolor="black" text="white" vlink="red" alink="red"> Hello World </body> </html> So edit and save your code again. Now take another look at what you have done so far. Go ahead, we will wait. If you see no changes, make sure you save with the same file name on desktop. If you did that, then hit refresh. Ready? Good lets continue! Next we will learn the and tags along with an attribute. Just below <body> type in <p align="center"> You should have Hello World below that type in Below that type in <P align="left"> And finaly below that type in Now we are getting somewhere Dont for get to close the Lets look at the code. <html> <head> <title>My First Page</title> </head> <body bgcolor="black" text="white" vlink="red" alink="red"> <p align="center"> Hello World <p align="left"> Now we are getting somewhere </body> </html> Make the changes to your code save it to the same file, and take a look at what this has changed on your web page. The tag starts a new paragraph, where the tag is a caraige return. <p align="center"> will place your text in the center. *Note-this also drops everything down a line You have 2 other options as well. <p align="left"> and <p align="right"> Cool but kinda basic right? Lets make the heading stand out, and learn another couple of tags and attributes. <hr> horizontle rule tag <font> Font tag, *Needs an end tag. <b> Makes text bold *Needs an end tag. <i> Makes text itallic *Needs an end tag. Lets start with the <font> tag. Now I would say the <font> tag is one of the most important tags in a web page. You can put these anywhere in your code. They will decide, what color the text is, how big it will be, what style font it will be. There are 3 attributes for the font tag. Color Face Size You would type them in something like this. Now they don't have to be in any speacial order, nor do you have to use them all!! You can use just one if you wanted to. <font color="red" size="6" face="HE_TERMINAL"> Color You can assign color for sections of text. Size Sizes run 1 thru 6. 6 is the largest, 1 is the smallest Face you can assign a font style to your text. I belive all the ones in note pad work. Just go to [edit] at the top. Then set font. There is a whole list to work with. But there are more. Play around to find what works and what dosen't. So now that you understand the <font> tag, lets use it. Right above Hello World Lets add <font Color="blue" Size="6" Face="Verdana"> . As I mentioned above <font> requires a closing tag. So below Hello World type in </font>. Lets look at the code shall we! <html> <head> <title>My First Page</title> </head> <body bgcolor="black" text="white" vlink="red" alink="red"> <p align="center"> <font Color="blue" Size="6" Face="Verdana"> Hello World </font> <p align="left"> Now we are getting somewhere </body> </html> Now save that and take a look at it. You should see Hello World a little different now. It should still be center, but blue and bigger!! Like a heading should be. If not check your code against the one on the lesson. Now lets look at the <hr> tag. Just above and below the <Font> tags add a <hr> tag. This will put a horizontal line above and under Hello World. But we can do more with this tag as well. You can set the width of the Line in pixels or Percent. Plus you can define what color it will be in the tag. Lets set the width to 50 pixels and the color to gray. One last note on this tag it requires no closeing tag. So it would look like. <hr width="50" color="gray"> Below I included an example of with precent instead of pixels <hr width="50%" color="gray"> So here is your code now. <html> <head> <title>My First Page</title> </head> <body bgcolor="black" text="white" vlink="red" alink="red"> <p align="center"> <hr width="50" color="gray"> <font Color="blue" Size="6" Face="Verdana"> Hello World </font> <hr width="50" color="gray"> <p align="left"> Now we are getting somewhere </body> </html> Now save your work and take look at it. You should see a gray bar above and below Hello World. If not compare your code to the one above. Now the <b> and <i> tags will make text bold and itallic. Both require closing tags. You can use them anywhere withing the <body> tags. I will use each on our code below in and example. This is and example of the <b> tag <html> <head> <title> My First Page </title> </head> <body bgcolor="black" text="white" vlink="red" alink="red"> <p align="center"> <hr width="50" color="gray"> <font Color="blue" Size="6" Face="Verdana"> Hello World </font> <hr width="50" color="gray"> <p align="left"> <b> Now we are getting somewhere </b> </body> </html> This is and example of the <i> tag <html> <head> <title>My First Page</title> </head> <body bgcolor="black" text="white" vlink="red" alink="red"> <p align="center"> <hr width="50" color="gray"> <font Color="blue" Size="6" Face="Verdana"> Hello World </font> <hr width="50" color="gray"> <p align="left"> <i> Now we are getting somewhere </i> </body> </html>
Starting to look like that jiberish you used to see hu? But now it should make more sense to you. This concludes lesson one.