HTML & CSS Direct Study

Table Apperance

***NOTE: Periods are placed at the beginning of tags only to make them visible, since they can be confused as part of the HTML to write this blog. In normal HTML code periods would not exist.

Tables in Review:

Tags:
<.table><./table> -- This tag is used to begin and end a table.
<.tr><./tr> -- This tag is used to begin and end a row.
<.td><./td> -- This tag is used to begin and end a data cell.

Elements:
Border = “ “ – This allows us to set the thickness of the border for the table.
Colspan = “ “ – This allows us to extend the size of one cell over a set number of cells for several columns.
Rowspan = “ “ – This allows us to extend the size of one cell over a set number of cells for several rows.
Cellspacing = ” “ --
Cellpadding = “”


New Content

Tags:
<.caption><./caption> -- This optional tag that gives more details about the table.

By using these elements you can establish a consistent header and footer. These can come handy when using Databinding or data covering several pages.

<.thead><./thead>
<.tfoot><./tfoot>

While this can be accomplished with rowspans and colspans this can be used with table that is complex and extensive. This can help place headers and footers on each page making data more easily read.

Example 1:( this table uses <.caption>, <.thead>, <.tfoot>, and <.tbody>)

Example 1

Elements:

Valign = “” – This is used to align data in a Top, Center, or Bottom vertical format.

Align = “” -- This is used to align data in a Left, Right, Center horizontal format.

Height = “” – Sets the heighth of cells to allow flexible layouts and formatting

Width= “” – Can set the width of columns to make a more flexible layout.

Bgcolor = “” – This is used to change the color of the background on the table.

Bordercolor = “” – Changes the border color

Bordercolordark = “” – Allows two different color settings to create a 3D affect.

Bordercolorlight = “”– Allows two different color settings to create a 3D affect.

Example 2: (This example shows the differing border colors, along with bgcolor-- it is common in the business place to have alternating colors on data row to increase visibility)

Example 2

Concepts:

Layouts -- Table were commonly used to make entire layout for web pages, however more modern websites use division tags that allow more flexibility.

Centered Layout – This creates a simple page that could be developed in one cell or multiple cells. Navigation can easily be added to the side to allow multiple pages, however this design is very simple with similarities to printed material.

Top-Left-Bottom Layout – Commonly referred to as TLB layouts this layout follows its name. There are three cells, the first being a header/ title, the second being a Navigation bar to the left, and finally a footer with Navigation or copyright information.

Stretchable Table Layout – This layout allows for the tables to adjust to the screen. By strategically setting cell widths and heights the table will adjust to the viewer screen.

While all of these are easy layouts and template, more complicated sites require more complex tables. Using tables as a means of laying out a webpage can be very tedious and time consuming.

Databinding – This refers to generating tables from particular data sources whether they be word documents or java applets. These tables can become very powerful when connected to a database, because they can display a variety of different data and information.

Best Practices for Tables:

When developing tables always code in cellspacing, cellpadding, and borders, even if they are all set to 0. This will help visually understand how information is displayed as well as allowing you to check your work in differing browsers to ensure it looks as you had planned.

Make sure that column widths are equal with the overall width of the table this will ensure that the table appears correctly. Bad math can cause tables to come out looking incorrect.

The use of colspan or rowspan will result in altering other rows or cells. Make sure that if you use these elements you take out the corresponding rows or data cells.

Not all table elements will work in all browsers. Be sure to check out your work in each browser to make sure you achieve the desired looks.

Do not excessively nest tables. This can become busy and sometimes slow the page load speed.

Document your work!! Its hard to go back and edit if you lack documentation.

Tab Icons

As browsers have developed viewers gained the ability to open multiple tabs within a window. As a viewer scans the tabs so stand out, while others seem to fade away. One way to distinguish a website is to add the company or organization logo to the tab and address bar.These icons are commonly called favicon. This can be done fairly easy by going through a few step to get the right picture file and inserting one line of code.


Steps to adding a Favicon.

1. Develop or locate a picture/ logo that would be displayed in the address bar and tab on browsers. The extension of this file can be .gif or .bmp, the size of this picture should be 16 pixel by 16 pixel. If the picture is not this size it may be ignored by browsers.

2. Convert the picture into a Windows .ico (Icon Extension) file. You cannot simply change the extension you must have a program to format the picture correctly. There are several sites that can help you with this.

3. Upload the .ico file into the root directory of your web page. It cannot be located in any other folder, the code can only access this file directly from the root file.

4. Once the file has been uploaded, add a simple one line code in between the tags.



As you may notice you have to actually put the name of your website. This tells the browser
where to find it. If you simply put /favicon.ico it will not properly work.

By adding an icon to your address bars and tabs it helps to set your website apart from others, as
well as taking away the standard tab icon (which is a blank page). It provides a professional and finished looking web page that will attracts visitors and add to

Schedule

Spring Semester 2010 Schedule


Date Topics
Jan 11 - 15....................Introduction, Resource Gathering, Topic Selection
Jan 18 - 21...................Schedule, Review HTML, Broadening Topics
Jan 25 - 28...................Tables( Apperance), Location, Tab Icons
Feb 1 - 5.......................Layout
Feb 8 - 12.....................Color Selection
Feb 15 - 19...................Typography
Feb 22 - 26..................Forms - Button, Complex Functions (maybe mySQL connection)
Mar 1 - 5......................Information Architecture
Mar 8 - 12
Mar 15 - 19..................Dynamic HTML
Mar 22 - 26.................Search Feature on the Website and promoting your website on Search Engines
Mar 29 - 2...................Adding Multimedia (Pictures, Animation)
Apr 5 - 8......................Differences between CSS1 and CSS2/ Future of HTML
Apr 12 - 16..................Review Semester Topic
Apr 19 - 23..................Final Project

Resoruces I have

These are the two books I have right now, between them they cover a lot of topics.

Topics for the Semester

This is a list of topics I have started to think of. I am likely to add or edit some of this list:

• Introduction
o HTML Tags
• Layout
• Color Selection
• The difference of CSS1 and CSS2
• Different Types of Forms (more complex)
• Making you site show up in Search Engines
• Tables – how to use them efficiently and changing their appearance\
• Location (how to position things on a page)
• Tab Icons
• Adding Multimedia to a web page
o Video
o Animation
• Dynamic HTML
• Search Features

Goals for the Semester

This semester I have chosen to take a class in HTML and CSS. I hope that from this experience I will be able to understand the aspects of HTML and CSS. The foundation for this study comes from a previous class that has provided me with the basic knowledge of HTML and CSS. What I hope to learn from this class are the different topics of HTML and CSS such as spacing, color selection, typography, best practices, how Web Design has developed and will continue to develop in the years to come.