HTML + CSS - Lesson 6


Adding Webpages

In this lesson we will be linking our home page to other pages and learning how to code multiple webpages at once.

To begin, as in the previous lessons, we made buttons that we would eventually link as other web pages.

First, we need to create other html files.

To do this in the code writing software click File → NewFile

New File

Once you do that there should be a file called “Untitled,” right click on it and press “Save As”

Save As

Save this file as the name of the page .html. For example: myblog.html

Complete the previous steps for the remaining buttons.

This is how your files should look in Visual Code Studio:

Files

Now that we have these new files, we need to link them across the website.

To do this we need to go into the HTML under h2 where our buttons are.

First we will add <nav> </nav> tags or navigation tags which, as in the name, allow us to navigate our website.

Then we will add <ul> </ul> tags which state that the following information is unordered and the order does not matter.

To link the buttons to the other pages:

     <a href =“webpage.html”>My Blog
    

The reason why we have the button tags now in the middle instead of as separate parts is because we want the buttons themselves to be individually linked.

So, the code looks like this:

    <!DOCTYPE html>
    <html>
        <link rel="stylesheet" href="style.css">
        <head>
            <title>
                Your Website Name!
            </title> 
        </head>      
        <body>
            <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
            <h1>Website Name
            <h2> 
                <nav>
                    <ul>
                        <a href="myblog.html">My Blog
                        <a href="photos.html">Photos
                        <a href="aboutme.html">About Me
                    </ul>
                </nav>               
            </h2>
            <p class="home">Website Name
            <section>Welcome to my website, I will be sharing...
        </body>
    </html>
    

If you were to save the code and test the buttons you would end up with something like this:

    p{   
         color: white;
         text-align: center;
         display: flex;
         align-items: center; 
         text-align: center;
         justify-content: center;
         font-size: 100px;
         background-image: url(space.jpg);
         background-size: cover;
         background-position: inherit;
         height: 600px;    
    }
    

Now let’s see how this part of our website looks!

File

The reason for this is because there is no code in the other files we made earlier in this lesson.

Now, since we have a previously made and designed webpage, we can use that code to make it easier to make the other webpages. We can do this by creating a separate CSS file and then simply linking it to the html files.

Following the same process as before, create a new file but name it style.css. The .css is important just as using .html was for the other files.

Cut and paste all of the css work in the “index.html” file into the “style.css” file.

    body {
         font-family: 'Montserrat', sans-serif;
         color: white;
         text-align: center;
         background:rgb(19, 60, 121); 
    
    p{	 color: white;
         text-align: center;
         display: flex;
         align-items: center; 
         text-align: center;
         justify-content: center;
         font-size: 100px;
         background-image: url(space.jpg);
         background-size: cover;
         background-position: inherit;
         height: 600px;    
    }
    button {
         padding: 10px;
         font-size: 20px;
         font-family: 'Montserrat', sans-serif;
         background-color: transparent;
         color: white;
         border: 1px solid white;
         text-align: center;
         align-items: center;
     }
     button:hover {
         background-color:  white;
         color:rgb(19, 60, 121); 
         border: 2px solid white;
     }
     section { 
         color: white;
         padding: 30px;
         margin: 40px;
         align-items: center;
         font-size: 30px;
     }
    

Note how the index.html file does not contain a "style" tag anymore as the css is in its own file.

Now, it is time to link the css to the html.

Below the "head" tag in the index.html file, add a new tag.

The code should specifically read:

<link rel=“stylesheet” href=“style.css”>

The “rel” states the relationship between the two different types of code. The “href” just as previously, creates the link to the other file.

The code should look like this: ​

    <link rel="stylesheet" href="style.css">
    

Now, if we were to test the code, we should see that our website home page looks just as it had at the end of Lesson 5. (Note: makes sure all of the files are saved using Ctrl+S or File → Save.)

Next, we are going to copy and paste the code from the index.html file into the other html files. Although we are copying our home page, in the next lesson we can edit this to create a blog, a digital photo album, and an about me section.

After you do this, all of the files should have the same code.

After saving, when we go to our website and click the different buttons, it may appear that we are not moving to the different pages. However, we can make sure of this by checking the search bar.

For example, after clicking the “My Blog” button my search bar displayed:

File

Now we have new webpages. In the next lesson, we will edit and style them.

< Previous Next >