You are on page 1of 7

ALDERSGATE COLLEGE Instructional Module in HTML

HIGH SCHOOL

Module Number: 8
Title: Web Page Structure

Teacher: Mr. Ricardo Rey V. Lopez


Level: Grade 10
Allotted Time: 4hrs

OVERVIEW
This module is designed for students to Learn how to structure web page using semantic tags, and how to work out the
structure of a simple website.

OBJECTIVES
Upon completion of this module, you should be able to:
1. Define
a. How to plan a basic website structure
b. The different semantic tags

PRETEST
Directions: Read carefully and answer what is being ask. Write your answer on the blank provided below on each
item.
1. When creating a Web form in HTML, what is the purpose of the name attribute?
_____________________________________________________________________
2. If a Web page author wants her users to select only one option among several specified on a form, which input
type should she specify?
_____________________________________________________________________
3. In an HTML form, the <input> tag is used to:
_____________________________________________________________________

TOPIC
In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of
block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content
column"). This module looks into how to plan a basic website structure, and write the HTML to represent this structure.

Basic sections of a web page


Webpages can and will look pretty different from one another, but they all tend to share similar standard components,
unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured:

header:
Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one
webpage to another. HTML5 provides the <header> element, which can be used to define such a region.

<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

navigation:
Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually
remains consistent from one webpage to another — having inconsistent navigation on your website will just lead to
confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than an
individual component, but that's not a requirement; in fact, some also argue that having the two separate is better for
accessibility, as screen readers can read the two features better if they are separate. The HTML5 <nav> element can be
used to identify a navigation menu.

Page 1 of 7 Ricky Lopez


<main>

  <h1>Apples</h1>
ALDERSGATE COLLEGE
  <p>The apple is the pomaceous fruit of the Instructional Module in HTML
HIGH SCHOOL
apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
<nav class="menu">
    <p>These bright red apples are the most
  <ul> common found in many supermarkets.</p>
    <li><a href="#">Home</a></li>
    <p>...</p>
    <li><a href="#">About</a></li>
    <p>...</p>
    <li><a href="#">Contact</a></li>
  </article>
  </ul>
</nav>
  <article>
    <h2>Granny Smith</h2>
main content:
    <p>These juicy, green apples make a great
A big areafilling for apple pies.</p>
in the center that contains most of the unique content of a given webpage, for example, the video you want to
watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. This is the one part of the
    <p>...</p>
website that definitely will vary from page to page! Use the HTML5 <main> element to identify the main content region of a
    <p>...</p>
web page or application.
  </article>
</main>

sidebar:
Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the main content (for example
on a news article page, the sidebar might contain the author's bio, or links to related articles) but there are also cases where
you'll find some recurring elements like a secondary navigation system. Use the HTML5 <aside> element to identify regions
that support the main content, yet are separate and meaningful sections on their own; For example, a side note explaining
or annotating the main content.

<article>
Page 2 of 7 Ricky Lopez
  <p>The Disney movie <cite>The Little Mermaid</cite> 
was first released to theatres in 1989.</p>
  <aside>
ALDERSGATE COLLEGE Instructional Module in HTML
HIGH SCHOOL

footer:
A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It's a place to put
common information (like the header) but usually, that information is not critical or secondary to the website itself. The footer
is also sometimes used for SEO purposes, by providing links for quick access to popular content. HTML5 provides the
<footer> element, which can be used to define such a region.

<footer>
    Some copyright info or perhaps some 
author info for an &lt;article&gt;?
</footer>

A "typical website" could be structured something like this:

Content Structure
Page 3 of 7 Ricky Lopez
ALDERSGATE COLLEGE Instructional Module in HTML
HIGH SCHOOL

Articles
The HTML5 <article> element represents a complete or self-contained composition in a web page. Examples of articles
include an item at a shopping site or a news article on a news site.

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

Sections
The HTML <section> element represents a standalone section — which doesn't have a more specific semantic element to
represent it — contained within an HTML document. Typically, but not always, sections have a heading.

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

Div

Page 4 of 7 Ricky Lopez


ALDERSGATE COLLEGE Instructional Module in HTML
HIGH SCHOOL

The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the
content or layout until styled using CSS.

<div>

  <p>Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div>

Planning a simple website


Once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want
to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best
possible user experience. This is called Information architecture. In a large, complex website, a lot of planning can go into
this process, but for a simple website of a few pages, this can be fairly simple, and fun!

1. Common in every page


Bear in mind that you'll have a few elements common to most (if not all) pages — such as the navigation menu, and
the footer content. If your site is for a business, for example, it's a good idea to have your contact information
available in the footer on each page. Note down what you want to have common to every page.

2. Draw a rough sketch


Next, draw a rough sketch of what you might want the structure of each page to look like (it might look like our
simple website above). Note what each block is going to be.

3. Brainstorm
Now, brainstorm all the other (not common to every page) content you want to have on your website — write a big
list down.

4. Sort all content items into groups


Next, try to sort all these content items into groups, to give you an idea of what parts might live together on different
pages. This is very similar to a technique called Card sorting.

5. Sketch a rough sitemap


Now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical
workflow between pages. The homepage will probably be in the center, and link to most if not all of the others; most
of the pages in a small site should be available from the main navigation, although there are exceptions. You might
also want to include notes about how things might be presented.

Activity 8
Page 5 of 7 Ricky Lopez
ALDERSGATE COLLEGE Instructional Module in HTML
HIGH SCHOOL

POST TEST
A. Directions: Which form control element is best suited for the following tasks? When the answer is “input,” be sure to
also include the type. Some tasks may have more than one correct answer.

1. Footer element can’t contain ____________ information.


a) contact information
b) copyright information
c) the author of the document
d) blog post

2. Which element works as a sidebar?


a) header
b) footer
c) nav
d) aside

3. Which of the following specifies the main content of the document?


a) <time>
b) <main>
c) <details>
d) <section>

4. Which element represents a complete or self-contained composition in a web page?


a) <main>
b) <article>
c) <div>
d) <section>

5. Which element represents a standalone section — which doesn't have a more specific semantic element to
represent it — contained within an HTML document
a) <main>
b) <article>
c) <div>
d) <section>

6. Usually a big strip across the top with a big heading, logo, and perhaps a tagline.
a) main
b) header
c) content
d) footer

7. A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It's a place
to put common information (like the header) but usually, that information is not critical or secondary to the website
itself.
a) main
b) header
c) content
d) footer

8. Which element identify regions that support the main content, yet are separate and meaningful sections on their
own
a) main

Page 6 of 7 Ricky Lopez


ALDERSGATE COLLEGE Instructional Module in HTML
HIGH SCHOOL

b) aside
c) content
d) footer

9. Is the generic container for flow content. It has no effect on the content or layout until styled using css.
a) <main>
b) <article>
c) <div>
d) <section>

10. Which element can be used to identify a navigation menu.


a) main
b) navigation
c) content
d) footer

Page 7 of 7 Ricky Lopez

You might also like