----------------------------------- Html and new website Tutorial | ----------------------------------- My main page: http://webpages.charter.net/jimbobwilly2001/noframe.html Tutorial by Jimmy Ruska ------- Intro | ------- Ok, you've seen a billion websites out there... If a billion people can do it, why can't you!?!?!? It's very easy! You just have to devote some time into it! ///////////////////// ------------------- Getting Right to it| ------------------- Alright, you've got ambition! What else do you need? Ex. 1 Ok to make things easier, go to a folder, click tools, then click folder options. Click the "View" tab. Make sure the "display the full path in address bar" "display the full path in title bar" are checked and make SURE(!!!!!) the "Hide file extensions for know file types" is not checked!!!! If it is checked, uncheck it. Q. wtf, did you just make me do??? A. I just made it so that it shows the full path on the address bar (easier cut and paste of address) and also I made it so that it shows the full extension of a file. e.x. Atextdocument becomes Atextdocument.txt Since usually you cannot create a new html page just by clicking file new in the folder, now you can make a new text file and renaming it to an html. E.x. New text document.txt --> just click rename and change the extentions to...---> Whatevername.html. Q. wtf are you talking about A. Don't worry, I'll walk you though it as we go. /////////////////////// ---------------------------- Quick Start: Intro to basics| ---------------------------- Alright lets start it up! Go to any folder in you C: drive or make a new one. Click file. Select new. If there is an option for html document select if, if not select text document. It created a new file called New text document.txt Right click the file and click rename or click file and select rename. Rename the file to basics.html PHEW! I bet you already knew all that huh... oh well! Alright. Open basic.html and click view and select source or right click anywhere on the page and click view source. It will open up a blank text box with the program notepad Now!!! FINALLY!!! Time to learn the scripting!!! Just start the page off with < HTML > This just says that you have an html page. next is the header tag this just has the title and the meta tags, but I'll go over meta tags later. This contains the title of the page. To setup the title just write. <title>Super awesome title name!! and you made a title done! =start title =end title the body contains the text's colors and background! bgcolor= sets the background for a solid color. If you want an image background you do this type background= this just adds an image for a background. anycolor is replaced by the word or a color or by the rrggbb index color. Red green blue in a hex annotation. so #aaccee of #ffccaa would work but also #128964. They all represent colors. So here is an example. Phew! ya asleep yet? Lets put it to work! Type this in, in notepad! //////////////////////////////////////////////////////////////////// Super awesome title name!! Blah blah blah!!!!!!!!! //////////////////////////////////////////////////////////////////// Note: The That's it! img -> image src= search you can add an alt tag to it too. This is my image, don't touch it. When their mouse goes over the image it shows the message, "This is my image, don't touch it." Main Image Types /////////////////////// GIF= This is a standard webgraphic that can be quite small in size and have a transparent background. gifs can also be made into animations. BMP= Bitmap images are usually relatively large and have good quality. JPG= These range in size and are very useful. /////////////////////// /////// /////// ////// Links| ////// This is how you setup a link--> Cool Site!!!! This is my image, don't touch it. A href= I don't remember what it stands for anymore so why should you, just remember how to use it. Change http://webpages.charter.net/jimbobwilly2001/noframe.html with whatever site you want. Change cool site!!!!! with a description of the site your linking. just ends the link, that's all. You can also add the target attribute for the link to open in a new window. Cool Site!!!! ...that's about all you need to know as for links. Phew!! Alright, before we go to tables lets get everything straight and pretty. Type this in your source! ///////////////////////////////////// Super awesome title name!!
  • Cool Site!!!!: Rpgs Galore! is an awesome site! ///////////////////////////////////// Note:
  • Just makes a dot for a list. Great! That was pretty easy, eh? Now tables... /////// Tables| /////// This is a table blah
    creates a table. you can also give it attributes-->
    They are all kind of self explanitory right? Cellspacing is just the spacing between the table squares, padding and border add some thickness to the links align ... it aligns it right left center top bottom pick one. creates a table row
    creats a table's dimentions, or contents. ok lets make a small table then. ///////Make a table and color it brown and center it. /////////Make a new row /////Make a new dimention, or "box", I'll explain font in a minute. /////Same as above ////ends old row //////creates new row. ///////////Create 2 boxes and ends old row. /////end row ///////////Another two boxes /////end table rows and dimentions
    NameHeight
    Edith Cox5ft
    Mrs. Dwarf3ft
    ///close table Phew! Ok paste this into your source! ///////////////////////////////////// Super awesome title name!!
  • Cool Site!!!!: Rpgs Galore! is an awesome site!
    Name Height
    Edith Cox5ft
    Mrs. Dwarf3ft
    ///////////////////////////////////// NOTE: Some text <-- this is just an easier way of changing the size and color of your text. change orange to whatever color or expiriment with size. You can also make the table "cells" or what I call the boxes, different colors. Paste this into the source. ///////////////////////////////////// Super awesome title name!!
  • Cool Site!!!!: Rpgs Galore! is an awesome site!
    Name Height
    Edith Cox5ft
    Mrs. Dwarf3ft
    ///////////////////////////////////// Some other attributes:

    <-- Like pressing enter twice
    <-- line break, moves to the next line

    <-- horizontal line. example Ok paste this into your source! ///////////////////////////////////// Super awesome title name!!
  • Cool Site!!!!: Rpgs Galore! is an awesome site!

    Name Height
    Edith Cox5ft
    Mrs. Dwarf3ft

    Right above is hr
    The space between the above text and this one was created by the br

    The space between the above text and this one was created by the p

    ///////////////////////////////////// /////////////////////////////// Text: Font, Size, Color, style/ /////////////////////////////// Put whatever font you like into the "", I usually just look at them through MS word. makes text under lined This text is underlined This text is not. makes text bold This text is bold! This text is not. makes your text italic ok. Get the pattern? Good!

    makes your text very very big

    makes your text really big

    makes your text big

    makes your text average ...and so on...

    THIS IS HUGE FRIGGIN TEXT!!!

    That's about it! /////////////////////////////// ///////////////////////// Adding music to your site/ ///////////////////////// just paste your song with the yoursong.mid area. autostart asks if you want the song to start right when the page loads, if you do, then leave it true, if you don't, make it false. loop asks how many times the song is played, put a number and that is how many times it will repeat, leave true and it will keep playing, put false and it will play once. PLEASE DON'T PUT MP3S: It takes too long to load the background song and it'll lag your whole site if the guy's connection is slow. Use midis found at www.musicrobot.com or if you like video games www.vgmusic.com Go to yahoo and search midis or "whateverband" midis /////////////////////////// Phew! Done already... :) That wasn't too bad huh? FINAL REVIEW: Paste this to your source: //////////////////// Super awesome title name!!
  • Cool Site!!!!: Rpgs Galore! is an awesome site!

    Name Height
    Edith Cox5ft
    Mrs. Dwarf3ft

    Right above is hr
    The space between the above text and this one was created by the br

    The space between the above text and this one was created by the p

    THIS IS HUGE FRIGGIN' H1 TEXT THAT'S BOLD AND UNDERLINED!


    This is underlined and italics text in green!
    //////////////////// GOOD JOB! It's not as important to be able to reproduce it by memory as it is to know where to find the information to reproduce it! Just keep checking your notes and referrences til' you remember it by heart... but like everything, YOU NEED PRACTICE. //////////////////// Finding a web host./ //////////////////// www.tripod.com : 20mb webspace : 1gb/month Bandwidth www.yahoo.com : 15mb : ????????? there is a bunch more free ones but these are nice. You can use an editor to make your sites... but it just isn't the same... I use it sometimes, but just as a reference or to see if there is anything cool it can do that I can't. //////////////////// I won't cover frames because I believe everything can be done alot better just through tables. I'll make an advance guide to tables and layouts later. FAQ! Q: How do I make the link at http://members.whatever.com/me/mypage.html open right when they open http://members.whatever.com/me/mypage.index ??? A: You have to rename your "mypage.html" to index.html . It's that simple. Then whenever http://members.whatever.com/me/ is accessed it automatically opens http://members.whatever.com/me/index.html without the user having to type in index.html manually. Q: I did this site from my computer by hand or with and editor and when I uploaded the site NONE OF MY IMAGES MUSIC AND MEDIA WORK!!!!!!!! A: Imagine that... It's because you linked the images or whatever to your the images located in your hard drive. You have to upload all the picture and manually rename the links to the pictures, music or whatever yourself. Q: What are a bunch of web languages and stuff? A: Java, JavaScript, pearl, php, xml, and a whole bunch of others. Q: What is CGI? A: It is basically the action scripts that make an action when you make a post on a message board or submit something. It has various functions, but I think it's main purpose is to safely record information onto a site easily. Alright, alright, this was a simple walkthrough. Check out these to learn more! References: http://www.tutorialfind.com/tutorials/ -find more tutorials http://www.annabella.net/html.html -html help http://www.webmonkey.com -all kinds of help http://tim.xprowler.com/ebooks/ -ebooks http://www.pagetutor.com/pagetutor/makapage/index.html -html help This concludes the basic html page. key words: Build your own website how do I use html what is html learning html html tutorial html referance teach me html tutorial by jimmy Ruska