Multimedia

Designing content accessible to those with audio or visual disabilities

• For all pages that contain audio or video:

o Does it address auditory issues for those with hearing disabilities?

¨ If not, create a detailed transcript describing the presentation.

o Does it address visual issues for those with visual disabilities?

¨ If not, create voiceovers for the presentation.

Color

Designing content accessible to the color blind

• For all pages that use color to emphasize important text:

o Are hyperlinks styled with a significantly different color than regular text?

¨ If not, change the text color to show a strong contrast between hyperlinks and regular content.

o Is color used to describe numbers?

¨ If so, use symbols or labels to clearly distinguish the characteristic of the number.

o Are you using color to signify a special meaning? For example, using red to denote a required field.

¨ If so, clearly describe what the meaning. If a field is required, use an asterisk “*” and describe at the top the meaning of the symbol.

Accessibility without Style Sheets

Designing content that is readable without a style sheet

• For all pages that use a style sheet:

o Is all content readable when the style sheet is removed?

¨ If not, rewrite the HTML code using standards compliant techniques so that all of the information renders correctly.

o Does your page use CSS for positioning?

¨ Consider using relative positioning only. Utilize headers, paragraphs, lists, and tables to ensure that the content is readable if a style sheet were not present, rather than using frequent <DIV> and <SPAN> tags that are confusing if a style sheet isn’t available.

o Does your page use CSS to describe something?

¨ CSS, by itself anyways, should never be used to describe the importance of content. If the style sheet were to be removed, the user should be able to distinguish the importance of what was being styled. To emphasize content with CSS, consider using <EM> or <STRONG> tags to describe the information and then style those tags in CSS.

Image Maps

Designing content that describes the geometric shapes within an image map

• For all pages that utilize image maps:

o Does the page use server-side image maps?

¨ If so, convert your server-side image maps to client-side image maps.

o Does the <IMG> tag contain an ALT attribute?

¨ If not, describe the appearance of the image map in the ALT attribute.

o Does the <AREA> tag contain an ALT attribute?

¨ If not, describe the hyperlink of the geometric shape in the ALT attribute.

o Does the page include an alternative text link for those who cannot handle image maps?

¨ If not, create a counterpart for every hyperlink within the image map.

Tables

Designing content that describes header and data cells for tables

• For all pages that utilize tables:

o Does your table contain actual data?

¨ If not, consider moving the content into a <DIV> rather than using it as a layout mechanism.

o Does your table utilize column headers to describe the data?

¨ If not, change the cells that describe data from <TD> tags to <TH> tags. Use ID and HEADER attributes to associate the headers with content.

o Does your table utilize row headers to describe data

¨ If not, use <STRONG> and <EM> tags to show a relationship with the content. While you cannot use the <TH> tag as a row header, you can use ID and HEADER attributes to describe the relationship within the table.

o Does your table have two or more logical levels of row or column headers?

¨ If so, use ID, SCOPE, and HEADER attributes to describe the data in each column and row. Also, utilize <TBODY>, <CAPTION>, <COLGROUP>, and <THEAD> tags to better describe and format the content.

Frames

Designing content that properly uses frames

• For all pages that utilize frames:

o Does your page clearly define the purpose of each frame and are frames even necessary?

¨ If not, either (1) remove frames entirely because most assistive technologies do not support frames, or if absolutely necessary (2) add text to the body of each frame that clearly identifies its purpose.

o Do the <FRAME> and <FRAMSET> tags include a TITLE attribute?

¨ If not, detail what type of content is included within each frame.

o Do the hyperlinks within each frame properly target the correct frame?

¨ If not, be sure to add the TARGET attribute within every hyperlink that isn’t intended to open in the current frame.

o Is your page available in a format that doesn’t require frames?

¨ If not, give the user the option to break out of frames and include (within the <NOFRAMES> tag) alternative text for browsers that don’t support it.

Flicker

Designing content that is between a flicker frequency of 2Hz and 55Hz

¨ Ensure that all animations do not flicker faster 55Hz per second.

JavaScript and Other Scripting Languages

Designing content that uses scripts readable by assistive technologies

• For all pages that utilize a scripting language:

o Is your navigation menu script accessible to assistive technologies?

¨ If not, ensure that the navigation content is not loaded into an array, but instead included within an unordered list—which can be styled and controlled with CSS and JavaScript.

o Are you using the <NOSCRIPT> tag?

¨ Create a text version for browsers who cannot handle scripting languages.

o Does script manipulated content include a respective description attribute?

¨ Ensure that content manipulated with a scripting language includes a readable description, including ALT and LONGDESC attributes.

o Are client-side form validation scripts readable to assistive technologies?

¨ Ensure that when a user enters an invalid item, they are alerted in a modal window which item is invalid. Remember not to refer to the color or font-weight of a required field, but to focus the selection to the field.

o Does the developer ensure that the field is selected to bring attention to a change or update within a page.

¨ Ensure that the field is selected after any changes are made. If fields are auto-populated, the developer should ensure the form field is selected so that assistive technologies know to read it.

o Are you using event handlers that are not supported by handicap devices?

¨ Ensure that scripting is device independent. (onDblClick, for example, is dependent on a device on the availability of a mouse.)

Other Plug-Ins

Designing content that uses plug-ins readable by assistive technologies

• For all pages that utilize external plug-ins such as Java, Flash, etc.:

o Does your page include a link so the user can download the plug-in?

¨ If not include a link so the user can download it.

¨ Ensure that the plug-in is accessible to assistive technologies.

¨ Ensure that the document is accessible to assistive technologies.

o Note: PowerPoint is usually not accessible and must be converted to HTML to be in compliance.

Form Handling

Designing forms that can by handled by assistive technologies

• For all pages that utilize forms:

o Does your form reside within a table?

¨ If so, remove it from the table. It is not proper to include field titles within table cells. Instead, utilize the <LABEL> tag. Always define an <INPUT> tag with a preceding <LABEL> tag to describe the field.

o Does each field include a TABINDEX attribute?

¨ If not, ensure that the TABINDEX is ordered properly so the focus will move in the proper order.

Navigation (skipping)

Designing content that gives the user the ability to skip repetitive navigation

• For all pages that utilize a navigation menu:

o Does your page give the user the ability to skip the navigation menu to avoid repetitive links?

¨ If not, create a bookmark where your content begins (<A NAME=”content” />) and create a hyperlink at the beginning of your navigation menu to tell the assistive technology it can skip ahead.

Timed Responses

Designing content that gives sufficient time to give a response

• For all pages that require a timed response:

o Does your page force the user to logout after a set amount of time without first alerting the user?

¨ Ensure that the application first alerts the user when the session is about to end and allow them to opportunity to request more time.

Images

Designing content that has a text-equivalent for anything that is not readable by assistive software (images)

• For all pages that have images:

o Do all of the images within your web pages include ALT attributes that thoroughly describe what is being presented?

¨ Ensure that every image contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute.

Video

Designing content that has a text-equivalent for anything that is not readable by assistive software (video)

• For all pages that have video or other types of animation:

o Does the page display animations that are not defined?

¨ Ensure that every image contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute. If the image/animation is for decorative purposes, put it in CSS or include empty ALT attributes.

o Does the page display video that isn’t described?

¨ Include a detailed transcript of the video.

Objects and Applets

Designing content that has a text-equivalent for anything that is not readable by assistive software (objects or applets)

• For all pages that have objects or applets:

o Do all of the objects or applets within your web pages include ALT attributes that thoroughly describe what is being presented?

¨ Ensure that every object or applet contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute.

Equivalent Pages

To be used under special circumstances when it is impossible to be in compliance

• For all pages that cannot be in compliance:

¨ Create text equivalent pages for content that isn’t in compliance

¨ Create a synchronization policy for content to be updated on compliant and non-compliant versions

Black hat SEO has been around since the inception of the internet. For every measure Google and Yahoo take to overcome these schemes, there will always be someone who figures out how to beat the system. You will even find that many people will try these methods and find great success, but what these people don’t know is that they will eventually get caught. When you get banned from the search engines, you get banned forever. To a Spammer, this is irrelevant because they will just find some new scheme to get around it, but to a businessman, it’s the worst thing that can happen.

In 2006, BMW was caught using black hat SEO methods to rank higher in Google. When they were caught, they were banned from the search engines. Their German website was the one that drew so much media attention because their website looked like a normal website, but when JavaScript was disabled, hundreds of lines hidden keywords were found in the page. This was the text that the GoogleBot used to craw the site. When they were caught, they were given a PageRank of 0 and had to rebuild their ranking from scratch.

Build high quality websites filled with quality content that people want to read.

If your website is built solely for changing the rank of another website in Google, you will eventually get banned. However, if your content has been created just for your visitors to enjoy, you’ll find much more success in your online business.

Use ALT tags on all of your images that accurately describe the image you are referring to.

ALT tags allow you to describe an image with words. It is especially helpful for individuals who have disabilities and require screen readers to surf the internet. It is also useful for search engine optimization, but you shouldn’t take advantage of the “hidden” text. Google can penalize you for having several images with irrelevant text in the ALT tags. Here is an example of what an ALT tag should look like:

<img src="http://www.amazingdesignsecrets.com/wp-admin/Jessica.jpg" alt="Jessica, posing for the camera before graduation." />

When testing the keyword density of your website, try not to go overboard on placing random text throughout your copywriting.

When picking out keywords to use in your online marketing campaign, keyword density is essential for the search engines to rank your website highly. Among several other factors, the amount of times a keyword is placed on a particular web page will rank you higher in the search engines-assuming that the keywords are properly placed throughout the copy in complete sentences and in an ethical manner.

Write descriptive titles for your content!

Your title tag has a very big impact on your search engine ranking. Avoid titles only containing “Home Page”, you need to be very descriptive and use your keywords within your title.

Use appropriate anchor text.

Anchor text is a common mistake many webmasters make when creating links. When getting back links to your website, not only is your URL important, but your anchor text as well. What ever you do, DO NOT do this:

<a href="http://www.amazingdesignsecrets.com">Click Here!</a>

Unless you want to rank in these results, you will not achieve a relevant keyword ranking in the search engines by doing what you see above. The search engines use many factors when ranking you in the results, including, your title text, your anchor text, your keyword density, and the categories of sites that back link to you.

When describing a piece of content, use header tags (<H1>-<H6>)

If you are creating some kind of heading for your content, DO NOT use any tag but the heading tag. The search engines really tend to like titles like <h1>HTML Anchors</h1>.

Your header tag should also contain your keywords.

Use search engine friendly URLs, loose the dynamic URLs.

This might not apply to very many people, but your URLs need to be static and your filenames need to be relevant and clear. Do not name your contact page “7.html”, name it “ContactUs.html”. Also, avoid URLs that contain database query information. Do a search for a keyword of your choice, you won’t find very many results that look like this:

http://g.msn.com/0AD00036/931292.1??HCType=1&CID=931292&PG

Try to avoid the query type URL seen above. It should look more like this:

http://shopping.msn.com

Only trade links with relevant websites-this is very important.

Trading links with websites that are not relevant to your website is a bad idea. It will rank you higher in the search engines temporarily, but the search engines are getting smarter every day, I recommend keeping all of your links as relevant as possible. Avoid link farms. It may be tempting to trade links with thousands of people, but it will get you banned.

Build a compliant website.

Make sure that your design follows the W3C’s guidelines to website development. Make sure that your content is U.S. Section 508 compliant for the disabled. Google will rank you better for having accessible content.

1. Remove any tags that Adobe Photoshop or The Gimp generate
2. Move all of the <STYLE></STYLE> information into a separate CSS file. For more information, go back to chapter 12 where it refers to LINK SRC. You will see an example of this below.
3. Clean up the formatting of your code so that indentions are consistent and add ALT tags to all of the necessary images on the page. For example the cocktail class in the picture above should have an ALT tag of “cocktail glass” or “join us for drinks”

CSS File (styles.css):

P {
Font-Family: Verdana;
Font-Size: 12px;
}

H1 {
Font-Family: Verdana;
Font-Size: 14px;
}

HTML File (index.html):

<html>
<head>
<title>Divas</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=iso-8859-1″>
<link src=”styles.css” />
</head>
<body bgcolor=”black” leftmargin=”0″
topmargin=”0″ marginwidth=”0″
marginheight=”0″>
<table id=”Table_01″ width=”800″
height=”601″ border=”0″ cellpadding=”0″
cellspacing=”0″>
<tr>
<td rowspan=”3″><img src=”images/Divas_01.jpg”
width=”96″ height=”190″ alt=”"></td>
<td colspan=”2″>
<img src=”images/Divas_02.jpg”
width=”256″ height=”61″ alt=”"></td>
<td colspan=”5″ rowspan=”2″>
<img src=”images/Divas_03.jpg”
width=”448″ height=”128″ alt=”"></td>
</tr>
<tr>
<td colspan=”2″>
<img src=”images/Divas_04.jpg”
width=”256″ height=”67″ alt=”"></td>
</tr>
<tr>
<td colspan=”2″><a
href=”index.html”><img
src=”images/Divas_05.jpg” width=”256″
height=”62″ border=”0″ alt=”Home
Page”></a></td>
<td><a href=”about.html”><img
src=”images/Divas_06.jpg” width=”99″
height=”62″ border=”0″ alt=”About Us
Page”></a></td>

<td><a href=”events.html”><img
src=”images/Divas_07.jpg” width=”63″
height=”62″ border=”0″ alt=”Events
Page”></a></td>
<td><a href=”members.html”><img
src=”images/Divas_08.jpg” width=”113″
height=”62″ border=”0″ alt=”Members Only
Page”></a></td>
<td><a href=”contact.html”><img
src=”images/Divas_09.jpg” width=”87″
height=”62″ border=”0″ alt=”Contact Us
Page”></a></td>

<td>
<img src=”images/Divas_10.jpg”
width=”86″ height=”62″ alt=”"></td>
</tr>
<tr>
<td>
<img src=”images/Divas_11.jpg”
width=”96″ height=”410″ alt=”"></td>
<td>
<img src=”images/Divas_12.jpg”
width=”165″ height=”410″ alt=”Join us For
Drinks Every Week”></td>

<td colspan=”6″ width=”539″
height=”410″ bgcolor=”black”
STYLE=”color:white;” valign=”top”>

<h1>Title of Page</h1>
<p>
Test Data delivers the highest quality
designs and marketing solutions at
affordable prices. We Believe that you
need a comprehensive strategy to catch and
compel your target market. We believe in
creating demand for your talents, products
or services through positive Web-based
technologies, Media and networking. </p>
</td>
</tr>
<tr>
<td>
<img src=”images/spacer.gif”
width=”96″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”165″ height=”1″ alt=”"></td>
<td>

<img src=”images/spacer.gif”
width=”91″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”99″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”63″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”113″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”87″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”86″ height=”1″ alt=”"></td>
</tr>
</table>
</body>
</html>

Making Several Pages From the Above Template

The final step is to save your template as multiple web pages. This is how you do it:

1. Go to File, Save As, Type in about.html (hit Save)
2. Change all of the content in the page to About Us information including titles, pictures, and text
3. Go to File, Save As, Type in events.html (hit Save)
4. Change all of the content in the page to Events information including titles, pictures, and text
5. Go to File, Save As, Type in members.html (hit Save)
6. Change all of the content in the page to Members Only information including titles, pictures, and text
7. Go to File, Save As, Type in contact.html (hit Save)
8. Change all of the content in the page to Contact Us information including titles, pictures, and text. Now, open your home page (index.html). You should be able to click on every one of your links and doing so should forward you to that specific page.

Open the webpage that we’ve generated from the original design. It should be located in /web/index.html. Our graphics editor does a great job at eliminating the creation of HTML files and the initial programming that we did in the previous chapter. By the way, I chose this design because of its simplicity and ease of scalability. Now that we have the HTML file generated, we just need to make this web page practical.

The first thing that needs to be done is to remove the layer where the body of the page where all of the text is (in this design it is the about us section). To do this, hover over the image in your web browser, right click on about us, hit properties and find out what the image is called.

In this case, the image is called Divas_13.jpg, and it’s located in the images folder. Now, open the web page within your text editor like we’ve done earlier in the book. The easiest way to do this is to open note pad (start, run, type in notepad, and click ok) and go to file open, select the HTML file you’ve been working with, and select open.

Now what you need to do is scroll down to where the SRC is images/Divas_13.jpg and completely alter that line. The first thing you need to do is copy the width and the height to the TD tag, ad a background color to the TD tag (bgcolor) and then completely remove the image from that table column. Here is an example:

Before:

<td colspan=”6″><img
src=”images/Divas_13.jpg” width=”539″
height=”410″ alt=”"></td>

After:

<td colspan=”6″ width=”539″ height=”410″
bgcolor=”black”>
</td>

Now preview your HTML file in your web browser: The body has been completely removed and now you have the <TD></TD> space to add text. Here is the text I’m going to add:

Test Data delivers the highest quality designs and marketing solutions at affordable prices. We Believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking.

So to achieve this, we need to apply it into the table, but we need to apply a white font to all of the text in the table. We will do this with a STYLE tag:

<td colspan=”6″ width=”539″ height=”410″ bgcolor=”black” STYLE=”color:white;”>
Test Data delivers the highest quality designs and marketing solutions at affordable prices. We Believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking.
</td>

Now, notice that the text is in the middle of the table? We need to move it to the top of the table, and to do this, we use the VALIGN tag. VALIGN allows you to Veritically align your content to the top, middle, or bottom of the column. It defaults to the middle, so we just need to change it to the top:

<td colspan=”6″ width=”539″ height=”410″ bgcolor=”black” STYLE=”color:white;” VALIGN=”top”>
Test Data delivers the highest quality designs and marketing solutions at affordable prices. We Believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking.
</td>

The next step is to improve this font and add style to your text. To do this, we’re going to add <p> around our content and in the header, we are going to assign <p> to a certain font and font size.

Add this to the top of the page right below the </TITLE> tag, but above the </HEAD> tag:

<STYLE>
P {
Font-Family: Verdana;
Font-Size: 12px;
}
H1 {
Font-Family: Verdana;
Font-Size: 14px;
}
</STYLE>

And add the <P> tag to your content:

<td colspan=”6″ width=”539″ height=”410″
bgcolor=”black” STYLE=”color:white;”
VALIGN=”top”>
<p>Test Data delivers the highest quality
designs and marketing solutions at affordable prices. We Believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking. </p>
</td>

The next step is to apply a background to the actual web page itself. This will get rid of the all of the white you see around the design. For purposes of this design, we’re going to make it black. So, alter the body tag:

Before:

<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>

After:

<body bgcolor=”black” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>

The next step, how that we’ve established styles, is to associate links to the about us, events, members only, and contact us graphics. I’m also going to associate the logo, to go to a home page (index.html, which we haven’t created yet). We’re going to find these using the same method we did to select the body picture, except this time we’re not going to delete it, we’re going to add an <A> tag around it. Allow me to demonstrate:

1. Right click on about us, hit properties, and get the name of the image
2. In this case, it’s named “Divas_06.jpg”. In the future, it may be a good idea to rename all of the images in your
   navigation menu to make better sense to you, but for the purpose of this project it is not necessary. Now, open the code for the web page, and find that image. There are a few things you need to do. Notice the ALT tag on the image? You should fill this in with relevant content for a few reasons: search engines like it, it is easier for the visually impaired to use their handicap software to know what the image is, and it is also good etiquette for future web designers to take over your code. You also need to add a zero pixel border around the image, otherwise it will default to a one pixel border when you add the <a> tag.

Before:

<td><img src=”images/Divas_06.jpg” width=”99″ height=”62″ alt=”"></td>

After:

<td><a href=”about.html”><img src=”images/Divas_06.jpg” width=”99″ height=”62″ border=”0″ alt=”About Us Page”></a></td>

Now, do these to all of the images in the navigation menu so it looks like this:

<td><a href=”events.html”><img
src=”images/Divas_07.jpg” width=”63″
height=”62″ border=”0″ alt=”Events
Page”></a></td>
<td><a href=”members.html”><img
src=”images/Divas_08.jpg” width=”113″
height=”62″ border=”0″ alt=”Members Only
Page”></a></td>
<td><a href=”contact.html”><img
src=”images/Divas_09.jpg” width=”87″
height=”62″ border=”0″ alt=”Contact Us
Page”></a></td>

Also, since we’ve added a style to the <p> tag and the <h1> tag, lets insert an <h1> to demonstrate where the title of the page is located at.

<h1>Title of Page</h1>

That there is the basics of taking your Adobe Photoshop design template and turning it into an entire web page.

Hyper Text Markup Language, or HTML, is a platform for formatting content for the browser to view and operate. Many applications we use everyday utilize the following HTML concepts behind the scenes including: Microsoft Word, Microsoft Internet Explorer, Mozilla FireFox, and even e-mail clients such as Microsoft Outlook. Once you master these skills, you will open yourself to a world of development and design—which you can use anywhere.

The first web page in your website consist of default filename. This default filename is usually “index.html” and sometimes (but not always) “default.html”. For this exercise, we are going to create an HTML file within Windows Notepad (Start, Run, type in “notepad” and hit enter) or any plain text editor that comes with most operating systems. Your window should look something like this:

Now, you need to save this file somewhere. I recommend creating a folder on your computer called “web”—for the effort of this exercise I’m going to create it on my desktop—and save the file in that folder by the name of “index.html”. Go to file, save-as, type “index.html”, and then change the type from Text Documents (.txt) to “All Files”, and hit “save”:

Now, we’re ready to start coding. The first set of tags that should be included in every web page is:

<HTML>

</HTML>

This tells the browser that it is in fact and HTML document you are working with. Although they are not always necessary, for the purpose of creating VALID HTML documents, you need to add those tags. Next, you will create the HEAD and TITLE tags. These are tags that are interpreted before the web page loads:

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
</HTML>

Notice, under the title tag, I added information between <TITLE> and </TITLE>? That information will show up on the Title bar of the browser window:

Next, you will add content to the web pages body:

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
Content goes here
</BODY>
</HTML>

Notice the content I put between <BODY> and </BODY>? Open the file in our web browser and see what happens:

Now that we’ve created a simple web page, its time to learn the various HTML tags that can be used. Everything from this point on will stay between the <BODY> and </BODY> tags.

<p> – The Paragraph Tag

The first tag that every designer learns is the paragraph tag: <p></p>. Your web browser will interpret each instance of <p></p> as a separate paragraph in the web page.

<p>WhirledVisions Productions delivers the highest quality designs and marketing solutions at affordable prices. We believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking.</p>

<p>Through 15 years of growth, we have become recognized for our professional and innovative approaches. Our ‘team of talent’ and unique can-do attitude translates into success and satisfaction for our clients. </p>

The above will appear like this:

<h1></h1> Header Tags

Header tags allow you to apply a title or label to a specific section of your web page that you would like to emphasize. There is a series of six different header tags available to choose from: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Place the following above the two paragraph tags you just created.

<h1> Welcome to WhirledVisions</h1>

The result will look like this:

Creating Tables

The TABLE element is usually one of the more difficult HTML concepts that a webmaster struggles with in the beginning. It is, however, very simple to master once you understand the concepts. Each table has a table row <TR> and table
columns <TD>. Allow me to demonstrate:

<TABLE>
<TR> <!– << inserting a table row –>
<TD>Left Column</TD> <!– << inserting a column in that row
<TD>Right Column</TD>
</TR> <!– << closing that row element –>
</TABLE> <!– << closing that table lement –>

The result of the above code should look like this:

Now, let’s use these concepts to add a column to our HTML document. Pay close attention to the tags I add to the elements, especially ALIGN, COLSPAN:

<TABLE WIDTH=”400″>
<TR>
<TD COLSPAN=”2″><h3>Website Prices</h3></TD> <TR>
<TD>5 Page Website</TD>
<TD ALIGN=”right”>$1,000.00</TD>
</TR>
<TR>
<TD>10 Page Website</TD>
<TD ALIGN=”right”>$1,500.00</TD>
</TR>
<TR>
<TD>15 Page Website</TD>
<TD ALIGN=”right”>$2,000.00</TD>
</TR>
</TABLE>

The result of the above code is:

There are things you need to pay close attention to, especially:

1. WIDTH: used to assign the elements width in pixels, can be used in the TABLE, TR, or TD tag. You could also use percentages. For example, you could make the first TD 30% and the second TD 70% in width.
2. COLSPAN: notice how the first table row only has one column, and the other rows have two columns? That’s because I set the COLSPAN to 2, so that the row would compensate for the second column’s space and show properly.
3. ALIGN: you can choose to align any element in the table LEFT, RIGHT, or CENTER
4. BORDER: you can also, if you choose, create a border to easily depict where the table rows exist. Simply add BORDER=”1” to the TABLE element.

In the next exercise, I will show you how to assign colors, sizes, fonts, etc. to your TABLES with ease. You will notice that I left the attributes to the TABLE element to a minimum, and it is because we need to use Cascading Style Sheets (CSS) to conform to website design standards.

Hyperlinks and the Anchor Tag

Another HTML element that you should become very aware of is the Anchor tag, or <a>. Within the <a> tag, an HREF is added to bring the user to a particular destination, when clicked. Here is an example:

<A href=”index.html”>Home Page</a> |
<A href=”about.html”>About Us</a> |
<A
href=”mailto:info@whirledvisions.com”>Cont
act Us</A> |
<A
href=”http://www.amazingdesignsecrets.com”
target=”_blank”>Partner</A>

Here is a demo of what the above looks like in our web page. I placed it above the content for navigation purposes, I placed a “|” after every link to use as a divider:

Breaks

Notice in the above picture the logo is very close to the navigation menu? The best way to easily move the content down is to add break tags <BR />. The break tag adds a one line break in between two pieces of content. Unlike the <p> tag, breaks allow you to control your content much more effectively. Here is an example:

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<h1> Welcome to WhirledVisions</h1>
<A href=”index.html”>Home Page</a> |
<A href=”about.html”>About Us</a> |
<A
href=”mailto:info@whirledvisions.com”>Cont
act Us</A> |
<A
href=”http://www.amazingdesignsecrets.com”
target=”_blank”>Partner</A>
<BR><BR> <!- – two line breaks – -><IMG
src=”images/logo.jpg” BORDER=”0″
ALIGN=”LEFT” />
<p>WhirledVisions Productions delivers the
highest quality designs and marketing
solutions at affordable prices. We Believe
that you need a comprehensive strategy to
catch and compel your target market. We
believe in creating demand for your
talents, products or services through
positive Web-based technologies, Media and
networking.</p>

<p>Through 15 years of growth, we have
become recognized for our professional and
innovative approaches. Our ‘team of
talent’ and unique can-do attitude
translates into success and satisfaction
for our clients. </p>
<TABLE WIDTH=”400″>
<TR>
<TD COLSPAN=”2″><h3>Website
Prices</h3></TD>
<TR>
<TD>5 Page Website</TD>
<TD ALIGN=”right”>$1,000.00</TD>
</TR>
<TR>
<TD>10 Page Website</TD>
<TD ALIGN=”right”>$1,500.00</TD>
</TR>
<TR>
<TD>15 Page Website</TD>
<TD ALIGN=”right”>$2,000.00</TD>

</TR>
</TABLE>
</BODY>
</HTML>

And here is an example of what that looks like. Doesn’t look much better now
that the logo has been moved down two lines?

Introduction to Cascading Style Sheets (CSS)

These font style tags are a simple way of adding quick effects to your text. Although, I must warn you, this method of identifying the style of a font has become deprecated according to the World Wide Web Consortium (W3C)—the organization who sets standards development of HTML,. CSS, and other web languages—and are recommended that you utilize Cascading Style Sheets to accomplish this.

It is really your choice which route you would like to go in styling your text. It is preferred; however, that you choose the latter by only assigning values you to your web page elements. It will certainly serve you better in the long run. HTML the values that you assigned above to recycle throughout your entire website—a benefit you do not have with font tags. Here is how you do that:

1. Create a CSS file. I am going to call mine “styles.css”. For purposes of this exercise, I’m going to use Windows Notepad.
2. Type the following values within your CSS file:
   

   .WVBold { //<–the name of the class you
   would like to assign
   Font-weight:Bold;
   }
   .WVItalics { //<–the name of the class
   you would like to assign
   Font-emphasis:italics;
   }
   .WVUnderline { //<–the name of the class
   you would like to assign
   Underline:True;
   }

3. Add the following to directly under the tag of your document but above the tag:
4. Add the classes to each element you’d like to emphasize in your web
   page: Example:<div class=”WVBold”>Demo Text</div> Demo Text
   <div class=”WVItalics”>Demo Text</div> Demo Text
   <div class=”WVUnderline”>Demo Text</div> Demo Text

Applying CSS to Web Page Elements

One of the greatest advantages of using CSS is that you can implement your class within any HTML element. For example, if you wanted to apply the HTML element to a <p> tag, you could simply type <p class=”WVBold”>.

Tables

<TABLE STYLE=”width:400px;”>
<TR>
<TD COLSPAN=”2″><h3>Website
Prices</h3></TD>
<TR>
<TD class=”WVBold”>5 Page Website</TD>
<TD ALIGN=”right”
class=”WVItalic”>$1,000.00</TD>
</TR>
<TR>
<TD>10 Page Website</TD>
<TD ALIGN=”right”>$1,500.00</TD>
</TR>
<TR>
<TD>15 Page Website</TD>
<TD ALIGN=”right”>$2,000.00</TD>
</TR>
</TABLE>

I’ve supplied an HTML and CSS reference guide along with this course with every single element, tag, and value for your convenience. If you downloaded an electronic copy of the course, then it is located at the very end of this book. I recommend printing and laminating it for easy access.

In this book we will cover the industry standard for building websites, which will prepare you for any web design job you might be interested in. Hand-coding is the standard practice that is generally accepted

The advantages are:

• More control over your code
• More understanding of how your website actually works and performs
• Better on performance and load times

The disadvantages are:

• More information to memorize and understand
• Little visualization of what you’re developing

Using a WYSIWYG editor is not very well accepted in the web design community, but its not to say that it should be discouraged at all times. If coding is not the right fit to your development style, there are a few editors which have been very successful in assisting the designer in building beautiful websites. These editors include

• Macromedia Dreamweaver 8 – the absolute best WYSIWYG editor on the market today. Although it has a hefty price tag (which you can get greatly discounted places like Journey Ed, who sell to students and teachers), it the standard in WYSIWYG editors. As we get into developing HTML and CSS code in the next few chapters, you will appreciate Dreamweaver’s capability of switching from WYSIWYG and hand coding modes.
• Adobe GoLive – a must for Adobe Photoshop users. GoLive has a similar interface to your graphics editor, so it’s really simple to move between your graphics program to your web page editor. If you can’t afford it, you can also find it on Journey Ed.
• Microsoft Expression Web – a very affordable new product from Microsoft. Unlike its predecessor Microsoft FrontPage (which is very discouraged), it advanced incorporates tools for CSS and has similarities to Macromedia Dreamweaver. After doing a detailed review of the product, I would rate it highly. Microsoft also has a Graphics editor, similar to GIMP and Adobe Photoshop, called Expression Design—and several other products available in their studio.

The advantages of using a WYSIWYG editor are:

• An easier control over your design—a must for those who are not analytical and do not feel comfortable writing code (although I encourage learning HTML before learning a WYSIWYG editor).
• A quicker method to building websites on-the-fly. WYSIWYG editors allow you to create websites very easily with interfaces similar to Microsoft Word or any other word processor.
• Serves as a great way to instantly view you’re the code you were writing and make design changes when you get stuck

The disadvantages of using a WYSIWYG editor are:

• A large number of capabilities are lost when the designer doesn’t understand or utilize code.
• Increased load times because many WYSIWYG editors generate unnecessary—or even outdated—tags to the HTML your web page is based on.
• WYSIWYG editors make it difficult to pass a website along to another designer to edit and improve.
• As standards in HTML and CSS change, an application upgrade is required to stay up-to-date.
• Sometimes search engines have trouble indexing a WYSIWYG designed website.

Whether it is hand-coding HTML or using a WYSIWYG editor—and the choice is up to you—it is important that you, as a designer are familiar with both methods and can adapt to any web development environment.

Adobe Photoshop

1. Open your document, select the slice tool on the left toolbox and begin to draw a slice onto the image as seen below:
2. Continue slicing until you have a separate image for every element of the web page. I recommend that your entire body, however, is part of one slice because we can replace that slice with actual HTML text later on in the book.
3. It is a good rule of thumb to divide your image into as many as possible, which will increase your web pages browser load time. The final step is very easy, simple go to “File”, “Save for Web”, select the format you want (I recommend choosing a GIF at High Quality, but it really depends on your preference of quality), and select “Save”.
4. Select “Save as Type” and choose “HTML and Images”, name your files something appropriate (in my case it’s “divas.html”), and hit “save”.
5. Open your file (where ever you saved it, I recommend making a folder like /divas/divas.html to work in) in your web browser.

Wasn’t that simple? In just a few minutes we were able to slice an entire website and render it in our web browser.

• AJAX – Tried GMail yet? GMail is an excellent example of how AJAX is used to make a web application usable and “fun” to use. GMail was able to get almost immediate market share by creating one of the first AJAX engine e-mail clients. Several other hosted application providers have followed this trend.
• Blogs – Do you have a blog? It doesn’t matter if you’re a 16 year old girl in high school or an established rock musician, creating a blog is one of the best ways to create interactivity on your website. It also allows you to easily and quickly bring your thoughts to life. High quality blogs (like this one) are able to bring targeted traffic to your website for free. It’s also an awesome opportunity to express yourself and get people to listen to what you have to say.
• CSS – Over are the days where you can throw together a website in Microsoft FrontPage (or some other WYSIWYG editor) and conform to accessibility standards. CSS has revolutionized the way that web pages are rendered and are deprecating HTML tags such as Tables, Font Tags, and Meta tags. The best Web 2.0 websites are completely CSS driven, where DIV tags mandate the design elements–making your websites design easily changeable and adaptable to any media: projectors, mobile phones, web browsers, and PDAs.
• RSS - People want you to share your content with them. RSS is one popular way to incorporate your content across multiple platforms. This blog, for example, has the capability to share blog updates by syndicating every update with an RSS Aggregator or within your favorite reader, such as Google Reader or MyYahoo.
• Social Networking - MySpace and FaceBook are popular social networking websites that people use to “get together” and share information about one another. If your website brings people together you reap so many benefits because you are able to categorize your users/customers and target products and services based on that category, thus increasing your conversion rate.
• Wiki’s – Not only do people want information, they want to be able to create information. Content is one of the most difficult things webmasters struggle with. Why not open your content up to editors (with moderators of course) and lets thousands of people control content that you used to control all by yourself. Just imagine the amount of work can be done when you have a team of people helping you out!

Next time you build website, why not focus on bringing people together and get ahead of the curve by incorporating some of these new concepts.

HTML was originally developed so that the web designer could format and arrange their web page as they choose. Tables allowed them to arrange information in an organized fashion. Soon, however, designers started to use these tables to organize the content of their website by adding columns for menus, headers, etc. This began to become a growing trend and made it difficult for browsers to read and understand this information—which explains what happens when you look at an HTML table designed website on a mobile phone, you’re unable see the website very easily.

Now that CSS has become so popular, web designers are using a different approach to designing their websites. Instead of using the TABLE tag along with the TR and TD tags, we are now using DIV and SPAN tags to simply define the information we are working with and assigning a CSS class or id to the tag. Now, when you look at a CSS designed website, mobile phones and other devices will simply strip the CSS and only show the content (which is in your DIV or SPAN tags). This allows your online presence to be interoperable between all media.

Besides interoperability, you are also ensuring that your content is U.S. Section 508 Compliant, so that those with disabilities and handicaps can easily explore your website. By doing this you also help with search engine optimization, validated code, and ease of updating or changing your design—which in turn will help bring valuable traffic to your website.

I greatly recommend that you explore designing CSS layouts while to learn HTML and Graphic/Web Design. It will help you greatly in the long run, even though it can sometimes become a very advanced and difficult task