HCI: Enero 2019

Huwebes, Enero 31, 2019

Laboratory Activity #7 - CSS Box Model and Positioning

The CSS Box Model

div {
  width: 250px;
  height: 100px;  background-color: #ff0000;
  border: 1px solid #000000;
}

div#d2 {
  width: 250px;
  height: 100px;
  background-color: #ff0000;
  border: 5px solid #000000;
  margin: 10px;
  padding: 10px;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Positioning the Color Blocks</title>   <style type="text/css">
   div {
     position:relative;
     width:250px;
     height:100px;
     border:5px solid #000;
     color:black;
     font-weight:bold;
     text-align:center;
    }
    div#d1 {
     background-color:red;
    }

    div#d2 {
     background-color:green;
    }

    div#d3 {
     background-color:blue;
    }

    div#d4 {
     background-color:yellow;
    }
   </style>

</head>
<body>
  <div id="d1">DIV #1</div>
  <div id="d2">DIV #2</div>
  <div id="d3">DIV #3</div>
  <div id="d4">DIV #4</div>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Positioning the Color Blocks</title>
    <style type="text/css">
    div {
     position:absolute;
     width:250px;
     height:100px;
     border:5px solid #000;
     color:black;
     font-weight:bold;
     text-align:center;
    }
    div#d1 {
     background-color:red;
     left:0px;
     toppx;
    }
    div#d2 {
     background-color:green;
     left:75px;
     top:25px;
    }
    div#d3 {
     background-color:blue;
     left:150px;
     top:50px;
    }
    div#d4 {
     background-color:yellow;
     left:225px;
     top:75px;
    }
    </style>
</head>
<body>
  <div id="d1">DIV #1</div>
  <div id="d2">DIV #2</div>
      <div id="d3">DIV #3</div>
  <div id="d4">DIV #4</div>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Positioning the Color Blocks</title>
   <style type="text/css">
   div {
     position:absolute;
     width:250px;
     height:100px;
     border:5px solid #000;
     color:black;
     font-weight:bold;
     text-align:center;
    }
    div#d1 {
     background-color:red;
     left:0px;
     top:0px;
     z-index:0;
    }
    div#d2 {
     background-color:green;
     left:75px;
     top:25px;
     z-index:3;
    }
    div#d3 {
     background-color:blue;
     left:150px;
     top:50px;
     z-index:2;
    }
   div#d4 {     background-color:yellow;
     left:225px;
     top:75px;
     z-index:1;
    }
   </style>
</head>
<body>
  <div id="d1">DIV #1</div>
  <div id="d2">DIV #2</div>
  <div id="d3">DIV #3</div>
  <div id="d4">DIV #4</div>
</body>
</html>

Laboratory Activity #6 - Working with Margins, Padding, Alignment, and Floating

• The margin and padding properties—For adding space around elements

• The align and float properties—Used to place your elements in relation to others

Using Margins

Style sheet margins enable you to add empty space around the outside of the rectangular area for an element on a web page. It is important to remember that the margin property works with space outside of the element.
Following are the style properties for setting margins:

• margin-top—Sets the top margin

• margin-right—Sets the right margin

• margin-bottom—Sets the bottom margin

• margin-left—Sets the left margin

• margin—Sets the top, right, bottom, and left margins as a single property

When using shorthand for setting margins, padding or borders, there are actually three approaches, which vary based on how many values you use when setting the property:

• One value—The size of all the margins

• Two values—The size of the top/bottom margins and the left/right margins (in that order)

• Four values—The size of the top, right, bottom, and left margins (in that order)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
  <title>Color Blocks</title>    <style type="text/css">
       div {
          width:250px;
          height:100px;
          border:5px solid #000000;
          color:black;
          font-weight:bold;
          text-align:center;
       }

       div#d1 {
          background-color:red;
          margin:15px;
       }

       div#d2 {
          background-color:green;
          margin:15px;
       }

       div#d3 {
          background-color:blue;
       }

       div#d4 {
          background-color:yellow;
          margin:15px;
       }
    </style>
  </head>

  <body>
    <div id="d1">DIV #1</div>
    <div id="d2">DIV #2</div>
    <div id="d3">DIV #3</div>
    <div id="d4">DIV #4</div>
  </body>
</html>

#2 Revise #1

div#d1 {
  background-color:red;
  margin:0px;
}

div#d2 {  background-color:green;
  margin:5px 0px 0px 15px;
}

div#d3 {
  background-color:blue;
  margin:0px 0px 0px 75px;
}

div#d4 {
  background-color:yellow;
  margin:25px 0px 0px 250px;
}

#3 Revise Again

body {
  margin:0px;
}
div {
  width:250px;
  height:100px;
  color:black;
  font-weight:bold;
  text-align:center;
}
div#d1 {
  border:5px solid #000000;
  background-color:red;
  margin:0px;
}
div#d2 {
  border-width:6px 6px 3px 6px;
  border-style:solid;
  border-color:#000000;
  background-color:green;
  margin:10px 0px 0px 15px;
}
div#d3 {
  border-width:3px 6px 6px 6px;
  border-style:solid;
  border-color:#000000;
  background-color:blue;
  margin:0px 0px 0px 15px;
}
div#d4 {
  border:5px solid #000000;
  background-color:yellow;
  margin:0px 0px 0px 265px;
}

#4 Revise Again

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Color Blocks</title>
    <style type="text/css">
      body {
         margin:0px;
      }
      div {
         width:250px;
         height:100px;
         border:5px solid #000000;
         color:black;
         font-weight:bold;
         margin:25px;
      }

      div#d1 {
         background-color:red;
         text-align:center;
         padding:15px;
      }

      div#d2 {
         background-color:green;
         text-align:right;
         padding:25px 50px 6px 6px;
      }

      div#d3 {
         background-color:blue;
         text-align:left;
         padding:6px 6px 6px 50px;
      }

      div#d4 {
         background-color:yellow;
         text-align:center;
         padding:50px;
      }
    </style>
  </head>

  <body>
    <div id="d1">DIV #1</div>
    <div id="d2">DIV #2</div>    <div id="d3">DIV #3</div>
    <div id="d4">DIV #4</div>
  </body>
</html>

#5 Float

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Color Blocks</title>
    <style type="text/css">
      body {
         margin:0px;
      }
      div {
         width:250px;
         height:100px;
         border:5px solid #000000;
         color:black;
         font-weight:bold;
         margin:25px;
      }

      div#d1 {
         background-color:red;
         float:left;
      }

      div#d2 {
         background-color:green;
         float:left;
      }

      div#d3 {
         background-color:blue;
         float:left;
      }
    </style>
  </head>

  <body>
    <div id="d1">DIV #1</div>
    <div id="d2">DIV #2</div>
    <div id="d3">DIV #3</div>
  </body>
</html>

Huwebes, Enero 24, 2019

Laboratory Activity #5 - Working with Colors, Images, and Multimedia

Best Practices for Choosing Colors

Besides using colors that are culturally sensitive, other best practices include the following:

• Use a natural palette of colors. This doesn’t mean you should use earth tones, but instead refers to using colors that one would naturally see on a casual stroll around town—avoid ultrabright colors that can cause eye strain.

• Use a small color palette. You don’t need to use 15 different colors to achieve your goals. In fact, if your page includes text and images in 15 different colors, you might reevaluate the message you’re attempting to send. Focus on three or four main colors with a few complimentary colors, at the most.

• Consider your demographics. You are likely not able to control your demographics and thus have to find a middle ground that accommodates everyone. The colors enjoyed by younger people are not necessarily those appreciated by older people, just as there are color biases between men and women and people from different geographic regions and cultures.

The color wheel is a chart that shows the organization of colors in a circular manner. The method of display is an attempt to help you visualize the relationships between primary, secondary, and complementary colors. Color schemes are developed from working with the color wheel; understanding color schemes can help you determine the color palette to use consistently throughout your website. For example, knowing something about color relationships will hopefully enable you to avoid using orange text on a light blue background, or bright blue text on a brown background.
Some common color schemes in web design are as follows:

• Analogous—Colors that are adjacent to each other on the color wheel, such as yellow and green. One color is the dominant color and its analogous friend is used to enrich the display.

• Complementary—Colors that are opposite from each other on the color wheel, such as a warm color (red) and a cool color (green).

• Triadic—Three colors that are equally spaced around the color wheel. The triadic scheme provides balance while still allowing rich color use.

Using Hexadecimal Values for Colors

To remain standards-compliant, as well as to retain precise control over the colors in your website, you can reference colors by their hexadecimal value. The hexadecimal value of a color is an indication of how much red, green, and blue light should be mixed into each color. It works a little bit like Play-Doh—just mix in the amounts of red, blue, and green you want to get the appropriate color.
The hexadecimal color format is #rrggbb, in which rr, gg, and bb are two-digit hexadecimal values for the red (rr), green (gg), and blue (bb) components of the color. If you’re not familiar with hexadecimal numbers, don’t sweat it. Just remember that FF is the maximum and 00 is the minimum. Use one of the following codes for each component:

• FF means full brightness.

• CC means 80% brightness.

• 99 means 60% brightness.

• 66 means 40% brightness.

• 33 means 20% brightness.

• 00 means none of this color component.

For example, bright red is #FF0000, dark green is #003300, bluish-purple is #660099, and medium-gray is #999999. To make a page with a red background and dark green text, the HTML code would look like the following:

Using CSS to Set Background, Text, and Border Colors

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Background, Text, and Border Colors</title>
  </head>

  <body>
       <h1>Background, Text, and Border Colors</h1>

       <p style="background-color:#CCCCCC;
       border:1px solid #000000; color:#FF0000">
       Grey paragraph, black border, red text with a
       <span style="color:#FFA500">orange span</span>.</p>

       <div style="width:300px; height:75px; margin-bottom: 12px;
       background-color:#000000; border:2px dashed #FF0000;       color: #FFFFFF">
       Black div, red border, white text. </div>

       <table border="1">
       <tr>
       <td style="background-color: #00FF00">Green Table Cell</td>
       <td style="background-color: #FF0000">Red Table Cell</td>
       </tr>
       <tr>
       <td style="background-color: #FFFF00">Blue Table Cell</td>
       <td style="background-color: #0000FF">Yellow Table Cell</td>
       </tr>
       </table>

       <blockquote style="background-color:#0000FF;
       border:4px dotted #FFFF00; color:#FFFFFF"><p>Blue blockquote,
       yellow border, white text.</p></blockquote>
  </body>
</html>

Placing Images on a Web Page

To put an image on a web page, first move the image file into the same folder as the HTML file or in a directory named images for easy organization.
Insert the following HTML tag at the point in the text where you want the image to appear. Use the name of your image file instead of myimage.gif:

Aligning Images

Horizontal Image Alignment

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>More Spectacular Yosemite Views</title>
</head>

<body>
  <h1>More Spectacular Yosemite Views</h1>
  <p><img src="elcap_sm.jpg" alt="El Capitan" width="100"
  height="75" style="float:left; padding: 6px;"/><strong>El
  Capitan</strong> is a 3,000-foot (910 m) vertical rock formation
  in Yosemite National Park, located on the north side of Yosemite
  Valley, near its western end. The granite monolith is one of the
  world's favorite challenges for rock climbers. The formation was
  named "El Capitan" by the Mariposa Battalion when it explored the
  valley in 1851.</p>
  <p><img src="tunnelview_sm.jpg" alt="Tunnel View" width="100"
  height="80" style="float:right; padding: 6px;"/><strong>Tunnel
  View</strong> is a viewpoint on State Route 41 located directly east
  of the Wawona Tunnel as one enters Yosemite Valley from the south.
  The view looks east into Yosemite Valley including the southwest face
  of El Capitan, Half Dome, and Bridalveil Falls. This is, to many, the
  first views of the popular attractions in Yosemite.</p>
</body>
</html>

Vertical Image Alignment

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Small But Mighty Spectacular Yosemite Views</title>
</head>

<body>
  <h1>Small But Mighty Yosemite Views</h1>
  <p><img src="elcap_sm.jpg" alt="El Capitan" width="100"
  height="75" style="vertical-align:text-top;"/><strong>El
  Capitan</strong> is a 3,000-foot (910 m) vertical rock formation
  in Yosemite National Park.</p>
  <p><img src="tunnelview_sm.jpg" alt="Tunnel View" width="100"
  height="80" style="vertical-align:text-bottom;"/><strong>Tunnel
  View</strong> looks east into Yosemite Valley.</p>
  <p><img src="upperyosefalls_sm.jpg" alt="Upper Yosemite Falls"
  width="87" height="100" style="vertical-align:middle;"/><strong>Upper
  Yosemite Falls</strong> are 1,430 ft and are among the twenty highest
  waterfalls in the world. </p>
  <p><img src="hangingrock_sm.jpg" alt="Hanging Rock" width="100"
  height="75" style="vertical-align:baseline;"/><strong>Hanging
  Rock</strong>, off Glacier Point, used to be a popular spot for people
  to, well, hang from. Crazy people.</p>
</body>
</html>

Turning Images into Links

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>More Spectacular Yosemite Views</title>
   <style type="text/css">
   div.imageleft {
    float:left;
    clear: all;
    text-align:center;
    font-size:9px;
    font-style:italic;
   }
   div.imageright {
    float:right;
    clear: all;
    text-align:center;
    font-size:9px;
    font-style:italic;
   }
   img {
    padding: 6px;
    border: none;
   }
   </style>
</head>
<body>  <h1>More Spectacular Yosemite Views</h1>
  <p><div class="imageleft">
  <a href="http://www.flickr.com/photos/nofancyname/614253439/"><img
  src="elcap_sm.jpg" alt="El Capitan" width="100" height="75"/></a>
  <br/>click image to enlarge</div><strong>El Capitan</strong>
  is a 3,000-foot (910 m) vertical rock formation in Yosemite National
  Park, located on the north side of Yosemite Valley, near its western
  end. The granite monolith is one of the world's favorite challenges
  for rock climbers. The formation was named "El Capitan" by the
  Mariposa Battalion when it explored the valley in 1851.</p>
  <p><div class="imageright">
  <a href="http://www.flickr.com/photos/nofancyname/614287355/"><img
  src="tunnelview_sm.jpg" alt="Tunnel View" width="100" height="80"/></a>
  <br/>click image to enlarge</div><strong>Tunnel View</strong> is a
  viewpoint on State Route 41 located directly east of the Wawona Tunnel
  as one enters Yosemite Valley from the south. The view looks east into
  Yosemite Valley including the southwest face of El Capitan, Half Dome,
  and Bridalveil Falls. This is, to many, the first views of the popular
  attractions in Yosemite.</p>
  </body>
</html>

Embedding Multimedia Files

A MIME type is an identifier for uniquely identifying different types of media objects on the Internet. MIME stands for Multipurpose Internet Mail Extensions, and this name comes from the fact that MIME types were originally used to identify email attachments. These MIME types should be used in the type attribute of the <object> tag to identify what kind of multimedia object is being referenced in the data attribute.
Following are the MIME types for several popular sound and video formats you might want to use in your web pages:

• WAV Audio—audio/x-wav

• AU Audio—audio/basic

• MP3 Audio—audio/mpeg

• MIDI Audio—audio/midi

• WMA Audio—audio/x-ms-wma

• RealAudio—audio/x-pn-realaudio-plugin

• AVI—video/x-msvideo

• WMV—video/x-ms-wmv

• MPEG Video—video/mpeg

• QuickTime—video/quicktime

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Fun in the Pond</title>
</head>

<body>  <h1>Fun in the Pond</h1>
  <div style="float:left; padding:3px">
    <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
     width="320" height="305">
     <param name="type" value="video/x-ms-wmv" />
     <param name="URL" value="pond.wmv" />
     <param name="uiMode" value="full" />
     <param name="autoStart" value="false" />
     <embed width="320" height="305" type="video/x-ms-wmv"
     src="pond.wmv" controls="All" loop="false" autostart="false"
     pluginspage="http://www.microsoft.com/windows/windowsmedia/" />
    </object>
    </div>
    <p>Michael's backyard pond is not only a fun hobby but also
    an ongoing home improvement project that is both creative and
    relaxing.</p>
    <p>He has numerous fish in the pond, all Koi from various places
    as far as Japan, Israel, and Australia. Although they don't bark,
    purr, or fetch anything other than food, these fish are his pets,
    and good ones at that.</p>
  </body>
</html>

Tags and Attributes

Activity:

Design something (based on your preference topic) that will incorporate images and multimedia files. Also, the images should be horizontally and vertically aligned and clickable.

Laboratory Activity #4 - Using External and Internal Links

After you have more than a few pages, or when you start to have an organization structure to the content in your site, you should put your files into directories (or folders, if you will) whose names reflect the content within them. For example, all your images could be in an “images” directory, corporate information could be in an “about” directory, and so on. Regardless of how you organize your documents within your own web server, you can use relative addresses, which include only enough information to find one page from another.

An attribute is an extra piece of information associated with a tag that provides further details about the tag.

A relative address describes the path from one web page to another, instead of a full (or absolute) Internet address.

Suppose you are creating a page named zoo.html in your document root and you want to include a link to pages named african.html and asian.html in the elephants subdirectory. The links would look like the following:

<a href="/elephants/african.html">Learn about African elephants.</a>
<a href="/elephants/asian.html">Learn about Asian elephants.</a>

Your african.html and asian.html documents in the elephants subdirectory could link back to the main zoo.html page in either of these ways:

<a href="http://www.yourdomain.com/zoo.html">Return to the zoo.</a>
<a href="/zoo.html">Return to the zoo.</a>
<a href="../zoo.html">Return to the zoo.</a>

In the third link, the double dot (..) is a special command that indicates the folder that contains the current folder—in other words, the parent folder. Anytime you see the double dot, just think to yourself “go up a level” in the directory structure.

Linking Within a Page Using Anchors

The <a> tag—the tag responsible for hyperlinks on the Web—got its name from the word “anchor,”and means a link serves as a designation for a spot in a web page. In examples shown throughout this book so far, you’ve learned how to use the <a> tag to link to somewhere else, but that’s only half of its usefulness. Let’s get started working with anchor links that link to content within the same page.

The <a> tag normally uses the href attribute to specify a hyperlinked target. The <a href> is what you click and <a id> is where you go when you click there. In this example, the <a> tag is still specifying a target but no actual link is created. Instead, the <a> tag gives a name to the specific point on the page where the tag occurs. The </a> tag must be included and a unique name must be assigned to the id attribute, but no text between <a> and </a> is necessary.

<a href="#top">Return to Index.</a>

The # symbol means that the word top refers to a named anchor point within the current document, rather than to a separate page. When a user clicks Return to Index, the web browser displays the part of the page starting with the <a id="top"> tag.

Example 1:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Alphabetical Shakespeare</title>
</head>

<body>
  <h1><a id="top"></a>First Lines of Shakespearean Sonnets</h1>
  <p>Don't you just hate when you go a-courting, and you're down
   on one knee about to rattle off a totally romantic Shakespearean
   sonnet, and zap! You space it. <em>"Um... It was, uh... I think it
   started with a B..."</em></p>
  <p>Well, appearest thou no longer the dork. Simply refer to this page,
   click on the first letter of the sonnet you want, and get an instant
   reminder of the first line to get you started. <em>"Beshrew that
   heart that makes my heart to groan..."</em></p>
  <h2 style="text-align:center">Alphabetical Index</h2>
  <h3 style="text-align:center">
  <a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a>
  <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a>
  <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a>
  <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a>
  <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a>
  <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a>
  <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a>
  <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a>
  <a href="#Y">Y</a> <a href="#Z">Z</a>
  </h3>
  <hr />
  <h3><a id="A"></a>A</h3>
  <ul>
  <li>A woman's face with nature's own hand painted,</li>
  <li>Accuse me thus, that I have scanted all, </li>
  <li>Against my love shall be as I am now</li>
  <li>Against that time (if ever that time come) </li>
  <li>Ah wherefore with infection should he live, </li>
  <li>Alack what poverty my muse brings forth, </li>
  <li>Alas 'tis true, I have gone here and there, </li>
  <li>As a decrepit father takes delight, </li>
  <li>As an unperfect actor on the stage, </li>
  <li>As fast as thou shalt wane so fast thou grow'st, </li>
  </ul>
  <p><a href="#top"><em>Return to Index.</em></a></p>
  <hr />
  
  <h3><a id="Z"></a>Z</h3>
  <p>(No sonnets start with Z.)</p>
  <p><a href="#top"><em>Return to Index.</em></a></p>
</body>
</html>

Example 2

Martes, Enero 8, 2019

Lesson 3 - The Computer

Coves the ff. topics:
1. The Computer System
2. Different Types of Computers
3. Input Devices
4. Output Devices
5. Virtual Reality
6. Computer Network

Laboratory Activity #3 - Tables

A table consists of rows of information with individual cells inside. To make tables, you have to start with a <table> tag. Of course, you end your tables with the </table> tag. If you want the table to have a border, use a border attribute to specify the width of the border in pixels. A border size of 0 or none (or leaving the border attribute out entirely) will make the border invisible, which is handy if you find yourself using a table as a page layout tool (not recommended).

The <tr> tag creates a table row, which contains one or more cells of information before the closing </tr>. To create these individual cells, use the <td> tag (<td> stands for table data). Place the table information between the <td> and </td> tags. A cell is a rectangular region that can contain any text, images, and HTML tags. Each row in a table consists of at least one cell. Multiple cells within a row form columns in a table.

There is one more basic tag involved in building tables. The <th> tag works exactly like a <td> tag except <th> indicates that the cell is part of the heading of the table. Most web browsers render the text in <th> cells as centered and boldface.

To boldface the words hello and there, change the table code to this:

<table style="font-weight:bold">
  <tr>
    <td style="font-style:italic">hello</td>
    <td>there</td>
  </tr>
</table>

Controlling Table Sizes

<table style="width:100%">
  <tr>
    <td style="width:20%">skinny cell</td>
    <td style="width:80%">fat cell</td>
  </tr>
</table>

The table is sized to 100%, which ensures the table fills the entire width of the browser window. The two cells within the table are automatically resized to 20% and 80% of the total table width, respectively.

The example above shows how to place an image.

Alignment and Spanning Within Tables

You can align the contents of table cells both horizontally and vertically with the text-align and vertical-align style properties. You can apply these alignment attributes to any <tr>, <td>, or <th> tag. Alignment attributes assigned to a <tr> tag apply to all cells in that row. Depending on the size of your table, you can save yourself a considerable amount of time and effort by applying these attributes at the <tr> level and not in each <td> or <th> tag.

Following are some of the more commonly used vertical-align style property values: top, middle, bottom, text-top, text-bottom, and baseline (for text). These property values give you plenty of flexibility in aligning table data vertically.

Spanning is the process of forcing a cell to stretch across more than one row or column of a table. The colspan attribute causes a cell to span across multiple columns; rowspan has the same effect on rows. Additionally, text styles are used in the second cell within the Description column to create bold text that is both vertically aligned to the middle and horizontally aligned to the center of the cell.

Summary of Tags and Attributes Used