Social icons



A few of you have already requested a tutorial on how to code and design your own blogs, and even though HTML and CSS are entirely new languages that have taken me years to become familiar with, I'm going to be sharing a couple things that will (hopefully) prove useful to you. Also, this tutorial will only work for blogs that run off HTML and CSS (such as blogspot). So sorry, Wordpress-ers!

LESSON 1 THE BORING STUFF YOU NEED TO KNOW


There are a few basic things you need to know about coding before we can really get into the thick of it.

Actually, before we get started, Ima let chu know right now that coding isn't for everyone. It takes a lot of patience and meticulous work, and is extremely finicky. If you forget to close a tag, accidentally misspell a value, or mess up the order of your tags, your code won't work. Sometimes it'll seem like your codes aren't working for any reason. Either way, if you don't mind experimenting a little and maybe staying up 'til 3 AM in the morning, then maybe coding will be the thing for you. 

Anyway, the first thing you need to know about HTML is that HTML documents consist of HTML tags that make up elements (just think of them as the same for now). These tags are always enclosed in arrowheads or angle brackets (< >), and these tags usually come in pairs (a start and end tag), where the tag with a forward slash defines the end tag. For example, this is a paragraph tag: <p>Your paragraph.</p>. And if one HTML element is surrounded by more than one set of HTML tags, its best to open and close your tags always in the same order. For instance:

<font color="black"><a href="URL">Text</a></font>

The following is the skeleton of a webpage. For the purposes of this tutorial, all that's really important here is what is between the head, title, and body tags. The text between the head tags provides information about the web page. The text between the title tags provides a title for the webpage. The text between the body tags describes the visible page content. 

<html>
<head>
  <title>This is your Page's Title</title>
</head>
<body>
  BLAH BLAH BLAH
</body>
</html>

We will be dealing with coding primarily within the head and body of the your webpage, so it's probably a good idea to become familiarized with what type of codes go where. For the purposes of this tutorial, the majority of the HTML tags we will be dealing with will be found within the body tags. As for our CSS codes, they will be found within the head tags. But until you kind of understand HTML, CSS will make even less sense than it already does. So, let's get started with HTML.

LESSON 2 BASIC TAGS FOR BASIC B*TCHES


As I said previously, HTML is a lot like a language. There are millions of codes that Google can teach you about, but after having coded my own blog for the past few years, I've found that I only really need a handful of codes to get me by.

LESSON 2.1 IMAGE TAGS


Image tags define, well, an image. They usually don't require a closing image tag </img> and always start out with <img. Now, to define the image itself, your'e going to need to paste an image URL within the src="" quotation marks. Once you've closed the image tag with an arrowhead, you've made your first image tag! 

<img src="imageURL.jpg">
LESSON 2.2 CUSTOMIZING TAGS


Now that we (kinda) know how to make tags, we're going to quickly learn about the many ways we can customize these tags. Almost all HTML tags are customizeable, which means that we can often change a element's width, height, color, padding, margins, etc. All you need to do is add the attribute within the < >. Anywhere will do, as long as you keep spaces between each attribute within the tag. For instance, in the tag <font family="arial" size="12pt" color="#000000">, each attribute is separated by at least one space.These values all follow the same format, and if you forget what they are, it's easy enough to Google them. Anyway, a tag's defining values are contained within quotation marks (""). For instance, to define a tag's width, width="140px". Or to define a tag's color, color="#ffffff". Just make sure to close the quotation marks, otherwise your code won't work the way you want it to. Here's a list of definitions we'll be using, so get familiar with them.

ATTRIBUTE DESCRIPTION VALUES EXAMPLES
Width
Sets the width of a tag. Can be an image, a table, a <div> tag. Anything, really. 
Pixels or Percentage <img src="imageURL.jpg" width="100%">
<img src="imageURL.jpg" width="100px">
Height Sets the height of a tag. Pixels or Percentage <img src="imageURL.jpg" height="100%">
<img src="imageURL.jpg" height="100px">
Align
Aligns the tag, much you like align paragraphs in a Word document.
Left, right, center, justify <img src="imageURL.jpg" align="left">
<img src="imageURL.jpg" align="center">
Color
Sets the color of a tag. This usually applies to fonts, backgrounds, and other such things that require a color tag.
6 numerical digit HTML color code <font color="#BE81F7">

Size
Sets the size of a tag. Can be the size of a font or the size of a line.
Pixels or Points (fonts only) <font size="12pt">
<hr size="2px">
Face
Defines your font. Note that not all fonts are recognized by different browsers.
A font family  <font face="times new roman">
Style
Let's you define an HTML tag with CSS properties.
MANY  <div style="CSS">

LESSON 2.3 LINK TAGS


It's easiest to explain link tags by showing you one first:

<a href="URL" target="_blank">Link Text</a>

For some reason, <a> is the HTML symbol for a link. Either way, link tags belong with <a href and must always be closed with </a> (unless you want a whole paragraph to be a link). If you add the target="_blank" attribute, it will open your link in a new window. Super easy, super simple. 

LESSON 2.4 THE REST OF THE TAGS


Now that we kind of get how tags work, and maybe even how to customize them, I'm just going to put the important ones down below in a table. That way, you don't have to read a billion paragraphs, and I don't have to type them out.

ELEMENT DESCRIPTION ATTRIBUTES EXAMPLES
Font What does it sound like? Defines your font (you may also see <Span>; treat it the same as you would a <Font> tag) Size, Color, Face, Style <font size="12pt" color="#000000" face="arial" style="CSS">
Image Just including this in case you're already forgotten. Width, Height, Style <img src="imageURL.jpg" width="100%" height="50px" style="CSS">
Div One of the most important tags you'll ever learn. This tag is a container that encapsulates other HTML tags and can be used to group them together. I've even written an entire section on it below, but for reference, here it is. Width, Height, Align, Style <div align="center" width="100%" height="200px" style="CSS">
LESSON 2.5 DIV TAGS


Div tags are one of the most important HTML codes you'll learn out there when designing you're blog. They're a great way to position HTML elements, and even add small bits of CSS when you're in desperate need. Now, before we really get into the whole shizam with Div codes, we're going to need to quickly learn how to use CSS, since a lot of the coding done with Div codes employ CSS.

LESSON 3 CSS


So far, it's taken me a couple hours to write this post (mostly because I've been binge-watching Marco Polo). So I'm going to get through this quick. CSS contains styles that define how HTML elements are displayed. Basically, if you define an HTML element using CSS once, you won't ever have to define again. For instance, if you want your webpage's font to be yellow, define it once in CSS and you won't have to keep repeating it every time you close your <font> tag. Basically, CSS saves you a lot of work. But, before I forget, all CSS must be contained within <style></style> tags.

CSS consists of rule sets (similar to an HTML tag), and these rule sets consist of a selector and a declaration block. The selector points to the HTML element you want to style, while the declaration block contains > 1 declarations separated by semicolons. Each declaration contains a property name and a value. 



There are many types of selectors in CSS. For one, there's the element selector which is based on the element name. For example, you can select all <p> elements, center-align and define every paragraph's color by defining it in CSS.

p {
text-align: center;
color: red;
}

More importantly, there's the id selector, which uses the id attribute of an HTML tag to define one or more specific elements. This id should be unique within the page, and is preceded by a hashtag when being defined in CSS. For instance, if I'm creating a menu that I want only 5 pixels from the top and 300 pixels wide, this would be my code:

#menu {
top: 5px;
width: 300px;
}

Now that we know all that, if you look at your webpage's HTML, you'll notice that there's already quite a bit of CSS coding involved. And once you understand the different properties and values, customizing any bit of CSS you see becomes 100x easier.

PROPERTY DESCRIPTION VALUES EXAMPLES
Color Boring, but this defines the color. Color code h1 {color: blue;}
Font-family Defines the font family. Font family h1 {font-family: arial}
Font-size Defines the font size. Pixels or Points h1 {font-size:10px;}
Margins
Defines the the element's margins, which are the spaces around an element. There are technically four values that a margin can have: left, right, top and bottom. And when defining a margin, you can either use the shorthand or define each margin value separately. If using the shorthand, the order is: top right bottom left. If you only write one value for the margin, this makes all values the same.
Pixels or Percentage h1 {margin: 10px 5px 15px 20px}
h1 (margin:10px;}
h1 {margin-bottom: 50px;}
h1 {margin-right:50%;}
Padding
Defines an element's padding, which clears an area around the element inside the border of an element. The padding is affected by the background color of the element (i.e., if your padding value is 10px, your background will also be padded or increased by 10px). Like margins, you can either use the shorthand to define each padding value, or define the four padding values separately.
Pixels or Percentage h1 {padding: 10px 5px 15px 20px}
h1 (padding:10px;}
h1 {padding-top:40px;}
h1 {padding-right: 20%;}
Letter-spacing Defines the spaces between letters. Pixels h1 {letter-spacing: 2px;}
Line-height Defines the space between lines of text. Pixels h1 {line-height:5px;}
Background-color Defines the background color of the element. Color code h1 {background-color: #cccccc;}
Top/ Left/ Right/ Bottom
Defines an element's distance away from the top, left, right, or bottom of its designated container. For instance, if I want my h1 text to be 5px from the right of my webpage, I'd describe it as h1 {right:5px;}.
Pixels or Percentage h1 {top: 5px;}
h1 {right: 5%;}
Text-align
Defines a text's alignment. 
Left, Right, Center, Justify h1 {text-align: left;}
h1 {text-align: justify;}
Position
Very important property that specifies the type of positioning method used for an element. Absolute positions an element completely unrelated to the body element. This means they have no effect at all on their parent element and can overlap other content. Fixed positions an element relative to the browser window. Relative positions an element relative to its normal position (i.e., left:20; adds 20 pixels to the element's normal left position).
Relative, Absolute, Fixed h1 {position: absolute;}
h1 {position: relative;}
h1 {position: fixed;}
Font-weight
Determines the font's weight. When using a number to define the font-weight, 400 is normal, and 700 is bold. Different browsers may react differently to a font's weight.
Normal, Bold, Number (100 to 900)
h1 {font-weight: bold;}
h1 {font-weight:400;}
Text-transform
Transform's an element's text.
None, Uppercase, Lowercase, Capitalize
h1 {text-transform: uppercase;}
h1 {text-transform: capitalize}
Text-decoration
Decorate a text (yay!)
None, Overline, Line-Through, Underline
h1 {text-decoration: overline;}
h1 {text-decoration: line-through}
Font-style
Define's a font's style.
Normal, Italic, Oblique
h1 {font-style:italic}
h1 {font-style: oblique}

LESSON 3 DESIGNING YOUR BLOG


Okay, phew. Now that we're past all that, we can get on to the real stuff. Before I get onto some examples, I'm going to share some tips on how to design your blog. And because I use Blogspot, this will specifically be for all you Google Blogger users. 

If you head over to the Layout tab in your Blogger dashboard, you'll notice that you can add HTML widgets onto the sideboard or header of your blog. When designing my blog, I use these widgets to add things like social media icons and fixed position menus that scroll down with the browser. These elements can be added into the HTML template of your blog, but for purposes of organization, I like to use the widgets to keep them separate. Otherwise, changing things like the positioning of blog posts' titles or of the date header can be done within the template. They may be hard to find, but should you be interested in tweaking these little things, Google tutorials are great for this. Unfortunately I'm not going to be going through all this in this tutorial since your code is likely pretty different from mine at the moment. But either way, Google knows all. 


LESSON 4 EXAMPLES


Personally, I find one of the best ways to learn HTML is just going through some examples. I highly encourage that you experiment with these codes on your own website!

<div align="center" style='top:0px; background-color: #cccccc; width:100%; position: fixed; padding-top:5px; font-weight:700; text-decoration: none; padding-bottom:5px; '>
<font style="padding-left:30px; font-color: #000000; font-family:arial; padding-right:30px;letter-spacing: 2px;">
<a href='www.URL.com/about'  target='_blank'>ABOUT</a>&nbsp; &nbsp;
<a href='www.URL.com/contact' target='_blank'>CONTACT</a>&nbsp; &nbsp;
<a href='www.URL.com/blog-roll' target='_blank'>BLOG ROLL</a>
</font>
</div>

Put this within the <body> tags of your website, and you'll get a fixed menu with a grey background. And for reference, &nbsp; signifies a space in HTML.

<html>
<head>
<style>

body {
  font-family: arial;
  font-size:11px;
  color: #000000;
  letter-spacing:1px;
  padding: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom:50px;
  background: #ffffff;

}

html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

a:link {
  text-decoration:none;
  color: #000000;
}

a:visited {
  text-decoration:none;
  color: #000000;
}

a:hover {
  text-decoration: none;
  color: #ffffff;
font-weight:none;

}

#menu {
width: 400px;
top: 0px; 
background-color: #cccccc;
width: 100%;
position: fixed;
padding-top:5px; 
font-weight: 700;
text-decoration: none;
padding-bottom: 5px;

}
</style>
</head>
<body>

<div align="center" id="menu" >
<font style="padding-left:30px; font-color: #000000; font-family:arial; padding-right:30px;letter-spacing: 2px;">
<a href='www.URL.com/about'  target='_blank' style="padding: 0px 15px 0px 15px;">ABOUT</a>
<a href='www.URL.com/contact" target='_blank' style="padding: 0px 15px 0px 15px;">CONTACT</a>
<a href='www.URL.com/blog-roll' target='_blank' style="padding: 0px 15px 0px 15px;">BLOG ROLL</a>
</font>
</div>
</body></html>

This code employs both CSS and HTML to give you a more interactive fixed menu. Now you can adjust the color of your visited links, etc. Should you not want your menu to move, all you need to do is change your position from fixed to absolute!

I'm going to leave it here for now, since it's 3:15 AM in the morning and it's kind of embarrassing that I've already watched 7 episodes of Marco Polo just tonight. I know this post was ridiiiiculously long, but hopefully that has taught you a little bit about how you can use CSS and HTML to design your own blog. Good luck! And should you have any questions, let me know in the comments!

10 comments

  1. This is SO thoughtful of you to share, I can't imagine how long it took you to collate this post!

    LIVE . IN . LOVE ✞

    ~


    ReplyDelete
  2. this is awesome- added it to my bookmarks and will learn now! thank you, thank you thank you! <3

    ReplyDelete
  3. thank you so so much for this <3 you''ve just made html/css actually seem approachable!
    letting you know that for the first example, 6th line it says 'www.URL.com/contact'" instead of /contact'

    ReplyDelete
  4. Thank you for taking the time to make this post Alyssa!

    ReplyDelete
  5. This is amazing! You're amazing!

    ReplyDelete
  6. This is amazing! I'm not the best at coding, but I know some of the basics. I never coded my own blog, but even just designing my own through blogger taught me a lot! Can't wait to do some reworking with your tips!

    Arielle from Tangled Musings

    ReplyDelete
  7. I also struggling on how to get a nice blog and it took so many time to get my customized blog and this basics tips that you post now help me a lot... thanksssss...;)

    ReplyDelete
  8. how do you insert a search box and drop down menu into the fixed menu?
    Thank you for this. You're an actual blessing, I've wanted a fixed menu for over a year now and every other tutorial was tricky to understand. This is perfect *insert tearing up emoji* <3


    / O.R.R.

    ReplyDelete
  9. @Oroma, I'd love to explain it to you but that'd probably take another post! If you're wondering how to code different things, there are lots of tutorials you can find on Google to help you out :) At least that's what I do! x

    ReplyDelete

Powered by Blogger.