Activity 19: Research CSS

Document Structure:

• <!DOCTYPE html>: This line declares the document type as HTML5, the latest version of HTML. It tells the browser how to interpret the code.

• <html lang="en">: This tag marks the beginning of the HTML document. The lang attribute is set to "en" for English, indicating the language of the content.

  • <head>: This section houses metadata about the HTML document, such as the character set, viewport settings, and the link to the external stylesheet.

    • <meta charset="UTF-8">: Specifies the character encoding for the document, ensuring correct display of characters.

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design, making the website look good on different devices.

    • <title>Simple HTML with External CSS</title>: Sets the title of the HTML document, which appears in the browser tab.

    • <link rel="stylesheet" href="style.css">: Links the HTML document to an external CSS file named "style.css". This allows you to separate your styles from your HTML code.

  • <body>: This section contains the visible content of the webpage, everything the user sees.

2. Header:

• <header>: This semantic tag represents the introductory part of the page, often containing the website's logo, navigation, or a heading.

  • <h1>Welcome to My Webpage</h1>: This is the main heading of the page, using the <h1> tag for the most important heading level.

3. Navigation:

• <nav>: This semantic tag defines the navigation section of the page, typically containing links to other pages or sections.

  • <a href="#">Home</a>: This is a hyperlink, linking to the "#" (current page) for now. You'd replace "#" with the actual URL of the "Home" page.

  • <a href="#">About</a>: Another hyperlink, linking to the "#" (current page) for now. You'd replace "#" with the actual URL of the "About" page.

  • <a href="#">Contact</a>: Another hyperlink, linking to the "#" (current page) for now. You'd replace "#" with the actual URL of the "Contact" page.

4. Main Content Section:

• <section>: This semantic tag represents a thematic section of the page, grouping related content together.

  • <h2>About This Page</h2>: A secondary heading for the section.

  • <p>This is a simple webpage created using HTML and styled with external CSS.</p>: A paragraph of text providing information about the webpage.

5. Footer:

• <footer>: This semantic tag represents the footer of the page, typically containing copyright information, contact details, or navigation links.

  • <p>&copy; 2024 My Website</p>: A paragraph containing copyright information.

Important Points:

• External Stylesheet: The use of an external CSS file (style.css) allows for better organization and separation of concerns in web development. You can define your styles in a separate file and easily reuse them across multiple HTML pages.

• Semantic HTML: This code uses semantic HTML5 tags like <header>, <nav>, <section>, and <footer> to provide meaning and structure to the content. This helps with accessibility and search engine optimization (SEO).

• Navigation Links: The href attributes of the anchor tags (<a>) are placeholders. You need to replace them with the actual URLs of the corresponding pages or sections.

  

  1. body:

  • font-family: Arial, sans-serif;: Sets the default font for the entire webpage to Arial. If Arial is not available, a generic sans-serif font will be used.

  • background-color: #f0f0f0;: Sets the background color of the webpage to a light gray.

  • margin: 0; padding: 0;: Removes default margins and padding from the body, ensuring the content starts right at the edge of the browser window.

2. header:

• background-color: #4CAF50;: Sets the background color of the header to a green color.

• color: white;: Sets the text color in the header to white for good contrast against the green background.

• text-align: center;: Centers the text within the header.

• padding: 20px;: Adds space around the text inside the header for better visual separation.

3. nav:

• text-align: center;: Centers the navigation links within the navigation bar.

• margin: 20px 0;: Adds vertical margin to the navigation bar to separate it from the header and the main content.

4. nav a:

• margin: 0 15px;: Adds horizontal margin to the left and right of each navigation link, spacing them apart.

• text-decoration: none;: Removes the default underline from the links.

• color: #4CAF50;: Sets the color of the links to the same green color as the header background.

5. section:

• padding: 20px;: Adds space around the content within each section.

• text-align: center;: Centers the text within each section.

6. footer:

• background-color: #333;: Sets the background color of the footer to a dark gray.

• color: white;: Sets the text color in the footer to white for contrast.

• text-align: center;: Centers the text within the footer.

• padding: 10px;: Adds space around the text in the footer.

• position: fixed; bottom: 0; width: 100%;: These properties make the footer stay fixed at the bottom of the viewport, even when the content is longer than the screen height.

• 

  MY OUTPUT: