Introduction:
Have you ever wondered how mastering Web Development can take your career to the next level? To be the perfect web developer, we need to learn the basics of HTML, CSS and JavaScript.
The car is analogous to web development, where HTML is the frame of the car, CSS is the design and colour of the car, and JavaScript is the engine that runs the car
So, I am starting to learn the basics of HTML, the framework of the webpage from day 1.
As a beginner, I am learning HTML from the basics as it is the backbone of web development.
Day 1 – HTML Tutorial
Today I began my journey of learning HTML focusing on the introduction of HTML and Intermediate HTML. I will cover all the important points I learned today.
Introduction of HTML
1. What is HTML?
2. Basic Structure of HTML Documents
An HTML document normally starts with the <DOCTYPE html> which is followed by <html> elements that hold the whole content of the page.
The basic example is shown below.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text. </p>
</body>
</html>
HTML Elements and Tags
Elements: Elements are the combination of tags and contents. For example, <p>This is a paragraph of text. </p> is called Elements.
Tags: Tags are those which are enclosed in angular brackets. And contents are those which are enclosed in tags. For example, <p></p>, <h1></h1> are tags and whatever is written in between are contents.
Opening and Closing Tags: HTML mostly has both opening tags which are enclosed in angular brackets <h1> and closing tags angular brackets and forward slash / </h1> . Furthermore, there are also some tags which are self-closed. For example, <hr>, <br> and many more.
Common HTML Tags
- Heading Tag: It’s represented by <h1></h1> ….to <h6></h6>.
- Paragraph Tag: it is denoted by <p></p>.
- Link: links are written by anchor tag <a></a> with the ‘href’ attribute to specify the URL. For example, <a href= “www.google.com”>This is linked to google webpage</a>
- Images: <img> tag is used to insert images with the ‘src’ attribute to specify the source of the image. For example, <img src=”image.jpg” alt=”Description of Image”>
- Lists: it is used to list the items with the tag <ul> for the unordered list and <ol> for the ordered list followed by <li>for the list of items.
How to build our First page?
To start creating our own webpage, we need to install vs code. There are many code editors, but I will use VS code. Shift + ! is the shortcut to generate an HTML boilerplate. And we must save the file with a .html extension like index.html. Then we can open this file in the web browser to see our web page in action.
The Above image is the webpage I created using only HTML. In this webpage, I have used all the tags discussed in this post like <h1></h1>, <h2></h2>, <img>, <ul></ul> <li> and anchor tag to attach the website link.
Resources I used for learning this course:
There are a lot of online platforms and YouTube videos for his course. After a lot of research to choose the platform for learning this course, I ended up with W3sShool.com and one paid course by Angela Yu from Udemy. I will review this course in future.
The links to the resources are
https://www.w3schools.com/
https://www.udemy.com/courses/search/?q=dr+angela+yu&src=sac&kw=angela
https://developer.mozilla.org/en-US/
Conclusion
it is the best way to manage your time by allocating to learn new skills. instead of scrolling on social networks, it is far better to use that time to learn new skills. I felt good to start my coding journey learning web development. As HTML is easy to learn, it will motivate you to learn further. I hope this post will help to learn HTML and inspire you to acquire a new skill which will add value to your life
