Marketing for Libraries Logo

HTML Section: Layout

One of the advantages of CSS is the layout options. CSS is great for creating flexible layouts that expand or contract depending on the end user's monitor. It's also great because it's easy to update the layout by simply changing the CSS. The use of CSS is also the current "best practice" in terms of accepted standards.

To make your web pages more appealing, think about alternative ways to lay out the page.

Beginners often create long pages of text without banners, columns, or sidebar navigation. As you become comfortable with the basic HTML tags, begin to think of interesting ways to group information for more visual appeal.

HTML inline elements are normally displayed without a new line such as links and images.

HTML block elements normally start and end with a new line such as headings, paragraphs, lists, and tables.

HTML Div and Span tags

Group HTML elements together using <div> and <span> tags.

Div Tag

The <div> tag is used as a container for grouping other HTML elements. It allows you to apply styles to an entire chunk of your page at one time. This is very useful when designing with layouts.

For instance, you might place a banner across the top, navigation along the left side of the screen, content along the right side of the screen, and a footer across the bottom. Each of these areas would be grouped using the <div> tag.

Examine the following sample code.

<div>
  <h1>Pets</h1>
  <p>This is a paragraph about dogs and cats.</p>
</div>

try itTry It!
Go to w3schools and read about Divs tags.
Use the Try It Yourself buttons to practice coding.

Span Tag

The <span> tag is an inline element used as a container for text. It is used to organized small chunks of content. A span has no inherent formatting. You often use a id or class attribute to identify the spanned content.

Examine the following sample code.

<p>A canary has <span style="color:yellow">yellow</span> feathers.</p>

A canary has yellow feathers.

try itTry It!
Go to w3schools and read about Span tags.
Use the Try It Yourself buttons to practice coding.

HTML Layout

To create interesting layouts, you need to think about how information can be grouped and organized on the page.

The <div> tag is useful for website layout as you think about ways to divide the page into columns and areas. You're able to position content elements, create splashes of color, and identify areas of navigation.

Examine the following sample code. Five divs are used to create multiple columns. Although the styles have been built into this example, they could just as easily be placed in your external CSS document. Notice how the widths are added together to total 500px including 80px for the sidebar plus 20px of padding (10px left and 10px right) and 380px for the content plus 20px of padding.

<div id="container1" style="width:500px">

<div id="banner1">
<h1 style="margin-bottom:0; background-color:red;">Pets</h1>
</div>

<div id="sidenav1" style="background-color:yellow; height:200px; width:80px; float:left; padding:10px">
<b>Menu</b><br>
Cats<br>
Dogs<br>
Fish<br>
Lizards<br>
</div>

<div id="content1" style="background-color:#EEEEEE; height:200px; width:380px; float:left; padding:10px">
Do you love pets? We do! We have a whole section of the library devoted to your favorite pets.
</div>

<div id="footer1" style="background-color:red; color:white; clear:both; text-align:center; padding:5px">
Appledale Public Library
</div>

</div>

Pets

Menu
Cats
Dogs
Fish
Lizards
Do you love pets? We do! We have a whole section of the library devoted to your favorite pets.
Appledale Public Library

CSS Box Model

When discussing the use of CSS for layout, it's helpful to think in terms of a "box model". This box wraps around the HTML elements and consists of margins, borders, padding, and content.

The content is where the text and images appear.

The padding is the area around the content providing space around the text and images. It's important to use padding, so readers don't feel like elements on your page are running into each other. Use fixed padding such as pixels or % of the contained area. You can indicate padding-top, padding-bottom, padding-right, or padding-left. If you just use padding, it will be applied to add sides. Learn more at CSS Padding.

The border is the area beyond the padding. There are lots of options for borders including dotted, dashed, solid, double, groove, ridge, inset, and outset. You can set the width in pixels or using thin, medium, or thick. The color can also be established. Learn more at CSS Border.

The margin is clear space around the border that is used to separate boxes on your page. Learn more at CSS Margin. Use auto to automatically have the margin calculated. You can also use a specific length in px or specify a percent of the width. For instance, you often use 10% on the right and left sides of the page.

When establishing boxes on a page, think about how much space is needed for each area. In the example below, the total width is 400px.

width:350px;
padding:10px;
border:5px solid gray;
margin:10px;

try itTry It!
Go to w3schools and read about the Box Model.
Use the Try It Yourself buttons to practice coding.

The CSS Outline can be used to draw around elements to make them stand out. Learn more at CSS Outlines.

Tips

Castro suggests four steps in structuring pages:

Divisions. Organize your content into divisions such as masthead, main, sidebar, and footer. Each division will have an id such as <div id="sidebar">.

Order Divisions. Place your div elements in an order that they appear on your screen with the masthead at the top and the footer at the bottom.

Headers. Use the header elements consistently.

Comments. Use comments to remind you about the different areas and increase accessibility.

Multiple CSS

One of the nice things about CSS files is that they are easy to update or exchange.

Let's say you want a different style for each season. You might name your CSS files winter.css, spring.css, summer.css, and fall.css. Rather than changing the .css in the head of each page, simply replace the current season file season.css with the correct file. For example, winter.css becomes season.css. Then in the spring, spring.css is renamed season.css.

Resources

On this page you'll find lots of resources including websites with tutorials and articles related to CSS.

Advanced CSS from HTMLSource.

Cascading Style Sheets from Page Resource

Cascading Style Sheets Home Page from W3C - Great information, tools, and resources

CSS Layout Techniques from glish

CSS Max Design - tutorials and resources

CSS Zen Garden - Many design resources

Dropdowns with CSS from htmldog

Eric Meyer on CSS - lots of project ideas

Mezzoblue - lots of ideas

WikiBooks CSS

 


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson