Sample Website

Create a project 03-sampleWebsite that:

  1. has two pages of content that link to each other (HTML)
  2. uses logical header, nav, main, and footer sections on both pages
  3. uses styling to format the content consistently (CSS)

Instructions

  1. After logging into repl.it, click "+ new repl", and select "HTML, CSS, JS" for your environment. A random name will be given to your project, but you should change it to this: 03-sampleWebsite

  2. To create the content for this site, use the HTML file index.html. Between the <body> and </body> tags, place a series of HTML commands that will display some information on the site. Those commands should include at least one example each of the following tags:

    • The header tags <h1> and </h1>
    • Paragraph tags <p> and </p>
    • An unordered list using <ul>, <li>, </li>, and </ul>, OR
      an ordered list using <ol>, <li>, </li>, and </ol>
    • The bold tags <b> and </b>
    • The italics tags <i> and </i>
    • Anchor tags <a href="page2.html"> and </a> to link to a second page of the website, as well as a link on that second page to link back to the first.
    • Anchor tags <a href="mailto:your_email_address">your_email_address</a> for your contact information

    Include a second page on the website that complements the first. This might be an About page with some brief biographical information, a Links page with links to other websites, etc.

  3. Content on a webpage can often be categorized into a few different logical divisions (divs) based on the kind of content that's in there. You can add a series of <div> </div> tags in the body of your page, identifying:

    • the header that will be displayed at the top of your webpage
    • the nav menu section which has links to other pages that can be reached from this one
    • the main section where the content of this page goes—text, graphics, etc.
    • the footer section with copyright or other information

    Because there is only one of each of these sections on the page, you'll identify that section using the id indicator:

     <div id="header">
     <h1>Name of website here</h1>
 </div>

    Include these logical divisions on both pages of your website.

  4. The content and logical divisions on your pages can be given styling to customize its appearance. Use CSS styling in the styles.css file that your website will use to present its content. Examples of how to do that include:

     h1 { font-size: 150%; font-style: bold; color: #ff0000; }
 #header { margin: 0; padding: 0; background-color: #000000; }

Extension

Because the header, nav, main, and footer divs appear on almost every webpage, the most recent HTML/CSS specifications have established these as tags in their own right. So instead of having

<html>    
    <head>
    </head>
    <body>
        <div id="header">
            <!-- Your header code would be in here -->
        </div>

        .
        .
        .

    </body>
</html>

you can write

<html>
    <head>
    </head>
    <body>
        <header>
            <!-- Your header code would be in here -->
        </header>

        .
        .
        .

    </body>
</html>

...which has the effect of cleaning up the page a little.

Rewrite your webpage code to take advantage of the header, nav, main, and footer tags.