create
counter

Feature: The Newbie’s Guide to Book Blogging Part 2 – The HTML

the-newbies-guide-to-book-blogging_part-2_the-html

And the markup language learning begins…

The markup aspect of web design is sometimes arduous. You absolutely need patience to understand HTML and CSS. It’s really not hard. I’ve taught a lot of my friends HTML and if they learned it, so can you. Let’s start with the basics.

What is HTML?

In order for a browser to understand what is supposed to render on the screen, we use the markup language called HTML which stands for Hypertext Markup Language. In the web design community, HTML 5 is being tossed around and is becoming the standard version. In order to understand HTML 5, you must learn HTML 4 first. This is what most book bloggers should know. It’ll help you out in great way.

Let’s start with how the basic structure of a web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href=" style.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>

</html>

It looks scary at first glance, but really it’s not.

The first line is the document type. It’s telling the web browser what type of markup language the page is written in. In this case we’re using HTML 4.

Then the HTML element comes in. We are telling the browser to break up the page into two sections called the headand the body.

The head element contains the meta data and the style sheets (CSS). The first element is the meta data. Meta data is used for search engines like Google. This is where we place keywords into our web page so they can find it and link back to our blog. Then we have the title element. This is the heading that appears in a browser’s title bar and the text within it also shows up when a visitor bookmarks your page.

The body is where all your content goes, where your blog’s content goes.

Not so scary after all right?

It’s completely different when you’re working with a blog, so we don’t have to look at the whole source. That’s why Blogger or WordPress is so easy to use. You don’t have to manually add in all your content. You are using a What You See Is What You Get (WYSIWYG) editor. It creates the code for you. All you do is click the specific icon. When you’re typing a blog post in, what you’re controlling is your post alone. Not the entire theme or layout.

So why am I teaching you how to read HTML and CSS when you can use the WYSIWYG editor? Simply because you can. You can add this to your growing list of skills. It’s a great perk to add on your resume. Even social media know-how is a plus.

Next, I’m going to delve into the specifics of each of the elements you can use when you’re typing a blog post.


HTML Elements

There are a lot of options to make your blog look unique. Want to learn how to make those cool looking pullquotes? Use the blockquote element. Do you want to shift a book cover to the right and have the text flow around it? Use the align element. These are just some of the basic code snippets you need to make your blog posts look polished.

Remember these are the basic HTML elements. To change colour, typeface, and size and anything else is used in CSS. We’ll delve into that later on. I’ll explain what each tag is first, show the html code, and then the result of that code.


Image

Displays an image into your blog post. Other values and properties can be added to control the alignment, dimensions, and the spacing around the image itself.

Tip: Resize your photos and optimize them! If you upload a high-resolution file straight from your camera to your blog, you will cause your pictures to load super slowly. The solution? Resize them! Scale them down to a good size, and then make sure to save it as “optimized.” This makes it faster to download, and you won’t have visitors waiting for your pictures to load.

HTML

<img src="my-book-image.jpg" />

Result

the-newbies-guide-to-book-blogging_book


Border

This will display a border around your image with the number bearing the thickness of the border.

HTML

<a href="http://booknerd.ca"><img src="my-book-image.jpg" border="5"/></a>

Result


Alternate text

If your image is broken on your blog for example, the alternate text will display. This is also useful for the visually impaired and is also crawled by search engines.

HTML

<img src="http://booknerd.ca/wp-content/uploads/the-newbies-guide-to-book-blogging_book.jpg" alt="This is an image of a book"/>

Result

Hover over the image and rest your mouse on it. The alternate text will appear.

This is an image of a book


Width and Height dimensions

This is helpful for the browsers to display the image correctly. Don’t upload a large image and scale it down with these elements. Your images will look skewed or warped. The proper way is to resize it down then apply the correct dimensions.

HTML

<img src="http://booknerd.ca/wp-content/uploads/the-newbies-guide-to-book-blogging_book.jpg" width="300" height="200"/>

Result


Right Image Alignment

This value will align your image to the right. Text will flow around it automatically.

HTML

<img src="http://booknerd.ca/wp-content/uploads/the-newbies-guide-to-book-blogging_book.jpg" align="right"/>

Result

Dragée wafer wypas liquorice gummi bears. Topping apple pie wypas macaroon sugar plum tart cheesecake apple pie sweet roll. Bear claw soufflé oat cake chocolate dragée ice cream. Toffee sugar plum danish. Brownie danish chocolate cookie apple pie halvah chocolate oat cake sesame snaps. Icing macaroon tootsie roll halvah dragée. Chupa chups sweet jelly ice cream cheesecake fruitcake fruitcake cheesecake carrot cake. Icing toffee icing applicake. Cheesecake donut tootsie roll cheesecake bear claw toffee candy carrot cake gummi bears. Gummi bears applicake candy candy sesame snaps gummies cake candy canes. Gingerbread caramels biscuit jelly candy pie. Jelly chupa chups wypas. Tart gingerbread soufflé soufflé sweet wypas liquorice pie.


Left Image Alignment

This value will align your image to the left. Text will flow around it automatically.

HTML

<img src="http://booknerd.ca/wp-content/uploads/the-newbies-guide-to-book-blogging_book.jpg" align="left"/>

Result


Dragée wafer wypas liquorice gummi bears. Topping apple pie wypas macaroon sugar plum tart cheesecake apple pie sweet roll. Bear claw soufflé oat cake chocolate dragée ice cream. Toffee sugar plum danish. Brownie danish chocolate cookie apple pie halvah chocolate oat cake sesame snaps. Icing macaroon tootsie roll halvah dragée. Chupa chups sweet jelly ice cream cheesecake fruitcake fruitcake cheesecake carrot cake. Icing toffee icing applicake. Cheesecake donut tootsie roll cheesecake bear claw toffee candy carrot cake gummi bears. Gummi bears applicake candy candy sesame snaps gummies cake candy canes. Gingerbread caramels biscuit jelly candy pie. Jelly chupa chups wypas. Tart gingerbread soufflé soufflé sweet wypas liquorice pie.


Horizontal and vertical space

Used with the align element. When an image is aligned next to text, there is no space between it, so by using the horizontal space element you can control that space. You can also control the vertical space by using the tag vspace. See how there’s space now compared to the align above? It gives the image room to breathe which makes your eyes lead toward the image and not to the text overflowing it.

HTML

<img src="http://booknerd.ca/wp-content/uploads/the-newbies-guide-to-book-blogging_book.jpg" align="left" hspace="5" vspace="5"/>

Result

Dragée wafer wypas liquorice gummi bears. Topping apple pie wypas macaroon sugar plum tart cheesecake apple pie sweet roll. Bear claw soufflé oat cake chocolate dragée ice cream. Toffee sugar plum danish. Brownie danish chocolate cookie apple pie halvah chocolate oat cake sesame snaps. Icing macaroon tootsie roll halvah dragée. Chupa chups sweet jelly ice cream cheesecake fruitcake fruitcake cheesecake carrot cake. Icing toffee icing applicake. Cheesecake donut tootsie roll cheesecake bear claw toffee candy carrot cake gummi bears. Gummi bears applicake candy candy sesame snaps gummies cake candy canes. Gingerbread caramels biscuit jelly candy pie. Jelly chupa chups wypas. Tart gingerbread soufflé soufflé sweet wypas liquorice pie.


Blockquote

The blockquote element is used when you want to quote a block of text sourced from an author or even from the book itself.

HTML


<blockquote><h1>"We've all got both light and dark inside us. What matters is the part we choose to act on. That's who we really are."― J.K. Rowling, Harry Potter and the Order of the Phoenix</h1></blockquote>

Result

“We’ve all got both light and dark inside us. What matters is the part we choose to act on. That’s who we really are.”― J.K. Rowling, Harry Potter and the Order of the Phoenix


Break

The break element creates a line break between blocks of text. A perfect example is to display a mailing address. There is no end tag for the break element.

HTML

Indigo - Eaton Centre <br />
220 Yonge Street <br />
Toronto, Ontario <br />
M5B 2H1 <br />
Canada

Result

Indigo – Eaton Centre
220 Yonge Street
Toronto, Ontario
M5B 2H1
Canada


Paragraph

This element creates a break of two lines between paragraphs of text. You can also add a value to the contents of the paragraph by marking it to the left, center, right, or justify.

HTML

<p>Lemon drops sweet roll jelly beans chocolate bar macaroon fruitcake icing. Cheesecake oat cake bonbon toffee fruitcake topping jelly beans topping. Lemon drops sweet roll wafer pie chocolate ice cream sugar plum. Gummies sweet cookie candy canes apple pie. Marshmallow applicake chupa chups faworki sweet roll powder jelly. Chocolate cake tootsie roll topping cheesecake. Marshmallow brownie pie I love sweet topping danish. Gummi bears lollipop candy canes oat cake tart jelly toffee. I love sweet cake oat cake jelly-o pudding donut. Danish pie soufflé lemon drops gingerbread I love chocolate bar danish. Jujubes cupcake tootsie roll gingerbread. Sweet roll chocolate bar faworki marshmallow topping I love gummi bears. Cheesecake marshmallow sweet roll.</p>

<p>Cupcake soufflé marshmallow lemon drops soufflé chocolate cake I love powder cake. Croissant marshmallow pudding. Chocolate bar pie gummies tootsie roll. Bonbon I love jelly sweet roll I love pastry. Lemon drops sweet wafer fruitcake pudding marzipan. Bear claw dragée donut marzipan tart marzipan. Cupcake faworki cookie donut powder. Ice cream pie chocolate soufflé wafer liquorice dessert liquorice. Pastry cookie lemon drops I love cupcake marshmallow ice cream. Gummi bears ice cream cookie I love dragée. Donut biscuit jelly powder sweet cotton candy icing. Topping sweet biscuit caramels pastry jelly beans caramels wafer marzipan. Apple pie cookie candy pie brownie liquorice jelly beans sweet roll I love. Chupa chups I love tootsie roll topping dragée I love chocolate.</p>

Result

Lemon drops sweet roll jelly beans chocolate bar macaroon fruitcake icing. Cheesecake oat cake bonbon toffee fruitcake topping jelly beans topping. Lemon drops sweet roll wafer pie chocolate ice cream sugar plum. Gummies sweet cookie candy canes apple pie. Marshmallow applicake chupa chups faworki sweet roll powder jelly. Chocolate cake tootsie roll topping cheesecake. Marshmallow brownie pie I love sweet topping danish. Gummi bears lollipop candy canes oat cake tart jelly toffee. I love sweet cake oat cake jelly-o pudding donut. Danish pie soufflé lemon drops gingerbread I love chocolate bar danish. Jujubes cupcake tootsie roll gingerbread. Sweet roll chocolate bar faworki marshmallow topping I love gummi bears. Cheesecake marshmallow sweet roll.

Cupcake soufflé marshmallow lemon drops soufflé chocolate cake I love powder cake. Croissant marshmallow pudding. Chocolate bar pie gummies tootsie roll. Bonbon I love jelly sweet roll I love pastry. Lemon drops sweet wafer fruitcake pudding marzipan. Bear claw dragée donut marzipan tart marzipan. Cupcake faworki cookie donut powder. Ice cream pie chocolate soufflé wafer liquorice dessert liquorice. Pastry cookie lemon drops I love cupcake marshmallow ice cream. Gummi bears ice cream cookie I love dragée. Donut biscuit jelly powder sweet cotton candy icing. Topping sweet biscuit caramels pastry jelly beans caramels wafer marzipan. Apple pie cookie candy pie brownie liquorice jelly beans sweet roll I love. Chupa chups I love tootsie roll topping dragée I love chocolate.


Links

A link is sometimes known as an address or URL (Uniform Resource Locator).

HTML

<a href="http://booknerd.ca" target="_blank">Please visit my book blog here</a>

Result

Please visit my book blog here

You may also add an attribute to this tag which opens up windows in different frames.

target=”_blank” – Opens up the link into a new window
target=”_parent” – Opens up the content in the parent frameset of the current frame
target=”_self”> – Opens up the content in the same frame
target=”_top” – Opens up the content in the top frame.

Sometimes links can target email addresses. It will then open up your web based email service (if you’re logged in) or your email program like Outlook.

HTML

<a href="mailto:my-email-address@home.com" target="_blank">Email me a message</a>

Result

Email me a message

You can also use anchor links which helps users jump to certain parts of a page. This is most helpful when you have an archived list of your reviews. Then use this name element to target the destination of the link. First create a mini navigation using <a href=”#linkA”>A</a>. A must change for each link. Then use <a name=”link-name-here”></a> and wrap it around any head element.

Don’t forget to add an anchored Back to Top link or visitors will have to scroll up to the top themselves. Do the work for them, and they’ll thank you.

HTML

<a name="top"></a><a href=”#linkA”>A</a>|<a href=”#linkB”>B</a>|<a href=”#linkC”>C</a><a name=”linkA”></a>
<h1>A</h1>
<a href=”review-a-beautiful-dark-by-jocelyn-davies”>A Beautiful Dark</a> by Jocelyn Davies
<a href=”review-a-beautiful-evil-by-kelly-keaton”>A Beautiful Evil</a> by Kelly Keaton
<a href=”http://booknerd.ca/review-a-million-suns-by-beth-revis”>A Million Suns</a> by Beth Revis
<a href=”http://booknerd.ca/review-a-need-so-beautiful-by-suzanne-young”>A Need So Beautiful</a> by Suzanne Young
<a href=”http://booknerd.ca/review-a-temptation-of-angels-by-michelle-zink”>A Temptation of Angels</a> by Michelle Zink
<a href=”http://booknerd.ca/review-across-the-universe-by-beth-revis”>Across the Universe</a> by Beth Revis
<a href=”http://booknerd.ca/review-allegiance-by-cayla-kluver”>Allegiance</a> by Cayla Kluver
<a href=”http://booknerd.ca/review-among-others-by-jo-walton”>Among Others</a> by Jo Walton
<a href=”http://booknerd.ca/review-another-faust-by-daniel-dina-nayeri”>Another Faust</a> by Daniel and Dina Nayeri
<a href=”http://booknerd.ca/review-another-jekyll-another-hyde-by-daniel-dina-nayeri”>Another Jekyll, Another Hyde</a> by Daniel and Dina Nayeri
<a href=”http://booknerd.ca/review-another-pan-by-daniel-and-dina-nayeri”>Another Pan</a> by Daniel and Dina Nayeri
<a href=”http://booknerd.ca/review-anna-dressed-in-blood-by-kendare-blake”>Anna Dressed in Blood</a> by Kendare Blake
<a href=”http://booknerd.ca/review-article-5-by-kristen-simmons”>Article 5</a> by Kristen Simmons<a href=”#top”>Back to top</a><hr /><a name=”linkB”></a>
<h1>B</h1>
<a href=”http://booknerd.ca/review-between-the-lines-by-jodi-picoult-and-samantha-van-leer”>Between the Lines</a> by Jodi Picoult and Samantha van Leer
<a href=”http://booknerd.ca/review-bewitching-by-alex-flinn”><em>Bewitching</em> by Alex Finn</a>
<a href=”http://booknerd.ca/review-blood-sun-by-david-gilman/”>Blood Sun</a> by David Gilman
<a href=”http://booknerd.ca/review-bzrk-by-michael-grant”>BZRK</a> by Michael Grant<a href=”#top”>Back to top</a><hr /><a name=”linkC”></a>
<h1>C</h1>
<a href=”http://booknerd.ca/review-catching-jordan-by-miranda-kenneally”>Catching Jordan</a> by Miranda Kenneally
<a href=”http://booknerd.ca/review-changeling-by-philippa-gregory”>Changeling</a> by Philippa Gregory
<a href=”http://booknerd.ca/review-cinder-by-marissa-meyer”>Cinder</a> by Marissa Meyer
<a href=”http://booknerd.ca/review-city-of-lost-souls-by-cassandra-clare”>City of Lost Souls</a> by Cassandra Clare
<a href=”http://booknerd.ca/review-clockwork-angel-by-cassandra-clare”>Clockwork Angel</a> by Cassandra Clare
<a href=”http://booknerd.ca/review-clockwork-prince-by-cassandra-clare”>Clockwork Prince</a> by Cassandra Clare
<a href=”http://booknerd.ca/review-code-name-verity-by-elizabeth-e-wein”>Code Name Verity</a> by Elizabethe E. Wein
<a href=”http://booknerd.ca/review-cold-kiss-by-amy-garvey”><em>Cold Kiss</em></a> by Amy Garvey<a href=”#top”>Back to top</a>

Result

A|B|C

A

A Beautiful Dark by Jocelyn Davies
A Beautiful Evil by Kelly Keaton
A Million Suns by Beth Revis
A Need So Beautiful by Suzanne Young
A Temptation of Angels by Michelle Zink
Across the Universe by Beth Revis
Allegiance by Cayla Kluver
Among Others by Jo Walton
Another Faust by Daniel and Dina Nayeri
Another Jekyll, Another Hyde by Daniel and Dina Nayeri
Another Pan by Daniel and Dina Nayeri
Anna Dressed in Blood by Kendare Blake
Article 5 by Kristen Simmons

Back to top


B

Between the Lines by Jodi Picoult and Samantha van Leer
Bewitching by Alex Finn
Blood Sun by David Gilman
BZRK by Michael Grant

Back to top


C

Catching Jordan by Miranda Kenneally
Changeling by Philippa Gregory
Cinder by Marissa Meyer
City of Lost Souls by Cassandra Clare
Clockwork Angel by Cassandra Clare
Clockwork Prince by Cassandra Clare
Code Name Verity by Elizabethe E. Wein
Cold Kiss by Amy Garvey

Back to top


Headers

This element uses six heading levels to show the most important headings on a page. If you place the title of your book and author as the head element, it can help search engines understand your markup better.

HTML


<h1>This is an example of the h1 tag</h1>
<h2>This is an example of the h2 tag</h2>
<h3>This is an example of the h3 tag</h3>
<h4>This is an example of the h4 tag</h4>
<h5>This is an example of the h5 tag</h5>
<h6>This is an example of the h6 tag</h6>

Result

This is an example of the h1 tag

This is an example of the h2 tag

This is an example of the h3 tag

This is an example of the h4 tag

This is an example of the h5 tag
This is an example of the h6 tag

Div
The div element identifies the structure of a document. We will learn more about this in CSS.

HTML


<div id="content">
<h1>Heading</h1>
This is body content
</div>

Result

Heading

This is body content


Horizontal Rule

This element shows a horizontal line running the width of your page. You can use this to create a break up your pages into different sections.

HTML


<hr />

Result


Lists

Lists are commonly used for charts, rankings and steps.

There are two types of lists. The first one is called ordered list, and uses the element <ol></ol>. It is numerical or lettered in order so if you’re listing Top 5 Books you Should Read, use the ordered list. The <li></li> element identifies a list item and only appears within the <ol></ol> or </ul></ul> elements.

HTML


<ol>
<li>The Giver</li>
<li>A Wrinkle in Time</li>
<li>The Outsiders</li>
<li>Lord of the Flies</li>
<li>Pride and Prejudice</li>
</ol>

Result

  1. The Giver
  2. A Wrinkle in Time
  3. The Outsiders
  4. Lord of the Flies
  5. Pride and Prejudice

The second list is called unordered and uses the element <ul></ul>. It has no numerical order and only shows bullets.

HTML


<ul type="circle">
<li>Harry Potter and the Sorcerer's Stone</li>
<li>Harry Potter and the Chamber of Secrets</li>
<li>Harry Potter and the Prisoner of Azkaban</li>
<li>Harry Potter and the Goblet of Fire</li>
<li>Harry Potter and the Order of the Phoenix</li>
<li>Harry Potter and the Half-Blood Prince</li>
<li>Harry Potter and the Deathly Hallows</li>
</ul>

Result

  • Harry Potter and the Sorcerer’s Stone
  • Harry Potter and the Chamber of Secrets
  • Harry Potter and the Prisoner of Azkaban
  • Harry Potter and the Goblet of Fire
  • Harry Potter and the Order of the Phoenix
  • Harry Potter and the Half-Blood Prince
  • Harry Potter and the Deathly Hallows

The default type attribute uses a filled circle for unordered lists, and numerical for the ordered list.


Commenting Your HTML

Comments are a perfect way for writing a note embedded in the HTML that only people who “View the source” can see. So it’s a great way to take note where you made changes.

HTML


<!----this is a comment--->
<div id="content">
<h1>This is a heading</h1>
</div>

Result

The comment is only available in the source code of the html.


Special Characters

There are ways to show certain symbols in HTML, and you can use a bit of HTML to show it.

HTML


&lt; displays the <
&gt; displays >
&quot; displays "e;
&trade; displays the trademark sign ™
&ldquo; displays the left double quote "
&rdquo; displays right double quote"

Result


Code

Used to display a snippet of HTML. Can be combined with the <pre> element.

HTML


<code>This is a sentence written in the code element tag</code>

Result

This is a sentence written in the code element tag


Preformated Text

The pre element is used to display a snippet of code as its specifically typed.

HTML

<pre>This is a sentence written in the pre element tag</pre>

Result

This is a sentence written in the pre element tag

Strong

This is the element to bold your text. The <b></b> element was replaced by the <strong></strong> element and hasn’t been used as much.

HTML

<strong>This sentence is strong!</strong>

Result

This sentence is strong!


Emphasis

This element italicizes your text. The <i></i> element was replaced by the <em></em> element and hasn’t been used as much.

HTML

<em>This sentence is italicized!</em>

Result

This sentence is italicized!


Check out the rest of the series:

4 Comments

  1. Pingback: Feature: The Newbie’s Guide to Book Blogging Part 2 – The Resources

  2. Pingback: The Newbie’s Guide to Book Blogging

  3. Pingback: The Newbie’s Guide to Book Blogging Part 6 – Get Visitors to Your Blog - BO-OK NERD CANADA

  4. Pingback: Feature: The Newbie's Guide to Book Blogging Part 1 - BO-OK NERD CANADA

  5. Pingback: The Newbie’s Guide to Book Blogging Part 9 – Canadian Book Events

  6. Dragana @ BookwormDreams

    November 29, 2012 at 3:53 AM

    Very good tips. Just one correction for anchor links it’s not name=”linkA” but id=”linkA”. 😉

    • Giselle

      January 18, 2013 at 8:00 PM

      Hahaha thanks Dragana 😛

  7. Ashley

    August 24, 2012 at 1:15 AM

    Awesome guide!!

    One small correction:

    “This is the element to bold your text. The <s></s> element was replaced by the <strong></strong> element and hasn’t been used as much.”

    Strong actually replaced <b></b> Just “s” is strikethrough, which is still in use. 🙂

    • Giselle San Miguel

      August 24, 2012 at 5:23 PM

      Hahah thanks for the correction! I was doing this late at night 🙂

  8. Pingback: booknerd | Feature: The Newbie’s Guide to Book Blogging Part 2 – The Tutorials

  9. Pingback: booknerd | Feature: The Newbie’s Guide to Book Blogging Part 2 – The CSS

  10. Pingback: booknerd | Feature: The Newbie’s Guide to Book Blogging Part 2 – The Basics

Leave a Reply

Cancel reply

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

CommentLuv badge

%d bloggers like this: