LOW COST JAVA PHP MYSQL CGI PERL
HOSTING SERVICE
LINUX WINDOWS CPANEL WHM PLESK
HOSTING PACKAGES
ECOMMERCE HOSTING ASP JSP MSSQL
FRONTPAGE HOSTING
CPANEL WHM RESELLER DEDICATED
SERVER WEB HOSTING

Archive for HTML Tutorials

Scripting Languages: What are they?

Scripting languages are a type of programming language that controls a specific software application. One example is JavaScript, that controls slight behaviour of a Web browser. For example, JavaScript in a particular fashion is an event-driven scripting language, so in this way, upon an event taking place, JavaScript “springs into action”. One JavaScript code could wait for an event when the user tries to close the tab or browser, and a message box will appear upon the event happening. As such, JavaScript is a client-side scripting language.

What is a client-side scripting language?

Client-side scripting languages are like any form of scripting language but the browser in some form is the interpreter. As such, a server-side scripting language would be a different type of scripting language genre, but in this case the interpreter is a virtual machine inside a server. In this case, the server is a physical machine that has the virtual interpreter installed on it. Basically, a virtual interpreter reads the scripting code, and translates it to HTML code of that specific result, which the browser can understand, and the same pattern would happen with the browser (HTML code -> bytecode -> screen). In this case, the screen part is where the text is displayed on the users screen.

Why have scripting languages?

Unfortunately computers aren’t like humans, and as a result can’t understand human speech commands that we say. For example, in a command-line interface, if we wanted the computer to open a specific file, we couldn’t just say “open notepad.exe” - the computer would just respond and say “unknown command”. The reason there are scripting languages are for a computer to accomplish a specific task. There are many variety of scripting languages out there, and different scripting languages are for different tasks. For example, JavaScript is a client-side scripting language and mainly an event-driven scripting language, and hence, it usually waits for events to happen. JavaScript is commonly known to be used for pop-ups, and in use with web-forms for validation purposes. Another good purpose of JavaScript is that it is capable of changing images as the mouse moves over them. Much like desktop programming languages which are mostly event-driven as well.

There are other scripting languages that are used for general-purpose activities, for example creating dynamic Web pages to create interactivity to the visitor. In such a sense, we mean that, for example, a page could display two different things. If the user is using Firefox, some text with “You are using Firefox” would be displayed, conversely, if the user is using Internet Explorer, some text would display “You are using Internet Explorer” instead. This is one form of dynamic Web pages, but of course many scripting languages could do things at a much higher-level scale than just this. Another example is creating a text-based game, completely coded in a scripting language.

Just for your information, there is a distinct differentiation between scripting languages and good old HTML. HTML alone cannot create dynamic Web pages, as such some of the examples explained in the preceding sections. HTML was created for the building of Web pages, and as a result, it is a static language, and is the structuring of Web pages (and in some cases the styling of Web pages, too).

How do I learn a scripting language?

First of all you need to understand whatever scripting language you want to go for and what exactly it does. If you want to go for client-side scripting languages, JavaScript may be a good option. And in another criteria, for server-side scripting, PHP may be a good option, as a general-purpose scripting language. Nonetheless, whatever scripting language you go for, you need to look into what exactly it is, and understand the concepts of it first. If you want more information on PHP, you can pop on over to PHP’s official Website, PHP.net and JavaScript resources and tutorials can be found with a little searching with Google.com.

Good luck!

Comments Bookmark on del.icio.us

Choosing a Site Building Application

When in the beginning stages of building a website, you will always come accross the decision of what application you should use to build and code your website; making this decision can be tough since there are several different factors that you should always take into consideration when searching for the right application. Many website design applications also contain many features, meaning that it is important that you identify what you want from an application when making the search; you should also take into consideration the type of support that is available for the applications that you are looking at, since most are very complicated and will take you a while to adjust to - whilst adjusting to the application you have chosen, you might also require knowledgable support if there is a certain feature which you are confused about or are trying to find but are having difficulty doing so. The main decision you will need to make is whether you want to use a WYSIWYG (what you see is what you get) editor so that you are able to edit the design of your site directly within the application, or whether you are going to go with a plain text based application and code your website by using your own knowledge.

WYSIWYG or Code Editor 

If you choose to go with a WYSIWYG editor then it is important that you choose an application which has additional features which allow you to specify certain settings, which the application then processes into certain code which it then inserts into your website. Applications such as Adobe Dreamweaver do this for you; Dreamweaver lets you specify certain settings and is then able to process the Javascript code for things such as popup windows and ‘mouse over’ image actions, Dreamweaver is also able to process code for functionalities such as database interaction in most of the different programming lanaguages which it supports as an application. Some applications support dual view - in other words you are able to view your website in design view and code view; this is good if you are a beginner as it allows you to see the code functionality of different areas of the design which you can then use to teach yourself the basic code skills. If you are going to be building your website using your own code, then you needn’t look for an application, since you could just use a simple text-based editor; these types or editors are free and are normally included with most operating systems - an example of this would be Notepad which is included as part of the Windows operating system.

Server Side Languages 

If you are building a ‘dynamic’ website which utilizes a server-side scripting language such as PHP or ASP, then you should consider an application which supports your chosen language specifically, as it will most likely have additional support for the chosen language which can be of advantage to you when building your website; additional support might include things such as ‘code snippets’ which you can use in your own code when constructing your website. Examples of this type of application include Microsoft Visual Studio and Adobe Dreamweaver; Visual Studio has been specifically built to allow ASP.NET developers make the most of the language - Microsoft has also recently released a cut down version of this application known as ‘Microsoft Visual Web Developer’ which is free - the idea of it is to promote ASP.NET as a language to get more people using it. Dreamweaver has support for many different server side languages including PHP, ASP.NET and Java Server Pages; Dreamweaver’s support of these languages extends as far as allowing people who are new to these languages make the most of them by just entering details into the application.

Web Based Site Building Applications

If you go with a shared or reseller hosting plan, you will most likely have access to a web based application which you can use to build your website with. These applications are good if you are new to the concept of website design since they allow you to choose a template that suites your needs, then apply the information which you want your website to contain; in some cases, you are even able to modify or insert HTML code into the template so that the website looks exactly the way you want it to. If you need to build a website quickly, then this type of solution is perfect for you since you don’t have to fiddle about with anything technical. Examples of this type of site building application include:

  • Parallels Sitebuilder - http://www.parallels.com/en/products/sitebuilder/
  • RV Site Builder - http://www.rvsitebuilder.com/
  • Site Studio - http://www.psoft.net/SS/site_studio_info.html

Conclusion 

In conclusion, if you are able to identify your needs and search around the internet you should be able to find an application that supports your needs. There are some good free text based editors such as Windows Notepad and jEdit that allow you to build your website using your own code without having to fork out the money for a premium WYSIWYG application. If you are a high end web developer who is utilizing many different applications within your work, then you should consider an application such as Adobe Dreamweaver since it supports many different languages and is able to provide you with help when coding in the supported languages; if you are only utilizing one language within your work then you should consider a language dependent application, an example of which is Microsoft Visual Studio.

Dependent on your requirements, the following is a list of website building applications which you should have a look at:

  • Adobe Dreamweaver - http://www.adobe.com/products/dreamweaver/
  • jEdit - http://www.jedit.org/
  • Netobjects Fusion - http://www.netobjects.com/

Comments (1) Bookmark on del.icio.us

CSS Basics

CSS stands for Cascading Style Sheets and is the language behind the design of most web pages. In order to achieve a good looking website desifn that is XHTML 1.0 compliant, you should always build your pages using CSS. Its structure is similar to that of both PHP and Javascript, meaning that if you already develop using either of these languages then you should find CSS realtively easy to learn. If you are new to the concept of coding, then you will need to start by learning the basic structure of CSS.

The Basic Structure

CSS elements are normally contained within a code structure which normally takes this form: ‘[element type]#/.[element name] { style properties }’. The element type is the type of element which you want to style, such as a div; the element name is the actual name which you want to give the element, such as ‘bob’. An element which is an id can only be used once within a web page, and in the CSS code is defined by using ‘#’ before the element name; elements which are defined as classes can be used multiple times within a web page and is defined by using a ‘.’ before the element name within a CSS document. The actual properties of the element are contained within the ‘{} tags, ‘{’ being the opening tag and ‘}’ being the closing tag.

You can also style elements without using a name. This is useful is you want the same style to be applied to the same element type throughout a web page. To do this you don’t need to use the id or class symbols since no name is being specified; all you need to put before the opening tag is the element type as seen in HTML format, for our example we want the paragraph element to have the same style properties throughout the web page, so we define the style in this way: ‘p { style properties }’ - we used the ‘p’ element since this is the HTML for a paragraph within a web page. Each style property is defined in the following format: ‘property: value;’; as you can see a colon is present after the property name is defined - this is important as browsers are only able to read elements which are set out with the colon; the semi-colon is present to represent the end of the property - without this present at the end of each property, browsers won’t be able to read the rest of your style sheet.

Style Properties

There are many different properties that you can use within a style block to make an element look good; however, the likelihood is that you will never use all of them. The most important properties within a style block are the ‘width’ and ‘height’ properties since they control the size of the element. However, if you only want to style a text element, such as a ’span’ or ‘p’ element then you will not need to use either of these properties since they are only used to control a box object; in your case the most important properties would be the ‘font-family’, ‘font-size’ and ‘color’ elements since they control how the text will appear.

With CSS you can control how far away other objects on the page must keep from a certain object - the property to control this is called the ‘margin’ property; it has four ’sub-properties’ for each different side of an object, these being ‘margin-top’, ‘margin-bottom’, ‘margin-left’ and ‘margin-right’ - these ’sub-properties’ provide margin styling for each separate side of the object and can be defined individually.

One problem which many people face when building websites using CSS is getting their pages centred. Achieving this is quite simple, all you have to do is define the ‘text-align’ element of the body tag within the CSS document as ‘center’, and each element which you want to centre must have their ‘margin-left’ and ‘margin-right’ properties set to ‘auto’.

Other CSS Resources 

The following is a list of resources you may want to visit if you want to extend your knowledge of CSS:

  • http://w3schools.com/css/default.asp - W3Schools is the learning medium trusted by most. This site gives you an extended knowledge base of tutorials which should help you learn CSS.
  • http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-part-1/ - This is the first part of a serious of articles discussing CSS.
  • http://www.utexas.edu/learn/css/ - This article is perfect for beginners and covers the higher up basics.

Comments (2) Bookmark on del.icio.us

Creating Your First Website

Websites can be used for many different purposes; you can make a personal website about yourself where you may want to post family photos that you might want to share with friends and family, or you may want to build a business website so that you can sell your products online and promote your business through the means of the internet. Many people would love to be able to create their own website, but don’t necessarily have the knowledge to do so; although there are many web-based products which claim to let you build your own website, they don’t necessarily let you customize your website as much as you want since your are limited to certain templates- because of this you should always learn how to build your own website from scratch with HTML.

Learning Languages

To build the most basic of websites you need to start off by learning HTML and CSS. HTML is the basic language of all web pages - without it you won’t even be able to create one page. CSS stands for ‘Cascading Style Sheets’ and is the language used to style elements on a web page - you need to know this if you want to make your web pages look good. If you want to extend the features of your website to include something dynamic, such as a shopping cart then you will need to learn a server side web language such as PHP or ASP.

There are many resources on the internet that you can use to learn web languages, including:

  • http://www.w3schools.com - This site has tutorials for languages which are widely used on the internet. This resource if perfect to get your from being a novice to having intermediate knowledge of web languages.
  • http://www.4guysfromrolla.com/ - This site has many different articles, tutorials and code examples which can help you to learn ASP.NET, and its older sister - classic ASP.
  • http://uk3.php.net/tut.php - PHP.net - the home website of the PHP scripting language has put together a simple tutorial to help out beginners.

Once you have learnt the basics of HTML and CSS, you are ready to start building your website.

Choosing the Design Software

When building a website you need to design what piece of software you will be using to do it. When choosing web design software, there are several variables that you should always take into consideration, these are: cost of the software, the complexity of the software and whether you are going to build using your own code or by using a WYSIWYG (what you see is what you get) editor. Website design software can range from nothing to around £500; if you are going to be building your site using your own code then you have no need for a WYSIWYG editor meaning that all you need is a text application, such as Microsoft Notepad or jEdit - a piece of software specifically built for this kind of scenario. If you are after a piece of software which you would like to do all the coding for you and that lets you see the final outcome without having to do anything complicated then you want a piece of software which is known as a ‘WYSIWYG’ editor; these pieces of software generally cost, and examples include NetObject’s Fusion and Adobe’s Dreamweaver. WYSIWYG editors are generally more complicated to use than normal text editors since they have more built in features to help someone along with the building of their site. Listed below are some of the most commonly used website design programs:

  • http://www.microsoft.com/express/vwd/Default.aspx - Microsoft Visual Web Developer Express Edition is a free piece of Microsoft software created to encourage more developers and designers alike to take up ASP.NET coding. It can be used as both a WYSIWYG editor and a plain text editor, and has many features built in.
  • http://msdn2.microsoft.com/en-gb/vstudio/default.aspx - Microsoft Visual Studio is VWD’s bigger brother and it’s costs vary since there are various different editions of it.
  • http://www.jedit.net/ - jEdit is a free plain text editor that was created specifically for web designers. You can use it to script in any language, but it doesn’t come with a WYSIWYG editor.
  • http://www.adobe.com/products/dreamweaver/ - Adobe Dreamweaver (formally Macromedia Dreamweaver) is probably the best known piece of website design software throughout the world. It comes with both a code editor and a WYSIWYG editor, but is quite costly priced at $399 (approximately £199).

Getting Your Website onto the Internet

Getting your website onto the internet doesn’t have to be the complicated process that many make it out to be. All you need to do is purchase a domain and website hosting and you are all set to go. A domain is the address which you type in to go to a website - the cost of these is relatively low as you can pick a domain up for about £5/year these days; web hosting as well is relatively cheap as in most cases you pick a package up for £22.99/year. After you have purchased both of these you should be given access to an online system known as a ‘control panel’ where you can control all aspects of your website and its hosting.

To upload your website to your web space all you need to do is establish an FTP connection with the FTP server for your site (normally ftp://ftp.yourdomain.com). You will be asked to login with your FTP account - these can normally be created through your control panel. Once a connection has been established you have to copy your website files into the root of your website, this is a folder normally named ‘public_html’ under Linux hosting or ‘httpdocs’ if you are on Windows hosting.

Once the files have been copied, all you need to do is open a fresh browser window, type your domain into the address bar and your website should appear as if by magic!

Promoting Your Website

You’ve got your website completed and on the web now. The next thing to do is to get your website promoted so that you can start receiving visitors. You can submit your website online directories under a category that fits your website and sign up to online advertising services so that your website will be advertised on other websites; you should also make sure that your website is listed in the results of popular search engines such as MSN, Google, and Yahoo - this will ensure that your website receives visitors. You should find the links below helpful when promoting your website:

  • http://www.google.com/adwords/ - Google AdWords is Google’s advertiser network which is known as a PPC (pay per click) program where you can create your own adverts for your website which will be then shown on the websites of Google publisher’s.
  • http://www.url-free.net/ - This is a prime example of a website directory where you can submit your website to a certain category where it can then be found by others who are browsing the category.

Comments (2) Bookmark on del.icio.us

Javascript Basics

Javascript is a client-side scripting language which can be used to manipulate client’s browsers as well as to fetch information on a client’s machine. However, Javascript has only been used in it’s intended way recently, this is because since it’s launch back in the ’90s it has been used by spammers, hackers and virus makers to compromise client machines. The most common use of Javascript at this moment in time is for popup adverts - something which more browsers are beginning to put blocks on.

The most up to date use of Javascript has been in the creating of AJAX. AJAX is a mixture of other languages as well as Javascript which allows data to be posted back to a server without the need for pages to be reloaded. To learn more about AJAX, click here.
However good Javascript may seem to be, it has its limitations, the main one being that older browsers don’t support it.

Creating Your First Javascript

Javascript functions are located within the ‘function()’ tag. These functions can be delcared in two ways: by creating a function with its own names and variables that can be called again at any time within a script, this would be delcared in the following format: ‘function function_name(var1, var2, var3)’; functions can also be called directly which means that they can’t be used again within a script unless the code is copied since the function isn’t assigned a name, a function of this type would be declared in the following format: ‘var variable = function()’.

Any code for a function, or any part of the scipt is located within the opening and closing tags, for javascript these being ‘{’ as the opening tag and ‘}’ as the closing tag.

Variables for a function are located in the brackets after a function name - these variables are set directly each time the function is called, and can be different each time. Variables can also be set directly within a function, but these variables can’t be different each time; these variables are set using the ‘var’ tag.

Basic Page and Browser Manipulation

The main use of javascript is to manipulate client machines and web browsers - it can also be used to manipulate web pages. Browsers can be manipulated in ways that include resizing browser windows, opening new windows with custom settings as well as creating transition effects inbetween web pages.

Opening new windows with javascript is simple as there is the built in ‘window.open’ function; the variables of this function take the following form: ‘window.open(url, windowname[, variables]). Javascript can also be used to close windows by using the ‘window.close’; to use this function you can either close another window, or you can close the window which currently open. To close another window you will need to use the function in this format: ‘windowname.close();’, to close the window which is currently open you need to the function in this format: ’self.close();’.

Page transitions can be achieved with the use of special meta-tags within the ‘head’ section of a page. However, page transitions only work with Internet Explorer. To use page transitions youn will need to add a meta-tag named ‘Page-Enter’ if you want to use effects when someone enters the page, and a tag named ‘Page-Exit’ if you want effects to be used when someone leaves a page. The ‘Content’ part of the meta-tags needs to contain the information that will trigger the effects; to trigger them they will need to be wrapped in the ‘RevealTrans’ tag in the following format: ‘RevealTrans (Duration=Duration, Transition=TransitionNumber)’. The duration can be set in the tag, as well as the transition used; the transitions don’t go by name but by number; click here for a list of transitions and the numbers related to them.

Javascript can also be used to change a browser’s location. To do this the following code must be placed within a function which must be called within the ‘onLoad’ tag of the body tag of a web page: ‘window.location.href = ‘location’;’.

Comments (3) Bookmark on del.icio.us

META tags and SEO

META tags are important HTML tags for providing information about the document. This is not a required tag in a web page, and therefore many developers dont put these tags in the developed web pages. But in most of the search engines these tags are used for listing and indexing the sites accurately. Google, Altavista, etc. search for the META tahs in the document to categorise that document.

Where to put META tags?
META tags should be placed in the HEAD section of an HTML page:
<html>
<head>
<meta name=”keywords” content=”keyword1,keyword2″>
<meta name=”description” content=”description is…”>
……..
</head>
<body>
……..

Major META Tags :
<META name=”doc-type” content=”web page”>
this tag indicates document type. Different types of document available are Government, Journal, Private, Public, etc.

<META name=”keywords” content=”a, list, of, keywords”>
this tag contains a list of keywords separated by comma. These are the most important keywords which indicate what information does the web page contain?

<META name=”description” content=”a description of your page”>
this tag contains descritpion about the web page and its contents. this description should short but summarised with main keywords.

<META name=”distribution” content=”global”>
Content should contain either global, local or IU (for Internal Use).

Optional META tags :
<META name=”copyright” content=”copyright statement”>
this meta tag indicates the copyright for the web page.

<META HTTP-EQUIV=”refresh” content=”0; url=index.htm”>
this tag is used widely for reloading the web page after every mentioned seconds in content. Also, here the URL represents to redirect it to index.htm .

<META name=”revisit-after” content=”7 days”>
this tag informs the bot to revisit after 7/14/21 days.

<META name=”author” content=”author’s name”>
this tag contains the name of the author of web page.

There are other meta tags like robots, revisit-after, rating, owner, publisher, etc. which can be used in a web page.

Thus, by META tags optimization web pages can achieve higher rankings in search engines. Now, most of the search engines also crawl your web page contents, so the contents of the web page should be specific and must contain the keywords for number of times. This helps the search engines to index the web pages and thus web pages gain higher rankings.

Comments (2) Bookmark on del.icio.us

« Previous entries