There are a few simple things you need to know before you get started making your first web page. The first thing is what language you will be using. That language is known as HTML. HTML is hyper text markup language. It might not sound easy to understand, but it will be. To help you along your way I have provided several special tour guides who will pop up now and then to clarify things for you.
The Basics: Websites 101
Starting a web page is easy and fun if you know what you're doing. If you're lost it can be confusing and bothersome. Having a home of your own on the web only requires a minimum of two things: an address and a home. One of those things is a URL. A URL (Uniform/Universal Resource Locator) is also called an Internet address or a web address (an example of a URL is http://www.yahoo.com). When you get a web page it will be assigned a URL. That URL would be your address on the Internet. Nobody else has the same address as you.
You also need a server, and that is a company willing to give you a place to store your HTML files, and that will be your home on the web. Just like the files on your computer your web page files will take up disk space. So you will need to find a company which will host your files. Tripod is one company offering free web space to anyone who wants it. Free web space often means you will have banner ads or pop-up ads placed on your site. You can get more space on a more reliable server by shopping around and spending a little bit of money, and paid servers will not place advertisements on your site. For a first-time homepager I'd suggest using a free service until you get the hang of this stuff.
HTML Programs: What Can I Use to Write HTML?
Writing HTML doesn't require any expensive software. Many HTML editing programs can be downloaded and used for free. In fact, you don't even need to use a specialty program - you can use Microsoft Word or Notepad if you are feeling daring. But your best bet is to use software which is designed to create web pages. For some free HTML editing programs try searching Download.com or tucows.com for free HTML editors.
This site offers reviews of software, also. If we suggest software for you then you can be sure that it is free, that it is not spyware or adware, and that it works like it is supposed to. You can check out the software reviews at this link.
What an HTML Tag Looks Like
Every HTML tage will be in brackets (< and >) These brackets are necessary. A common HTML tag the tag which produces italic text looks like this:
<i>italic text</i>The structure of a tag is to have the tag name in between brackets.
Notice that the tag comes in two parts, the first is simply an i inside brackets and the second includes a backslash (/) before the i. One is called the opening tag, the other is called the closing tag. It should be painfully obvious which is which. All text caught in between those two will be italicized.
HTML tags can be more complicated than that simple example. Some tags have additional information known as attributes. An attribute is additional information to be applied to the tag. We will get to that later, for now we will just do standard tags.
The HTML Tag
While there might be dozens of individual HTML tags which all produce different results, there is only one HTML tag. For example, there is a world full of pimps but only one true PIMP. And that PIMP is Snoop D-O-Double-G. Let me illustrate my point a little further. The italic tag I used as an example above is one HTML tag. It is a tag written in HTML. So it is an HTML tag. But there is only one HTML tag, and that is the <HTML> tag.
When you are writing in HTML you absolutely must place all of your HTML within an opening <HTML> and closing </HTML> tag.
The HEAD Tag
The next tag you need to include in your web page is the HEAD tag. The HEAD tag will surround all HTML which identifies and describes the HTML document you are working on. The information in the HEAD section will not display on your web page. This information is meant purely to direct browsers and search engines on how to treat the page. Details like the site's description, keywords, and title are all included in this section. Without an adequate HEAD section in your HTML document it will be unlikely to get listed by search engines and it will not have a title. If you want your page to be succesful to and invite traffic, then you must have both a title and a complete HEAD.
If you still don't get it, then re-read this section because getting HEAD is vital. Unless you suck.
These two sets of tags we have discussed so far should be arranged in this order on your document:
<html> <head> <title>Title</title><meta>Meta</meta> </head> <body>Body of Document</body> </html>The HTML opening tag signifies to the browser what type of document it is reading. In this guide we are learning how to make HTML documents.
The commands inside the HEAD tag are the first commands to be used by your browser, and they typically describe and categorize your site.
The HEAD tags will enclose all information sent to the visitor's browser and to search engines describing your site and how to treat it.
The BODY tags will surround the entire BODY of the document. The BODY of the document is what is displayed to your visitors.
There are two main tags which must go in between the HEAD tags, and those are the TITLE and the META tags. I explain them next.
The TITLE Tag
The TITLE tag is simple. Look at this example of what a TITLE tag would look like if it was in a document with the title Dick's Online Viagra Deals: <title>Dick's Online Viagra Deals</title>
Very straightforward, isn't it? You will notice that most HTML tags are just as easy to learn. So, that's it for the TITLE tag. If you look up at the very top of your screen you will see the title for this document as an example if you still don't understand. It's "Slacker's Guide to HTML: HTML Basics".
The META Tags
The META tags have a preiety of uses. The META tags are used primarily to instruct search engines on what to do with your page when they "crawl" over them. They are also used to cause a page to "refresh", or automatically reload and open up a new URL. META tags utilize elements, which I touched on earlier. META tags have preious uses, all of which are related. They are keywords, expires, description, author, revisit-after, and distribution.
<meta name="keywords" content="viagra, erectile, dysfunction, erection, pills">The keyword element states that the page concerns hockey and baseball, and if someone does a search for those 2 words, that your page should come up as a search result. It might come up as result #1,938,465,087, but it should come up. Having relevent keywords is very important to attracting interested visitors.
<meta name="expires" content="6 December 2001">Tells search engines when your page should be deleted from it's directory.
<meta name="description" content="Dick's Online Viagra Deals comes second to no one in providing hard to beat prices">Tells search engines the description of your page. You should also include keywords in your description. For example, I managed to use the words "comes" and the phrase "hard to beat"! now that's salesmanship!
<meta name="author" content="Your name here">Tells them who made the page. Unless of course you are embarassed about selling Viagra on the Internet.
<meta name="revisit-after" content="30 days">Tells the search engine to visit your site again in 30 days. You can obviously make it less or more days, but this isn't very important since more seach engines monitor page updates and re-scan them often to keep current.
<meta name="distribution" content="Global">Tells the search engine that your site is meant for everyone, and that it can be distributed globally. You can also specify "local" and "IU". IU means Internal Use, which means that it's basically not meant for the public and a search engine will not lsit it publicly among normal results.
<meta http-equiv="pragma" content="no-cache"></meta>>This one tells the spider to not use a cached version of your website, and instead to use the most up-to-date version by downloading the site directly. Sometimes a search engine will load a cached version of a page (meaning that it will load the page as it appeared last time the search engine scanned it). If you want to ensure that it is up-to-date each time a visitors stop by, then use this META tag
<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow">The ROBOTS tag is meant to give directions to the search engine robot on how to index your site. Once it crawls your document it adds it to the index. The index is the set of crawled sites. Once it is indexed it will be available as a search result. The ROBOTS tag gives permission to index a site and to follow the links in a site. If you do not use these tags the search engine will, by default, index your document and follow your links.
As you can see above there are four combinations of commands for the ROBOTS tag. index,follow instructs the robot to index the document and then follow all the links within the document. noindex, follow instructs it not to index it but to follow the links. index,nofollow instructs the engine to index it but not to follow the links. noindex,nofollow instructs the search engine to neither index your site or follow its links. Pretty simple.
After the META tag is finished you must close the head tag by closing the HEAD tag </HEAD>
Once the HEAD tag is closed we move on to the BODY of the document.
The BODY Tag
The BODY tag has a very lot of uses. It specifies the default properties of the entire body of the page, including text color and font, link color, visited link color, active link color, background colors, background images, and page margins. Here are some examples and descriptions of each element in this tag:
<body>The body tag, when left alone like above, will instruct the browser to display the default properties (black text, white background, and on and on). There are many additions and revisions to the body tag you can use, though. Here they are: You can set a background color or a background image.
<body bgcolor="#xxxxxx">That specifies the background color of your page. You replace the 6 x's with a hexadecimal code (a code consisting of both numbers and letters - don't worry, you dn't need to memorize or learn any "hex codes"). If you want to use a common color, like red or blue or green, then you can just put the color name in the quotes. Otherwise, you will need to put a pound symbol (#) followed by a hex code inside the quotes.
<body background="imagename.extension">The above tag specifies that an image will be used as a background. You put the name of the image in the spot reading "imagename.extension". If a file is titled "frog" and is saved as a .gif, then that above code would appear as: <body background="frog.gif">. Be careful to make sure you correctly point to the location of the image file. The file must be uploaded on to your server in order for it to appear on the Internet, and you must not forget to include any folders in the address of the file. The element of the BODY tag which sets the default text color is:
<body text="#xxxxxx">That tag can be changed to include a color name, too. You can also change the default link colors with the BODY tag:
<body link="#xxxxxx"> <body vlink="#xxxxxx"> <body alink="#xxxxxx">But wait! There's more! You can also adjust the margins on the document so that the BODY of the page is not flush with the top or left of the browser window.
<body leftmargin="#"> <body topmargin="#">The margin tags set the length that the body will stay from the top or left of the browser. By putting a pixel number into the area where the pound symbol is you set the size of he margin. Pixels are small, and if you don't know how big a pixel is then you should experiment. As an example, one period (.) is about the size of a pixel. Although you don't need to list any elements in the BODY tag, you can feel free to list as many as you want. In order to tie all of these elements in together to form a complete BODY tag, just line them up like so:
<body bgcolor="000000" text="#FFFFFF" link="#ABCDEF" vlink="#680GAE" alink="#JI7AFE" leftmargin="200" topmargin="100">After making your BODY tag you shouldn't forget to include a closing tag </body> following all of the body of the document. After the closing BODY tag you should then close the HTML tag </html> to tell the browser that your document is complete.
__________________________________________________________________________________________________________________________________ _ ______________________________ ______________________________ _ ________
copyright - contact email - slackerguides.com network