More HTML Codes Every Blogger Should Know
One of the very first blog posts I wrote was a quick HTML lesson covering some basic but important codes every blogger should know. Reviewing it now almost 3 years later, I’ve realized that it may not have been the most intuitive and easy to follow cheat sheet. It’s kind of difficult to break down something you do everything single day into more simplistic terms for someone who has zero knowledge on he subject. It is my hope that this post will be a lot easier to understand and a great reference page to bookmark for the future. If you’re interested in reading my first post on HTML, you can go here to read it.
What is HTML?
Before diving in, it might be helpful to learn exactly what HTML is. HTML is a markup language used to create and design web pages. This markup tells a web browser how to display text, images and other forms of multimedia on a webpage. A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.
What are Tags and Attributes?
Tags and attributes are the basis of HTML. They perform different functions while working together. To gain a better understanding, it is helpful to learn to differentiate the two.
What Are HTML Tags?
Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
What are HTML Attributes?
Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.
An example of an attribute is:
<img src="pictureofdog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
Golden Rules To Remember
The vast majority of tags must be opened (
<tag>) and closed (</tag>) with the element information such as a title or text resting between the tags.When using multiple tags, the tags must be closed in the order in which they were opened. For example:
Why Bother Learning HTML?
It allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications. It allows you to have more control over the structure of your blog/website and the ability to customize the layout.
HTML Cheat Sheet
Image
If you don’t have a self-hosted website, then you’ll need to upload your images to a hosting site in-order to properly link them. If you don’t want to spend additional money on hosting, there are plenty of free options you can use. Google Drive is great option if you don’t want to spend a bunch of money. You can upload your photo directly to Google Drive, then copy the direct link and paste it into the following code:
<img src="https://imagelinkhere">Linking an Image
If you want an image to link to another webpage, you’ll need the following code to do so. Please note: Any time you want to link something, be sure it starts with the http://
<a href="http://websitelinkhere"><img src="https://imagelinkhere"></a>Linking Text
Linking text is almost identical to linking an image. The only difference is direct text will be in place of the image link.
<a href="http://websitelinkhere">Text Goes Here</a>Adding decoration to text
The appearance of text can be altered by using the following codes:
To bold text:
<b>Bold text here</b>To italic text:
<i>Italic text here</i>To underlined text:
<u>Underlined text here</u>Font Size
You also have the ability to control the font size. The “px” after the number represents the pixel size. 10-12 is standard for body text, 24-36 is for header text. Mess around with this and see what works best for you.
<font size="10px">Text goes here</font>Adding a Page Break
HTML doesn’t recognize spaces between lines of text so you need this code so it knows exactly what to do. If you don’t use this code, there will be no spaces so you’ll end up with all of your text in a single line. One of these will start a new line, two will start a new paragraph:
<br>Center Align
Here’s me being a little nitpicky, but if you want to center align something there is a really easy way to achieve this. Although, this isn’t the correct way, it is quick and works well for less complex coding. If you want to align anything in the center, whether it’s text or an image use the following code:
<center>anything you want centered here</center>It can take work and time to get the hang of it, but if you’re interested in controlling the appearance of your site this is the best way to do so.
Also, if you’re interested in reading my first basic coding post, you can view it by clicking the image directly to the left. It has some useful resources and HTML codes I didn’t cover in this post.
Good luck!
