HTML is the foundational language for creating websites. Every webpage is built with HTML. Did you know that you can create a webpage using just HTML and nothing else? I’ll show you how.
All you need to create a webpage is a code editor and a web browser. The code editor I recommend is Visual Studio Code. It is free, and available for Windows, Mac, and Linux operating systems.
HTML is a markup language that uses elements to display content on a webpage. With a few exceptions, HTML elements have an opening and closing tag enclosed by brackets. The closing tag will always have a / after the first bracket.
To get started, open Visual Studio Code, create a new file, and enter the following HTML:
<html>
<h1>You good?</h1>
</html>Save this file as index.html, then open it using your browser.
Note: To open a file using your browser, open a new tab, then press Ctrl+O (Cmd+O on Mac). This will display a window for you to select the file you want to open. Navigate to the folder where you saved the index.html file, select it, and open it. The file will now display in the tab.
You should see something like the following:
Congratulations! You’ve created for your first webpage. While this page is displaying heading text properly, it isn’t coded using standard practices. Let’s update this code with some valid HTML.
First, add the following above the <html> tag:
<!DOCTYPE html>Then add the following after the <html> tag, but before the <h1> tag:
<head>
<title>My First Webpage</title>
</head>
<body>Finally, add the following code after the </h1> tag, but before the </html> tag:
<p>Because you're about to become a web developer!</p>
</body>Save the changes and refresh the browser. Your webpage should now look like this:
Let’s go through each code segment to understand it.
<!DOCTYPE html>This is the document type declaration which defines this document as being a HTML document.
<html>This is the root element of a HTML page.
<head>
<title>My First Webpage</title>
</head>
<body>The <head> and </head> tags define the HEAD element which contains metadata for the webpage. Metadata is not displayed on the webpage.
The <title> element defines the title of the webpage that is displayed in the web browser tab.
The <body> element is where all the visible content is placed. This is where you insert elements such as headers, paragraphs, images, etc.
The <h1> element defines a heading.
The <p> defines a paragraph.
You can download the completed code from my Github repository for this tutorial.
Now it’s your turn. Try building your first page and share it! Save the code to your Github and share the link here. I’m excited to see what you create!