w3central.com

I like wordpress a lot. In fact this site is built with it. I don’t have as much time to devote to this site as I would like, so a nice option is to post a wordpress how-to now and then. Short, easy and helpfull.

You can set the background color of an element by specifying the property “background-color”. The value can be a hex code, a color name, or a RGB value.

For example, if you want to have purple background in a paragraph, you can do it with one of three ways.

Specifying the color name:

p { background-color: purple; }

Giving its hex value:

p { background-color: #800080; }

Or giving its RGB value:

p { background-color: rgb(128,0,128); }

With the background-color trick you can also set the color for other elements. Say you want your whole page to have a lightgrey background, you can do this as follows:

body { background-color: #d3d3d3 }

Note 1: For hex values it doesn’t matter whether you use a capital or not. You can use d3d3d3 of D3D3D3 as you wish.
Note 2: Hex values are most often used.

One way of specifying a color is through giving its RGB value. The R stands for red, the G for green, and the B for blue. Each color can have a value from O to 255.

Example:
white: R:255 G:255 B:255
black: R:0 G:0 B:0
rose: R:219 G:36 B:79

In your CSS stylesheet you can use the values as follows:

p { background-color: rgb(219,36,79); }

Other means of defining the color are by giving its name, or specifying the hex code.

This page will contain a list of practical solutions. Sometimes what you need is just a short “How do I do that?”, and this page is here to answer these questions.

I have been in the sandbox for some time now. I really didn’t expect this. Not on a subject like this. But I guess I’ll have to live with it. It was a bit depressing at first I have to admit. It can take quite a while before you are released and that means you are working on something all that time that won’t attract visitors. Basically, you are working for nobody. That’s why I didn’t feel like adding content. But that’s not the right attitude. I plan to add content on a regular basis now. Probably not much, but at least a page a week of quality content. By the time I get out I hope it will be worth it.

I create and test sites on my computer and prefer to use subdomains for that. Suppose you want to create a subdomain w3central.localhost, how would you do this?

You only have to change two things for this. First, you’ll need to find your Apache configuration file. This is called httpd.conf and resides somewhere in your apache directory. Open it and look for the virtual hosts section (mostly somewhere near the end). Normally you’ll find an example of the configuration of a virtual host inside it. Uncomment “NameVirtualHost *:80â€? and add a section like this:

<VirtualHost *:80>
ServerAdmin admin@localhost
DocumentRoot “path_to_your\htdocs\folder_you_wish_to_use”
ServerName w3central.localhost
</VirtualHost>

You can add more to the configuration, like a path to an error log (“ErrorLogâ€?), but you don’t strictly need this to have it up and running on your localhost.

Windows also wants to know about this. Browse to windows\system32\drivers\etc\ and open the file “hosts� with your text-editor. Add the line “127.0.0.1 w3central.localhost�.

Next and last step is to restart your Apache server and browse to w3central.localhost to test it. If you need more than one virtual host, you can simply add another “VirtualHost� section. The “NameVirtualhost *:80� is only needed once.

MSN is the second big search engine that has pages from w3central in its index. Nice. I’m sure Google will follow soon.

The more you seperate your layout from form, the easier a redesign is going to be. You will only need to update your stylesheet since all design is located there. I’ll give you some basic tips to do this.

1) Use a stylesheet instead of inline styles

This one is obvious. You can have an inline style like in the folowing example:

<img id=”family” style=”height: 100px;” src=”image.jpg” alt=”myimage” />

But if you define this height in your stylesheet, you can have this height for more than one image that needs this height.

img#family, img#vacation { height: 100px; }

All pictures that use this styling can be updated withing one file instead of having to change all occurences.

2) Use background-images where possible

You can create a link with an image like this:

<a href=”http://somelink.com”>
<img src=”image.jpg” alt=”image” />
</a>

But you can just as well create the image through your stylesheet:

<a href=”http://somelink.com”></a>

img { background-image: url(’image.jpg’); }

And style this image further with height and width if needed.
The same principle applies for images used in divs and other elements. Often you can eliminate these and put them into your stylesheet.

You have created an image that serves as a link like this:

<a href=”http://link.com”><img src=”myimg.jpg” alt=”image” /></a>

The problem is that it displays a border and you don’t like that. The solution is adding the following to your css file:

img { border: none; }

Or if you use inline styles:

<a href=”http://somelink.com”><img style=”border: none;” src=”myimage.jpg” alt=”myimage” /></a>

Another option is to have a background-image for the link:

<a href=”http://somelink.com”></a>

and in your stylesheet:

a { background-image: url(’myimage.jpg’); }

You can set a height and width too so the image fits nicely. An added advantage is that you only need to change your stylesheet to get a different layout.

A one page introduction to the basics of HTML. How does that sound? Let’s get started.

preparation

All you need for this crash-course is a texteditor, like notepad. Any will do, as long as you can save your page as a HTML page.

So open up a texteditor, and save the empty page as homepage.html. To save it with a “.html” extension in notepad, after you have chosen “save as”, look in the drop-down menu for “save as type” and select “all files”. Then type in “homepage.html” as filename. Don’t forget where you saved it.

If you have closed the file and want to edit it, right-click on it and choose “open with”. Then choose your editor.

a basic HTML page

Let’s look at a basic HTML page.

<html>

<head>
<title>my homepage</title>
</head>

<body>
<p>Welcome to my website.</p>
</body>

</html>

We see elements and tags here. A tag is something like “<head>” or “</head>”. They are also referred to as the opening tag and closing tag. An element consists of an opening tag and a closing (or end) tag. Thus an example of an element is “<head></head>”. Sometimes the opening and the closing tags are merged into one, like “<br />”, when there is nothing between them.
If you look at the HTML page, you’ll see that elements are enclosed in eachother. When you place a closing tag, every element that was started before the opening tag needs to be closed too. So before I closed with “</head>” I needed to close the title element with “</title>”. This would be wrong:

<head>
<title>
</head>
</title>

Every HTML document has a head and a body, and these are enclosed in “<html></html>”. The head element contains some information about the page, like the title. The name of the title is enclosed in the opening and end title tag. What we put between an opening and closing tag is also called the contents of the element.

The body contains the actual content of the page. We see another element used there: the element that is used for a paragraph: <p></p>. This element is not necessary but often used because we divide our texts into paragraphs.

If we want to make the word “website” bold, we put it into an element created to make words appear bold:

<p>Welcome to my <b>website</b></p>.

It will appear like this:

Welcome to my website

common elements

We’ve already seen some elements above. “<html></html>”, “<head></head>”, “<body></body>” and “<title></title>” are always used. Some other elements that you encounter often are:

<p></p> for a paragraph
<b></b> makes a text appear bold
<table></table> for a table
<tr></tr> a table row inside a table
<td></td> a data cell inside a table row
<ul></ul> an unordered list
<li></li> a list item
<a href=�the-url�>description of the link</a> a hyperlink
<img src=�link-to-image.jpg� alt=�image-description� /> an image

an easy trick

There’s an easy trick to see how something is done on a webpage. Right-click on the page and choose “view source” or “view page source”. You’ll get access to how the page is created in HTML. Curious about how something is displayed or done? Look at the source. You often can learn a lot of it.

This was short. But you know have some very basic understanding of how HTML works.