HTML For Bloggers

Friday, September 14, 2018

Photo by Alexandru Acea on Unsplash
Hello!
Today, I decided to do something a little different from all the fashion and lifestyle stuff. I decided to compile a list of HTML codes that I think ever blogger, creative, or small business owner should know. If you're going anything web related, it's important to understand a little bit about coding because in the long run, it can help your blog grow. Before we get started, I wanted to go over what HTML means. HTML stands for hyper text markup language. Every web page is created using HTML which helps to add text, structure your web page and create a rough layout of what you want to include on your page. For those of you who blog or even just want to learn HTML for fun, I hope this post will serve as a helpful beginners guide to HTML.

If you are using Blogger, you may have noticed the HTML button next to compose when you create a post. That is usually where all the html code goes. If you are using Wordpress, when you add a post, there are two 3 tabs at the top right of the text box. The HTML tab should be the one that says text. Before implementing your HTML code into your website, I would recommend opening up notepad on your desktop and saving the file as (filename).html. You must put the .html as the extension in order for the browser and file to read it as an html file otherwise it would just open up as another text file on notepad. 


Headings and Paragraphs

For every blogger, heading and paragraphs are an essential  content for their blog. In HTML, there are up to 6 different heading sizes with 1 being the largest, and 6 being the smallest. To create a heading code in HTML, you will need to start with <h1> to wrap the text that you want for the heading, and close the text with </h1>.

Example:
<h1>HTML and CSS for Bloggers</h1>

Go ahead and test out the code using all the different heading sizes.
To add the body paragraph for your content, you will use the 
<p> property. Remember to enclose the text with </p>

Example:
<p>Example text</p>

Image + Links

What would a website be without a few images? Adding an image is a bit different in that it doesn't need a closing tag. To add an image, you would begin with <img src = "http//:imagelink.com">. If you need to upload an image that's stored in your computer, you can simply link is to the local file or upload it to an image hosting website and copy the direct link through there. I would recommend using Flickr, Google Photos, or Tinypic.

Example:
<img src = "http://i66.tinypic.com/21l1x6b.jpg>

A text link is similar to an image where you place a link of the source, but it does require a closing tag. If you want to place a text link into your blog, all you have to do is use the <a href> attribute. And input the link after href. If you want to create a hypertext, all you need to do it add the text you want to be linked right after the href.

Example:
<a href = "http://sharonmystyle.blogspot.com/"> Sharon My Style</a>

If you want to add an image and link it to a website, you would combing the <a href> attribute and the <img src= > attribute like so:

Example:
<a href = "http://sharonmystyle.blogspot.com/"><img src= "http://i66.tinypic.com/21l1x6b.jpg"></a>

Alignment

If you're a content creator with your own website, you know how important it is to align images and text to make your page look presentable. For alignment, there are 3 different types which are centered, left, or right. I think this HTML code will be an essential in allowing you to create and align texts or images to the way you want it. Aligning text in HTML is a fairly simple process. The first thing you would need is the property of the text you want aligned and where you want it aligned. If you want a paragraph element aligned in the center, it would be <p align = "center">Example text</p>. As for images, you would use the same attribute for adding an image and the align in the center, so it would be something like <img src = "image.com" align = "center"> 
If you want to have a more organized and cleaner code, I would recommend using CSS which stands for cascading style sheet for alignment because it simplifies the code readability and allows more flexibility. I will talk about CSS in another post.

Example:
Text - <p align = "center">Example Text</p>
image - <img src = "http://i66.tinypic.com/21l1x6b.jpg" align = "center">

I hope you guys enjoyed reading this post and found it helpful. I am currently working towards becoming a web developer, and this is my first post on about coding. If you guys want more content like this, please let me know. I really enjoyed writing this and would love to spread my knowledge about web development. I would love to hear your thoughts and comments! :)

Post a Comment