Leanasta and Me+Free: A guide to HTML part 1

Hello hello! So, i have once or twice mentioned making a little html guide for you all. This will be extremely basic, but will help you with things like atext styles, lists, and adding lines and spaces. Those of you who also have blogs might find this useful for things like videos because, although blogger has 4 sizes for pictures which are generally just fine, it has no options for the size of videos. If you look back at my "Ebooks on Computers" post, you'll notice my video is huge compared to when i add little videos like those from JWittz. This is becase i know some HTML. Other uses include: creating a basic website or page, editing a preexisting one to your liking, showing off to your friends, telling people you are trapped in the middle of a zombie apocalypse, and anything else you can imagine.
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:

word or word will create word or word. I prefer just using , but newer versions of HTML use so be aware of that.
word or word will show up as word or word. This follows the same rule as above
word will simply underline whatever you need. Simple as that!
"will create a paragraph that is not indented, but will keep all of your content together until you put in another"

"will create a paragraph that is not indented, but will keep all of your content together until you put in another"

Next up, Let's discuss 2 tags that are exempt from the </tag> rule! and <hr> do not have to be followed with a or </hr> like the other tags

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 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 , 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:    "You don't have to put it in tags!" The more you put, the moe indention. I usually use about 5 if not more.

"You don't have to put it in tags!"

You might notice my lovely bullet lists! These are also easy to do, as are numbered lists. For a bullet list, the code is

<ul>

<li>thing 1</li>

<li>thing 2</li>

<li>thing 3</li>

</ul>

Which will come out as:

thing 1
thing 2
thing 3

For a numbered list, simply change <ul></ul> to <ol></ol>

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:

And then your text will be centered or
to have it on the right side!

Center

Right

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>

That's dandy, but Kaiba here is taking up a bit to much space. To bring him down to size, i use:

<center><img src="http://static.tvtropes.org/pmwiki/pub/images/kaiba_8515.jpg" width="50%" height="50%"></center>

Now he's a bit more manageable. You can put any % you want. You could also put it in terms of pixels.

<center><img src="http://static.tvtropes.org/pmwiki/pub/images/kaiba_8515.jpg" width=50 height=50></center>

50 Pixels are much different than percents, so be careful of that! Play around with them until you figure out exactly what size best suits you.

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!!!!

Leanasta and Me+Free

Pages

Tuesday, October 29, 2013

A guide to HTML part 1

No comments:

Post a Comment