Install themes to enhance the look of your website
Create a custom contact form
We will demonstrate how to create and manage a test server to install and configure a WordPress site on a local PC. For the purposes of this course all the demonstrations will be carried out on this test server, although the lessons could be completed on a fully functioning web server.
Fire up whatever text editor you're comfortable with. For us, we're going to be using Notepad on a Windows machine. Add the simple HTML you see below:
So we have the HEAD and BODY tags of a HTML page, along with a TITLE area at the top. Save your text file with the name first_script.html. If you're using Notepad then you need to change the Save As Type area at the bottom to All Files, otherwise you'll end up with a text file rather than a HTML page that you can load into a browser. (You don't need to do this if you're using TextEdit on a Mac. Just typefirst_script.html in the Save As box.)
We now need to add some Javascript tags. In between the two BODY tags, then, add the following:
The lines you're adding are these:
<SCRIPT LANGUAGE = "Javascript">
alert("Hello World")
</SCRIPT>
Programming scripts are added between two <SCRIPT> tags, an opening one and a closing one. An attribute to the SCRIPT tag is LANGUAGE. This tells the browser which scripting language is being used. For us, this is Javascript. This goes after an equal sign ( = ). Notice that we've surrounded the word Javascript with double quote marks. But you don't have to. In fact, you can miss out the LANGUAGE attribute altogether and just have this:
<SCRIPT>
alert("Hello World")
</SCRIPT>
Any Javascript you want to add needs to go between the two SCRIPT tags. Careful of the forward slash for the end SCRIPT tag - miss this out and your code won't work. Like all HTML tags, though, the two SCRIPT tags can be lowercase, if you prefer:
<script>
alert("Hello World")
</script>
However, although the SCRIPT tags are not case sensitive Javascript very definitely is. Our code consists of a single line, a simple alert box. All it does is to display a dialogue box with the words "Hello World". Try it out. Save your work. Now use Windows Explorer or Finder on a Mac to navigate to where you saved the HTML file. Double click to run your script in a browser. You should see the following in Firefox:
Or this in Internet Explorer:
Now change your alert line to this:
Alert("Hello World")
The word alert now has a capital "A". Save your work and reload the page in your browser. You should find that the alert box no longer displays. Change it back to a lowercase "a", save and reload. The alert box will come back.
Alert Boxes are used to display information to your users. In between a pair of round brackets, you type the text you want people to see. This text goes between quote marks (single or double quotes, but not a mixture of the two).
Confirm and Prompt
As well as an alert box, you can have a confirm and a prompt box. Using a confirm box will get you two buttons, OK and Cancel. They are normally used with an IF Statements to detect which of the two buttons was clicked. You'll learn about IF Statements in a later section, but the code for a Confirm box is just this:
confirm("OK or Cancel?")
Again, the text you want to display goes between quote marks. In a browser, the confirm box looks like this:
A prompt box is used when you want some input from the user. The code for a Prompt box is this:
prompt("Favourite Colour?", "Red")
The prompt box has two parts between the round brackets. The first part is the heading, while the second part is some default text. Here's what they look like in a browser:
A user can enter some text in the text box. When the OK button is clicked you can get at the text the user entered and do something with it. You'll see how to do this in the IF Statements section.
For both confirm and prompt boxes lowercase letters are used.
In the next lesson, we'll take a look at where the javascript tags go
There's no doubt that Javascript can be a fiddly, messy language to get to grips with. Unfortunately, there's no easy way to see where you went wrong without some form of debugging software or plug-in. Even then, the error messages these generate can be somewhat enigmatic.
The debugger we like is the Web Developer toolbar by Chris Pederick. It's a Firefox extension. You can get it here:
Once installed, you'll see a toolbar like this one:
As you can see, there's lots of options for budding web developers.
For the Javascript part, have a look on the right of the toolbar and you'll see three green ticks (hopefully):
This indicates that all is well with the page. If you see a red X on the right it means there's an error or warning for your Javascript:
When you click the red X you'll see a console pop up. The console will tell you some information about the error:
Although the message itself can be puzzling if you're a beginner, it at least tells you which line the error is on.
You can also type something in the Code text box and click the evaluate button:
If there's an error you'll then see this:
If you want to try this, type a lowercase "a" and click evaluate again. You'll see a message box appear. The code has run successfully.
Another popular Javascript debugger is Firebug. Again, this is for Firefox. It can be a bit daunting for beginners, but is well worth trying. The Firebug home page is here: http://getfirebug.com/
Internet Explorer 9 has a sophisticated Jscript debugger built into it. (Jscript is Microsoft's version of Javascript. It's mostly the same, though.) The debugger is tricky to find, though. First, press the left ALT key on your keyboard to see the File, Edit, View menu at the top. Now click Tools > Internet Options. From the Internet Options dialogue box click the Advanced tab. Scroll down and find the entry for Disable Script Debugging. Uncheck this entry if it has a check mark next to it. Click theApply button at the bottom of Internet Options. Reload your web page and you'll see a message at the bottom about ActiveX controls. Say yes to this, and yes on the Web Page Error dialogue box. After all that, you should see the following:
The debugger is not the easiest thing in the world to understand, but at least you get a nice yellow background and pointer for your errors!
In the next section, you'll write your very first piece of Javascript.
Javascript is programming language created by Brendan Eich for a company called Netscape. It quickly became very popular as it allowed web developers to manipulate the browser and its contents in ways that was not possible with ordinary HTML or Cascading Style Sheets. By using Javascript in your web pages, you can gain more control of how the page looks and behaves: document elements can be inspected, form elements validated before the contents are sent, browser details checked, cookies set, dates and times can be added to the page, even simple games can be added to a web page - all with a scripting language.
The learning curve for scripting is a lot steeper than HTML and Style Sheets. But you can learn the basics, and use scripts on your own pages, without it causing you too much trouble. The scripting language covered in these pages is meant to get you started on the subject, and is not intended as an in-depth study.
All the scripts in these pages have been tested with modern version of Internet Explorer, Firefox, Safari, Chrome, and Opera. If you're ready, then, let's make a start.
Knowledge and Software
For this Javascript course, we're going to assume that you know some HTML. You by no means need to be a web design guru, but you should have some basic knowledge of how a web page is created. You should know about things like the HEAD and BODY section of a HTML page, how to create new paragraphs, insert images and hyperlinks. If not, then the place to start is our web design course, which is here:
The software we will use is just a basic text editor. This will be Notepad on a Windows computer for us, but you can use any operating system. For Mac users, the equivalent to Notepad is TextEdit. Another good free editor for the Mac is TextWrangler. You can get a copy here:
For all users, we have a couple of templates you can use to make life easier. They are explained in the next section.
As for web browsers, you can use any one you like, but most of our examples are from Firefox. It's a good idea to test your code in more than one browser, however. Most of them are free, so it's just a question of downloading and installing them!.
Useful Javascript Templates for this Course
We've created a couple of Javascript template files for you. Click below to open the files in a new window. You can just download the basic template for now, as the canvas template is for much later. If you're not sure how to turn a text file into a HTML page then read on.
When you click a link above, a file will open in a new tab or window. The file will be a text file. Now clickFile > Save Page As, if you're using Firefox:
In Internet Explorer, Opera and Safari, click File > Save As. (You may have to press the left ALT key on your keyboard in IE and Safari to see a File menu at the top.)
In the Chrome browser, simply right click the page and you'll see a menu appear. Click Save As from the options:
In all browsers, you should then see a dialogue box appear. Choose a location to save the text file to. Then make sure the Save As Type area at the bottom says Text Document (Opera and Chrome), orText Files (IE and Safari), or All Files (Firefox).
Click Save and you'll have a template text file on your computer.
Create a Web Page from your Template
To turn your template into a HTML page, open the text file using Windows Explorer or Finder on the Mac:
When you double click your file, it will open in a text editor. Click File > Save As again. In the Save As Type area change it to All Files. (You don't need to do this if you're using TextEdit on a Mac.) Now type a new name, followed by the extension .html:
When you click Save, you'll have a new web page.
To get at the code for editing, open an Explorer or Finder window again. Right click the HTML page you want to edit. You should see an Open with option on the menu:
If you've installed Notepad++ you can simply click the Edit with Notepad++ option rather than Open with. If you don't see a normal Notepad option like ours above, then click the Choose default program option at the bottom. If Notepad is still not there when the dialogue box appears, click the Browse button:
When the Browse dialogue box appears, navigate to the directory C:\Windows\System32. Then select Notepad.exe.
Here are the templates again:
MVC stands for model-view-controller. MVC is a pattern for developing applications that are well architected and easy to maintain. MVC-based applications contain:
Controllers: Classes that handle incoming requests to the application, retrieve model data, and then specify view templates that return a response to the client.
Models: Classes that represent the data of the application and that use validation logic to enforce business rules for that data.
Views: Template files that your application uses to dynamically generate HTML responses.
We'll be covering all these concepts in this tutorial series and show you how to use them to build an application.
Let's begin by creating a controller class. In Solution Explorer, right-click the Controllers folder and then select Add Controller.
Name your new controller "HelloWorldController". Leave the default template as Empty controller and click Add.
Notice in Solution Explorer that a new file has been created named HelloWorldController.cs. The file is open in the IDE.
Inside the public class HelloWorldController block, create two methods that look like the following code. The controller will return a string of HTML as an example.
usingSystem.Web;usingSystem.Web.Mvc;namespaceMvcMovie.Controllers{publicclassHelloWorldController:Controller{// // GET: /HelloWorld/ publicstringIndex(){return"This is my <b>default</b> action...";}// // GET: /HelloWorld/Welcome/ publicstringWelcome(){return"This is the Welcome action method...";}}}
Your controller is named HelloWorldController and the first method above is named Index. Let’s invoke it from a browser. Run the application (press F5 or Ctrl+F5). In the browser, append "HelloWorld" to the path in the address bar. (For example, in the illustration below, it's http://localhost:43246/HelloWorld.) The page in the browser will look like the following screenshot. In the method above, the code returned a string directly. You told the system to just return some HTML, and it did!
ASP.NET MVC invokes different controller classes (and different action methods within them) depending on the incoming URL. The default mapping logic used by ASP.NET MVC uses a format like this to determine what code to invoke:
/[Controller]/[ActionName]/[Parameters]
The first part of the URL determines the controller class to execute. So /HelloWorld maps to theHelloWorldController class. The second part of the URL determines the action method on the class to execute. So /HelloWorld/Index would cause the Index method of the HelloWorldController class to execute. Notice that we only had to browse to /HelloWorld and the Index method was used by default. This is because a method namedIndex is the default method that will be called on a controller if one is not explicitly specified.
Browse to http://localhost:xxxx/HelloWorld/Welcome. The Welcome method runs and returns the string "This is the Welcome action method...". The default MVC mapping is /[Controller]/[ActionName]/[Parameters]. For this URL, the controller is HelloWorld and Welcome is the action method. You haven't used the [Parameters] part of the URL yet.
Let's modify the example slightly so that you can pass some parameter information from the URL to the controller (for example, /HelloWorld/Welcome?name=Scott&numtimes=4). Change your Welcome method to include two parameters as shown below. Note that the code uses the C# optional-parameter feature to indicate that thenumTimes parameter should default to 1 if no value is passed for that parameter.
publicstringWelcome(string name,int numTimes =1){returnHttpUtility.HtmlEncode("Hello "+ name +", NumTimes is: "+ numTimes);}
Run your application and browse to the example URL (http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4). You can try different values for name and numtimes in the URL. The system automatically maps the named parameters from the query string in the address bar to parameters in your method.
In both these examples the controller has been doing the "VC" portion of MVC — that is, the view and controller work. The controller is returning HTML directly. Ordinarily you don't want controllers returning HTML directly, since that becomes very cumbersome to code. Instead we'll typically use a separate view template file to help generate the HTML response. Let's look next at how we can do this.
This tutorial will teach you the basics of building an ASP.NET MVC Web application using Microsoft Visual Web Developer 2010 Express Service Pack 1, which is a free version of Microsoft Visual Studio. Before you start, make sure you've installed the prerequisites listed below. You can install all of them by clicking the following link: Web Platform Installer. Alternatively, you can individually install the prerequisites using the following links:
If you're using Visual Studio 2010 instead of Visual Web Developer 2010, install the prerequisites by clicking the following link: Visual Studio 2010 prerequisites.
A Visual Web Developer project with C# source code is available to accompany this topic. Download the C# version. If you prefer Visual Basic, switch to the Visual Basic version of this tutorial.
What You'll Build
You'll implement a simple movie-listing application that supports creating, editing, and listing movies from a database. Below are two screenshots of the application you’ll build. It includes a page that displays a list of movies from a database:
The application also lets you add, edit, and delete movies, as well as see details about individual ones. All data-entry scenarios include validation to ensure that the data stored in the database is correct.
Getting Started
Start by running Visual Web Developer 2010 Express ("Visual Web Developer" for short) and select New Projectfrom the Start page.
Visual Web Developer is an IDE, or integrated development environment. Just like you use Microsoft Word to write documents, you'll use an IDE to create applications. In Visual Web Developer there's a toolbar along the top showing various options available to you. There's also a menu that provides another way to perform tasks in the IDE. (For example, instead of selecting New Project from the Start page, you can use the menu and select File >New Project.)
Creating Your First Application
You can create applications using either Visual Basic or Visual C# as the programming language. Select Visual C# on the left and then select ASP.NET MVC 3 Web Application. Name your project "MvcMovie" and then click OK. (If you prefer Visual Basic, switch to the Visual Basic version of this tutorial.)
In the New ASP.NET MVC 3 Project dialog box, select Internet Application. Check Use HTML5 markup and leaveRazor as the default view engine.
Click OK. Visual Web Developer used a default template for the ASP.NET MVC project you just created, so you have a working application right now without doing anything! This is a simple "Hello World!" project, and it's a good place to start your application.
From the Debug menu, select Start Debugging.
Notice that the keyboard shortcut to start debugging is F5.
F5 causes Visual Web Developer to start a development web server and run your web application. Visual Web Developer then launches a browser and opens the application's home page. Notice that the address bar of the browser says localhost and not something like example.com. That's because localhost always points to your own local computer, which in this case is running the application you just built. When Visual Web Developer runs a web project, a random port is used for the web server. In the image below, the random port number is 43246. When you run the application, you'll probably see a different port number.
Right out of the box this default template gives you two pages to visit and a basic login page. The next step is to change how this application works and learn a little bit about ASP.NET MVC in the process. Close your browser and let's change some code.
Your Next [2nd Tutorial] Tutorial >> Adding a Controller (C#)
ref: By Rick Anderson|January 12, 2011
By Rick Anderson, Rick Anderson works as a programmer writer for Microsoft, focusing on ASP.NET MVC, jQuery and Entity Framework. He enjoys working with the top contributors in the ASP.NET MVC forum.
Submit your URL to the search engines to promote your website for free!
Practically everyone who has access to Internet uses Google, Yahoo, or another popular search engine to browse the net and find extensive information in a matter of seconds. To get access to larger audience, you may submit your site to the most popular search engines and have them list your site in their search results for free.
The search engines return relevant search results in two categories: free and sponsored links. When you submit your site to a search engine, you fight for better position on the results list. It is very important to get listed among the first free results. They have better exposure than the sponsored links and generate much more traffic/visitors to your website.
How do the search engines display free results?
To be able to display relevant free search results, the search engines store a large database of information about millions of web pages. When you submit your URL to the search engine, you practically invite it to crawl your site and display your URL in relevant free search results. To get high positions on relevant free search results, you have to go through the search engine optimization process. Read about SEO here.
How to submit site to search engines?
It is free and very easy to submit your website to search engines! You better do that submission manually as the search engines ask for verification when submitting the site. Here are the 4 most popular search engines and the pages where you can add your URL:
Note: It is up to each of the search engines to include your website in their search results. The time for the inclusion may vary depending on the number of websites in their waiting lists.
Increase the quality of your website by avoiding the most common SEO mistakes.
There are a few mistakes in an SEO of a website that you should avoid. These simple-to-follow guidelines are essential for the way your pages rank in search results.
Targetting the wrong keywords
You should carefully choose the keywords which you want to compete for. For example, if you are making a website for your local football team, you should not aim to be first for the "sport" keyword. The "sport" keyword is simply too general and there are already many old and well optimized websites that will always be ahead of you in the search results. You should find your own niche (keywords you rank for) and optimize your website for it.
Duplicate Meta tags
This is a common mistake among web designers. Meta tags should be unique and meaningful for each separate page. For your meta description, for example, you should use complete sentences as if you are describing your page to a friend. The page title, meta description and keywords should be different for each page. If they are the same, search engines consider them as duplicate content and rank you lower in their search result pages.
Missing Title tag
You should set a title for each one of your pages. It should be meaningful and relative to the actual content of your site. Avoid using titles longer than 60 characters. Search engines will simply ignore the symbols after the 60th character.
Website is entirely created with Flash without an HTML alternative
Although websites created with Flash can be very pretty and attractive, search engines cannot crawl them. Since they cannot index your content, you will not rank for the keywords you would like to. Therefore, you should create an HTML alternative of your Flash website and provide your visitors with the option to choose one of them. By doing this you will increase the usability of your website and improve the way search engines index it.
Missing "alt" tags in the code for your images
Unfortunately, search engines cannot scan what is shown on an image. They cannot distinguish a photo of a flower from a photo of a truck. The only way they receive information about an image is through its file name, its title and "alt" tag. Make sure you enter relevant title and alt tags for each one of the images on your website. You should give them meaningful names; avoid using image1.jpg, image2.jpg, etc. By doing this, search engines will receive the information they need for your images. In addition, they will be included in the search results when someone searches for a photo in Google for example.
Failing to create a content hierarchy
Many web designers underestimate the power of well-structured website. Search engines rank higher websites with well organized content. You should use heading tags (h1, h2, h3) to organize your text. This will improve the readability of your content and the way search engines index it.
Offering links on your website for money
Many people create websites only to optimize them and later sell links on their pages. Lately search engines and especially Google started to penalize such pages. Even Google Japan was penalized for buying links from bloggers. You should exchange links only with websites that are really related to the topic of your website. Avoid using any "spam" techniques to improve the ranking of your pages.
