With CSS, sections of a web page can be sectioned off and given certain characteristics, like width, height, background color, etc. Some of these sections can be directed to “float” to the left, or to the right. CSS greatly simplifies the code, and makes edits later on much easier to implement. CSS is much more readable than complicated table structures.

With CSS, you can put sections within sections, similar to way you can put tables within tables to create a layout. Yet, when this is done with CSS, the sheer volume of code is greatly reduced, and the remaining code is simpler and easier to read.

Besides losing all the table code (<tr>, <td>, etc.), you lose all of the descriptive code that is required when not using CSS. All that code is located in its own area, either within the head of the html document, are in an additional .css file, that is referenced inside the html page head.

Another advantage of using Outward Image is price. Our prices often rival the prices at most D-I-Y online print outfits, yet the work you get from Outward Image will not be from cookie-cutter templates. Your designs will match your identity with high-quality custom work.

We work with our customers to ensure they are happy with the final product. You see the designs before you commit to the final job. You don’t pay anything until you are happy with the digital files that will represent your final, finished job. You simply can’t go wrong, so give us a try today.

Before I get into CSS, it may be helpful to see how tables work. Tables use a series of tags in combination, somewhat like the lists used tags in combination. The first set of tags tag is simply <table></table>. As one might expect, the <table> tags are wrapped around the entire table. Inside these tags there will be two other sets, <tr></tr> and <td></td>. The <tr> tags represents rows, and the <td> tags represent cells within those rows.

Here is an example of the structure:

<table>
<tr><td>Blue</td><td>Orange</td></tr>
<tr><td>Red</td><td>Yellow</td></tr>
</table>

This table example is extremely simple. There are also ways to combine cells within rows or columns.

<table>
<tr><td colspan=”2″>Blue</td></tr>
<tr><td>Red</td><td>Yellow</td></tr>
</table>

In the example above, by adding …colspan=”2″… to the first openingtag in the row, html combined the the cells across the two columns of the table to make one cell. The second set of

tags are removed as all the columns of the table are accounted for, and is not needed.

<table>
<tr><td rowspan=”2″>Red</td><td>Blue</td></tr>
<tr><td>Yellow</td></tr>
</table>

With the last two example, one can start to imagine how tables can be manipulated for the purpose of the layout of pages. We can imagine regions set aside for headers, or columns running down one side of the page. Now imagine putting tables within cells. That’s right. If I were to take one of the above examples, and then place an entire table and place it within one cell of another table, the code would look like this:

<table>

<tr><td>Blue</td><td>

<table>
<tr><td>Blue</td><td>Orange</td></tr>
<tr><td>Red</td><td>Yellow</td></tr>
</table>

</td></tr>

<tr><td>Red</td><td>Yellow</td></tr>
</table>

At this point it should be apparent that this method could indeed created many possibilities for the layout of a page. But it is also true that this type of structure can get very complex very quickly. The code soon gets to be very confusing and hard to read. When nothing else existed to aid in the layout of web pages, tables were the answer. Today, however, there is a much better way—table-less CSS, cascading style sheets, which I will cover in my next post.

Tables do have a purpose, however, and that is to display tabular data. If you have a data set that is best displayed in rows and columns, tables allow you to do this in a neat and orderly way, just like table functions in other page layout or word processing programs. There is no tab function in html, so tables are the only to get information, through cells (<td>), to line up in a way that makes sense to the website visitor.

So tables are a great way to display data as a separate element within a page, but should never be used as the layout structure.

In order to specify the list items, they are wrapped in <li> </li>, for “list item”. The finished code for an ordinary list with a heading might look like this:

<h2>Shopping List</h2>
<ul>
<li> bananas</li>
<li>tomatoes</li>
<li>cereal</li>
<li>rice</li>
<li>dog treats</li>
</ul>

Displayed as:

Shopping List

• bananas
• tomatoes
• cereal
• rice
• dog treats

Now an ordered list:

<h2>Shopping List</h2>
<ol>
<li> bananas</li>
<li>tomatoes</li>
<li>cereal</li>
<li>rice</li>
<li>dog treats</li>
</ol>

Displayed as:

Shopping List

1. bananas
2. tomatoes
3. cereal
4. rice
5. dog treats

But first what does an HTML tag look like. An HTML tag is an identifier surround by the symbols <tag> and <tag/>. Every element has an opening tag, <tag> and the closing tags < />. You can recognize the closing tag by the additional / before the last >.

A basic web page is constructed somewhat like this:

<html>
<head>
</head>
<body>
</body>
</html>

Everything between the <html> and </html> tags is the entire page. Everything between the <head> and </head> tags contains vital information for the site to display and perform properly. Everything between the <body> and </body> tags is the visible part of the web page. You should also note here that <head> and <body> sections of the web page are contained within another tag, <html>. You will see this pattern repeatedly as you build web pages.

Here is another example of a simple HTML page. You will notice that now within the <body> tags, there now appears two more sets of tags that contain specific content. The first set of tags are the <h1></h1> tags that contain the headline, and a set of paragraph tags (<p></p>) containing the first paragraph. All web browsers have automatic settings for these tags, so simply by using these tags alone with no other information, any web browser will render these tags properly. Other standard tags are the subheadings (<h2></h2>,<h3></h3> thru <h6></h6>.

<html>
<head>
</head>
<body>
<h1>This is a Headline.</h1>
<p>This is the first paragraph.</p>
</body>
</html>

When this page renders in a browser, the only thing visible to the reader is the content between the <h1> tags and the <p> tags, as shown below:

This is a Headline.

This is the first paragraph.

Another tag is the <blockquote></blockquote>. This tag offsets its content from the rest of the text. People will recognize this as a callout, quote, highlight, etc. of something you want your audience to pay special attention to, usually something from the text itself.

All of the tags so far have been in some from of a paragraph, that the tags used separated the content inside it from the content inside the other tags. There are other tags, however, that can be used specifically on the content within the tags, such as for bolding and italicizing text. You can use the <strong></strong> tag for bolding text, or the <em></em> tag for italicizing.

<html>
<head>
</head>
<body>
<h1>This is  Headline.</h1>
<p>This is the first paragraph.</p>
<blockquote>This is the blockquote.</blockquote>
<p>This is the second paragraph.</p>
<h2>This is a second-level headline.</h2>
<p>This is the first paragraph <em>after</em> the <strong>second-level heading</strong></p>
</body>
</html>

Again, the following is how the code above would looked rendered inside a typical browser:

This is Headline.

This is the first paragraph.

This is the blockquote.

This is the second paragraph.

This is a second-level headline.

This is the first paragraph after the second-level heading

You can try this out yourself if you have a text editor that can save files in the html format. Simply paste the code above into the text editor, save it appropriately as an html document, and then open it with a web browser. You should see very similar formatting as the formatted text you see here.

What makes Weaver special is that it allows the user a multitude of intelligent choices to alter the design of the site. A beginner can simply make the choices it gives, in terms of color, size, special effects, etc. Plus it has many functional aspects, such as what ancillary info about each post you want to display, hiding titles and tags you may not want to display, and so forth. In essence, it allows you to make a WordPress site look more like a website, and not a blog. And, of course, you can still have a separate blog attached to the site.

More advanced users can use its many options in regard to adding, or altering the CSS of the site. Many of the nodules for affecting the appearance of the site, also have optional dialog boxes that allow for additional CSS code. This is a huge plus in the ability to position and size things the way you want. And it doesn’t stop there. There are additional codings areas for the head area of the site for additional CSS styling, Google Analytics code, and other features you may need to add.

Through my next series of blog entries, I am going to concentrate on showing the beginner how to successfully operate a WordPress site. I will start with some basics, though, about how HTML and CSS work, and how they work together. I will demonstrate later in the series how you can use html and css in your WordPress theme, but more specifically, a site with the Weaver theme installed.

Anyone with an active WordPress site should be able to install the Weaver theme any time they want and just start adjusting the settings. If you know HTML and CSS, you should immediately recognize the nature of this theme. In making its choices of settings to choose, the developer did it with design at the forefront. If you don’t know HTML and CSS, there will still be plenty of variables and design choices, right at your fingertips. Come back to learn about HTML and CSS though, as it will only enhance your experience greatly.

Another one may be a Calendar of Events that can post general future events, or more specific schedules for subgroups within the organization. Schedules can be printed out in calendar form, so it may not be necessary to the distribution of printed calendars. And since printed lists can get lost, it is nice to always have the current schedule at your fingertips, even on your phone.

As for design, the history of WordPress has been that it is a bit challenging when it comes to specific design requirements. Theme developers are able to create their own static html and combine it with WordPress to acheive truly unique designs. But another alternative has developed in the form of versatile themes that have adjustable wireframes, commonly desired website options with easy-to-use check boxes and other input fields, and the ability to create css code to override existing settings. This enables an infinite array of designs that can originate from a single theme. Using a theme like this, along with a substantial knowledge of html and css goes along way of achieve truly unique looks and interesting visual interfaces.

The versatility of function that can be achieved in a WordPress site is a direct product of a vast number of plug-in modules developed by individuals or small enterprises, and shared with anyone who is working with WordPress. This number increases daily, and other plug-ins are being modified and enhanced. These modules can offer a very pleasant smorgasbord to someone with a desire to add real functionality to their site without the programming knowledge to do so by scratch. These modules are limited, however, to the frailties of their authors, and some are indeed, better than others. Ratings are provided to help a designer choose more reliable plug-ins.

I always recommend trying a new plug-in on a test site before incorporating into a published site. A new WordPress site can be created in seconds, allowing an easy avenue for experimenting with different plug-ins. Experimentation can tell us how the plug-ins operate, whether they are user-friendly and useful or cumbersome and confusing, and whether it plays well with other plug-ins. If you are planning a site with a specific combination of functions that you have not tried out before, it would be wise to see them all function on a test-site first. And always make a backup before installing new plug-ins so if disaster strikes, it won’t be a nightmare of rebuilding an entire site!

An effective website needs several specific characteristics, but a few of the most important are that the site be visually appealing, that it be informative without making the user work too hard for it, that it makes running the business easier with tangible benefits, and that it be easy to operate and update. All of these things are in the realm of the designer, and that is what Outward Image specializes in.

There are some other important items in building a website also. Outward Image builds sites that are SEO-friendly. Search Engine Optimization (SEO) is a process that begins from the moment construction starts on a site, and continues til that site either expires, or until the owner or operator simply quit working on it. Part of SEO is making regular changes to your website. A site has to be a living, breathing entity if it is to be successful. In today’s maturing internet environment, a static site no longer meets the requirements of SEO algorithms that crave change, and volume of relevant information.

A site can have the most voluminous, relevant information on any given subject, but people may not read it if it is hideous to look at, and it is difficult to find the information the user seeks. Any site, no matter how beautiful to look at, will not attract many visitors, especially return visitors, if it contains sparse information that never changes. So a designer can design a site that has the potential of high search engine rankings, but the whether or not that site achieve that potential depends on its management after it is launched.

Recognizing this fact, Outward Image is proud of its ability to design sites that are attractive, functional, and ready to take advantage of the marketing efforts of the sites permanent managers, whether that be the site owner directly, or whether that responsibility is out-sourced to another entity.