Introduction to HTML for beginners
Neha Gupta
Helping IT Professionals 2X Their Career Growth | Career Consultant | Resume & Job Search Expert | Tech Mentor | 1:1 Guidance | LinkedIn Boost | TopMate
A beginners guide to web development. If you’ve always wanted to learn how to build a website, then you’ve come to the right place!
A website comprises of multiple webpages and how do we build a webpage? Yes, using HTML, CSS, and JavaScript. Today, we’ll focus on understanding the role of HTML in a website.
Table of contents
What is HTML and Why to use it
HTML stands for HyperText Markup Language. While the full form might seem daunting, think of HTML like the human skeleton. Just as bones provide structure to the body, HTML provides the structure to organize content on a webpage. It’s a markup language that defines the layout and content placement through tags.
Fundamental Elements of HTML
HTML’s basic building blocks include:
How to Write Basic HTML Code
Let’s write some basic HTML together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduction to HTML</title>
</head>
<body>
<h1>Introduction to HTML</h1>
<div style="background-color:cornsilk"> I create a container</div>
<br/>
<span style="background-color: yellow;">I create an inline contaner</span>
<br/>
<br/>
<a href="https://www.dhirubhai.net/in/nehagupta1504/">Connect with me by clicking on it</a>
<br/>
<br/>
<footer style="background-color: beige;">@NehaGupta</footer>
</body>
</html>
3. Save the file with a .html or .htm extension.
4.Double click the file or open it with a web browser.
HTML Page Structure
Note: If you have any difficulty in understanding these terms don’t worry will look into these in more detail till then you can always look into additional resources link I provided in the below section
领英推荐
Commonly Used HTML Tags
We have gone through with the structure let’s look into some of the commonly used tags
<div> For creating containers </div>
<span> for creating inline containers </span>
<a href="some-url"> To link one webpage to other</a>
<img src="some-url"/> // To attach image in a webpage
<h1> Biggest heading </h1>
<h6> Smallest heading </h6>
<form> To create forms on a webpage </form>
You can read about these tags more on w3school try using different tags in the webpage we’ve created.
How to debug HTML
We can leverage dev tools to do that. Checkout the attached video to do that or simply follow the steps below.
HTML Versions
HTML5 is the latest standard version used for web development.
Additional Resources
We’ve mostly covered everything about HTML in this post. You can go through these additional resources if you need any further insights of how HTML works.
Queries and Further Tasks
You are now ready to structure a webpage of your own. If you have any queries regarding the HTML or this POST you can comment down below. Additionally you can connect with me on Linkedin or reach me out through Topmate. Please do gives a thumbs up and follow me here if you like this post and encourage me to keep making it.
Task to Take Home
Product @Utkarsh Classes (JV : Physicswallah) | Co-founder @Planet Creatos
1 年Sounds Amazing!
Senior Backend & AI Engineer @Quantzig | Ex - Dell | Mentor | YouTuber | 15k+ Followers
1 年Awesome article ?? Neha