Category Archives: Internet as Art

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>
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<title>The title of our tableau</title>
</head>
</html>

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,
Gabi

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.
    writing_inside_image
    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,

Gabi

HTML Tree and tags

Hey,

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.

leaf

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:

black-and-white-tree-with-roots-clipart-429-tree-branches-and-roots-design

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.

div-leaf

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,

Gabi

What is HTML

Hey,

Let’s take a piece of paper and put it in a frame. It should look like an empty, white tableau. Let’s imagine the piece of paper is infinite and we only see a part of it at a time. This infinite piece of paper is the HTML. It has no specific color, shape, size, nothing but it can have everything if we make it have.

Let’s paint the paper in 1 color. The whole infinity of it. Now the paper has one property called background-color. This property has the value equal to the name of the color.

What we just read it is almost correct. The property part is correct just that we need 1 more information. We need to let the browser,our frame, know what properties it should expect because as the time passes new ones keep getting invented. This is done with something called “doctype”. If this browser and frame parts look strange read the article about browsers first.

Every tableau has a name and a signature of the painter. Our HTML has it as well. We will see later how they look like. For now we should understand that they exist in the “head” of our document. It really is called “head” and it really has something inside it called “title” which is our actual title of the document.

We have learned about the infinite page, the HTML. This infinite document is nothing more than a file with text in it which does nothing. The browser, our frame of the tableau, is the one which reads it and makes something out of it based on the information provided by the doctype.

Here is an example of such a file with only the title:

<!DOCTYPE html>
<html>
<head>
<title>The title of our tableau</title>
</head>
</html>

If you want to make it work please comment bellow with what computer you have and I will do my best to help you.

Next time we will learn more about HTML.

Have a nice day,
Gabi

Web browsers

Web browsers

What is a web browser:

A web browser is similar to a painting’s frame. Very similar to that. Just like the frames, they do not do any magic for the painter or for the tableau. They just help the painter expose his art where he wants to.

The frames can have many shapes. Like in the following image. Sadly, in comparison to the following image, the shape of the frame is up to the user. The artist can only try to make his work target the desired audience and hope that everything will work out nice in the end.

IMG_20151017_155259.jpg

Some frames have a glass window in the middle as the top layer. That window may have imperfections or shades. If an artist knows about them in advance he/she can use them to improve the paining or to cover them.
In the following series of images there is a black string on the lady’s eye. Look how, by knowing where the string is, the artist can manipulate the image and either hide it or reveal it.

IMG_20151017_153959.jpg IMG_20151017_154010.jpg IMG_20151017_154015.jpg

The artist is the one who positions everything visually based on his/her liking.

Technical part:

The web browsers are the programs we use every day to view pages. You might have encountered at least one of them if you are reading this text. Here are some examples: Chrome, Google Chrome, Mozilla Firefox, Firefox, Internet Explorer, IE, Opera, Safari.

Anything that you are using in order to view pages is a web browser and, as we have learned above, it is just a program which you ask to get a page for you and paints it on your screen based on how they have been programmed to. You have no control on how they have been programmed. You can only learn about their specific things and design with their minor differences in mind.
We will talk a bit more about those differences in a later article when we will learn more.

For today, just understand that:

  1. A web browser is a “stupid” program that paints on your screen what another person designed based on how the browser is programmed to.
  2. We will learn later on how to figure out which is the target audience and there are tools which can help us figure what browsers they are using.
  3. The web browser is not the internet. We will learn next time what the internet is. Just imagine it like the paining the frame. The paining is the internet. The frame is the web browser. A frame can fit any paining and if the paining is too big we find ways to make it fit.

Have a good one,
Gabi