Very Basic html

[Antonia_Alcock]

In my last post I mentioned that I had just started up an online business, well recently I decided that I wanted to launch a competition on Facebook to help promote the business. It seemed like a simple enough concept as I’m sure you’ve all seen competitions and give aways done on Facebook, unfortunately this is not the case. Facebook have a lot of policies and procedures regarding competitions and if you are not careful you can end up with your page banned. So I went away and did a little research and found a number of useful and useless articles. The one that helped me the most was this one:http://urbanemedia.co/2011/07/make-them-like-setting-up-a-giveaway-on-facebook.html

Although it tells you how to go about establishing a Facebook give away it doesn’t tell you how to write simple html code to create the actual competition page. Like Matt Oberdier, who wrote the article above, I used Static html to create the competition tab on my Facebook page. To get Static html just search for it in Facebook and it’ll come up. Once you’ve added the Static html app to your Facebook page you need to add some content and that can only be done in coding. I have never done anything in html so this was completely new for me. To get the basics I foundhttp://www.w3schools.com/html/ which is amazing, not only does it teach you the basics but it also allows you to test your coding to make sure that it works.

Here are some of the basics I’ve learnt, hopefully they might be useful for anyone else looking to start html coding:

Starting out

First use notepad, all computers have it and it is one of the easiest things to write code in. Once you have completed your code you can then copy and paste it to where it’s needed, or just save it for another day.

Once in notepad start your html code by typing this basically tells the web browser what type of document this is.

Then type underneath and then type underneath, this means that you are working in the main body of the document.

So you should have:

Creating headings

To write your heading, you need to tell it that it’s a heading by using

at the start, followed by you heading text and then finish with

The / lets it know that, that it’s reached the end of this particular command.

Mine would look like this

Alora made this give away

(mine doesn’t actually look like this though as I was a bit more complicated and added colours, font and size but I’ll explain how you can do that later).

If you have sub headings then use this same method and increase the number next to the h, i.e.

First heading

Second heading

Third heading

And so on.

will always be the biggest heading as it’s the first one but as the number increase, the size of the heading decreases, as they are below the heading above. If you don’t want your heading sizes to differ just use

. So my example above would look something like this:

First heading

Second heading

Third heading

Using the heading command will also make the font look bolder.

Writing paragraphs

Writing paragraphs is similar to writing headings, to start a paragraph you put

in front to tell it that it’s a paragraph.

My first paragraph looks like this:

To celebrate the upcoming first issue of our monthly newsletter, we thought we'd have a give away!

I wanted to make bits of my text bold, to do this you use for bold, for example:

1^st prize:

It’s very important that you don’t forget the at the end or everything following on will also be in bold.

I also wanted a specific font, to do this I looked in Word to see what font I wanted and then put that into the paragraph, like this:

To celebrate the upcoming first issue of our monthly newsletter, we thought we'd have a give away!

As you can see I chose the verdana font and then wrote the rest of my paragraph as normal

If you want to choose different size font you also add it in this way:

To celebrate the upcoming first issue of our monthly newsletter, we thought we'd have a give away!

Just use ; to separate the different style items. As you can see I chose size 12.

If you wanted to make it bold at this point it would be:

To celebrate the upcoming first issue of our monthly newsletter, we thought we'd have a give away!

Cheating

I mentioned earlier that I had to do something different to get the colours in my heading. To do this I did it in Publisher.

Open publisher as you would normal and select “blank website”, this may be different depending on which version you are using. Then design your page as you would normally, without images.

Once you are finished click “preview webpage” this should then show your design as it would appear online.

Next you need to view the html code, to do this using internet explorer click “view” and then “source”. If you are using google chrome you just right click on the webpage and it will give you the option to “view page source”. Both of these instructions will be slightly different depending on the versions you are using.

After you’ve opened the code you will have a new window with the html code for your design. You can then copy this and insert it into where you need it. You could do this for your entire page but I found that it’s easier to alter the page afterwards if you know how it was put together.

Finishing up

Finally once you’re finished adding your content you need to reverse what you did at the start:

My code

To give you an idea of what a completed code should look like please see mine below. I've altered my heading so that it doesn't have the complicated coding that I copied from Publisher but instead what I would have wrote. I also removed the sign up link as I didn't write the coding for that.

Alora made this give away

To celebrate the upcoming first issue of our monthly newsletter, we thought we'd have a give away!

We are giving away three seperate prizes so there are three chances to win!

1st prize:

A bracelet created especially for you, winner chooses size and colours

2nd prize:

A monster mobile phone case, winner chooses colour

3rd prize:

A greeting card from our new line of Gorjuss inspired cards

All you have to do to enter is click on the link below and fill in your details but be quick entry closes at 9pm on the 15th July.

T&Cs

Only one entry per person. Completion of the sign up form will add you to our newsletter mailing list, however, you can opt out via the newsletter.

Competition starts on Monday 8th July 2013 and will run until Monday 15th July 2013, entry will close at 9pm on the 15th July 2013. This competition can also be entered via our website aloramadethis.co.uk

Winners will be selected at random from entrants. Winners will be contacted via email from the details provided in the sign up form. Winners will be informed which of

the three prizes they have won and asked to confirm receipt of email and provide details of colour and size wanted, if applicable. If winners do not reply within 48 hours a new winner will be selected.

If you would like to see the competition page, and enter, just search for Alora Made This on Facebook or you can enter via my website: www.aloramadethis.co.uk

I hope this has been helpful but please bear in mind this is just what I have learnt and it is incredibly basic.

[Anita_Genovesi]

This is brilliant! Thanks, will come in very handy.

[Pamela_ten_Broek]

Hi Antonia, glad you got the hang of html - it's not difficult, just logical. When I studied computing we had to learn it and create our own website with numbered lists, interlinking pages, links, etc. There was no java script back then! But I do remember that you can search for special effects to put on your page - raindrops or snow falling etc, and there are heaps of links to free code in addition to the assistance you are talking about. I found one just now: http://www.htmlfreecodes.com/

Another 'trick' I learnt was that if I saw something on a web page that I liked, I would check out the 'view page source' (right click on the page and it should be an option) to see how it was done - not sure how well that works these days with more complex coding.

Good luck with your competition :)