Assignments Of Class 3
Text Formatting in HTML
Assignment 1: Basic Formatting
1.
Create a simple HTML page that includes
the following:
o
A heading (<h1>) with the text
"Welcome to My Webpage".
o
A paragraph (<p>) that includes:
§ Text in bold using <strong>.
§ Text in italics using <em>.
§ Text with a line through it using <s>.
§ Text that is underlined using <u>.
o
Use appropriate tags to format the text
as described.
Assignment 2: Quote and Citation
1.
Design a webpage with a section for
quotes. Include:
o
A blockquote with a famous quote and
its author. Use <blockquote> for the quote and <footer> to
attribute the author.
o
An inline quote using the <q> tag
within a paragraph.
o
A citation tag using <cite> to
refer to a book or article.
Assignment 3: Superscript and Subscript
1.
Create an HTML document with a
paragraph that includes:
o
A chemical formula with subscript
(e.g., Hâ‚‚O).
o
A mathematical expression with
superscript (e.g., E = mc²).
Assignment 4: Combining Tags
1.
Write an HTML document where you
combine various text formatting tags:
o
A heading with bold and italic text.
o
A paragraph with a mix of bold,
italicized, and underlined text.
o
Include a blockquote and an inline
quote in the same document.
Assignment 5: Formatting Practice
1.
Create a sample blog post with:
o
A title using <h1>.
o
Multiple paragraphs that use:
§ Bold text to highlight important points.
§ Italic text for emphasis.
§ Underlined text to denote links (even though the link is not
functional).
§ A blockquote to include a quote from a source.
o
Use <cite> to reference the
source of the quote.
Assignment 6: Formatting a Product Description
1.
Design a product description page for
an imaginary product with:
o
The product name in a heading
(<h2>).
o
A description with:
§ Key features in bold.
§ Additional details in italicized text.
§ Warnings or notes in underlined text.
o
Include a blockquote with a customer
review and attribute it using <footer>.
Assignment 7: HTML Page Layout
1.
Build a simple HTML page that:
o
Contains a heading, a subheading
(<h2>), and several paragraphs.
o
Incorporates different formatting tags:
§ Bold and italic text in the paragraphs.
§ A quote with <blockquote> and an inline quote with <q>.
§ A citation for a fictional book or article.
Assignment 8: Create a Formatted Email
1.
Create an HTML email template that
includes:
o
A subject line in a heading
(<h1>).
o
A greeting in bold.
o
Main content with paragraphs where:
§ Important information is bold.
§ Emphasis is italicized.
§ Additional notes are underlined.
o
A signature formatted with <strong>
and <em>.
Assignment 9: Personal Biography
1.
Create a personal biography page that
includes:
o
A heading with your name in <h1>.
o
A short biography paragraph with:
§ Key achievements in bold.
§ Important dates in italicized text.
§ Sections with underlined headings.
o
A blockquote with a favorite quote
about personal growth, attributed to the source.
Assignment 10: Event Invitation
1.
Design an HTML page for an event
invitation that features:
o
The event title in a large heading
(<h1>).
o
The event details in a paragraph with:
§ Important details in bold.
§ Special instructions or notes in italics.
§ Any additional information in underlined text.
o
Include a blockquote with a quote from
a guest speaker or organizer.
Assignment 11: Formatting a Recipe
1.
Create a recipe page with:
o
The recipe title in a heading
(<h1>).
o
Ingredients listed in a paragraph with:
§ Ingredients names in bold.
§ Quantity and measurements in italics.
o
Instructions in a numbered list
(<ol>), where each step is a separate list item.
o
A blockquote with a cooking tip or
variation of the recipe.
Assignment 12: Highlighting a Review
1.
Design a webpage showcasing a product
or movie review with:
o
The product or movie title in a heading
(<h2>).
o
A summary paragraph with:
§ Key points highlighted in bold.
§ Personal opinions emphasized in italics.
§ Warnings or critiques in underlined text.
o
A blockquote containing a quote from
the review with proper attribution using <footer>.
Assignment 13: Creating a News Article
1.
Build an HTML news article that
includes:
o
The article headline in a heading
(<h1>).
o
The article body with:
§ Headlines and subheadlines in bold.
§ Key quotes or statements in italics.
§ Explanatory notes or additional comments in underlined text.
o
A blockquote with a notable quote from
the article, including a citation for the source.
Assignment 14: Formatting an FAQ Page
1.
Design an FAQ (Frequently Asked
Questions) page with:
o
Each question as a heading
(<h3>).
o
Answers formatted with:
§ Key information in bold.
§ Explanatory text in italics.
§ Important terms or notes in underlined text.
o
Include blockquotes for particularly
insightful answers or quotes from experts.
Assignment 15: Resume Formatting
1.
Create a simple HTML resume with:
o
The resume heading with your name and
contact information in a heading (<h1>).
o
Sections for experience, education, and
skills, each with:
§ Section titles in bold.
§ Job titles or degrees in italics.
§ Responsibilities or achievements in underlined text.
o
A blockquote with a reference or
testimonial from a previous employer or professor.
Assignment 16: Designing a Web Page for a Contest
1.
Create a web page announcing a contest
or competition with:
o
The contest title in a heading
(<h1>).
o
Contest details in a paragraph with:
§ Key dates and prizes in bold.
§ Rules or requirements in italicized text.
§ Contact information in underlined text.
o
A blockquote with a motivational quote
or slogan for the contest.
Assignment 17: Creating an Online Portfolio
1.
Build an HTML page for an online
portfolio showcasing your work with:
o
The portfolio title in a heading
(<h1>).
o
Project descriptions in paragraphs
with:
§ Project names in bold.
§ Descriptions or technologies used in italics.
§ Additional notes or features in underlined text.
o
A blockquote with a client testimonial
or review about your work.
Assignment 18: Formatting a Travel Blog Entry
1.
Design a blog entry about a recent trip
with:
o
The blog title in a heading
(<h1>).
o
Descriptions of places visited with:
§ Names of locations in bold.
§ Personal experiences in italics.
§ Important travel tips or notes in underlined text.
o
Include a blockquote with a memorable
quote or observation from the trip.
Solution CODE
_________________
Assignment 1: Basic Formatting
<!DOCTYPE html> <html> <head>
<title>Basic Formatting</title> </head> <body> <h1>Welcome
to My Webpage</h1> <p>
This is a simple paragraph. <strong>This text is
bold.</strong>
<em>This text is italicized.</em>
<s>This text has a line through it.</s>
<u>This text is underlined.</u> </p> </body> </html> |
Explanation:
1. <!DOCTYPE
html>
This is the DOCTYPE
declaration that tells the web browser that this is an HTML5 document. It
ensures the page is rendered correctly and follows HTML5 standards.
2. <html>
This tag defines the
start of an HTML document. All the content of the webpage is written between
the opening <html> and the closing </html> tags.
3. <head>
The <head>
section contains meta-information about the webpage, such as the title, links
to stylesheets, scripts, etc. The content inside the <head> is not
displayed on the webpage itself but is important for how the page is
interpreted by the browser.
4. <title>Basic
Formatting</title>
The <title> tag
defines the title of the webpage, which appears on the browser tab. In this
case, it is set to "Basic Formatting." This text helps identify the
page in the browser or when bookmarking.
5. <body>
The <body> tag
contains the content of the webpage that is visible to the user. Everything
that appears on the page, such as text, images, links, etc., is placed inside
the <body> section.
6. <h1>Welcome
to My Webpage</h1>
The <h1> tag is
used to define a main heading on the webpage. It stands for "Heading
1" and is typically the largest and most important heading on the page.
The text "Welcome to My Webpage" is the content of this heading.
7. <p>
The <p> tag
defines a paragraph. Everything inside <p> and </p> is considered a
paragraph. In this example, there is one paragraph containing several text
formatting examples.
8. <strong>This
text is bold.</strong>
The <strong>
tag is used to make text bold. Text inside the <strong> tag is emphasized
with bold formatting. In this case, the text "This text is bold."
will appear bold on the page.
9. <em>This
text is italicized.</em>
The <em> tag is
used to make text italicized. It gives emphasis to the text by rendering it in
italics. Here, "This text is italicized." will be displayed in
italics.
10. <s>This
text has a line through it.</s>
The <s> tag is
used to apply strikethrough formatting to text. Text inside this tag will
appear with a line running through it, indicating that it may no longer be
relevant or has been "struck out." In this case, "This text has
a line through it." will appear with a strikethrough.
11. <u>This
text is underlined.</u>
The <u> tag
underlines the text. This was traditionally used for underlining, though CSS is
now more commonly used. Here, "This text is underlined." will be
underlined.
12. </body> and
</html>
These are the closing
tags for the <body> and <html> elements. They indicate the end of
the body content and the HTML document, respectively.
Output:
Assignment 2: Quote and Citation
<!DOCTYPE html> <html> <head>
<title>Quote and Citation</title> </head> <body>
<blockquote>
"The only limit to our realization of tomorrow is our doubts of
today."
<footer>- Franklin D. Roosevelt</footer>
</blockquote> <p>As
<q>they say</q>, the future depends on our actions
today.</p> <p>For more
information, see <cite>The Art of Happiness</cite>.</p> </body> </html> |
Explanation:
1. <!DOCTYPE
html>
This is the DOCTYPE
declaration that specifies the document type. It tells the browser that this
document is written in HTML5, ensuring that the page will be rendered properly.
2. <html>
The <html> tag
defines the start of the HTML document. Everything between <html> and
</html> makes up the content of the webpage.
3. <head>
The <head>
section contains metadata and information about the webpage. This information
is not displayed on the page but is important for the browser, SEO, and setting
up the page correctly.
4. <title>Quote
and Citation</title>
The <title> tag
defines the title of the page that appears on the browser tab. In this case,
the title is set to "Quote and Citation."
5. <body>
The <body> tag
contains the content that will be visible to the user on the webpage. All the
visible elements, such as text, images, and links, go inside the <body>
section.
6. <blockquote>
The
<blockquote> tag is used to represent a block quotation, which is usually
a longer or notable quote. By default, it adds indentation or styling to
distinguish the quote from the rest of the text.
Inside the
<blockquote>, there is a quote: "The only limit to our realization
of tomorrow is our doubts of today."
7. <footer>
The <footer>
tag is used here within the <blockquote> to attribute the author of the
quote. The text inside the <footer> (i.e., "- Franklin D.
Roosevelt") credits the person who originally said the quote. Normally,
the <footer> element is used to indicate a citation or reference in conjunction
with <blockquote>.
8. <p>
The <p> tag is
used to define a paragraph. There are two paragraphs in this code.
9. <q>they
say</q>
The <q> tag is
used for an inline quotation, which is a short quote that appears within a
paragraph. It automatically adds quotation marks around the text.
Here, the phrase
"they say" is enclosed in the <q> tag, so it will appear with
quotation marks around it in the rendered webpage: As "they say", the
future depends on our actions today.
10. <cite>The
Art of Happiness</cite>
The <cite> tag
is used to indicate the title of a book, article, or other work that is being
referenced. It is typically rendered in italics by default.
In this example, the
text "The Art of Happiness" is inside the <cite> tag, so it
will appear italicized as a book or work title.
11. </body> and
</html>
These are the closing
tags for the <body> and <html> elements, which mark the end of the
visible content and the document itself, respectively.
Final
Output on the Webpage
The browser will
render the blockquote as an indented or styled block of text:
"The only limit
to our realization of tomorrow is our doubts of today."
- Franklin D.
Roosevelt
Inline quote:
Inside a paragraph,
the inline quote "they say" will be surrounded by quotation marks,
and the sentence will read:
As "they
say", the future depends on our actions today.
Citation:
The <cite> tag
will render the title "The Art of Happiness" in italics:
For more information,
see *The Art of Happiness*.
This code
demonstrates the use of quotations and citations in HTML. The <blockquote>
and <q> tags are used for quoting text, while the <cite> tag is
used to reference a book or other source. The <footer> element is
included in the <blockquote> to attribute the quote to its author.
OUTPUT:
Assignment
3: Superscript and Subscript
<!DOCTYPE html> <html> <head>
<title>Superscript and Subscript</title> </head> <body> <p>Chemical
formula: H<sub>2</sub>O</p> <p>Mathematical
expression: E = mc<sup>2</sup></p> </body> </html> |
Code
Explanation:
1. <!DOCTYPE
html>
This is the DOCTYPE
declaration, which informs the browser that the document is using HTML5. It
ensures the page will be properly interpreted and displayed according to the
latest standards.
2. <html>
The <html> tag
defines the start of the HTML document. All the content for the webpage goes
between the opening <html> and closing </html> tags.
3. <head>
The <head> section
contains meta-information about the document, such as the title, links to
stylesheets, and other non-visible data that helps define the page.
4.
<title>Superscript and Subscript</title>
The <title> tag
defines the title of the webpage, which is displayed on the browser tab. In
this case, it is set to "Superscript and Subscript."
5. <body>
The <body> tag
contains all the visible content of the webpage, such as text, images, and
other elements.
6. <p>Chemical
formula: H<sub>2</sub>O</p>
The <p> tag defines
a paragraph. In this example, the paragraph contains the text "Chemical
formula: Hâ‚‚O".
The <sub> tag
is used for subscript, which places text below the normal line of text. In this
case, the number "2" in the chemical formula Hâ‚‚O is placed as a subscript
to represent water's chemical composition.
The result will be:
Hâ‚‚O.
7.
<p>Mathematical expression: E = mc<sup>2</sup></p>
This is another
paragraph, but this time it includes a mathematical expression: "E =
mc²".
The <sup> tag
is used for superscript, which places text above the normal line of text. Here,
the number "2" is used as a superscript to represent the square in
Einstein’s equation for energy: E = mc².
The result will be: E
= mc².
8. </body> and
</html>
These are the closing
tags for the <body> and <html> elements, which signal the end of
the webpage content and the document itself.
Final
Output on the Webpage
Chemical formula:
The chemical formula
for water, Hâ‚‚O, will be displayed, where "â‚‚" is subscripted to
represent the correct notation for Hâ‚‚O.
Rendered as:
Chemical formula: Hâ‚‚O
Mathematical
expression:
Einstein’s equation
for energy, E = mc², will be displayed, where "²" is superscripted to
represent the squared term.
Rendered as:
Mathematical
expression: E = mc²
OUTPUT:
Summary:
Subscript
(<sub>) is used to position text slightly below the normal line, as
needed in chemical formulas (e.g., Hâ‚‚O).
Superscript
(<sup>) is used to position text slightly above the normal line, such as
in mathematical expressions (e.g., E = mc²).
This code
demonstrates how to correctly display subscript and superscript formatting in
HTML.
Assignment 4: Combining Tags
<!DOCTYPE html> <html> <head>
<title>Combining Tags</title> </head> <body>
<h1><strong><em>Combining Formatting
Tags</em></strong></h1> <p>This is
a paragraph with <strong>bold</strong>,
<em>italicized</em>, and <u>underlined</u>
text.</p>
<blockquote>
"Success usually comes to those who are too busy to be looking for
it."
<footer>- Henry David Thoreau</footer>
</blockquote> <p>As
<q>Thoreau mentioned</q>, stay focused and persistent.</p> </body> </html> |
Explanation:
1. <!DOCTYPE
html>
This is the DOCTYPE
declaration that informs the browser the document is written in HTML5. It helps
ensure the page is rendered correctly.
2. <html>
The <html> tag
defines the start of the HTML document, and everything between <html> and
</html> makes up the content of the page.
3. <head>
The <head>
section contains metadata about the page. This data is not displayed on the
page but helps the browser understand the page’s structure.
4.
<title>Combining Tags</title>
The <title> tag
sets the title of the webpage, which will appear in the browser tab. In this
case, it is set to "Combining Tags."
5. <body>
The <body> tag
contains the visible content of the webpage, such as text, images, and other
elements.
6.
<h1><strong><em>Combining Formatting Tags</em></strong></h1>
The <h1> tag
defines a heading level 1, which is usually the largest and most important
heading on the page. Inside this heading, we have:
<strong>: This
tag makes the text bold.
<em>: This tag
makes the text italicized.
Both <strong>
and <em> are nested inside <h1>, meaning the text "Combining
Formatting Tags" will be bold, italicized, and presented as a heading.
Rendered as:
Combining Formatting
Tags (in bold and italic, in large heading size)
7. <p>This is a
paragraph with <strong>bold</strong>,
<em>italicized</em>, and <u>underlined</u>
text.</p>
The <p> tag
defines a paragraph. Inside this paragraph:
<strong>: Makes
the text bold.
<em>: Makes the
text italicized.
<u>: Makes the
text underlined.
This is a
demonstration of combining different text formatting tags within a single
paragraph.
Rendered as:
This is a paragraph
with bold, italicized, and underlined text.
8. <blockquote>
The
<blockquote> tag is used for block quotations, which typically represent
longer or emphasized quotes. Browsers usually render blockquotes with
indentation and special styling.
Inside the blockquote
is the quote: "Success usually comes to those who are too busy to be
looking for it."
9. <footer>-
Henry David Thoreau</footer>
The <footer>
tag is used within the blockquote to attribute the author of the quote. Here,
it displays the author of the quote: "Henry David Thoreau." The
footer tag is typically used for author or citation information.
Rendered as:
"Success usually
comes to those who are too busy to be looking for it."
- Henry David Thoreau
10. <p>As
<q>Thoreau mentioned</q>, stay focused and persistent.</p>
This is another
paragraph that includes an inline quote using the <q> tag.
The <q> tag
automatically surrounds the quoted text with quotation marks. Here, it quotes
"Thoreau mentioned."
Rendered as:
As "Thoreau
mentioned", stay focused and persistent.
11. </body> and
</html>
These are the closing
tags for the <body> and <html> elements, indicating the end of the
webpage content and the document.
Final Output on the
Webpage:
Heading:
The text
"Combining Formatting Tags" will be displayed as a large heading
(since it's inside <h1>), and the text will be bold and italicized.
Formatted Paragraph:
The text "This
is a paragraph with bold, italicized, and underlined text" will have
different formatting for the words "bold" (bold),
"italicized" (italicized), and "underlined" (underlined).
Blockquote:
A large blockquote
will be displayed with the quote: "Success usually comes to those who are
too busy to be looking for it." The attribution ("- Henry David
Thoreau") will appear in the footer below the quote.
Inline Quote:
The phrase
"Thoreau mentioned" will be quoted within a paragraph and will be
surrounded by quotation marks.
Summary:
This HTML code
demonstrates how to combine multiple text formatting tags such as bold
(<strong>), italic (<em>), and underline (<u>) within
headings and paragraphs. It also shows how to properly use blockquotes
(<blockquote>), inline quotes (<q>), and footers for attributing
quotes (<footer>). This is useful for creating content-rich pages with
varying text formats.
OUTPUT:
Assignment
5: Formatting Practice
<!DOCTYPE html> <html> <head>
<title>Sample Blog Post</title> </head> <body> <h1>My Blog
Post</h1> <p>This is
my first blog post. <strong>It’s important to stay
focused</strong> while working.</p>
<p><em>Emphasis should be placed on hard work</em> and
dedication.</p>
<p><u>Here’s a link to the next blog post (not
functional)</u>.</p>
<blockquote>
"Hard work beats talent when talent doesn’t work hard."
<footer>- Tim Notke</footer>
</blockquote> <p>Source:
<cite>Talent Is Overrated</cite></p> </body> </html> |
Explanation
:
1. <!DOCTYPE
html>
This declares that
the document is written in HTML5, ensuring the correct rendering by modern web
browsers.
2. <html>
The opening
<html> tag starts the HTML document, and everything between <html>
and </html> is the HTML content.
3. <head>
The <head>
section contains metadata about the HTML page. This includes the title and
other non-visual elements.
4.
<title>Sample Blog Post</title>
The <title> tag
sets the title of the webpage, which appears on the browser tab. In this case,
the title is "Sample Blog Post."
5. <body>
The <body> section
contains all the visible content of the webpage, including text, images, and
other elements.
Content of the Blog
Post
6. <h1>My Blog
Post</h1>
The <h1> tag is
a heading tag that defines the largest and most important heading on the page.
Here, "My Blog Post" is the title of the blog post.
7. <p>This is
my first blog post. <strong>It’s important to stay focused</strong>
while working.</p>
The <p> tag
creates a paragraph.
Inside this
paragraph, the <strong> tag is used to make the text "It’s important
to stay focused" bold.
Rendered as:
This is my first blog
post. It’s important to stay focused while working.
8.
<p><em>Emphasis should be placed on hard work</em> and
dedication.</p>
This is another
paragraph that uses the <em> tag to italicize the text "Emphasis
should be placed on hard work."
Rendered as:
Emphasis should be
placed on hard work and dedication.
9.
<p><u>Here’s a link to the next blog post (not
functional)</u>.</p>
In this paragraph,
the <u> tag is used to underline the text "Here’s a link to the next
blog post (not functional)." Even though this text looks like a link, it’s
just underlined for visual purposes and isn’t an actual clickable link.
Rendered as:
Here’s a link to the
next blog post (not functional).
10.
<blockquote>
The <blockquote>
tag is used for displaying block quotations. These are typically longer,
emphasized quotes that are rendered in an indented block of text.
The text inside the
blockquote is: "Hard work beats talent when talent doesn’t work
hard."
11. <footer>-
Tim Notke</footer>
The <footer>
tag inside the blockquote provides attribution for the quote. In this case, the
author "Tim Notke" is mentioned.
Rendered as:
"Hard work beats
talent when talent doesn’t work hard."
- Tim Notke
12. <p>Source:
<cite>Talent Is Overrated</cite></p>
This paragraph gives
credit to the source of the quote, using the <cite> tag. The text
"Talent Is Overrated" is italicized, which is the standard formatting
for a cited work such as a book or article.
Rendered as:
Source: Talent Is
Overrated
Summary:
This HTML page
represents a sample blog post. It demonstrates the use of different text
formatting tags:
1.
Bold text using <strong> to
highlight important information.
2.
Italicized text using <em> to
emphasize key ideas.
3.
Underlined text using <u> to mark
a non-functional link.
4.
Blockquote and footer tags to display a
quote and attribute it to the author.
5.
Citing a source using the <cite>
tag to refer to a book or article.
OUTPUT...
Assignment
6: Formatting a Product Description
<!DOCTYPE html> <html> <head>
<title>Product Description</title> </head> <body> <h2>Amazing
Gadget 3000</h2>
<p><strong>Key Features:</strong></p> <ul>
<li><strong>High speed performance</strong></li>
<li><em>Compact and lightweight design</em></li>
<li><u>Durable and long-lasting</u></li> </ul>
<blockquote>
"This product changed my life!"
<footer>- Satisfied Customer</footer>
</blockquote> </body> </html> |
Explanation:
1. <!DOCTYPE
html>
This declaration
specifies that the document is HTML5, ensuring the page is rendered correctly
by modern web browsers.
2. <html>
The opening
<html> tag marks the beginning of the HTML document. Everything between
<html> and </html> is part of the document's content.
3. <head>
The <head> section
contains metadata about the webpage. This includes the title of the page, which
is not displayed directly on the webpage but appears in the browser tab.
4.
<title>Product Description</title>
The <title> tag
sets the title of the webpage to "Product Description," which will
appear on the browser tab.
5. <body>
The <body> tag
contains all the content that is visible on the webpage, such as text, images,
and other elements.
Content of the
Product Description
6. <h2>Amazing
Gadget 3000</h2>
The <h2> tag
defines a heading level 2, which is typically used for subheadings or less
prominent headings compared to <h1>. Here, it displays the product name
"Amazing Gadget 3000."
7.
<p><strong>Key Features:</strong></p>
This <p> tag
creates a paragraph that introduces the key features of the product. The
<strong> tag makes the text "Key Features:" bold, emphasizing
the section header.
Rendered as:
Key Features:
8. <ul>
The <ul> tag
defines an unordered list (bulleted list), which is used to present a list of
items.
9.
<li><strong>High speed performance</strong></li>
The <li> tag
defines a list item within the unordered list. Here, the text "High speed
performance" is bolded using <strong> to highlight it as a key
feature.
Rendered as:
• High speed
performance
10. <li><em>Compact
and lightweight design</em></li>
Another list item
that describes the product's feature with italicized text using the <em>
tag to emphasize "Compact and lightweight design."
Rendered as:
• Compact and
lightweight design
11.
<li><u>Durable and long-lasting</u></li>
This list item
features the text "Durable and long-lasting," which is underlined
using the <u> tag to give it visual prominence.
Rendered as:
• Durable and
long-lasting
12.
<blockquote>
The
<blockquote> tag is used for block quotations, which are typically
displayed as indented blocks of text. Here, it contains a customer testimonial.
13. "This
product changed my life!"
The text inside the
blockquote represents the testimonial from a customer, which is displayed as an
indented block.
14. <footer>-
Satisfied Customer</footer>
The <footer>
tag within the blockquote provides attribution for the quote. It specifies the
source of the testimonial as "Satisfied Customer."
Rendered as:
"This product
changed my life!"
- Satisfied Customer
Summary:
This HTML code
creates a product description page with the following features:
1.
Product Name: Displayed with a level 2
heading (<h2>).
2.
Key Features: Listed in an unordered
list (<ul>), with items formatted as bold (<strong>), italicized
(<em>), and underlined (<u>).
3.
Customer Testimonial: Shown in a
blockquote (<blockquote>) with a footer (<footer>) for the author’s
attribution.
4.
This structure effectively highlights
the product's features and provides a customer testimonial to enhance the
description.
Output:
Assignment
7: HTML Page Layout
<!DOCTYPE html> <html> <head> <title>HTML
Page Layout</title> </head> <body> <h1>HTML
Layout</h1>
<h2>Subheading Example</h2> <p>This
paragraph contains <strong>bold</strong> and
<em>italicized</em> text.</p>
<blockquote>
"Learning HTML is a valuable skill."
<footer>- A Web Developer</footer>
</blockquote> <p>As
<q>one developer said</q>, the web is all about
structure.</p> </body> </html> |
Output:
Assignment 8: Create a Formatted Email
<!DOCTYPE html> <html> <head>
<title>Email Template</title> </head> <body> <h1>Email
Subject: Important Update</h1>
<p><strong>Dear User,</strong></p> <p>We are
writing to inform you of <strong>important changes</strong> to
your account.</p>
<p><em>Please review the new terms</em> and <u>make
necessary updates</u> to your profile.</p>
<p><strong><em>Sincerely,</em></strong><br>Your
Company</p> </body> </html> |
Output:
Assignment 9: Personal Biography
<!DOCTYPE html> <html> <head>
<title>Personal Biography</title> </head> <body> <h1>John
Doe</h1> <p>I am a
passionate web developer. <strong>Key
Achievements:</strong></p> <ul>
<li><strong>Completed multiple projects</strong> in
<em>2020</em>.</li>
<li>Graduated with honors in <em>2019</em>.</li> </ul>
<blockquote>
"Growth begins when we start to accept our own weaknesses."
<footer>- Anonymous</footer>
</blockquote> </body> </html> |
Output:
Assignment
10: Event Invitation
<!DOCTYPE html> <html> <head>
<title>Event Invitation</title> </head> <body> <h1>Annual
Tech Conference 2024</h1>
<p><strong>Date:</strong> April 25, 2024</p>
<p><em>Location:</em> Virtual</p>
<p><u>Please RSVP by April 10th.</u></p>
<blockquote>
"Innovation distinguishes between a leader and a follower."
<footer>- Steve Jobs</footer>
</blockquote> </body> </html> |
Output:
Assignment 11: Formatting a Recipe
<!DOCTYPE html> <html> <head>
<title>Recipe</title> </head> <body>
<h1>Chocolate Cake</h1> <p><strong>Ingredients:</strong></p> <ul>
<li><strong>Flour</strong> - <em>2
cups</em></li>
<li><strong>Sugar</strong> - <em>1.5
cups</em></li> </ul> <ol>
<li>Preheat the oven to 350°F.</li>
<li>Mix all ingredients together.</li> </ol>
<blockquote>
"For a richer taste, use dark chocolate."
</blockquote> </body> </html> |
OUTPUT:
Assignment
12: Highlighting a Review
<!DOCTYPE html> <html> <head>
<title>Product Review</title> </head> <body> <h2>Product
Review: Smart Watch</h2>
<p><strong>Key Features:</strong> Lightweight, easy to
use.</p>
<p><em>Personal opinion:</em> The battery life could be
improved.</p>
<p><u>Warning:</u> The watch is not waterproof.</p>
<blockquote>
"Overall, a great buy for the price."
<footer>- Tech Enthusiast</footer>
</blockquote> </body> </html> |
OUTPUT:
Assignment
13: Creating a News Article
<!DOCTYPE html> <html> <head> <title>News
Article</title> </head> <body> <h1>Breaking
News: New Tech Innovation</h1>
<p><strong>Tech companies</strong> around the world are
focusing on AI development.</p>
<p><em>Experts say</em> this is the future of
technology.</p>
<p><u>Note:</u> This is just the beginning.</p> <blockquote>
"AI is changing the landscape of industries."
<footer>- Tech Journal</footer>
</blockquote> </body> </html> |
OUTPUT:
Assignment
14: Formatting an FAQ Page
<!DOCTYPE html> <html> <head>
<title>FAQ</title> </head> <body> <h3>What is
HTML?</h3>
<p><strong>Answer:</strong> HTML is the language used to
create web pages.</p>
<blockquote>
"HTML is the foundation of the web."
</blockquote> </body> </html> |
Output:
Assignment
15: Resume Formatting
<!DOCTYPE html> <html> <head>
<title>Resume</title> </head> <body> <h1>Jane
Doe</h1>
<p><strong>Experience:</strong> Software
Developer</p>
<p><em>Job Title:</em> Senior Developer</p>
<p><u>Achievements:</u> Developed multiple web
applications.</p>
<blockquote>
"Jane is a dedicated and talented developer."
<footer>- Previous Employer</footer>
</blockquote> </body> </html> |
OUTPUT:
Assignment
16: Designing a Web Page for a Contest
<!DOCTYPE html> <html> <head>
<title>Contest</title> </head> <body> <h1>Annual
Coding Contest</h1>
<p><strong>Start Date:</strong> May 10, 2024</p>
<p><em>Rules:</em> The code must be original and follow
guidelines.</p>
<blockquote>
"Coding is the skill of the future."
</blockquote> </body> </html> |
Output:
Assignment 17: Creating an Online Portfolio
<!DOCTYPE html> <html> <head>
<title>Portfolio</title> </head> <body> <h1>My
Online Portfolio</h1>
<p><strong>Project 1:</strong> Website
Development</p>
<p><em>Technologies used:</em> HTML, CSS,
JavaScript</p>
<blockquote>
"Great work on this project!"
<footer>- Client</footer>
</blockquote> </body> </html> |
Assignment
18: Formatting a Travel Blog Entry
<!DOCTYPE html> <html> <head>
<title>Travel Blog Entry</title> </head> <body> <h1>My Trip
to Paris</h1>
<p><strong>Places Visited:</strong> Eiffel Tower, Louvre
Museum</p>
<p><em>Personal Experience:</em> The view from the Eiffel
Tower was breathtaking.</p>
<p><u>Travel Tip:</u> Buy tickets in advance to avoid long
lines.</p>
<blockquote>
"Paris is always a good idea."
</blockquote> </body> </html> |
Output: