I vividly remember when the first time I learn HTML in 2000/2001. Back then the resource is rather limited. Most often I need to buy a book to learn about HTML, and later Javascript. So this time I want to take you to a journey of creating your first basic HTML document! 🙌
Open the text editor
By "text editor" I mean Notepad if you're on Windows, or TextEdit if you're on Mac. No need for a specialized code editor or IDE (Integrated Development Environment) like VS Code for now.
Since I'm on Mac I'll give an example with TextEdit. If you're on Mac too, make sure you set the document to "Plain text" before start writing (See the image below). If you're on Windows with Notepad I guess it's already set to "Plain text" by default, so you're ready to go. -- image --
Let's write some HTML!
The html you're going to write is the very basic form of HTML. For now let's not worry too much about "the rules". The only thing you need to know for now is that, in order to create an HTML document that can be rendered by the browser, the basic structure must following a certain structure. Let's create it!
First, type <html>. Now everytime you see a text in between brackets < and > like this, it's called "tag". A tag like this is called an open tag, and every open tag need to be closed. So next, right after <html> go on and write </html>. That second part is called a close tag.
See the different between open tag and close tag, on a close tag there's / and that's the identifier that differentiate it from an open tag. So if <html></html> translated in plain words would be like telling the browser, "Hey, this is where the HTML start, and this is where it ends. Anything outside that, is not part of the HTML!".
This <html> tag is the "mother" of all element tags. All other HTML element tags must be placed inside this <html></html> tag. All of the element tags in HTML share the same pattern. It start with <, and then the tag name, then >, and then its close tag counterpart. Every other HTML element tags are always comes in pair: open tag and close tag.
--- image breakdown <html></html>, and other elements like <body></body> <div></div>
These are few examples of HTML element tags. We don't need to worry about them all. For now, we just need to know <html> and <body>.
The Body
Now let's write the body element, start with the body tag. Let's put the body tag inside the HTML tag. Don't forget to close the body tag ☺️
The body tag is an identifier for the browser to recognize the content of your HTML document. Think of it like an outer "wrapper" for your document's actual content. Other important note is that in every HTML document, it can only be one <body></body> element. So does the <html></html> element. Few other elements also share the same rule, it can be only one, but for know we don't need to worry about those other elements.
To make it easy to read, we can manually format the code like the following. Both of these formats will work.
The format is just for us human so we can easily read it. Regardless how it formatted will have no effect when the browser render the code, as long as the syntax is correct.
Now let's write the actual content for your homepage
Let's test the HTML document we've created so far, but before that, we need to add something inside our <body></body> element. Let's write "Hello world!" inside the body element.
Again, you can create new line on the body tag.
Change the text to whatever you like. Now save the file. When saving the file put any name you like, for example my-page, then make sure it ends with .html, so it becomes my-page.html. If you see a file extension warning just press "use .html". Save it wherever you like in your computer.
--- image
Now let's find the file, open any browser you have on your computer and then drag and drop the my-page.html file into the browser. You'll see "Hello world!" (or whatever text you wrote earlier) in the browser screen! The text might look small for now, but it awesome, right? 😎
--- image
Before we continue, don't close the browser just yet. We're going to see the result for the next code we're going to add.
You can try to change the text and then save the file. Now refresh the browser, now you can see your text changes! ✨
Let's write more content
Now, let's write some of the basic element for your content. Using these elements, your content will be formatted, meaning that later you can see in the browser that your text will be bigger or smaller depends on what element you use.
Let's start with simple structure. Think of it like writing a story. Every story must have a title, right? and of course a couple of paragraphs underneath it. For the title we use <h1></h1> element, and for the paragraph we use <p></p> element. Notice these two also comes in pair: open and close tag.
--- code h1 and p ---
We start by writing <h1> for the title, and everytime you create a paragraf, wrap it with <p>. Now you can try save the file again, and refresh the browser. Now you can see your title and paragraphs shows up in the browser!