NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 3HTML Foundation2 Hours Practical
Push to GitHub to Complete

HTML Links & Images

Hyperlinks connect documents across the World Wide Web, creating the hyperlinked web network. Images visually communicate data, but require accessible descriptions via alt attributes.

Interactive Learning Roadmap

Day 3 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Create hyperlinks with the anchor tag <a> and `href` attribute.
✔Understand absolute URLs vs relative paths.
✔Open links in new tabs safely using `target="_blank"` and `rel="noopener noreferrer"`.
✔Embed images with `<img>`, `src`, `alt`, `width`, and `height`.
Day 3 MasterclassHTML Foundation

HTML Links & Images — Comprehensive Practical Guide

Webpages ko hyperlinks se jodein aur images ko accessible banayein.

Real-World Purpose Aur Zaroorat

Hyperlinks ki wajah se hi internet ko 'Web' kaha jata hai—har page doosre page se ek click se jud jata hai.

Absolute URLs specify full protocol & domain (e.g., `https://google.com`).
Relative URLs point to files inside your project directory (e.g., `about.html` or `images/logo.png`).
The `alt` attribute is MANDATORY for images so screen readers can describe the image if it fails to load.
Never omit `alt` or write generic words like "image". Describe the content concisely.
Dimaag Mein Bithane Ka Model

"An `href` is like a GPS coordinate directing the browser to another building, while `src` is like ordering a picture frame to be placed in your room."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.
Browser Links Aur Images Ko Kaise Resolve Karta Hai
1Phase 1

Anchor Tag Se Navigation

User ke click karte hi browser naye address pe navigate karta hai.

2Phase 2

Security Protection: Tab Nabbing Se Bachna

Jab bhi target='_blank' use karein, tab nabbing hacking se bachne ke liye rel='noopener noreferrer' zaroori hai.

3Phase 3

Accessible Image Embedding

Image download hone tak alt text fallback dikhta hai aur blind users ke screen readers ko image describe karta hai.

Interactive Tag & Attribute Inspector

Kisi bhi tag par tap karein aur uske mandatory attributes, code aur live preview dekhein:

<a href='...'>

Anchor / HyperlinkInline Element

Clickable link banata hai jisse user doosre page, website ya page ke kisi section pe jump kar sake.

Core Attributes Checklist
hrefREQUIREDDestination web address ya page anchor.
targetOPTIONALNaye tab mein kholne ke liye '_blank' lagayein.
relOPTIONALSecurity ke liye 'noopener noreferrer' lagayein.
IGNOU BCA Exam & Viva SecretSame page pe scroll karne ke liye href='#contact' aur destination tag pe id='contact' lagaya jata hai.
Standard Syntax Snippet
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  Visit My GitHub Portfolio
</a>
Common Junior Dev Pitfalltarget='_blank' ke sath rel='noopener' na lagana security vulnerability create karta hai.
Top 3 Coding Mistakes (Aur Unhe Fix Kaise Karein)

1Case-Sensitive Image Filename Error

Windows pe photo.png aur Photo.PNG chal jata hai, par GitHub aur Linux servers case-sensitive hote hain. Exact match na hone par 404 error aata hai.

❌ Don't Do This
<!-- ❌ WRONG: File on disk is 'Profile.JPG' -->
<img src="profile.jpg" alt="Profile">
✅ Production Standard
<!-- ✅ CORRECT: Exact case matching -->
<img src="Profile.JPG" alt="Profile">
University Practical Exam & Viva Q&A

Lab exam mein external examiners aamtaur par ye sawaal puchte hain. Click karke model answer dekhein:

Q1.`<img>` tag par `alt` attribute kyu mandatory hota hai?

👨‍🏫3. Teacher Demonstration Code

Notice the secure attributes used when opening external links.

Links, New Tabs & Responsive Imageshtml
<section>
  <h2>Explore Developer Resources</h2>
  <p>
    Visit the official 
    <a href="https://nextsem.online" target="_blank" rel="noopener noreferrer">
      NextSem Academy Portal
    </a>
  </p>
  <img 
    src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500" 
    alt="Developer working on laptop with code editor open"
    width="500" 
    height="300"
  >
</section>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 3 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Add an Image with alt Attribute

Add an <img> tag with a valid `src` and a descriptive `alt` attribute.

⏳ WAITING
Task 2Add External Link with target="_blank"

Add an <a> tag linking to "https://github.com" with target="_blank".

⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh58 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: Security Vulnerability in External Links

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
<a href="https://untrusted-external-site.com" target="_blank">Click Here</a>
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Opening external sites in target="_blank" without rel="noopener noreferrer" allows the destination page to access window.opener and potentially manipulate or phish your original tab (Reverse Tabnabbing).

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 index.html

Homework Task: Multi-Page BCA Mini Site

  • •Create three HTML files in one directory: `index.html`, `courses.html`, and `contact.html`.
  • •Add navigation links on all three pages linking to each other using relative paths (`href="courses.html"`).
  • •Place a computer image on the homepage with width="400" and an accurate alt tag.
  • •Verify that clicking each navigation link transitions smoothly between the pages.
Submission Evaluation Criteria: All relative internal links must navigate smoothly without 404 errors.
Exact Assignment Solution Code: index.html

Open Visual Studio Code on your PC (code .), create index.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Student Portal - Day 3 Multi-Page Website</title>
</head>
<body>
  <header>
    <h1>Nextsem BCA Practical Learning Hub</h1>
    <nav>
      <strong>Navigation: </strong>
      <a href="index.html">Home</a> |
      <a href="courses.html">Course Catalog</a> |
      <a href="contact.html">Contact Faculty</a> |
      <a href="https://github.com" target="_blank" rel="noopener noreferrer">Official GitHub ↗</a>
    </nav>
  </header>
  <hr>

  <main>
    <h2>Welcome to First Year Computer Science Practical</h2>
    <p>This multi-page mini site demonstrates internal relative links, secure external hyperlinks with <code>rel="noopener noreferrer"</code>, and accessible image integration.</p>
    
    <figure>
      <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600" alt="Student workstation setup with mechanical keyboard and code editor" width="400">
      <figcaption><small>Figure 1: Hands-on developer workstation setup.</small></figcaption>
    </figure>
  </main>
  <hr>

  <footer>
    <p>&copy; 2026 IGNOU BCA Semester 1 Practical Workshop</p>
  </footer>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

Why is the `alt` attribute strictly mandatory on an <img> tag according to web standards?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
git add .
Stage all modified files and new assets for commit
2$
git commit -m "Day 03: Hyperlinks, image embedding and secure target blank"
Commit staged changes with a descriptive message
3$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 3 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-03/ or bca-day-3/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 3
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 3
4$
mkdir day-03
Create a new project folder (day-03)
5$
cd day-03
Change working directory to day-03
6$
# 3. Create your code file: index.html
7$
# (Write your Day 3 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 03: HTML Links & Images"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-03/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/✨ CREATE THIS FOLDER FOR TODAY (Day 3)
└──index.htmlMust contain: <a href="...">, target="_blank", <img src="..." alt="...">
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 3 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 2: HTML Headings, Paragraphs & Text Formatting first.

Complete Day 2 First
Day 2: HTML Headings, Paragraphs & Text Formatting
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal