Build A Web Site

What is CSS?

March 9, 2010 1 comment

So what is CSS anyways? CSS stands for Cascading Style Sheets. These style sheets are used to control how your web site’s text, borders, headers, links, background, and other HTML elements look.

You can add CSS within the HTML of your page, or save it as a separate css documet. I would keep it out of your HTML document, simply because it will make working with your codes that much more confusing.

To refer to a CSS file on your web server is very easy. Place this code just before your </head> tag.

Remember to save your file onto your server FIRST. Otherwise your HTML document will look very funny.

CSS Tutorials css tutorial, what is css

HTML Head Setup

March 5, 2010 1 comment

In this tutorial I will explain how to set up your HTML head section. To begin let’s look at some of the code we will use. The red section is the code I want to draw your attention to because it is the code that search engines will use to index your site.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Pencil Drawings</title>

<title>Pencil Drawings</title>

The first section is your title section. It is between the two tags <title> </title>. This is the title of the page you are working on that will appear in a tab once your site is loaded by an internet browser. And, once your site is indexed, it will be used as the link for your page in a Google, Yahoo, or Bing search. The title you choose is very important. It must be researched because it must be able to bring traffic to your web site. I used Google Adwords Keyword Research Tool to look for a good keyword for this page. I ended up with HTML head as my major keyword. That is why I chose to name this page HTML Head Setup.

Your description has to fit with your title and your keywords. You will notice in the example the title is pencil drawings, and so the description also contains the words pencil drawings. Your description must contain your exact keyword at least once, and maybe even twice.

The HTML head section of your site MUST contain keywords. They are the words that are naturally sprinkled throughout the content of your web page. For example, if your keywords are pencil drawings, then you MUST use the words pencil drawings every once in awhile throughout the the page. Not graphite sketches, or something close to the keyword. The EXACT keyword or keywords must be used. In every paragraph, try to use the keyword(s) at least once.

Adding this tells search engines the subject of the page (kind of like your title) and the language of the page.

The last two tags tell the robots to index the page. This information you can also include in the sitemap xml document for your web site. If you choose to not have your web page indexed, add “no follow” instead of “index”.

That`s all there is too it. Research your keywords and add them throughout your HTML head section. In time, your will find out that search engines are directing more and more visitors to your web site!

HTML Head Setup, HTML Tutorials html head

HTML Tags Reference

February 18, 2010 No comments

Here is a list I have put together of tags you will most likely use in your HTML web page. If you are new to hypertext markup language, bookmarking this page would be a good idea.

Most commonly used HTML tags:

<!– –> | Comment in your HTML code.
<a> | Defines an anchor. You use this to create a hyperlink.
<b> </b> | Makes your text bold.
<body> </body> | Defines your document’s body section.
<br /> | Creates a line break.
<br clear=”all” /> Creates a line break below all pictures and text above it.
<br clear=”right”> | Clears only to the right.
<br clear=”left”> | Clears only to the left.
<div> </div> | Creates a divider section.
<em> </em> | Makes your text italicized.
<head> </head> | Defines your document’s head section.
<li> </li> | List item.
<p> </p> | Use these tags in the body of your HTML.
<p> </p> | Creates a line break
<strong> </strong> | Makes your text bold (I would use this tag).
<ul> </ul> | Creates an unordered list.

Special tags:

<!–#include file=”place your link here” –> | It creates a Server Side Include. The HTML it refers to is often a just a piece of a HTML document that was cut out. Every time you paste this code into your document the cut out HTML will appear on your page. This is handy for web site headers and footers. All you have to do every time you change your navigation bar is update the html contained in the Server Side Include. Some web servers need a .shtml extension. Others work with a .html extension. Still others need the entire file named “my-file.shtml” for the server side includes to work properly. Some web servers do not allow server side includes.
To be continued

HTML Tags Reference HTML Tags Reference

Hyperlinks

February 17, 2010 No comments

It is not very hard to add hyperlinks to your web site. Simply add a little bit of HTML to the code of your site where you want the link to appear.

If you would like to link to buildasuccessfulwebsite here is the code you would add to your page.

<a href=”http://buildasuccessfulwebsite.com/” title=”build a successful website” target=”_blank”>Build a Successful Website</a>. <a> begins the hyperlink </a> ends the link. Href is a short form for hyperlink reference. Do not forget the equal sign and the two quotation marks.

I have also included a title. This title will appear once you place your cursor on the hyperlink.

target=”_blank” tells a web browser to display the page in a new window.

The Words in between the opening and closing tags appear (usually underlined) on the page. The link we have just created will look something like this (you can change the colour of the hyperlink in your CSS file):

Build a Successful Website.

Planning hyperlinks

HTML Tags

February 16, 2010 1 comment

Ready to tackle some HTML (Hypertext Markup Language)? Before you start, you may want to grab a coffee to keep you awake. This HTML tags tutorial will take you awhile to get through. There is a lot we have to cover. By the end of the tutorial should be able to write out your first HTML page, without a program!

Here we go.

What are HTML Tags?

HTML is composed of a series of HTML tags. These tags tell an internet browser how to display your web page. There are so many HTML tags you will have to learn, that by the end of this tutorial you may feel overwhelmed. That is why, if you need to get away for a bit, I have broken down this tutorial into manageable chunks. To each chunk I have given a heading.

Let me begin by showing you a very simple HTML tag that you will most likely use a lot. This tag is a divider tag <div></div>. Every HTML tag has a beginning and an end. The visible text or elements inside divider will be placed in between the two tags.

Some sources will tell you that a break tag <br> in your HTML does not need an end tag. The same goes for the paragraph tag <p>. Although it works to write <br> for every break, a better way to write it is <br />. And although every time you write <p> a new paragraph will be displayed, a better way to write it is with a closing tag after the paragraph </p>.

Example: <p> This is a proper way to write a HTML paragraph </p>.

Get into the habit of always starting AND ending all your HTML tags.

HTML tags never to be written using uppercase letters. Again, it will work, however with XHTML it will not. Again, learn to do it the right way. If your start writing your tags like this <DIV> > </DIV> it will be hard to get rid of the habit later.

QUICK SUMMARY:

1. All HTML is written using HTML tags.
2. Always end the tags you start.
3. Always use lowercase letters.

The 2 Major Sections to a Web Page.

The 2 major parts or sections to a web page. There the head section and the body section. Their tags look like this: <head> </head> and <body> </body>.

The Head Section

The head section contains all the information and meta data a web browser will need in order to properly display the body section. This information is also used by search engine robots and spiders. Some information you will find there is your web page keywords, description, title, and how may times a robot should visit.

The last part of the head section often provides hyperlink references to other pages it will need to display the page correctly. For example, perhaps you have a CSS (Cascading Style Sheet), or some JS Javascript used in a widget on your web site.

The Body Section

The body section contains the content of your web page. Within the content you will refer most often to the images you have stored on your web server and the cascading style sheet(s) you have made for your web site (you will learn how to create a cascading style sheet in another tutorial). You may also refer to other web pages and content stored on other web servers.

QUICK SUMMARY

1. There are two main sections to your web page, the head and body.
2. The head section contains information and meta data for search engines and your web browser.
3. The body section of your web page contains the content of your web page.

HTML Elements

On the very top of every HTML page you will see something like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Now what does that all mean? The following is a large quote from Wikipedia. I think it provides a more detailed answer than I can come up with. If you can not make heads or tails out of it, do not worry. It is not terribly important. However, for those of you who may find it interesting, and want to understand every HTML tag you are going to use, I included it as part of this HTML tutorial.

Beginning of quote ”

Element standards

HTML elements are defined in a series of freely-available open standards issued since 1995, initially by the IETF and subsequently by the W3C.

Since the early 1990s, manufacturers of user agents (e.g. web browsers) have often developed their own elements, some of which have been adopted in later standards. Other user agents may not recognise non-standard elements, and they may be ignored or displayed improperly.

In 1998, XML (a simplified form of SGML) introduced mechanisms to allow anyone to develop their own elements and incorporate them in XHTML documents, for use with XML-aware user agents.[2]

Subsequently, HTML 4.01 was rewritten in an XML-compatible form, XHTML 1.0 (eXtensible HTML). The elements in each are identical, and in most cases valid XHTML 1.0 documents will be valid or nearly-valid HTML 4.01 documents. This article mainly focuses on real HTML, unless noted otherwise; however, it remains applicable to XHTML. (See HTML for a discussion of the minor differences between the two).

Since the first version of HTML, several elements have become outmoded, and are deprecated in later standards, or do not appear at all, in which case they are invalid (and will be found invalid, and perhaps not displayed, by validating user agents).[3]

At present, the status of elements is complicated by the existence of three types of HTML 4.01 / XHTML 1.0 DTD:

Transitional, which contain deprecated elements, but which were intended to provide a transitional period during which authors could update their practices;
Frameset, which are versions of the Transitional DTDs which also allow authors to write frameset documents;
Strict, which is the up-to date (as at 1999) form of HTML.

The first Standard (HTML 2.0) contained four deprecated elements, one of which was invalid in HTML 3.2. All four are invalid in HTML 4.01 Transitional, which also deprecated a further ten elements. All of these, plus two others, are invalid in HTML 4.01 Strict. While the frame elements are still current in the sense of being present in the Transitional and Frameset DTDs, there are no plans to preserve them in future standards, as their function has been largely replaced, and they are highly problematic for user accessibility.

(Strictly speaking, the most recent XHTML standard, XHTML 1.1 (2001), does not include frames at all; it is approximately equivalent to XHTML 1.0 Strict, but also includes the Ruby markup module.)[4]

A common source of confusion is the loose use of deprecated to refer to both deprecated and invalid status, and to elements which are expected to be formally deprecated in future.
” end of quote.

A Simple Web Page

Let’s look at simple web page.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<body>

<p> This is my first paragraph </p>
</body>
</html>

That is all there is to it. You have a web page. Copy and paste the code to your favorite HTML editor and preview it in an internet browser. If you open it with Dreamweaver CS4 it will look like this:

html tags

All you should see are what you placed in your body section: <p> This is my first paragraph</a>.

Let me explain the code you just used. Before I do this I will show you how you can add comments to HTML without it actually appearing on a web page in a browser. No one will see them unless they view the source files.

To add a comment you have to add these two HTML tags:

<!– here is a comment –>

The words, “here is a comment” will not appear in your page. I am going to add comments to the HTML of your page so that you know what each part means.

Here the same page again, except this time there are comments included in the HTML script.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!– This tells an internet browser that the page it is an xhtml page and that it is written in HTML and that the script may contain some depreciated elements. –>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<!– This element describes schema (defines the structure of an XML document) from the http://www.w3.org/1999/xhtml namespace (do not worry if you do not understand what this means) –>
<head> <!– your opening head tag –>

<p> This is my first paragraph </p> <!– your paragraph–>
</body><!– body closing tag –>
</html><!– html closing tag –>

And that is all. Now you know how to create a HTML page.

It may be time for you to grab another coffee or quit for the day. You choose. Keep following our site updates. My next tutorial will teach you how to include some more HTML tags to your page to make it look slightly more interesting!

QUICK SUMMARY

1. You should know how to create a simple HTML page.
2. You should know the most important parts of every HTML page and what they mean.
3. You should know how to add comments to your HTML.

HTML Tags, HTML Tutorials html tags, html tutorial

Bloglines

February 13, 2010 No comments

Bloglines is a free service that allows you to create your own blog. There are many tools that you can use to create rich web pages with your blog.

Bloglines will drive traffic to your web site. It is ranked around 2000 by Alexa, which means many people visit Bloglines every day. By creating an account you can take advantage of their online tools and create your blog.

If you already have a blog, you will have to subscribe to your own blog. Then you will be able to claim your blog by adding a claim key to your blog post and to your template index.php file. To do this you can open FileZilla or your favorite FTP (File Transfer Protocol) client. Open the folder where your template file is located. Open index.php and add the code provided for you by Bloglines to your template. Then create a post with the other code added to the post. Go to Bloglines and select the Claim hyperlink. Voila! You are done.

AND…. Bloglines is FREE. Get started today!

Blogs bloglines

Directories

February 13, 2010 No comments

Here is a list of valuable web directories which you may wish to do link exchanges with. Link exchanges help your web site gain relevancy. This will increase the traffic your web site receives.

Here is the list:

Online Directory

Free Website Directory

Gdirectory Web Site Directory

Octomatic Directory

Pmdip Directory

Eduology General Web Directory

DevoteClub – Submit Your Site

Directories Directories

Blog Directories

February 13, 2010 3 comments

Here are a number of quality links to blog directories. If you have started a blog, and need to increase traffic to your blog, add it to these blog directories. All hyperlinks will open in a new window.

Blogs, Develop blog directories, blog directory

XML Sitemaps

February 12, 2010 No comments

Towards the end of this post I will show you an easy way to create your XML sitemap. Before I do you may have a few questions about sitemaps. So, I will answer those first.

What is a Sitemap?

A XML (Extensible Markup Languages) sitemap allows search engines to crawl through your website faster and more effectively. A sitemaps tells search engines:

All the URLS (Uniform Resource Locator) it should spider on your web site.
Which files have been added or deleted
Which files should receive a higher ranking within a search engine
When a file was created and last modified

That is why you should add a sitemap to your web site and keep it up to date.

How do I Submit My Sitemap?

How do I submit my web site XML sitemap file to Google, Yahoo and Bing (the major search engines)? It is not that difficult, however it may take you awhile to set up your accounts with each search engine. You will need to first add some HTML to your index file (homepage). This will show that you own the web site. When you are finished, you will be able to find a link that allows you to update or submit your sitemap XML file.

Here are the links you will need:

XML Sitemaps Generator

You can easily create sitemaps for your site using XML Sitemaps Generator. This tool makes a sitemap for your web site automatically. You may wish to adjust the sitemap to your preferences after the sitemap is made.

Once you have downloaded the XML file from XML Sitemaps Generator, you can change whatever you like using your favorite HTML editor. You may wish to adjust the rankings of certain pages on your web site within the XML file.

XML Sitemaps xml sitemap, xml sitemaps, xml sitemaps generator

What is FTP?

February 11, 2010 1 comment

What is FTP? File Transfer Protocol or FTP makes it possible for you to change and add files to your network server. Once you receive your username and password from your web host, you can log into your web server and start uploading your files using a FTP client.

FTP Clients need to be reliable and secure because the internet is one large network used by many people from all over the world. Even though the internet is designed to be secure, there are people who fish for passwords and other personal information.

FileZilla is a FTP client that is designed to guard against these kind of attacks.

Download FileZilla.

To use FileZilla you must enter your domain name and password. Once you are connected, the files on your computer will appear in the left panel. The files on your web server will appear in the right panel.

FileZilla is a FTP client that sends your files to your web server and sends files from your web server back to your computer. If you delete a file that is on your web site’s server, you can drag it back to your computer using FileZilla.

Web Site Questions filezilla, FTP clients, what is ftp

Older Entries

Build A Successful Web Site