HTML for Beginners! Part 4 💜
Today we're going to learn about: Links in HTML, Proper structure, Lists in HTML and Checkbox!
3 min read
Heyy Devs! 👋
Today we're going to learn more and more about HTML...So Let's Dive in! 🏊♂️
Anchor Tags (LINKS in HTML)
Okay, now we'll talk about "<a>" tags means Anchor tags are LINKS!
<a href="https://www.youtube.com">Click here</a>
So, here we have created an "Anchor Tag" and in it, I have written "href" which is used to connect the links and I have linked it to YouTube!!
Let me show the OUTPUT...
OUTPUT of this code: 👇
If we click here then we'll be on YouTube isn't it amazing! 😍
Let's do something fun:
<h2>I want to eat PIZZA let me find the Recipe! 😉</h2> <h3>Let's search in YouTube!! 🙌</h3> <a href="https://www.youtube.com">Click here</a>
Hopefully, you understood the concept of creating links!
I want you to write these things and understand!
Open the link in the new tab
<a href="https://www.youtube.com" target="_blank">Click here</a>
If you want to open this link in the new tab you can use "target_blank"
I know it's weird but it is what it is...
Proper Structure in HTML
As you all know nowadays we use HTML5 which is the latest version of HTML.
So, the proper structure will be:
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
If you use VS code so you can just hit "!" then you will see this whole thing because professionals do like this...
Lists In HTML
So, there are two types of lists: 1. ordered list & 2. unordered list.
The short for the ordered list is: <ol> tag
The short for the unordered list is: <ul> tag
Inside these lists, there are LIST ITEMS: <li> tag
<!-- Ordered List --> <ol> <li>Ludo</li> <li>Chess</li> <li>Monopoly</li> <li>Game of Life</li> </ol>
- The code I have written is so simple and normal*...*
Basically, In the Ordered list, there is a condition and in that condition, it automatically provides the numbers like 1......2.....3.....so on!
<!-- Unordered List --> <ul> <li>Ludo</li> <li>Chess</li> <li>Monopoly</li> <li>Game of Life</li> </ul>
In this code, there is the condition that if we write an Unordered list It will Output like this! 👇
Hopefully, You understood Lists in HTML...
You need to make an Unordered list and Inside it, you need to write your Top 3 favorite Desserts! 🍰.....Best of luck!
My Twitter Account: Twitter
My YouTube Channel: Code Arena
So, this was my Part 4 and thanks for reading
Motivation For Today: Beauty Begins The Moment You Decide To Be Yourself! ❤
Now I'll see you all in my Part 5 which will be the last part in HTML and We're gonna make our Personal Page in HTML...😍
So till then take care and Goodbye! 😉