Web Development 101: Part 2, Create your first Web Page

In Part 1 you learned what WebMatrix is, and you saw how to install it and get it running. In this Chapter you'll use it to create your first web site, and populate it with your first web page.

Creating your site.

Choose the Site From Template option, and you’ll see the the dialog below. Note that you may see a number of different templates, as WebMatrix is growing all the time. The one you are interested in is the Empty Site template. Select this, and give it the name Movies.

image

When you press OK, WebMatrix will create a new, empty, web site for you. This web site will then be loaded into the WebMatrix editor. You can see this here:

image

Before you go any further, it’s good to understand a few things about what you see here. The first is that WebMatrix is more than just a code editing tool. It integrates a web server called IIS Express. A web server is a special piece of software that listens for requests for data over the internet, and answers by delivering that data, usually to a web browser.

Whenever you open your browser and type something like http://www.microsoft.com you are calling the web server for Microsoft, and it answers by sending code such as HTML, JavaScript, CSS, Pictures and more. Your browser then assembles them into a page.

clip_image003

Having a server built-in to WebMatrix makes it very easy for you to develop your web site in a way that behaves exactly like a web server on the internet. If you look at the screen, below the name of the site (in this case ‘Movies’) you’ll see that the server is serving this site at the address http://localhost:8946, which means that the host for the server is local, i.e. your development machine.

From within WebMatrix you can start the web server, and run your site, but if you do that now you’ll get an error because you haven’t yet created any content for the site. You’ll do that in the next step.

Creating your first web page

You’ll notice that WebMatrix allows you to move between different workspaces by selecting the buttons on the left hand side. At present the Site button is selected which gives you details on your web site, such as the URL of the site, and other tools that you can use such as monitoring your site requests. You’ll look into each of these workspaces as you work through this article, but for now, select the Files workspace by pressing on its button.

clip_image005

WebMatrix will now open the Files workspace, and because you don’t have any files in your web site yet, it looks pretty empty. However, it gives you a nice friendly button that allows you to add a file to your site, or you can use the New button in the toolbar to create a new file.

clip_image007

When you select either of these, you’ll see the Choose a File Type dialog which gives you lots of choices for lots of different file types that are typically used on the web.

image

Choose the HTML file type, and call it default.html and press OK. WebMatrix will now create a simple HTML file and open it for you.

clip_image010

An HTML (HyperText Markup Language) file is simply a set of instructions that tell the browser how to draw a page. It’s typically comprised of a Head, which includes instructions about the page itself, and a Body which are the contents of the page. Content is Marked Up using tags, which open with the name of the tag in angle brackets, like <body> and end with the name preceeded by a slash, also in angle brackets, such as </body>. Therefore anything between these tags will be treated as the body of the page by the browser. You can learn more about HTML and its tags at w3cschools.com. http://w3schools.com/html/default.asp.

Edit your page so that it looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
</head>
<body>
  <h1>A list of my Favorite Movies</h1>
  <ol>
    <li>It's a wonderful life</li>
    <li>Lord of the Rings</li>
    <li>The Fourth World</li>
    <li>The Lion King</li>
  </ol>
</body>
</html>

You are entering some text into the <title> tag, as well as putting some code between the <body> tags. This code will use <h1> for Heading 1 style text, <ol> to tell the browser that you are rendering a list, and a few <li> items to tell the browser that you are rendering some list items.

In the WebMatrix toolbar you’ll see a ‘Run’ button.

clip_image011

Select it and WebMatrix will launch your browser, and open the web site running on your local server.

clip_image012

There’s quite a lot happening here. Let’s drill down and take a look.

The Web Server

Notice the address bar on the browser? It hasn’t opened the file off your hard disk, but has launched the web server, and pointed the browser at that web server, asking it to serve up the file default.html.

clip_image013

Look down at the system tray of your PC, and you’ll see a little icon indicating that IIS Express, the web server, is running.

clip_image014

Right click on it, and you’ll see that it is running your Movies site.

clip_image015

The Page Title

Look now at the browser tab for the page. It should contain the text ‘My Favorite Movies’. For comparison, here’s the same site running in Internet Explorer, Chrome, Safari, FireFox and Opera. Note the text is what you entered into the <title> tags within the <head> of the page, and as such you’ve instructed the browser that this is the page title. Different browsers handle the page title in different ways.

Internet Explorer:

clip_image016

Chrome:

clip_image018

Safari:

image

Firefox:

clip_image022

Opera:

clip_image023

It’s important to remember, as a web developer that different browsers can do things in slightly different ways. It’s a good idea to test your page across different browsers to check that it behaves as expected.

Note: Launching your site in different browsers

A really nice aspect of WebMatrix, other than giving you a web server that runs on your development machine, is the ability to quickly launch any of your installed browsers. You can see this by clicking the down arrow at the bottom of the Run button in the WebMatrix tools ribbon.

clip_image024

The list will only show the browsers that you have installed.

The Page Body

In your code you used the <h1> tag around the phrase ‘A list of my Favorite Movies’. This instructed the browser to use the ‘Heading 1’ style, and as such you can see that it was rendered in a large, bold font.

clip_image025

Finally, you wrote out the list of your favorite movies using <ol> (for ‘Ordered List’) and <li> tags (for ‘List Item’), and the browser rendered these. Note that you never put any bullets into the list, but the browser rendered bullets anyway – this is because it is the default style that the browser will use to render <li> items. In part three of this tutorial you’ll see how to modify this style to get the list items to render the way that you want them to.

Summary

In this part of the tutorial you used WebMatrix to create a simple web page, and saw how that web page was served as part of a web site using a web server. You created your first HTML page, and wrote some HTML markup to tell the browser how to render that page. You saw that you can add some markup to the head to define data about the page, and to the body to define the contents of the page. You then ran the page and saw how it works in several different browsers. In the next tutorial you’ll see how to style the page to make it look prettier!

In the next part of this series, you’ll learn about styles and Cascading Style Sheets, and how you can use them to make your page beautiful!

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!