Cyderize.org

Cyderize.org is my personal website, started in 2011 which I use to write about computers, the Internet, electronics, music, and whatever else I feel like. I'm a computer nerd and musician, residing in Melbourne, Australia.

Read the About page to find out more.

Web Development Tutorial Part 1 – HTML, CSS and JavaScript

Posted September 14th, 2014 by

So beginning (hopefully) a series of tutorials on web development, we look at an overview of how websites are constructed and what interaction occurs between a web browser and a web server.

Basically, the world wide web is based on a client-server architecture, where the client (the web browser) requests data from a server (the website) which, in turn, sends a response containing the data.

Diagram showing client-server architecture

Of course, this is a greatly simplified explanation of what’s going on (it’s not really as direct as it appears here), but such an understanding will suffice for developing most websites.

We will start by examining client-side web development. That is, web development designed for the browser.

The client

The web browser is what’s able to interpret HTML, CSS and JavaScript. This makes them client-side languages, being used by the browser to construct what you see on the page. This is distinguished from server-side languages, such as PHP, ASP, JSP, etc, which are executed on the server before it sends out the page to the client. Note that the server only ever send out HTML, CSS and JavaScript to the client (and of course resources such as images, etc). The PHP, ASP, etc never reaches the client.

What this means, is that you effectively have control over server-side scripts – you know for sure (mostly) that your server has executed your server-side script, but you don’t have control over client-side matters – the browser receives your data, but then it goes off and does whatever it feels like with it. So don’t go off sending sensitive information to a web browser, since even if you write it so that it’s hidden to a normal user, a more technically-inclined user will be able to see everything you send to them.

So with that explanation, we can finally discuss the three languages mentioned in the title of this article. I’ll provide a description of what each language is used for, and go into details about how to actually use them later.

HTML

HTML, an abbreviation for Hypertext Markup Language, is what we use to describe the semantics of a webpage – that is, its structure, and what its content means. It tells the browser what to display, without telling the browser how to display it. Understanding this separation of structure from presentation is important, because while it’s possible to write HTML that describes how to display something (for example, <b> tags telling the browser to make text bold), such practices are discouraged in modern HTML as they make code harder to maintain and manage, as well as decrease accessibility to users.

HTML looks like this:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML document</title>
    </head>
    <body>
        <p>This is an HTML document</p>
    </body>
</html>

CSS

While HTML is used to convey the content in a webpage, CSS, an abbreviation for Cascading Style Sheets, is what we use to describe the presentation of a webpage. It tells the browser how it should display the HTML content. As the name suggests, we’re able to cascade these style sheets, giving us the power to style things with increasing specificity – that is, we can apply general styles to a webpage, for example saying ‘make all paragraphs red’, and then apply more specific styles over them, for example ‘make all paragraphs in this section blue’, giving a cascaded result of ‘all paragraphs are red, except those in this section which are blue’.

CSS looks like this:


body {
    font-family:sans-serif;
    font-size:10pt;
}
.main {
    width:250px;
    height:500px;
}

JavaScript

While HTML and CSS can then be used together to create a fluid webpage that conveys its meaning to its users and looks how you want it, JavaScript can be used to create so-called ‘responsive’ webpages. You can use JavaScript to execute code on the web browser and manipulate your HTML and/or CSS on the fly. For example, you can use JavaScript to dynamically load preview search results while the user is typing. You can also use JavaScript to implement web-based games, special webpage effects, and other cool things. In fact, this very webpage uses some JavaScript from highlightjs to syntax-highlight the code examples.

JavaScript looks like this:


function doSomething() {
    alert("Something was done!");
}
window.onLoad = doSomething;

We’ll begin actually using HTML in Part 2 of this tutorial.

Comments: none yet | Filed under: tutorials | Tagged: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *