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.
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.
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.
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 .
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 and end with the name preceeded by a slash, also in angle brackets, such as . 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 Moviestitle>
head><body>
<h1>A list of my Favorite Moviesh1> <ol> <li>It's a wonderful lifeli> <li>Lord of the Ringsli> <li>The Fourth World li> <li>The Lion Kingli> ol>body>html>You are entering some text into the for Heading 1 style text, to tell the browser that you are rendering a list, and a few
- items to tell the browser that you are rendering some list items. In the WebMatrix toolbar you’ll see a ‘Run’ button.
Select it and WebMatrix will launch your browser, and open the web site running on your local server.
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.
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.
Right click on it, and you’ll see that it is running your Movies site
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 tags within the 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:
Chrome
Safari:
Firefox:
Opera:
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.
The list will only show the browsers that you have installed.
The Page Body
In your code you used the
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.
Finally, you wrote out the list of your favorite movies using
(for ‘Unordered List’) and
- 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
- items. In part two 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.
Select it and WebMatrix will launch your browser, and open the web site running on your local server.
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.
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.
Right click on it, and you’ll see that it is running your Movies site
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 theInternet Explorer:
Chrome
Firefox:
Opera:
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.
The list will only show the browsers that you have installed.
The Page Body
In your code you used the 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.
Finally, you wrote out the list of your favorite movies using
(for ‘Unordered List’) and
- 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
- items. In part two 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.
No comments:
Post a Comment