Blogging 101: Basic HTML

 photo blogging tip_zpsytxp6wy5.jpg

Before I started teaching myself how to code, the word “HTML” sent me into a bit of a panic, primarily because I never completely understood it.  I couldn’t wrap my head around how garbled nonsense translated into beautifully designed web pages, let alone how I would go about replicating lines and lines of code.  When I began researching HTML to learn more, the sheer volume of information I was uncovering was overwhelming to say the least.  There were thousands of Google search results, and seemingly more variations and methods to go about writing HTML codes.  If you take away one point from this post, let it be this: do not Google HTML, for your own sanity.

Now that I’ve had some time to learn the ropes and experiment with HTML both here on Brewing Up Books as well as on several other platforms, I decided to compile a list and explanations of my most frequently used HTML codes.

What is HTML?

HTML is a classification of Internet coding.  In typing a series of scary-looking, seemingly nonsense lines of code, a webpage designer can transform a boring, non-formatted website into a stunning array of pictures, links, text, etc.

Throughout this tutorial, I’ll be using “…” to denote where you can enter your own text to achieve a desired result.  Similarly, in replacing any of the fields that I have entered, you can alter a given aspect of the result (ie. the color, size, etc.), so don’t be afraid to experiment!

HTML Color Codes

Each color and shade is assigned a unique, six-digit code.  For examples, this is #2ECC71, this is #9B59B6, and this is #3498DB.  These codes are universal – in other words, the same sequence will always result in the exact same color regardless of what device you are using, the country you are in, the wifi network to which you are connected, etc.

I generally use this website to generate color codes.

Text Formatting

To utilize any of the codes in this post, remove ALL of the asterisks from the codes.

Description HTML Tag Example
Bold <*b>…<*/b>  sample text
Italics <*i>…<*/i>  sample text
Underlined <*ins>…<*/ins>  sample text
Strikethrough <*del>…<*/del>  sample text
Subscript <*sub>…<*/sub> this is sample text
Superscript  <*sup>…<*/sup>  this is sample text
Small  <*small>…<*/small> this is  sample text

Text Color

There are two different ways to adjust the color of text using HTML.  The first is the more straightforward, albeit somewhat limited in color selection – simply insert a color name (ie. red, yellow, blue).  This only allows for an array of basic colors, essentially the colors of the rainbow, with no option to choose different shades or hues.  Red will always equate to the same color of red.

<*span style=”color: purple;”>Sample Text<*/span> = Sample Text

The second formatting option requires you to have a knowledge of or access to a website with information regarding HTML color codes that are referenced in the previous section.  Instead of typing a color name, you insert a # followed by the six-digit code of the color that you would like to display.

<*span style=”color: #ff33ea;”>Sample Text<*/span> = Sample Text

Links

There are several ways to format a link, each building upon the next.  The most basic code can be written:

<*a href=”URL”>link text<*/a> = link text

In the code above, replace “URL” with the website address and “Link Text” with the text you would like to be displayed in its place.  In the example above, I designated the words “Link Text” to direct users to Google’s homepage.

If you would like a link to open in a new window every time it is clicked on, regardless of the user’s device settings, use this format:

<*a href=”URL” target=”_blank” rel=”noopener”>link text<*/a> = link text

To change the color of a given link, use the following format, replacing the color code with one of your choosing:

<*a style=”color: #ff33ea;” href=”URL”>link text<*/a> = link text

Shaded Box

If you would like text to be offset by a given color box, such as the green rectangle around my author bio at the bottom of this post, utilize a variation of this code:

<* div style=”padding: 12px; background-color: #d0f5a9; line-height: 1.4;”>text here<*/div>

You can adjust the value after “padding” to change the dimensions of the colored box; smaller values will decrease the size of the box, while larger values will increase it.  To adjust the color, replace the HTML color code after “background-color” with one of your choosing.

Images

Before launching into my descriptions of image codes, I wanted to define the phrase “Image Address” because it isn’t very commonly used or referred to.  Find an image on a webpage (it can even be one on Brewing Up Books’ sidebar); it doesn’t matter if the image is serving as a link to something.  Left click on the image.  Regardless of whether you’re using a Mac or a PC, there should be an option to “Copy Image Address.”  This image address is the direct link to that specific photo.  Just to prove this to yourself, select “Copy Image Address.”  Open up a new webpage, and click paste in the URL bar.  Your image should pop up.

The most basic way to insert an image is editing this code, replacing the text in quotation marks with your desired image address:

<*img src=”picture.jpg” />

Adjusting the size of the image can be accomplished with a very similar code; simply replace the number of pixels below with the desired width and height:

<*img style=”width: 304px; height: 228px;” src=”picture.jpg” />

Images, when clicked upon, can also function as links, directing users to a given website.  To achieve this, utilize this code:

<*a href=”default.asp”>
<*img src=”smiley.gif” />
<*/a>

In the formatting above, replace default.asp with the website URL that you want to send readers to if they click the image.  Replace smiley.gif with the image address of the picture that you would like to display.  For both fields, do not delete the quotation marks, and ensure that there are no spaces between each quotation mark and your entered text.

Quotations

Short Quotation Tag = <*q>…<*/q>

This is a short quotation. This is a short quotation. This is a short quotation. This is a short quotation. This is a short quotation. This is a short quotation. This is a short quotation.

Long Quotation Tag =
<*blockquote>…<*/blockquote>

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

Tables

Every basic table (such as the one earlier in this post) can be created using some variation of this code:

<*table style=”width: 100%;”>
<*tbody>
<*tr>
<*th>Header #1<*/th>
<*th>Header #2<*/th>
<*th>Header #3<*/th>
<*/tr>
<*tr>
<*td>Row 1, Input 1<*/td>
<*td>Row 1, Input 2<*/td>
<*td>Row 1, Input 3<*/td>
<*/tr>
<*tr>
<*td>Row 2, Input 1<*/td>
<*td>Row 2, Input 2<*/td>
<*td>Row 2, Input 3<*/td>
<*/tr>
<*/tbody>
<*/table>

As an example, the code above would appear as the following:

Header #1 Header #2 Header #3
Row 1, Input 1 Row 1, Input 2 Row 1, Input 3
Row 2, Input 1 Row 2, Input 2 Row 2, Input 3

To edit the table, replace the “Header” and “Row _, Input _” with the values of your choosing.  If you would like to delete rows or columns, simply delete the corresponding lines of code.  If you would like to add rows or columns, copy and paste preexisting lines of the code, editing them to suit your needs.


If you have any HTML questions, feel free to leave them in a comment below or send me an email at brewingupbooks@gmail.com.
Profile Picture

Olivia
I am a freshman in college and an avid reader/reviewer, horseback rider, and graphic designer.  Since a young age, I have fostered a love of reading, beginning with my forays into the Nancy Drew series.  I’ve branched out significantly in my reading tastes since then, and my favorite genres include young adult, romance, mystery, and thriller.  I’m constantly trying to expand my horizons, however, so I do dabble in other genres.  While I’m not reading, I volunteer at a hippotherapy center and a veterinary clinic, practice agility with my dogs, play piano and guitar, and sketch.
Connect With Me:
Advertisements

2 thoughts on “Blogging 101: Basic HTML

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