Great Lessons You Can Learn from news and tutorial websites

Here's the last part of this tutorial. Our topics are:

Linking other pages and other websites
Using CSS in styling your web pages

Let's begin here.

Creating and placing hyperlinks

It is very important to create and place hyperlinks in your website to help your visitors navigate your site from pages to pages. These are the links displayed in your web pages that will change the web page displayed when clicked by visitors. These must be prominent and properly placed in your pages. If not, your visitors will be confused and will eventually leave your site unhappy or unsatisfied. Hence, he may never return. So, make sure that your hyperlinks are prominent, descriptive and orderly placed in your pages.

Linking your pages

In page 1, you have to place the following code where you want the visitor to click to go to your page 2:

your link description

Looking at the codes, "a" is HTML anchor tag used for hyperlinks, "href" is the attribute referring to the URL of the destination page and "title" refers to the description of your link. If possible, use relevant keywords in your description for search engine optimization.

Now, type the above in your mywebpage.html and replace the domain name, web page name, title and link description with yours. Use relevant keywords in your link description for search engine optimization. Then, save and refresh your browser to show you how the above is displayed on the web.

To see more, hover or place your cursor on the link. The "title" value will be displayed on the link while the "href" value or URL of the destination page will be shown at the left side of the bottom bar of the browser window. It may work only if you are online, news and tutorial websites and your site is already active on the web.

Linking to other websites

You have to place the following code on your website pages where you want your visitors to click to go to other particular websites:

your link description

If you notice, it is the same as linking your web pages but it is pointing to another website. So, we added the "target" attribute with the value of "_blank" to open the destination page into the new browser window. This will make your site remain active or open even if your visitors click the link to another website.

To try it, type the above in your mywebpage.html and replace the domain name, web page name and link description with yours. Use relevant keywords in your link description for search engine optimization. Then, save and refresh your browser to how the above is displayed on the web. Click the link and a new browser window will open while the page where you clicked the link remained open.

Hyperlinks with images

You may use images in your hyperlinks. In this case, the visitors can click an image in your web pages with links that will send them to other pages in your site or to other websites you have linked to. See the example below:

Linking to your other web pages:

Linking to other websites:

If you notice, it is just like you are inserting an image to your web page. The only difference, it is placed between the anchor tags. So, in place of link description, you use an image. When your visitors click the image, the page will change to the destination page.

To try the above, place the image that you want to be used with hyperlinks in the same directory where your mywebpage.html is located. Then, type the above codes in your mywebpage.html but type only the image filename in the "src" value. Then, save and refresh the browser to effect the changes. Hover or place your cursor on the image. The "alt" value or the image description will be displayed on the image while the "href" value or URL of the destination page will be shown at the left side of the bottom bar of a browser window.

Styling your web page using CSS

W3C.org requires the website style definitions must be placed in the style sheets or CSS. Styles are used to manipulating the design of the website such as font sizes, colors, font face, box properties, table properties, paragraph format, etc.

Placing your styles within the head or in a separate CSS file let you control the style of your web pages in just one page. Now, I will tell you the easy way to create your style sheets within the head tags and how it is implemented in the within the body tags.

To define a style, you have to use a selector as a reference. Basic selectors are a body, div, span, li, table, td, and p. div is used for a group of paragraphs, p is for one paragraph, the span is for selected characters, words or phrases, li is for lists, the table is for table and TD is for table data. The good thing here is you can make your own selectors using names you prefer.

Creating style sheets is the same as what we have done in CSS boxes. Whatever style properties you assigned to those selectors, it will affect area or content of your web pages where you have used the corresponding selectors. See example below:

body {

margin: 10%;

color: #00f;

background: #ff0;

text-align: center;

}

In the above style, all your contents within the body tags ( and

) will have the above style properties. Try it by typing the above in your mywebpage.html within the head tags. Save it and refresh your browser and see the effect on your web page.

Let's see another example:

p {

margin: 20px;

color: #cff;

background: #ccc;

text-align: right;}