CODING TIPS FOR BEGINNERS – PART 1 – HTML

Coding Tips Part 1 - HTML

Hello Lovelies! Today’s post is a little different from the other posts on my blog and is the beginning of what I hope to be a mini coding tips series.  If you find this post helpful and would like to see more like it please leave a comment below and let me know if you want to see more as I have many more things I would like to share with you.

Today’s post is all about HTML which is hypertext markup language.  This is a computer language which is used to create pages on the internet aka a website and is made up of a number of tags which are instructions that tell your browser (e.g Internet Explorer, Firefox or Chrome) what to show on a web page.  I’m by no means and expert but I’ve dipped into the world of HTML, CSS, XHTML and other coding languages since around the age of 13 so even though I don’t necessarily use it on a regular basis I do have some experience behind me which has allowed me to easily pick up the basics and apply them to my blog.  Below are some of the basic tags you can use to create and enhance your pages:

How Do I Set Up a Page


Each page on a website is made up of four main tags that have opening and closing brackets, however, many more are used in between the structure. The tags you need to start with are:

Add the title of your page here Everything that appears on your page will be in here, pictures, text etc.


How To Add a Photo

In Blogger you can add your photo’s using the ‘Insert Image’ tool but in the last few weeks I have been adding mine via HTML instead.  This allows me to host the pictures elsewhere (Photobucket) which I prefer because I have had problem with Blogger in the past.  You can also add a border to the image, title and size.


ADD IMAGE DESCRIPTION


How to Add a Link to a Photo

If you want to add a link to your photo you just combine the two tags like below:

ADD IMAGE DESCRIPTION HERE


How To Add a Text Link

In blogger we are lucky to have the ‘Link’ tool but if you want to ever add links using the HTML you can use the below code. You can also add font formatting to this and an alt tag. The only text you will see is whatever you place in the ‘ADD TEXT FOR LINK HERE’ section.

ADD TEXT FOR LINK HERE


How to Change the Colour and Format of Font

You can change the type of font, colour, definition and size easily using the below tags.  If you want to make your text bold, italic or underline put these tags around your main font tag.  You can replace the font face, colour and size as you wish too.

Font Colour: YOUR TEXT GOES HERE Font Style and size: YOUR PARAGRAPH GOES HERE Bold: ADD TEXT Italic: ADD TEXT Underline: ADD TEXT>


How to Add Headings

If you want to define certain headings on your page you can define them using the below tags.  The lower the number the bigger the heading and the higher the header is deemed to be as it has a hierarchical structure.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6


How to Add a Background

If you want to add a background colour or image to your page you can use the below code.  This is great to do because it adds personality to your blog and can all help to bring together a theme.  If you want to find out the specific names of colours or hex numbers Google it and loads will pop up.

Image: Colour:

Did you find this post useful? Would you like to see another post like this with more tips?

 Enter my MAC Giveaway


Check out these great blogs by my lovely advertisers:

Pink Champagne: Hoad Shoes – An Independent Little Shoe Shop

Pink Swirl: Beky Lou, Dulcie’s Beauty Blog, Bethany Worrall

Pink Pearl: MissLJBeauty, Dee’s Beautiful Life, Satchels and Pearls


To advertise with Kimberley’s Beauty Blog find out more info here

Share:

16 Comments

  1. Emma Matthews
    March 5, 2014 / 7:50 am

    Such helpful tips! Thank you so much!

    Emma x
    http://www.beautyandrags.co.uk

  2. Photo-Jenn-ic
    March 5, 2014 / 9:02 am

    Thank you for this. It's really a helpful post and you explained it really simply too.

    Jenn | PhotoJennic

    x

  3. Vicki Keeling
    March 5, 2014 / 1:54 pm

    Great post, thanks for the tips 🙂

    What A Little Pickle

  4. Kimberley Johnson
    March 6, 2014 / 8:17 am

    Thank you! X

  5. Kimberley Johnson
    March 6, 2014 / 8:18 am

    That's ok, I'm glad you found them helpful! X

  6. Kimberley Johnson
    March 6, 2014 / 8:18 am

    Thank you! ? X

  7. Kirsty Haynes
    March 6, 2014 / 9:01 am

    This comment has been removed by the author.

  8. Kirsty Haynes
    March 6, 2014 / 9:02 am

    Thank you for the tips! So helpful! Did you design your own blog using html?

    http://blessedbymeow.blogspot.co.uk/

  9. Lucy May
    March 6, 2014 / 6:10 pm

    great tips x

    Make Up Your Mind

  10. beautyqueenuk
    March 6, 2014 / 8:50 pm

    Oooh fab tips xx
    Www.beautyqueenuk.co.uk

  11. Holly Keyes
    March 16, 2014 / 11:23 am

    Thanks for this! I'm trying out my signature again…xx

    Holly | Impatience is a Virtue

  12. Nayna Kanabar
    April 9, 2014 / 4:16 pm

    This is a wonderful post and brilliant for people like me who haven't a clue about html.

  13. Kiki Cheng
    June 14, 2014 / 1:39 pm

    Wonderful tips, Kim!

  14. Rebecca Barnes
    July 3, 2014 / 6:54 pm

    I have found this really useful, thank you so much!
    Rebecca x
    http://missbeccabeauty.blogspot.co.uk/

  15. 陈晓
    October 27, 2015 / 6:43 am

    crx123
    mcm handbags,mcm bags m a c cosmetics,mac cosmetics controle adidas,adidas sneakers louboutin,louboutins kate spade outlet,kate spade uit nike free run,free run mont blanc pens,mont blanc pens ray-ban sunglasses,ray ban wayfarer te coach outlet online,coach black friday beats headphones,beats by dre hogan,hogan kunnen lululemon,lululemon australia new balance,new balance beats by dre,beats audio oefenen. oakley sunglasses outlet,cheap oakley sunglasses bcbg max,bcbg max azria nike roshe,nike roshe In ugg,ugg australia red bottoms,christian louboutin shoes michael kors handbags clearance,michael kors outlet online sale die north face,northface louis vuitton outlet online,louis vuitton handbags pandora jewellery,pandora jewellery zoektocht ralph lauren online shop,polo ralph lauren true religion jeans,cheap true religion long champ,longchamp outlet kom prada handbags,prada handbags burberry handbags,burberry outlet ferragamo,ferragamo je nike air,air max 90 kate spade,kate spade outlet louis vuitton outlet stores,louis vuitton bags op gucci outlet,gucci mens shoes ugg boots clearance,ugg australia cheap michael kors,michael kors outlet internet michael kors outlet,michael kors outlet online sale air max,nike air max wedding dresses uk,wedding dresses uk terecht new balance shoes,new balance store replica handbags,replica handbags pandora,pandora in roshe run,roshe run

  16. Xiaozhengm 520
    December 28, 2015 / 2:13 am

    2015-12-28 xiaozhengm
    nike uk
    nike free run
    coach outlet
    louis vuitton handbags
    north face outlet
    air force 1
    michael kors outlet
    nike huarache trainers
    caoch outlet
    sac longchamp pas cher
    michael kors outlet
    louis vuitton
    christian louboutin
    cheap jordans
    michael kors outlet
    ray ban sunglasses
    nike outlet store
    michael kors outlet
    nike blazer
    michael kors outlet online
    adidas superstars
    nike sb
    michael kors
    coach factory outlet
    tiffany jewelry
    louis vuitton pas cher
    michael kors outlet online
    louis vuitton outlet
    cheap toms
    toms outlet
    michael kors outlet online
    chaussure louboutin
    jordan 4 toro
    true religion jeans
    ralph lauren uk
    kate spade
    jordan shoes
    true religion jeans
    coach factory outlet

Leave a Reply