Welcome to the Code Student introduction to web development series. The series where you’ll learn everything you need to know to get started in the busy world of web development and build your first websites without any prior knowledge in the field.
Watch this tutorial on Youtube:
That was enough talking, for now, so let’s get started with our first website!
HTML – The foundation of your document
Websites are written using HTML, which stands for HyperText Markup Language. This means that in its core, every website on the internet is just a hypertext document, written in HTML. It’s also important to note, that HTML is NOT a programming language. It is a markup language like its name suggests.
To build our first site, we, therefore, have to write an HTML file, which can be displayed by our browser. In the following parts of this series, we’ll dive further into the coding and use a professional code editor, but for this part, we just need our standard text editor. It doesn’t matter on which operating system you’re on, just use your default text editor and create a new file named index.html.
Creating your index file
It’s important to give it the .html file extension, or else your browser may not be able to display it correctly. The reason why we want to call our file ‘index’ is that browsers will always look for the index.html file first when you go to a new website as this naming convention has established itself over the years.
Inside our new file, the first thing we have to do is declare the document type at the top of the file. This isn’t necessary anymore for most modern browsers, but it’s good practice to include it.
Structure of an HTML document
An HTML file consists of two parts, the head and the body, which both need to wrapped inside HTML tags. HTML uses ‘tags’ which consist of an opening and closing tag to mark different elements in the document.
<html> <head></head> <body></body> </html>
Inside the head, we can declare important metadata, include other files and do things like setting a title for our webpage. To do this, write an opening and a closing ‘title’ tag and the actual title between those.
<head> <title>My first page!</title> </head>
The title is what you most likely will see at the top of a tab inside your browser.
Inside the body goes all of the actual content of our website. To structure the site and give it a semantical functionality, we can use a variety of different tags. For example, we can use the ‘h1’ tag to declare a large heading and the ‘p’ tag for a paragraph. As we don’t want to make this too complicated, we won’t use any other tags in this introductory part of the series.
<body> <h1>Hello, World!</h1> <p>This is my first paragraph on my first website!</p> </body>
All of the code
Take a look at our finished index.html file:
<!DOCTYPE html> <html> <head> <title>My first page!</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first paragraph on my first website!</p> </body> </html>
Your first website is done!
That should be enough for our first website. Save your file as index.html and close it.
To actually see what we did here, right-click on your index.html file and open it using your favorite browser. As you can see, we just build our first website in no time!
Thanks for joining us today! We’re excited to see you again in the next part of our Introduction to Web Development series, where we’ll dive deeper into the topic.