Sunday, January 8, 2012

Some HTML Basics

Blogger is nice.  It has so many handy-dandy buttons, so most everything is just click-and-drag.  Or just click.  But, if you have a blog, there's a good chance you'll have to use some HTML at some point.  Now, I'm no master, but I can at least get you this far.

HTML is basically made up of these things: < >.  You put things inside of them, like <b>.  This is called a tag.  The tag tells the web page what do do.  You tell it what you want it to do, with this kind of tag: <b>.  Then you put your text or picture or whatever after it.  Then you close it off with an identical tag, but with a slash.  Like this: <b>La la la. </b> 

<b>Doing this makes your text bold. </b>  Like this.

<i>This makes your text italic.</i>  Like this.

<u> This underlines your text. </u>  Like this.

<font color="green"> This changes the font color.  </font>  Like this.

<font color="red"><b><u> And then you can mix and match!</u></b></font> Like this!

<marquee>This makes the words slide across the screen. </marquee>
It's rather annoying, but quite fun.

<center> This centers your text. </center>



Like this.
 

Want an image?  Simply type: <img src="IMAGE URL HERE"> 
You can find the image url by right-clicking an internet picture, clicking "properties", and copying the url from there.
So if I wanted to use this picture:










The code would look like: <img src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcRDEN6KTNEfCTTIax2nPkhBlGDo7kzewwWFrK085vusUkVMV9MaIA"> 

You can then take the same picture and edit it in various ways.





As you can see, I've added a border, centered the image, and made it a little bigger. 
<center><img border="5" height="250" width="250" src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcRDEN6KTNEfCTTIax2nPkhBlGDo7kzewwWFrK085vusUkVMV9MaIA"  /></center>
 
If I wanted to create a link, I would type: <a href="URL HERE">Text to click here.</a>
And it would look like this: Click here!

Now, you can combine these two and make a picture that links to a website, I simply add the a href code into the image code.  Like this:
<a href="URL THAT YOU WANT TO LINK TO" img src="IMAGE URL HERE"></a>
And it would look like this:


Don't foget to add the </a> at the end of each link!  If you don't, everything you type after the a href tag will become a link, too.  And that would be annoying.


Again, Blogger tends to have buttons to do this whenever you need it, but sometimes it's just easier to type it yourself.  If you have questions or need clarification, just let me know!

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...