📘 HTML Syllabus – Cyber Tech Creations

📅 Week 1: Introduction to HTML

Objective: Understand the basics of HTML and structure of web pages.

Day 1: What is HTML? – History, features, tools
Day 2: Structure of an HTML Document – DOCTYPE, html, head, body
Day 3: Headings, Paragraphs, Line breaks, Comments
Day 4: Formatting Tags – bold, italic, sub/sup, etc.
Day 5: Lists – Ordered, Unordered, Description

🔗 Week 2: Links, Images & Media

Objective: Learn how to embed media and create navigational elements.

Day 6: Anchor Tags – href, target, types of links
Day 7: Images – img tag, alt/title, optimization
Day 8: Audio and Video Tags – Basic playback controls
Day 9: Embedding Content – iframe, YouTube
Day 10: Mini Practice Task – Build a small media-rich webpage

📋 Week 3: Tables, Forms & Semantic Tags

Objective: Create interactive and accessible page structures.

Day 11: Tables – Basic structure, rowspan, colspan
Day 12: Forms – input, textarea, button, label
Day 13: Input types – text, password, checkbox, etc.
Day 14: Semantic Tags – header, nav, section, footer
Day 15: Mini Project – Feedback form with table layout

🧠 Week 4: Advanced HTML5 Features

Objective: Explore HTML5 APIs and integration capabilities.

Day 16: HTML5 APIs – Geolocation, LocalStorage
Day 17: SVG & Canvas – Drawing and graphics basics
Day 18: Accessibility Basics – ARIA labels
Day 19: SEO Basics with HTML Tags
Day 20: Quiz + Practice Assignment

🎯 Week 5: Project & Deployment

Objective: Build, polish, and deploy a real-world HTML project.

Day 21–23: HTML Portfolio Website Project – Section-wise development
Day 24: Final Review + Feedback
Day 25: Hosting Project on GitHub or Netlify

Outcome: A complete, hosted portfolio built with pure HTML.

🏆 What Students Will Achieve:

✅ Strong understanding of HTML fundamentals
🌐 Created and deployed live portfolio/project
🛠️ Hands-on experience with semantic tags and HTML5
💼 Resume-ready project and GitHub code
🎓 Certificate of Completion from Cyber Tech Creations

HTML Projects Collection

HTML Projects: Code & Output

Project 1: Personal Information Form

Code

<!DOCTYPE html>
<html>
<head>.
    <title>Personal Information Form</title>
</head>.
<body>.
    <h1>Personal Information Form</h1>.
    <form>.
        <p>.
            <label for="name">Name:</label>.
            <br>.
            <input type="text" id="name" name="name">.
        </p>.
        <p>.
            <label for="email">Email:</label>.
            <br>.
            <input type="email" id="email" name="email">.
        </p>.
        <p>.
            <label for="phone">Phone:</label>.
            <br>.
            <input type="tel" id="phone" name="phone">.
        </p>.
        <p>.
            <label for="address">Address:</label>.
            <br>.
            <input type="text" id="address" name="address">.
        </p>.
        <p>.
            <input type="submit" value="Submit">.
        </p>.
    </form>.
</body>.
</html>.

Output

Project 2: Simple Calculator

Code

<!DOCTYPE html>
<html>.
<head>.
    <title>Simple Calculator</title>.
</head>.
<body>.
    <h1>Simple Calculator</h1>.
    <form>.
        <p>.
            <label for="num1">First Number:</label>.
            <br>.
            <input type="number" id="num1" name="num1">.
        </p>.
        <p>.
            <label for="operator">Operator:</label>.
            <br>.
            <select id="operator" name="operator">.
                <option value="+">+</option>.
                <option value="-"></option>.
                <option value="*"></option>.
                <option value="/"></option>.
            </select>.
        </p>.
        <p>.
            <label for="num2">Second Number:</label>.
            <br>.
            <input type="number" id="num2" name="num2">.
        </p>.
        <p>.
            <input type="submit" value="Calculate">.
        </p>.
    </form>.
</body>.
</html>.

Output

Project 3: To-Do List

Code

<!DOCTYPE html>
<html>.
<head>.
    <title>To-Do List</title>.
</head>.
<body>.
    <h1>To-Do List</h1>.
    <form>.
        <p>.
            <label for="task">Task:</label>.
            <br>.
            <input type="text" id="task" name="task">
        </p>.
        <p>.
            <input type="submit" value="Add Task">.
        </p>.
    </form>.
    <h2>Tasks:</h2>.
    <ul>.
        <li>Buy groceries</li>.
        <li>Call mom</li>.
        <li>Finish project</li>.
    </ul>.
</body>.
</html>.

Output

Tasks:

Buy groceries
Call mom
Finish project

Project 4: Restaurant Menu

Code

<!DOCTYPE html>
<html>.
<head>.
    <title>Restaurant Menu</title>.
</head>.
<body>.
    <h1>Gourmet Bistro - Menu</h1>.
    <h2>Breakfast</h2>.
    <ul>.
        <li>Pancakes - $8.99</li>.
        <li>Omelette - $7.99</li>.
        <li>Smoothie - $6.99</li>.
        <li>Avocado Toast - $9.99</li>.
    </ul>.
    <h2>Lunch</h2>.
    <ul>.
        <li>Salad - $12.99</li>.
        <li>Chicken Sandwich - $10.99</li>.
        <li>Pasta - $14.99</li>.
        <li>Soup - $8.99</li>.
    </ul>.
    <h2>Dinner</h2>.
    <ul>.
        <li>Steak - $24.99</li>.
        <li>Salmon - $22.99</li>.
        <li>Pizza - $18.99</li>.
        <li>Burger - $16.99</li>.
    </ul>.
    <h2>Search Products</h2>.
    <form>.
        <p>.
            <label for="search">Search:</label>.
            <br>.
            <input type="text" id="search" name="search" placeholder="Enter product name">.
            <input type="submit" value="Search">.
        </p>.
    </form>.
</body>.
</html>.

Output

Gourmet Bistro - Menu

Breakfast

Pancakes - $8.99
Omelette - $7.99
Smoothie - $6.99
Avocado Toast - $9.99

Lunch

Salad - $12.99
Chicken Sandwich - $10.99
Pasta - $14.99
Soup - $8.99

Dinner

Steak - $24.99
Salmon - $22.99
Pizza - $18.99
Burger - $16.99

Search Products

Project 5: Weather Information

Code

<!DOCTYPE html>
<html>.
<head>.
    <title>Weather Information</title>.
</head>.
<body>.
    <h1>Weather Information</h1>.
    <form>.
        <p>.
            <label for="city">City:</label>.
            <br>.
            <input type="text" id="city" name="city" placeholder="Enter city name">.
            <input type="submit" value="Get Weather">.
        </p>.
    </form>.
    <h2>Current Weather in New York</h2>.
    <p>Temperature: 72°F</p>.
    <p>Condition: Sunny</p>.
    <p>Humidity: 45%</p>.
    <p>Wind: 5 mph</p>.
</body>.
</html>.

Output

Weather Information

Current Weather in New York

Temperature: 72°F

Condition: Sunny

Humidity: 45%

Wind: 5 mph

Project 6: Book Library

Code

<!DOCTYPE html>
<html>.
<head>.
    <title>Book Library</title>.
</head>.
<body>.
    <h1>Book Library</h1>.
    <h2>Fiction</h2>.
    <ul>.
        <li>To Kill a Mockingbird - Harper Lee</li>.
        <li>1984 - George Orwell</li>.
        <li>The Great Gatsby - F. Scott Fitzgerald</li>.
        <li>Pride and Prejudice - Jane Austen</li>.
    </ul>.
    <h2>Non-Fiction</h2>.
    <ul>.
        <li>Sapiens: A Brief History of Humankind - Yuval Noah Harari</li>.
        <li>The Immortal Life of Henrietta Lacks - Rebecca Skloot</li>.
        <li>Into the Wild - Jon Krakauer</li>.
        <li>The Power of Habit - Charles Duhigg</li>.
    </ul>.
    <h2>Add a Book</h2>.
    <form>.
        <p>
            <label for="title">Title:</label>.
            <br>.
            <input type="text" id="title" name="title">.
        </p>.
        <p>
            <label for="author">Author:</label>.
            <br>.
            <input type="text" id="author" name="author">.
        </p>.
        <p>
            <label for="category">Category:</label>.
            <br>.
            <select id="category" name="category">.
                <option value="fiction">Fiction</option>.
                <option value="non-fiction">Non-Fiction</option>.
                <option value="biography">Biography</option>.
                <option value="science">Science</option>.
            </select>.
        </p>.
        <p>
            <input type="submit" value="Add Book">.
        </p>.
    </form>.
</body>.
</html>.

Output

Book Library

Fiction

To Kill a Mockingbird - Harper Lee
1984 - George Orwell
The Great Gatsby - F. Scott Fitzgerald
Pride and Prejudice - Jane Austen

Non-Fiction

Sapiens: A Brief History of Humankind - Yuval Noah Harari
The Immortal Life of Henrietta Lacks - Rebecca Skloot
Into the Wild - Jon Krakauer
The Power of Habit - Charles Duhigg

Add a Book

Project 7: Personal Resume

Code

<!DOCTYPE html>
<html>.
<head>.
    <title>Personal Resume</title>.
</head>.
<body>.
    <h1>Personal Resume</h1>.
    <h2>Sunny Baibhav</h2>.
    <h3>Front End Developer</h3>.
    <p>Email: info@cybertechcreations.in</p>.
    <p>Phone: +91 6204203593</p>.
    <p>Address: 123 Main St, City, USA</p>.
    <h2>Summary</h2>.
    <p>Experienced Front End Developer with 5+ years of experience in HTML, CSS, and JavaScript. Passionate about creating user-friendly and responsive web applications.</p>.
    <h2>Education</h2>.
    <p>Bachelor of Science in Computer Science</p>.
    <p>University of Technology, 2015-2019</p>.
    <h2>Work Experience</h2>.
    <p><strong>Senior Front End Developer</strong> at Tech Solutions, 2020-Present</p>.
    <p>• Developed responsive websites using HTML, CSS, and JavaScript</p>.
    <p>• Collaborated with designers to implement UI/UX improvements</p>.
    <p><strong>Front End Developer</strong> at Web Creations, 2019-2020</p>.
    <p>• Created and maintained company websites</p>.
    <h2>Skills</h3>.
    <p>HTML5, CSS3, JavaScript, Responsive Design, Git, Bootstrap</p>.
</body>.
</html>.

Output

Personal Resume

John Doe

Front End Developer

Email: john.doe@example.com

Phone: (123) 456-7890

Address: 123 Main St, City, USA

Summary

Experienced Front End Developer with 5+ years of experience in HTML, CSS, and JavaScript. Passionate about creating user-friendly and responsive web applications.

Education

Bachelor of Science in Computer Science

University of Technology, 2015-2019

Work Experience

Senior Front End Developer at Tech Solutions, 2020-Present

• Developed responsive websites using HTML, CSS, and JavaScript

• Collaborated with designers to implement UI/UX improvements

Front End Developer at Web Creations, 2019-2020

• Created and maintained company websites

Skills

HTML5, CSS3, JavaScript, Responsive Design, Git, Bootstrap

Project 8: Training Programs

Code

<!DOCTYPE html>
<html>.
<head>.
    <title>Training Programs</title>.
</head>.
<body>.
    <h1>Training Programs</h1>.
    <h2>45 Days Industrial Training
    <h3>Course: Web Development Fundamentals
    <p>Duration: 45 Days
    <p>Batch Size: 10-15 Students
    <p>Timing: Flexible
    <p>Fee: ₹15,000
    <p>Instructor: Sunny Baibhav
    <p>Experience: 5+ years in web development
    <h2>6-Month Industrial Training
    <h3>Course: Full Stack Development
    <p>Duration: 6 Months
    <p>Batch Size: 15-20 Students
    <p>Timing: Flexible
    <p>Fee: ₹45,000
    <p>Instructor: Manav Sharma
    <p>Experience: 10+ years in full stack development
    <h2>Apply for Training
    <form>.
        <p>
            <label for="name">Name:</label>.
            <br>.
            <input type="text" id="name" name="name">.
        </p>.
        <p>
            <label for="email">Email:</label>.
            <br>.
            <input type="email" id="email" name="email">.
        </p>.
        <p>
            <label for="program">Program:</label>.
            <br>.
            <select id="program" name="program">.
                <option value="45-days">45 Days Industrial Training
                <option value="6-month">6-Month Industrial Training
            </select>.
        </p>.
        <p>
            <input type="submit" value="Apply Now">.
        </p>.
    </form>.
</body>.
</html>.

Output

Training Programs

45 Days Industrial Training

Course: Web Development Fundamentals

Duration: 45 Days

Batch Size: 10-15 Students

Timing: Flexible

Fee: ₹15,000

Instructor: Sunny Baibhav

Experience: 5+ years in web development

6-Month Industrial Training

Course: Full Stack Development

Duration: 6 Months

Batch Size: 15-20 Students

Timing: Flexible

Fee: ₹45,000

Instructor: Manav Sharma

Experience: 10+ years in full stack development

Apply for Training

Project 9: Contact Form with Validation

Code

<!DOCTYPE html>
<html>.
<head>.
    <title>Contact Form with Validation</title>.
</head>.
<body>.
    <h1>Contact Form with Validation</h1>.
    <form>.
        <p>.
            <label for="name">Name:</label>.
            <br>.
            <input type="text" id="name" name="name" required>.
        </p>.
        <p>.
            <label for="email">Email:</label>.
            <br>.
            <input type="email" id="email" name="email" required>.
        </p>.
        <p>.
            <label for="message">Message:</label>.
            <br>.
            <textarea id="message" name="message" rows="4" cols="50" required>.
        </p>.
        <p>.
            <input type="submit" value="Send Message">.
        </p>.
    </form>.
</body>.
</html>.

Output

Contact Form with Validation

Project 10: Recipe Collection

Code

<!DOCTYPE html>
<html>.
<head>.
    <title>Recipe Collection</title>.
</head>.
<body>.
    <h1>Recipe Collection</h1>.
    <h2>Favorite Recipes</h2>.
    <ul>.
        <li>Chocolate Cake - Easy and delicious</li>.
        <li>Spaghetti Bolognese - Classic Italian dish</li>.
        <li>Vegetable Stir Fry - Healthy and quick</li>.
        <li>Pizza - Homemade perfection</li>.
    </ul>.
    <h2>Add a Recipe</h2>.
    <form>.
        <p>.
            <label for="recipe-name">Recipe Name:</label>.
            <br>.
            <input type="text" id="recipe-name" name="recipe-name">.
        </p>.
        <p>.
            <label for="recipe-description">Description:</label>.
            <br>.
            <textarea id="recipe-description" name="recipe-description" rows="4" cols="50">.
        </p>.
        <p>.
            <label for="recipe-category">Category:</label>.
            <br>.
            <select id="recipe-category" name="recipe-category">.
                <option value="breakfast">Breakfast</option>.
                <option value="lunch">Lunch</option>.
                <option value="dinner">Dinner</option>.
                <option value="dessert">Dessert</option>.
            </select>.
        </p>.
        <p>.
            <input type="submit" value="Add Recipe">.
        </p>.
    </form>.
</body>.
</html>.

Output

Recipe Collection

Favorite Recipes

Chocolate Cake - Easy and delicious
Spaghetti Bolognese - Classic Italian dish
Vegetable Stir Fry - Healthy and quick
Pizza - Homemade perfection

Add a Recipe

💡 Most Askable HTML Questions (Practice Set)

1. What is HTML?+

Answer: HTML stands for HyperText Markup Language and is used to create the structure of web pages.

2. What are HTML tags?+

Answer: Tags are predefined keywords like <p>, <a>, used to format content.

3. What is the difference between <br> and <p> tag?+

Answer: <br> breaks a line, <p> starts a new paragraph block.

4. What is an attribute in HTML?+

Answer: Attributes provide additional info about HTML elements (e.g., href in anchor tag).

5. What is the <head> tag used for?+

Answer: It contains metadata like title, CSS links, and SEO content.

6. What does <!DOCTYPE html> do?+

Answer: It defines the HTML version being used (HTML5).

7. How do you insert an image in HTML?+

Answer: Using the <img> tag with src and alt attributes.

8. What is the use of <a> tag?+

Answer: It creates hyperlinks to link one page to another.

9. How can you comment in HTML?+

Answer: By using  syntax.

10. What is semantic HTML?+

Answer: Semantic tags like <article>, <section> convey meaning to both browser and developer.

11. Difference between id and class?+

Answer: ID is unique; class can be used multiple times for styling or scripting.

12. What is a block-level vs inline element?+

Answer: Block elements take full width; inline elements only occupy necessary space.

13. How to create a table in HTML?+

Answer: Using <table>, <tr>, <th>, and <td> tags.

14. What is the use of <iframe>?+

Answer: It embeds another HTML page within the current page.

15. Difference between <span> and <div>?+

Answer: <span> is inline, <div> is block; both are used for layout and styling.

16. What is the use of <form> tag?+

Answer: It is used to collect user input for backend processing.

17. List types of input in HTML5 forms?+

Answer: Text, password, email, number, radio, checkbox, date, file, etc.

18. How do you embed a video in HTML?+

Answer: Using <video> tag with src and controls attribute.

19. What is the role of meta tags?+

Answer: They provide metadata like charset, viewport, SEO info to browsers and search engines.

20. Difference between HTML and HTML5?+

Answer: HTML5 supports multimedia, APIs, and semantic tags; HTML is older version.

21. How to use localStorage with HTML?+

Answer: Use JavaScript's localStorage.setItem and getItem functions inside your HTML page scripts.

22. What are data-* attributes in HTML5?+

Answer: They store extra data private to the page, used with JS.

23. Explain ARIA roles in HTML.+

Answer: ARIA provides accessibility info for screen readers and assistive tools.

24. Can HTML work without CSS?+

Answer: Yes, but without styling. HTML handles structure only.

25. What is lazy loading in HTML5?+

Answer: It delays loading of images/videos using loading="lazy" attribute for better performance.

26. How to create a responsive webpage in HTML?+

Answer: Using meta viewport tag, and CSS media queries.

27. Difference between defer and async in script tags?+

Answer: Defer waits for HTML parsing to complete; async runs immediately when script is downloaded.

28. What is a contenteditable attribute?+

Answer: Makes HTML elements editable directly in browser.

29. How do SVGs work in HTML?+

Answer: Scalable Vector Graphics allow resolution-independent graphics in HTML using <svg>.

30. What is the use of <template> tag?+

Answer: It holds client-side content not rendered until you call it with JavaScript.

HTML Complete Roadmap

📘 HTML Syllabus – Cyber Tech Creations

📅 Week 1: Introduction to HTML

🔗 Week 2: Links, Images & Media

📋 Week 3: Tables, Forms & Semantic Tags

🧠 Week 4: Advanced HTML5 Features

🎯 Week 5: Project & Deployment

🏆 What Students Will Achieve:

HTML Projects: Code & Output

Project 1: Personal Information Form

Code

Output

Project 2: Simple Calculator

Code

Output

Project 3: To-Do List

Code

Output

Tasks:

Project 4: Restaurant Menu

Code

Output

Gourmet Bistro - Menu

Breakfast

Lunch

Dinner

Search Products

Project 5: Weather Information

Code

Output

Weather Information

Current Weather in New York

Project 6: Book Library

Code

Output

Book Library

Fiction

Non-Fiction

Add a Book

Project 7: Personal Resume

Code

Output

Personal Resume

John Doe

Front End Developer

Summary

Education

Work Experience

Skills

Project 8: Training Programs

Code

Output

Training Programs

45 Days Industrial Training

Course: Web Development Fundamentals

6-Month Industrial Training

Course: Full Stack Development

Apply for Training

Project 9: Contact Form with Validation

Code

Output

Contact Form with Validation

Project 10: Recipe Collection

Code

Output

Recipe Collection

Favorite Recipes

Add a Recipe

Comany Information

Our Services

Our Services