My trek with HTML began in 6th grade at PREP, the Pre-Freshmen Engineering Program, where i was given a class on the basics. I then used this to make pages for my Neopets of Neopets.com where i spent many of my younger days and learned a lot about the internet.
"Galen" you ask, "what is HTML?" Well random audience member that's a great question! HTML stands for Hypertext Transfer Markup Language. It's used in many of the ways i listed above and many others! The first thing you'll notice is the use of these <>. This is called a tag. Your commands go inside of these and they are very important! You will always start a tag as <tag> with your content here and close the tag with </tag>. If for some reason your tag isn't working, always make sure it's written correctly and closed!
"Galen, i don't want my page cluttered up with icky tags!" If you do this correctly and use the HTML codes in the correct places, we won't see them! For blogger, the HTML section is in the top left next to "Compose." Clicking "HTML" will bring you to the code you can edit! You can even just type there if you prefer it but it might look funky. For making a webpage, i use the program "Notepad" or even just microsoft word to write.
We'll start off with something every person should know for forums, blogs, and html. Font styles. The 3 basic styles are bold, italics, and underlined. Most things have a simple button you can press to change your style, but what if one day, it doesn't load? Well, here are the codes:
- <strong>word</strong> or <b>word</b> will create word or word. I prefer just using <b>, but newer versions of HTML use <strong> so be aware of that.
- <em>word</em> or <i>word</i> will show up as word or word. This follows the same rule as above
- <u>word</u> will simply underline whatever you need. Simple as that!
- <p> "will create a paragraph that is not indented, but will keep all of your content together until you put in another"</p>
Next up, Let's discuss 2 tags that are exempt from the </tag> rule! <br> and <hr> do not have to be followed with a </br> or </hr> like the other tags
- <br> creates a space. Every. The jump in lines from the previous to here was an example. You do not have to include this if you use <p></p> unless you want extra spaces.
- <hr> creates the lovely lines between the sections! With more complex code, you can edit this to be any size you want, but the way you see it is the way it is normally.
- "Wow Galen, this is all great, but if i use <p></p>, it won't indent!" This is something i did a bit of snooping on. If you want a paragraph to be indented, use before your content. For example: <p> "You don't have to put it in tags!"</p> The more you put, the moe indention. I usually use about 5 if not more.
You might notice my lovely bullet lists! These are also easy to do, as are numbered lists. For a bullet list, the code is
Which will come out as:
- thing 1
- thing 2
- thing 3
- thing 1
- thing 2
- thing 3
That's great you say! But what if i want to center my text or right align it? Well, there's a code for that too!
Code, like text itself, is generally left-aligned like you see now. To have things centered or on the right, you use the code:
- <p style="text-align: center;"> And then your text will be centered </p> or
- <p style="text-align: right;"> to have it on the right side! </p>
You can also use <center></center> for the center for older HTML which is the easiest. You can also use (instead of p style) <div style="text-align: center;"></div>.
Finally, i will cover what i consider the most useful. Images. To add an image, you simply put:
- <img src="http://static.tvtropes.org/pmwiki/pub/images/kaiba_8515.jpg">
What does this mean? All it is is "image source." This also works for things on your own computer. To do this though, be 100% sure the picture is in the same folder as the document you are creating and what type of picture it is: .jpg, .png, or .gif. To find out, simply right click and click properties and it should tell you what type it is. This picture will come out like:
I personally like my pictures centered so:
- <center><img src="http://static.tvtropes.org/pmwiki/pub/images/kaiba_8515.jpg"></center>
- <center><img src="http://static.tvtropes.org/pmwiki/pub/images/kaiba_8515.jpg" width="50%" height="50%"></center>
- <center><img src="http://static.tvtropes.org/pmwiki/pub/images/kaiba_8515.jpg" width=50 height=50></center>
So everyone, that was a nice, basic guide for you all! For more, try this site. Also, +1 if you'd like me to do more!!
Now if you'll ecuse me, I have Assassinating to do! Good night!!!!