Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
69 views

Lab 03 Using CSS For Layout and Menus

This document provides instructions and code examples for creating a basic HTML page layout with navigation menu using CSS. Key steps include adding HTML tags and CSS classes to structure page elements like header, footer, navigation, and columns. Div tags and CSS properties like float are used to position columns side by side.

Uploaded by

ralhp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
69 views

Lab 03 Using CSS For Layout and Menus

This document provides instructions and code examples for creating a basic HTML page layout with navigation menu using CSS. Key steps include adding HTML tags and CSS classes to structure page elements like header, footer, navigation, and columns. Div tags and CSS properties like float are used to position columns side by side.

Uploaded by

ralhp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Lab 03: Using CSS for Layout and Menus

There are several HTML tags that can be used to define parts of your web page. Up to this point,
we've used the very handy HTML ‹div› element tag for page structuring and CSS formatting.
You can also use the <span> tag for in-line CSS formatting. As shown in the following table, the
two most common methods for applying CSS formatting include specifying a class (with the
.name selector in the CSS file) or an id (with the #name selector) within the HTML file. And, as you
saw in Lab 02, you can also reference regular HTML tags in CSS using their tag identifiers (e.g., h1
for <h1> ).

HTML Tags (in html file) CSS Selector (in stylesheet)

‹h1›my content for a Heading 1‹/h1› h1 { style codes here; }

‹div class=“header”›my content for a Page header‹/div› .header { style codes here; }

‹div id=“footer”›my content for a Page footer‹/div› #footer { style codes here; }

In this lab, we continue to use the ‹div› tag to create formatting classes, but also introduce
some HTML5 tags for specifying the structural elements in a page. Some of these HTML5 tags
include ‹header› , ‹footer› , ‹nav› , ‹article› , ‹section› , and ‹aside› . While you could
format these tags using their CSS selectors (like the h1 selector shown in the above table), a
better idea is to specify the desired formatting class within the HTML5 tag itself. For example, the
header area may be labeled in HTML as ‹header class=“top_banner”› and then referenced as
a CSS class with .top_banner { style codes here; } . This method leaves the HTML5 tags to do
the semantic job of structuring web pages and the reusable CSS classes to formatting the
elements.

Tutorial: Lab 03
Let's demonstrate the first steps for building an HTML+CSS menu navigation system. To begin,
you need to write the HTML code that contains the menu options using a simple unordered list.
This list usually appears after the heading information (or header image) within the <body>
section. Notice in the example that the hyperlinks ( a href anchors) use #s (hashtags) as
temporary placeholders for the target web page. We'll fix that later by substituting the correct
links in place of the hashtags.

<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
The second step is to write the CSS code for the .menu class. This is a simple example, but it
shows the different types of formatting attributes that can be applied. Notice that the unordered
lists ( <ul> ) and line items <li> appearing within the class="menu" section have specific CSS
formatting styles applied (described further below).

.menu { height: 40px; background-color: darkblue; }


.menu ul { margin: 0; padding: 0; }
.menu ul li { list-style: none; }
.menu ul li a { text-decoration: none; color: white; float: left; display:
block; padding: 10px 20px; }
.menu ul li a:hover {color: white; background-color: darkred; }

As mentioned, all of the CSS formatting properties are stored within the .menu class. First, the list
itself is formatted ( ul ), then each list item ( li ) to remove the bullets ( list-style: none ), then
the hyperlinks for each list item ( .menu ul li a ) to remove the underline ( text-decoration:
none ) and format the menu options, and lastly the behaviour of the hyperlinks ( .menu ul li
a:hover ) when the mouse pointer is placed over top of a link.

To try out the code, you can visit CodePen.io or Liveweave. Copy & paste the HTML code into its
respective box first. You should see a bulleted list of links magically appear in the lower half of the
screen. Next, copy & paste the CSS code into its respective box. The rendered page should now
appear with the menu bar. Position the mouse pointer over the menu options in the Results
window to see your menu highlighting take effect.

W3Schools also has tools for testing your HTML code (TryHTML) and CSS styles (TryCSS).

More Learning Resources


Optional: Watch the following video from Simpletut.com. This tutorial uses Adobe Dreamweaver,
but everything can be done quite easily using Notepad++ or any other text editor:

How to Use DIV Tags and CSS to Create Website Layouts and Menus (34 min)
Assignment: Lab03
In this exercise, you will create a new HTML document and CSS stylesheet for structuring and
formatting a web page with menu navigation. Note that you will have to upload two files to the
dropbox: lab03.html and lab03.css. Or, you can zip the two files together into lab03..zip, in order to
upload a single file.

Creating lab03.html

1. Create an HTML file named lab03.html that includes the following content and save it to your
documents folder.

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

2. In the <head> area, enter a title that reads: Lab03 Assignment using the <title> tag. Then,
specify the location of the stylesheet using the following code.

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

3. Now add the header and menu navigation sections to the <body> area. Notice that this code
uses HTML5 <header> and <nav> tags, with the <nav> tag being formatted using the menu
class. Each menu item appears in an unordered list with a hyperlink # placeholder. This hyperlink
placeholder will not go anywhere, but it will display as a "real" hyperlink would normally appear.
Lastly, notice the use of an HTML comment ( <!-- comment here --> ) to begin the section.

<header><h1>Okanagan College</h1></header>
<!-- The navigation menu -->
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
4. Let's add some content to the page using the same copy and paste method. We'll separate and
format the content into two columns using <div> tags with CSS classes. The first style class for
the main article content is named col1.

<!-- The main content area -->


<div class="col1">
<article>
<h2>Welcome to Okanagan College</h2>
<h3>Classes begin on January 10th, 2022!</h3>
<p>Okanagan College serves the educational needs of communities
throughout the southern interior of British Columbia.</p>
<p>Okanagan College respectfully acknowledges that our Penticton,
Kelowna and Vernon campuses are located on the traditional and
unceded territory of the Syilx Okanagan People.</p>

</article>
</div>

5. Now add the <aside> content for the second column style, using the CSS class named col2.
Notice the use of HTML5 section tags for both article and aside . These tags help search
engines find and index content on your web pages. Also notice the use of the <br /> tag to
provide a line-break (instead of a paragraph break), similar to pressing Shift+Enter in Word.

<!-- The side column area -->


<div class="col2">
<aside>
<h2>Departments</h2>
<p>Arts
<br />Business
<br />Health
<br />Sciences
<br />Trades
</p>
</aside>
</div>

6. To finish off the HTML document, add the following code for the page footer section, just
above the <body> tag.

<footer><p>Copyright (2022) by Okanagan College. All rights reserved.</p>


</footer>

7. Save and then view the unformatted HTML file in your browser. (Or, use CodePen.io or
Liveweave to check your work.)
Creating lab03.css

8. Open a new text file and then save it as lab03.css. (Note: It is very important that lab03.css resides
in the same folder as the HTML file you created earlier. Otherwise, you will have to change the <link>
statement in the <head> area to point to the correct file location.)

9. Copy and paste the following code into the new CSS document. The html and body is reset to
the full width (100%) of the browser. Notice the use of a CSS comment ( /** comment here **/ )
which differs in syntax from the HTML comment tag.

/** This file is used to format lab03.html **/


html,body {
margin: 0; padding: 0px;
min-width: 100%; width: 100%; max-width: 100%;
min-height: 100%; height: 100%; max-height: 100%;
font-family: georgia, garamond, times;
}

10. Beneath the previous entry, add a blank line and copy and paste the CSS code for formatting
the header and footer tags. In this step, the two section tags receive some colour, font, and
alignment formatting. (This step shows that you can reference HTML5 tags in CSS code, although most
developers feel that it's not a “best practice”. The use of classes and IDs are often preferred.)

header { text-align: center; padding: 10px; background: lightgray; }

footer {
clear: both;
height: 40px; width: 100%; padding: 1px 20px;
color: white; background-color: brown;
font-family: verdana, tahoma, arial, sans-serif;
font-size: 90%;
}

11. Save the lab03.css file and then view or refresh lab03.html in your browser to see the result.

12. Now let's add the CSS formatting code for the two sections: <article> with the col1 class and
<aside> with the col2 class. The key points in this code are the use of % measures for the width
(to make it responsive -- changing for different screen sizes) and the use of float to allow
columns to appear side-by-side.

.col1 {
width: 75%;
float: left;
min-height: 100%;
background-color: bisque;
}

.col2 {
width: 25%;
float: right;
min-height: 100%;
color: azure;
background-color: darkblue;
}
13. Save lab03.css and then view or refresh lab03.html in the browser. The two columns are
sized and floated side-by-side in the web page.

14. Last, but not least, is formatting the menu navigation bar. Copy and paste the following code
into the CSS file to format the navigation menu bar. Notice how these CSS styles cascade down
from menu → unordered list → list items → anchored links → hovered links. Settings for lower-
level styles assume (but can also override) higher-order levels.

.menu { height: 40px; background-color: brown; }


.menu ul { margin: 0; padding: 0; }
.menu ul li { list-style: none; font-family: verdana, tahoma, arial, sans-serif;
}
.menu ul li a { text-decoration: none; color: white; float: left; display:
block; padding: 10px 20px; }
.menu ul li a:hover { color: white; background-color: darkblue; }

15. Save lab03.css and then view or refresh lab03.html in your browser. Then, try resizing your
browser window to see if the page is responsive to the browser width.

16. How would you change the columns' size distribution to 70% for column 1 and 30% for
column 2?

To complete this task, you edit the width parameter value for both .col1 and col2
classes. However, let's leave the current setting as is for this assignment.

17. How would you add some whitespace to the two content areas so that the text does not
bump into the DIV margins?

One method would be to add a new class to the CSS file that formats these text sections. To
illustrate, create a new class called padded in the lab03.css file that will apply additional padding
and line-spacing .

/** Added to lab03.css **/


.padded { padding: 10px 20px; line-height: 140%; }

Then, in the lab03.html document, add the class attribute to the two existing sections named
<article> and <aside> , as shown below.

<!-- Modified in lab03.html. Set the article and aside tags -->
<article class="padded">
...
<aside class="padded">
...
18. How would you “fix” the footer so that it appears at the bottom of the screen even when
scrolling?

One method for accomplishing this is to modify the footer CSS. Note the changes with the
addition of position: fixed; and both bottom: and left: being set to 0 , as shown below.

/** Modified in lab03.css. See the footer code. **/


footer {
clear: both;
position: fixed;
bottom: 0;
left: 0;
height: 40px; width: 100%; padding: 1px 20px;
color: white; background-color: brown;
font-family: verdana, tahoma, arial, sans-serif;
font-size: 90%;
}

19. On your own, modify the lab03.html and lab03.css files to display similar to the screenshot
provided below. See the hints placed below.

The OC logo is available at http://www.buadwiki.com/files/oclogo.png.


You should use the <img> tag to replace the existing title: <h1>Okanagan College</h1> .
The background color of the menu bar and footer is set to #BE3853.
The background color of the menu items' hover property is set to #005782.
The background color of the main content area (column 1) is white (not bisque).
The background color of the aside area (column 2) is #005782.

20. View the results in your web browser and then try re-sizing the browser window to illustrate
the responsiveness of the web page. Save your work for lab03.html and lab03.css in preparation
for uploading into Moodle.

You might also like