Archive for HTML Tutorials

Different methods of publishing websites using Plesk control panel

Different methods of publishing sites using Plesk control panel..

Here’s a brief documentation on creating & publishing sites using different methods. Once you add a Domain in Plesk control panel, you can create your site content (Web pages, scripts & graphic files that compose your site) on your home or office computer & then publish it to the web server in any of the following ways:

* Through FTP connection (most common & easiest way),
* Through Plesk File Manager,
* Through Adobe Dreamweaver or Microsoft FrontPage software.

Let’s go through each of the following processes one-by-one.

1) Publishing Sites Through FTP:

  1. Connect to the server with any FTP client program, using FTP account credentials that you specified during setup of hosting account or obtained from us in the welcome email. Ensure that the passive mode is enabled if you are behind a firewall.
  2. Upload files & directories that should be accessible through HTTP protocol to the httpdocs directory.
  3. Place your CGI scripts into the cgi-bin directory.
  4. Close your FTP session as you’re done with publishing the site using the FTP method icon smile

2) Uploading Sites Through Plesk File Manager:

  1. Log in to Plesk control panel.
  2. Click the domain name you need.
  3. Click File Manager in the Hosting group.
  4. Create & upload files & directories.

Place the files & directories that should be accessible via HTTP protocol to the httpdocs directory. Place your CGI scripts into the cgi-bin directory.

* To create a new directory within your current location, click Add New Directory in the Tools group, specify the directory name & click OK.

* To create new files in the required directory, click Add New File in the Tools group, in the File creation section specify the file name, select the Use html template check box, if you want file manager to insert some basic html tags to the new file, & click OK. A page will open allowing you to enter the content or html-formatted source of a new file. After you are done, click OK.

* To upload a file from the local machine, click Add New File in the Tools group, specify the path to its location in the File source box (or use Browse to locate the file), & click OK. You can upload up to 3 files at once through three separate File Source boxes. If you are uploading an archive file (.zip or .rar), select the corresponding Upload archive & extract it check box to extract the uploaded archive contents in the folder where the file was uploaded.

* To view or edit an existing file, click its name. When editing an HTML file, Plesk opens internal WYSIWYG editor by default. If you want to edit the source code of the HTML file, click Html. To return back to WYSIWYG mode, click Design.

When you upload web content through File Manager or FTP, your control panel automatically sets the appropriate access permissions for files & directories.

* To rename a file or directory, hover on one of the icons which displays the ‘Rename’ text. Type in a new name & click OK.

* To copy or move a file or directory to another location, select the required file or directory using the appropriate check box, & click Copy/Move. Specify the destination for the file or directory to be copied or renamed to, then click Copy to copy, or Move to move it.

* To update the file or directory creation date, click Change Timestamp. The time stamp will be updated with the current local time.

* To remove a file or directory, select the corresponding check box, & click Remove selected icon. Remove Selected. Confirm removal & click OK.

3) a. Publishing Sites from Microsoft FrontPage:

Microsoft FrontPage deals with two kinds of Web sites: disk-based & server-based. In short, a disk-based site is a FrontPage Web site you create on your local hard disk & then later publish to a Web server. A server-based site is one you create & work with directly on a Web server, without the extra step of publishing. Here’re the instructions on publishing only disk-based web sites.

You can publish disk-based web sites either through FTP or HTTP. The server your account is hosted on is running FrontPage Server Extensions, hence you would publish your site to an HTTP location. For example: http://your-domain.com/MyWebSite. If your server supports FTP, you would publish to an FTP location. For example: ftp://ftp.your-domain.com/myFolder.

After publishing, you can manage your site through FrontPage Server Extensions.

To access FrontPage Server Extensions management interface:

  1. Log in to Plesk.
  2. Click the domain name you need.
  3. Click FrontPage Management in the Hosting group.
  4. According to the Microsoft FrontPage support settings of the domain, one of the following icons will appear next to Add New FrontPage Subaccount:
    • Click FrontPage WebAdmin to manage a site, which is not protected by SSL.
    • Click FrontPage-SSL WebAdmin to manage an SSL-enabled site.
  5. Type your FrontPage administrator’s login name & password, & click OK.

For instructions on using FrontPage server extensions, see online help (FP WebAdmin > Help) or visit Microsoft web site.

3) b. Publishing Sites with Adobe Dreamweaver:

Before publishing a site from Dreamweaver, you need to define the site properties, that is, you need to tell Dreamweaver where your site files are located on your computer, & to specify the server to which you want to publish the site.

  1. To define a site in Dreamweaver:
  2. From the Site menu, choose New Site. The Site Definition screen opens.
  3. Click the Advanced tab.
  4. In the Local Info category, specify the following:
    • Site name. This will show in Web browser’s title bar.
    • Local root folder. This is the folder on your computer where all of your site files are stored. For example c:\My Site
    • Default images folder. Specify the folder where your site’s graphic files are stored. For example c:\My Site\images
    • HTTP address. Specify your domain name. For example, http://your-domain.com
  5. From the Category menu, select the Remote Info item.
  6. From the Access menu, select the FTP option. Most likely, your server supports publishing through FTP (File Transfer Protocol, commonly used for transferring files over the Internet).
    • FTP host. Type your FTP host name without the ftp:// prefix. For example, your-domain.com.
    • Host directory. Specify the directory on the server where your site will reside. In most cases, this is httpdocs.
    • Login & password. Specify the login name & password for access to the FTP account.
    • Use passive FTP. Select this option only if your computer is behind a firewall.
  7. Specify the following settings:

  8. To ensure that you specified the correct login & password, & that Dreamweaver can connect to the server, click the Test button.
  9. To save the settings, click OK.
  10. Now to publish your site:

  11. Open your site in Dreamweaver.
  12. From the Site menu, select the Put option (or press Ctrl+Shift+U simultaneously), this will make the files to be published over the server.

Related Posts:

  • No Related Posts

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!

Related Posts:

  • No Related Posts

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/

Related Posts:

  • No Related Posts

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.

Related Posts:

  • No Related Posts

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.

Related Posts:

  • No Related Posts
« Previous entries Next Page » Next Page »