25 comments

Basic HTML Tags Every Fashion Blogger Should Know


jennine computer

HTML?!? These days blog platforms make it easy to upload photos, so why do bloggers need to know HTML? Not every website is going to have the exact WYSIWYG( “What You See is What  You Get,” basically tools that do the HTML for you) options you need to do what you want to do. Example? Say you're on a forum, like the IFB forums, and you'd like to post an image with a link. How do you do that? HTML. How do you create a badge for your site? HTML. What if your links are acting wonky, or you received code that is reacting funnily to your blog… how do you change it? HTML.

There are many advantages to knowing HTML, and believe it or not, you don't really need to know much, and once you get the logic of it, it's actually pretty easy to learn. Here are a few examples of what HTML looks like:

  • Images: <img src="http://yourimageurl.com" alt="cool image"/></img>
  • Links: <a href="http://yourblog.com" target="_blank"/>Awesome Blog</a>
  • Font size: <font size="6">Look at the size of the text!</font>
  • Font color:<font color="red">Look at the color of the text!</font>

How to learn:

I actually bought the book, HTML for Dummies years ago but it wasn't until I was blogging and making badges and leaving links in places, that I really learned the basics. Getting a book is a good start. Nowadays, when I need to do something in HTML and don't know the code, I use Google. There are plenty of great resources, for instance the W3schools.com has everything you need to know about HTML and more. I personally love that site.

Another way to learn HTML is to look at your posts in HTML mode in your blog editor. I used this a lot when I wanted to have special text treatment or was learning how to imbed an image, or make a bulleted list. Trust me, I'm a slow learner, and this helped a lot.

Finally… practice, practice, practice. Code doesn't stick in my head easily, but after blogging for the past almost five years, I can make an image with a link that opens a new page in my sleep. Which comes in handy because a lot of times code puts me to sleep. Anyway, learning HTML will really help you get started on being more independent and help you get a good start to pushing your blog to the next level.

By Stephanie Brown of FAIIINT

css for beginners part 1

CSS is something a lot of people ask my advice on, assuming it is too technical or complex for them to learn themselves, this is absolutely not true. It’s nowhere near as scary as it seems and everyone is capable of learning the basics and using it to customize their blogs. It’s not something that will take months or years to learn, with all the excellent resources available right at your fingertips you can teach yourself the very basics in a few hours.

Layout and design play such a huge role in how your blog is seen and perceived by others, whether they be other bloggers, potential collaborators or future employers, that you should want it to look the best it possibly can. First impressions count and appearance can often make or break future relationships, especially with clients. Not everyone has spare cash lying around to hire a web designer or to buy custom templates, but everyone can, with a little spare time, learn how to do it themselves. So now there is no excuse for a poor or unoriginal design!

I’ve tried to make this as simple as possible, so that even total beginners can alter their themes with ease. Follow the instructions on how to get to the CSS editor for your blogging platform below, then simply copy and paste my CSS code examples into the box and alter the red text to suit your needs. You can go to the bottom to copy the entire code in full, or pick out only the customizations you need from the sections below.

Where

WORDPRESS [SELF HOSTED]

There will be a separate full tutorial next week, stay tuned!

WORDPRESS

To use custom CSS on a free WordPress blog, you need to have purchased the ‘Custom Design’ feature. You can do this by clicking the ‘Store’ button on your dashboard menu and following the instructions. The last time I checked, this was $30 for an entire year (or $0.08 per day) and would require renewing each year. I personally think it’s a great price and a much cheaper option than self hosting!

Log into dashboard → Appearance → Custom Design → Click ‘Edit’ button in the ‘Custom CSS’ box → Scroll to the bottom and make sure ‘Add my CSS to (Your Theme Name) CSS stylesheet’ is selected under ‘CSS Settings’

Note: The first time you customize your CSS, the area at the top for writing your code should be totally blank, if it’s not, completely delete everything inside so that it is.

BLOGGER

For the purposes of this tutorial, the majority of customizations you will be able to make using the Blogger editor and will not need to add the CSS yourself. Go through the various categories listed and make any alterations using the editor. Do not add CSS for any customizations you have already made using the editor, however, if there is something listed below that the editor cannot do simply click the ‘add CSS’ option and add only that customization/s.

Log in to dashboard → Layout → Click ‘Template Designer’ link → Advanced → Add CSS

Tips

  • I suggest that you set up a second ‘tester’ blog for which you can try out your customizations first, this way, once you’re happy with it you can just copy & paste the CSS into your real blog, knowing it’s perfect. This saves your readers seeing the unfinished version, and also it’s reassurance for those that are a little scared to try it out, if you mess up the test blog, no big deal!
  • All code highlighted in red can be altered to your own preferences. The descriptions also contain red words, these are your options when altering the code.
  • Spellings are always North American – so ‘color’ not ‘colour’ – being British this tripped me up no end of times when I was starting out! If something’s not working, check the spelling!

Background

BACKGROUND COLOR
One of the simplest and most requested things I get asked is how to change background colour. It’s a very simple alteration that can make a big impact on your layout and design, however be wise with it – pale colours tend to work best and are the most user friendly. Also note, depending on your theme this may or may not change the colour of the background on your posts and sidebars.

body {
background: #FCF9F8;
}

The highlighted hex number can be altered to any colour you wish. See the resources section at the end of the post for a colour picker that will give you the corresponding code for any colour you select. The colour picker tool in Photoshop (or similar) will also give you the relevant code, look for the ‘#’ box.

BACKGROUND IMAGE
To add a background image, first you need to upload an image to your usual image folder and then copy the URL down. Replace my URL with the correct one for your image.

I personally suggest an image which is small and can be tiled to repeat across the entire background.

body {
background:#FCF9F8 url(‘http://www.yourdomain.com/yourbgimage.png‘) repeat right top;
}

I’ve also included a background colour here, if your background image takes a while to load, or is broken, the colour will be displayed until the image loads over the top, so make this a similar colour to your image.

The repeat right top command tells the image to tile from the top right corner. This can be altered, but I would suggest leaving it as it is. Possibilities are repeat right top and no-repeat.

Font

Font customization is another simple, but very effective way to add personality and style to your blog. Again, keep in mind your background colour, dark fonts work best on light backgrounds and vice versa, users need to be able to read your blog easily, don’t make it hard for them!

body {
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
color:#1a1a1a;
text-align:left;
}
Special note regarding WordPress: If the above does not change all of your text to the colour you want, use the below instead. This varies with themes, so try the above first and only use this alternative if it doesn’t work for your theme.

* {
font-family:Helvetica, Arial, sans-serif !important;
font-size:12px;
color:#1a1a1a !important;
text-align:left;
}

FONT-FAMILY
This is the font itself, such as Arial, Times New Roman, or Verdana. Unfortunately, you cannot just use any font you like. The font must be one that all computers have installed as standard, otherwise it will not be displayed and a standard font will be used instead. This can really affect your overall design, so it is always best to use one of the fonts which are considered ‘web safe’. Click here  for a list and examples of web safe fonts and their families.

FONT-SIZE
This can be any number you want, the smaller the number the smaller the text and vice versa. 12px is the most common size, as it’s easily readable, but clearly smaller than headings and titles. If you do decide to change this, I strongly suggest choosing either 10px, 12px, or 14px.

COLOR
The same as for background, this can be changed to any hex colour code you like. Always make sure to have included the # at the beginning.

TEXT-ALIGN
This tells the text which side to align against, left is the default, but it can also be changed to right, center or justify.

Links

When styling links, a:link, a:visted and a:active should all be styled exactly the same for a clean, uniform look. I suggest customizing a:link and then copy and pasting the styling between the curly brackets into the other ones to be sure. Those 3 are all how the link appears on the page (when it’s unvisited, when it’s visited & when it’s selected), a:hover is how the link looks when the user hovers their mouse over it. It’s common to style this differently to the others, whether you want it to change colour, underline, become bold or it can be styled exactly the same as the others for no change.

a:link {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}a:visited {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}a:hover {
color: #B7ABA3;
text-decoration:underline;
font-weight:bold;
}a:active {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}
Special note regarding WordPress: If you used the alternative second option above for text colour, please follow all colours for links with !important– Otherwise the colour for the text will override your chosen colour!

For example – color:#1A1A1A !important;

COLOR
Again, choose any hex code you like to alter the colour. I think it’s nice to have the a:active colour different to the rest.

TEXT-DECORATION
This is used to add or remove decoration, most commonly to remove the underline from links. The default is underline, but setting it to none will remove the underline from your links. If doing this, I suggest making the link a different colour to the text, or making it bold, so that it stands out as a link and doesn’t just appear as ordinary text, which is confusing for visitors.

You can also use underline just on a:hover, with the rest set to none, this will make the line appear only when the users mouse hovers over it. Slightly more interesting is overline, this is the same as underline, but the line goes over the text instead of under it, line-through puts a line through the middle of text.

FONT-WEIGHT
This can work nicely if you don’t want your links to be underlined, making them bold works equally well for showing the user that it’s a clickable link. The default is normal, change it to bold for bold text , bolder for extra bold or lighter for skinnier text.

All Together Now

All together, this would look like:

body {
background:#FCF9F8 url(‘http://www.yourdomain.com/yourbgimage.png‘) repeat right top;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
color:#1a1a1a;
text-align:left;
}a:link {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}a:visited {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}a:hover {
color: #B7ABA3;
text-decoration:underline;
font-weight:bold;
}a:active {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}
Or alternatively for certain WordPress themes:

body {
background:#FCF9F8 url(‘http://www.yourdomain.com/yourbgimage.png‘) repeat right top;
}* {
font-family:Helvetica, Arial, sans-serif !important;
font-size:12px;
color:#1a1a1a !important;
text-align:left;
}a:link {
color:#1A1A1A !important;
text-decoration:none;
font-weight:bold;
}a:visited {
color:#1A1A1A !important;
text-decoration:none;
font-weight:bold;
}a:hover {
color: #B7ABA3 !important;
text-decoration:underline;
font-weight:bold;
}

a:active {
color:#1A1A1A !important;
text-decoration:none;
font-weight:bold;
}

References

http://www.w3schools.com/css/default.asp – for CSS help and tutorials

http://www.colorpicker.com/ – Hex colour picker

Leave a Reply

Your email address will not be published.

25 Responses

  1. Kayla

    This is a great article! I feel like I’m always going to be a bit of a dummy when it comes to HTML, but it is important to know a few basics!

    Reply
  2. lisa

    Knowing basic HTML is so helpful. I hate how Blogger’s WYSIWYG editor puts funny spaces into my text, so I always do my posts in HTML view for finer control.

    P.S. I think the tag as shown in your examples is on its way out. When I last Googled how to change font size, I found a post that said it was deprecated in HTML5 and we should be using styleshets, or the style attribute in or , instead.

    Reply
  3. TheOnlineStylist

    Fantastic – thanks for this! I never needed HTML when I was on the Blogger platform but am starting to realise I need to know the basics since moving to a self hosted WordPress package. Great reference as always! x

    Reply
  4. Loren

    Yeah ditto what Lisa said. If you want to change the color or size of your font color/size you should add styles to your paragraph tags. It should look something more like this.
    <p style=”color:red”>OMG Red Text</p>
    <p style="font-size:20px">Really Big Text</p>
    The font tag has been depreciated and shouldn't be used anymore. The W3 schools has a whole section on CSS as well.

    Reply
  5. meccanuri

    THANK YOU for this article! i am putting together a blog, and i am a total newbie with html. and thank you Lisa & Loren for the updated html tags as well. very helpful!

    – mecca nuri 🙂

    Reply
  6. melmo

    Thanks for this article. It’s great because i just started to Uwe html for my Blog. Now i even want to know more.

    Reply
  7. Vogue & Vintage

    GREAT POST AS ALWAYS! I use to know HTML like the back of my hand when blackplanet first came out because i wanted my page to be unique. I knew how to add those little smart message so no one could steal my images and now…its all lost have to learn it again! But its cool…lol

    Reply
  8. Tamia

    It really does come in handy when you’re doing bloggy stuff, as something is bound to look funny and you need to be able to figure out WHY.

    I always tell people HTML looks a lot harder than it really is–I learned it in about 5 hours (1 hour/day for a week) at Tizag.com, and now I’m pretty fluent. Trust me, if I can learn it, anyone can!

    Also: LOL at Vogue & Vintage’s BlackPlanet reference. That used to be my site!

    Reply
  9. Nicole

    I learned to used HTML codes when i was 15! And has been so helpful through all this years not only for blogging but also for different purposes. But is good to know a little bit more than basic stuff.

    Reply
  10. Plami

    That’s a funny coincidence! Just yesterday I decided I need to know the basics and bought HTML for dummies :)))

    XoXo
    Plami

    Reply
  11. Emily

    I’ve picked up bits of html over the last couple of years. Absolutely hated IT in school – never thought I’d be the geek teaching myself html!!! Haha!!

    Great advice 🙂

    Reply
  12. Jessica @ Beautify My Life

    I’m no coding expert by any means, but I’ve been amazed at how often knowing the very basics of HTML comes in handy. Great post, as usual!

    Reply
  13. Jamie

    Sorry to chime in a be a big nerd, but you shouldn’t use HTML tags to set font size and color if at all possible. That is better done by CSS. Obviously, if you are working within a strict blogging platform and aren’t very technical, your options are limited.

    You can use inline style like Loren suggested, which is a slight improvement, but still not the best way.

    Reply
  14. Jamie

    Figured I should elaborate a bit.

    Your best bet is to have your theme or template setup so that header tags (h1, h2, h3, etc) and tags like strong and em have nice style applied to them via CSS.

    That way you can just use those basic tags throughout your site and the style will be applied automatically and is easy to manage.

    Be is using font tags or inline style attributes, if you put colors and sizes inline with the content, changing them all is a real pain in the ass. Whereas with CSS, you just change a few lines, and voila, colors and sizes change for your whole site.

    This is a all coming from the nerd who builds websites all day every day 🙂

    Reply
  15. Parsimony's Closet

    Sooo true. I had to learn some basic HTML for my job and it has greatly benefited my blog.

    Reply
  16. LittleRus

    Brilliant post! I’ve leant some basics while trying to personalised blogger template ages ago, but of course, the learning process is endless. Thank you very much for the article and book recommendation.

    Reply
  17. Jacinta

    Knowing HTML is so vital as a blogger. I taught myself back in 2007 within a week or so. I had a myspace graphic/ layout web site. (lol) So I knew a whole lot of things. Sadly I stopped doing it and now I have to learn the more “advanced” stuff over. But it’s like riding a bike, once you know how to do it.. you won’t forget.

    Reply
  18. Paula

    great post! as a new blogger I’m trying to learn coding as much as possible because I realize it’s the heart of my business!

    I found this amazing course that you can check out (and that I will do myself) to teach you coding, html and everything you need to take your blog to the next level.

    see if you like it! here’s the link

    xoxo,

    Paula

    Reply
  19. Mousevox Vintage

    Great post! Waaaay back in the day, I used to keep a Livejournal and learned a lot about html through trial and error in posting on the site. Now, I can’t even be bothered to use Bloggers posting form if I don’t have html editing enabled. It’s so much quicker for me to just write my posts with my own code and I feel like I have so much more control and flexibility over the finished product.

    Reply
  20. yuvikathakur

    I’m also Html learner.so this post will help me in learning.
    thanks.

    Reply