Web Design Wikiclass | Lecture / Basic Elements of a Web Page

A Web Design Lecture by Steven Choy

Overview: Before you design your website, you will need to understand what elements you can use in your design. A web page typically contains the following elements: body copy, headings, hyperlinks, images, lists, tables, header and footer, navigation, search box, and scrolling areas.

Introduction to HTML

What do we mean by "HTML"?

It is the web page content received by a browser. It tells the browser what to display on the user's screen.

It does not necessarily mean HTML files in the server.

Examples: all of the following URLs will result in a HTML received by a browser:

      about.html
      about.php
      about.aspx
      about.jsp

General structure of a HTML

HTML = head information + document body

      <!DOCTYPE . . . >
      <html>

        <head>
          <title>Insert your page title here</title>
          . . . .
          . . . .
        </head>

        <body>
          . . . .
          . . . .
        </body>

      </html>

Basic text attributes

      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      <p>Paragraph</p>

Images

      <img src="url" alt="text">

Hyperlinks

      <a href="url" title="text">...</a>

Lists (bulleted list, numbered list , definition list)

      <ul>
        <li>Bullet point</li>
        <li>Bullet point</li>
        <li>Bullet point</li>
      </ul>

      <ol>
        <li>First point</li>
        <li>Second point</li>
        <li>Third point</li>
      </ol>

      <dl>
        <dt>definition term<dt>
          <dd>definition deail<dd>
        <dt>definition term<dt>
          <dd>definition deail<dd>
        <dt>definition term<dt>
          <dd>definition deail<dd>
      </dl>

Tables

Basic table attributes:

      <table>
        <tr>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </table>

Web forms

      <form action="URL" method="GET">
        <select name="name">...</select>
        <input type="checkbox"></input>
        <input type=". . ."></input>
        <input type=". . ."></input>
      </form>

Body copy

Body copy is the main content of the web page (such as news story or product description).
You can easily identify body copy in a good website.
Content is king, so make sure people can read it easily.
Suggestion: use reasonable size font on a plain white or light-colored background.

Headings

A well-coded web page should have one (and only one) main heading (which is coded using <h1> tag in HTML).
Sub-headings help the visitor get straight to the information they want, without having to read the whole page.
HTML has six levels of heading: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
<h1> tag should be near the top of the page
Reading for you: Headings, heading hierarchy, and document outlines | 456 Berea Street

HTML headings, created with the h1-h6 elements, are very useful and should be used for anything that visually looks or acts like a heading. This is partly because it is the semantically right choice, partly because it may help your search engine rankings. But the most important reason is that using real headings improves accessibility.

Some suggestions:

Each document should have a logical heading structure that starts at level 1 and doesn’t skip any levels

Anything that visually looks like a heading should be marked up as a real heading

The title of the document’s main content should be a level 1 heading

There should be only one level 1 heading in each document

More reading: HTML Headings for Accessible Web Design | Raymond Selda

Hyperlinks

Hyperlinks are words or images which take your visitors to another page (or another part of the same page) when you click on them.
Hyperlinks are normally underlined with a different color from the rest of the body copy.
Should you follow the convention or make your website different from the rest? (for class discussion)
Readings: 11 Link Usability Tips, Coding Horror: Don't Click Here: The Art of Hyperlinking

1) Ensure your links are large enough to easily click.

2) The first link is the most important one.

3) Don't link everything.

4) Don't radically alter link behavior.

5) Don't title your link "Click Here".

6) Don't use long text to title your link.

7) Don't include icons on every link.

8) Don't make your content depend on links to work.

9) Don't hide your links.

10) Don't mix advertising and links.

11) Don't obfuscate your URLs.

Images

Almost every website uses images.
Three functions of images in a website:
- as part of body copy (being part of the content),
- as part of layout and interface design,
- as an icon for user interaction (call for action).
Foreground images (using HTML <img> tags)
background images (using CSS background-image property), tiled images (background image with repeat property)
Image file types: JPEG, PNG, GIF. How to choose among them?
(We will talk more about images in our future lectures)

Lists

Three types of lists in HTML
- Unordered lists (bullet points)
- Ordered lists (numbered lists)
- Definition lists (used to define words or phrases)

      <ul>...</ul> Creates a bulleted list
      <ol>...</ol> Creates a numbered list
      <li>...</li> Precedes each list item, and adds a number

      <dl>...</dl>  Creates a definition list
      <dt> Precedes each definition term
      <dd> Precedes each definition

<ul>

  <li>Apple</li>

  <li>Banner</li>

</ul>

<ol>

  <li>Apple</li>

  <li>Banner</li>

</ol>

<dl>

   <dt>Cascading Style Sheets</dt>

   <dd>Style sheets are used to provide presentational suggestions for structured documents marked up in XML or HTML.</dd>

</dl>

[Get Code]

Style lists with CSS: You can use CSS to style a list to look any way you want.

Tables

Tables are used to present complex information (e.g. financial information) in an easy to understand way.
Don't use tables for layout

"Although many sites still use tables for layout, it's better to use CSS for layout and just use tables for format data."

An example of a valid (xhtml 1.0 strict) table markup:

<!-- Table markup-->

<table id="...">

        <!-- Table header -->

                <thead>

                        <tr>

                                <th scope="col" id="...">...</th>

                                ...

                        </tr>

                </thead>

        <!-- Table footer -->

                <tfoot>

                <tr>

                      <td>...</td>

                </tr>

                </tfoot>

        <!-- Table body -->

                <tbody>

                        <tr>

                                <td>...</td>

                                ...

                        </tr>

                        ...

                </tbody>

</table>

[Get Code]

For your possible interest: Top 10 CSS Table Designs - Smashing Magazine

Forms

Forms play an important role in web-based applications.
We will have a detailed study later.
An overview for you:

HTML Form Gallery by the Wufoo

HTML Forms and Input - W3School.com

A simple example:

<FORM ACTION="form2email.php" METHOD="POST">

    Name: <INPUT TYPE="TEXT" NAME="Name" VALUE="" SIZE="25" MAXLENGTH="50"> <BR>

    Email: <INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50"><BR>

    <INPUT TYPE="SUBMIT" NAME="submit" VALUE="Sign Me Up!">

</FORM>

[Get Code]

What happens when you push the button?
Checking the data - Data visitors input should be validated.
- Data validation can be done before the form is submitted using Javascript.
- Data validation can be done after the form is submitted to the server.

Common elements of a Web site

Header
Footer
Navigation (Main menu bar, sub-menu bar)
Search box
Body copy (main content)

Header and Footer

Headers usually contain a site's logo and will often have the site's navigation and a search box.
Footers usually contain less important items like a copyright notice and links to the site's "terms and conditions" or "privacy policy".
What are the benefits of consistency from page to page? (for class discussion)

Navigation

A website's navigation is a collection of links grouped together in one area of the web page

Search box

A search box allow people to search your site
Where should your search box go?

Most visitors expect to see a search box in the top-right of the web page.

How to add a search box?
- Get a web developer to write a specialized search program for your site
- Use Google's free site search
- Download and customize some search scripts (mnogosearch.org, site-search-pro.com)

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.