Bloggiesta: HTML Basics a Top Ten

So here we are again at Bloggiesta! Ole! This year I am giving you a top ten basic HTML lesson. For the challenge part pick three (or more) elements below to use in a Bloggiesta update post then come back here to link in the comments so that I can go visit all the posts. One person who follows all of those rules will win a book of their choice (up to $20) ordered to them. Let’s get started!

Need info on Bloggiesta? What is Bloggiesta?

Check Suey’s blog, and Danielle’s blog.

Lesson One:


This is how you make something clickable.

Lesson Two:


This is how you make your email clickable! When someone clicks on it their mail program opens and they can email you posthaste.

Lesson Three:


This is a great way to make your paragraphs look nice! You put the p before, type the paragraph and /p at the end.

Lesson Four:


This is for when your pictures are being lame and all the font is running together and it just doesn’t look nice. Clearfix will fix it for you.

Lesson Five:


This is an unordered list. Meaning not numbered. It should make bullet points for you and it looks really snazzy because it spaces for you also. Here is an example of the code fixed to my theme:

  • list item one
  • list item two
  • list item three

Lesson Six:


This is the code to make a pretty ordered list. Ordered meaning numbered. Here is an example.

  1. item one
  2. item two
  3. item three

Lesson Seven:


When that blog tour needs you to make one word colored for the scavenger. This is the easiest way to do that.

Lesson Eight:


This is also for coloring text, but when you want more control than just the color name. You insert the HEX code instead. (Hex codes are numbers assigned to different shades of primary colors). You an find out more about them at the Hex Hub

Lesson Nine:


Here are some style options.

Lesson Ten:


This is for headers. This is also subject to your theme. I’ve found some themes don’t support these at all (but really all should and most do). If H3 headers aren’t supported try H2 instead. Never use H1 for headers in posts, its an SEO thing. For an example every header above ever picture here (Lesson One:) is an H3 header.

Tags: ,

42 Responses so far

  1. Gravatar

    Is using H3 better than using H2 or is either fine as long as you’re not using H1?

  2. Gravatar

    @Melanie,

    The lower you can go the better :)

  3. Gravatar

    Thanks for the codes! I had no idea about the paragraph, or clearfix, codes.

  4. Gravatar

    Thank you! A lot of this was new info for me. I will definitely be using the code for the bullet list.

  5. Gravatar

    Excellent post! I wasn’t familiar with clearfix. Another good one is ” – for inserting pictures in posts.

  6. Gravatar

    Yikes – it didn’t pick up the html – let me try again: Another one I use a lot is img src=”http LINK TO IMAGE”

  7. Gravatar

    I don’t really understand this post. It’s because I don’t know anything about HTML so that’s why I came to this challenge! I was hoping for more explanation. I don’t know where to put the code and I don’t know what it would look like if I tried to add it.

  8. Gravatar

    Mary,

    You put the code into the post to accomplish the task it says it does. For example to make your email clickable you input that code and paste your email inside where it says your email. Then save the post. Just like writing the review the code goes where the review does.

  9. Gravatar

    Awesome! I’m bookmarking this page, thank you. :)

  10. Gravatar

    Thanks for giving this lesson! I’m a real brookie when it comes to HTML, so this was nice :) I’m not going to put it in a review or something right now, but in the future, I’m definitely going to use it!

    Perhaps you can help me with a question?

    Sometimes, I see people with a review and they have some kind of seperate ‘box’ in it. Here is a review to show what I mean:
    http://www.xpressoreads.com/2012/03/review-exiled-by-mr-merrick.html

    The synopsis is in some sort of ‘box’. It really stands out more than just copy paste it into the review. What kind of HTLM code do you need for something like that? Or what kind of trick do you use? :)

  11. Gravatar

    Thanks for all of the great info! I am going to try out the code for the paragraphs first.

  12. Gravatar

    Here’s my challenge post. I bookmarked your post because I have such a hard time remembering how to put a link in a comment. Attempt #1 (without looking): Bloggiesta Challenge

  13. Gravatar

    Sigh. I obviously did something wrong because you can’t click on it. Here it is for real this time (I know cause I double checked).

    Bloggiesta Challenge

  14. Gravatar

    Melanie the code to put the cover and the synopsis in a pretty box is.

  15. Gravatar

    [...] even means? Would you love to learn a little about this computer code? Then be sure to check out The Top Ten of HTML Basicsbrought to you by Pam at Bookalicio.us. [...]

  16. Gravatar

    Great post! I do not use a lot of HTML mainly because I dont know how to. Usually my posts come together easy and I have all of this at my finger tips… but occasionally the posts are all over the place and I try html to fix it.

    Thanks for this!

  17. Gravatar

    [...] taught by Bookalicious) Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  18. Gravatar

    Thanks for sharing. The other HMTL I use all the time is br indicating a page break. I find that eliminating some breaks especially duplicate ones at the top of a page or adding breaks can really clean up the look of the page.

  19. Gravatar

    [...] taught by Bookalicious. Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  20. Gravatar

    The reason I didn’t put BR is because it’s not valid code. It’s for poetry. Of course the font=red is not valid either. Also a hack.

  21. Gravatar

    [...] taught by Bookalicious. Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  22. Gravatar

    [...] taught by Bookalicious. Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  23. Gravatar

    [...] taught by Bookalicious. Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  24. Gravatar

    [...] taught by Bookalicious. Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  25. Gravatar

    [...] taught by Bookalicious. Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  26. Gravatar

    [...] taught by Bookalicious. Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  27. Gravatar

    [...] taught by Bookalicious.  Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  28. Gravatar

    [...] taught by Bookalicious. Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. This entry was [...]

  29. Gravatar

    I had no idea it was this easy. I will be bookmarking this page. Thanks

  30. Gravatar

    Thanks for this! I knew some basic HTML but not all of what was up there, so thank you!
    I plan on incorporating these in the next few reviews I do for Bloggiesta, I’ll link back when I’m done!

    Thanks again :-)
    Faye

  31. Gravatar

    Aren’t you fabulous?! You showed me things I’ve never seen before now. Thank you!

    Buona fortuna!

    I’m Bloggista-ing all weekend! I love to have old and new blogging friends stop by and say hello!

  32. Gravatar

    Thanks for hosting this mini-challenge! I’ve been wondering for ages what the HTML for a pop-up email box was – had no idea it was so easy! I just updated my ‘contact’ page to make it clickable. Yay, bloggiesta!

  33. Gravatar

    Love your post and blog design!
    Here from bloggiesta, naturally.

    How do I include links to my twitter etc like your “Elsewhere” sidebar?

  34. Gravatar

    I really enjoyed reading this post, I took computer classes and knew how to do these but forgot… so this was a GREAT refresher!!! Thanks so much :D

    Have a great Day!
    Kayla @ Bengal Reads
    (New Follower-Love your blog)

  35. Gravatar

    Thanks for this! Now I can have people click on my email to send me a message:

    http://readinginwinter.wordpress.com/about-me/

    Thank you! :)

  36. Gravatar

    I know a lot of html but wanted to see what you included. I’ve not heard of the clear fix though and I can’t figure out what you mean about when I would use it. Can you elaborate?

  37. Gravatar

    This is great! I’m familiar with much of it but there were a few good reminders!

  38. Gravatar

    I used the “a href”, “ol”, “font color”.

    http://themidnightbookworm.blogspot.com/2012/03/bloggiesta-accomplish-list.html

    The links are the same color as text, but they link to the Bloggiesta hosts in the 2nd paragraph.

    Thanks!

  39. Gravatar

    [...] Top Ten Basics for HTML was very useful and bookmarked for the future. [...]

  40. Gravatar

    [...]  Pam at Bookalicio.us (@BookaliciousPam) -  The Top Ten of HTML Basics [...]

  41. Gravatar

    [...] posted about the top 10 HTML basics. I knew these already, but they’re still good to [...]

Leave a Comment


Warning: fsockopen(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /home/euroband/bookalicio.us/wp-content/plugins/wp-shortstat.php on line 137

Warning: fsockopen(): unable to connect to udp://whois.happyarts.net:8000 (php_network_getaddresses: getaddrinfo failed: Name or service not known) in /home/euroband/bookalicio.us/wp-content/plugins/wp-shortstat.php on line 137

Warning: stream_set_timeout() expects parameter 1 to be resource, boolean given in /home/euroband/bookalicio.us/wp-content/plugins/wp-shortstat.php on line 138