Friday, 13 May 2016

Coding For Bloggers 101: The HTML And CSS Basics

Coding for Bloggers 101: The Basics of HTML and CSS | www.hannahemilylane.com

Non-bloggers don’t always understand that blogging isn’t just writing a few words and hitting publish. There’s so much more that goes on behind the scenes such as crafting the perfect flat lay, mastering composition and editing, learning the most effective ways to promote your blog and being able to communicate with brands as well as other bloggers. Then there’s all the technical stuff.

If you don’t know anything about coding, which I didn’t when I first started blogging, it can be a bit daunting. Wanting to change up your template and opening the Edit HTML tab on Blogger when you don’t know the first thing about HTML and CSS is enough to put anyone off, and I can fully understand why you’d then decide that buying a template is the only option.

But because I’m a poor student and a little bit stubborn, I perservered and self taught myself with thousands of online tutorials and articles about what the bloody hell all this code means. Now when I want to change up my template, I can do that myself. The thing is, when you buy a template and you want to change it, you’re limited. You have to rely on the person who designed it, and they’re not always there for you.

So whether you want to design your own template, or edit one someone else has designed for you, you need to be able to understand how they work. Coding is a hugely broad topic, and I, nor anyone else, can cover it all in one post, but this should be a good introduction which you can learn from, and I plan on doing some more specific tutorials too.

Note: These tutorials will be aimed at Blogger because that's where my experience is, though even if you use other platforms, you will defintiely be able to learn something
Your ultimate guide to understanding HTML and CSS and all the code you'll need to know as a blogger, including FREE cheatsheets | www.hannahemilylane.com

The differences between HTML and CSS


HTML stands for Hyper Text Markup Language. CSS stands for Cascading Stylesheet.

HTML tells your browser WHAT to display and deals with the content and structure.
CSS tells your browser HOW to display it and is concerned with styling the content and the appearance.

How is HTML written?


On Blogger, you will find and edit HTML code mostly when you’re writing a post (in the HTML view) or in your Layout tab. You’ve probably seen some of it before, but clicked off in a panic haste because much symbols, such confusion.

It’s actually not confusing, once you know what it all means.

As an example, to make a link clickable, you would use HTML.

<a href="http://www.hannahemilylane.com/">My blog</a>

<...> opens the code and is called an opening tag.
a indicates it's a link.
The href="..." tells the browser the target location for the link. This is called an attribute.
</...> closes the link. This is a closing tag.
My Blog is the element content, and is the text that would appear as a link.

Note: as standard, code is always written in lowercase letters.

So what sort of HTML should I know?


These are some basics you should know, I will also include a printable at the end of the post

Links

<a href="http://www.hannahemilylane.com/">My blog </a>
<a...> is the tag for a link and </a> closes it. Then you can flesh out the code with lots of fancy things, otherwise known as attributes, such as:
href="url" - the target address for the link, use an url to link to a website or href="mailto:emailaddres@example.com" to link to an email
rel="dofollow" or rel="nofollow" - a little confusing and worth having a read up on, but basically if you’ve been paid or encouraged (through free products for example) to link to an external site you should include a no follow attribute in your links.
target="_blank" - so a link opens in a new tab
title="..." - adds any additional information about the link that will appear when hovered over

Images

<img /> is the tag, it doesn't need a closing tag, but on Blogger you should put a / at the end
src="..." - this attribute defines the URL of the image, can be a jpeg, gif, or png file
alt="..." - useful for people who use screen readers as this is what will be read, helps with SEO, and will appear if image can’t be displayed
width="..." - change width, use values such as percentages 100% (full width) or pixels 100px
height="..." - same as above, but with height. Also you can use "--" instead if you change the width but want it to stay in proportion
border="..." - to add a border

To use an image as a link, simply replace the text between <a href="..."> and </a> with your image tag. Example:
<a href="http://www.hannahemilylane.com/"><img src="..." alt="Hannah Emily Lane Blog" width="100%" height="--" /></a>

Headings

Search engines use headings to skim your page and content so don't overlook them! They also help humans to digest your content too. h1 is the most important heading and h6 the least important. Use h3 - h6 in posts.

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>


Lists

Bulleted (unordered) list:
<ul>
<li>example</li>
<li>example</li>
<li>example</li>
</ul>


  • example
  • example
  • example

Numbered (ordered) list:
<ol>
<li>example</li>
<li>example</li>
<li>example</li>
</ol>


  1. example
  2. example
  3. example

Others


<p>...</p> - to mark a paragraph of text
<b>...</b> - for bold text
<u>...</u> - for underlined text
<i>...</i> - for italicised text
<s>...</s> - for strikethrough text
<small>...</small> - for small text
<big>...</big> - for big text
<hr /> - for a horizontal rule like below


Coding for Bloggers 101: The Basics of HTML and CSS | www.hannahemilylane.com

What about CSS?


On Blogger, you will find all this in your Template --> Edit HTML tab between the <skin>...</skin> tags, or if you use Wordpress, in your style.css file. When using CSS, you should always keep your CSS together in this stylesheet, and not use inline styles (i.e. in your html - such as <h2 style="font-size:36px;">...</h2>) This makes things easier when you go back and change them, as everything is in one place. Inline styles override the CSS so you would have to manually go back and remove it from every single page and post.

CSS is written like this:

.selector {property: value;}

Selectors can either be:
An element e.g. h4
In HTML this would be written like <h4>...</h4>
A class e.g. .example1
In HTML this would be written like <span class="example1">...</span>
An id e.g. #example 2
In HTML this would be written like <p id="example2">...<7p>

Note: an id tag cannot start with a number

Properties are things like font-size, color, background, margins.
Values are things like 100%, 300px, #ffffff.

What CSS should I know?


There is loads to learn, and depending what you want to change up depends on what you will use. I can't possibly include everything in this list, but here's some of the basic things you might use:

color: red; - changes text colour, can use names of colours, hex codes or rgb codes
opacity: 0.8; - changes the opacity, 1 is 100%, 0 is completely transparent
background-color: red; - changes background colour
border: 2px solid red; - changes border properties. Also can use border-top: 2px; border-left: 1px; to define each side seperately.
margin: 20px; - adds a margin around elements
padding: 20px; - adds padding around elements
width: 100px; - changes width
height: 100px; - changes height
letter-spacing: 4px; - changes letter spacing
text-transform: uppercase; - changes CASING (uppercase, lowercase, capitalize)
font-size: 22px; - changes font size

There is so many more, here is a much more extensive list

Note: with border, margin and padding, if you simply have margin: 20px; this would add 20px to each side. It's shortform for this:
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
so
margin: 20px 20px 20px 20px;
It is written in clockwise order, starting from top, so if you wanted uneven widths of margin (or padding, or a border), you could write it like this:
margin: 20px 10px 20px 10px; or margin: 20px 10px;

How do I use HTML and CSS?


So you're probably reeling from all the code I've just thrown at you, and you might still not know what on earth you should even use it for. I feel like the best way to explain how HTML and CSS can be used to change an element of your blog is by using an example:

How to make a button


To jazz up your blog a bit, you could change some text into a clickable button, with a little bit of HTML and CSS. An example of what I mean by a button:
A button yay
To do this, I add an id/class to the link, and this is then styled with CSS. So the HTML which I use in a post looks like this:

<a class="blackbtn" href="url">A button yay</a>

Then in my CSS (between <skin>...</skin>) I have this code:

.blackbtn {
background-color: #2e3034;
color: #fff !important;
cursor: pointer;
padding: 10px 30px;
text-transform: uppercase;
font-weight: bold;
}

.blackbtn:hover {
background-color: #a1dad1;
color: #fff;
text-decoration: none;
}

The class="blackbtn" in the HTML then uses .blackbtn in the stylesheet to style this link. The background colour has been changed, along with the font, and padding has been added to move it away from other elements and make it appear as a button. :hover has also been added to change the appearance of the button when the mouse is on it.

If you want to add this to your blog, there is a full tutorial on xomisse which explains how to do it in much more detail and includes the code needed to centre the button.

Coding for Bloggers 101: The Basics of HTML and CSS | www.hannahemilylane.com

Something to note:


Before even touching the CSS in your "Edit HTML", BACK UP YOUR TEMPLATE. This is super important, especially when you're new to this and not quite sure what you're doing. If you want to have a play around and practice with code, I'd recommend having a tester blog. You can import your current blog template to it and then experiment with that, without doing any damage to your actual blog. 

Also, if you want to explore coding a bit further or want to know how someone else has done something, try right-clicking on a website in Chrome and clicking 'Inspect element' or 'View Page Source'. This will show you the source code of the website, and if you use inspect element you can even play around with it a little to see what each bit of code does. 

Useful resources:


There is so much to learn about coding and I certainly don't know it all. If you want to learn more, these are the websites I learnt almost everything I know from! They're super useful.
W3 Schools - the coder's bible.
xomisse blog - full of fantastic tutorials for your blog.
The Blog Stylist's HTML cheatsheet - great list with copyable codes

I hope this was helpful, if you have any more questions please let me know and I'll do my best to help!


Printables:

HTML Cheatsheet printableCSS Cheatsheet printable

Hannah Lane
Related posts:
The Ultimate Blog Organisation SpreadsheetBlogging tips: bad adviceHow to be more organised

No comments :

Post a Comment