HTML Assignment – 4

Basic Questions

  1. Create a simple webpage with a <header> and <footer>.
  2. Write HTML to display a website title inside the <header>.
  3. Add a <nav> element with 3 links: Home, About, Contact.
  4. Display a paragraph inside the <main> element on a webpage.
  5. Create a page that uses <section> for displaying two different topics.
  6. Use an <article> tag to display a blog post with a heading and a paragraph.
  7. Write HTML to create an <aside> element showing related links.
  8. Insert an image inside a <figure> element with a <figcaption>.
  9. Use <time> tag to represent today’s date in an event description.
  10. Write HTML that displays your contact info using <address>.
  11. Create a webpage with <header>, <main>, and <footer> layout.
  12. Add a <nav> with links that display horizontally.
  13. Display the publication date of an article using <time>.
  14. Create a simple blog page with one <article> inside <main>.
  15. Write HTML to show two images with their captions using <figure> and <figcaption>.
  16. Display the website developer’s email address using <address>.
  17. Draw a rectangle using inline <svg>.
  18. Draw a circle using <svg>.
  19. Draw a line using SVG between two points.
  20. Create a simple <canvas> element with a border.

Intermediate Questions

  1. Create a webpage layout with <header>, <nav>, <main>, <aside>, and <footer>.
  2. Write HTML with multiple <section> elements under <main> to display different categories.
  3. Build a blog post with <article> and show its author info in <address>.
  4. Create a page that uses <header> for navigation and <footer> for copyright.
  5. Use <article> tags to add two different blog posts inside <main>.
  6. Include one <aside> section showing related articles in a blog page.
  7. Display one image with a title using <figure> and <figcaption> inside <section>
  8. Use <time> to mark the date and time of an event (like “Published on 20 August 2025, 5:00 PM”).
  9. Design a company’s contact page using <address> with location, phone, and email.
  10. Write HTML to structure a magazine-like layout using <section> and <article>.
  11. Draw a blue rectangle inside an SVG.
  12. Create an SVG with both a circle and rectangle.
  13. Draw a triangle shape using <polygon> in SVG.
  14. Create an inline SVG with a line connecting two circles.
  15. Make a canvas with a red filled rectangle using JavaScript.
  16. Draw a diagonal line on a canvas from top-left to bottom-right.
  17. Use <canvas> to draw a filled blue circle.
  18. Display multiple shapes (circle, rectangle, line) inside a single <canvas>.
  19. Add an SVG ellipse and style it using fill=”green”.
  20. Write HTML with a <header>, <main>, <aside>, and <footer> plus an inline SVG below the main content.

Advanced Questions

  1. Build a complete semantic webpage layout using <header>, <nav>, <main>, <article>, <aside>, <footer> with actual demo content.
  2. Create a blog webpage with 3 <article> posts, each with <time> and <address> info for the author.
  3. Combine <figure> with image thumbnails, each having captions (like a mini photo gallery).
  4. Design a newspaper layout using <section>, <article>, and <aside> with proper structure.
  5. Draw a sunset scene in SVG (sun = circle, ground = rectangle, rays = lines).
  6. Write JavaScript to draw a house shape on <canvas> (rectangle for house, triangle for roof, square for window).
  7. Use <canvas> to fill two rectangles with linear gradient colors.
  8. Create a small bouncing ball animation using <canvas> and JavaScript.
  9. Build a webpage that has a semantic structure and an inline SVG chart (e.g., bar chart using <rect>).
  10. Create a dashboard page with <header>, <nav>, <main>, <aside>, <footer>, plus an animated <canvas> graph.