HTML Tips for Bloggers: Working with Boxes and Images

Hello everyone!
I’m back with the last part of my three-parts HTML Tips for Bloggers feature. Today’s topic is a little more advanced so if you need a refresher, check out my first two posts:
HTML Tips for Bloggers: The Basics
HTML Tips for Bloggers: Intro to Styling

In today’s post, I will mainly talk about working with box and image, but I will also add some hopefully useful tips about creating TOC and using table.

Okay, let’s start.

For each topic, I will try to explain what does the code mean, but if you want to, you could just copy and paste them into your HTML editor and modify them as needed (you can use preview or visual editor for this purpose).

Caution: The current wordpress reader stripped all the inline CSS styling so make sure your post is still readable without it. Alternatively, switch off the option that will allow wordpress reader to display your entire post. This will prompt readers to visit your blog to view the post.

Table of Contents

Click on the topic you want to read.
Table
Preformatted text
Creating a mini table of contents
Create a box
Rounded boxes
Create a drop shadow
Transforming images

TABLE

Not so long time ago, web developer used table to layout the entire webpage. This practice has now become obsolete since table was deemed un-SEO-friendly. Shortly speaking, search engine does not understand the hierarchy of a table. Sure, using inline CSS (like what we’re about to do) is also not SEO-friendly which is why I’d suggest to use inline CSS sparingly. However, HTML table is still very useful to layout things that need to be perfectly aligned.

For example, you can do something like this:

Note: the indentation is not required.

to create something like this:

Review Book | MG | Fantasy
Title Harry Potter and The Philosopher’s Stone
Author JK Rowling
Year published 1997

As you can see above, there’s another reason to not overuse HTML table: it’s a pain in the ass to make. Technically, you can use dreamweaver or other WYSWYG (visual) HTML editor to make it, but it’s still a lot of code to accomplish something small. I usually make my table once then copy paste the code everytime I need one.

Before we move on, let’s talk about the code.

  • The <table> and </table> tags indicate the beginning and the end of the table
  • <thead> indicates table header. This is the table equivalent to Heading that we use in visual editor.
  • <tbody> indicates table body aka the content
  • <tr> is used to indicate table row.
  • <td> and <th> are used to indicate column. <th> is used for header column in conjunction with thead (usually the text will be bold) while <td> is used for regular column. For example, if row 1 has three column, you only need one <tr> but three <td> like so:

  • Make sure to close the tag properly and in order, e.g. <tr><td>……</td></tr> instead of <tr><td></tr></td>. Think of it like parentheses, you close the inner one first then move out. Or if you prefer, LIFO (last in first out) or stack instead of queue.

The table may look too bare right now. We’ll come back to it later after we discuss transforming images.

[ Back to top ]

Preformatted text

Pre or preformatted is useful if you want to preserve formatting (especially indentations) on the text. An example would be a poetry or an ASCII art.

(Try resizing your browser and see what happen to the text above)

The code:

As usual, don’t forget to close the tag.

[ Back to top ]

Creating mini table of contents

As I mentioned in the first post, the <a href=””> is used to link content from your blog to the interwebs. But do you know that it could also be used to create links to jump around within a single post? As a matter of fact, I actually made a TOC in this post using this technique.

How to do it:

  • First of all, you have to give ID to your target. For example if you want to target a heading 3 Review, you can do something like this

    This will create a heading 3 with id myreview.

  • Now, when you want to link to the Main Review, you use anchor like so:

  • Note: don’t forget the hash ( # ) sign.

Here’s the code that will link the text to this post’s Table of Contents (which id I have set as toc):

The output:
Go to TOC

[ Back to top ]

Create A Box

We’re now going to move into more decorative things, like rounded box and shadow, but first I have to digress and talk about DIV.

What is a DIV?

Put it simply, A DIV is a placeholder. Think of an empty box that you can fill in with anything. DIV is useful in way that it has no predefined style formatting (technically). This differs from things like <p> or paragraph that comes with a set of rules like predefined margin and could only contain text. DIV could contain anything, text, image, or entire webpage. Many web developer these days use DIV to layout their page, but for our purpose we’re going to use DIV as a box.

Here’s an example of a DIV:

The output:

Text here

As you can see, I gave some styling rules to the div, namely I add a black border and set the background color to grey. Without these set of style rules, you won’t be able to see a div.

If you need more explanation about the basic of inline styling, check out my second post.

[ Back to top ]

Rounded Boxes

Finally, we’re going to do something less boring. I told you that a div is like an empty box. But boxes are boring, right? Hmmm, if only you can make boxes with rounded corners. Well, guess what?! You totally can. Enter: border-radius.

border-radius is a style property that allows you to make your borders (and by extension, your box display) have rounded corners. Technically, your div will still be a box, but it’ll be displayed as having rounded corners.

Here’s the code:

The output:

I am a box
with rounded corners

Note: HTML is case-insensitive and it ignores extra whitespace. Hence, <DIV> is equivalent to <div>

Why do I have to give it a border? Because border-radius is a style property that modify border. Hence, it only works if you specify the border. What if you don’t want any visible border? Well, there’s a trick to that, just use “border: none” to replace the border styling.

border-radius: 25 px will specify a border of length 25 px. Instead of trying to understand the math, it’s easier if you try it out on your blog. Try changing the value. What happen if you increase the value? What happen if you decrease it? It also accepts percentage, you can try that out too.

Furthermore, border-radius actually allows you to specify different value for each corner. The order is as follow: top-left, top-right, bottom-right, bottom-left.

Like so:

Here’s how it looks like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,

If it looks ugly, it’s because I didn’t give it any padding and margin.
Try giving it a 5px padding:

The result:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,

Better right?

Try playing around with it. Here are some ideas:

  • Try changing the background (in the code above I use #fff which is white). You can find color hex code in photo editor program or websites like color-hex.com
  • Try changing the font color using the color property (color: #hexcode)
  • Try inserting an image into the div
  • It also works for other stuff such as table and image! Try it out

And now, we’re going to switch our topic to image.

[ Back to top ]

Create a drop shadow

Here’s another cool effect you can try. box-shadow lets you create a drop shadow on your divs, tables, and images. It also works with border-radius (i.e., if your div has rounded corners, the shadows will follow the shape).

Suppose you have an image. I’ll use this donuts picture as example.
donuts

All you need to do is apply the box-shadow property on your image, like this:

donuts

As you can see, the horizontal shadow is slightly wider than the vertical one. This is because I specify bigger number for it (12px).
Let’s talk about the code.

  1. The first number is the x-offset. If you put positive number, the border will fall on the right side of the box, and if you use negative number, it’ll be on the left side.
  2. The second number is y-offset. If you put positive number, the shadow will be on the bottom side, negative number will create a shadow at the top.
  3. The third is the blur-radius. You can see the shadow above is slightly blurry. It will blurred the shadow edge and it actually enlarges the overall shadow size.
  4. The last bit is the color. As usual, use hexcode or color keywords.

Note about compatibility: It should work on most newer version of major browsers, but in case you consider that your visitors will use old browsers, you might want to read this note about compatibility.

[ Back to top ]

Transforming images

We’ve arrived to the last feature in this post. It’s also the most experimental ones, meaning that some browsers don’t fully support them. Why do I put it here then? Well, first of all, browsers are updated frequently (like let’s face it, how many times a month, you open you browser just to see the notification to update) so it’s reasonable that at some not too distance future, this feature will become supported by all major browsers. Secondly, well it’s really fun. Let’s take a look.

Let’s use this placeholder cover of Crooked Kingdom (I’m sorry Leigh).

placeholder

It’s boring, right?
Well, let’s do some crazy thing. I dunno. Let’s rotate it.

placeholder

Here’s the code:

It’s really simple. You use transform property and apply rotate to it. 20deg means 20 degree, as you might have guessed. You can also see that I have some additional codes, which starts with -moz- and -webkit-. These are added to maximize browser compatibility. Believe it or not, the browser I’m using also doesn’t support the non-prefixed one so don’t feel bad if yours doesn’t. For now, I would suggest to add these two prefixes properties because as I said, transform is still experimental.

There are other stuff, you can try such as skew, skewX, and skewY.
SkewX example:

placeholder

The code:

There are many other things you can try with transform property, most of them are even more experimental than rotate. You can find them here.

[ Back to top ]

Style the table

That’s all the tips I could share with you today. This post is already clocking around 2000 words so I should stop. But before I go, let’s go back to the table and apply some styling to it.

Book Review – MG | Fantasy
Title Harry Potter and The Philosopher’s Stone
Author JK Rowling
Year published 1997

And here’s the code. I’m sure that you can decipher the HTML and CSS yourself.


And that’s a wrap for my HTML Tips for Bloggers feature. Let me know if you have any question or find any error/codes that don’t work. Also let me know if you’re interested in another post like this, especially what you want to see featured in that post.

Thank you for reading. This has been a very long post. Happy coding!

Useful References


Twitter | Follow my blog with Bloglovin


Windie
Twitter | Instagram | Follow my blog with Bloglovin

9 thoughts on “HTML Tips for Bloggers: Working with Boxes and Images

  1. WHOAH I LOVE THIS POST! It’s so helpful! I love tables and I love that it comes with a shadow, and boxes with rounded corners…I didn’t even think that’s possible but now that I know it is, it looks way better. Thanks for the tips! I’d be sure to bookmark this post so I can keep coming back to learn everything you mentioned. 😀

  2. Ahh I love the “tilt the image thing” and the shadow! As usual, these are helpful Windie and I feel a little sad this tutorial is on its conclusion now. *sigh* Thanks a lot though! 😀

Leave a Reply

Your email address will not be published. Required fields are marked *