Tutoriel avancé WebMatrix (2) : Apprenez à utiliser WebMatrix pour créer votre première page Web

Introduction : Microsoft WebMatrix est un outil gratuit qui peut être utilisé pour créer, personnaliser et publier des sites Web sur Internet.

WebMatrix vous permet de créer facilement des sites Web. Vous pouvez commencer avec une application open source (telle que WordPress, Joomla, DotNetNuke ou Orchard) et WebMatrix se charge de télécharger, d'installer et de configurer l'application pour vous. Ou vous pouvez écrire le code vous-même à l'aide des nombreux modèles intégrés qui vous aideront à démarrer rapidement. Quel que soit votre choix, WebMatrix fournit tout ce dont votre site Web a besoin pour fonctionner, y compris des serveurs Web, des bases de données et des frameworks. En utilisant la même pile sur votre bureau de développement que celle que vous utiliseriez sur votre hébergeur Web, le processus de mise en ligne de votre site Web est simple et fluide.

Vous pouvez le télécharger depuis http://web.ms/webmatrix.

Vous pouvez désormais apprendre à utiliser WebMatrix, CSS, HTML, HTML5, ASP.NET, SQL, les bases de données et à écrire des applications Web simples en quelques heures seulement. Le contenu est le suivant :

Dans la première partie, vous avez appris les concepts de base de WebMatrix et appris à l'installer et à l'exécuter. Dans ce chapitre, vous l'utiliserez pour créer votre premier site Web et le remplir avec vos premières pages Web.

Créer un site Web

Sélectionnez l'option "Site Web à partir d'un modèle" et vous verrez la boîte de dialogue ci-dessous. Veuillez noter que vous pouvez voir de nombreux modèles différents car les fonctionnalités de WebMatrix sont constamment améliorées. Ce que vous devez utiliser est le modèle de site vide. Sélectionnez ce modèle et nommez-le Films.

Lorsque vous appuyez sur OK, WebMatrix créera un nouveau site Web vide pour vous. Ce site Web sera ensuite chargé dans l'éditeur WebMatrix. Vous pouvez le voir ici :

Avant d'aller plus loin, il serait utile de comprendre une partie de ce que vous voyez ici Aide. Le premier point est que WebMatrix est plus qu'un simple outil d'édition de code. Il intègre un serveur web appelé IIS Express. Un serveur Web est un logiciel spécial qui écoute les demandes de données provenant d'Internet et répond à cette demande en transmettant ces données (généralement à un navigateur Web).

Dès que vous ouvrez votre navigateur et tapez quelque chose comme http://www.microsoft.com, vous appellerez le serveur Web de Microsoft, qui enverra du code tel que HTML, JavaScript, CSS, images, etc. pour répondre. Votre navigateur les combine ensuite en une seule page Web.

Il existe un serveur intégré à WebMatrix, vous permettant de développer des sites Web très facilement comme si vous utilisiez un serveur Web sur Internet. Si vous regardez l'écran, sous le nom du site Web (dans ce cas « Films »), vous verrez que le serveur dessert le site Web à l'adresse http://localhost:8946, ce qui indique que l'hôte du serveur est local. , qui se trouve sur votre machine de développement.

Depuis WebMatrix, vous pouvez démarrer ce serveur Web et exécuter votre site Web, mais si vous le faites maintenant, vous obtiendrez une erreur car vous n'avez encore rien créé pour le site Web. Nous terminerons cette tâche ensuite.

Créez votre première page web

Vous remarquerez que WebMatrix vous permet de basculer entre différents espaces de travail en sélectionnant les boutons à gauche. Maintenant que le bouton Site est sélectionné, l'espace de travail vous montre les détails du site Web (tels que l'URL du site Web) et d'autres outils que vous pouvez utiliser (tels que la surveillance des demandes de votre site Web). Chaque espace de travail sera analysé en profondeur au fur et à mesure que nous progressons dans cet article, mais pour l'instant, appuyez simplement sur le bouton Fichiers pour sélectionner l'espace de travail.

WebMatrix va maintenant ouvrir l'espace de travail Fichier, qui semblera vide puisque vous n'avez pas encore de fichiers sur votre site Web. Cependant, il fournit un bouton très convivial qui vous permet d'ajouter des fichiers au site Web, ou vous pouvez créer de nouveaux fichiers à l'aide du bouton Nouveau dans la barre d'outils.

Quelle que soit la méthode que vous choisissez, vous verrez la boîte de dialogue Choisir un type de fichier, qui propose des options pour ce qui est couramment utilisé. sur le Web. De nombreux choix de nombreux types de fichiers différents.

Sélectionnez le type de fichier HTML, nommez-le default.html et appuyez sur OK. WebMatrix va maintenant créer un simple fichier HTML et l'ouvrir.

Les fichiers HTML (Hypertext Markup Language) sont un ensemble d'instructions qui indiquent au navigateur comment dessiner une page Web. Il contient généralement un en-tête, qui contient des instructions sur la page Web elle-même, et un corps, qui correspond au contenu de la page Web. Le contenu est balisé à l'aide de balises, commençant par le nom de la balise entre crochets angulaires, tel que

, et se terminant par une barre oblique entre crochets angulaires suivi du nom, tel que . Par conséquent, tout ce qui se trouve dans ces balises est traité par le navigateur comme le corps de la page Web. Vous pouvez en savoir plus sur HTML et son balisage sur w3cschools.com.

http://w3schools.com/html/default.asp.

Modifiez la page Web pour qu'elle ressemble à ceci :

<!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&#39;s a wonderful life</li>  
  
<li>Lord of the Rings</li>  
  
<li>The Fourth World</li>  
  
<li>The Lion King</li>  
  
</ol>  
  
</body>  
  
</html>

Vous avez saisi du texte dans les balises

. Ce code utilisera

comme texte de style de titre,

pour indiquer au navigateur que vous affichez une liste et certains éléments

1. Dans la barre d'outils WebMatrix, vous verrez un bouton "Exécuter".

   

   Sélectionnez-le et WebMatrix lancera le navigateur, ouvrant le site Web exécuté sur votre serveur local.
   

   

   Il se passe beaucoup de choses ici. Analysons-le en détail.

   Serveur Web

   Vous remarquez la barre d'adresse sur votre navigateur ? Il n'ouvre pas le fichier sur votre disque dur, mais il démarre le serveur Web et pointe le navigateur vers le serveur Web, lui demandant le fichier default.html.

   

   Jetez un œil à la barre d'état système de votre PC et vous verrez une petite icône indiquant que le serveur Web IIS Express est en cours d'exécution.
   

   
   

   

   Cliquez dessus avec le bouton droit et vous le verrez exécuter votre site Web Films.
   

   

   
   

   Titre de la page Web

   Regardez maintenant l'onglet du navigateur du page web . Il doit contenir le texte « Mes films préférés ». À titre de comparaison, nous exploitons le même site Web dans Internet Explorer, Chrome, Safari, FireFox et Opera. Notez que ce texte est ce que vous saisissez dans la balise