If you plan on being a blogger you will need to have some understanding of code. And when I say code I mean HTML and CSS. Do you know about these two types? Well if you know some or just a little bit here is some basic code every blogger should now.
WHAT IS HTML?
You could be wonder what is HTML? HTML stands for Hyper Text Markup Language which is the language for creating web pages.
HTML uses elements these elements are the building blocks of creating pages. Here are some of the elements.
<html> This element is the root element of a page (defines the whole doc)
<head> This element contains meta info about the doc
<title> This element specifies a title
<body> This element contains the visible page content
<h1> This element is a type of heading inside a page
<p> This element defines a paragraph
If you’re wondering why the elements have brackets it’s because this is the HTML Tag.
<tagname> text </tagname>
- a tag normally comes in a pair, a start tag and an end tag (also called opening and closing)
- the end tag is written like the start tag but with a forward slash before the tag name.
- SIDE NOTE: elements can be nested (element can contain elements)
TIP: Use Notepad (PC) or TextEdit (MAC) to edit or create simple code. Save as an .htm (or .html) doc with encoding to UTF-8.
Here is an example of a page structure.
WHAT IS CSS?
Since we have HTML let’s talk about CSS and what it is? CSS stands for Cascading Style Sheet. This code allows you to make consistency style changes that affect every instance of a certain element throughout your website. In other words, it changes an element the same way throughout the whole site, this way you don’t have to adjust the code of each page individually. Here is an example of an element in CSS:
- selector is a piece of content to target or style. It’s either an HTML element or class name.
- property is a Style Attribute that has a value.
- Property is always followed by a colon (:) and a value is always by a semi-colon (;)
Now that we know what HTML and CSS are let’s look at some more code to help with your blog.
ELEMENTS – HTML
We talked about some elements above in the HTML section. But let’s look at the elements that are inside the body element. The rest of the post is the code you should now!
headings – are defined with the <h1> to <h6> tags. <h1> defines the most important and largest heading (post title) <h6> defines the least important and smallest heading.
paragraph – are defined with the <p> tag
links – are defined with the <a> tag
images – are defined with the <img> tag
<div> – is used as a container for other HTML elements
<span> – is used as a container for some text
<textarea> – is used to put selectable HTML code or text onto a page (example below under hidden picture code)
Ok did you get those let’s add to the elements
ATTRIBUTES – HTML
Attributes provide additional info about the element. They are always specified in the start tag. They usually come in name/value pairs like: name=”value”. Here are some examples:
href – this is the link address inside the <a> tag
<a href=”link”> text </a>
target – is to open a link in a new window
< a href=”link” target=”_blank”> text </a>
src – is the link for an image inside the <img> tag
<img src=”link”> image code </img>
width & height – provide the size
<img src=”link” width=”pixels” height=”pixels”> image code </img>
alt – alternative text to be used when image cannot be displayed
<img src=”link” alt=”text”> image code </img>
STYLE ATTRIBUTES – HTML & CSS
The style attribute defines the elements look. It looks like <tagname style=”property: value;”>. Remember the property and value is CSS code. You can have multiple style inside one element, will look like <tagname style=”property: value; property: value;”> The (“) will go around all styles. Here are some common styles.
background color: background-color defines the background color for an element
<p style=”background-color:#000000;”> text </p>
text color: color of the text in the element
<p style=” color:#000000;”> text </p>
font: font-family defines the font to be used in the element
<p style=”font-family: name;”> text </p>
font size: font-size defines text size in the element
<p style=” font-size: 0px;”> text </p>
text alignment: text-align defines the horizontal text alignment in the element
<p style=” text-align: center;”> text </p>
padding: padding defines the space around the element
<p style=” padding: px;”> text </p>
- If you only want extra space on top, bottom, left, or right use inside the code
<p style=” padding-top: px; padding-bottom: px;”> text </p>
spacing: letter-spacing defines the spacing between letters
<p style=” letter-spacing: px;”> text </p>
FORMATING – HTML
Formatting is used for the text.
<b> – bold
<strong> – important text (bold)
<i> – italic
<em> – emphasized (italic)
<small> – smaller text
<mark> – highlighted
<sub> – subscripted text
<sup> – superscripted text
<u> – underline
<strike> – line though text
HIDE PICTURE CODE- HTML
This code is used to not display a picture. But the picture can still be pinned on Pinterest. It’s a great way to have a couple of pinable images but only display one. It’s a code I thought you would love to have!
BASIC CODE EVERY BLOGGER SHOULD NOW
And that’s it for some basic code you can use on your website. I use the code to create widgets plus also adjust text inside a post, like this post! When writing code make use you begin with <tagname> then end with </tagname>. And remember the “/” it is very important!!! Before you go make sure you grab your FREE HTML & CSS cheat sheet. You just need to subscribe to our blogging newsletter, box provided below!
Hope this helps you design your blog! Do you have any additional basic code every blogger should now? Or questions?