Now that you've registered your domain and set up hosting, it's time to build your website. This guide will discuss different approaches to website creation, from coding your own site to using content management systems.
HTML: The Structure
The basic language for every web page is HTML (HyperText Markup Language). It defines the structure and content of your pages using elements enclosed in tags. What this means is best illustrated with an example - the source code for a (very simple) web page may look like this:
<!doctype html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
HTML commands are enclosed with angle brackets, and these are called tags. In our example, <h1> is an opening tag, and </h1> is the corresponding closing tag. The h1-tags declare the text in between to be the main heading of the web page. You can copy and paste the above code and save it in a text file (with the .html extension), and when you open it in a browser, it looks like this:
So the text 'Welcome to my website!' is rendered in the browser as the main heading of our page, but this does not determine how this heading is displayed, e.g. what font or font size should be used. The browser uses some default settings for displaying the page, but in general you will change these for your own web pages. The next section shows how to do this.
CSS: The Style
Although it is possible to build a wep page using HTML only, this is almost never done in practice. Almost all webpages use CSS (Cascading Style Sheets) for configuring colors, fonts and the layout. For example, we may want to change the font to Arial and the color of the heading to blue:
<!doctype html>
<html>
<head>
<title>My First Website</title>
<style>
body { font-family: Arial; }
h1 { color: blue; }
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
We have added a style-tag with two rules, and if you now reload the page, it looks like this:
So we can use CSS to to improve the appearance of our website.
JavaScript: The Behavior
With JavaScript we can add interactivity to webpages, like verfiying input from the user and configuring how elements respond to user actions. For example, we may want to show a message when the user clicks a button.
<!doctype html>
<html>
<head>
<title>My First Website</title>
<style>
body { font-family: Arial; }
h1 { color: blue; }
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is a paragraph of text.</p>
<p> <button id="myButton">Click</button> </p>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("You clicked the button");
});
</script>
</body>
</html>
We have added a button which opens a window when the user clicks it.
Methods For Creating Your Website
Usually your hosting company offers tools for creating your web page without having to code. This includes templates you can adapt to your needs, and Website Builders that allow you to create a whole website with menus and a drag-and-drop interface, like WordPress, but this also takes some time to get used to.
So you don't absolutely need to learn HTML before starting your web project, but you may want to know what's going on behind the scenes at some point.
Back to top of page.