In today’s webinar, we talked about tables in HTML. Tables are one of the most used tag sets in the language; commonly used for overall layout as well as small arrangements of text.

The basic set is very simple: starting the table, ending the table, with row and table cell tags in between. What’s challenging and interesting is handling the combination of rows and cells when needed, then the positioning of text, and finally the proper use of color in borders and backgrounds.

Nesting tables one inside another is the next level of complexity, but it’s done quite often in web pages. The challenge is not to use too many tables in a page because the browser has to read through all the code first before rendering. The difference may be in milliseconds of load time, but tables are in fact slower to load than unstructured text, so you must use them judiciously.

We had two handouts for this webinar that make good practice documents. You can download them from http://www.pcpowertips.com/webinar/20080312/index.html. The second handout has 11 examples of the different formatting you can apply to a table.

Enjoy!

Webinar Date: March 12, 2008

In today’s webinar, we started our HTML lesson with a discussion of browsers and how they read and render web pages. HTML pages are plain text documents containing tags that control the appearance of text and graphics in the page.

The World Wide Web Consortium (W3C) sets the standards for the appearance of text and behaviors in web pages so that there are common outcomes when a page is displayed. If for example, a tag is broken or missing, browers revert to the default appearance of text (usually Times Roman) in the specified font size.

Next we looked at the basic set of tags required for a page to display at all. Then we added simple heading and paragraph tags to give the text some structure. Taking advantage of attributes that the tags offer, we could change text alignment (left/center/right), as well as “text decoration” like bold or italics. We also tried creating hyperlinks and adding images using those tags.  The demonstration files for these activities can be downloaded from http://www.pcpowertips.com/webinar/20080305/index.html.

Next week we’re going to cover tables, which are used for positioning text and graphics.

Webinar Date: March 5, 2008

In today’s webinar we talked about Web Design tools. When you’re first learning how to create web pages, the simpler your web editor the better. You want to be able to focus on the code itself, not be distracted by all the bells and whistles in the software.

HTML pages are plain text documents. Whatever tool you use MUST be able to save plain text files with no formatting. You can create web pages in Notepad — you don’t need anything fancier than that. We even started a web page in Notepad during the webinar. It’s nice, though, to have a tool that is meant for HTML code.

We looked at TextPad, a $32 tool that has some shortcuts for creating web pages. If you decide to buy that tool, however, be sure to download this HTML definitions file (HTMLTAGS.TCL) and replace the one that comes with TextPad. I adjusted the default TextPad HTMLTAGS.TCL file because it still uses upper-case tags and some tags that aren’t used anymore.

Next we looked at a well-featured, free web page editor called HTML Kit. I used this one when I took CSS classes at a nearby community college. You can download it from http://www.chami.com/html-kit. HTML Kit has both syntax coloring and syntax prompting, which help you visually as you work with the code.

Finally, we looked at FrontPage and Adobe GoLive as examples of full-featured, professional web design tools. They offer syntax coloring, syntax prompting, a built-in FTP tool for uploading files, and a structural file that organizes and tracks all of the files in a site.

• FrontPage and its successor, Expression Web, go to great lengths to shield users from HTML code by providing design layout views that simplify creating web pages.
• FrontPage has been very popular with users who are starting to create their own web sites because there are hundreds of design templates available.
• Adobe GoLive and Dreamweaver are advanced tools used in conjunction with other Adobe Products like Photoshop and Illustrator.

If your web design tool does not include the ability to immediately upload your files to your web server, you’ll need an FTP tool. There are two that I’ve used and/or recommended:

• CuteFTP  http://www.cuteftp.com
• VanDyke SecureFX http://www.vandyke.com/products/securefx/index.html 

In addition to web design tools, you will probably want to look into the following supporting tools:

• Color chooser/constructor: Amiasoft Color Pro http://www.amiasoft.com/colorpro
• Menu builders:
  • Ultramenu http://www.ultramenu.com
  • Deluxe Menu http://www.dhtml-menu.com/
• Creating and editing MP3 files for podcasting: Sony Sound Forge Audio Studio http://snipurl.com/pcpt_audiostudio 
• Creating and editing videos and DVDs: Sony Vegas Movie Studio http://snipurl.com/pcpt_moviestudio 
• Creating screen capture videos: Camtasia http://www.techsmith.com/camtasia.asp

There are more tools you can use, but these will give you an excellent start.

Webinar Date: February 27, 2008