HTML Tutorials

Project Overview

The "About My Favorite City" webpage will be built by the students. The page will have an organized design with the following elements:

  • <head> contains the metadata and page title.
  • a section heading bearing the name of the city.
  • a navigation bar that contains connections to the page's many parts.
  • The main information is divided into parts for entertaining facts, well-known locations, and a quick introduction.
  • A picture of the city.
  • a contact information footer.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About My Favorite City</title>
    <meta name="description" content="A simple HTML page about my favorite city, showcasing various HTML elements and structure.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>New York City</h1>
        <nav>
            <ul>
                <li><a href="#introduction">Introduction</a></li>
                <li><a href="#places">Famous Places</a></li>
                <li><a href="#facts">Fun Facts</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="introduction">
            <h2>Introduction</h2>
            <p>New York City (NYC) is the most populous city in the United States. It is known for its significant impact on commerce, finance, media, art, and fashion.</p>
        </section>
        <section id="places">
            <h2>Famous Places</h2>
            <ul>
                <li>Statue of Liberty</li>
                <li>Central Park</li>
                <li>Empire State Building</li>
            </ul>
        </section>
        <section id="facts">
            <h2>Fun Facts</h2>
            <p>Did you know that the New York Public Library has over 50 million books and other items and is the second largest library system in the nation after the Library of Congress?</p>
        </section>
        <img src="new-york-city.jpg" alt="A view of New York City" width="500">
    </main>
    <footer>
        <p>Contact us: <a href="mailto:info@example.com">info@example.com</a></p>
    </footer>
</body>
</html>


Explanation of Code:

<!DOCTYPE html>: Indicates the HTML version and document type (in this case, HTML5).

<head> Section:

  • <meta charset="UTF-8">: Indicates the website's character encoding.
  • <title>: Modifies the title of the webpage shown in the browser tab.
  • <meta name="description">: Offers a succinct synopsis of the page, beneficial for search engine optimization.
  • <link>: Provides a URL for an external CSS style file (which isn't in this example, but can be added).

<header>:

  • includes the page's primary header (<h1>) and a navigation bar containing links that normally let visitors navigate to other parts of the page.

<main>:

  • includes several <section> elements, each devoted to a distinct content area such as an introduction, a list of well-known locations, or interesting information.
  • Every section consists of a header (<h2>) and content (lists or paragraphs).

<img>: Shows a picture of New York City, which is relevant to the content in this case.

<footer>:

  • includes a mailto link for emails along with contact details.

This project improves learning and retention of HTML abilities by encouraging the actual use of semantic webpage organization in addition to introducing the fundamentals of HTML structure.

 

logo

HTML

Project Overview

Beginner 5 Hours

The "About My Favorite City" webpage will be built by the students. The page will have an organized design with the following elements:

  • <head> contains the metadata and page title.
  • a section heading bearing the name of the city.
  • a navigation bar that contains connections to the page's many parts.
  • The main information is divided into parts for entertaining facts, well-known locations, and a quick introduction.
  • A picture of the city.
  • a contact information footer.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About My Favorite City</title>
    <meta name="description" content="A simple HTML page about my favorite city, showcasing various HTML elements and structure.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>New York City</h1>
        <nav>
            <ul>
                <li><a href="#introduction">Introduction</a></li>
                <li><a href="#places">Famous Places</a></li>
                <li><a href="#facts">Fun Facts</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="introduction">
            <h2>Introduction</h2>
            <p>New York City (NYC) is the most populous city in the United States. It is known for its significant impact on commerce, finance, media, art, and fashion.</p>
        </section>
        <section id="places">
            <h2>Famous Places</h2>
            <ul>
                <li>Statue of Liberty</li>
                <li>Central Park</li>
                <li>Empire State Building</li>
            </ul>
        </section>
        <section id="facts">
            <h2>Fun Facts</h2>
            <p>Did you know that the New York Public Library has over 50 million books and other items and is the second largest library system in the nation after the Library of Congress?</p>
        </section>
        <img src="new-york-city.jpg" alt="A view of New York City" width="500">
    </main>
    <footer>
        <p>Contact us: <a href="mailto:info@example.com">info@example.com</a></p>
    </footer>
</body>
</html>


Explanation of Code:

<!DOCTYPE html>: Indicates the HTML version and document type (in this case, HTML5).

<head> Section:

  • <meta charset="UTF-8">: Indicates the website's character encoding.
  • <title>: Modifies the title of the webpage shown in the browser tab.
  • <meta name="description">: Offers a succinct synopsis of the page, beneficial for search engine optimization.
  • <link>: Provides a URL for an external CSS style file (which isn't in this example, but can be added).

<header>:

  • includes the page's primary header (<h1>) and a navigation bar containing links that normally let visitors navigate to other parts of the page.

<main>:

  • includes several <section> elements, each devoted to a distinct content area such as an introduction, a list of well-known locations, or interesting information.
  • Every section consists of a header (<h2>) and content (lists or paragraphs).

<img>: Shows a picture of New York City, which is relevant to the content in this case.

<footer>:

  • includes a mailto link for emails along with contact details.

This project improves learning and retention of HTML abilities by encouraging the actual use of semantic webpage organization in addition to introducing the fundamentals of HTML structure.

 

Similar Data Science Tutorials

Related tutotials

Frequently Asked Questions for html

line

Mail us :

Address :

India

Categories

Copyrights © 2024 letsupdateskills All rights reserved