Thrudigital

Designing a website requires a basic knowledge of HTML and CSS. About two weeks ago I spoke to a guy who created his site with a WYSIWYG, and he explained the advantages of such approach. It seems there are only two advantages: time and ease of use. I thought, “Well, if you just have to click here and here, and drag icons around the screen, you’re not really a web designer at all.” And it turns out I was right: once he had to start integrating HTML entities and changing the layout, he was unable to do so. If you use a WYSIWYG editor without knowing how forms, pages, CSS, buttons, fonts or even frames work, your solutions will not be robust or reliable. Moreover, designing a successful HTML page goes hand in hand with search engine optimisation: any page filled with too much invalid/useless code will damage your positions in search engines.

Sponsored links

The basic knowledge: Design of the page

Each page may contain forms which are necessary for communication between the visitor and the website. Forms, fonts, paragrahs, objects and frames (though they are not recommended for SEO purposes, some applications may use them) are all components of your webpage. Bear in mind that every HTML entity should be formatted via a CSS class. CSS classes are usually saved as external text files and their structure is very simple (see below).

The font and CSS

The most used properties for fonts which are used are these:

font-style
font-variant
font-weight
font-size
line-height
font-family

For example, say that we have this in the HTML source code: <font class=”class_1”>Andy and Peter met each other this Monday</font>. Now the CSS file could contain these lines:

.class_1
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.2em;
font-family: Tahoma, sans-serif;
color: Black;
background-color: Transparent;
}

The form and CSS

Forms are usually divided from other elements by a few pixels by default. Then we have to specify the padding and margin properties in order to achieve the same layout in different web browsers.

Again, let’s use a real example:

<form class=”form_1” method=”post”>According to the CSS specified within the declaration of the head element, it could contain these lines:

.form_1
{
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.2em;
font-family: Tahoma, sans-serif;
padding: 5px;
margin: 0px;
position: relative;
top: 0px;
left: 0px;
}

This is just an example. You may use other properties and try different values.

The table element and CSS

Say that you are using tables for some reason. Tables should be used where the data is logically stored in tables, and not for ordinary web pages. On the other hand, tables are used a lot because it is easier to develop a design with them than developing a design based on div tags. All in all, tables are used and if you’re going to use them, you should know that each cell can be formatted as an independent object. Generally we can use the table, td, tr and th elements.

Here is an example:

<table class=”table_1”>
<tr class=”row_1”>
<td class=”column_1”>Text within the first cell</td>
</tr>
</table>
As it is explained above, we should use classes again.

Buttons, CSS and rounded corners

We’ll use this is a separate subheading because a lot of people want to know how to implement buttons with rounded corners. They look cool, and once again it’s CSS which makes it possible. The easiest way is to define the width and height, and use a transparent png image as a background. However, we run into a major problem with Microsoft Internet Explorer here: it doesn’t support transparency, even though it’s been a standard feature of graphics for several years.

If you’re a beginner, then rounded corners may prove too much for you. In any event, here’s the basic principle: each corner should be treaten as an individual object. Ideally you should use 4 different div tags with the position property defined as absolute within one div tag. Since web browsers interpret the CSS code differently, you may end up with a broken layout.

The easiest way to achieve the feeling of rounded corners is to use pre-defined sizes and backgrounds. If you know the background colour’s hexadecimal code, you can create an image of 100×40 pixels with text inside it. When you’ve done this, simply draw an ellipse which fits your requirements. Such ellipse should cross the edges of your button. Now, even though it’s a rectangle in the HTML, the user sees rounded corners. Really, this isn’t about web design skills at all, but rather about knowledge of Corel, GIMP or Photoshop (or any other graphics software).

Frames and CSS

Frames, as mentioned above, should be used as rarely as possible. They’re no good for SEO purposes (because one document is shown as a part of another one, making it hard to create effective cross-linking), but sometimes you have no alternative, especially when you want to create a control panel which allows you to run multiple tasks within a single browser window or tab.

Formatting frames is very easy: you need to define the width and/or height property, borders, padding and margin. See examples above for the usage of properties and values.

The most used CSS properties

Here is the list of the most commonly-used CSS properties:

font-family
font-weight
font-size
text-align
line-height
vertical-align
color
background-color
background-position
background-image
border
margin
padding
width
height
position
top
left
right
bottom