Let’s create your first html code. To do this open brackets application.
Right click on left side panel and select ‘new file’ menu item.
Name the new file as ‘Index.html’ or ‘index.html’. Don’t forget to write an extension.
Now write some Text within the text editor as follow.
This is my first html code text.
Save the file either by pressing key ’Control’ and ’S’ (ctrl + S) or by navigating menu item File -> Save.
Let’s see how our page looks like in a browser. For that right click on the preview icon present on the right side panel. This will open our ’index.html’ page in a default browser.
Now you can see our text displayed in the browser window. This is the output that user will see when he or she visited this html file.
Now right-click anywhere on the browser and click menu item ’Inspect element’. You will see following html markup in the ’elements’ section.
<html>
<head></head>
<body>
This is my first html code text.
</body>
</html>
As you can see this is just a text within the body tag and is not uses any html element. There are many html tags you can use. For now, let’s use a paragraph html tag.
First, type a left angle bracket (less than sign) ‘<'. After that write a paragraph tag i. e. 'p' (small letter). Then type right angle bracket '>‘ (greater than sign). When you type this, immediately code editor will type closing tag for you ‘</p>’. So you will have now opening and closing paragraph tags with empty content as follows.
<p></p>This is my first html code text.
Now just cut our content text (selecting and pressing keys ‘Ctrl + X’) and then paste it within the paragraph tags (placing the cursor between the opening and closing tags and pressing keys ‘Ctrl + V’).
<p>This is my first html code text.</p>
Remember most of the html elements have an opening and closing tag and what is the difference between them is just a forward slash.
There are some elements without a closing tag or self-closing tag or single tag which will cover later in this course.
Here we have written just a single sentence within the paragraph tag and it will be treated as a paragraph by the browser. But as with any paragraph, you can have a number of sentences within the paragraph as follows.
<p>
This is a sample Text.
This is a paragraph for our demonstration purpose.
You can write actual required content here as a complete paragraph.
You can have as many paragraph elements or tags with a single html file.
</p>
Now save our changes. (Ctrl + S) and preview our page. (by clicking the same icon or right-hand side panel) or just refresh the html page if it is open already (by pressing keys ‘Ctrl + F5’).
Now inspect the page again. You will notice that we have our updated html markup having paragraph tag.
<html>
<head></head>
<body>
<p>
This is a sample Text.
This is a paragraph for our demonstration purpose.
You can write actual required content here as a complete paragraph.
You can have as many paragraph elements or tags with a single html file.
</p>
</body>
</html>
This tool given by Google chrome allow us to inspect our html page by displaying markup as well as style applied to a page and many other useful features.
Till now you can see how easy it is to write a html file and view it in any browser (Though I prefer a Google chrome you can use IE i.e. internet explorer, Firefox etc.
In this course, we are going to see many most used html tags and how to code them using our code editor. Once you learn them and practice them you will be able to create html page for any website.
Let’s now create a template html file that you are going to use in any new html file while practicing as well as in real projects html pages.
Create a new html file. Name it as a ‘htmlTemplate.html’ or any name that you prefer.
Then in code editor copy paste the following html code and save the file. (Ctrl + S).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
// Write your content here
</body>
</html>
This is the basic structure of any html file.
On the first line, you can see a ’Doctype’ tag. This tells the compiler that this is a HTML 5 document. The thing to be noticed here is that this include exclamation sign and this tag doesn’t have a closing tag. You have to type this exactly as it is.
Next, there is an html tag having the closing tag too. This tells the browser that it is the html markup. This has a ‘lang’ attribute with a value ‘en’. Html tag can have one or more attribute and we can assign a value to it using equal to operator as this one. The ‘lang’ attribute denotes language and ‘en’ value denote English. So this tells the browser that the language is English. This can be any other language. This attribute is optional. You can simply close html tag without having this attribute and it will work fine.
Also, the ‘meta’ tag in the head tag is optional while the ‘title’ tag within the head tag is for the title of the page and you have to change the title value ‘Title’ to meaningful value relative to your web page.
The actual content that browser will display has to be within the body tags. Right now in this template file, it is blank having a single comment which you either remove or leave as it is since its not going to display in the browser. When you use this template in any new html file, type all your content here within the body tags.