Adding New Elements to Homepage

To start using HTML and CSS to make a nav bar, we need to implement some new fundamental elements into our existing code.

DOCTYPE

Web browsers require certain code in our HTML pages to identify what type the file is. While most browsers are able to understand what we want without much issue, it is still a good idea to specify exactly what we're coding. This is where the <!DOCTYPE html> comes in. For our purposes, just think of this as telling the browser that we're coding a webpage

Task:

At the top of your homepage (index.html), insert a new line and add <!DOCTYPE html> to it. Ask a mentor to double check that you inserted it at the right place.

<html> Element

The <!DOCTYPE html> declaration gives two pieces of information: the type of document (webpage) and the HTML version to expect. It doesn't actually add much structure to the the document.

To add more structure, we need to add an <html> element to our code. The opening tag (<html) will go right after the <!DOCTYPE html> declaration, while the ending tag (</html>) will go all the way at the end of our code (past the ending </body> tag).

You may be wondering why all these elements are required. Essentially, they are just good coding style. They help later when using CSS, but their uses aren't super apparent right now. Bear with the sushi card and keep doing the tasks.

Task:

In your index.html, insert the opening <html> tag after the <!DOCTYPE html> declaration. At the end of the closing </body> tag, add the closing </html> tag. Using your cursor, highlight the entire <body> element. Hit the tab key once to indent everything two spaces for proper code styling.

<head> Element

The head element adds metadata to our webpage. Unlike the <body> element, it gives information about the webpage itself, not actual media to be rendered.

We will use the head element to inject CSS code into our website, and use it to format text and background colors.

Task:

Add the following code directly before the <body> element:

<head>
  <title>NAME THIS THE TITLE OF YOUR WEBSITE</title>
  <link type="text/css" rel="stylesheet" href="style.css"/>
  <meta charset="utf-8"/>
</head>

Confirm with your mentor if it is correct.

<header> and <footer> Elements

<header> and <footer> elements, along with the <main> are simply used to better organize our code. It's really that simple. They go in the <body> element.

Task:

Add three new elements to your <body>:

index.html

<body>
    <header>
    </header>
    <main>
        <!--Copy-paste existing code here-->
    </main>
    <footer>
    </footer>
</body>

Task Continued:

Copy-paste all the code you had in your <body> (e.g: <h1> elements, <p> elements, etc) inside the <main> element. Show to your mentor to verify.

PreviousDay 3: Adding Nav Bar NextAdding New Pages

Last updated 3 years ago

Was this helpful?

DOCTYPE

Task:

At the top of your homepage (index.html), insert a new line and add <!DOCTYPE html> to it. Ask a mentor to double check that you inserted it at the right place.

<html> Element

The <!DOCTYPE html> declaration gives two pieces of information: the type of document (webpage) and the HTML version to expect. It doesn't actually add much structure to the the document.

Task:

<head> Element

The head element adds metadata to our webpage. Unlike the <body> element, it gives information about the webpage itself, not actual media to be rendered.

We will use the head element to inject CSS code into our website, and use it to format text and background colors.

Task:

Add the following code directly before the <body> element:

<head>
  <title>NAME THIS THE TITLE OF YOUR WEBSITE</title>
  <link type="text/css" rel="stylesheet" href="style.css"/>
  <meta charset="utf-8"/>
</head>

Confirm with your mentor if it is correct.

<header> and <footer> Elements

<header> and <footer> elements, along with the <main> are simply used to better organize our code. It's really that simple. They go in the <body> element.

Task:

Add three new elements to your <body>:

index.html

<body>
    <header>
    </header>
    <main>
        <!--Copy-paste existing code here-->
    </main>
    <footer>
    </footer>
</body>

Task Continued:

Copy-paste all the code you had in your <body> (e.g: <h1> elements, <p> elements, etc) inside the <main> element. Show to your mentor to verify.