HTML5 : le guide du débutant

La capacité à créer de belles et convaincantes pages web est une compétence utile qu'il faut avoir. Elle vous permet de présenter des informations qui vous intéressent tout en capturant l'attention des personnes qui visitent votre page web.

Si vous ne souhaitez pas utiliser les gestionnaires de contenu (tels que WordPress, Drupal et Joomla) pour mettre sur pied votre site web et que vous voulez apprendre les bases du HTML5, alors ce guide est fait pour vous !

Et au fait, une fois que vous aurez appris les ficelles du métier pour le HTML5, je vous suggère de jeter un œil à ma « Fiche de révision HTML5Fiche de révision HTML5 » ci-dessous.

Historiquement, les sites web sont créés à partir du HTML, du CSS et du JavaScript. Ils sont connus en tant que technologies front-end et contrôlent l'esthétique du site web. Ces dernières années ces outils ont eu droit à une énorme refonte et peuvent maintenant se vanter de disposer d'incroyables fonctionnalités, qui vous permettent de faire des choses qui auraient été impossibles auparavant sans l'utilisation d'une technologie back-end difficile à manipuler, telle que le PHP, Perl ou Ruby On Rails.

Ce renouveau est appelé HMTL5, et il est utilisé avec beaucoup d'enthousiasme par les entreprises et les développeurs. Dans cet article, je vais vous montrer comment utiliser les différents aspects du HTML5 dans vos propres projets de sites web. Et bien qu'avoir de l'expérience dans le web design de base est utile, elle n'est pas essentielle.

Charlie and the Roundheads est un groupe de rock indépendant du coin d'Huntingdon Beach en Californie qui a récemment signé avec un gros studio d'enregistrement. Leur manager A&R (Artists and Repertoire) souhaite vraiment qu'ils aient un site web, et il vous a embauché pour le créer !

Vous devrez ajouter des fonctionnalités pour écouter de la musique en streaming, un endroit où Charlie and the Roundheads pourront partager leurs clips musicaux, poster des messages ainsi qu'une zone où les fans pourront s'inscrire et recevoir par e-mail les nouveautés du groupe. En plus de tout ceci, le code devra être propre et représentatif des styles de codage moderne en HTML5.

Même si tout ça peut sembler intimidant au premier abord, ça ne l'est pas du tout.

Durant les prochaines trente minutes, vous allez apprendre comment faire tout ça, et bien plus encore.

Premièrement, nous devons parler des outils que nous allons utiliser pour rédiger notre code. Vous êtes probablement familiarisé avec Microsoft Word ou Apple Pages. Ce sont des logiciels de traitement de texte qui conviennent bien à l'écriture de lettres et de documents, mais complètement inappropriés pour écrire du code.

Ceci est dû à plusieurs raisons ; la principale étant que les logiciels de traitement de texte créent des fichiers difficilement lisibles par les navigateurs internet tels qu'Internet Explorer, Chrome et Safari et ajoutent aux documents web des formatages et informations superflus. Alors qu'en fait, nous avons besoin de créer des fichiers aussi simples que possible. Ils sont appelés fichiers « plain text », ou « texte brut » en français.

Pour créer et modifier ces fichiers, nous utilisons des éditeurs de texteéditeurs de texte. Vous pouvez connaître Notepad sur Windows. C'est un exemple d'éditeur de texte que l'on peut utiliser, bien qu'il soit un des plus basiques. Les programmeurs et les web designers ont tendance à utiliser des éditeurs de texte qui sont plus efficaces pour écrire du code.

Ici on trouve beaucoup de choix

Si vous êtes sous Windows, vous pouvez essayer Notepad++ ou TSW WebCoderTSW WebCoder. Certaines versions de Linux sont fournies avec Gedit, qui est un éditeur de texte remarquablement efficace pour les codeurs. Les utilisateurs de OS X pourraient trouver TextMate plus adapté à leurs besoins.

Pour ce tutoriel, je vais utiliser Sublime Text 2Sublime Text 2. Disponible sur OS X, Linux et Windows, c'est un éditeur de texte polyvalent et puisqu'il n'est pas gratuit, il propose une version d'essai illimitée. Alors s'il vous plaît, téléchargez et installez-le avant de poursuivre plus loin dans ce tutoriel.

HTML est l'acronyme de « Hypertext MarkUp Language » et se réfère au code qui structure tous les éléments d'une page web. Il ne définit pas le style de la page et n'ajoute pas d'interactivité complexe. Il laisse tout ça au CSS et au JavaScript que nous verrons plus loin dans cet article.

Premièrement, jetons un œil à la façon de structurer notre document et comment créer un formulaire d'inscription. Nous nous intéresserons plus tard à l'esthétique.

Pour commencer, créez un nouveau dossier où vous allez ranger tout votre code. Lancez Sublime Text 2 et créez un nouveau fichier. Enregistrez-le avec l'extension « signup.html », et assurez-vous qu'il se trouve bien dans le dossier que vous avez créé. Maintenant, ajoutons un peu de code.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

Cela peut sembler un peu intimidant comme ça, mais c'est le code de base que l'on retrouve sur tous les sites web. Vous remarquerez que vous avez deux balises <html>qui entourent tout le reste, ainsi qu'une paire de balises <head> et <body>. Mais que font-elles ?

Donc, <head> est l'endroit où vous stockez les choses telles que les métadonnées (elles sont utiles pour vous faire remarquer dans un moteur de recherche), le titre de votre page, ainsi que les fichiers externes CSS et JavaScript.

<body>est l'endroit où va tout le reste, et c'est ici que nous allons nous concentrer. Mais tout d'abord, nous allons voir comment les sites web sont structurés.

Si vous visitez les sites web d'entreprises telles que The Guardian, BCC, CNN et Fox News, vous pourrez remarquer qu'ils partagent certains points. Ils ont des headers (ou en-têtes en français), des pieds de page (footers), des articles, des barres latérales et certains onglets qui contiennent des informations en rapport avec les articles, mais qui n'en sont pas des parties intégrantes.

Comme vous pouvez vous y attendre, il y a de nombreuses balises en HTML qui sont clairement utilisées dans ces cas. Puisqu'elles n'ont été introduites que très récemment aux nouveaux standards du HTML5, elles reçoivent une réponse très enthousiaste de la part des développeurs et des designers. La raison de cet attrait est qu'elles permettent aux développeurs de structurer plus facilement leur code de façon logique, lisible et bien organisée.

On appelle ça le Semantic MarkUp, ou balisage sémantique dans la langue de Molière. Ce qui est incroyable avec ces balises, c'est que leur nom décrit exactement ce qu'elles font. Il y a quelques balises à apprendre, elles parlent d'elles-mêmes.

Entre les balises <section>, vous trouverez le contenu principal de la page. Dites-vous que c'est comme les chapitres d'un livre, qui englobent tout, sans se soucier que ce soit un diagramme, une image ou quelques mots.

VI-A. Aside▲

VI-B. Footer▲

VI-C. Article▲

VI-D. Header▲

VI-E. Nav▲

Maintenant que vous reconnaissez les différents types de balises sémantiques que propose le HTML5, nous allons-en utiliser certaines pour ajouter quelques fonctions nécessaires au site de Charlie and the Roundheads. Quoi de mieux pour commencer que de s'essayer à un formulaire.

Puisque nous n'ajoutons ni un message ni une nouvelle information, nous allons utiliser les balises Section. C'est ici que nous allons écrire le code de nos formulaires. Avant de continuer, il est important de vous dire qu'afin de faire quoi que ce soit de vraiment utile avec les données de nos formulaires, nous allons devoir utiliser la technologie back-end. Malheureusement c'est un peu hors sujet par rapport à notre article. Cependant, si vous vous intéressez aux technologies back-end, jetez un œil au PHP. Il est facile de débuter avec, et il est utilisé par des millions de développeurs partout dans le monde.

Mais tout d'abord, parlons des données que nous allons essayer de collecter. Charlie and the Roundheads voudront rester en contact avec leurs fans par e-mail. Ils voudront aussi aller en tournée, ce serait donc une bonne idée de collecter les codes postaux ou les messages. Pour terminer, les fans voudront sûrement laisser des messages au groupe.

Maintenant que nous avons toutes nos idées, nous pouvons commencer à travailler sur notre premier formulaire, et utiliser des concepts du HTML5 au fur et à mesure de notre progression.

Les formulaires sont constitués de labels, de champs de saisie et de boutons. De plus ils sont entourés de balises <form>.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form action="">
        
        </form>
    </section>
</body>
</html>

La première saisie que nous allons accepter se réfère à une adresse e-mail. Pour cela nous allons ajouter la balise <input> et nous n'allons pas la fermer. Nous allons la faire précéder par « Email: ».

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form action="">
        Email <input type="">
        </form>
    </section>
</body>
</html>

Désormais ce n'est plus un souci. Vous donnez simplement à votre balise <input> le type « email », comme on peut le voir sur l'exemple ci-dessous. Avant le HTML5, vous auriez pu simplement accepter toute donnée saisie, puis vous auriez écrit un peu de code pour vous assurer que les informations que vous avez reçues de la part de l'utilisateur provenaient d'une adresse e-mail authentique et légitime. C'était une perte de temps et plutôt ennuyeux.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form action="">
        Email <input type="email">
        </form>
    </section>
</body>
</html>

Nous voulons aussi rendre ce champ obligatoire, nous allons donc lui donner un autre attribut « required ». Si un utilisateur essaie de soumettre le formulaire sans que le champ email ne soit rempli, il recevra un message d'erreur disant « Entrez une adresse e-mail s'il vous plaît ». Le message apparaîtra également si l'utilisateur insère une adresse e-mail invalide. Pour finir, nous voudrons aussi donner un nom au champ afin de l'identifier, pour cela il va falloir écrire un peu de code back-end. On peut faire ça en ajoutant un attribut « nom » à la valeur « email » comme sur l'image suivante.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form action="">
        Email <input type="email" name="email" required>
        </form>
    </section>
</body>
</html>

Maintenant, avançons un peu et ajoutons les champs pour le code postal (appelé zip code aux États-Unis) et pour le message. Puisque je suis certain que vous l'imaginez, vous ne pouvez pas utiliser le type « email » pour cela. Donc, que savons-nous à propos des codes postaux aux États-Unis ? Et bien, ils sont toujours représentés par une valeur numérique. Pouvez-vous deviner le type pour notre exemple ? Bien joué. Un nombre.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form action="">
        Email <input type="email" name="email" required>
            Zip Code<input type="number" name="number" required>
        </form>
    </section>
</body>
</html>

Pour finir, jetons un œil à la manière dont nous allons accepter les messages. Je suis sûr que vous vous y attendiez Charlie and the Roundheads ont énormément de fans qui souhaiteraient certainement leur envoyer des messages. Ceci rompt avec la tradition et n'utilise pas la balise <input>, mais plutôt quelque chose d'autre.

La balise <textarea>, ou zone de texte, sera utilisée puisque vos données couvriront probablement plusieurs lignes.

Bien qu'elle serait appropriée pour les messages des fans, elle l'est moins pour les informations telles que les adresses e-mail, les mots de passe et les noms.

<textarea> peut prendre en compte une multitude d'attributs. Nous sommes intéressés par quatre d'entre eux. Premièrement, nous voulons lui donner un nom. Nous voulons aussi définir le nombre de lignes et de colonnes, qui vont spécifier la largeur de la zone de texte. Pour finir, nous voulons définir si l'information est requise ou pas.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form action="">
        Email <input type="email" name="email" required>
            Zip Code<input type="number" name="number" required>
            <textarea name="message" rows="4" columns="50">
            </textarea>
            <input type="submit" value="submit">
        </form>
    </section>
</body>
</html>

Avec tout ça en tête, j'ai décidé de lui donner un nom qui veut tout dire et je l'ai fait assez large. Je ne veux pas que ce soit un champ requis, puisque je ne pense pas que tous les fans voudront laisser un message pour le groupe.

Ce que nous avons laissé n'est pas très joli. Mais ne vous en inquiétez pas. Nous le rendrons plus sympa plus tard, mais d'abord nous allons voir comment ajouter des médias à votre site web.

Avant si vous vouliez ajouter de la musique et des vidéos sur une page web, vous deviez utiliser un plug-in lent et encombrant tel que Flash ou Silverlight. HTML5 a tourné la page et les a remplacés par quelque chose d'autre.

Pour la suite de la page web de Charlie and the Roundheads, nous allons créer un endroit afin qu'ils puissent publier et partager de la musique et des vidéos. Cela semble compliqué, mais en réalité c'est très facile.

Mais premièrement nous allons parler de l'appréhension des codecs. Je suis sûr que vous savez qu'il y a énormément de navigateurs web sur le marché actuel. Il y a Internet Explorer de Microsoft, Chrome de Google, Firefox de Mozilla, Safari d'Apple et Opera créé par… hum, Opera.

Chacun d'entre eux lit les musiques et les vidéos de façon un peu différente. Par exemple, alors qu'Internet Explorer est capable de lire des fichiers audio et vidéo encodés avec le codec H.264 MOV, il ne peut pas utiliser le codec Theora qui est utilisé par Opera et Firefox.

Alors que faire avec tout ça ? Eh bien, il n'y a pas de solution miracle. Vous devez juste encoder vos musiques et vidéos dans plusieurs formats.

Bref, mettons-nous au travail. Créez un nouveau fichier utilisant la même structure de base que celle utilisée précédemment. Nous allons aussi ajouter une section avec une balise sémantique.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Média</title>
</head>
<body>
    <section>
        
    </section>

</body>
</html>

Maintenant nous sommes prêts à ajouter de la musique et des vidéos. Mais d'abord, voulez-vous savoir ce que j'aime vraiment avec le HTML ? Il fait ce que son nom dit. Vous ne comprenez pas ce que je veux dire ?

OK, vous voulez essayer de deviner la balise qui permet d'ajouter des vidéos à la page ? Eh oui c'est ça. <video>.

Donc, maintenant nous devons ajouter un fichier vidéo. Tout ce que nous avons à faire, c'est ajouter un conteneur pour lui. Donc d'après ce que nous avons vu plus haut, nous allons ajouter un média H.264 MOV et WebM8. Et en bonus, nous allons avoir un espace réservé au cas où quelqu'un visite la page avec un vieux navigateur web, il verra un message l'informant qu'il devrait le mettre à jour pour quelque chose de plus moderne.

Ajouter une vidéo est facile. Vous ajoutez juste une balise <source> pour chaque vidéo que vous souhaitez ajouter. Les messages avertissant le non-support de la balise <video> n'ont pas besoin d'être dans une balise spécifique, il suffit qu'ils soient à l'intérieur de la balise <video>1On met les messages d'avertissement à l'intérieur de la balise, car quand un navigateur ne connaît pas une balise, il l'interprète comme une simple <div> et donc affiche les éléments intérieurs. Les autres navigateurs comprenant <video> ne vont simplement pas tenir compte de cet élément à l'intérieur..

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Média</title>
</head>
<body>
    <section>
        <video>

        </video>        
    </section>

</body>
</html>

Nous voulons aussi ajouter de la musique. Contrairement aux vidéos, il n'y a que deux codecs qu'il faudra prendre en compte.

Comme vous vous y attendiez, la balise pour un fichier audio est <audio>, et vous pouvez ajouter vos sources de la même façon que pour les vidéos.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Média</title>
</head>
<body>
    <section>
        <video>
            <source src="video.mp4"></source>
            <source src="video.webm"></source>
            Désolés, votre navigateur semble ne pas pouvoir lire les fichiers vidéo HTML5
        </video>
        <audio>
            <source src="chanson.mp3"></source>
            <source src="chanson.ogg"></source>
            Désolés, votre navigateur semble ne pas pouvoir lire les fichiers audio HTML5
        </audio>       
    </section>
</body>
</html>

Maintenant que les médias sont de l'histoire ancienne, nous allons nous occuper de la dernière exigence de Charlie and the Roundheads pour leur site web.

Récapitulons rapidement ce que nous avons appris jusqu'ici. Nous avons découvert les balises sémantiques, les formulaires HTML5 et comment ajouter des médias. Maintenant, essayons quelque chose d'assez simple et créons une ébauche de blog, et après ça nous nous pencherons sur le design du site. Cela ne sera pas long.

Pour commencer, nous allons créer une autre page nommée « Index.html » et ajouter la même structure que celle utilisée précédemment. Nous allons aussi ajouter une balise article, qui est une balise spécifique aux blogs et aux articles d'information. En utilisant la désormais familière balise <p>, nous allons placer quelques paragraphes de « Lorem Ipsum ».

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>        
    </section>
</body>
</html>

Lorem Ipsum est un texte en latin qui ne veut rien dire, mais qui vous permet de remplir quelque chose avec du texte et de le mettre en forme plus tard sans avoir à se soucier de ce qui est écrit.

C'est moche n'est-ce pas ? C'est pour ça que maintenant nous allons lui refaire une beauté.

La typographie peut faire penser à une science arcane utilisant des presses à impression, mais en réalité il s'agit de quelque chose d'entièrement différent. C'est l'art d'arranger et de mettre en forme le texte afin qu'il soit lisible et joli à voir.

Cela semble simple, mais c'est tout le contraire. Un regard attentif à la typographie pourrait faire couler de l'encre, mais nous n'en avons pas le temps. Laissons tout ça et passons directement à la mise en forme de votre texte pour qu'il soit visuellement agréable.

Vous avez certaines polices déjà disponibles sur votre ordinateur et navigateur web. Ce sont celles que vous avez l'habitude de voir lorsque vous utilisez Word. Peut-être que vous ne le savez pas, mais il existe de nombreuses polices sympathiques créées par des designers passionnés de typographie et qui sont disponibles en ligne.

Google Fonts est un bon endroit pour en trouver, et nous allons utiliser une des polices disponibles gratuitement appelée Droid SansDroid Sans.

Dans chacun de nos fichiers HTML, nous allons ajouter la ligne suivante entre nos balises <head>.

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Pendant que nous y sommes, nous allons créer un nouveau fichier appelé style.css et ajouter cette ligne à chacun de nos fichiers HTML.

<link rel="stylesheet" type="text/css" href="style.css">

Vous n'êtes pas sûr de ce qu'est le CSS ? Vous souvenez-vous ce que je vous avais dit que le HTML était la structure d'une page web ? Bien, le CSS rend cette structure plus jolie. C'est l'esthétique de la page.

Cela fonctionne en choisissant des éléments sur la page (tels que Body, P, Section) et en leur ajoutant des règles. Alors, sélectionnons tout le contenu de la balise Section et donnons-lui le style de la police Droid Sans.

section {
    font-family:'Droid Sans', sans-serif;
}

Ainsi tout le texte de nos pages aura le style Droid Sans, et sera visuellement plus joli qu'avec la police par défaut.

Maintenant nous avons un peu de ménage à faire. Nous allons devoir ajouter des liens à chaque page, des arrière-plans et des bordures. Le chapitre suivant s'intéressera plus en détail à l'esthétique.

Attaquons-nous maintenant à quelque chose de plus facile. Nous allons créer une barre de navigation pour que les utilisateurs du site de Charlie and the Roundheads puissent s'y balader. Au-dessus de la balise Section de chaque page, nous allons créer une balise Nav. Et au milieu de cette dernière, nous allons ajouter une liste non ordonnée. Elle est identifiée par le <ul>, et à l'intérieur, nous avons les balises <li> pour chaque lien vers chaque page du site.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="media.html">Média</a></li>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="signup.html">Signup</a></li>

        </ul>
    </nav>
    <section>
        <form action="">
        Email <input type="email" name="email" required>
            Zip Code<input type="number" name="number" required>
            <textarea name="message" rows="4" columns="50">
            </textarea>
            <input type="submit" value="submit">
        </form>       
    </section>
</body>
</html>

Désormais il va falloir rendre tout ça joli pour nos mirettes. Comme c'est le cas actuellement, chacune de nos balises est en cascade vers le bas. Nous allons nous occuper de ça afin qu'elles soient toutes sur une ligne. Modifiez le fichier CSS créé tout à l'heure et ajoutez les lignes suivantes :

li {
    display: inline;
}

Maintenant que cela est réglé, intéressons-nous au blog. Donc nous avons beaucoup de (certes très joli) texte. Cependant, nous voulons qu'il le soit encore plus. Nous voulons lui donner une largeur de 640 pixels, de l'épaisseur, une ombre de bordure ainsi qu'une couleur de fond.

Modifions donc le ficher CSS une nouvelle fois. Nous allons ajouter les lignes suivantes. Elles parlent d'elles-mêmes.

article {
    border-style: solid;
    border-width: medium;
    background-color: #CCFFFF;
    width: 640px;
}

Pour finir, nous voulons appliquer un arrière-plan uniforme sur toute la page. Alors on retourne encore une fois dans notre CSS ! Puisque nous allons ajouter une couleur de fond sur toutes les pages, nous allons créer une règle CSS s'appliquant sur l'élément Body. Nous allons aussi essayer quelque chose d'un peu différent.

Les arrière-plans de couleur unie ne sont pas très jolis. Les arrière-plans texturés le sont. Rendons-nous sur CSSMaticCSSMatic et générons une texture que nous aimons. Essayez toutes les options jusqu'à ce que vous soyez satisfait, puis cliquez sur « Download Noise Texture ».

body {
    background-image:url('texture.png');
}

C'est l'heure de l'appliquer à l'arrière-plan. Dans notre fichier CSS il faut donc ajouter un sélecteur pour Body. Nous allons aussi appliquer le fond via une image. Avant d'aller plus loin, assurez-vous que votre image est dans le même répertoire que vos fichiers HTML.

Une fois modifiée, votre page devrait ressembler à ceci. Comme vous pouvez le penser, il y a encore beaucoup à faire sur cette page. Nous avons juste abordé les bases de la modification et du design avec le CSS et HTML5.

Si vous souhaitez créer un site web avec WordPress, rendez-vous sur mon tutorielmon tutoriel.

Ceci était une brève incursion dans le web design utilisant les technologies HTML5, ainsi que quelques techniques basiques pour le HTML et le CSS. Bien que j'espère vous avoir appris des choses concernant les bases du web design, je serai encore plus heureux si vous continuez plus loin après avoir lu cet article et que vous créerez de magnifiques pages web avec les connaissances qui sont désormais à votre portée.

Ah oui, si vous souhaitez télécharger les fichiers pour le site de Charlie and the Roundheads, cliquez icicliquez ici.

Nous remercions Robert Mening de nous avoir aimablement autorisés à traduire et publier son article dont le texte original peut être trouvé sur websitesetup.orgwebsitesetup.org. Nous remercions aussi Montoya Florent pour sa traduction, Sylvain Pollet-Villard pour sa relecture technique, ainsi que Claude Leloup pour sa relecture orthographique. Les commentaires et les suggestions d'amélioration sont les bienvenus, alors, après votre lecture, n'hésitez pas. 8 commentaires