All of the HTML web pages we see on the internet are written by HTML codes that are written in a certain structure. And before we move on to making our very own web page, it is necessary that we get a basic concept about the standard structure of an HTML document.
An HTML document has two main parts. The Head and the Body. The head of an HTML document usually handles the page’s title, keywords, icon, linking to style-sheet etc. whereas the body contains all the contents of an web page for the user to see.
The various elements of an HTML document are represented by tags. Let’s start learning by an example.
The image above shows the HTML code for a very basic web page. The first line <!DOCTYPE html> declares the file as an HTML document to the browser, so the browser starts to process the later parts of the document as HTML codes. It is pretty much a necessary line for every HTML document we write.
Next we come across the <html> and </html> tags. Tags in HTML are defined by two pointed brackets and a keyword, the keyword denotes which function this tag will carry out. Most of the HTML tags need another closing tag to indicate where the functionality of that tag ends. A closing tag or end tag is written with a ‘/’ (forward slash) before the keyword. Any text or other contents that are supposed to be within the functionality of a tag, are kept within the start and end tag. There are also a few single tags that don’t need a separate closing tag which we shall discover further in this series.
The other two pair of tags we can see next, are the <head> and <body> tags. As we have said before, the head tag contains necessary information about the page, and the body tag contains all the general contents of a page. So as we can see, the <title> tag contains the title of the page that would be shown on the browser. For instance, when we shall open this page in a browser, we shall see the page title as ‘My first webpage’.
In the body section of the page, we can add anything we want to see on our page such as texts, images, media contents. In this page, we have used the <h1> tag. It is a header tag, that is used to express headers. The corresponding number after the h denotes the size of the header. h1 is the largest and gets smaller down to h6. Then we end the h1 tag and the body tag. At the end of the document, we put the closing html tag.
So, now as we have learned how the different parts of a web page functions, we can move on to writing our first HTML code. Head on to the location where we had created our first .html file on our last tutorial. Right click on the file, and select Edit with Notepad++. This will open the file in Notepad++. Now write the codes we have learned and save the file from the tools menu or by ctrl+S.
Now opening that .html file in a browser, we can see the output.
Here we see, the title we assigned to the page is showing on top of the browser tab, and the header is shown on the main page.
Example Code
<!DOCTYPE html> <html> <head> <title>My first webpage</title> </head> <body> <h1>This is my first webpage</h1> </body> </html>
Congratulations on making your first web page.
I hope you have now understood how a basic web page is written in HTML.
![life2coding_icon [] HTML & CSS Tutorial 3: Writing Your First Web Page](https://www.life2coding.com/wp-content/uploads/gravatar/life2coding_icon [].jpg "life2coding_icon [] HTML & CSS Tutorial 3: Writing Your First Web Page HTML+CSS Learning Arena Web Development")
- How to Create a RGB Color Picker for Images using OpenCV Python - 22 April, 2022
- Combine Several Images Vertically with Padding using OpenCV Python - 21 April, 2022
- Combine Several Images Horizontally with Padding using OpenCV Python - 21 April, 2022
Pingback: HTML & CSS Tutorial 4: Learning the Basics - Life2Coding