Lesson 15 - Creating subpages and a contact form

In the previous lesson, Fixed navigation menu and positioning in CSS, we finished our website's layout. In today's lesson, we're going to finish up each individual subpage and get ready to upload our website to a web host.

You won't learn anything new today. Today is mostly just about putting what you have learned up until now into practice.

Layout links

Open up the layout.html file for the last time, and add links to each of the subpages in the navigation menu:

<ul>
    <li class="active"><a href="index.html">Home</a></li>
    <li><a href="about-me.html">About me</a></li>
    <li><a href="skills.html">Skills</a></li>
    <li><a href="references.html">References</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

Creating subpages

You're probably wondering how we'll get all of the subpages to display in our layout.

Frames

Back in the old days, frames (the <frameset> tag) were used for these purposes. They allowed a single layout definition and from then on displayed the subpages in frames. This approach, however, caused many problems (especially for search engines). Which is why frames were removed from HTML in version 5 and are no longer valid. Do not under any circumstance use <frameset> when making websites!

Table layout

Unfortunately, the second approach isn't all that much better. It involved using an HTML table to set up the layout. The reason this approach is flawed is because tables render elements differently depending on which one it is. However, tables allow us to add inline frames (<iframe>) into them which make their height fit the window height. Once this is done, we would be able to display any subpage within said frame. Either way, using a table to set up a layout is unsemantic because tables are only meant to be used to mark tables, not an entire page. Which, once again, brings problems in regards to search engines.

This is how an entire website is accessible through a single URL (the one where the frame is). However, you will not be able to link subpages. If you tried to, they'd open without a layout and with the wrong width. If you use frames, you wouldn't be able to tell someone to: "Check out my list of skills, here is a link - http://address.com/skills.html". Instead, you would have to tell them to: "Go to address.com and click on Skills". I'm sure you can imagine how unpractical it would get with lots of subpages. Also, your SEO (Search Engine Optimization) wouldn't be very good.

Server-side language

The correct solution would be to use another programming language that runs on the server-side, and that inserts content into your layout automatically. You could also have it add the layout around subpages. As you may have guessed, the preferred language for these purposes is PHP. Unfortunately, you don't have the knowledge required to use it. You can read all about it in our PHP courses, but we will not be able to put it to use in this case.

The reason why I brought all of this up is that there are outdated tutorials out there on the Internet. Where beginners learn to use tables or frames to set up their layouts. Well, many people, including me, highly discourage doing so

Copying

You probably noticed that none of the approaches mentioned above would work on our layout. Our solution will be simple, we'll just copy the layout to every subpage. So each subpage of our website will contain the same layout, but with different contents. Although copying the layout all over again is pretty impractical, it's the best we can do with what you currently know. While still keeping our website valid and being able to link to our subpages.

We'll remove index.html from the folder where our website is and rename the layout.html file to index.html. We've just made the first subpage! We already know that index.html is the first page that a browser opens when we click on a website. In other words, it is the home page.

Subpages

Now, add the layout to all of the other subpages, starting with the contact subpage.

Contact

Let's modify the contact.html page so that it has the same layout. We'll do this simply by moving the original contents to the article <section>. Don't forget to change the title in the page head, the title on the article header, and to set the "active" class to the "contact" item on the menu.

Contact form

ICT.social offers simple contact forms that you can add to your websites. We have one where you can have a visitor fill a message in a form and have the form send it to your email address. You can access it in the web tools section under the name MailForm. I'm sure you will find it useful for your new website. Once you create a form you'll get a code that you'll be able to insert into your HTML.

The complete contact.html page will look something like this:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <title>Contact me</title>
    </head>

    <body>
        <header>
            <div id="logo"><h1>HoBi</h1></div>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about-me.html">About me</a></li>
                    <li><a href="skills.html">Skills</a></li>
                    <li><a href="references.html">References</a></li>
                    <li class="active"><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

        <article>
            <div id="centerer">
                <header>
                    <h1>Contact me</h1>
                </header>

                    <section>
                        <p>
                            <img src="images/email.png" alt="email" class="left" />
                            Need to talk to me about something? Email me at <strong>hobi (at) hobi (dot) com or use the form below.</strong>
                        </p>

                        <p class="center">
                            <iframe frameborder="0" scrolling="no" width="500px" height="220px"
    src="http://ict.social/service/mail_form.php?hash=5b5a8cdab989b5e4833544f23501910b">
                            </iframe>
                        </p>

                    </section>
                <div class="clear"></div>
            </div>
        </article>


        <footer>
            Made by &copy;HoBi for <a href="http://ict.social">ICT.social</a>
        </footer>
    </body>
</html>

Notice how I used the "left" class to set the email image to the left, and the "center" class to center the frame that contains the form. The <iframe> tag is something new, I only briefly mentioned it prior to this. The <iframe> tag allows us to insert a frame to include a subpage into the current page. The most important part here is the src attribute, where we specify the subpage address. Iframe, which stands for inline frame, is not like <frameset> and is still valid.

Here is what the page should look like now:

In the next lesson, Styling tables and photo gallery in HTML and CSS, we're going to finish the references and skills subpages. The website with all of the modifications we have made up until now can be downloaded below.

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.