Assignments Of Class 3: Text Formatting in HTML

Rashmi Mishra
25 minute read
0

 

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>

 

 OUTPUT:


 

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:

 

 

Post a Comment

0Comments

Post a Comment (0)