Le web

Le Web

Le Web (toile ou réseau) désigne un système donnant accès à un ensemble de données (page, image, son, vidéo) reliées par des liens et accessibles sur le réseau internet. Un navigateur web permet d’accéder à n’importe quel site web en fonction de ce que l’on souhaite obtenir comme information. Tous ces sites web sont écrits en utilisant les langages HTML et CSS. Le langage HTML (HyperText Markup Language) a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu d’un site. Le langage CSS (Cascading Style Sheets, aussi appelées Feuilles de style) permet de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

Nous allons découvrir à travers cet article comment concevoir un site web délivrant des informations musicales et contenant au moins une page qui contiendra des articles de news sur les artistes. On pourrait ajouter une page donnant le classement des meilleurs musiques de la semaine et une autre page permettant de rechercher des informations sur les chanteurs, les chansons, les paroles…

Table des matières

Le Web        1

Méthode de création d’un site web        1

Outil de développement        2

Structure du site        3

Insérer des références ou liens        4

Ajouter du contenu        5

Insérer une image, une vidéo, un son        5

Mettre en forme le texte        6

Faire des listes        6

Utiliser le langage CSS pour mettre en forme un site web        7

Principes du CSS        7

Gestion des textes        9

1. Méthode de création d’un site web

La première méthode de création d’un site web dite traditionnelle a pour base de développer le site internet sur la base d’un cahier des charges précis qui nécessite une phase de définition du projet assez longue. Le cahier des charges doit être le plus technique possible avant que le développement du site commence. Cette méthode permet d’avoir une vision globale du projet mais est longue et est de moins en moins adaptée à un secteur en évolution permanente.

Les étapes clés de cette méthode sont :

• Définition du projet : analyse du contexte et des objectifs, concurrence, formalisation du cahier des charges
• Définition de l’architecture du site : arborescence (pages), parcours visiteurs, structure des pages, rédaction des textes, hébergement, environnement de développement
• Conception graphique : brainstorming créatif, choix d’une identité graphique générale, aspect visuel des pages et maquettes
• Développement et intégration : installation CMS (aide à la mise en ligne), codage en HTML/CSS des pages, développements spécifiques de modules, API etc.
• Recette et mise en ligne : tests fonctionnels, de performance, relecture des textes, optimisation des mots clés, tracking (Google Analytics),…
• Suivi et maintenance : mise à jour des outils utilisés, résolution des bugs, administration de serveur, suivi des statistiques, création de bannières de visuels…

Les méthodes agiles sont une manière très différente d’envisager la création d’un site web. Elles sont apparues dans les années 1990 en réponse aux besoins de créativités d’organisations en croissance rapide. L’Agile Manifesto, rédigé en 2001 a posé les fondements théoriques de l’Agile. Les méthodes agiles partent du principe que spécifier et planifier dans les détails l'intégralité d'un produit avant de le développer (approche prédictive) est contre-productif.

L'idée consiste à se fixer un premier objectif à courts termes et se lancer sans tarder. Une fois ce premier objectif atteint, on fait un point et on lance un objectif simple à atteindre ensuite et ainsi de suite. On parle donc d’une approche empirique. Dans le cadre d'un projet de développement logiciel, le client élabore sa vision du produit à réaliser et liste les fonctionnalités ou exigences de ce dernier. Il soumet cette liste à l'équipe de développement, communique directement avec elle (plutôt que par papier) qui estime le coût de chaque élément de la liste. On peut ainsi se faire une idée approximative du budget global.

C’est en suivant ce type de démarche que nous allons construire notre site web, les éléments seront déterminés au fur et à mesure de l’avancement du site.

1. Outil de développement

Un simple éditeur de texte permet de réaliser un site web. Il existe des logiciels plus évolués permettant de simplifier certains aspects de la création d’un site web (animations par exemple) ou fournissant des raccourcis mais leur prise en main n’est pas toujours simple. On pourra par exemple utiliser Google Web Designer (gratuit).

Pour simplifier la réalisation du site, nous utiliserons le logiciel Notepad++ qui offre la coloration syntaxique automatique pour l’HTML et le CSS. Il est possible de simplifier l’écriture HTML et CSS en modifiant les préférences (menu Paramétrage dans Notepad++) et en cochant notamment les balises fermantes html)

[pic 1]

Une fois le logiciel lancé, créer un nouveau fichier et l’enregistrer sous le nom « index.html » dans un répertoire nommé Musique. Tous les fichiers créés par la suite seront mis dans ce répertoire.

1. Structure du site

Le langage HTML est constitué de balises, invisibles à l’écran pour les visiteurs, qui permettent à l’ordinateur de savoir ce qu’il doit afficher.

Les balises vont souvent par paires : <balise>  texte </balise>, mais on peut utiliser des balises orphelines pour insérer un élément à un endroit précis : <balise  texte />

 Dans le fichier index.html, tapez le code suivant et enregistrer le document.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Passion Musique</title>

    </head>

    <body>

    </body>

</html>

La balise <html> est la balise principale du code et englobe tout le contenu du site.

...