Blogging 101: Simple HTML Codes

Hello Princesses!

Today I'm going to be showing you some super simple HTML codes! You will frequently use HTML coding within your blog post and when creating and customising your gadgets on your blog, so it's important to understand (vaguely at least) how the codes work. All of the codes that I'm writing out today are visible in this text post because in order for your code to work within your blog post, it must be entered through the HTML tab.

There are a couple of "rules" to HTML coding (I've never studied HTML coding, so this is what I've learnt from trial and error). Generally, there shouldn't be any spaces in your changeable code/code that you modify yourself. If you insert a hyperlink and have random spaces, the code will not work. All codes must be enclosed between < and >. If your code isn't working, check to make sure that each section of code is closed and there are no unexplained spaces.

For the codes that involve images, you will need to use an image hosting site, (I use Photobucket). You will need to find the hyperlink/direct link to the photo through the image hosting site to insert into your image  code.

If you're inserting images or text code onto your blog layout, then you will need to create a gadget in your Layout Tab. Chose the HTML/Java Script gadget to insert any type of HTML code.

Space

<br /> 

This creates the spaces between paragraphs or images in a gadget. Each set (<br />) equals one enter click.

Center

<div style="text-align: center;">

This centers text or images. Just insert it before the text or image code. This code is especially handy for doing bulk images on your blog that are different sizes.

Text Link

<a href="Yourlinkhere">Yourtexthere</a> 

This one is quite a simple code, the blue text indicates what the link should say, and the red text is where the hyperlink will go to the site that your link is taking you to.

<a href="Your link here">Your text here</a>

 

Static Picture

<div style="text-align: center;">

<img src="yourhostlinkhere"width="250px"/></div>

This code creates un-clickable pictures (like my profile picture on the left). Find the hyperlink to the photo you want to be shown (through your image hosting site) and insert it where the red text is. These images are also sized, so if you want to change the size, change the blue numbers.

<div style="text-align: center;">

<img src="your host link here"width="250px"/></div>

Click-Through Pictures

<a href="Linktodestination">

<img src="Yourimagehostlink"width="300px"/></a>

This is really easy to get confused by, but really simple once you know what's happening! The first line is where the clickable picture is taking you to (affiliate links, shop links etc) so all you need to do is pop the hyperlink in the red text section. The next line is the image line, so you need to host your image on your image hosting site, copy the hyperlink, and paste it into the blue text section. Make sure there are no spaces where there shouldn't be spaces, and change the green numbers to change the size.

<a href="Link to destination">

<img src="Your image host link"width="300px"/></a>

Search Bar

<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form></div>

This code creates a little button that allows you to search your entire blog! I actually don't really understand how it works, but insert it into a HTML/Java Script Gadget and it should work just fine!


I hope these codes are helpful for you princesses trying to do any coding on your blogs! If you have any questions about coding, leave a comment down below and I'll try my best to help you out! ^.^

Next week I'll be showing you how to make your own social media buttons!