To Create a webpage well, you must understand the structure behind it. A webpage is essentially an HTML Document made up of different tags. So in this blog post, we will be focussing on the basic tags and attributes that make up a webpage.
So I hope you understand that a webpage is something that you visit using the Internet. Any site you visit online is served to you as a combination of the different web pages. To make it more clear, A website is nothing but an amalgamation of various web pages that are hosted on a server.
Try to understand the process using this scenario:
When we visit a web page(www.techbit.in/blog), our web browser(Google Chrome/Mozilla Firefox or any browser of your choice) makes a request to a web server. Since we are getting the files from the server, this request is called a GET request. The server then sends back the files to our browser, making it understand how to render those files for the user. Once our browser gets all the following files, it will render those files and displays them for us on our browser.
- HTML: It is responsible mainly for structuring the webpage.
- CSS: It is responsible for the designing of the webpage to make it look beautiful.
- JS: It adds functioning to the otherwise static webpage.
- Images: Various file formats supports browser to display webpage’s images.
Now we know what a webpage is comprised of. So to create a webpage layout, we need to dig deeper into HTML. Because HTML is responsible for the layout of the webpage.
Table of Contents
HTML
HTML stands for HyperText Markup Language. It is not a programming language, rather a markup language. The main job of HTML is to structure your webpage. This job is done by three main tags of HTML: html, head, and body tag. A tag in HTML is an element that is used to store content within itself. Any website you surf is surely made up of these 3 basic tags. Let’s now understand each of these tags better.
Basic HTML Tags to create a webpage
So the three HTML tags which are mandatory to use when creating a webpage are:
- <html>
- <head>
- <body>
<html> tag
A <html> tag is used to declare that the document we are creating is an HTML Document. Everything that is enclosed within this tag is a part of HTML.
<html>
</html><head> tag
A <head> tag in HTML represents the header section of the document. It includes all the links to other CSS or JS files, along with the title, the favicon, meta tags for SEO, and any other optional information about the webpage.
There are plenty of elements that can be used inside the <head> tag. These are:
- <style>
- <base>
- <title>
- <script>
- <noscript>
- <meta>
<html>
<head>
</head>
</html><body> tag
A <body> tag in HTML stores all the content that you want to display on your webpage. The content that you are able to see when you visit a webpage, is because of its placement inside the <body> tag.
<!DOCTYPE html>
<html>
<head>
...Additional Tags Here....
</head>
<body>
...Your Content Here....
</body>
</html><!DOCTYPE html> is a declaration for the browser to understand that this document is a HTML document.
Other required tags
Till now what we have discussed defines the layout of every webpage. A webpage is not a webpage without the above-mentioned tags. But there are more tags to be considered when creating a web layout.
A webpage is not completely structured unless it has a <title> and some container body to it i.e., <p> tags.
<title>
A <title> is a simple self-explanatory tag. It is nested under the <head> tag of our HTML document. it is used to give a title to our document.
<p>
A <p> tag is a paragraph tag. It is nested inside the <body> tag. It contains the information that you want to display on your webpage. Any text inside separate <p> tags is treated as separate paragraphs.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<p> Hello I am a paragraph </p>
</body>
</html>Copy the above code and paste it into any text editor. Save the file with the .html file extension. Open the file in the browser and there we go, we now have a webpage of our own.
And that’s it for this article, I’ll be continuing a complete series of HTML for beginners. So I will see you again super soon. Meanwhile, make sure to connect on our social media handles too.
Check out my latest articles here:
3 Comments
fintech · March 1, 2022 at 3:18 am
This website was… how do you say it? Relevant!!
Finally I’ve found something that helped me. Cheers!
Vaishali Rastogi · March 2, 2022 at 12:08 pm
Thank you so much!
"HTML'de Bir Web Sayfasını Nasıl Ayrılır" kodu Cevap - Kod Yanıtları · October 29, 2021 at 7:42 am
[…] Kaynak html html […]