Assignments Of Class 2 Basic Structure of an HTML Document
Assignment 1: Create a Simple HTML Document
Objective: Reinforce
understanding of the basic HTML document structure and essential tags.
Instructions:
- Create
an HTML file named basic_structure.html.
- Set
the document type to HTML5 using <!DOCTYPE html>.
- Add
the necessary HTML structure:
- <html>
tag to enclose the entire document.
- <head>
section with a <title> tag. Set the title to "My Simple
Webpage."
- <meta
charset="UTF-8"> tag inside the <head> section.
- <body>
section where the visible content will be placed.
- Inside
the <body> section:
- Add
an <h1> heading with the text "Welcome to My Simple
Webpage."
- Write
two paragraphs of text (you can use placeholder text or write about
yourself).
- Include
a line break (<br>) in the second paragraph.
- Add
a horizontal line (<hr>) below the paragraphs.
- Add
an <h2> heading with the text "My Interests."
- Add
another paragraph describing your interests.
Submission:
- Save
the file and submit it as basic_structure.html.
Answer:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Simple Webpage</title> </head> <body>
<h1>Welcome to My Simple Webpage</h1>
<p>This is the first paragraph of text. You can write
about yourself or use placeholder text here to fill up space.</p>
<p>This is the second paragraph of text. You can
write more about yourself or use additional placeholder text.<br>Here
is a line break within the paragraph to separate two sentences.</p> <hr> <h2>My
Interests</h2> <p>In this
paragraph, describe your interests. You can mention hobbies, activities, or
topics that you are passionate about.</p> </body> </html> Explanation: <!DOCTYPE html>: This
declaration defines the document type and version of HTML (HTML5). <html> tag: The root
element that encloses the entire HTML document. <head> section: Contains
meta-information about the document. <title> tag: Sets the
title of the webpage, which appears in the browser tab. <meta
charset="UTF-8">: Specifies the character encoding for the
document, ensuring proper display of text. <body> section: Contains
the visible content of the webpage. <h1> tag: The main
heading of the page. <p> tags: Paragraphs for
text content. <br> tag: A line break
within a paragraph. <hr> tag: A horizontal
line used to visually separate sections. <h2> tag: A secondary
heading for the "My Interests" section. |
Output:
Assignment
2: Exploring Heading Tags
Objective: Practice using
different heading tags and understand their hierarchy.
Instructions:
- Create
an HTML file named heading_tags.html.
- Set
up the basic HTML structure as learned in class.
- In
the <body> section:
- Add
an <h1> heading with the text "Main Heading."
- Below
that, add an <h2> heading with the text "Subheading Level
1."
- Add
an <h3> heading with the text "Subheading Level 2" under
the <h2> heading.
- Continue
adding headings down to <h6>, each with appropriate text indicating
their level.
- Add
a short paragraph under each heading describing the purpose of that
heading level.
Submission:
- Save
the file and submit it as heading_tags.html.
Answer:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exploring Heading Tags</title> </head> <body>
<h1>Main Heading</h1> <p>The
<code><h1></code> tag is used for the most
important heading on the page. It represents the main topic or title of the
content.</p>
<h2>Subheading Level 1</h2> <p>The
<code><h2></code> tag is used for the first level
of subheadings, typically for major sections within the main topic.</p>
<h3>Subheading Level 2</h3> <p>The
<code><h3></code> tag is used for the second level
of subheadings, often for subsections within a major section.</p>
<h4>Subheading Level 3</h4> <p>The
<code><h4></code> tag is used for the third level
of subheadings, usually for smaller subsections within a secondary
section.</p> <h5>Subheading
Level 4</h5> <p>The
<code><h5></code> tag is used for the fourth level
of subheadings, often for detailed or specific subsections.</p>
<h6>Subheading Level 5</h6> <p>The
<code><h6></code> tag is used for the least important
subheadings, often for minor details or footnotes.</p> </body> </html> Explanation: <!DOCTYPE html>: Declares
the document as HTML5. <html> tag: The root
element that wraps the entire HTML document. <head> section: Contains
meta-information about the document, including the title. <title> tag: Sets the
title of the webpage. <meta
charset="UTF-8">: Ensures that the document uses UTF-8 character
encoding. <body> section: Contains
the visible content of the webpage. <h1> to <h6> tags:
These tags represent different levels of headings, with <h1> being the
most important and <h6> being the least. <p> tags: Each heading is
followed by a paragraph explaining the purpose of that heading level. Submission: Save the file as
heading_tags.html and submit it as required. |
Assignment
3: Creating a Simple Biography Page
Objective: Apply knowledge of paragraphs, line breaks, and horizontal lines
in a practical context.
Instructions:
- Create
an HTML file named biography.html.
- Set
up the basic HTML structure.
- In the
<body> section:
- Add
an <h1> heading with your name.
- Write
a short paragraph introducing yourself.
- Add
a line break, then write another paragraph about your hobbies.
- Insert
a horizontal line to separate sections.
- Add
an <h2> heading with the text "Education."
- Write
a paragraph describing your education background.
- Add
another horizontal line and an <h2> heading with the text
"Goals."
- Write
a paragraph outlining your future goals.
Submission:
- Save
the file and submit it as biography.html.
Answer:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Biography Page</title> </head> <body>
<h1>Your Name</h1>
<p>Hello! My name is [Your Name]. I am excited to share a little bit
about myself with you.</p> <p>I enjoy
several hobbies that keep me engaged and entertained. These include [list
your hobbies, e.g., reading, hiking, playing sports, etc.].</p> <hr> <h2>Education</h2> <p>I
have completed my education in [your educational background, e.g., Bachelor's
degree in Computer Science]. My academic journey has provided me with a
strong foundation in [mention key subjects or areas of study].</p> <hr>
<h2>Goals</h2>
<p>Looking ahead, my goals include [outline your future goals, e.g.,
advancing my career in web development, continuing my education, traveling
the world, etc.]. I am committed to working hard and making these dreams a
reality.</p> </body> </html> Explanation: <!DOCTYPE html>: Declares
that the document is an HTML5 document. <html> tag: The root
element that contains the entire HTML document. <head> section: Contains
meta-information about the document, such as the character set and the title. <title> tag: Sets the
title of the webpage. <meta
charset="UTF-8">: Specifies the character encoding to ensure
proper display of the text. <body> section: Contains
the visible content of the webpage. <h1> tag: The main
heading of the page, which includes your name. <p> tags: Paragraphs of
text introducing yourself, describing your hobbies, education, and goals. <br> tag: A line break to
separate text within a paragraph. <hr> tag: A horizontal
line to visually separate sections of the content. <h2> tags: Subheadings
for the "Education" and "Goals" sections.
|
Assignment
4: Custom Webpage Design
Objective: Encourage creativity
while ensuring the correct use of basic HTML tags.
Instructions:
- Create
an HTML file named custom_webpage.html.
- Set
up the basic HTML structure.
- In
the <body> section:
- Choose
a topic of your interest (e.g., your favorite hobby, a book review, a
travel experience).
- Use
at least one <h1> tag, one <h2> tag, and multiple paragraphs
to create a webpage about your chosen topic.
- Include
line breaks where necessary.
- Use
a horizontal line to divide different sections of your content.
Submission:
- Save
the file and submit it as custom_webpage.html.
Answer:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Webpage - My Favorite Hobby</title> </head> <body> <h1>My
Favorite Hobby: Photography</h1>
<p>Photography is a passion that allows me to capture the beauty of the
world around me. Whether it's a breathtaking landscape, a candid moment, or a
stunning portrait, photography helps me express my creativity and see the
world from different perspectives.</p> <p>I started
exploring photography a few years ago and have since developed a deep
appreciation for the art of capturing moments. The joy of finding the perfect
angle, lighting, and composition is incredibly fulfilling.</p> <hr> <h2>Why I
Love Photography</h2>
<p>Photography allows me to tell stories through images. Each
photograph has a unique story behind it, whether it's the emotions captured
in a portrait or the tranquility of a sunset. I love how a single image can
evoke powerful emotions and memories.</p>
<p>The ability to freeze a moment in time and preserve it forever is
what makes photography so special to me. It enables me to look back on my
experiences and relive them through the images I’ve captured.</p> <br>
<p>Photography has also opened my eyes to the small details in life
that often go unnoticed. From the intricate patterns on a flower petal to the
expressions on people's faces, photography encourages me to appreciate the
little things.</p> <hr> <h2>My
Photography Journey</h2> <p>My
journey into photography began with a simple point-and-shoot camera. Over
time, I upgraded to a DSLR and started experimenting with different
techniques and styles. I’ve learned about exposure, aperture, and shutter
speed, and how to use them creatively to achieve the desired effect in my
photos.</p> <p>While I
still have much to learn, I enjoy the process of growing as a photographer.
Each new experience teaches me something new, and I look forward to
continuing this journey for years to come.</p> </body> </html> Explanation: <!DOCTYPE html>: Declares
the document as HTML5. <html> tag: The root
element containing the entire HTML document. <head> section: Contains
meta-information about the document, such as the character encoding and
title. <title> tag: Sets the
title of the webpage. <meta
charset="UTF-8">: Ensures the correct display of text. <body> section: Contains
the visible content of the webpage. <h1> tag: The main
heading of the page, which introduces the topic. <p> tags: Multiple
paragraphs describing the chosen topic in detail. <hr> tags: Horizontal
lines used to divide different sections of the content. <h2> tags: Subheadings to
organize the content into sections. |
Assignment
5:
Build
a Personal Portfolio Page
Objective: Create a basic personal portfolio webpage to showcase your
background and skills using the HTML structure learned.
Instructions:
- Create
an HTML file named portfolio.html.
- Set
up the basic HTML structure.
- In
the <body> section:
- Add
an <h1> heading with your name.
- Add
a horizontal line (<hr>).
- Create
an <h2> heading with the text "About Me."
- Write
a paragraph introducing yourself, your background, and your interests.
- Add
an <h2> heading with the text "Skills."
- List
your skills in separate paragraphs, using line breaks (<br>) to
separate different skills within the same paragraph.
- Add
an <h2> heading with the text "Contact Information."
- Write
a paragraph that includes your email address and any other contact
details you wish to share.
- End
with a horizontal line (<hr>).
Submission:
- Save
the file and submit it as portfolio.html.
Answer:
|
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Portfolio</title> </head> <body>
<h1>John Doe</h1> <hr>
<h2>About Me</h2>
<p>Hello! My name is John Doe. I am a passionate web developer with a
background in computer science. I enjoy creating innovative solutions and
learning new technologies. In my free time, I love exploring new places,
reading science fiction, and experimenting with new recipes in the kitchen.</p>
<h2>Skills</h2> <p>
Web Development<br>
- HTML, CSS, JavaScript<br>
- Front-end frameworks: React, Angular<br>
- Back-end technologies: Node.js, Express<br>
- Database management: MongoDB, SQL<br> </p>
<h2>Contact Information</h2> <p>You
can reach me at:<br> Email:
john.doe@example.com<br> LinkedIn:
<a href="https://www.linkedin.com/in/johndoe"
target="_blank">linkedin.com/in/johndoe</a><br> GitHub:
<a href="https://github.com/johndoe"
target="_blank">github.com/johndoe</a></p>
<hr> </body> </html> Explanation: <!DOCTYPE html>: Declares
the document as HTML5. <html> tag: The root
element containing the entire HTML document. <head> section: Contains
meta-information about the document, such as the character encoding and
title. <title> tag: Sets the
title of the webpage. <meta
charset="UTF-8">: Ensures the correct display of text. <body> section: Contains
the visible content of the webpage. <h1> tag: Main heading
with your name. <hr> tag: Horizontal line
used to separate sections. <h2> tags: Subheadings
for different sections of the portfolio. <p> tags: Paragraphs
describing yourself, your skills, and your contact information. <br> tags: Line breaks
within a paragraph to separate different skills. <a> tags: Hyperlinks to
your LinkedIn and GitHub profiles. |
Assignment
6:
Create
a Webpage for a Favorite Book or Movie
Objective: Apply HTML tags to
describe a favorite book or movie, practicing content structuring.
Instructions:
- Create
an HTML file named favorite.html.
- Set
up the basic HTML structure.
- In
the <body> section:
- Add
an <h1> heading with the title of your favorite book or movie.
- Include
a horizontal line (<hr>).
- Add
an <h2> heading with the text "Summary."
- Write
a paragraph summarizing the plot or content.
- Add
an <h2> heading with the text "Why I Like It."
- Write
a paragraph explaining why this book or movie is your favorite.
- Include
a line break (<br>) to separate different points within the
paragraph.
- Add
an <h2> heading with the text "Conclusion."
- Write
a concluding paragraph, perhaps recommending the book or movie to others.
- End
with a horizontal line (<hr>).
Submission:
- Save
the file and submit it as favorite.html.
Answer:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Favorite Book or Movie</title> </head> <body>
<h1>The Shawshank Redemption</h1> <hr>
<h2>Summary</h2> <p>The
Shawshank Redemption is a film based on Stephen King's novella, "Rita
Hayworth and Shawshank Redemption." It tells the story of Andy Dufresne,
a banker who is wrongly imprisoned for the murder of his wife and her lover.
Over the years, Andy forms a friendship with fellow inmate Ellis
"Red" Redding, and his resilience and hope eventually lead to a
dramatic escape and a new life. The film explores themes of hope, friendship,
and redemption.</p>
<h2>Why I Like It</h2>
<p>This movie is one of my favorites for several reasons:<br> - The
powerful performance by Tim Robbins and Morgan Freeman.<br> - The
compelling story of perseverance and hope.<br> - The
emotional and inspirational message that no matter how dire the situation,
there is always a chance for redemption.</p>
<h2>Conclusion</h2> <p>If
you haven't seen The Shawshank Redemption yet, I highly recommend it. It is a
timeless classic that offers a profound and moving experience. The film's
strong performances and gripping story make it a must-watch for anyone who
appreciates great cinema.</p>
<hr> </body> </html> Explanation: <!DOCTYPE html>: Declares
the document as HTML5. <html> tag: The root
element of the HTML document. <head> section: Contains
meta-information such as the document's title and character encoding. <title> tag: Sets the
title of the webpage. <meta
charset="UTF-8">: Ensures proper text display. <body> section: Contains
the content of the webpage. <h1> tag: Main heading
with the title of the favorite book or movie. <hr> tag: Horizontal line
used to separate sections. <h2> tags: Subheadings
for different sections (Summary, Why I Like It, Conclusion). <p> tags: Paragraphs
describing the summary, reasons for liking the book or movie, and conclusion. <br> tags: Line breaks
used to separate different points within the paragraph. |
Assignment
7: Design a Webpage for an Imaginary Event
Objective: Practice creating structured content by designing a webpage for an
event.
Instructions:
- Create
an HTML file named event.html.
- Set
up the basic HTML structure.
- In
the <body> section:
- Add
an <h1> heading with the title of the event (e.g., "Annual
Tech Conference 2024").
- Include
a horizontal line (<hr>).
- Add
an <h2> heading with the text "Event Details."
- Write
a paragraph describing the event, including the date, time, and location.
- Add
a line break (<br>) after the date, time, and location for clarity.
- Add
an <h2> heading with the text "Speakers."
- Write
a paragraph listing the key speakers at the event.
- Add
an <h2> heading with the text "Registration Information."
- Write
a paragraph explaining how to register for the event and any associated
costs.
- Include
a final horizontal line (<hr>).
Submission:
- Save
the file and submit it as event.html.
Answer:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Annual Tech Conference 2024</title> </head> <body>
<h1>Annual Tech Conference 2024</h1> <hr>
<h2>Event Details</h2> <p>
Join us for the Annual Tech Conference 2024, where industry leaders and tech
enthusiasts gather to discuss the latest trends and innovations in
technology.<br>
Date: March 15, 2024<br>
Time: 9:00 AM - 5:00 PM<br>
Location: Tech Convention Center, 123 Innovation Drive, Silicon Valley, CA </p>
<h2>Speakers</h2> <p>
We are excited to welcome a lineup of distinguished speakers,
including:<br>
- Dr. Alice Smith, Chief Technology Officer at FutureTech<br>
- John Doe, Lead Developer at CodeWorks<br>
- Jane Johnson, Data Scientist at DataInsights<br>
- Michael Brown, AI Researcher at TechLabs </p>
<h2>Registration Information</h2> <p>
To register for the Annual Tech Conference 2024, please visit our website at
<a href="https://www.techconference2024.com"
target="_blank">www.techconference2024.com</a>.<br>
Early bird registration is available until February 15, 2024, with a
discounted fee of $150. Regular registration will be $200. Don't miss out on
this opportunity to network and learn from the best in the industry! </p>
<hr> </body> </html> Explanation: <!DOCTYPE html>: Declares
the document as HTML5. <html> tag: The root
element of the HTML document. <head> section: Contains
meta-information about the document. <title> tag: Sets the
title of the webpage. <meta
charset="UTF-8">: Ensures proper text encoding. <body> section: Contains
the visible content of the webpage. <h1> tag: Main heading
with the title of the event. <hr> tag: Horizontal line
used to separate sections. <h2> tags: Subheadings
for different sections (Event Details, Speakers, Registration Information). <p> tags: Paragraphs
containing details about the event, the list of speakers, and registration
information. <br> tags: Line breaks
used for separating information within paragraphs. <a> tag: Hyperlink to the
event registration website, opening in a new tab. |
Assignment
8:
Create
an HTML Document Describing a Historical Figure
Objective: Use basic HTML tags to create a well-structured document about a
historical figure.
Instructions:
- Create
an HTML file named historical_figure.html.
- Set
up the basic HTML structure.
- In
the <body> section:
- Add
an <h1> heading with the name of the historical figure.
- Add
an <h2> heading with the text "Early Life."
- Write
a paragraph describing the early life of the figure.
- Add
a horizontal line (<hr>).
- Add
an <h2> heading with the text "Achievements."
- Write
a paragraph detailing their key achievements.
- Include
line breaks (<br>) to separate different achievements if necessary.
- Add
an <h2> heading with the text "Legacy."
- Write
a concluding paragraph discussing the impact and legacy of the historical
figure.
- Finish
with a horizontal line (<hr>).
Submission:
- Save
the file and submit it as historical_figure.html.
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Historical Figure: Albert Einstein</title> </head> <body>
<h1>Albert Einstein</h1>
<h2>Early Life</h2>
<p>Albert Einstein was born on March 14, 1879, in Ulm, Germany. He grew
up in a Jewish family and showed an early interest in science and
mathematics. Despite facing challenges in his formal education, Einstein
excelled in understanding complex concepts. His curiosity and determination
led him to pursue higher education at the Polytechnic Institute in Zurich,
where he developed his foundational theories in physics.</p> <hr>
<h2>Achievements</h2> <p>
- Developed the theory of relativity, fundamentally changing the
understanding of space and time.<br>
- Awarded the Nobel Prize in Physics in 1921 for his explanation of the
photoelectric effect.<br>
- Published over 300 scientific papers, contributing to fields like quantum
mechanics and statistical mechanics.<br>
- Played a key role in the development of the atomic bomb, though he later
advocated for peace and nuclear disarmament. </p>
<h2>Legacy</h2>
<p>Albert Einstein's contributions to science have had a lasting impact
on both theoretical and applied physics. His theories of relativity
revolutionized the way we perceive the universe, and his work remains
foundational in modern physics. Einstein's advocacy for civil rights,
pacifism, and education further solidified his legacy as not only a brilliant
scientist but also a humanitarian and thinker who shaped the 20th
century.</p>
<hr> </body> </html> Explanation: <!DOCTYPE html>: Declares
the document as HTML5. <html> tag: The root
element of the HTML document. <head> section: Contains
meta-information about the document. <title> tag: Sets the
title of the webpage. <meta
charset="UTF-8">: Ensures proper text encoding. <body> section: Contains
the visible content of the webpage. <h1> tag: Main heading
with the name of the historical figure. <h2> tags: Subheadings
for different sections (Early Life, Achievements, Legacy). <p> tags: Paragraphs
detailing the historical figure's early life, achievements, and legacy. <br> tags: Line breaks
used within the achievements paragraph to separate different points. <hr> tags: Horizontal
lines used to divide sections of the content. |
Assignment
9: Create a Simple HTML Form Structure
Objective: Introduce the use of basic HTML form elements and structure a
simple form.
Instructions:
- Create
an HTML file named simple_form.html.
- Set
up the basic HTML structure.
- In
the <body> section:
- Add
an <h1> heading with the text "Contact Form."
- Create
a form (just the structure, without any functionality for now):
- Add
a label and text input field for "Name."
- Add
a line break (<br>).
- Add
a label and text input field for "Email."
- Add
another line break (<br>).
- Add
a label and a text area for "Message."
- Add
a final line break (<br>).
- Add
a submit button with the text "Submit."
- Place
a horizontal line (<hr>) after the form.
Submission:
- Save
the file and submit it as simple_form.html.
Answer:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Contact
Form</title> </head> <body> <h1>Contact
Form</h1>
<form> <label
for="name">Name:</label> <input
type="text" id="name" name="name"><br>
<label for="email">Email:</label> <input
type="email" id="email"
name="email"><br>
<label
for="message">Message:</label> <textarea
id="message" name="message" rows="4"
cols="50"></textarea><br>
<button type="submit">Submit</button> </form> <hr> </body> </html> Explanation: <!DOCTYPE html>: Declares
the document as HTML5. <html> tag: The root
element of the HTML document. <head> section: Contains
meta-information about the document. <title> tag: Sets the
title of the webpage. <meta
charset="UTF-8">: Ensures proper text encoding. <body> section: Contains
the visible content of the webpage. <h1> tag: Main heading
for the contact form. <form> tag: Defines the
form element, though no action or method is specified here. <label> tags: Define
labels for form elements, associated with inputs using the for attribute. <input> tags: Text input
fields for the user's name and email. <textarea> tag: A larger
text area for the user's message. <button> tag: A submit
button for the form. <br> tags: Line breaks
used to separate the form fields. <hr> tag: Horizontal line
placed after the form. |