This is the first blog in the series on front-end development. In this series, we will be covering HTML, CSS, JavaScript, and Bootstrap tutorials, which can be simple and easy to learn for beginners.
- To learn Web-Development, you need to know how the web works. If you don't aware of this, please read my first blog in this series. It will help you clear all your confusion while learning web development.
HTML: To learn web development, HTML is a mandatory language to learn. HTML stands for Hypertext Markup Language. Even if you want to be a backend developer, you must understand how the front end works and the basic terminologies.
Markup?
Have you noticed, a term called "markup"? Markup is a kind of language completely different from other programming languages. A text document can have annotations to describe its layout, structure, and display using markup languages. To characterize the document, they employ tags or keywords, and the language defines the tags' meanings.
Let's get started!
A basic text editor (VS Code, Sublime Text, or even Notepad) can be used to create and edit HTML documents, which are simple text files. A web page can be viewed in a web browser like Chrome or Firefox once it has been produced in HTML.
The elements that make up an HTML document are denoted by tags. These elements provide instructions to the browser on how to display the page's headings, paragraphs, pictures, and links.
The most recent version of HTML, HTML5, was introduced in 2014. It featured additional features for multimedia and making web pages more interactive, as well as new elements and attributes to make the creation of web pages simpler.
Consider the construction of a new property to make things simpler. To give the house structure, they first construct the walls or borders. As a result, they can work on decorating the house using paint and other materials. People who live there are comfortable thanks to the essential house amenities. such as power, water, internet access, etc.
Here, the walls may be thought of as HTML files; they give the website body so that we can continue to make it seem fashionable and provide comfort to visitors using Javascript DOM manipulation. The CSS and HTML will be covered in the upcoming instructional days. Let's proceed with the HTML for now.
In this blog, we will be learning a few important tags. In the upcoming blog, we will be making a simple website in which we complete the HTML in one shot and also I provide screenshots for every tag implementation. This blog is like the prerequisite for the next blog.
<html>
This tag is used to define the beginning and end of an HTML document.
It tells the browser that the document is written in HTML and that it should be interpreted as such.
The <html> tag must be the first tag in an HTML document, and the last tag must be the closing </html> tag.
<head>
This tag is used to define the header section of the document, where information about the page, such as the title and metadata, is stored.
Metadata: Data that describes other data is known as metadata. Metadata, as used in the context of a website, refers to details about a web page that is not visible to users but is used by search engines and other systems to interpret the page's content and function.
The <head> tag must be the first tag inside the <html> tag, and the last tag inside the <head> tag must be the closing </head> tag.
<body>
This tag is used to define the content of the document, where the visible elements of the page are placed.
The <body> tag must be the first tag inside the <html> tag, after the <head> tag, and the last tag inside the <body> tag must be the closing </body> tag.
<h1> to <h6>
- These tags are used to create headings of different sizes. h1 is the largest heading and h6 is the smallest heading. Each heading has a default size that can be changed using CSS.
<p>
This tag is used to create paragraphs. It is used to separate text into paragraphs.
<a>
This tag is used to create links.
The <a> tag is used to create hyperlinks, which allow the user to navigate to another webpage or a specific location on the same webpage.
The <a> tag has an attribute called "href" which is used to specify the link's destination.
<img>
This tag is used to insert images.
The <img> tag is used to display images on a webpage.
It has an attribute called "src" which is used to specify the source of the image.
<div>
This tag is used to create divisions or sections on a web page, which can be used for styling and layout purposes.
The <div> tag is a non-semantic element, which means it doesn't have any specific meaning, it is used to group other elements to be able to apply styles to them or to create a layout structure.
This is all for this blog, don't forget to check out my upcoming blog in which we learn every essential tag in HTML and its implementation in building a basic website.
If you have learnt something new here or are excited about the series, please follow me and consider subscribing to my newsletter.