HTML for idiots...
HTML Scripting Helper
So obviously you want to know how to create your own webpage using Hyper-Text-Markup-Language!! Some of you may look at my webpage and think that it's totally awesome and say to yourself, "I want one of my own!" Well, some of the people I have talked to that saw mine and then wanted one even more have been turned away from making a website because lack of knowledge. I happened to show them everything that you have to write behind the screen to make the page appear as it does when you view it.
First of all, most places have at least two different types of modes to create a webpage in....easy editor, or HTML editor. HTML/Javascripting is a lot better because you can customly edit your page rather than being restricted to the options that the editor gives you. This is just a very condensed and I still advise you to read a book on HTML, but you still should be able to pick stuff up on here. I have also put this page in an order of what you probably need to know first and last. If you have any questions, be sure to e-mail me
Table_of_Contents
Back to Main
Webproviders
Starting Website
Tips and Advice
Basic Commands
Advanced_Commands
Tables
Tables in Tables
Webpage Outlines
Form's
|
Webproviders
It is important to get a good webprovider. First you must look at their services, and then their space. One place I DO NOT recomend is geo-cities. I paticuarly don't like Geo Cities because when you go to any page owned by them, an add always pops up and it just gets irritating. A place I do recomend is Freeservers or Fortune Cities. I know first hand that these sites are high quality. I know their are other sites but I don't know personally and or have forgotten some. I think Webjump is also another excellent webspace-provider. Another thing to look at is what they give you. Freeservers allows CGI-scripting which allows you to create forms so people can fill them out and they will be emailed to you. It also includes 25 megs of space which is huge. Most other places don't include CGI-scripting but usually provide a fair ammount of space. It's all in what you like the best
|
Starting a Website
Everyone doesn't start out creating the best webpage immediately. First you need to know the basic commands.. All commands used in HTML are in carrots, < >, and most of them will need a command to cancel them... for example: < H3 >Starting a website< /H3 >. If you don't need to cancel the command and you type it out, it would be the same as not having it there.. you do not need to cancel < p > or < hr > comands. I will put an astich, *, by each of the commands that need to be canceled.
These are the bare minimum commands you need to write a page:
*< HTML >
*< H1 >-< H6 >
< BR >
< P >
|
Type this first.. it tells your webeditor that you will be using HTML
This creates Headers 1 being biggest and 6 the smallest
This has the same effect as enter, Break Rule.
Starts a new Paragraph
|
These are commands that you will need as a bare minimum. For you're first page, you will just have to create a page and it will automatically become your index page. After you have created an index page, you can see that this is the page that shows up when you type your site address however you don't have to type index.html after your site address. However this differs on other pages.. You will need to create other pages as "Name.html" because these are your pages that branch off from your index page. My site for example:
Index page: "http://ericclark.freeservers.com"
Another page: "http://ericclark.freeservers.com/matrix.html"
When you get your webpage, store all your picture files in a different directory. Only have your "HTML" pages in the main directory. This will make loading alot faster when you are going to edit a page on your webage, so you don't have to wait on all the pictures to load
When typing commands in your webpage, type them in CAPS so you can tell the commands from the text a little easier
At the end of Paragraphs, tables, or some commands, hit enter to leave space so it is easier to find certain spots on your HTML-editor.. Striking enter in the HTML-editor will only appeare in HTML-editor. It doesn't effect your webpage, because you must use the command < br > to have the enter effect appear on what you view as the "finished webpage."
You can type commands inside commands.. ex: < center >< b >Big John< /b >< /center > you ALWAYS cancel the last command first and work to the first command... in this case you cancel bold and then center otherwise you may expirience troubles..
Cut & Paste are your friends!!
Leave a way for the user to contact you incase there is an error in your webpage, imagine that
Extra Goodies
Here you will find a lot of extra's which is what makes a lot of pages look so cool! You will need to know how, where and what to use for these to be put where you want... I will try to explain this, but some you have to figure it out yourself. Also, be creative!! You can use commands inside of commands if you haven't figured out by now, but you have to make sure that they aren't commands that will interfere with each other..
More_Advanced_Commands:
< HR >
*< B >
*< U >
*< CENTER >
*< I >
*< STRONG >
< LI >
*< OL >
*< UL >
*< SELECT >
*< A HREF="a link">
Link Name< /a >
*< A HREF="mailto:email" >
Email Address< /a >
*< A HREF="#sec1" >
Name< /a >
< A NAME="sec1" >
Name< /a >
< IMG SRC="image" >
|
What they mean/do
Puts a line through page, Horizontal Rule.
Makes anything Bold
Underlines wording or phrases
Centers images, headers, or writing
Puts words into Italics
Emphasizes certain words
Puts a bullet in front of paragraphs or phrases
Creates an "Ordered List"
An un-numbered list that moves section to right 5 spaces
Creates a menu or scrolling list
Links to another page.. For this the "A" in the beggining is an ancore. The "Link Name" is what the viewer will see, and you have to cancel the ancore, < /a > after the link name.
This is so people can email you. Same as link, but you put your email address instead of website in brackets
This Allows you to have Internal Links First you put the first command, < a href="#sec1">Name< /a >, where you want the link to be at... and then you put the second command where you want the link to be going. To have more than one internal link, just change the number. This also is just like a basic link
Puts an image from file manager down
|
After you have these codes down, you should be able to create a webpage with the basics. You should know the codes for links, e-mailing you or other people, how to put pictures on your webpage, and most of the text codes (center, underline, etc), etc... You should now be able to build a halfway successful webpage..so go try it out if you haven't already! But don't spend to much time on placement yet, because in the next part you learn how to put a little more structure in your pages.
|
In this chapter, you will learn how to creat a basic table.. If you think my webpage is "spectacular," you're in for a suprise. I have only used one type of table and all the stuff you already know at the top, nothing more. You may be asking what a table is. A table is simply something that add's a little more form to your webpage, like two or three collumns in a page.. In fact, I have used this same table to place the coding for the table to the right!
|
< TABLE >< TR >
< TD ROWSPAN="3" >
< /TD >< TD >
< /TD >< TD >
< /TD >< TR >
< /TABLE >
|
First of all, if this will set up an invisible table. You type or put your picture after "TD ROWSPAN="3"" and then you type "/TD" when you are done with that collumn. You then type "TD" and can start a new collumn... You can do this to have infinate collumns, and you can also have collumns inside collums so be creative!! In this example, you would show up with 3 different collumns. Also, the table that has the "advanced comands" in it is a table with a border. For you to creat one of these all you have to do is type "TABLE BORDER" enstead of "TABLE" when you start your table.
Tables in tables are very useful.. If you are a little confused by what I mean, look carefully at my index page, which is main page that you came to here from. If you look to the right of the matrix picture there is a counter and under that is two more collumns of links.. So I have created another table after the countdown allowing my to have two collumns directly under the counter. For doing this, alls you have to do is create another table inside the first table where ever you want the 2 collumns inside the bigger collumn at..
Table_in_Table_Coding
< TABLE >< TR >< TD ROWSPAN="4" >
Here is collumn 1, table 1 text
< /TD >< TD >
This is collumn 2, table 1 text
< TABLE >< TR >< TD ROWSPAN="3" >
This is collumn 1, table 2 text
< /TD>< TD >
This is collumn 2, table 2 text
< /TD >< /TR >< /TABLE>
< /TD >< /TR >< /TABLE>
|
Explaining Table
Somewhere in a collumn, you have to create another table.. in this case the 2nd table will be in collumn two, the right collumn, and will split the collumn into 2 more parts. This would be collumn 2 table 1 and collumn 1 table 1 would be the coding I have provided.. This should give you some ideas about how you can use tables in tables and what it looks like.
This is collumn 1 table 2 according to the coding that I have provide to the left of this.
|
This would be the 2nd collumn 2nd table. This is just to give you a basic idea of what you could do or what it looks like... |
|
In creating pages for awhile, I have created my own outline enstead of using the ones that "easy builder" gives you. This way you can make your page look somewhat dressy and also a little more like what you want.. Here is all you have to type for the structure of your page:
< HTML >< BODY >
< HEAD >< TITLE >Title at top (for this page, HTML for Idiots)< /TITLE >< /HEAD >
< BODY bgcolor = "#000000" text = "#009900" background="some picture" link="#FF0000" vink ="#FF0000" >
<
< CENTER >< H2 >Main Title< /H2 >< /CENTER >
< TABLE >
< TR >< TD ROWSPAN="3" >
< H3 >Links< /H3 >
< A HREF="link address">Link Name
"
"
< /TD >< TD >
< /TD >< /TR >< /TABLE >
< /BODY >< /HTML >
|
Testing Page
Links:
Link1
Link2
Link3 |
Type text or put pictures here! This
is what outline of the page would look
like when you type the code to the
right in the HTML editor.
|
|
Forms can be useful in many ways but first you have to have a webprovider that allows certain forms. Sign-up sheets use CGI-Scripting and a lot of webpage providers don't like to give their users this option becuase it is easy for people to hack into. Freeservers allows CGI-Scripting and that is basically the only "descent" place I know of currently.
Forms can come in handy for Sign-up Sheets, like I have in my Jedi Knight page, Surveys, and a Guestbook. Sign-up Sheets and Surveys are filled out and then e-mailed to you by your webpage provider, where guestbooks are posted on your site automatically. You can either make your own guestbook, or can download some from several different places.. Later on, I will have code concerning forms.
9/13/99
Created: 9/12/99
