Basic HTML Intro Course

I learned HTML the hard way. My first ever blog, called LCH’s Blog is pretty defunct nowadays. However, I feel a certain connection to it, because it was my initial foray out into the world of blogging. That was back in 2001. I learned basic html on my own via personal observation and through online sources like Webmonkey.

You can see a website’s code if you go up to your toolbar and click on “View.” Next, scroll down and click on “page source.” Sometimes there’s really strange stuff in there. *laughs*

I can’t tell you the number of times just in the past couple of weeks that I’ve been puttering along, reading a great blogger, only to see either them say something like “I would like to put links in, but I don’t know how.”

So basics. First, we’ll start simple. In order to make things bold (other than just hitting control B), you have do one of two things:

  • HTML code goes in front of words and then behind. You make your statement, and then you close your mouth. The code for what I just wrote is this: “HTML code goes in <b>front</b> of words and then <b>behind</b>.”
  • The second version is just as simple, just a little longer. See? “The second version is just as simple, just a little <strong>longer</stronger>.”

Two choices exist for italics as well. Generally, both of these should work, but there are some places (like my comment screen) that will only take one of the two (in the case of my comment screen, it only takes the second of these two).

  • Wow, it sure is nice to meet you. = “Wow it sure is <i>nice</i> to meet you.”
  • Vs. “Wow, it sure is <em>nice</em> to meet you.”

Funny story, I was writing an exam essay once and was behind on time, so I was really booking it, you know? When I got done, I realized that I had switched into shorthand and had stuck HTML in there to indicate italics and whatnot! *laughs* I had to explain it to my teacher. *smacks head* OY.

A couple of others:

  • Underlining is always fun. There are two choices here too, but the second one is a little more complex, so I won’t tell you that part. Simply put, here’s what I did: “<u>Underlining</u> is always fun.”
  • And then I laughed nodded sympathetically. That’s what’s called a “strike through.” On most web pages, minus WordPress of course *rolls eyes*, here’s what you do: “And then I <s>laughed</s> nodded sympathetically.” Fun, no?

Okay, I know your brains are probably going whee POOF right now. How about just a couple more things?

So say you wanted to include a pic in your post? That’s pretty simple actually. You just need to have a picture link that ends with some of these letters: “jpeg, gif, bmp, png” something . . .

  • Next, you get to put the code in. Pretty shiny, no?
  • This is what I just did: <img src=”http://farm4.static.flickr.com/3253/2373801272_9da92a8b76_o.jpg”&gt; – “Img src” = “image source.” Unless you know how to upload your pics directly from your computer, you’re going to have to have a method for viewing. I just post a lot of my pics over at Flickr.
  • One thing you don’t want to FORGET is this: When including any kind of link – be it pic or hyperlink or whatever, don’t forget to include the “http://” at the beginning. Otherwise, it won’t work.
  • If you’re linking from another site and want to find the code for a pic, there are a couple of different things you can do:
  • Complex option: Go to View –> Page source and look at all the code. Bleah.
  • Medium option: Right click on a pic and scroll down your menu until you get to “properties.” Click on that, and you’ve got it.
  • Easy: I can’t remember the exact words that Explorer uses for this option, but I can tell you what Firefox’s are. Right click on a pic, like in the medium option, and scroll down until you see: “Copy Image Location.” Click that, and then you can just paste it wherever you want. Muahahhahaha.

Okay, now say you want to embed a link somewhere. Not too hard, right? After all, everyone’s doing it, right?

  • Well, it’s not too hard. It just uses one simple code (I almost wrote in “chord” *snorts*). Webmonkey has all kinds of good links. For instance, they have a color code chart that kicks brass (musician humor).
  • So what’d I do? Funny you should ask . . . “For instance, they have a <a href=”http://www.webmonkey.com/reference/color_codes/”&gt;color code chart</a> that kicks brass (musician humor).”

One more lesson today and then I promise you can throw things at me. Hmmm. Maybe I don’t mean that.

Always remember to close your mouth after you’re done talking. Otherwise, every word on your page will be part of the link. Not pretty. 😕

And that is the basic lesson of the day. If this was totally dull, just let me know and I’ll go back to my regularly scheduled program without a word. 😀

Advertisements

~ by lastcrazyhorn on May 5, 2008.

8 Responses to “Basic HTML Intro Course”

  1. Hey, this is GREAT! I am not wading through it at the moment (it’s past my bedtime, lol!), BUT will do so. I know it will be helpful. Thank you, thank you, thank you!

  2. This is indeed an education. Thankyou!

  3. This was actually incredibly helpful – I have to build a website in the near future. I hope you keep going with this.

  4. Yay! People like it!

  5. I so screwed up. HELP!!!! Thanks for letting me know about your html help. I still messed up though. I dont know what I did. I think i made things worse. I cant hide the code tags

  6. Send me your code and I’ll tell you what happened if I can. 🙂

  7. I switched over to html mode and fixed the links that way. I think windos vista blocks all pop ups, including legit ones.

    I will try pictures now 🙂

    Chey

  8. Oh good. Yeah, you have to tweak the options to keep that from happening. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: