Olways Focus

OWFC – Always Focus On The Positive



April 2018



Starting Your Web Page From Scratch

Written by , Posted in Tech Junkies

Starting Your Web Page From Scratch


Starting Your Web Page From Scratch


What is HTML and why should you be interested in it?

HTML is the language that web browsers read so that they know how a web page should be displayed. It is a computer language (in a very broad sense of the term) but don’t let that put you off. It is a relatively simple language and, to begin with you’ll only need to know a bare minimum of the “HTML tags” required to get started on your very own web page.


HTML stands for Hyper Text Markup Language which is probably a moderately interesting piece of trivia that you’ll forget in 10 minutes time – and that won’t matter as long as you remember the important bits we’re about to get to!


HTML will help you to tell web browsers how to format the text and pictures on your page. You can specify the background colour, text colour, link colours and destinations etc, as well as picture sizes and much more. We’ll get to all that soon enough but for now we’ll start with the basic skeleton of a web page – the few essential components to any web page that must be in place before you even think about colours and layout.


To get started you’ll need a blank canvas to work on. Our canvas is going to be a new text file that we’ll open in MS Notepad. You’ll find Notepad on your computer by clicking the Windows “Start” button and browsing through “Programs” to “Accessories”.


If you don’t find Notepad this way you can always just run “Notepad.exe” from the C:\Windows directory. You can use any text editing program you choose, including MS Word, but you need to be careful that you don’t use the program’s built in text formatting functions. Just use the basic new document as it is as font etc aren’t important to us just now. So, now that you have your text document open in front of you, we’re going to get to work.


As mentioned above, every web page has a basic skeleton that must be included for a browser to recognise what you’re trying to tell it. The first thing you’ll always add to your blank page is the tag. What this tag does is tell the browser that the file it’s trying to look at is written in HTML so it will know what type of information is coming next and how to deal with it. Having said that, your web page will always end with the closing tag. This pretty much just tells the browser that we’re done here and it can rest up for a while.

Formatting your Text

Formatting your Text

Now you’ve got some content on your web page, you’ll want to jazz it up a bit and personalize it a bit. This is where we come to the text formatting HTML tags. There’s a few different things we can do to make our text stand out from the crowd so to speak. The basic effects are pretty much the same as you’d find in any word processing package bold, italic, and underlined text. The tags you use to create these text effects are as follows:

<B>Bold Text</B> gives Bold Text
<I>Italic Text</I> gives Italic Text
<U>Underlined Text</U> gives Underlined text.


Not really all that tricky, is it? You can also mix and match the above tags in various combinations to create different looks, such as text that is bold and underlined. One thing youll need to keep in mind if you wish to do this is a very important rule of HTML dont overlap your tags. What does that mean? Well, Ill show you the right and wrong way

<B><U>Bold Underlined Text</U></B> is the right way
<B><U>Bold Underlined Text</B></U> is the wrong way.


See how in the first example, the tags are nested inside each other, but in the second example they overlap each other? While the text would probably still be shown the way you meant it if you overlap in this example, things could get messy when you’re using more advanced HTML tags, so its best to do things the right way from the start, so you get into good habits.

Another interesting, but much less often used tag, is the one that produces monospace text. The default monospace font on most browsers is Courier. The tag you use to produce this effect is the <TT> tag with corresponding closing </TT> tag.

So if you were to use the following code
<TT>This is monospace text.</TT>
You would see
This is monospace text.


Another thing you can do to spruce up your web page is to use headings to divide your page up into sections. As seems to be the trend with HTML, the tags are very easy to remember, because they make sense! There are six different heading tags you can use, ranging from <H1> which gives the largest font size, down to <H6> which will give you the smallest font size. Of course, each of these tags comes with its closing </H1>, or </H6> tag.


Looks like this.


Looks like this.


Looks like this.


Looks like this.


More Linking

Now we’re going to look at the other types of links we can create. Not only can you link to other websites or other pages in your own website, but you can link to sections of the same page, and you can create email links as well.

Firstly we’ll look at how to create internal links.

If you have a great deal of information on the one page, you might like to link between different sections on that same page. To do this, you use internal links. The first thing you need to do when setting up these types of links is to create an “anchor”. Remember we mentioned anchors in the last article? Here is where we actually use them!

The anchor is a piece of “behind the scenes” html code that is placed on the page where you wish the link to lead to. It’s not actually visible on the page.


The HTML you would use to place an anchor is…

Anchor Text

The “Anchor Text” can be a sub heading on your page, it could be just the first word of a new paragraph, or even any word or sentence at all on the page that you might wish to create a link to.

Now the anchor has been placed, you will wish to link to it.

All you need to do is to create a link in the regular way, with one exception. Instead of a URL in the link code, you place the anchor name, with a hash (#) before it. I’m sure this sounds complicated, but it’s not.


It would look like this:

<href=”#anchor%20name” target=”_top”> Link Text

Of course you can also use image links.

Now, you might well be asking where you would use anchor links such as these.


Well, basically you’d use them anywhere that you have multiple sections on the one page. An example might be something like an FAQ (Frequently Asked Questions) list. You’ve probably seen sites that have these where they list the questions at the top of the page, and then the answers in order underneath. Clicking on a question will take you to the part of the page that has the relevant answer.


formatting your image on your website


It’s All About Image

Now we’re going to delve a little deeper into images to uncover what we can really do with them to spice up our web pages. Firstly, where do pictures come from? Well, if you have photographs you’d like to place on your page, you will need access to a scanner. Make sure you save your photos in ‘jpg’ format. If you’d like cartoon-type pictures or clipart, you’ll need them to be in ‘gif’ format. If you’re the artistic type you can create your own images with a graphics program. Otherwise, you can obtain clipart for your web pages from any number of websites that offer them free for personal use. Just make sure you don’t infringe any copyrights when using other peoples images.


Ok, so we’ll assume you have obtained some images (either photos or clipart) that you’d like to place on your page. The basic tag we’re going to use is the tag. It’s interesting to note that this tag is one of the few that does not have a closing companion tag. It does, however, have a number of parameters that we can set to make sure our image displays exactly as we want it to.


The first, and most important, parameter is where we specify the image source. This means the location of where the file is stored on the internet. In most cases, the image file will be stored in the same place as your html file. In some cases it will be saved in a sub-directory that has been set up to keep image files separate from html files. In these cases we will use the “relative path” to the image. Sometimes you will link to an image on another part of the web and in this case you would use the “absolute path” to the image. I’ll show you what is meant by relative path and absolute path.


Relative paths

When the image and html files are stored in the same place

When the image file is saved in a sub-directory called “images”

When the image is stored on a different website altogether


If you know the dimensions of your image (in pixels) you can set the height and width parameters. This is not necessary for your image to be displayed correctly, your browser will work it out on it’s own, but adding the dimensions will make the page load slightly faster.


Trust me… It’s easy!

Anyone can make a web page. You don’t need any special education or qualifications. You don’t need to spend a lot of money on the latest software. You don’t have to spend endless weeks of frustrated computer time to get your site set up. With a few simple tools – many of which are completely free of charge – and some basic html knowledge, you can build a website that will have your family and friends amazed at your awesome talent. A website can serve many purposes.


Maybe you have a business or hobby that you’d like to promote to a wider range of people. You might want to set up a family website so that friends and relatives interstate or overseas will have an easy way to keep up with the latest events and happenings, and even use it as a place to swap photos. Maybe you want to set up an online resume so that you can find a new or better job. There are endless reasons as to why someone might want their own web page, and with this article I plan to help you build an online presence with a step by step, easy to follow guide for those with no html knowledge. Hopefully this guide will also be of use to those who have some knowledge but need some help with some of the more advanced aspects as well, but the basic target will be for those just starting out.


I plan to run a few different series of articles. The main one will cover basic html, starting from an empty page. We’ll build through the basic structure of a web page, and then add all the elements that will personalise it as your web page such as background and text colours, fonts, adding links and graphics. We’ll then gradually move on to more advanced methods and features for your pages, such as adding page counters, guest books and message forums and even feedback forms.


Further articles will cover page design elements such as use of colour schemes, use and creation of graphics and animation, site layout and spacing etc. As your page builds and it gets time to “get your site out there” we’ll look at search engines and how to get your site listed, how to get a domain for your site as well as ways to get a free alternative to a dot-com of your own. We’ll also cover how to add advertising so you can subsidise the costs or even make some money from your site etc. These will, however be down the track and will be secondary to the main purpose – helping you learn html!


Monetize Your Website

Let’s look at what goes behind creating a website first. We need a domain name. We could secure a domain name from any of the registrars and that is done almost instantaneously. Next stage would be get the domain hosted. The process is a piece of cake as well. Your web host usually provides certain applications that could be installed with a single click and usually comes in different flavors. Different applications that could be installed are WordPress, Joomla, Mambo etc. You get a good CMS with a good looking theme and all this is free and more importantly with a single click.


Since we have web creation as simple as explained above, there is a boom in the number of websites that are being massively launched. Blogs are aplenty and are erupting with tons of information everyday. The internet users do not and cannot go to each and every website created. Users demand quality. So, the websites that maintain quality gets the hits.


With a massive internet audience, there are advertisers who are mushrooming everyday. There are so many ads waiting to be placed on websites. Most of the ads come through ad publishers like google and yahoo. These ads are contextual i.e ads related to the context on the website would be published. This way you wouldn’t have an ad for perfumes on a PC website unless requested by the advertiser.


Getting an account for contextual advertising is simple. Just sign up and show them that you have a website and they would approve your application and provide you with tools that would enable you to display ads on the website. One could start making money within 24 hours of the website launch. Plus google has other ways of making money by referring people to their products and services. Google and Yahoo are not the only ones in the market. Ad publishing is a new booming business and there are hundreds of other ad publishers who may have different set of rules and regulations when compared to the major players.


Generate Revenue With Text Link Ads

Several years ago, running affiliate banners on your Website used to generate substantial revenue. Then, all of a sudden, the ratio to clicks or ROI for banners dropped significantly. Some say it was the dot com crash in 2000, others have different speculations. Regardless of what the situation was, banners today don’t have the highest conversions as they once did, and companies are starting to look for other alternatives.

One alternative to running banners on your Website are text link ads. Google Adsense is a great example of this. Google Adsense is a pay-per-click (PPC) model that allows you to put blocks of text links on your site. In return, Google’s advertisers will pay you for the clicks you send their way. They have many different styles and formats that you can use to fit with the color scheme or design of your site.
However, if you are not having much luck using Adsense, another way to earn revenue from your site is to sell text link ad space directly to Website owners. Often times this can be more affordable to advertisers because they can get an unlimited number of clicks and impressions without it costing them more money. And in turn, it can possibly generate more revenue for you too.


Selling text link ads on your Website is really a very simple process. You decide on a selling price for the ad space where you will place text links, and then come up with the terms of sale in which you and the advertiser will agree upon. Once you have that in place, you can then setup the payment mechanism for the advertiser to purchase the ad space. If your Website is not setup to sell links directly, you can opt to use a text link broker service.


Using a text link brokerage service can help you to get your site out there to potential advertisers looking specifically to buy text link ads. The brokerage service will also manage the payments and everything for you; essentially, all you will need to do is put the link code on your site and it’s up and running. However, the downfall of using one of these services is that they get a percentage of the sale for each month that it runs on your site. One of the sites I like to use is LinkWorth.com. In my opinion, the fees are relatively reasonable considering the exposure to potential advertisers and the management services they offer.


If you are looking to generate more revenue from your Website, selling text link ads may be the way for you to go. If you are a site owner looking for ways to drive more targeted traffic, this option is definitely worth checking out.