Tag Archives: html

JavaScript functions

Hello and welcome back,

Sadly today’s article will have to be a bit more technical because it is one of the key things of JavaScript. If you understand this you can literally read any JS book and start looking for a job.

One of the particularities of JS is the fact that it relies on functions. In the lesson How does JavaScript functions we have learned that the JS code is read once, from top to bottom and everything that it is read it is executed. Now… this is great and not so great in the same time.

Why not so great?

When we paint together, among the things that we should do is sell the painting. What if after I hand you the colours I go and sell the painting? That would be stupid, that would totally ruin our team work.

This is why we should not rely our JS code to do everything when it is read.

Why is great?

Let’s consider that we work on the painting, I give you the colours and then I wait long enough for you to finish. Then we sell it. This is great, this is how it should be done… but… it has happened like this by luck. If I would have waited less it would have been too soon. If I would have waited longer we would have been stuck. So, this is great but not so great.

How can we stop this from happening?


Instead of placing all the code in the file and make it look like this:
draw the horizon line
draw a tree
paint the sky with blue
paint the bark with brow
sell the painting

Let’s make it somewhat like this:

function draw_sky(){
if the horizon line does not exist draw it;
paint the sky in blue;

function draw_tree(){
draw a tree;
paint the bark with brow;

function sell_painting(){


This will split our code into functions and although the functions are read by the browser when they are received they are not run until we call them. What’s even better is the fact that we can dictate the order very easily.


function draw_sky();
function draw_tree();
function sell_painting();


function draw_tree();
function draw_sky();
function sell_painting();

it is just a line changed. What’s even better is that now we can draw 2 trees without copying everything again! Just imagine how easy it is to just call functions to do the work wherever you need them to.

function draw_tree();
function draw_tree();
function draw_sky();
function sell_painting();

But where do we actually call them?

Now that’s a great question! There are multiple answers to this question:

  1. In HTML when an action is performed, like this:
    <div class=”red leaf” id=”second_leaf” onclick=”draw_tree()”>second leaf</div>
    The onclick is called an event. More events can be found here.
  2. When the page is loaded. This is more difficult to understand but easier to use. What we need is something that embraces our code and knows what to call for when the user performs events on the HTML tags used. We will call this thing “jQuery”.

Practical example:

  1. In the JS file write only the following code
    function draw_tree(){
    alert(“I don’t know how to draw a tree but I have this nice message”);
  2. In the HTML file replace <div class=”red leaf” id=”second_leaf”>second leaf</div> with <div class=”red leaf” id=”second_leaf” onclick=”draw_tree()”>second leaf</div>
  3. Save both files, refresh and click on the red leaf.

Tomorrow we will learn the difference between a function and a property.


How to point JavaScript to elements

Hello and welcome back,

This we also know, through CSS selectors. They are the ones we have learned about in “Adding colour” . What we need to do is write document.querySelector(“#first_leaf”) . This points to the first leaf. Sadly, this bit of JS code will not do much except allowing us to access the first_lead element.

If we want to select all the elements that fall under a certain selector there is document.querySelectorAll(“”).

Tomorrow we will learn about functions because we will need them in order to play with our elements.


How does JavaScript function

Hello and welcome back,

Let’s go back to our paintings. We, together, must make a work of art because that’s how the browser and the developer are working together. The browser is very good at drawing and the developer is the one providing the instructions. See, teamwork! You are the browser, I am the developer.

So, we should paint on wood. But I am not that good, I am learning. You, the artist are good but you cannot pick your own colours.

  1. I accept all the colours that I find because I don’t know anything about them.
  2. I must read all the paint labels and pick the one that is fit for wood.
  3. Mix the paint with oil as stated on the label.
  4. Now that I have sorted the colours for wood I must look at the labels and pick the desired colour.

That’s about how the browser and JavaScript works.

  1. First the browser accepts the file because it trust us.
  2. Reads the file. This step also ensures that our file is correct and can be run (note#1)
  3. Executes all the code that does not belong to a specific function (note#2)
  4. Creates a list of actions that must be executed in order for every element that it is targeted.

Tomorrow we will learn about pointing JavaScript to our HTML elements.


Adding colour

Hello and welcome back,

In our previous article we have discussed about how to create our HTML and CSS documents and how to make sure they are working.

In this post we found out about classes and ids. Let’s put them to work!

In the HTML our example we have this line saying “<div class=”green leaf” id=”first_leaf”>first leaf</div>”.

We know that a tag can have as many classes as we want it to have and that those classes are put into different stacks. In order to add classes to a tag we need to write the word “class” after the tag’s name. Right after we add the “=” and between double commas we can add all the class names we want. There are no standard names and it does not matter how they are being called. We name them as we want. They are all split by space. So, in our example, our div tag has 2 classes “green” and “leaf”.

We also know that an element can have only 1 id and it needs to be unique. Like the class, we have to write “id=” and then between double commas the name of the id. Same as with the classes, it does not matter the name.

This is also a good time to learn that the word “class” and “id” are named “attributes”. There are way more but those are the ones we know.

Let’s open our HTML editor and our CSS file.

Here, in order to point to a class we use the “.” sign and in order to refer to an id we use “#”.

Let’s make all our green elements truly green.

  1. Put the following text into the css file
    .green { background-color: green; }
  2. Save the file
  3. Open the HTML file in your browser or refresh the page you already had opened
  4. Be amazed!

All our div elements that had the class “green” actually became green.

The “background-color” it is called a property. and the “green” after the “:” sign is called the value of the property.

Let’s do something with the id as well.

  1. Put the following text in the css file
  2. Save the file
  3. Refresh the web page

Notice that the text has turned white. This is quite nice!

You can list multiple CSS properties one after each other and delimit them apart by “;”. For instance, let’s put a black border around all the tags with the green class.

  1. Add border: 1px solid black; inside the “{” “}” of the tags from the green class.
    Now it should look like
    .green {
    background-color: green;
    border: 1px solid black;
  2. Save and refresh

Note how we can split the CSS properties on multiple lines and how we can add as many as we want. On border we did cheat a bit, we have added 3 values to the border property in the same time. This was done just to see that it is possible.

For WAY more information about CSS properties please use http://www.w3schools.com/css/css_intro.asp and make sure you do not click on any of the commercials they have.

Play with it, break things and try to fix them back. Learning is all about experimenting.

You can learn more about HTML tags here http://www.w3schools.com/html/ . Again, make sure you don’t click on the commercials, you do not need any certification, quiz, class etc. Just select from the left menu the tags and read about them.

Next time we learn a bit about animations.

Take care,

Drawing for the first time

Yo reader, how are you today?

Two lessons ago we have discussed how we can include our CSS file in the HTML tree. Last lesson we have discussed how the browser knows which colours and distances to apply to which element. Also we found out how to ease his job by knowing when to use a class and when to use and id.

Today we will re-use the example from HTML Tree and tags . We will create a few leaves for our HTML tree and colour them a bit.

<!DOCTYPE html>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<title>The title of our tableau</title>
<div class=”green leaf” id=”first_leaf”>first leaf</div>
<div class=”red leaf” id=”second_leaf”>second leaf</div>
<div class=”green flower”>very very small flower</div>

Before actually writing some CSS I will take some time and explain all those “div” branches of our tree.
Let’s do this exercise:

  1. Take a piece of paper.
  2. Cut it in 3. Do it!.
  3. Take a second piece of paper.
  4. Put the 3 parts on top of it.

The “div”-s for HTML are exactly as the papers are for you. They are transparent, one with the background but they exist there to hold information for you.

Let’s do the following exercise:

  1. Take the first small piece of paper and write class=”green leaf” id=”first_leaf” on it
  2. Take the second small piece of paper and write class=”red leaf” id=”second_leaf” on it
  3. Take the third small piece of paper and write class=”green flower” on it
  4. Flip the first piece of paper and write on it first leaf
  5. Flip the second piece of paper and write on it second leaf
  6. Flip the third piece of paper and write on it very very small flower
  7. Put them back on the big piece of paper with the text upwards. Not the “class” and “id” non-sense, but with the nice human readable text.

Great job! This is what your browser sees.

Now we are ready to write our CSS file. Let’s play again:

  1. Open your program with which you write text. If you are unsure what I mean please go to http://www.sublimetext.com , download, install and start this program. From now on this is our HTML editor.
  2. Write into the HTML editor all HTML code from above.
  3. Save the file into a directory/folder that you want and name the file “html_file.html”
  4. Get back to sublime and go to File, New file
  5. Save this new empty file into the same directory/folder as the “html_file.html” file and name it “mystyle.css”

That was all! Now you have your very own website. Yes, it takes some more work to make it visible to other people but you can see it locally by:

  1. Go to the directory/folder you have used previously to save the html and css file
  2. Double click on “html_file” or drag it on top of your browser

That’s all, if all went fine you should be able to see the text of your leaves in there. They should have the same text as your small pieces of paper. You see the resemblance now. The browser does no magic tricks. He just reads everything and splits the information is 2 piles. Information for him and information for you. Same as you pieces of paper. Information for the viewer, the nice text, and information for the programmer, the classes and ids from the back of the pieces of paper.

Next time we will write some CSS code to make things pretty.

Take care,



Sprinkle magic dust over HTML with CSS

Hey hey hey!

This time we learn what to write into the CSS file to make it work. Uhh yea!

Before going a bit more into details let’s try to imagine how the linking between the 2 documents can function.

Let’s use http://corioblog.com/Mondrian.jpg as an example.

Selecting an element:

  1. Let’s look at the square with thick black border positioned from the top underneath first row of white rectangles, the big red one. This was a bit slow and we are happy for the red colour, otherwise it would have been even slower. This is one way of writing a CSS selector, based on the elements that hold it.
  2. Another way is if we put a number in each square, from the upper left corner to the upper right corner. Now we can say that we talk about the square number 5. This was way faster. This called an “id”. Each “id” must be unique, else we ruin all the speed and idea. An HTML tag can have 1 id.
  3. Let’s try to locate the element which has “square black”. It went quite as fast as the “id”, maybe a bit slower, but still way faster then the first solution. This is called a class. An html tag can have any number of classes. The more they are the slower it becomes to knowing which one we select.

Adding a style to an element:

We have seen how selecting elements work, which is the fastest and which is the slowest. Let’s imagine how paining would work if we imagine ourselves as browsers. We will ignore the first try of selection because it is plain stupid to work like that.

  1. Apply a border to the tags with id 1,2,3,4,5,6,7,8,9…19,20. This looks quite slow because you always have to go back and see if the tag with a specific “id” needs to have the border painted or not.
  2. Apply the border to all the tags with class “black”. Hm…. this looks super fast if you already have all the tags split in piles. All the ones with “black” in the “black” pile. All the “squares” in their own pile and all the “rectangles” in the “rectangles” one.

This is how the browser finds tags and paints tags. We can easily see why the “id” is faster to find and why the “class” is faster to paint.

Next time we will add some colour to our small piece of HTML from the previous lessons.

Have a good one,

How to link CSS to our HTML?

Welcome back to a new discussion,

In the previous lesson we have learned that the CSS is a file which holds all the information required by the browser to colour our HTML beautifully.

Let’s go back to our tree. We have learned in the article about the HTML tree and HTML tags that the “head” html tag can hold some information that will help us to describe a part of the identity of our tree. Now we will find out that inside the head element we can call for our CSS with:

<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>

The link element is more special. It does not have a closing “</link>” because it cannot hold any “leaf”. It just tells the browser that in this HTML document there is a link to a CSS file which should be fetched as well.

Let’s use the same example from what is HTML and include our own CSS file.

<!DOCTYPE html>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<title>The title of our tableau</title>

Next time we will find out how the browser makes the connection between what’s in the CSS and what’s in the HTML file.

Have a good one,

What it is CSS?

Hello reader,

CSS is a file with text in it. This text will help us give shape and colour to the HTML tags.

Remember how in the article about what is HTML we have said that:

This infinite piece of paper is the HTML. It has no specific colour, shape, size, nothing but it can have everything if we make it have.

  1. Let’s imagine that you need to document your painting so that it can be reproduced by anyone who has no skill. In the end we do know that our browsers have no understanding or knowledge of anything.
    Look at that. It is quite ugly and hard to understand because of all the text. Mona Lisa would look quite terrible.
  2. When you are trying to copy a drawing imagine how long it would take if I read all that information for you. Try to read the following lines 1 by 1 and imagine the shape. I bet it will take over 1 second:border width: 10 points
    border colour: black
    width: 135 points
    height: 70 points
    left corner: 59×77 points
    right corner: 209×159 points
    transparent filling. Now you know everything there is to know for the first shape and you can draw it! Took us a while but it was not impossible, just slower.
  3. The order of the information matters. If in the previous example I had given you the left corner on the 3rd position, you could have put the pencil in that point and wait for more information. You knew already that the border is black and that it is 10 points thick. You could have had the 10 points black pencil in your hand waiting for the starting point.

To conclude our lesson:

1) What is CSS?
It is a document where we store all the information related to the layout of our HTML tags.

2) Why is it better to put this information in a separate file?
The browser will receive this file in the same time as our HTML file. This makes everything faster and will be able to arrange the information in the desired order because it knows that inside the CSS file there will be only information related to styles.

Next time we will learn how we can tell the html page to take the css with it when it leaves towards the user’s browser.

Have a good evening,


HTML Tree and tags


this HTML thingie can easily be viewed as a tree because that’s what it is. It has a root, a trunk and many many branches. As many as we want, with many many leaves, as many as we want. Some branches are better at different things such as providing shade, collecting sun rays allowing us to build a swing chair or a tree house.

Let’s think about it a bit. When the tree is really really small, it has only 1 branch and 1 leaf. When it grows a bit it becomes thicker and it gets to have a second branch. Right now we can call the first one a trunk.

The leaf is what we see on the screen. The branch is what is behind the leaf, in the back, which is not visible. Pretty much like in this image.


The branches start from a bigger branch and end with a leaf. In HTML the tags start with <, then comes the name of the tag and then comes >. Inside the tag we have our leaves or other branches. We can have anything we want here. Then we must specify when the tag finishes. To finish it we have </, then comes the tag name, then comes >.

The biggest problem in translating a tree on a piece of paper is the lack of depth. So we need to read everything from bottom left to top right and from bottom to the top.

Let’s see again the slightly modified example from the previous lesson:


First we have the “html” tags that define where the page’s code starts and finishes. We need this because what is outside of it is not taken into consideration.

Think of the doctype as the root of the tree. It is what it makes it alive and defines it as it is. If the root says it is HTML, that’s what the browser will draw. You can read more about what the root’s options here .

Then comes the “head” element which can be seen as what’s beneath the earth but on top of the root. It can tell the tree about some characteristics but it is not the root which defines the tree.

Right after “head” comes “body”. Body is the trunk. Inside the body we find everything else.


Inside the body, as we look from left to right, we have a branch. Our branch holds a leaf. We only see the leaf but we should have something to link it from the trunk. This linkage in our case is the “div” tag.

Inside the “div” tag we have our very own text. This text is the only thing visible to the user.

As an exercise try to look at a tree outside. Comment how you would imagine the HTML structure and I will help you out getting it properly.

Have a good evening,