HTML, CSS and JavaScript
Programming · Apr 25th, 2021
Okay, so we got a webserver, now what? You could be a professional and reasonable person and use a website-builder, if your host provides one, or install WphpordPress or whatever. But I wanted to make things myself, so I got cPanel, a Linux based platform for web hosting. And this is where the fun starts:
Did you know that your browser can display a lot of different files? Like PNG, JPEG, MP3, WAV, TXT and so much more. If you are on a desktop PC you can test that right now, make a TXT file, put in some words (e.g. “Hello World”), save and then just drag and drop it into your browser of choice. Voilà, your browser displays your txt-file. This works with the files I just mentioned. What you can also do is copy a path from your file explorer, paste it into the URL bar of your browser, and you will be able to navigate your files, but in a browser. And once you realize that, it’s easy to grasp how a webserver works. The webserver also contains a filesystem, like your file explorer, and you can simply upload files there. And once they are on there, you can view them by just entering your domain plus the correct path to that specific file.
So that’s pretty neat, but TXT and PNG files are rather dull. What we want are layouts, colors, animations, extravaganza, and a simple TXT file just doesn’t cut it. This is where HTML comes in. HTML stands for Hypertext Markup Language, and as its name suggest, it’s a language to describe markup, or in proper English: how your website looks.
HTML uses tags, which do very different things. For instance:
<html> contains the entire website
<head> contains diverse data, like the title of the tab, or the little icon displayed next to it. Here comes usually important stuff to make the website work, but won’t be displayed </head>
<body> contains all visual stuff
<h1> is a header </h1>
<p> is a paragraph </p>
<a href="https://youtu.be/dQw4w9WgXcQ"> is a hyperlink </a>
<div> is a container, in which you can insert other tags </div>
<ul> is a list, which contains <li> individual items </li></ul>
<table> is a table (duh)
<tr> defines a row in a table, and
<td> defines a single cell in a row </td>
</tr>
</table>
<img href="this is an image, and">
<button> is simply a button </button>
</body>
</html>
There are more tags than this, but these are the most essential ones. The whole layout of your website is pretty much just a creative combination of these tags. Since you already know that a webserver works like a filesystem, even if you don’t have a host, you can make an HTML file right now, throw in some HTML tags and display it in your browser.
Take for example the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>my first html</title>
</head>
<body>
<h1>Hello World</h1>
<p>this is some text</p>
</body>
</html>
If you just tested it out for yourself, you may notice that everything is just black text on white background. BOOOORING. What we want is style, literally. Pretty much every tag inside and including <body>, can be equipped with a style-parameter. In this parameter, you can define a multitude of things, like color, size, border, whether it’s left, center or right aligned, and so much more. If you want to do something on the display side, you can literally google "css <anything you want to display>" and you will find solutions, exactly what you need. For example "css background color", "css font", "css align center". It’s so easy to gather information, that it’s almost plug and play, without much thinking required.
But hold on a second. Do I really need to implement style for every single tag? My website contains a homepage, and blog page, and an about page, and privacy policy, and newsletter and so on and on and on. Implementing style for every single page sucks. Well, what we need, is CSS.
CSS, or Cascading Style Sheets, allow you to put all your styles into one single file. With so called selectors, you can apply styles to tags.
p{
color: red;
}
This selector for example, makes the text of all paragraphs red. HTML-Tags can be assigned classes and ids, so that CSS-Selectors can be more specific.
p.myClass{
color: blue;
}
This selector only applies to paragraph tags, which have the class "myClass".
Using the two CSS selectors above and the HTML below, we get something like this:
<p>this is some text</p>
<p class="myClass">this is some blue text</p>
The last of the unholy trio is JavaScript, which essentially allows you to run code. With JavaScript, you can dynamically change the styling of your tags, calculate stuff and talk to other servers.
click count: 0
<p>
<button onclick="myFunction()">click me</button>
click count: <span id="counter">0</span>
</p>
<script>
var clickCount = 0;
function myFunction(){
clickCount++;
var counterElement = document.getElementById("counter");
counterElement.innerHTML = clickCount;
}
</script>
In this example, when you click the button, it increases the clickCount by one, then it finds the element with the id counter and finally replaces the HTML inside this element by the new value of clickCount.
But while this works great, I myself found limited use for JavaScript. In my case it powers just 4 things:
- The banner animation on top
- The “back to top” button in the lower right corner of each page
- The dropdown menu, which you will find on my Blog and Project site and
- A performance improvement, loading images late (more on that in the last chapter)
Okay, so now that we have a solid grasp of the building-blocks which creates the stuff you see in your browser. Let’s talk about how I used them to build my website.
|
| ◀ | Previous Post: Hosting a Webserver and Money |
| ▶ | More Programming related Posts |
