How to Use WebMatrix to create the first web page

Microsoft WebMatrix is a free tool for creating, customizing, and publishing websites on the Internet.

WebMatrix allows you to easily create websites. You can start with an open-source application (such as WordPress, Joomla, DotNetNuke, or Orchard) and WebMatrix will process the tasks of downloading, installing, and configuring these applications for you. Alternatively, you can use many built-in templates to write your own code. These templates help you get started quickly. No matter what you choose, WebMatrix provides everything you need to run your website, including Web servers, databases, and frameworks. By using the same stack on your development desktop as that on your Web host, you can easily and smoothly launch your website.

You can download a token from http://web.ms/webmatrix.

Now you only need a few hours to learn about WebMatrix, CSS, HTML, HTML5, ASP. NET, SQL, database, and how to write simple Web applications. The content is as follows:

In section 1st, you understand the basic concepts of WebMatrix and how to install and run it. In this chapter, we will use it to create your first website and populate it with your first web page.

Create a website

Select "website from template". The following dialog box is displayed. Note that you may see many different templates because the functions of WebMatrix are constantly improved. You need to use the Empty Site template. Select this template and name it Movies.

 

When you press OK, WebMatrix will create a new blank website for you. The website is then loaded into the WebMatrix editor. You can see this here:

Before further development, it is helpful to understand some of the content here. The first point is that WebMatrix is not just a code editing tool. It integrates a Web server named IIS Express. A Web Server is a special software that listens to Internet data requests and sends the data (usually to a Web browser) to answer the requests.

As long as you open your browser and type something like a http://www.microsoft.com, you call Microsoft's Web server that responds by sending Code such as HTML, JavaScript, CSS, and images. Your browser then combines them into a webpage.

A built-in server in WebMatrix allows you to develop websites as easily as Web servers on the Internet. If you view the screen, you will see the server providing the website at the address http: // localhost: 8946 under the website name ("Movies" in this example, this indicates that the server host is located locally, that is, on your development machine.

From WebMatrix, you can start the Web server and run your website. However, if you do this now, you will get an error because you have not created any content for the website. Next, we will complete this task.

Create your first web page

You will notice that WebMatrix allows you to switch between different workspaces by selecting the button on the left. Select the Site button. The workspace shows you the details of the website (such as the URL of the website) and other tools you can use (such as monitoring your website requests ). In the course of learning this article, we will analyze each workspace in depth, but now we only need to press the Files button to select this workspace.

WebMatrix will now open the File workspace. It looks empty because no File exists on your website. However, it provides a friendly button that allows you to add files to a website, or you can use the New button in the toolbar to create a New file.

No matter which method you select, you will see the Choose a File Type dialog box, which provides many options for many different File types that are commonly used on the network.

Select the HTML file name default.html and press OK. WebMatrix will now create a simple HTML file and open it.

HTML (Hypertext Markup Language) files are a set of commands that tell browsers how to draw webpages. It usually contains a header and a body. The header contains instructions about the webpage, and the body is the content of the webpage. The content is marked with tags. The content starts from the tag name in the angle brackets, for example, <body>, to the slash in the angle brackets, followed by the name, for example </body>. Therefore, any content in these tags will be treated as the body of the webpage by the browser. You can learn more about HTML and Its tags on w3cschools.com.

Asp "> http://w3schools.com/html/default.asp.

Edit a webpage in the following format:

<! DOCTYPE html>

<Html lang = "en">

<Head>

<Meta charset = "UTF-8"/>

<Title> My Favorite Movies </title>

</Head>

<Body>

<H1> A list of my Favorite Movies

<Ol>

<Li> Its a wonderful life </li>

<Li> Lord of the Rings </li>

<Li> The Fourth World </li>

<Li> The Lion King </li>

</Ol>

</Body>

</Html>

You have entered some text in the <title> tag and added some code between the <body> tag. This Code uses

In the WebMatrix toolbar, you will see a "Run" button.

Select it and WebMatrix will start the browser to open the website running on your local server.

There are many things happening here. Let's analyze it in detail.

Web Server

Have you noticed the address bar on the browser? The website does not open the file on your hard disk, but the website starts the Web server and directs the browser to the Web server. The website administrator needs to request the default.html file.

Check the system tray on your PC. A small icon indicates that IIS Express is running on the Web server.

Right-click it and you will see it is running your Movies website.

Webpage title

Now let's take a look at the web browser tab. It should contain the text "My Favorite Movies ". For comparison, we run the same website in Internet Explorer, Chrome, Safari, FireFox, and Opera. You can note that the text is the content you entered in the

Internet Explorer:

Chrome:

Safari:

Firefox:

Opera:

Web developers must note that different browsers perform operations in a slightly different way. It is a good idea to test your webpage on different browsers and check whether its behavior meets expectations.

Note: Start your website in different browsers

A really good aspect of WebMatrix is not to provide you with a Web server running on the development machine, but to quickly start any browser you have installed. You can click the downward arrow at the bottom of the Run button in the WebMatrix tool functional area to experience this.

This List displays only the browsers you have installed.