Guest Mode:Sign in with Google to permanently link this practical to your student record.

BCA Student Stories & UpdatesLive

Live GitHub Pages

You

Your StorySign in & share

Er. ManojActive nowPages

Day 2HTML Foundation2 Hours Practical

Push to GitHub to Complete

HTML Headings, Paragraphs & Text Formatting

Text is the core vessel of information on the web. Search engines and screen readers rely on heading hierarchy (h1 to h6) to understand content priority.

Interactive Learning Roadmap

Day 2 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Master heading hierarchy from <h1> through <h6>.

✔Understand typography elements: <strong>, <em>, <mark>, <del>, <ins>, <small>.

✔Use line breaks (<br>) and horizontal dividers (<hr>) correctly without breaking structure.

✔Structure an informative article with clear hierarchy.

Day 2 MasterclassHTML Foundation

HTML Headings, Paragraphs & Text Formatting — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

Text is the core vessel of information on the web. Search engines and screen readers rely on heading hierarchy (h1 to h6) to understand content priority.

A webpage should only have ONE <h1> tag representing the primary page topic.

Never use headings simply to make text large; use CSS for sizing.

Use <strong> for semantic importance (renders bold) and <em> for semantic emphasis (renders italic).

<hr> represents a thematic break in content, while <br> forces a line break.

Dimaag Mein Bithane Ka Model

"Think of <h1> as a book title, <h2> as chapter names, and <h3> as sub-sections within that chapter."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

Notice how semantic tags provide meaning to both human readers and search engines.

Semantic Heading & Text Formatting Demohtml

<article>
  <h1>Introduction to BCA Computer Science</h1>
  <h2>Core Pillars of the Program</h2>
  <p>Computer applications require <strong>strong logic</strong> and <em>daily consistency</em>.</p>
  <hr>
  <h3>Key Focus Areas:</h3>
  <p>Students must master <mark>practical programming</mark> rather than pure memorization.</p>
  <p><small>NextSem Academy © 2026 Academic Syllabus</small></p>
</article>

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 2 Practical Task Test Studio

Test Score:0 / 2 Passed

1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests

Task 1Add Single <h1> Title

Add an <h1> with the text "Why I Chose BCA".

⏳ WAITING

Task 2Use <strong> and <em> Inside Paragraph

Add a <p> tag that contains both <strong> and <em> tags.

⏳ WAITING

2. Type HTML & CSS Code:index.html

index.html

⚡ Real-Time Testing Active

Tab inserts 2 spaces • Live DOM refresh73 chars

Live Browser Output:

🔒 http://localhost:5500/index.html

Live

Renders live HTML & CSS typed on the left.

Interactive Bug Detective

Spot the Bug: Broken Tag Nesting

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

Click any code line

⚠️ Broken Code Inspector

Tap buggy line

<p>This is a <strong>very important <em>point</p></em></strong>

Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Tags must be closed in reverse order of how they were opened (LIFO - Last In, First Out). The <em> and <strong> were closed after closing the <p> tag!

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

📝Independent Practice: Assignment

📄 biography.html

Homework Task: Tech Biography Page

•Create a page about Ada Lovelace or Alan Turing.
•Use an <h1> for the person’s name.
•Use <h2> for their Early Life, Major Achievements, and Legacy.
•Use <strong> for significant dates and inventions.
•Add a thematic divider (<hr>) before the footer.

Submission Evaluation Criteria: Inspect your heading structure using the Chrome accessibility tree or DevTools.

Exact Assignment Solution Code: biography.html

Open Visual Studio Code on your PC (code .), create biography.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>Ada Lovelace - Tech Biography</title>
</head>
<body>
  <h1>Ada Lovelace</h1>
  <p>The world's first computer programmer, celebrated for her foundational insights into Charles Babbage’s mechanical computer.</p>

  <h2>Early Life</h2>
  <p>Born on <strong>10 December 1815</strong> in London, Ada demonstrated exceptional mathematical talent from early childhood under private tutoring.</p>

  <h2>Major Achievements</h2>
  <p>In <strong>1843</strong>, she translated Luigi Menabrea's memoir on Babbage's <em>Analytical Engine</em>, appending extensive personal notes containing the world's first published machine algorithm.</p>

  <h2>Legacy</h2>
  <p>Her visionary realization that computers could manipulate symbols beyond basic arithmetic laid the philosophical foundation for <strong>modern computer science</strong>.</p>

  <hr>
  <footer>
    <p><small>&copy; 2026 BCA Practical Portfolio - Day 2 Semantic Text Formatting</small></p>
  </footer>
</body>
</html>

Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What is the semantic difference between <b> and <strong> in HTML5?

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

Target Repo: html-css-projects

Windows 11 Terminal / VS Code

mainhtml-css-projects

~/html-css-projects

git add .

Stage all modified files and new assets for commit

git commit -m "Day 02: Heading hierarchy and semantic text formatting"

Commit staged changes with a descriptive message

git push origin main

Push local commits directly to your remote GitHub repository

⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ 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 2 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-02/ or bca-day-2/

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 2

mainhtml-css-projects

# 1. Enter your repository directory

cd html-css-projects

Change working directory to html-css-projects

# 2. Create the exact folder for Day 2

mkdir day-02

Create a new project folder (day-02)

cd day-02

Change working directory to day-02

# 3. Create your code file: index.html

# (Write your Day 2 homework code inside index.html)

# 4. Save, stage, commit and push to GitHub:

git add .

Stage all modified files and new assets for commit

10$

git commit -m "Day 02: HTML Headings, Paragraphs & Text Formatting"

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 + Vor right-click in Windows Terminal / VS Code✨ 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-02/ 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— HTML5 Boilerplate & First Webpage

└──index.html

day-02/✨ CREATE THIS FOLDER FOR TODAY (Day 2)— Heading Hierarchy & Text Formatting

└──index.htmlMust contain: <h1>, <h2>, <h3>, <strong>

Sequential Progression Enforced

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

Complete Day 1 First

Day 1: HTML Setup & First Webpage

Curriculum & Practical Systems Authored by Er. Manoj Kumar

NextSem Academy • BCA Practical Learning Portal