If you know HTML, CSS and JavaScript, you can build most web pages.
You can build a simple web page knowing only HTML.
HTML stands for HyperText Markup Language.
Let us create a new page. Copy the following code and paste it into a file, then save it as index.html.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
This is the first web page. It will not look good, but we are not trying to make it look good now. We are getting started. Eventually, we will make it look good.
</body>
</html>
Open your file in any browser.
Congratulations, you created your first ever web page!
Now, let us look at what you wrote.
HTML has elements. “html”, “head” and “body” are elements. All those elements have a start tag and an end tag.
“html” element has a start tag and an end tag.
“head” element has a start tag and an end tag.
“body” element has a start tag and an end tag.
We have another element, “meta”. It doesn’t have an end tag. Look at the code.
You don’t need the “meta” tag for what you are doing now. I added it so that I can show you an element without an end tag.
The body element is where you add your content. Look at the code.
Exercise 1: Change the code so that the page displays “It is not looking good” instead of “It will not look good”.
Answer:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
This is the first web page. It is not looking good, but we are not trying to make it look good now. We are getting started. Eventually, we will make it look good.
</body>
</html>
You can add a title element inside the head element to have the page display a title.
The title element has a start tag and an end tag.
Exercise 2: Add a title tag immediately after the meta tag to display “My first web page” as the title of the page.
Answer:
<html>
<head>
<meta charset="utf-8">
<title> My first web page </title>
</head>
<body>
This is the first web page. It is not looking good, but we are not trying to make it look good now. We are getting started. Eventually, we will make it look good.
</body>
</html>
The next lesson in this series will be up soon. Keep visiting. If you have any questions, ask below and I will try to answer them in the comments!