plainblack.com
Username Password
search
Bookmark and Share

Design Basics

In the world of design there are three basic building blocks: XHTML, CSS, and programming logic. This chapter will provide a simple introduction to each area to dust off your skills or, if this is new, to provide entry level knowledge.

XHTML

 

A basic knowledge of XHTML is helpful in design. You will find an “HTML Cheat Sheet” located in the index of this book to use as a reference. To begin, an example for a basic webpage is provided below:

XHTML Example Page

 

 

<html>

<head>

<title>An Example Page</title>

</head>

<body>

 

Hello World!

 

</body>

</html>

 

 

This is a bare-bones page. You could actually copy this code right into a text editor program and save it as a .htm file, and you would create your very first webpage.

 

There are three essential tags that any webpage needs: <html>, <head> and <body>

  • <html> : This tag encloses the entirety of the page. Every tag that you have will be between these, although there are a few exceptions. However, all basic XHTML tags will always be between these

  • <head> : Almost every programmatic script, such as Javascript, will appear here. Although you could place content here, few do. You would also place your CSS here.

  • <body> : This will hold all content on your page. From headings to bullet lists to paragraphs, everything will appear here.

 

CSS

 

WebGUI uses Cascading Style Sheets (CSS) on virtually every page it generates, as do most pages on the Internet to some degree. CSS is a powerful tool. With it, you can change the color of text in your paragraphs, make all the first letters in your titles bold, make links change colors when you roll over them, and even layout an entire page! While useful, CSS can also be a bit complicated, so take some time to practice and familiarize yourself with it.

 

CSS Syntax

 

CSS uses straightforward syntax. Like XHTML, CSS doesn’t require any special program in which to code, just a simple text editor will suffice. Provided below are a number of CSS examples followed by explanation.

 

CSS Example 1

 

 

p {

color:red;

}

 

 

In this example, the first thing to point out is the p. You might recognize this if you are familiar with XHTML; it is the paragraph tag. This is what is known as the “selector” because it is selecting the paragraph tag.

 

Immediately following the p, and at the end of the example, are opening and closing brackets { }. These indicate that everything between them will be “properties” of the selector (p). The remaining text, color:red; , is the property. It is setting the color property for the paragraph. In this case, all text that appears within the paragraph tags will be red.

 

Perhaps your intention is not to have all of the text red. Maybe you just want to use the color red for emphasis in certain areas. In the example above, each time a p tag is used, the text within it will be red. This is called a “global selector,” meaning that its settings target every p tag on the page.

If you don’t want all text to be red, you need to prevent this, while still allowing red paragraph text to be an option. This is where classes and ID’s come in.

 

Classes

 

Simply put, classes are a way to prevent a selector from being global. If you only want a few paragraphs to actually be red, or maybe just have a little padding on the left hand side, you can create a class specifically for that reason.

 

CSS Example 2

 

 

p.redText {

color:red;

}

 

 

The difference here is subtle. There is now .redText following the p tag. This is called a class. By setting this up, none of the p tags will default to using red text. Instead, you can call the class in the XHTML.

 

CSS Example 2, Using it in XHTML

 

 

<p class=”redText”>All text here will be displayed in red</p>

 

<p>But, none of the text here will be.</p>

 

<p class=”redText”>And again, text here will be in red</p>

 

 

 

CSS Example 2, In Action

 

 

 

Using the class attribute, and giving it the name of the class defined in the stylesheet, applies the attributes to any paragraph tag specifically calling .redText. Plus, it can be used multiple times in the XHTML, just like in the example. The class definition allows for red text in any paragraph on the page. Removing the p tag from the selector will allow you to apply red text to anything on the page, not just what appears within the p tags.

 

CSS Example 3

 

 

.redText {

color:red;

}

 

 

By removing the p tag, you’ve set up an independent class. That class can now be used for anything on the page.

 

CSS Example 3, Using it in XHTML

 

 

<span class=”redText”>I'm using red text!</span>

 

<div>I'm not!</div>

 

<div class=”redText”>But I am!</div>

 

<i class=”redText”>And I am too, plus I'm also italicized!</i>

 

 

CSS Example 3, In Action

 

 

IDs

 

ID’s and classes are extremely similar. Despite the fact that ID's seem to operate like a class, you can only use them one time. Classes can be used and reused on a page, but an ID can only be called once. Think of an ID like your Social Security Number. There can be only one and it is unique. Using the same example as above (example 3), an ID will be used to place red text in a paragraph.

 

CSS Example 4

 

 

#redText {

color:red;

}

 

 

The syntax in examples 3 and 4 are almost identical. The main difference is the pound sign (#) in example 4, which precedes the class name instead of a period. Just like a class, you have to call this ID to apply its attributes.

 

CSS Example 4, Using it in XHTML

 

 

<p id=”redText”>Once again, I'll be red text</p>

 

<p>But I won't be.</p>

 

 

CSS Example 4, In Action

 

 

An ID may seem limiting, since you can only use it once on a page. Designers often use an ID for reference. Typically, designs have only one header and footer, so a designer might create ID’s called #header and #footer because these things are only used once anyway. Also, with the increasing use of DHTML (dynamic html), ID’s become more important so Javascript can target specific areas on a page.

 

Note: A very often used Javascript function is getElementByID();. The sole purpose of this function is to grab elements that you have assigned specific IDs to in your HTML.

 

The Nature of Cascading

 

One of the things that often confuses people with CSS is the cascading portion of it. True to its name, properties can “cascade” from one element on the page to another, similar to a waterfall's water cascading down from one rock to another. It's the same water, but it's touching on different rocks which affects it as it falls.

CSS Example 5

 

 

body {

font-family:arial;

font-size:10px;

}

 

p {

color:red;

}

 

i {

font-size:12px;

}

 

p {

color:black;

}

 

 

Web browsers always read CSS from top to bottom. This means that whatever is declared first will have its properties “cascade” down to whatever comes after it.

 

As you'll see in the next practical example, this can be used to great advantage so that you don't have to repeat the same properties over and over in your CSS. What you may also notice is that this can occasionally work against you. Both topics will be touched upon here.

 

Example 5, Using it in XHTML

 

 

<body>

<p>

<i>Welcome!</i> Here is an example.

</p>

</body>

 

 

The words between the p tags will display the text with the Arial font.

 

The word Welcome will also use that font, but it will also be a little larger than the rest of the text on the page. It’s also important to note that the word Welcome will be in black, not red.

 

If you look at example 5 there are two definitions set for paragraph tags. The first tells the page to display all text between the p tags in red, but then the other definition after it says to show all p tags in black. Always remember, the LAST definition takes precedence, not the first.

 

Target Even More Specifically

 

In style sheets you’ll often see a series of links that should appear a certain way in the header, but not anywhere else on the page. This is where targeting children of a class or an ID comes into play.

 

CSS Example 6

 

 

#header a {

color:red;

font-weight:bold;

}

 

 

In this example, the page is being told to apply this style whenever there is a tag within a tag that has the ID “header”. Any link in that header will be in red and bold.

 

CSS Example 6, Using it in XHTML

 

 

<div id="header">

<a href=”/home.htm”>Home</a> |

<a href=”/about.htm”>About Us</a> |

<a href=”/contact.htm”>Contact</a> |

<a href=”/products.htm”>Products</a> |

<a href=”/sitemap.htm”>Sitemap</a> |

</div>

 

 

CSS Example 6, In Action

 

 

Once you see it, it doesn’t seem so complicated. There are a variety of combinations that you can create using this syntax. From targeting header links, to specifying paragraphs within a div tag, you can narrow down almost anything on a page. This gives you unprecedented control over your page, much more than just standard XHTML tags. The great thing about this method is it requires very few classes for it to work. There are many possible combinations, take a look at another example.

 

Other Example

 

 

p a {

font-size:8px;

}

 

#bigText div {

font-size:18pt;

}

 

span.redText p.spacer {

padding:5px;

border:solid navy 1px;

width:25%;

}

 

 

XHTML

 

 

<p>

<a href="#">A Tiny Link</a>

</p>

 

<div id="bigText">

<div>

Some big text.

</div>

</div>

 

<span class="redText">

<p class="spacer">

A little bit of padding.

</p>

</span>

 

 

CSS In Action

 

Programming Logic

 

The purpose of this section is not to try to force programming down your throat. However, there needs to be some discussion about important logic when working with WebGUI templates.

 

The IF Statement

 

Nearly everything in a WebGUI template deals with true or false. You can test certain things to see if they’re true, and if they’re not true you don’t have to do them. A simple example is when you turn admin mode on in WebGUI, the control buttons to edit, copy or cut an asset appear. That’s because there is a logical test in every template that says something like this:

 

 

Obviously, if admin mode is off the control buttons do not appear. This is a classic example of an IF statement.

The IF/ELSE Statement

 

Now build upon this concept. What if you wanted to display a message that told the user admin mode is off, but you didn’t want it to show up when admin mode was on? Instead, you wanted the asset’s control buttons to show up. This logic would be used:

 

 

This is an example of an IF/ELSE statement. If something is true, do the requested action, otherwise do something Else.

 

Basically, this is an IF statement that has been given a default action if the IF statement is false. If the ELSE portion of the statement was not provided, nothing would happen if the IF portion were false; however, now you can make something happen.

 

The IF/NOT Statement

 

The reverse of the IF/ELSE statement is the IF NOT statement. This functions exactly the same way as an IF statement, except now you’re testing for something that is not true. Use the same example as above, but this time with the IF NOT logic:

 

 

Versus an IF statement:

 

 

It’s a small difference, but it confuses many people. Simply remember that you are testing for something false (NOT true).

 

The IF/ELSE IF Statement

 

Finally, there is the IF/ELSE IF statement. This is similar to the standard IF/ELSE statement but with a key difference: instead of having a blanket default action if something is false, you can make another test. For example:



 

This contains the standard test to see if admin mode is on. However, if admin mode isn’t on, there is another test to see if the user is even logged in. If the user is not, the words, “You’re not logged in!” will be displayed. IF/ELSE IF statements are useful if you really need to test for multiple possibilities, beyond just a simple true/false test.

 

Conclusion

 

Every website is composed of pieces- XHTML, CSS, Javascript- and in the case of WebGUI, template variables and Macros. To successfully build a site, you need to have at least a rudimentary understanding of these concepts.

 

Learning XHTML is only the first step in a chain of connected components. The real trick is picking up CSS and understanding how powerful it is. But even beyond that, you've only learned how to create a static website, and there's so much more that can be done.

 

Picking up some concepts of a programming language is necessary if you plan to seriously create your own templates for WebGUI. Try to think logically when approaching any template, deciding on what you actually want to accomplish.

 

Keywords: classes CSS HTML IDs javascript template XHTML

Search | Most Popular | Recent Changes | Wiki Home
© 2018 Plain Black Corporation | All Rights Reserved