🚀 𝗪𝗵𝗶𝗰𝗵 𝗧𝗲𝗰𝗵 𝗦𝗸𝗶𝗹𝗹 𝗪𝗶𝗹𝗹 𝗬𝗼𝘂 𝗠𝗮𝘀𝘁𝗲𝗿 𝗶𝗻 𝟮𝟬𝟮𝟲?

Want to build apps, uncover insights, or create AI solutions? Explore certification courses that match your career goals! 🎯

💻 𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁
👉 https://pdlink.in/3SuUeuD

📊 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰𝘀
👉 https://pdlink.in/45vk5ph

💫𝗔𝗜 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴
👉 https://pdlink.in/4fWJVID

🔥 Choose your path, sharpen your skills, and take the next step towards your tech career!

📌 Save this post & share it with a friend planning to upskill.

🌐 Web Development Roadmap — Part 16

HTML Links — Tag

Links are one of the most important parts of the web. They allow users to move from one page or website to another.

1. Creating a Link

HTML uses the <a> (anchor) element to create links.

<a href="https://www.google.com">Visit Google</a>

The browser displays:

Visit Google

When the user clicks it, the browser navigates to the specified URL.

2. The href Attribute

href stands for Hypertext Reference.

<a href="https://example.com">Visit Website</a>

Here:

<a> → Creates the link

href → Specifies where the link goes

URL → Destination

Text → What the user clicks

3. Linking to Another Page

Suppose your project contains:

my-website/
├── index.html
├── about.html
└── contact.html

From index.html:

<a href="about.html">About Me</a>

<a href="contact.html">Contact</a>

These are called relative links because they point to files within your website.

4. Linking to Another Website

You can also link to an external website:

<a href="https://www.example.com">
    Visit Example
</a>

The complete URL is used for an external destination.

5. Opening a Link in a New Tab

You can use target="_blank":

<a href="https://www.example.com" target="_blank">
    Visit Website
</a>

This tells the browser to open the destination in a new browsing context, commonly a new tab.

For external links, it's also good practice to use:

<a
    href="https://www.example.com"
    target="_blank"
    rel="noopener noreferrer">
    Visit Website
</a>

6. Email Links

You can create a link that opens the user's email application:

<a href="mailto:hello@example.com">
    Send Email
</a>

7. Telephone Links

You can create a clickable phone link:

<a href="tel:+911234567890">
    Call Us
</a>

This is especially useful on mobile websites.

8. Linking to a Section on the Same Page

You can jump to a specific section using an id.

<a href="#contact">Go to Contact</a>

<h2 id="contact">Contact Me</h2>

The flow is:

Click "Go to Contact"

↓

Find id="contact"

↓

Jump to that section

9. Navigation Menu Example

A simple website navigation could look like:

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="projects.html">Projects</a>
    <a href="contact.html">Contact</a>
</nav>

This creates the foundation of a website's navigation.

10. Link vs Button

This is important.

Use a link when the user is going somewhere:

<a href="about.html">About Me</a>

Use a button when the user is performing an action:

<button>Submit</button>

For example:

Go to Profile → <a>

Submit Form → <button>

Open Article → <a>

Delete Account → <button>

🧠 Remember

<a>

↓

Creates a link

href

↓

Specifies destination

target="_blank"

↓

Opens in a new browsing context

id

↓

Can create a destination within the same page

Key Takeaway

The <a> element connects the web together.

Page A

↓

<a href="page-b.html">

↓

Page B

Without links, navigating between webpages would be much harder.

Double Tap ❤️ For More

𝗧𝗢𝗣 𝗙𝗥𝗘𝗘 𝗖𝗢𝗨𝗥𝗦𝗘𝗦 𝗧𝗢 𝗕𝗢𝗢𝗦𝗧 𝗬𝗢𝗨𝗥 𝗦𝗞𝗜𝗟𝗟𝗦 𝗜𝗡 𝟮𝟬𝟮𝟲!

Explore FREE online learning resources to develop in-demand skills and improve your career opportunities!

🎓 Why Explore These Courses?
✅ Learn valuable professional skills
✅ Improve your resume
✅ Build practical knowledge
✅ Learn at your own pace

𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝗙𝗥𝗘𝗘 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 𝗛𝗲𝗿𝗲👇

https://pdlink.in/3VBdt6V

💡 Learn New Skills → Build Confidence → Unlock Career Opportunities!

🌐 Web Development Roadmap — Part 17

HTML Images — <img> Tag

Images make webpages more visual and engaging. HTML provides the <img> element to display images.

1. Adding an Image

<img src="photo.jpg" alt="A beautiful landscape">

Unlike elements such as <p>, <img> does not need a closing tag.

2. The src Attribute

src stands for source.

It tells the browser where the image is located.

<img src="images/profile.jpg" alt="Profile photo">

The browser follows the path:

HTML
 ↓
src="images/profile.jpg"
 ↓
images folder
 ↓
http://profile.jpg
 ↓
Display image

3. The alt Attribute

alt provides alternative text describing the image.

<img src="profile.jpg" alt="Profile photo">

It is important for accessibility and can also be displayed if the image cannot be loaded.

A good alt describes the actual image:

<img src="dog.jpg" alt="Golden retriever sitting in a park">

Avoid unnecessary descriptions such as:

alt="image"

4. Images Inside Folders

Suppose your project looks like:

my-website/
├── http://index.html
├── http://style.css
└── images/
    ├── http://logo.png
    └── http://profile.jpg

You can write:

<img src="images/logo.png" alt="Company logo">

5. Image Dimensions

You can specify dimensions using width and height attributes:

<img
    src="profile.jpg"
    alt="Profile photo"
    width="300"
    height="300">

However, modern websites commonly use CSS to control presentation and responsive sizing.

6. Absolute vs Relative Image Paths

Relative path:

<img src="images/photo.jpg" alt="Photo">

This refers to a file within your project.

An external image can use a full URL:

<img
    src="https://example.com/photo.jpg"
    alt="Example photo">

For real projects, images are often hosted as part of your application or through an image/CDN service.

7. Images as Links

You can place an image inside an anchor element:

<a href="https://example.com">
    <img src="logo.png" alt="Example website">
</a>

Now clicking the image follows the link.

8. Decorative Images

Not every image provides meaningful information.

For a purely decorative image, an empty alt is appropriate:

<img src="decorative-line.png" alt="">

This tells assistive technologies that the image can be ignored.

9. Common Image Formats

You will commonly encounter:

JPEG / JPG → Photos
PNG → Transparency and graphics
SVG → Logos and scalable graphics
WebP → Modern web images
AVIF → Modern, highly compressed images
GIF → Simple animations

The appropriate format depends on the type of image and performance requirements.

10. Complete Example

<!DOCTYPE html>

<html>
<head>
    <title>My Portfolio</title>
</head>

<body>

    <h1>My Portfolio</h1>

    <img
        src="images/profile.jpg"
        alt="Profile photo"
        width="300"
        height="300">

    <h2>My Projects</h2>

    <img
        src="images/project.png"
        alt="Screenshot of my web development project">

</body>
</html>

🧠 Remember

<img>
  ↓
Displays an image

src
  ↓
Where the image comes from

alt
  ↓
Alternative description

width / height
  ↓
Image dimensions

Key Takeaway

The basic image structure is:

<img src="image.jpg" alt="Description of image">

The two most important attributes to remember are:

src → image location
alt → meaningful alternative text

Double Tap ❤️ For Part-18

🌐 Web Development Roadmap — Part 18

HTML Lists

Lists are used whenever information needs to be presented as a group of related items.

1. Unordered List

An unordered list displays items with bullets.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

It produces:

• HTML

• CSS

• JavaScript

<ul> means unordered list.

2. List Item

Each item inside a list uses <li>.

<li>HTML</li>

Think of it as:

<ul> → List container

↓

<li> → Individual item

3. Ordered List

An ordered list displays items in a sequence, usually using numbers.

<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

It produces:

1. Learn HTML

2. Learn CSS

3. Learn JavaScript

<ol> means ordered list.

4. When to Use Which?

Use <ul> when order doesn't matter:

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

Use <ol> when order or sequence matters:

<ol>
    <li>Create an account</li>
    <li>Verify your email</li>
    <li>Log in</li>
</ol>

5. Nested Lists

A list can contain another list.

<ul>
    <li>
        Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>
        Backend
        <ul>
            <li>Node.js</li>
            <li>Express</li>
        </ul>
    </li>
</ul>

The structure becomes:

• Frontend

• HTML

• CSS

•

JavaScript

•

Backend

• Node.js

• Express

6. Lists in Navigation

Lists are commonly used to structure navigation menus.

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

CSS can later transform this into a horizontal navigation bar.

7. Lists in Real Websites

Lists are useful for many things:

• Shopping items

• Features

• Navigation menus

• Steps

• Skills

• Categories

• Search results

• Product specifications

For example:

<h2>My Skills</h2>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>React</li>
</ul>

8. Important Rule

<li> should normally be used as a child of a list such as <ul> or <ol>.

Good:

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

Not appropriate:

<li>HTML</li>
<li>CSS</li>

🧠 Remember

<ul> → Unordered list → Bullets

<ol> → Ordered list → Numbers/sequence

<li> → List item → Individual item

Key Takeaway

<ul>
   ↓
Unordered group
   ↓
<li> Item
<li> Item
<li> Item

and

<ol>
   ↓
Ordered group
   ↓
<li> Step 1
<li> Step 2
<li> Step 3

Lists are simple, but they are fundamental to creating well-structured HTML content.

Double Tap ❤️ For More

𝗗𝗮𝘁𝗮 𝘀𝗰𝗶𝗲𝗻𝗰𝗲 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗪𝗶𝘁𝗵 𝗔𝗜😍

Future Ready Data Science and AI Skills You Build

->Build Python, Machine Learning, and AI Skills
->Get Mentored by Industry Experts
->Practice with Mock Interviews
->Ace Your Placements & Land Dream Tech Job

🤝 500+ Partner Companies |🎓 2000+ Students Placed

🔗 𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗡𝗼𝘄 👇 :-

https://pdlink.in/47pezFz

📲 Save & Share with Friends Preparing for Data Science & AI Jobs!