Building A Website

Many people choose to use WYSIWYG (What You See Is What You Get) website editing programmes to build their websites. However, I chose to do some coding with a free HTML editor. It turned out to be much harder than I had expected.

I am quite familiar with HTML (hypertext markup language), I learnt it when I was still 14 years old. This language allows users to manipulate (position, size, colour and font of) web elements. The reason I chose to build a website is to move all my blog posts on Blogger there.

Blogger does not give me the full power to customise the appearance of my blog. So, what to do? I have to move, but not so fast, I am far from done...

This editor is called the 'Taco HTML Editor'. Need to code from scratch.

Before I could concentrate on coding, I need to design a few simple graphics as menu buttons. Since I don't have advanced applications like Adobe Photoshop installed, I turned to a presentation programme, it's called Keynote (Keynote is very much like Microsoft PowerPoint, only that it is designed by Apple, for Apple customers).

These are icons. I designed them to be as simple as possible. I used basic shapes and combined them to form the desired icons, for instance, the 'Pics' icon below:

For this icon, I only used four rectangles and two triangles. The typography beside it features small-lettered words to give people a sense of informality.

Each menu button has three different images. I enabled rollover images so that they look more alive. When you move your cursor over them, they will change into their corresponding second image. After that, I saved each of these as .PNG images. Then, I uploaded them to my domain so that my HTML editor can fetch them as web images when I start coding.

Time to code. First, I included the address of each of these pictures in my code. This allows the browser you are using right now (Internet Explorer, Safari, Chrome, Firefox or Opera) to fetch these images and portray them they way I want. I placed all of these menu buttons at the top of the page for easier navigation for my readers later.

Next, I designed the background. The background isn't just an image. Since I want the background colour to match that of my icons, I need to find the perfect code for the colour I used. 

It isn't simple to find the correct colour. I need to do some Wikipedia readings to get the colour right. Before I go on, I feel the need to explain to you about these colour codes, or else, you will lose interest of reading the remaining post due to incomprehensibility. 

Each pixel (meaning the dots on your screen, if you take a closer look at your computer screen right now, you will see tiny dots) is made up of three colours (red, green and blue). The combination of these colours at different brightness gives you different colours. If you turn on each colour to their full brightness (#FFFFFF, each two letters determine the brightness of that particular colour in the arrangement I mentioned), you see white colour. If you turn off all of them (#000000), you get black colour and so on. 

I used half a day to find the correct colour. I added some attributes at the bottom of the page and that's where I am right now, I am still working to come up with the rest of the page. You can see a big pile of codes below only results in a small outcome in the real website.

That's all for now. I will continue to post about my progress in the future. Do come back!