More Advanced Editing of Web Pages

Changing Colours

This is often the easiest way to make more impact on a web page. Use with caution – less is more and too much colour changing can be a distraction

To make any changes to your web page you must edit it – tell the website what you want it to look like.

This is achieved by using HTML codes. In the old days you had to code everything. Moodern websites have adapted the Microsoft windows commands so the ribbon of commands at the top of an editing page is familiar to us all and it it easy to highlight text and click B, I, to make bold or Italic as well as allowing you to centre things and add links quite easily.

If you want to be more adventurous then you will have to code it yourself – quite easy to do and I have included instructions in this worksheet.

Firstly get to know the editing page. You normally see the Visual editing page – WYSIWYG – ie. You can see what the page will look like when it goes live after you press update.

Now click on the Text tab and you then see all the coding which builds the page:

<b> bold

i> Italic

These codes come at the front of text instructing the website to make everything bold or italic after this code. You must remember to switch the code off if you don’t want the whole piece bold or italic. You turn off any code by using the forward has key and repeat the code ie. </b> unbold </i> un italic

If you want to colour text you will have to code it:

On the Visual Tab of the editing page you see what the page will look like

Clicking on the Text tab shows you all the coding to make the colour changes:

Text-align centre makes everything appear in the centre f=of the page

Style colour #990099 makes the text purple

<a href=”

Tells the website to look for the picture called Clean-for-the-Queen in the media file

Style=”color: #cc0033 makes the text red (note all HTML coding uses American spellings if you put colour it won’t know what you are instructing it to do)

You can see that the coding for this piece of text tells the website you want to use the font Calibri and use colour #000000 which is another acceptable code for red

This page is coded to make the color of the text #0078d7 which is bright blue

Changing Fonts

You can also code your web pages to use different fonts. <h2> is the code for headings. Play about and look at the difference coding <h2>, <h3> and <h4> will make to the text – this all depends on the settings made for headings in the properties page of the website

This section is coded to use ‘Comic Sans MS’ – take care when changing fonts, if the person reading the webpage doesn’t have the font you choose on their laptop or tablet then the page will default to a text they do have, so stick to the more popular fonts which every computer comes installed with

Colour Codes

These are the different codes for some popular colours. Sometimes the webpage will understand what you want if you just use the Color name, ie. Red. The Hex codes will give you a larger range of subtle colour differences – there are hundreds you could use

Font Codes

Below you can see the codes used to set a piece of text using a size – 16px/22px, Garamond, defaulting to Georgia if they don’t have Garamond and setting the color to Orange

Below there are examples of coding using specific font sizes and line spacings

If you want to look up HTML codes for yourself there are lots of examples on the internet. Below is a link which is clear and easy to refer to

Crib Sheet link

Images

You can add media to your page either as individual photos or set up a new gallery for yourself. Upload pictures from your computer into the media file on the website.

If you add a caption to a single image the picture forms a border around it and adds the caption to the bottom of the photo

When you edit the gallery you can see controls down the right hand side of the editing page:

Link the gallery to your Attachment Page. If its linked to the media file it floats around on the website.

Choose how many pictures you want across the page – if you have 10 photos 2 rows of 5 columns looks neat

I’ve found Masonry is the best display option. If you choose Owl Carousel it repeats photos to fill your empty columns. There are options in the display to set your photos to slide in as a slide show

If you set Image Size to thumbnail all the photos will be the same size. If you only have a couple of photos set them to medium or large. Whatever size you set here if you click on the photos on the website the photo will open to full size so that visitors to your website can see them clearly.

You can set where the captions appear and the size of the gutters between photos etc

Make It Simple

You can have fun making your page individual using some of the instructions in this worksheet but there is an easier way you could try too.

Wordpress editing is quite intuitive. If you build tables and coloured text in a word document then cut and paste it into the editing page it seems to automatically work out these codes for you most of the time