User Tools

Site Tools


Sidebar

Chapter 1: Internet, Networks and TCP/IP

Chapter 2: The LINUX operating system - Setting up a Linux Web Server

Chapter 3: Your first webpage, Learning HTML and CSS

Chapter 4: Building Dynamic Websites with PHP in progress

Chapter 5: Web forms under construction

Chapter 6: Developing your first Bioinformatics web application under construction

Chapter 7: The PHP programming language: strings, arrays, functions, cycles, conditional statements, regular expressions under construction

Chapter 8: Sample Bioinformatics Web Applications under construction

chapter_3_-_your_first_webpage_-_learning_html_and_css:website_page_layouts

Page Layouts

The layout of a page determines the arrangement of the various elements and sections.

In a minimal layout, we should have at least three elements:

  • the header
  • the contents part
  • the footer

A key concept here is that the header and footer are typically repeated in each and every page of a website. With exceptions and variations of course.

The header and footer can each have varying degrees of complexity.

Headers

There are no fixed rules for what should be in a header. However there are a number of elements typically included:

  • Logo
  • Site title
  • Slogan
  • Navigation menu
  • Search box

Again, none of these are mandatory. The header itself is optional. However, if you find yourself designing an header, these are all elements you might want to consider and include.

Let's take for example the current header of the European Bioinformatics Institute (EBI) website, where some of these elements are used.

Figure 3-10-2: The header of the EBI website

Header Markup

How are the various sections of the header rendered in HTML? No fixed rules, again.

  • In HTML5 all the header contents could be enclosed in an “header” tag.
  • The logo will be an image (img tag).
  • The title could be an h1
  • The slogan could be an h2.
  • The navigation menu could be an ul list.
  • The search box is a so called “web form”, where the site can collect an input from the user, in this case a keyword to be searched across the web site, and process the input thanks to some kind of script running on the server. We will dedicate a full chapter of this book to web forms.

If an header tag is in place, you can use it as CSS context information to assign specific styles to header elements:

header h1,h2,h3,h5,h5 {color : green;}
header a {text-decoration : underline;}

Remember that as discussed here, you could in principle have several header or footer elements in a page. In this case, you could assign a class to the “main” header:

<header class"main-header">
...
</header>

And then use this as context:

header.main-header h1,h2,h3,h5,h5 {color : green;}
header-main-header a {text-decoration : underline;}

Footers

In the last years, especially on big web sites, footers are increasingly becoming little worlds on their own, often holding a full fledged, nicely organized site map, for example.

Let's have a look at the footer of the NCBI Pubmed web site, to clarify this point:

We invite you to make a pubmed search and check that this footer (this might and will change in time with respect to our snapshot above!) is indeed preset in all the pubmed pages.

The footer of the European Bioinformatics Institute (EBI) website follows a similar pattern:

The footer could also be extremely simple, containing for example just a contact e-mail address, a copyright notice, a graphical element. In HTML5 all footer contents could be enclosed in a “footer” tag. Given the variability of the footer contents, we will not give any markup guidelines.

If a footer tag is in place, you can use it as CSS context information to assign specific styles to footer elements:

footer h1,h2,h3,h5,h5 {color : green;}
footer a {text-decoration : underline;}

Contents Section

In the simple model in figure 3-10-1, the actual contents of a page, the only thing (as first approximation) that changes from one page to another in the same web site, or website section maybe, are included in a “contents” block sandwiched between header and footer.

This contents block could be a single “box”, or could be partitioned or subdivided in some way, to create a more or less complex layout.

The main way we can think about sectioning the contents area is to create columns. For example a side column, either on the left or right side, could be dedicated to navigation elements and side boxes with various information.

Figure 3-10-5: A layout with columns in the the contents section

Sectioning possibilities are endless, and only depend on your creativity and the actual needs of the particular website you are working on.

For example news sites, such as newspapers web site, that must present a lot of varied contents in their home pages, will typically have a complex arrangement, where the main columns are further subdivided to accomodate a variety of boxes, with different styles applied to them so as to make them easily recognizable by the visitor.

Figure 3-10-6: A complex page layout

Creating page layouts with HTML and CSS

How can we achieve such layouts by using HTML and CSS?

The main elements that we propose to use, for the creation of layouts for this course, are:

  • header
  • aside
  • div
  • footer

In HTML4.01, we would have just used divs. The new tags in HTML5 provide added flexibility and a more semantic approach to the markup and styling processes.

We will provide an example of how to achieve the layout in figure 3-10-5. This is a basic layout that should be suitable for most projects. It can of course be elaborated further, and used as starting code to achieve more complex layouts.

We have already provided instructions here to style the html and body tags so as to get a basic rectangle, 980 pixels wide, or so, centered in the page. This provides a starting basis to design our web page template to get the layout in figure 3-10-5.

We will have the following main page sections (see figure 3-10-5):

  • Header, delimited by “header” tags
  • Left sidebar, delimited by a div with id “sidebar”
  • Within the left sidebar, a few “aside” blocks in which the contents of the sidebar are organized
  • Main contents, to the right of the sidebar. Delimited by a div with id “main-contents”
  • Sidebar and main contents will be placed within a div with id “center-contents-block”
  • Footer

Here's the basic code. It only provides an empty, generic layout for the page. We will follow a progressive enhancement approach: first a correct HTML, then styling with CSS.

HTML source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>...</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <header>
    ...
    </header>
    
    <div id="center-contents-block">
        <div id="sidebar">
            <aside>
            ...
            </aside>
            <aside>
            ...
            </aside>        
        </div>
        <div id="main-contents">
        ....
        </div>
    </div>
    
    <footer>
    ...
    </footer>
</body>
</html>

Very little styling is needed to arrange the sections as in figure 3-10-5: we have to define the widths of the sidebar and the main-contents divs and somehow place the sidebar div to the left of the main-contents div. With these two specifications, in addition to the body tag styling we mentioned above, we will have the layout in figure 3-10-5.

Here are the essential CSS declaration we need. Mind that, to get a really nice layout, much more than this is needed. Those are just the very basic declarations to achieve the relative arrangement of sections shown in figure 3-10-5.

As usual, we will place those declarations in the css/style.css file that is linked from the head of the HTML page.

body {
    margin-left : auto;
    margin-right : auto;
    width : 980px;
}

#sidebar {
    width : 300px;
    float : left;
}

#main-contents {
    width : 660px;
    float : left;
}

aside {
    -moz-border-radius: 15px; /* those two declaration are to get round boders for the asides, as in fig 3-10-5, across browsers */
    border-radius: 15px;
}

footer {
    clear : both;
}

You may note that the added widths of sidebar plus main-contents is not 980 pixels, but 960. This is because, typically, we will also add 10px right and left paddings for the body at a certain point. On calculating widths, all the pixels, including margins and paddings of the elements themselves and surrounding/parents elements should be considered, otherwise the final result might not be satisfying.

The key on having the sidebar to the left of the main-contents div is to use a float:left declarations for BOTH (although this might seem counterintuitive at this moment) the sidebar and main-contents divs. If we had 3 columns (divs) instead of just 2, the three of them should be assigned a float:left to get them align inline.

The possibility to have divs “stacked” on each other in an inline arrangement, by attributing them a float:left declaration is a simple paradigm that deeply changed the way layouts are achieved in HTML. Before the introduction of this feature, the only way to achieve complex layouts was to use tables, often heavily nested. All these nested tables resulted in a code that was not necessarily easy to manage. Divs coupled with float:left declarations have virtually replaced tables, for layout purposes.

When we are done stacking divs inline, we should “close the floating” by declaring a “clear:both” on the first element after the floating left divs. In this example we do so at the level of the footer. We could have done it on another div, on a paragraph, or on any other element we want to escape the “floating” of the preceding div with a float:left declaration.

Essential Exercise

As an exercise, we leave it to you to combine the code provided in the previous section with the one in this section to create a basic page with a nice layout, maybe like the one in figure 3-10-5 and a personal style. Select a nice color scheme and go ahead in the creation of your own page and styles. Keep in mind that this page will be the foundation for subsequent work. Your own page/layout/style will be a template for the input and output pages of all the Bioinformatics web applications that you will develop during this course, and hopefully in the future.

You now have all the elements to design your own web pages. On stepping up from a web page to a web site, there are a number of things to consider. In particular, when the number of pages grows, it becomes increasingly difficult to manage and edit each and any web page of the site individually.

Just to make an example, imagine you have a 10 pages website in which each page has a navigation menu that links to all the pages in the site. One day, you add one more page, page 11. In a static web site, you will need to edit each of the 10 pages to add page 11 to the navigation menu of each page. You see how if you have 100 pages instead of 10, the matter gets complicated (and therefore prone to errors and less appealing to do).

We need to put in place some mechanism that allow us to control at least certain parts of the pages, for example their general layout and appearance and their navigation menus in some central, common location. In order to do this, we need to switch from the static website paradigm, to so called “dynamic” web sites.

In order to build a dynamic web site we necessarily need some form of programming language, HTML and CSS, although still essential, are not enough. For this reason, in the next chapter we start learning the basics of PHP. You will see that for the mere purpose of turning a static site into a dynamic site, we only need a few PHP statements that are extremely easy to understand and manage, even if you dont't even know what programming is about. So you can move to the next chapter with no fear.

Chapter Sections

Discussion

Enter your comment. Wiki syntax is allowed:
FJPZS
 
chapter_3_-_your_first_webpage_-_learning_html_and_css/website_page_layouts.txt · Last modified: 2013/03/16 10:39 by cellbiol