Posted by Ridwan Fadilah on Jun 22, 2020 - 12:35 am
Introduce with HTML5. Learn the basic HTML5 tutorial and build your first web!
You might be familiar with a website. However, have you ever think about how to make a website? If so that, you're in the right place. In this tutorial, you'll learn about the basics of HTML5.
Here's an example of the simple HTML document:
and here is how the browser will display the code above:
Here's the explanation of the simple HTML5 example:
<!DOCTYPE html>
is declaration define that this document is an HTML document<html>
element is the root of an HTML document<head>
element contains some meta information of your HTML document<title>
element is the title of your HTML document<body>
element defines the document's body. Place your visible contents in this element such as headings, paragraphs, images, links, tables, etc<h1>
element defines the heading, and the <p>
element is a paragraphThe HTML element is everything from the open tag to the closing tag.
See this image illustration:
Before we start to learn more HTML5, you should have a code editor first. Let's get acquainted with the code editor.
I have some code editor recommendations here:
Please install one of these editor on your computer.
You can also use the TextEdit on your Mac or Notepad on Windows if you can't install these for now.
First, Let's start with Notepad. If you are Mac user, use the TextEdit.
Open your Notepad or TextEdit
For now, let's start with a simple HTML document. You can write the code below or copy them.
Example:
The title not shown on your page. But that will display on the browser tab. It is because the head element is the element that only used to place some meta-information. In this case, the title is also one of the meta-information.
All contained in this body element is what will display by the browser. However, you can still set what content you want to show or hide. You'll learn about that in the next chapter.
Okay, now save your HTML page. Select file, and then save as.
Named the file with 'htm' or 'html' extension. There is no difference, it up to you.
Set the encoding to UTF-8. Which is the preferred encoding for HTML files.
Now open saved HTML file in your browser. To open the HTML document, just double click or right-click and select open with a browser (Chrome, Mozilla, IE, etc.)
The HTML file will display by the browser like this:
Okay, that's a little tutorial of the basic HTML5. If you want to learn more about the basic HTML5 tutorial, you can find it in the next chapter.
You can see the complete 'HTML5 Tutorial - Intro' on our YouTube Channel. You can also find the full source code of these examples on our GitHub.
Thanks for reading this tutorial.