oblaat

a guide to conceiving, creating & publishing your own website

How are websites made?

If you've never looked under the hood, websites might just be a mystery to you. They're a mystery to most people. After all, the way people use their computers has become more and more abstract over time; in the present day, many people's main computer is a mobile phone!

The good news is that, with an Internet connection and a lap-top or desk-top computer (you can consult a library if you need something other than a phone), you can make your very own website, and it's easier than you would think.

You don't even have to know how to program. Unlike games, creating a webite requires no knowledge of how real code works at all.

Websites are made with two things that work together closely: Hypertext Markup Language (or HTML) and Cascading Style Sheets (or CSS). They are languages, but they are very easy to become conversational in.

If you are viewing this web page on a computer, I invite you to press Ctrl+U at the same time. This will show you the guts of the very webpage that you happen to be reading right now.

You will learn pretty quickly that it is mostly just the text that's already on your screen, in a less flattering form and wrapped in what are called HTML tags. These tags simply tell the computer what it should do with the text it's being fed.

How HTML works

It's easy, as a human, to express what you want to see. You can put it in plain English: I could say, I want this text to be a big, bold heading, and for this other text to link to another page. But how do you tell the computer this? Computers don't understand English.

Computers understand computer languages. The browser software, such as Chrome or Firefox or Safari, is responsible for interpreting whatever is given to it. HTML was developed as a very simple computer language intended for easily displaying, trading and sharing information.

For example, to create a paragraph, you take the first letter of the english word for paragraph and put it in between two < and > signs: <p>. To tell the computer that the paragraph is over, you use a "closing tag", the same tag with a forward slash: </p>

This will be explained in depth later, but the basic idea is that HTML is a language that both computers and humans can understand. HTML on its own looks very plain, though, so you might wonder: how do people make breathtaking websites?

How CSS works

CSS tells the web browser how HTML should look. The browser will involve some basic styling, but it isn't the most flattering; therefore, CSS is used. CSS is used by the website to tell the browser how it wants HTML to look.

A CSS file might, for example, tell the browser that the page should have a black background and grey text. The browser reads the CSS file and displays the HTML page according to the rules set.

A list of rules for how to display a page with no page to display in the first place is nothing but useless, therefore the two have to work together hand in hand.

CSS will be explained in depth later, too.