4 Tag Template

Need a Crash Course on building websites? Want to put your site on the Net for the lowest annual cost and still get great service?

This simple template can be modified to build the website that you always wanted. You simply add your own content in the form of headings,paragraphs and pictures, then link multiple web pages together using the anchor tag.

We'll provide resources along the way to increase your knowledge if you choose.

We'll also provide different HTML code versions that rearrange the paragraphs and pictures and use different settings in the universal style sheet to change the appearance.

Reliable Cloud Web Hosting for $39 a Year

We've been on the internet since 1997. Tried a lot of web hosting services before we settled on the one we've been using for the last 15 years.

Bizarre periods of downtown and Tech Services that took 24 hours or more to answer trouble tickets led us to what we now sell as CaFW Web Hosting.

Finish your website and enjoy the same web hosting we use. We sell LiquidNet web hosting in the form of reliable Cloud hosting at CaFW Web Hosting.

Compare our features with other more expensive packages. No hidden costs and a free domain name as long as you stay with us.

We also offer things like online site builder, WordPress, Message Boards, Picture Galleries, etc. One click installation and all included in your purchase. Also included: Hundreds of free themes for Mambo and WordPress.

The 4 HTML Tags

Build your website using these 4 tags.
H tag.
Paragraph Tag.
Image Tag.
Anchor Tag.

Use the h Tag <h></h> to add headings to your pages and paragraphs.

Use the paragraph tag <p></p> to add content to your web page.

Use the image tag <img> to add pictures to your web page.

Use the anchor tag <a></a> to link your web pages together.

The H Tag

The H Tag comes in 6 default sizes and the code looks like <h1></h1>. Size of text and other variables are defined in the style sheet.

Text that you want to appear on the page is placed between the open and close tag which is identified by the forward slash.

On this page, the code for the main heading appears as such: <h1>4 Tag Template</h1>

It's attributes are defined like this in the style sheet:
h1 { font-size: 36px; text-align: center; margin: 1% 0; }

The Paragraph Tag

Placing text on a web page is fairly simple using the paragraph tag: <p></p>.

Just like the H Tag, text that you want to appear on the page is placed between the open and close tags.

Because text can be hard to read on a computer screen when placed in large blocks, use lots of white space. The shorter the lines of text and the smaller the paragraphs, the easier it will be to read.

The Image Tag

First, let me give you a little advise on using pictures on your website.

USE YOUR OWN PICTURES!!

These days it isn't even safe to use pictures from sources like Libraries of Images that you buy on disk. There are predatory companies out there that could eventually buy the rights to the pics you use and then dog you for years about copyright infringement.

Use pictures that you take using your camera or cell phone, then optimize them for web use using a simple free tool like PhotoScape.

Don't use pictures you get from so called Free Image websites either. Getty is waiting.

The image tag in barest form looks like this in your HTML code: <img>

Required attributes are source (src) and alt.

src= tells the browser the name of the picture file and where to find it.

In the code on this web page <img src="images/4-tag-image.gif" alt="Placing pictures on web pages">, the picture named 4-tag-image.gif is located in the images folder.

Note: To keep your web site organized, create an images folder inside the folder where your web page is located. Store all picture files for your pages in that folder.

Picture Size

Pictures are displayed on a computer screen using pixels. The size of the picture is therefore defined using pixels. Because our web page is set to display at a maximum of 1200 pixels, this would be the maximum width of any picture we stored in our images folder.

The settings for the left oriented img tag in our website look like:
img.left { max-width: 90%; float: left; margin: .5% 5%; box-shadow: 1px 1px 1px 1px #080808; }

The max-width setting will cause the pictures on our web pages to be elastic. They will expand and contract with the size of the viewing device. Your pics will even conform to the size of the viewing screen on a cell phone.

The required alt attribute or alternate text is provided for browsers set up to not display pictures. An example would be code readers for the blind. Use the alt attribute to provide a simple description of the picture.

The Anchor Tag

The Anchor Tag is used to provide clickable links for your readers and looks like this in its barest form: <a></a>.

Provide a correct path and page name using the href attribute.

We provide two examples; one in the nav element and another in the body text.

Here's a third that shows you how to jump around on a web page: Jump to Top

Looking at HTML code

Here's the HTML code for a portion of this web page.

The tags you'll be learning to recognize and use are in bolded text.

<div class="main-content"> <h1>4 Tag Template</h1> <img class="right" src="images/4-tag-image.gif" alt="Placing pictures on web pages"> <p>Need a Crash Course on building websites? Want to put your site on the Net for the lowest annual cost and still get great service?</p> <p>This simple template can be modified to build the website that you always wanted. You simply add your own content in the form of headings,paragraphs and pictures, then link multiple web pages together using the anchor tag.</p> <p>We'll provide resources along the way to increase your knowledge if you choose.</p> <p>We'll also provide different HTML code versions that rearrange the paragraphs and pictures and use different settings in the universal style sheet to change the appearance.</p> <p class="clear"> </p> <h2>Reliable Web Hosting for $39 a Year</h2> <p>We've been on the internet since 1997. Tried a lot of web hosting services before we settled on the one we've been using for the last 15 years.</p> <p>Bizarre periods of downtown and Tech Services that took 24 hours or more to answer trouble tickets led us to what we now sell as <strong>CaFW Web Hosting</strong>.</p> <p>Finish your website and enjoy the same web hosting we use. We sell <strong>LiquidNet</strong> web hosting in the form of <a href="http://www.cafwhosting.com" target="_blank">CaFW Web Hosting</a>. Compare our features with other more expensive packages. No hidden costs and a free domain name as long as you stay with us.</p>

Don't Know How to Start?

If you don't have a clue on how to get started, work through the first lesson of our 7 Step Tutorial.

The 7 Step Tutorial will provide all the information you need to get started building web pages. Includes information on tools to use, previewing web pages and organization and storage of web pages.

Changing the Appearance

The appearance of the page is changed by rearranging paragraphs, headings and pictures and using different class settings defined in the style sheet.

You can choose from the examples of different versions shown below to get your desired set up.

Example #1 Example #2 Example #3

Putting It On The Net

If you sign up for our web hosting, you'll receive an email that tells you how to access the control panel of your hosting account.

Go to the file manager and start uploading your web pages. Need Help? We have a complete collection of Help Videos, which includes using the File Manager.

You'll also receive information in your email for setting up your FTP services if you want to use an FTP Client tool like FileZilla.

More Free Web Templates

If you'd like access to more free web templates visit: FreeLiquidTemplates.