Learning how to create a website is not the most difficult undertaking, but it can be tedious because of all the skills and technologies that may be required, especially if you're starting from scratch. And for beginners, it can be overwhelming. I remember getting stuck, my mind blank, not knowing what to do next. I'm here to give an overview of the different elements that go into creating your own site web.
A text editor: The tool of the trade
First, you need a text editor. If you're on Windows, you can use Notepad because you only want the basic text (other programs add a lot of stuff in the file). Or you can download Visual Studio Code or Sublime Text which is more powerful than Notepad. And you can use them on other platforms too (Mac and Linux). Open the text editor, type Hello, World! and save it as first.html. Double click on the file created and it should be opened in your default browser. Congratulations! You've just created your first webpage.
HTML : Creating elements
You may be wondering now how to add title or image (Who wouldn't?). For this, you need to use HTML (HyperText Markup Language). It allows you to specify elements and their properties (attributes) on your document. Let's start with a default template:
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
</head>
<body>
<h1>Greetings</h1>
<p>Hello, World</p>
</body>
</html>
The first line is a special one and it indicates that you will be writing HTML5 (There are multiple versions) which is the default on the web. The second line is the root tag. A tag is always written like these: <*>children</*> or <*\>. The * is the name of the element and the children can be other tags or text.
html is a special tag and represents your whole document. It always has two children: head and body. The first one is mostly for specifying the document metadata like the title as we're doing now. The second one is where you put the content that will be showing on your web page. Now we're displaying a level 1 heading, specified by h1, and a paragraph, specified by p.
You can learn more about the different tags with this interactive tutorial here.
CSS: Make it pretty
Your next question will be probably how to change the default styles for the text as we can do in a word processor (It's kinda boring now). You will be using another language called CSS (Cascading StyleSheet) for that. Your browser has already a set of default styles for the different HTML tags. To create your own, there are two different ways.
The first is to put it in the same HTML file. You will use the style tag for that.
<style>
h1 {
color: red;
}
</style>
You can put this line of code inside the head tag or the body tag. The browser usually reads HTML files from top to bottom, so if you put your CSS after all elements, they will be briefly rendered with the default styles before the browser applies your own. So the usual way is to put them in the head tag.
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<style type="text/css">
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Greetings</h1>
<p>Hello, World</p>
</body>
</html>
You should see that the heading text color is now red.
The other way is to write a new file (let's call it first.css) and reference it inside the HTML file. The content of the new file will be:
h1 {
color: red;
}
And you will reference it inside the HTML file like this (still in the head tag):
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<link rel="stylesheet" href="./first.css" />
</head>
<body>
<h1>Greetings</h1>
<p>Hello, World</p>
</body>
</html>
When writing CSS, you will specify the targeted elements by using a selector (now we're using h1 which targets every h1 element on the page. Then you can specify the properties that you want to change for the elements targeted, like the text color as we do now. By using various combinations of selectors and properties, you can create almost every layout you want (People have implemented really awesome designs with it).
The same site has another tutorial just for CSS here.
JavaScript: Action, yeah!!!
So now, you know how to create elements and how to style them. But you have seen that a website is not only a document that presents information, but it can also have a lot of interactions (including those annoying popups). To interact with your web page, you will use a third language, JavaScript (Welcome to the Dev world, where almost everyone is a polyglot).
As for CSS, you can use a tag or a file to include JavaScript code. But it will usually be placed at the end of the HTML file (inside the body tag) to ensure that everything else has been created.
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<link rel="stylesheet" href="./first.css" />
</head>
<body>
<h1>Greetings</h1>
<p id="greeting">Hello, World</p>
<script type="text/javascript">
setTimeout(function() {
document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
}, 3000);
</script>
</body>
</html>
The same example using a JavaScript file (named file.js):
setTimeout(function() {
document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
}, 3000);
and the HTML will be:
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<link rel="stylesheet" href="./first.css" />
</head>
<body>
<h1>Greetings</h1>
<p id="greeting">Hello, World</p>
<script type="text/javascript" src="./first.js"></script>
</body>
</html>
What we're doing in this code is wait 3 seconds (3000 milliseconds) then select the HTML element identified by greeting and change what's inside.
Here is the tutorial for JavaScript.
Wrapping Up
Those are the basics that you need to learn. Even with the advent of WYSIWYG tools, you need to be aware of these three in order to be proficient at using them.
Top comments (0)