Create a Website
Welcome to Create A Website .info
This website contains information which will help you make decisions on which path to take on creating a website and how to create a html website.
Before you start creating your website there are a couple of things you need to think about.
Do you have a domain name?
Do you have server hosting space?
How do I get my files onto my server?
Will you edit online or offline?
Animations would be nice too?
Domain Names
In simple terms a domain name is the name you type into the browser to
get to a website, and also the part after the @ in an email address.
ex. www.google.com support@google.com
To get your own domain name you have to go to a domain name registrar
such as Godaddy or
Network Solutions.
There you will find search facilities to help you search for the domain
name you want. If you need a country specific domain name and they are
not available at the registrar, you then need to find the registrar that
is servicing your country's domain.
ex. Australian domain www.acme.com.au is serviced by Melbourne IT.
Domain names from registrars vary in price from as little as $5 to $60 USD per year. But make sure you buy from a reputable registrar. I recommend Godaddy and Network Solutions. Some country domains are only available to registered companies. If you want to purchase www.acmeplumbing.com.au you need to have a company that is in the plumbing business or similar.
Server hosting space
To get your website viewable on the internet your website files need to sit on a server. A server is just a computer with some fancy software that enables people to access your website files.
There are lots of free servers where you can put your website files but usually there is some sort of trade-off. Banner ads within your website or the more irritating popup ads may be displayed. Still worse, your email address may be distributed to email marketing companies so you will end up with an inbox full of spam.
Paying for hosting is so cheap these days so really there is no reason to use a free provider unless you have to. See www.powweb.com for hosting for as little as $8 USD per month.
The basic packages these days will run a small to medium website without any problems. Ignore the huge webspace sizes offered as most websites will come no where near needing that amount of space. More importantly look at the traffic transfer rate. Simply this is the amount of data that is downloaded and uploaded to and from your server. Most hosting companies only calculate the amount downloaded from your site to the viewers' computer. This includes web pages, images, files, music etc.
For a small to medium site I recommend anywhere from 1 to 50 gigs per month. Powweb's basic package offers 300 Gigs! per month.
When you purchase hosting space you do have an option to also purchase a domain name at the same time through the hosting company. Sometimes doing so you may pay an inflated price. I like to buy mine separately so I know I own the domain name and have full control over it.
If you purchased your own domain name and then your server space, you need to point your domain to your server space.
First login to your hosting account. Somewhere in the control panel you should be able to easily set your new domain name.
Next you need to get your hosting providers DNS address (Domain Name
System, also known as Domain Name Server or Name Server address). Usually
there are 2. They could be a domain name or an ip address. ex.
ns1.acmehost.com or 324.343.1.1
ns2.acmehost.com or 324.343.1.2
The DNS system is transparent and forms one of the largest active distributed databases in the world.
Now login to your domain name account. This is the account you setup when you purchased your domain name. Somewhere in your control panel you should be able to edit the DNS entry. The default settings when you purchased the domain name will point to a park page. Add your hosting DNS and save your settings. That's it, now you have to wait around 48 to 72 hours for your settings to propagate around the internet.
Getting your files onto your server
There are 2 things to think about here. Creating a website online or
offline?
1. Some hosting providers provide an online editor where you can directly edit and create your website through your browser so you don't have to upload your files to your server. Usually you login to a control panel through your browser and access your online website files.
The positives for this type of system is that you can edit your website from anywhere and any computer. Some systems have templates provided.
The negatives speed and access. If the server containing the editing system is down or a lot of other clients are also logged in the system it can be a pain. Adding your own images need to be uploaded.
2. I prefer to create websites offline using Dreamweaver, Flash and Context Notepad. Once again I am in full control. If the hosting company goes "belly-up" overnight then I still have my files. Also you cannot beat the speed and having the ability to work on my files on my laptop from anywhere, even without an internet connection.
Getting your files onto your server with FTP
Once you have created your website files you need to get them onto your server. To do this you need to use a program called FTP (File Transfer Protocol) I use WS_FTP . There are lots of free FTP programs available, just do a search on "Free Ftp programs" in Google. Did you know you already have a FTP program that came with windows? Simply type in the address bar of internet explorer your ftp domain name ex. ftp://ftp.yourdomain.com then in the login window your username and password.
Once you have logged into your server using FTP, you need to locate your web folder. The web folder is a folder that is accessible through a web browser. This is where you need to put all your website files and folders. Common names for web folders are www, htdocs, public_html
Simply drag-and-drop your files into the web folder.
Getting started with creating your website
A HTML website page is an ascii / text file. What this means it that anyone can open the file in notepad and view the contents. A Flash website or an image is a binary file. They cannot be opened and edited in notepad.
The first page you need to create is the index.htm file. This is the first page that is served when someone arrives to your website by typing in your domain name. Some servers may need the index to include an l (index.html) but most servers accept both.
Open notepad and type in
<html>
<head><title>My Hello World Page</title></head>
<body>
Hello World.
</body>
</html>
Save the file as index.htm then double click on the file. Presto! You webpage has loaded in your web browser. Next upload the file onto your server (*note uploading will over-write existing file on your server. If you want to keep the file remember to rename it) Type in your domain address and Presto! You are accessing your file on the internet.
So basically html web pages are text files surrounded by formatting tags.
Everything that is viewed on a web page is in the body. Certain items
such as title, search engine meta tags go between the head tags. Some
tags have attributes ex.
<body bgcolor="#000000"> and some tags do not have an
end tags ex. <img src="logo.jpg" width="50" height="50">
Colors are defined in hex code, a hash # followed by 6 numbers or characters or a mix of both.
Website Editor Software
I recommend you start building websites in notepad so you can quickly and easily learn how to use tags. If this is not your cup-of-tea or you do not have time to learn tags, try using a WYSIWYG (What-You-See-Is-What-You-Get) editor. A good WYSIWYG html editor can be expensive. I recommend Macromedia Dreamweaver. If you are short on time and cash try Flash website templates. Framewood Technologies offers Blueframe Web and Auora Website. They are WYSIWYG editors with flash website templates included.
HTML Tags
Title <title>
The title tag is very important. It displays text in the browser window top bar. You want to make the title descriptive to it's page as it is also used by search engines.
<title>Acme - World leaders in acm supplies</title>
Body <body>
Between the body tags contains your website viewable content. It has
5 main attributes.
Background Color: bgcolor="#333333"
Text Color: text="#FFFFFF"
Link Color: link="#FFFF66"
Visited Link Color: vlink="#FF3333"
Active Link Color: alink="#66FF66"
<body bgcolor="#333333" text="#FFFFFF" link="#FFFF66" vlink="#FF3333"
alink="#66FF66">
Hello World
</body>
Text
Headings <h1>
Heading tags are also used by search engines and therefore important. Headings are usually larger and bolder. There are 6 heading sizes defined by h1...h6 h1 being the largest.
<h1>About Us</h1>
Paragraphs <p> or <p align="center">
Paragraphs group text together. Paragraphs also have an align attribute so you can align groups of your text. Paragraphs will also apply a double space after the end tag.
<p>My paragraph text goes here.</p>
Break <br>
The break tag will create a line break
Using the break tag<br>to start a new line.
Will display
Using the break tag
to start a new line.
Text Formatting with Bold, Italic, Underline, Strike Through, Subscript, Superscript, Teletype
<b>My Text</b> My Text
<i>My Text</i> My Text
<u>My Text</u> My Text
<strike>My Text</strike> My Text
<sub>My Text</sub> My Text
<sup>My Text</sup> My Text
<tt>My Text</tt> My Text
Lists <ul> and <ol>
Lists create indented bulleted lists. There are 2 types, Unorded and Ordered lists. Unordered lists simply display bullets whereas Ordered lists are numbered.
<ul>
<li>Cats
<li>Dogs
<li>Mice
</ul>
- Cats
- Dogs
- Mice
<ol>
<li>Cats
<li>Dogs
<li>Mice
</ol>
- Cats
- Dogs
- Mice
Images <img>
There are 2 main types of images used on the web. JPG usually photos and GIF, images with large areas of the same color. The reason for the 2 types of formats is because different types of compressions are applied when you first generate the file.
JPG compression is great for images that have a lot of color change from pixels to pixel such as photos. JPG compression is applied by 8x8 blocks, that is why if you apply too much the photo pixelates.
GIF compression focuses on large areas of the same color such as in simple cartoons and logos. Gif images can only have a maximum of 256 colors. There is also another type of Gif known as an Animated Gif. This is an image that consists of a couple of frames like a film strip. It automatically plays from frame to frame when the image is loaded simulating movement. To create an Animated Gif you need special software. There are plenty of free available on the web. Search Google with "animated gif software"
The image tag has a few attributes.
src: src="myPhoto.jpg" (path to your image file):
width: width="100"
height: height="100"
border: border="0"
alt: alt="Photo of me" (text displayed if images are turned
off, also used by search engines)
<img src="myPhoto.jpg" width="100" height="100" border="0" alt="Photo of me">
Linking <a>
The attributes to the anchor link is
href: href="contact.htm" (path to location the link will go
to)
target: target="_blank" (optional, _blank will open the link
in a new browser)
There are 5 ways you can link on your website.
1. To another page on your site
<a href="contact.htm" >Contact Me</a>
2. To another site
<a href="http://www.google.com" >Google Search</a>
3. Using an image instead of text
<a href="myBio.htm" ><img src="myPhoto.jpg"
width="100" height="100" border="0"></a>
4. Within the same page
<a href="contact.htm#phone" >My Phone Number</a>
Within the same page place the anchor near the area you want the link
to jump to.
<a name="phone"></a>
5. Loading the email client
<a href="mailto@support@acme.com" >Email Support</a>
Horizontal Rule <hr>
A Horizontal Rule is a line. They are used to break up content and to give your webpage structure.
Attributes are:
Size: Size="3"
Width: Width="50%"
No shade: Noshade
<hr size="3" width="50%">
<hr Noshade size="3" width="50%">
Table <table>
Tables enable you to construct grids across your page. Text, links and images can be placed within the grids. Tables consist of rows and columns.
A simple table structure.
<table width="75%" border="1">
<tr>
<td>
Add Content
</td>
<td>
</td>
<td>
here
</td>
</tr>
<tr>
<td>
</td>
<td>
here
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
here
</td>
</tr>
</table>
| Add content | here | |
| here | ||
| here |
Meta Tags <meta>
There is a huge range of meta tags available but I will only mention the main ones used by search engines. Meta tags go in the top of your webpage within the <head></head> tags.
The main meta tag attributes are
Name: name="description"
Content: content="We offer online support to webmasters"
Search engines (not all) use 4 types of meta tags: title, description, keywords, classification.
<meta name="title" content="How to FTP your files">
<meta name="description" content="Step-by-step on how
to get your files onto your server using FTP">
<meta name="keywords" content="ftp, software, upload
my files, howto">
<meta name="classification" content="Web Support">
Note there is restrictions on lengths to content so don't load-up the content attributes.
Comments <!-- -->
To add comments within your code which will not be displayed use
<!-- This is my comment -->
40% Sale Website Editor
54 Flash Templates and Easy to use Authoring Software. Only $59.95
www.framewood.com