HTML: Style Tab Tags

Author: Ronald S. Holland
at
Total Application Works




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


© 2002 - 2013 All Rights Reserved Total Application Works

  • Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)

  • <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/Tabs.html">
    Tab Tag </a>
    </table>
    </body>
    </html>




Introduction

In this tutorial, we will explore how to use CSS to build a tabbed web page. This tutorial assumes that you have read and mastered the Style Tutorial. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. What is the purpose of a HTML Style tags? The Style tags specify how the document should be formatted for display in browsers. Again, the previous tutorial, Style Tutorial, explored writing a HTML page using an embedded Style tag, an inline style tag, or Cascading Style Sheets (CSS). In this tutorial, we will build on the lessons we learned in the previous tutorial.

Before we get started, we need to know the answer to, "What is a Cascading Style Sheet (CSS)? A web page developer uses CSS to design/create the appearance of HTML pages in a browser. CSS allows a web page developer the ability to simultaneously change the visual appearance of several HTML files without having to change each file individually. CSS allows the separation of web page content/text from the manner in which that content/text is displayed. This means how the font, size, and color of the text are manipulated for visual display. Many of the properties used in Cascading Style Sheets are similar to those used in HTML. Thus, if you are familiar with using HTML for web page layout, you will recognize many of the elements used in CSS.

In the next section, we will explore how to write embedded style web pages using the CSS style.

Getting Started With Basic CSS Syntax

In the previous tutorial on Style Tag, we described three methods for including CSS in your web pages. These methods were:

  1. embedded Style tag
  2. inline style tag
  3. Cascading Style Sheets (CSS).
We will review the first two methods in the following sections. We will then devote the remainder of this tutorial on CSS.

Requirements for an Embedded Style Implementation

The following are the requirements for an Embedded Style Implementation.

  1. Implement a Style tag within the Head tag.
    • This Implementation will affect the entire document.
  2. The Style property type should be text/css
  3. The Body tag should implement a blue background and white text.
  4. The <p> tag should be implemented with and indentation of 20 pixels.
Figure 1 shows you how to code these requirements and the coding results.

Basic Style Tag Basic Style Tag Displayed in Your Browser
 
<html>
<head>
<style type="text/css">
body {background-color: blue ; color: white}
p {margin-left: 20px}
</style>
</head>
<body>
<p>This is the time for...
</p>
</body>
</html>
 

This is the time for...

Figure 1: Using The Embedded Style to get Started


In the Figure 1 example, I have taken some liberties so that the style tag effects are displayed only in the Figure 1 table; otherwise, the effects would have affected the display of this entire tutorial.

How to Set Page Margins

You may want to set the margins to make your web page look nicer. You can do this by setting left and right margins with the "margin-left" and "margin-right" properties.

Requirements for Inline Page Margins

The following are the requirements for Page Margins Implementation.

  1. Implement a Style tag within the Head tag.
    • This Implementation will affect the entire document.
  2. The Style property type should be text/css
  3. The Body tag should implement a blue background and white text.
  4. The <p> tag should be implemented inline with and indentation of 20 pixels.
Figure 2 shows you how to code these requirements and the coding results.

Setting Margins Setting Margins Displayed in Your Browser
 
<html>
<head>
<style type="text/css">
body {background-color: blue ; color: white}
</style>
</head>
<body>
<p style="margin-left: 20px;  margin-right: 10px"> 
You may want to set the margins to make
your web page look nicer. This is done by setting
left and right margins with the "margin-left" and
"margin-right" properties. </p> </body> </html>

You may want to set the margins to make your web page look nicer. This is done by setting left and right margins with the "margin-left" and "margin-right" properties.

Figure 2: Setting the Margins using The Inline Method


The Figure 2 example is considered a <p> tag inline override. It sets the left margin to 20 pixels from the left window edge, and the right margin to 10 pixels from the right browser window edge.

How do we add CSS to an HTML document?

In Figure 1 and Figure 2 above we showed two the methods for using the Style tag in your web pages. In the next section, we will explore how to link to an external style sheet.

Link to External Style Sheets

In the examples above, we have set the style for the web page within the page. If you want to use this web page design in more than one page, you would have to copy the design in all of the pages you want to have the same design. Is there a way to have a common design in more than one page without having to copy the design into each page? The answer is to use an External Style Sheet. To use an external style sheet, we need to use the <LINK> tag. Keep in mind, when you use a CSS, you only have to change one page if a design change is required. We will explore the <LINK> tag in more detail in the next section.

The <LINK> Tag

When we link to an external style sheet, we need to use some of the following attributes:

  1. <LINK> - is used to define the relationship between a link and a resource.
  2. REL - identifies the forward link types.
      This allows you to you can add the STYLE elements from the linked page to the current page.
  3. HREF - identifies the URL of the linked resource.
  4. TYPE - identifies the internet content type.
To what type of file do we want to link? We can simply link to a common HTML file that defines the style for our Web site. We can use our index page as this common style page, if the definition is included within a <STYLE> - </STYLE> enclosure.

<html>
<head>
<title>How to Link to an External Page </title>
<link rel=stylesheet href="http://www.yourdomain.com/style.css" type="text/css">
</head>
<body>
Now is the Time for...
</body>
</html>
Figure 3: How to use the Link Tag

In the remainder of this tutorial, we will focus on how to add tabbed panes to our documents. The style we will be using is the embedded style as shown in Figure 1.

Applying CSS to an HTML document

In Figure 1, we demonstrated how to use the embedded style. You will note the following when you look at the embedded style.

 
<html>
<head>
<style type="text/css">
Tag to be 
modified              Value
 |                       |       
 |      Property to      |
 |      be modified      |
 |           |           |
 V           V           V
body {background-color: blue ; color: white}
</style>
</head>
<body>
<p> 
You may want to set the margins to make
 your web page look nicer. This is done by setting
 left and right margins with the "margin-left" and
 "margin-right" properties.
</p>
</body>
</html>
 
Figure 4: Basic structure of the embedded style

In Figure 4 above, our code indicates that we want the body of our web page to have a blue background and white text. Using the coding example in figure 4, we will begin exploring how to add tabbed panes in the next section.

Creating the DIV Tag

Please note that the align attribute of the <DIV> tag has been deprecated. When the designer uses the <DIV> or division tag, it allows the designer the capability to simultaneously set the alignment of more than one paragraph or heading. The power of the <DIV> tag and its corresponding closing tag </DIV> allows the designer to group text in a manner that will allow for the creation of tabs.

Creating <DIV> Tag <DIV> Tag Displayed in Your Browser
 
<div style="border-style: solid; 
         border-width: thin; 
         border-color: green ; 
         width: 50px;">Java</div>

<div  STYLE="font-weight:  bold;
         border-style: solid;
         border-color: green ; 
         width: 50px;">Java </div>
<div  STYLE="font-weight:  bold;
         border-color: green ; 
         width: 50px;">HTML </div>
 
Java


Java
HTML
Figure 5: Creating <DIV> Tag

In Figure 5, we used some of the following Style attributes:

  1. border-style: - The border-style can be
    • solid line

    • dashed line

    • dotted line

    • double lines

    • groove line

    • ridge line

    • inset

    • outset

  2. border-width: - The border-width can be
    • thin

    • medium

    • thick

  3. border-color: green - color of border around the text
  4. width: 50px - this is the width of the bordered text. If you use the formula, (1.38 / 22 * 50px) = approx. 3em

In Figure 5, we used an inline style to modify the <DIV> tag. You will note that the Border attribute was used to create an effect. When we explore creating Tabs, in the next section, we will expand on these concepts.

Tabbed Display

In Java, there is a class that is used to create rectangles. This class is called the Rectangle class. A Rectangle specifies an area in a coordinate space that is enclosed by the Rectangle object's top-left point (x, y) in the coordinate space, its width, and its height. The tabs we will create will consist of <A> and <DIV> tags using embedded style classes designed to make them look like the little Microsoft file folder tabs. The purpose in this description is that we need to create our own rectangles when we create tabs. In the tutorial on the style tag, we used borders (see Figure 8 in the style tutorial). We will use the Embedded style and border concepts to create out tabs.

Requirements for Creating Tabs

The following are the requirements for the <div> and <a> tags.

  1. The <div> and <a> are the tags to be modified (see Figure 4).
  2. Create two <div> classes
    1. Create an empty TabBox2 class.
    2. Create a tabFace2 class that has a:
      • font-size: 90%;
      • font-weight: bold;
      • padding: 0px 0px 3px 0px;
  3. Create three <a> classes
    1. Create an a.tab2 - creates the rules for rendering a tab
    2. Create an a.tab2:hover - changes the effect of the tab when mouse-on
    3. Create an a.tab2:visited - changes the effect of the tab when mouse-off
  4. Create a <DIV> tag based on the TabBox2 class.
  5. Create a <DIV> tag based on the tabFace2 class.
    • This <DIV> tag will enclose the <a> tag.

Implementing the Requirements for Creating Tabs

In the following table, we will implement the requirements for creating tabs.

Creating Tab Class Tab Class Displayed in Your Browser
 
<style type="text/css" media="all">  
div.tabBox2 {} 

div.tabFace2 {  
  font-size: 90%;  
  font-weight: bold;  
  padding: 0px 0px 3px 0px;  
} 

a.tab2 {
  background-color: #f0f0f0;
  border: 1px solid #000000;
  border-bottom-width: 0px;
  padding: 2px 1em 2px 1em;
  text-decoration: none;
}

a.tab2:hover {
  background-color: blue;
  color: white;
  border-color: red; 
  border-width: thick; 
}

a.tab2, a.tab2:visited {
  color: black;
}

</style>

<div class="tabBox2" style="float: center; 
                width: 25em;"> 
<div class="tabFace2"> <a class="tab2" href="url"> Java </a> <a class="tab2" href="url"> C++ </a> <a class="tab2" href="url"> SQL <</a> <a class="tab2" href="url"> HTML </a> <a class="tab2" href="url"> JavaScript </a> </div> </div>




Figure 6:

Definitions

CSS

<div>

    is a container tag that works in a manner that is similar to the <CENTER> tag. Please note that the "align" attribute of the div element was deprecated in HTML 4.01.

    Align Attribute definitions

    align = left|center|right|justify
    Deprecated. This attribute allows the designer to specify the horizontal alignment of its element with respect to the surrounding context. The possible values are:
    • left: text lines are left justified.
    • center: text lines are centered.
    • right: text lines are right justified.
    • justify: text lines are justified to both margins.

Embedded style

Inline style -














HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2013 All Rights Reserved Total Application Works