As an example, let’s start with a map of the locations of some data journalism newsrooms in the German speaking area. As always you can find all the code of this tutorial on our GitHub page.
This is what the finished map will look like: Read More
CSS is short for Cascading Style Sheets. It’s a neat way to tell your browser how it should make your webpage look. You can style your HTML code in different ways.
For small adjustments, it might be enough to use inline style. With this method, you specify the style adjustments for specific elements right in the elements tag. For example, we talked about the
<span> element in part one. This is how you would use
<span> and some inline style to colour part of your sentence:
<p>My favourite color is <span style="color:red">red</span> like my hair.</p>
Here, you can use the command style like an attribute. You can specify multiple things in one inline style attribute, like specifying
style="color:red;text-align:right" to change text alignment and color in one go, but make sure to put quotes around the entire thing or it won’t work.
Of course, there are a lot more possible settings than just the text color:
You’ve just learned what
color does. You can choose from the default color names or specify by hexadecimal code or rgb color code.
background-color sets the background color of the current element. That could be some text or an entire paragraph, a section defined by a div or even the whole body of the document.
font-family specifies the font for an element.
font-size specifies the size of the current text element.
text-align lets you choose to align the text left, right, centered or justified. initial chooses the default value and inherit aligns the text according to the alignment of its parent element.
There’s more, but let’s just work with that for now. Try using inline style to change the above properties in you HTML document that you’ve created in part one of this tutorial.
If you want to define a lot of properties or edit a lot of elements, inline style might be a little inconvenient. Thankfully, there is a different way: You could use the style tag. Anything you type between
<style></style> in your document will be interpreted as CSS commands. You’ll usually do that in the head, since it counts as meta information. But if you write some CSS code in the head of your document, how is your browser supposed to know which element you’re referring to?
That’s why there are things called ids and classes. For every HTML element in your document, you can define one (or even multiple) classes and a unique ID. It will look like this.
<div class="red pushright"id="a1">
this one doesn't have any class
We just gave the first div the classes red and pushright as well as the ID a1. The second one only has the class red, and the third one doesn’t have any class or ID at all. Classes are usually used for a larger amount of element that should have the same CSS properties. IDs are usually unique and are a useful way to single out one specific element you want to manipulate.
Let’s use CSS in our
<style> tags to turn the text color of anything with the red class to red and to align right any element with the class pushright. The element with the ID a1 should be in bold print. Also, all divs without any classes should have the text color purple and be aligned left. It would look something like this:
If you copy and paste the above text into the
<head> of your document, you should see the changes we wanted to apply the next time you refresh the file in the browser.
There’s one mystery though. The first style rule is supposed to apply to all
<div> elements and change their text color to purple. But two of our divs are red anyway. Of course, that’s because they have the red class, and apparently, the style rules for classes are stronger than those for general elements if there’s a contradiction.
In reality, it’s a little more complicated than that. There’s whole tutorials centered around the so-called specificity rules of CSS that determine which style rules get applied and what place in the CSS hierarchy they occupy. If some rules don’t get applied even though you think they should, it’s probably a specificity error. As a basic rule, though, we can remember this hierarchy, in order from highest to lowest priority:
Most libraries even provide tutorials on how to do that. The only thing you actually need about that are the files where the functions of the library are defined. you’ll find the links to those on the webpages of the libraries. Once you know where the files are, you have to options for importing them. You can either use a hosted version that the creators of the library have uploaded to their servers. In that case, just import them by typing
If you want to be on the safe side, you can also download the files from the links provided and save them on your own computer. If you do that, just replace the URL in the above commands with the path to the files on your computer. Not that scary, right.
File management: External files and file paths
While we’re at the topic of importing external scripts, let’s take a quick look at file management before we call it a day. Until now, we’ve coded our entire webpage in a single document. we’ve embedded CSS code with the
Then, you can refer to the files in the same way we explained above for libraries – after all, they’re nothing but scripts and style documents themselves.
If you put the links to the files in the same place we put the scripts and style rules before, there should be no difference between separate and joint files.
When specifying the file paths, you don’t have to use the complete paths. It’s possible to do so, but it’s not advisable. Because if you move your folder or decide to deploy your page to a server instead of keeping it on your computer where only you can see it, the paths change and your index.html won’t be able to locate the files it needs. Instead, you can use the relative file path, meaning the path relativ to the current location of your index.html. So if you keep all your files in one folder, it should just be enough to only specify the file name. That will make it look in the current directory. If your files are in a subfolder, just specify the path from index.html to the file with
"subfolder1/subfolder2/filename.css" , for example. If the file is located in an above directory,
".." is what you need to type to get to the parent directory of the current one. So if (for some reason) your files are organized like this:
Then what you need to type to get from you index.html file to your script.js file is:
That’s all, folks!
Once you’ve written the page, your browser is where the magic happens. It interprets the code you wrote in your .html, .css and .js text files and constructs a fully functioning, beautiful website from it – given there’s no errors in your code, of course. But that’s what we’re here for today.
HTML, or HyperText Markup Language, is the backbone of any webpage. It determines its basic structure and content. However, if you only use HTML, your webpage will end up looking like the very first pages from the early days of the web. No pretty formatting, no interactive elements. You’ll see it sometimes when your internet connection is very slow and your browser won’t load the page properly. It’s okay, but we can to better. That’s what CSS is for.
So if you only remember one thing from this tutorial, let it be this summary of what makes up a webpage:
If your mind has a little more room left right now, then let’s take a closer look at how to build a webpage. As mentioned, webpages are nothing but text documents that your browser knows how to interpret. To write these documents, you can use any code editor of your choice. I use Atom, which works very nicely as long as you don’t try to view giant datasets.
It’s always a good idea to look at the code of other webpages and see how they work. To do so, right click anywhere on a website. The details are different for each browser, but there will be an option like “inspect element” and “show source code”. If you click it, you should see a lot of code. This is the website how your browser sees it. Try to understand what’s going on. This is a good source of inspiration for your own pages as well.
While coding your own projects, it might also be able to take a look at the console of your browser. You can find it by clicking “inspect element” (or whatever corresponds to that in your browser) and choosing the tab named “console” in the window that opens. The console will show you an error message if something isn’t right with your page. That message can help you identify the problem, or at least give you something to google if you don’t understand the problem right away.
But you’ll get to that later. First, let’s get to know the basics.
Let’s start with some HTML code. If you want to code along, open up a new document in the code editor of your choice. Copy the code below into the file and save it as, for example, index.html (the .html part is the important one).
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
This is the structure each HTML document follows. The first thing you’ll notice is lots of angle bracket action. The words in between the angle brackets are keywords we call tag names. Together with the bracket, they make up a tag that serves a specific function. HTML content is always placed between a start tag and an end tag that begins with a slash, like this:
Most tags accept attributes that specify how they should behave:
We’ll get to know some examples of that soon.
Any HTML document starts with the declaration
<!DOCTYPE html> that tells the browser what kind of document to expect (html in this case, duh). Then, there’s the
<html> tag. It doesn’t close until the very end of the page and makes it extra clear that anything in between will, in fact, be HTML code.
The two basic parts of your page are the
<head> and the
<body> . The head contains all the meta information you want or need to make your website function properly. It can be used, for example, to give your website a name (
<title>), load necessary CSS information (
<script>), which we’ll get to later on. You can also set lots of other stuff like the language or the character encoding in the head.
Anything in the head will not be directly visible on the webpage, so if you want to finally add some content, take a look at the body of your page. This is where you put your actual content. There’s quite a few options as to how to write your text and what media to incorporate into your page. Let’s take a quick look at a few important tags for that. If you want, copy them into your freshly made HTML document and play around with them a little. To see what they do, just save the file and open it in your browser (you can leave it open in your code editor as well, of course.
<p> stands for “paragraph”. Use it to write some important stuff onto your website, and don’t forget to close your paragraph with
</p> . End tags are important for almost all the tags we’ll discuss here.
<h1>...<h6> are headings. The higher the number, the smaller the font of your heading will be.
<strong> ist used to use bold print like this for your text. Both commands do essentially the same thing.
<em> are both used to write in cursive.
<u> underlines text, but you can forget about that one instantly. On the web, it’s pretty much never a good idea to underline text that’s not a link, and those are underlined by default.
<br> creates a line break. This is one of very few so-called void tags that don’t need a closing tag.
<ul> creates an unordered list like the one you’re reading right now.
<ol> creates an ordered list. It can be modified with some attributes. For example,
<ol start=“343“reversed> will start the list at number 343 instead of 1 and count down from there instead of up. Here you can find a list of all possible attributes.
<li> creates a list element to populate the unordered or ordered lists you created.
Your shopping list in HTML might look something like this:
Links:<a href=„URL“target=„_blank“>Link text</a> The “a” stands for anchor, and is used to create a link. Put the URL you want to refer to in the href attribute. target=”_blank” makes the link open in a new tab. If you leave it out, it will default to opening the link in the current tab.
Images:<img src=“filepath/URL“height=“550“width=“100%“> The img tag is another void tag, so you don’t need to type
</img> after it. Try experimenting with the width and height settings. If you specify them as just a number, the unit will default to pixels. By specifying percentages, you can scale the image according to the screen it’s viewed on. With the above specifications, for example, our picture will the entire width of our screen and be 550 pixels high. Note that if you specify both width and height, you might skew the proportions of your image. That is why sometimes, it’s better to only specify either the width or the height settings.
Audio:<audio src=“filepath/URL“controlsautoplayloop> Sorry, your browser can’t handle this </audio> The audio tag lets you incorporate any audio file into your website. It’s probably a good idea to type in controls as an attribute so the user can pause and unpause the audio. Autoplay and loop are pretty self-explanatory. Better think twice about whether you actually want your audio to play instantly and on a loop, though. The text between the opening and closing tag of this line is only displayed if the browser can’t load the audio file to inform users that there should, in fact, be something here.
Video:<video src=“filepath/URL“controlsautoplayloop> Sorry, your browser can’t handle this </video> The video tag works pretty much the same as the audio tag, just, well, with videos. You can also specify width and height like with an image.
An Inline frame, or iframe for short, works pretty much like the video ot audio tags, but it’s much more powerful. It let’s you display any content, even a whole other website, inside the frame you specify. It’s kind of like a window to another page. It’s very useful for easily displaying graphics or web apps and such, but it can be a bit tricky to make it properly responsive. So if you’ve got the chance, always try to natively integrate your pretty interactive graphics into your webpage. But if you don’t have the time or resources, an iframe will do just fine. Take a look at its possibly attributes here.
There’s some HTML tags that don’t appear to be doing anything on first sight. They’re structural elements designed to let you style the layout of your page.
<span> is like the divs little sibling. While a div can be used to style entire sections of a text, move them or give them a specific format, <span> is more commonly used for styling smaller elements, like if you want to give part of your sentence a different color.