Learn
Learn basic website building information and techniques
Free
Learn how to build a website for free:
So you want to build a website but you don’t have any money to spare, can you learn how to build a website for free? It is possible to build a website for free but you probably will sacrifice control, power or useability but if you are on a shoe string budget and have no other choice a free website is better than no website and you can always upgrade to paid products and services as your website becomes profitable. There is also the option of using a free service such as a FaceBook Page to put your business or idea online without its own stand alone website however again you sacrifice control when you rely on another company to completely provide your web presence.
Free Domains?
It is very unlikely you will be able to get your own top level domain name for free unless it is tied to some other paid service or product such as hosting and even then you may not actually have ownership of the domain if it is being paid for by a third party. Domains in general are one of the cheapest things you need to build a website however considering they can cost as little as seven dollars for a full year of registration you should be able to afford them, just skip that value meal at mcdonalds! However if you insist on doing everything for free there are url redirection and shortening options that are free that will allow you to get a short url that you can then redirect to your real domain if in the future you upgrade and buy one. A common URL shortening service is TinyUrl. Another option is CJB.net which allows you to create a url like www.yourname.cjb.net this redirect url lets you change where it points without losing your traffic however you either need to point it to your ip address or some other url that you control.
Free Hosting?
Finding free hosting was much easier in the early days of the internet when venture capital was pumping money into any internet company, there were even companies like TerraShare that paid YOU to build a website on their hosting, splitting the advertising revenue with you. Obviously this was not a sustainable business practice and many free hosts went out of business or changed their models to pay for service. You can still find hosts offering free services to build your website on their servers however they usually require you to display ads on your website or limit your bandwidth and server resources so severly that you are forced to upgrade to paid services once your website gets popular. The best option is to find a host that will be able to scale up your services as your website grows, many shared virtual hosting accounts cost only a few dollars a month which eliminates the possibility of your hosting being shut down and losing all your hard work. Angelfire still offers free website hosting and many free building tools too however I would suggest that there are other hosting providers that are more focused on paid services and are willing to work with you to scale up your websites as needed without worrying about becoming too big and popular for the host.
Free CMS?
Once you have a free domain and hosting you need the tools to actually build your website and there are many free options for CMS and designing tools. Many of the popular web design software companies offer either free limited trials or very basic versions that are free or cheap. For instance the graphic design software Photoshop is expensive for its premium products however they offer Photoshop Elements for a lower price with less options which is perfect for a newbie trying to build their first website and Adobe even offers free limited time trials to see if you even need their software. While web design software can be found cheap or free you might not even need it if you only want to work online you could use a free CMS to build your website. WordPress.com offers a free hosted version on their script that would make building a website for free very easy as it combines a domain, hosting, and the CMS in one package. Then using WordPress designing and updating a free website becomes as easy as drag and drop or finding a free theme to create the layout and style you want.
So is it possible to build a website for free? As you can see combining the various free options online today you can indeed setup and complete a website without spending any money. While I suggest spending the small registration fee for a domain and a cheap virtual hosting account to get full control and ability to scale up quickly if you are really trying to save money you can find free products and services to get your online presence up and running today.
CSS Basics
Cascading Style Sheets (CSS) is a language used to control the format and look of a document generally written in HTML or one of its variants. Basically CSS controls the layout, fonts, colors, location of content on a website. CSS is used because if offers more flexibility and control over how the content is present using HTML and can simplify the coding process as you build your website. For instance while HTML designs are generally restricted to using tables for layout in a websites design using CSS you can create an entire website without tables eliminating lines of code and creating a more uniform browsing experience for all your users regardless of their screen resolution or device they use to access your website. This is becoming increasingly important as the amount of various devices offering a wide range of screen resolutions balloons and the need to design your website for cross browser use becomes ever important. CSS can allow you to create a more fluid design that can increase and decrease in size depending on the size of the browsers rather than the static table designs required with basic HTML websites which means that the ads you have on the sidebar will always be visible without scrolling even on smaller screens!
CSS offers many benefits over basic HTML built websites one of which is that you have the ability to utilize style sheets consisting of rules to govern your entire page or website from one central location which reduces code and allows for easier modifications. For instance you can create a rule that governs the link style of every link on your page if you use an inline style sheet or across your entire website if you use an external style sheet. Imagine how easy that makes altering your link if you only have to change the attribute at one place in your code rather then at every individual link! Another benefit that is related is the fact that as you reduce the amount of code on your website and simplify your designs you can reduce the amount of bandwidth the website burns as it is served. For instance if you build you website using one style sheet to dictate the entire layout then you have reduced the lines of code needed considerably compared to serving code for each individual attribute as you would have to with basic HTML.
While CSS offers many benefits there are a few draw backs that you shoud be aware of when building your website. Although CSS seems to be built to be simple it has changed over the years and has variations that supposedly fix problems and increases features which might sound good but can create conflicts and confusion for coders. Also partly because of the variations and also because of the internets free wheeling attitude there has been less than uniform adoption of CSS across the various browsers which means certain browsers may render your website differently even though your CSS coding is the same. This can lead to the need to create browser specific attributes and commands so that the website you build displays uniformly no matter how the surfer views your site. Finally while CSS is supposed to offer greater control and flexibility for design it can be difficult to understand how the code affects the layout and some of the capabilities are limited with CSS especially if you use a WYSIWYG editor.
Basic CSS coding information:
Inline style: inside your HTML document, info about a single element using ‘style’ attribute
Embedded style: CSS inside the HTML in a specific block
External style sheets: a seperate CSS file containing all the CSS code referenced from the HTML document
Categories: CSS Tags: cascading style sheets, css, programming
Blog Basics
Blogs are not exactly new but they have become much more popular recently with the widespread use of open source scripts that automate and simplify the work of creating and maintaining a blog so that anyone with an internet connection can have a space on the net to post about anything they want. The term “blog” is a contraction of the term “web log” or it can mean the act of maintaining a blog. In the past blogs were mostly used as a type of online journal or diary where a person could write entries, post images, and add regular updates. More recently blogs have become a popular method to build most any type of site and the backend scripts can be used to run any site.
There are many types of blog scripts both free and paid, one of the most popular is WordPress which offers both a hosted and downloadable script. Blog scripts generally come with a basic layout and backend where you can make ‘posts’, add ‘pages’, create a ‘blogroll’ and offer other options. The benefit of a script such as wordpress is there are thousands of ‘plugins’ that can increase the functionality of the script and provide a more unique and robust website.
One of the big appeals of running a blog is that they generally can generate a good deal of search engine traffic due to the fact that they can be updated regularly with keyword rich text and can be added to a number of blog directories which increase your backlinks without much effort.
Blogging terms and definitions:
Posts – Posts are usually the main content of a blog consisting of many short reports or descriptions that the author wants to display. Generally shorter in length and updated frequently.
Pages – Pages as they sound are usually longer and more permenant parts of a blog.
Blogroll – is usually the area on a blog with external links to related blogs or other websites.
WP setup
While WordPress is a widely popular and powerful website building cms it can be daunting to install and learn how to use especially for a first time user that has little web design experience so here is a short tutorial to provide installation and setup help for WordPress.
WordPress is a CMS (Content management system) generally used for blogging but robust enough to manage most any type of website so you would expect installation to be complicated however it is really very simple. The WP website offers a handy five minute installation tutorial that explains the initial setup steps so I won’t spend anytime explaining that process. I would however suggest that if you don’t understand the first few lines of the install process you should just submit a ticket to your host and ask them to install it for you as most hosts will take care of it quickly and easily for you.
Once the initial WordPress script is installed you are faced with a dashboard, menu sidebar and tons of options which is where it might become confusing for a first time user. My first steps tweak some settings and setup the script to make it work best for a seo website. One quick thing to setup is the ‘permalinks’ option located under the ‘settings’ menu. The default setting creates your website links using numeric values that do not provide any search engine benefits so I suggest you use the ‘custom structure’ option with some tags such as /%postname%/%post_id%/%categories%/ which the script will replace with text that might help search engines to determine your pages/posts content and provide better rankings. To alter this setting you may need to set your .htaccess file permission to 777 so that the script can write to it, or you can do it manually and upload the file via ftp.
Another setting to change is under ‘General’ which is the ‘tagline’ option that appears under your site title on all the pages, you really want to use that prime spot at the top of your website to create some search engine friendly text.
The ‘Discussion’ menu option contains a number of options you might want to alter depending on if you want to recieve emails when users comment or register though you should be aware many spammers use blog comments so you will get a great deal of spam if you aren’t careful and monitor them.
The other big menu options to explore are the ‘Appearance’ menu and the ‘Plugins’ menu. The appearance menu contains your ‘theme’ opitions which you can use to change the layout and structure of the WordPress website with no real coding on your part. I would suggest using only paid premium theme’s or ones that have been approved and vetted by wordpress as people have been known to offer free themes that contain hidden link codes and spam that you might not notice but could negatively affect your website or visitors. Also the ‘Plugin’ menu lets you install a huge variety of plugins that can expand the utility of your WordPress script, again be careful that the plugins you install are legitimate and preferrably updated regularly. Generally the most popular plugins are safe and obviously useful since thousands of people have been using them.
Finally your initial Word Press install created a basic post, page, and comment as well as links in the blog roll. You can use these as examples to learn from but I would suggest altering or deleting them as soon as possible because they provide no other use. Lastly WordPress creates a ‘Powered by WordPress’ link at the bottom of your website which you can remove by editing the footer.php file you can find under ‘Appearance’ > ‘Editor’ menu though if you use a custome theme the link may already be removed. Either way leaving that link creates the possibility hackers or others can scan the internet and find all the wordpress blogs easily which could lead to problems for you, besides nobody needs to know what CMS you are using as long as your website works and looks good!
Categories: Tutorials, Word Press Tags: installing, scripts, setup, wordpress, wp
Domain Basics
The Basics about Domain Names:
Domains are the name of a website, the thing used to locate a website on the internet. You type domains into the “Address Bar” in Internet Explorer and they are a neccessary part of developing any website. Domains can be rented for a fee from a certified registrar and then are pointed to your server so that when a person types your domain into the address bar they end up at your website. Without a domain you will just have an I.P. number which is very hard to remember.
Registrars charge varying amounts for the rights to use domains, anywhere from $7.99 – $35 per year is the norm. The price really doesn’t matter, it’s the service that the registrar offers you should be concerned with. The more options they offer the better they are usually.
Domain Names – Terms and Definitions:
Domain – The word or symbols typed into the address bar that leads to your website, usually the name of the website itself or an acronym for the name. The shorter and more precise the domain the more valuable it usually is if you resell it.
Registrar – A company that will “rent” you rights to use domains for a yearly fee, a few common and reliable registrars are listed on the right panel. The different companies have differing degrees of support and options as well as costs so do your homework.
ICANN – The regulator body that oversees domains, registration, and the companies allowed to do it. When buying a domain make sure the registrar is “ICANN Accredited”!
Hosting Basics
The Basics of Hosting a website:
Once a person builds a website it must be hosted,depending on the type of site and the amount of traffic the hosting will vary. There are many companies on the internet that will host a website, these companies own datacenters that are usually connected directly to the internet backbone. These companies buy large amounts of bandwidth that they then resell to you so that you can host your website. Hosting is a very complex and indepth part of web development and it is important for anyone planning on building websites to fully understand the basics of how a host works.
Most hosting companies are reputable and reliable, but it is always smart to search around and find a company that offers a good value and will meet all your needs especially if you plan on growing.
Web Hosting Terms and Definitions:
Host – A company that owns or rents space in a datacenter that will give you access to a server that you can then post your website to and view it via the internet.
Server – A specialized computer designed to serve websites over the internet, most servers will work for a basic site however more complex sites may need a server built specifically with special components and added hardware.
Bandwidth – This term is used as a measurement, usually it is measured in gigs or megs. All websites use bandwidth everytime they are viewed by someone over the internet, the more bandwidth a site uses the more expensive it is to host it.
Graphics Introduction
The Basics of making Web Graphics:
Web graphics are any type of image that are used on a website. Graphics help to “spice” up a website and add color to an otherwise basic design. You can design graphics using a number of programs, but most professional graphics designers agree there a few programs that are designed specifically for the web designers (listed below). Making graphics for websites is a big business and a person that is very good at this trade can make any sort of graphic you can imagine.
Because this is a basic intro to web graphics, there is not room for many of the more advanced tutorials that can be used to learn graphics design. However on the right panel there are a number of links to quality tutorials that should give even the most basic novice the techniques to make quality graphics.
Graphics Programs – A Basic Overview
Adobe Photoshop is the most widely used graphics program in the world. Nearly all web developers use Adobe Photoshop because of it’s versatility and its many options that other programs lack. Adobe also makes a more basic program (Photoshop Elements) that is cheaper and a good beginners learning tool.
Paint Shop Pro is another widely used graphics program. It has many of the same features as Photoshop, and if you learn on one of these two you should be able to use either.
Microsoft Paint- While a very basic program, it does come free with Windows and with enough practice can be used to create some very nice graphics for the web.
Useful Graphics links:
Paint Shop Pro Tutorials
Basic Photoshop Tutorials
Front Page
How to use Microsoft FrontPage wysiwyg html editor:
FrontPage is a wysiwyg html editor meaning “what you see is what you get” so when you change a code or move a table you can see the changes on your screen immediately and completely making it easy to learn by experimenting. When you first open FrontPage you are presented with a blank template in the main area and a number of tool bars offering the options you will use to make your website. Most likely there are more toolbars and options then you will ever use but it is nice to have all those options available to you. First I would like to point out the tabs on the bottom of the main screen “normal”, “html”, “preview”. The Normal view is your main page that shows basically what your site will look like when published however some options and advanced tools only become visible when shown in the Preview view. Finally for advanced users and people needing to do manual code tweaks the HTML view is available.
You should recognize many of the options in the top toolbars such as text formatting similar to Microsoft Word and other Microsoft products. There are some buttons that might not look as familiar such as the tables and hyperlink options both of which are very useful in web design. To build a very basic website with Frontpage does not take much skill as you can simply start typing and formatting using those familiar Microsoft options though it won’t look very ‘pretty’. To get more out of the editor you will want to switch to the HTML view and see if you can understand what the html tags mean and how they work, this is the way I learned as it allows you to see exactly how the html creates the finished webpage.
A few pointers as you examine the HTML view. There is an auto generated part including the meta tags that are filled with text for Microsoft that you want to change to your own website information. Meta tags used to be more important for seo but most search engines only give a very basic weight to the information, still it doesn’t hurt and it makes it look more professional to update the meta keywords and description. It is also very important to change the HTML Title tag to provide information for both the search engines and your website visitors as the Title tag is what gets shown on many internet explorer programs.
It should be noted that as you use FrontPage to create websites it does not always create the best HTML for search engine optimization or the most creative designs that you might be more interested in learning how to create. To really do good design work most designers use a combination of tools and skills including more complex coding languages like css, php, flash and others however Front Page does a good job of providing a basic understanding and framework for creating websites with little experience. Being aware of the limitations and knowing how to use the editor to the best of your abilities should allow you to reach your potential and create quality websites that will generate traffic and if you want income.
Categories: HTML, Tutorials Tags: frontpage, html editor, wysiwyg
HTML introduction
The Basics of HTML and it’s uses:
HTML stands for HyperText Mark-Up Language and it is the main programming language used on the internet, understood by nearly all computers. There are many programs that a person can use to write HTML and simplify the web design process. The most widely available and used program is Notepad, with this simple text editor you can design an entire website! However there are more advanced programs that eliminate much of the coding needed to build a website such as: Microsoft Frontpage and Macromedia Dreamweaver.
Since most web designers use a HTML editor like Frontpage a complete understanding of HTML and it’s tags aren’t necessary. If you wish to gain a full understanding of HTML and how to code with it by hand try some of links on the right.
HTML Editors – A basic overview
Microsoft Frontpage is one of the most widely used and easiest to learn HTML editors. If you would like a brief tutorial on how to use Microsoft Frontpage click HERE.
DreamWeaver is the only HTML editor that can compete with Frontpage, though it does cost more, it has more options and it has many advanced features.
Categories: HTML Tags: dreamweaver, frontpage, html