CREATING A WEB PAGE

`All of these codes, can also be used to create WebTV email signatures.`
`At the bottom of this tutorial, there is an html test bed, so you can "practice" what you learn! After each section, you will see a link that says "back to test bed". You can use these, when you are using the html test bed.`
The first step in creating your own web page, is of course obtaining one. There are many different places to go and get one. I have listed several of them right here. My favorite is Geocities. All of these have basic editors (you just basically fill in the blanks to create your page.)That way you dont have to know any of this html stuff, and they all have advanced editors. That is where you will need to learn some html. I think it is more fun using html and you have much more control over your page. It is easier though, to start with the basic editor. You can always convert your page to html, whenever you are ready. If you havent already done so, here are a few places to get your free web page:
`GeoCities`
`Angelfire`
`Talkcity`
`Tripod`
< p>After you get your homepage, you can start work on it. If you decide to use the basic editor, it is pretty self explanatory. If you choose the advanced editor, here is what you will do. You will log into your file manager, and there will already be a file in there, called index.html. That is your main page. That is where you will start editing. When you go into edit it, there will already be some codes there. I always erase those, and start from fresh. However, you can leave it and use it as a guide, if you like. You will be using html, to make your page. That stands for Hypertext markup language. Beginners Tag List (back to test bed)Here are some html tags you will be using to create your page. Some of these tags will need closing tags. The ones that do, I will put the closing symbol at the end. <<>p<>> this is a paragraph. it will create a couple lines of space between something. <<>br<>> this will make the current line end and a new one to begin right under it. <<>b<>> will make text bold.<<>/b<>> <<>i<>> will make text italicized.<<>/i<>> <<>hr<>> creates a horizontal line on your page. <<>center<>> centers whatever is surrounded by these tags.<<>/center<>> <<>font size=x<>> controls size of text. Replace the x with a number 1-7. 1 is smallest, 7 is largest.<<>/font<>> <<>font color=xxx<>> controls color of text. Replace x with a color name.<<>/font<>> <<>blockquote<>> indents every line of text in between these tags.<<>/blockquote<>> <<>tt<>> makes text look like typewriter text.<<>/tt<>> <<>u<>> underlines text.<<>/u<>> <<>marquee<>> makes a line of text scroll across page.<<>/marquee<>> First Step (back to test bed) If you are starting with a blank index file, you will need to cut copy and paste the codes below, into the blank file. (If you need to learn to copy and paste, go here).Any new blank file you create, will have to have these codes to start with. It is the basic stucture of any html document. These html tags are what is needed for a browser to recognize an html document. <<>html<>> <<>head<>> <<>title<>> <<>/title<>> <<>/head<>> <<>body<>> <<>/body<>> <<>/html<>> Title your page (back to test bed) After you have these basic tags in your document, you are ready to go back and start putting things where you want them. The first thing you will want to do after getting the basic stucture tags in, is give your page a title. Find the <<>title<>> and <<>/title<>> tags, and in between them, put the title of your page. That is what will show up in the title bar, when your page is viewed. You will need to choose a background, some images and some links. Of course all of these are optional, depending on what you want on your homepage. I have put a link here to some backgrounds, images and midis. Background and color codes (back to test bed)Next, find the <<>body<>> tag, and we will start adding to it. It will end up looking something like this: <<>body bgcolor="xxxxx" text="xxxxx" link="xxxxx" vlink="xxxxx"<>> Just fill in the xxxx's with the colors you want to use. In case you are wondering, bgcolor is what color your background will be. Link is what color your links will be, and vlink is what color the links will be after they are visited Here is WebTV color chart, so you can choose from a variety of colors. If you want to use a background that you found on the internet instead of just naming a color, here is the code you would use for that. It is slightly different than the other code, so be careful. In place of the words: bgcolor= you would put: background= EX: <<>body background="url of the background goes here" text="xxxxx" link="xxxxxx" vlink="xxxxx"<>> And then just replace the xxxx's with the color you want. How can you get a moving background? Try this: <<>body background="url of background" xspeed="40" yspeed="40"<>> x is the horizontal speed and y is the vertical speed. CLICK HERE for an example. You can add whatever else you want to your page, and you will add it between the 2 body tags in your document. Images, links, writting and anything else you want. Getting the url of backgrounds, images and midisClick on the image or background you want. Hit your "go to" button, and choose "show last". what pops up in the window is the url you need. Getting the url of a page is the same only you dont have to click on anything. Just hit "goto" and "show last". Also, to get the url of a midi, you will need to be listening to the midi, then hit "goto" and "show last". you will see the url of the midi. ImagesHere is the code used to add images: (back to test bed) <<>img src="Full url of image here"<>> You can center it using the center tags or if you use no tags, it will be put on the left of your page. You can put it Where ever you want it. aligning an image you would use this code: <<>img src="url of image" align=middle<>> you can change middle to left or right. The image will go to the side of the page you specify. MusicThis is the code for adding music to your page: (back to test bed) You put it in the body part of your document. <<>embed src="url of midi goes here" autostart=true loop=infinate<>> Creating Links (back to test bed)The code for linking to another page, is this: <<>a href="url of page here"<>>xxxxx<<>/a<>> You will replace the xx's with the name of the page. Horizontal lines (back to test bed)If you want a horizontal line to only go part way across your page, use this code: <<>hr width=25%<>> the line will only go across 25% of the page. you can put whatever percent you want. More on Marquee (back to test bed)There are several different things you can do to a marquee. First, you can control its speed by using these attributes: and dont forget to use the closing marquee tag on these. <<>marquee scrollamount=4<>> This controls the speed. You can use any number you like. 1 is the slowest. Keep in mind though, that the faster it goes, the harder it will be to read.You dont have to specify any speed. HERE is an example. You can also control the width. <<>marquee width=25%<>> It will sroll only across 25% of the page. when using the width attribute, you also specify if you want it on the right, left or center of page: <<>marquee width=25% align=center<>> HERE is an example. <<>marquee width=25% align=left<>> HERE is an example. <<>marquee width=25% align=right<>> HERE is an example. You can also make the text bounce back and forth, using this tag: <<>marquee behavior=alternate<>> HERE is an example. You can also use the marquee tags, to make text blink. <<>marquee scrollamount=500 scrolldelay=400<>> HERE is an example. You can also use this code: <<>center<>><<>font color=yellow<>><<>font size=6<>><<>marquee width=50% behavior=slide direction=right scrollamount=10<>>This is how<<>/marquee<>><<>marquee width=50% behavior=slide scollamount=10<>>it will look<<>/marquee<>><<>/center<>> to make THIS And again, dont forget to use the closing marquee tag. More on Fonts (back to test bed)There are 7 different font sizes. <<>font size=1<>> <<>font size=2<>> <<>font size=3<>> <<>font size=4<>> <<>font size=5<>> <<>font size=6<>> <<>font size=7<>> You can also change the font color. Let's say you use this code: <<>center<>><<>font color=blue<>><<>font size=7<>>How will this look?<<>/font<>><<>/center<>> This is how it will look: CLICK HERE Headings (back to test bed)There are 6 different heading sizes you can use also. You would put these in between your head tags in your document. The tags wont be this size in your document, but the text you put between them will be that size. <<>h1<>><<>/h1<>> <<>h2<>><<>/h2<>> <<>h3<>><<>/h3<>> <<>h4<>><<>/h4<>> <<>h5<>><<>/h5<>> <<>h6<>><<>/h6<>> Creating Tables (back to test bed)You can create your own tables, with a few simple tags. Or you can cut, copy and paste these codes on your page, and then edit them how you want to. Any table will have this basic set up. <<>table<>> <<>tr<>> <<>td<>><<>/td<>> <<>td<>><<>/td<>> <<>td<>><<>/td<>> <<>/tr<>> <<>/table<>> The table tags, begin and end the table. The table row tags: <tr></tr>defines one row going across the page. Each table data tag:<td></td>define what is in each row. However many table data tags you have, is how many columns is in each row. I will do a quick example of a table that will contain 12 items. You will need 3 rows and 4 columns.It will look like this:<center> <table border=20 width=70% cellspacing=10 bgcolor=yellow> <<>tr align=center<>> <<>td width=25%<>><<>/td<>> <<>td width=25%<>><<>/td<>> <<>td width=25%<>><<>/td<>> <<>td width=25%<>><<>/td<>> <<>/tr<>> <<>tr align=center<>> <<>td<>><<>/td<>> <<>td<>><<>/td<>> <<>td<>><<>/td<>> <<>td<>><<>/td<>> <<>/tr<>> <<>tr align=center<>> <<>td<>><<>/td<>> <<>td<>><<>/td<>> <<>td<>><<>/td<>> <<>td<>><<>/td<>> <<>/tr<>> <<>/table<>> <<>/center<>>Now I will explain all the extra things I added. The tr tags (table row) is how many rows we have. we want 3 rows, so notice there are 3 sets of tr tags. I centered the table by using center tags. To make the table stand out from the page, I programmed a border of 20. I made the width 70%, so it will go across 70% of page. (there will be 15% of space left on each side of table). You can also add a height attribute to stretch your table out if you want. You would use a percentage. Cellspacing is some extra width added to border, to help give a flat appearance to your 3-d table. I used the number 10. bgcolor is the color your table will be. In between the td (table data) tags is where you put your link. You want what is written in each of these to be centered, so everytime you begin a new table row, you will begin it like this: <tr align=center>You also want the table data cells to all be the same size, so in the first row, you would choose a percentage. That is why the table says:<td width=25%>. You only have to do this in the first row. That will take care of each column. A little explanation: A whole page is 100%. we had 4 columns. 100 divided by 4 is 25. that is where I got 25%.The best way to learn tables, is to change the attributes and numbers and just see what kind of table you can come up with. You can always come back here and cut, copy and paste this one. All that is left now, is to put your links in the table data cells, using this code: <<>a href="url here"<>>xxxxx<<>/a<>> I put an example of what this table looks like here. If you wanted the table the same color as your background, leave out the bgcolor=yellow, and this is what the table would look like: CLICK HERE. Here is an html test bed for you to use what you have just learned. You can click here, and go to the first step, and practice in this test bed. After you have copied the codes you want to use, click the link that says "back to test bed", and you will jump right back here. Just hit "View html" to see what your codes look like in action!Pick any link to be taken to that section of this page. (tag list)(title)(backgrounds)(images)(music)(links)(horizontal lines)(marquees)(fonts)(headings)(tables) below the test bed, is the url of an image, a midi, and a background that you can use to practice with. There is also a page url to practice linking. Image - http://www.geocities.com/Heartland/Garden/2602/images/3dheart.gif background - http://www.geocities.com/Heartland/Garden/2602/bgs/swirls.gif Midi - http://www.geocities.com/Heartland/Garden/2602/midis/cowboy.mid page - http://www.geocities.com/Heartland/Garden/2602