HTML for Beginners : Building the Skeleton of a Webpages
Ever wondered what goes into creating a Webpage?
This article explores the basics of creating webpages using HTML, CSS, and JavaScript. It focuses on HTML, which is used to define the structure of a webpage, including elements like headings, paragraphs, links, images, and videos. The article explains the role of tags and attributes, the key HTML elements, and how they contribute to building a webpage's anatomy.
Have you ever wonder about how these webpages are created? How a webpage have images and videos ? I always wonder how these webpages are created. How we can show images and videos through the webpage? So, I search in Youtube and Google “How to create a webpage?“. Then I saw a video about how to create a webpages. After watching the video, I learn how these webpages are created. These webpages are build from three technologies - HTML, CSS and JavaScript.
The first step in creating a webpage is defining how a webpage will look like. What will be the structure of the webpage? For this we use HTML. Which is used for creating the structure of the webpages. Lets learn about the HTML and how we can page the webpage’s structure?
What is HTML?
HTML stands for Hypertext Markup Language.
“Hypertext“ refers to the links that connect the webpages to other webpages in same website or different websites. You must had already experienced the feature of the Hypertext. For example, When you visit a website like chaicode or any other website, you see many links like About us, Home, etc. and when you like About us or any other you are directed to different webpage within the same website. This is what Hypertext do.
"Markup" refers to the tags used to define the elements of a webpage.
HTML tells the browser how to structure the website you visit.
How to Create a Webpage Structure Using HTML?
In HTML, there are tags and elements which are used for creating the structure of webpages. Elements are the whole content between the tags and starting and ending tags. Tags are the beginning and ending part of the elements. The tags begin with ‘<‘ symbol and ends with ‘>’ symbol. Whatever that comes between < and > are tags.
fact : the tags are not case-sensitive. You can write the tag in uppercase or lowercase, it does not matter. for example, <title> can be written as <TITLE> and it will not produce the error. However, it is best practice to write tags in lowercase because it provide consistency and readability.
There are various elements in HTML for inserting the image, videos, links, audio and much more.
There are attributes of elements. Attributes are the extra information that will not appear in the webpage. These are in simple terms the characteristics of the elements.
The anatomy of HTML
This the basic anatomy of the HTML before write the structure of the webpage.
In this we have,
<!doctype html> : It tells the browser the set of rules the html have to follow to be consider as good html. This tell the browser it is the valid html document.
<html> </html> : This element is used to enclosed the content of the page. This is also known as root tag.
<head> </head> : This element acts a container and store all the meta data and title of the page. The information inside this element is not user but for the browser. It contain the style for the styling the page and links to link the html with others like javascript code or css code.
<meta charset=”utf-8” /> : This element represents metadata that cannot be represented by other HTML meta-related elements, like
<base>,<link>,<style>. The charset specifies the character encoding for your document as UTF-8, which includes most characters from the vast majority of human written languages.<title> </title> : This element is used to store the title of the webpage which appear at the top of the webpage in tabs of browser.
<body> </body> : This element stores all the content of the page which will be displayed to the user including image, text, video, etc.
Elements
<h1> - <h6> :
<h1> to <h6> elements represent the six types of heading that we can use. The <h1> element have the highest height of heading and <h6> element have the lowest height among these headings.
<a> :
This element is used for creating the hyperlinks which are used to connect the webpages. Content within the <a> must contain the destination of the link.
The output will be :
<p> :
This element is used to display the paragraphs.
<br> :
<br> element is used for line break. When you want the content to display from the next line not from the same line. This is useful when we use <button> element and if we use two <button> element then those two buttons are displayed side by side.
This will be displayed as :
<img> :
<img> element is used when we have to display a image in webpage. The src = ““ attribute tells where the image is. The alt = ““ is used to store the in image in text meaning it tells the browser what the image is about. This is helpful when the image is not loaded and you see the text image not found or something else.
<video> :
<video> element is used to display the video in the webpage. The src = ““ attribute shows where the video is. We can use control attribute for the controls of video like play, volume and download.
There are more elements which are used in HTML for the structure of the webpages.
To know about all the elements and attribute, click the link below :