Amena ๐Ÿ’ซ
Amena

Follow

Amena

Follow
HTML for Beginners! Part 4 ๐Ÿ’œ

HTML for Beginners! Part 4 ๐Ÿ’œ

Today we're going to learn about: Links in HTML, Proper structure, Lists in HTML and Checkbox!

Amena ๐Ÿ’ซ's photo
Amena ๐Ÿ’ซ
ยทFeb 25, 2023ยท

3 min read

Play this article

Table of contents

  • Anchor Tags (LINKS in HTML)
  • Proper Structure in HTML
  • Lists In HTML
  • Task ๐Ÿš€

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!

Example:

<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>

OUTPUT:

Hopefully, you understood the concept of creating links!

I want you to write these things and understand!

    <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:

<!DOCTYPE html>
<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 Lists

    <!-- Ordered List -->
    <ol>
        <li>Ludo</li>
        <li>Chess</li>
        <li>Monopoly</li>
        <li>Game of Life</li>
    </ol>

Output: ๐Ÿ‘‡

  • 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 Lists

    <!-- 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...

Task ๐Ÿš€

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! ๐Ÿ˜‰

ย 
Share this