Welcome to my tutorials page! I have taken the time to write a few tutorials for you guys to use! And guess what! I have even made an HTML tutorial!!!!!YAY! Click a link below to choose a tutorial. Good Luck!
1)Html
2)Guild Logo(not done yet..)
(so far thats it, but more to come! Promise!)
**IF YOU HAVE TRUBLE READING THIS EMAIL ME AND I WILL SEND YOU A COPY OF THE ORIGINAL AND EASY TO READ TUTORIAL!!! DONT HESITATE!!!!(I worked hard on this, and if you cant read it, TELL ME!)**
HTML TUTORIAL.
This is my HTML tutorial. It only has the main basics to creating a simple, yet affective web site.
BUT if your creative, and pick up more info on HTML, you'll be big time in NO TIME!
In this tutorial, I will break HTML down, little by little. This is a tutorial ment for newbies who are VERY confused about HTML.(Clueless!) If you really want to learn HTML, but dont know where to start, and all the other HTML tutorials and teaching web sites were to confusing for you, then this is the tutorial for you! It should not only help you get a feel for HTML, but also set you down the right road for *success*! Well, Good luck to you all!^-^
HTML?
okay, before you acctually BEGIN, you should know what HTML IS, and what it can DO! HTML stands for Hypertext Markup Language. It is also known as, "The language of your computer & the Internet!" But, just what can it do? What's it used for? Well. Html is a code. And it's used to create Web sites. It's a code that's pretty simple, and is made up of "Special Characters". It's not tough to learn really. You just have to be willing to learn it. Now, with that, your ready to get a little more into the details.
Where do I start?
This is a good question! Where DO you start? Okay, so you really CAN start anywhere you want, and fill in the gaps yourself, but the easiest way to learn is to start from the begining!(DUH!)So I recomend that if your new to HTML, you read this whole guide.(and read it again if you need to!HTML knows no time!)
How many people know HTML? Well, LOTS of people use it! EVERY web site on the web is made from HTML!(except a few are made with easy web tools for people who dont know it, but they dont look "pretty".) But sadly, not many people ACTUALLY know it, since all you REALLY have to do is cut and paste.(But it gets the job done, so if you want, go ahead, but you still have top know HTML a little to plpace it right!)
To someone whose never seen HTML before, here is an example-
Right? Well, dont be scared. Its very simple once broken down!(And I will break it down for you!) The truth is, LAZY people are the ones who always seem to give up first. If your lazy, dont walk away before you even TRY!!!(I'm lazy, and I learned!) Anyone can learn it!
Now it's time to get down to the REAL stuff! Okay.
So, First and most IMPORTANT, you need to know that EVERYTHING your going to write will go into these, greater than, and less than signs, <> known as Angle brackets in HTML. (I will call them ANGLE BRACKETS in this tutorial so you can get used to it.) And almost everthing has an "Opening and closing" tag. Like you saw above with the Title example. This was the opening tag- and this was the closing- (closing (or end) tags have the back slash in them.-/)
Now, knowing that, you need to know that everything will also go between the HTML characters, that look like this-
What do i mean, everything will go between them? You'll see later.Oh, and before I forget, you can type HTML in UPPER CASE Or lower case letters. It really doesnt matter!
HTML: The BASICS.
Okay. In this section, I will name some tags, and what they do.
These are all the Basic tags in HTML. I will show you the order they need to go in later.
Fancy that Text.
So, Now you know some of the most important tags in HTML. Now lets move onto TEXT. If you have ever written an HTML document before, (Which i know you probably havent, but pretend.^-^;;) You'd notice that the text is....well....plain. Wanna get some Fancy text, but dont know how? Well...Here's the HTML code for the FONT COLOR.
Of course, You dont have to use the color blue. Here is the list for the 16 PREDEFINED colors:
1)Silver
2)Gray
3)Maroon
4)Green
5)Navy
6)Purple
7)Olive
8)Teal
9)White
10)Black
11)Red
12)Lime
13)Blue
14)Magenta
15)Yellow
16)Cyan
These are the colors you can write the word of the color for. Other colors you'll have to write in HEX CODE. For example-White is #FFFFFF. or RED is #FF0000. For more Info On the HEX code, you can email me at- MaterialGirl0192@wmconnect.com.
Now, Say you want to make the text BOLD, Here is the code.
That will look like this on your web page-
Type what you want to be bold here!
Or you might want it to be italic-
Now, lets, well, look at it!-
LOOK AT THIS!!
Now, For something really fun! A Maraquee! A maraquee is when you see text scroll across the screen. It's really useful, and it can draw quite alot of attention!And it's easy to make!^-^ All you have to do is type-
OR if you want the text to scroll th other way, you can write it like this instead-
TEXTAREA>Watch the scrolling text!!!oooo!
(just remember not to overdo this tag! It's best when used only occasionally.)
Now, lets take a look, see?-
Watch the scrolling text!!!oooo!
Image-ine that!
IMAGES, PICTURES, PHOTOS!!! You can put them all! BUT just remember, more images=more time to load the page! So either keep the pic.s to a minimum, or keep the thumnails to a maximum!
First, before you can even add them, you need to have them on the internet somewhere. How do you do that? Just upload them and get the URL.(freewebs.com has an image and music uploader 4 free. OR Two other free options are-photobucket.com [max uploading size-200kb] OR imageshack.us[max uploading size-1024kb] MY choice-imageshack.us!)
Okay, now, all you have to do is type-
see? easy!
To create a thumbnail, just make your image smaller using paint or your image editor program, like Photoshop, or paintshop pro.
then upload it, and make it a link to a bigger version. (links will be explained next.) OR imageshack.us comes with a thumnail option, so you wont have to worry.
Links, Links, Links!!
Without a doubt, I'd say links are the most important thing about websites. It allows visitors to freely navigate, and it allows visitors to find your webbie!
To create a simple clickable link, like to another page type-
to make an image a clickable link, type-
Easy, huh?
I Like to move it!
Most people overlook this part, this is sad...but true. And It's like, one of the most important part of a site....Yup! You guessed it, It's the NAVIGATION BAR! You NEED this so people can navigate your site freely. Dont know what it is? It's the Thing on the side of a site(in most cases.) and it ussally says- Home, Contact, About....etc. Still not sure? Just trust me. You need it. Put it in your site, and You'll see.
Well, Here is the code for it (this is the code for MY SITE, Make sure to fill it out to your needs!)---
Still dont get it? Fine, This code might make it easier--
It's all in good order.
Now that you know what everything does, where does it go? Well, For the most part, It doesnt matter. It just depends on how you want your page to look. HOWEVER, you do have a few thing that love where they go, and refuse any other spot. Those are, Html, head, title, and body. The main tags in your webpage. Now, say you want to have a page that looks a little something like this (just an example! Acctual page wouldnt look like this exactly!)-
Adopt a shelter animal today!
Shelter animals are very loveable, and only want a home to be loved in. These poor animals were found in the streets, or abandoned by an owner. What's sad is, all of them are very good. And have such great personalities, but nobody wanted them. These animals are wonderful, and loyal too, I find it hard to belive myself, that they went unwanted....
Did you know, That shelter animals are acctually friendlier than animals you can get from a breeder? Yes, It's true! I am not too sure why, but I know this is true.
Please adopt an animal from a shelter today! Show your love for animals!
Okay, This is a good solid, simple example.(PS, I do volunteer at a shelter, these are true statments from me, and If you are looking to get a pet, I suggest you look at a shelter. They really are great animals. I love working with them, and petting them all!=)) [Back to html....] SO...the code for this would look like this-
Do you think you get it now? Yes? That's GREAT! Not yet? Well, It's okay. Html takes TIME to learn. I suggest re-reading this section, or any other section you need to to help you. Everybody learns at a differnt pace, so dont be upset if you have to go back and read this 3 times or more! I took a very long time to learn myself. And I would have to say, My suggestion to you is, read, and re-read! Get books on this, go to the library, Ask a friend, read more tutorials!! Anything you can find. The library and the internet are the two greatest places to learn! But remember they cant help you, if you dont TRY!
But I want to learn to make Fancy Layouts like on the BIG websites!!
Well, I am glad you guys are so into learning this!^-^ I sure hope I have helped you guys in any way. But, I cant teach you this one...I am sorry. It's not that I dont WANT too, But I dont have TIME to write a long explination, and I am not very good at it myself yet....So I suggest you go and find another tutorial on this. Please note though, that most people assume you have Photoshop, or paint shop pro (PSP) to make these special layouts. If you dont have either one yet, I would suggest you start saving up!O.o Or borrow one from a friend if they have it....
PSP? Photoshop??
PSP and photoshop are both IMAGE EDITING PROGRAMS. They are mostly used for designing website layouts and templates.
PSP:
PSP stands for Paint shop pro. This is an image editing program that is pretty nice. And can give great results. Lots of options too! Cheaper than photoshop, you can find it on ebay for around $20-70, depending on what version you buy, and in what condition. This is a program used by my friend, "Babykagomegirl". (I have this program too though!^-~)
Photoshop:
Photoshop is an image editing program also. This is the most used Image editing program, most of all the bigger companies use this, and it has EXCELLENT results. I am sure it can be confusing at first, but of course, once mastered, you wont be sorry about this purchase! (If you buy a "tablet", you can draw great quality images, right onto your computer screen! Tablets cost ranges from around $80-200.*) Since this is such a great, and often used program, *bad news* It is pretty expensive. Prices range from $100-600!!(from what I have seen!) I have not checked ebay for this product yet.
So, I hope my html tutorial has helped you guys. If if does, or doesnt, please let me know!!**If it didnt, tell me why if possible**
