Skip to main content
Engineering LibreTexts

4.1: Web Page Header and Footer

  • Page ID
    27552
  • When designing a user interface, an important part of creating a consistent experience is to design a consistent look and feel for the page. To create a look and feel, the first task is to develop and implement consistent page layout. Here that involves creating a header and footer section for the page.

    To start the format for the header should be defined. A typical header presents information such as a title associated with the program or entity, other heading elements (such as the organization), a logo, and author information. Also, in the header is a menu of options for the system, which for now will contain the entries Home, File, and About. The header we will create for this page is as follows.

    Figure 5 - Example HTML header

    Screen Shot 2020-07-04 at 12.13.44 PM.png

    HTML provides two element selectors to make it easy to format the header and the footer of a web page, the and <footer> tags. This section will format the header element.

    4.1.1 CSS Syntax

    CSS code is defined in a section of the HTML web page between <style> and </style> tags 25. Between these tags, CSS code is embedded into the HTML, just as JavaScript was embedded in the HTML. This CSS code contains display elements, or properties, that inform CSS how to render the page. The format for CSS is the following:

    Program 70 - CSS syntax
    
    <style>
        selector {
            attribute1 : value1;
            attribute2 : value2;
        }
    </style>
    

    In CSS, a selector is entered, and then associated with a block of properties to apply to that selector. There are 4 types of selectors that will be covered in this text26. They are:

    1. Element selectors, which are tags such as the and tags.
    2. Class selectors, which apply to a group of items. Class selectors start with a “.”, such as header-icon or .header-desc, and are them referenced using the “class=.header- desc” syntax in the element ag.
    3. Id selectors, which apply to a single element referred to by its unique id. Id selectors start with a “#”, such as “#inputForm”. The id attribute in the tag is used to reference the selector.
    4. Attribute selectors, which apply to attributes of a tag. For example, to make all textboxes which are readonly have a gray background, the following display attribute tag would be use:
      Program 71 – Attribute Selectors
      
      <style>
          input:read-only {
              background-color: lightgray;
          }
      </style>            
      

    This attribute informs CSS to take any input tag which has a read-only attribute and make the background color gray.

    Each of these selectors will be explained in context in the following sections that style the input form.

    Display attributes, or properties, allow the programmer to describe how to display the information that will later be associated with the tag. Properties like font, background-color, border box, indentation, and literally scores of other attributes can be set. A complete list of all attributes that can be set is at https://developer.mozilla.org/en-US/.../CSS/Reference.

    4.1.2 Semantic Tags

    The is an element selector. It is also called a semantic tag.

    Semantic tags are tags that are intended to simply provide formatting information, but have meaning about the information, or structure of the information, on the page web page. To better understand semantic tags, consider some of the tags in HTML that have been deprecated. For example, the <b> (bold) tag says what to bold the text (what to do with it). The <strong> tag describes the text as important, and to render the text as important, normally by bolding it. Similarly, the <i> (italicize) tag has been deprecated in favor of the <em> (emphasis) tag. In both of these examples, the new tags say something about the text, not something to do to the text.

    The tag describes semantic information, that what is contained between the and </header> is a specific part of the page (the header), and not some random division on the page. The header is the block at the top of a page, and the information associated with it is specifically how to format the header of the document.

    4.1.3 Setting up the header block

    The header of a document is the part of the document that is displayed at the top of the web page. The properties to define how the header should appear are set as display attributes when the header tag is defined. The header tag is defaulted as follows in CSS.

    Program 72 – Header definition
    
    <style>
        header {
            display: block;
        }
    </style>
    

    The default tag includes just one attribute, display:block, which specifies that the header sites in a block by itself at the top of the document. In CSS, a block27 attribute means create a space that spans from the left to right margin of the element or page, allowing no other elements to be displayed to the left or the right. This is the normal behavior of a header, which generally spans the entire length of the top of the page. Like any display attribute can be overridden if needed.

    The header for the example page developed in this chapter will be built in stages in the subsections below.

    4.1.4 Changing the background and text colors

    The first attributes to be change will make the box a dark color (we will use slategray) and make the text white. This is done by setting the attributes background-color to slategray, and color to white.

    To make the header stand out more, a box will be placed around the header, using a 2-pixel large blue line. The header is also indented 50- pixels from the sides and top and bottom. This results in a first pass for the header in the following code.

    Program 73 – Header attribute settings
    
    <html>
        <head>
            <title>Please change this to the title of your page </title>
            <style>
                header {
                    margin : 50px;
                    border : 2px solid blue;
                    background-color : slategray;
                    color : white;
                }   
            </style>
        </head>
        
        <body>
            
                <h1>This shows the header style.</h1>
            </header>
        </body>
    </html>                    
    

    The page resulting from this program looks as follows:

    Figure 6 - First pass at the web page header

    Screen Shot 2020-07-04 at 12.29.26 PM.png

    4.1.5 Changing the font size using the

    tag

    The text inside of the header should be larger than the normal text in the document, to make it stand out. Normally text is placed inside of

    (paragraph) tags in a document, and the styling attributes applied to the

    tag. The following example shows how the font-size can be changed for the

    tag to be 150% of its normal size.

    Program 74 – Making the text 150% of the normal size
    
    <html>
        <head>
            <title>Map Example Input Screen </title>
            <style>
                header {
                    margin : 50px;
                    border : 2px solid blue;
                    background-color : slategray;
                    color : white;
                }
                
                p{
                    font-size : 150%;
                }
            </style>
        </head>
        
        <body>
            
                <h1>Map Example Input Screen</h1>
                

    Gettysburg Research Institute

    </p> </header>

    Text to show effect of different

    tag combinations </p> </body> </html>

    When running this page, it is obvious that all the text in the document is 150% of the normal size, not just the text in the header. Changing the

    tag caused the text in all of the

    tags in the entire file to have the increased size of text

    Figure 7 - Second pass at the web page header

    Screen Shot 2020-07-04 at 12.34.34 PM.png

    To correct this so that the

    tag will only affect the header, CSS allows tags to be combined so that changes to only have effect when use inside of a specific division or section of the page. The syntax for this is:

    Program 75 - Combining the header and p tags
    
    header p {
        font-size : 150%;
    }        
    

    The code for the previous page has been changed so that only in the header does the

    tag change the size of the text to 150% of the normal size.

    Program 76 – Paragraph text only affecting the header of the document
    
    <html>
        <head>
            <title>Map Example Input Screen </title>
            <style>
                header {
                    margin : 50px;
                    border : 2px solid blue;
                    background-color : slategray;
                    color : white;
                }
                
                header p {
                    font-size : 150%;
                }
            </style>
        </head>
        
        <body>
            
                <h1>Map Example Input Screen</h1>
                

    Gettysburg Research Institute

    </p> </header>

    Text to show effect of different

    tag combinations </p> </body> </html>

    The result is the

    tag only effecting the text in the header of the document.

    Figure 8 - Third pass at the web page header

    Screen Shot 2020-07-04 at 12.45.35 PM.png

    4.1.6 Dividing up the header block

    In Figure 6, the header had 3 separate areas, one for the logo, one for the title and page information, and one area for the options to be implemented. To divide a web page into parts, a 28 (or division) tag is used. The tag is the most useful of all CSS tags, as it can be used to break up a web page into different areas, and to assign different styling or information types to those areas. For now, it will be used to break the header into 3 pieces.

    To break the header up into 3 pieces, 3 divisions are created. These are all placed inside of the header section and can be thought of as parts of or children of the header section. This allows these 3 divisions are to appear inside of the web page header. These 3 division are shown below.

    Program 77 - Dividing the header into 3 divisions.
    
    
        <div >
            <image src="GRI_logo.png" />
        </div>
        <div >    
            <h1>Map Example</h1>
            

    Example map input screen <br> &copy; Gettysburg Research Institute </p> </div> <div >

    Home File About </p> </div>

    This code only divides up the header so that the DOM knows they are 3 separate areas inside of the header. The DOM does not know how to display them, so it just places them in separate blocks, as shown below.

    Figure 9 Un-styled div sections

    Screen Shot 2020-07-04 at 12.50.09 PM.png

    To make the divisions work as intended, they must be styled.

    To style each division, the divisions must be given a way to reference them. If there are a number of divisions to be styled the same, normally a class variable is defined in CSS, and referenced using the class attribute in the tags. If the division is to be uniquely styled, it will be given an id attribute, and CSS will style it using an id variable. Since the divisions in the header will be unique for the header, they will use id variables to reference and style them. Note in the program above, the individual divisions have been assigned the names header-icon, header-desc, and header-menu. This follows CSS conventions which favor hyphenated names.

    When referencing id names in CSS, the name is prepended with a hash tag (#). For example, to set the header-desc to be a display of inline-block the following would be used.

    #header-desc {
        display : inline-block;
        margin : 25px;
    }    
    

    Careful readers will remember that this is how id variables were referenced in JQuery. JQuery uses CSS naming conventions to access DOM elements. This was alluded to earlier, but now is made explicit. Thus, to use JQuery at least a passing knowledge of CSS is necessary to know how to access DOM elements

    The main purposed of the CSS for these header divisions is to set the display parameters for them. The choice of inline-block tells the DOM to lay these divisions out as blocks, one after another on the same line. The margin tells the DOM how far to space the elements apart.

    The last attribute set in the header divisions is the float attribute. The float attribute defines which side of the line to place the attribute on. Normally inline and inline-block elements start at the far left and are placed after each other from left to right. By saying float: right, the program is saying place this element starting at the far right, and then place subsequent elements moving from right to left. Menus items generally are place at the right of the header to balance the header.

    The final CSS code for this example is shown below.

    Program 78 - Completed header
    
    <html>
        <head>
            <title>Map Example Input Screen </title>
            <style>
                header {
                    margin : 50px;
                    border : 2px solid blue;
                    background-color : slategray;
                    color : white;
                }
                
                header p {
                    font-size : 150%;
                }
                
                #header-icon {
                    display : inline-block;
                    margin: 50px 10px 50px
                }
                
                #header-desc {
                    display : inline-block;
                    margin : 25px;
                }
                
                #header-menu {
                    display : inline-block;    
                    float: right;
                    margin : 75px 50px 50px 50px;
                }
            </style>                                                        
        </head>
        
        <body>
            
                <div >
                    <image src="GRI_logo.png" />
                </div>
                <div >
                    <h1>Map Example</h1>
                

    Example map input screen <br> &copy; Gettysburg Research Institute </p> </div> <div >

    Home File About </p> </div> </header> </body> </html>

    This program gives the final, completed header for the page.

    Figure 10 Completed web page header

    Screen Shot 2020-07-04 at 1.03.31 PM.png

    4.1.7 Managing CSS

    To make managing a project and writing and reading source code easier, the CSS source code for a web page is generally kept in a separate file from the html source. This file separation achieves a number of positive benefits: 1) it keeps the styling information separate from the application information, which makes it easier to read and understand the HTML program; 2) By separating the styling and program, UI designers can work on the styling the application without interfering with the programmers developing the application.

    For the header developed above, the file containing the CSS could be kept in the file WebMapExample.css, and the HTML could be kept in the file MapExample.html. The CSS file is included in the web page using a <link> tag.

    <link rel="stylesheet" type="text/css" href="WebMapExample.css">

    The contents of the WebMapExample.css file is:

    Program 79 - WebMapExample.css file
    
    header {
        margin : 50px;
        border : 2px solid blue;
        background-color : slategray;
        color : white;
    }
    
    header p {
        font-size : 150%;
    }
    
    #header-icon {
        display : inline-block;
        margin: 50px 10px 50px
    }
    
    #header-desc {
        display : inline-block;
        margin : 25px;
    }
    
    #header-menu {
        display : inline-block;
        float: right;
        margin : 75px 50px 50px 50px;
    }
    

    The application file, MapExample.html, is now much simpler, and easier understand.

    Program 80 - MapExample.html
    
    <html>
        <head>
            <title>Map Example Input Screen </title>
            <link rel="stylesheet" type="text/css" href="WebMapExample.css">
        </head>
        
        <body>
            
                <div >
                    <image src="GRI_logo.png" />
                </div>
                
                <div >
                    <h1>Map Example</h1>
                    

    Example map input screen <br> &copy; Gettysburg Research Institute </p> </div> <div >

    Home File About </p> </div> </header> </body> </html>

    In the real world, most programmers will deal with the HTML and JavaScript, and UI/UX designers will handle the CSS for a web page. However, both sides, programmers and UI/UX designers, should know enough about the other technologies to be able to interface effectively with their counter parts.

    4.1.8 Quick Review

    1. What are the four types of CSS tags? Give an example of each and describe how you might use them.
    2. In your own words, describe semantics? What is an HTML semantic tag, and how does it differ from a formatting tag?
    3. What is the difference between a display:block and a display:inline-block attribute? How were they used to set up the header division of the web page?
    4. How would you hide a division of an HTML document?
    5. Looking at the following web page, https://www.w3schools.com/cssref/pr_class_display.asp, discuss how you might use the display attribute to format a web page?
    6. How might you specify a paragraph (

      ) tag so that it only impacts the text in the #header-desc?

    7. How would you format the

      tag so that all of the output in the document associated with an error message would be in red?

    8. Create a CSS file and include it in another HTML file. Does the name have to be “.css”?

    25 CSS styling can also be done directly in an HTML tag using the style attribute, but this violates the idea of separating concerns in a web page, and like Unobtrusive JavaScript, best practice says to not mix CSS and HTML.

    26 For a complete list of all selectors and how to use them, see https://www.w3schools.com/cssref/css_selectors.asp.

    27 For a complete listing of all display types, see https://www.w3schools.com/cssref/pr_class_display.asp.

    28 The current thinking about CSS is that an HTML document should be divided into divisions (using the tag) when the page is being divided for styling purposes, and into sections (using the semantic tag) when it is being divided into parts that would be equivalent to areas in an outline. There is no difference other than the semantic meaning of the section as part of a larger document organization. As this document is concerned with formatting program web pages, it will use only divisions to keep the confusion to a minimum.

    • Was this article helpful?