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 ©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.
Download
By downloading the following file, you agree to the license terms
Downloaded 77x (87.71 kB)
Application includes source codes in language HTML