Guide du débutant en design Web Partie 1

Tout au long de cette série, vous apprendrez à créer un site Web en utilisant les dernières techniques de conception Web (HTML5 et CSS3). Cette série s'adresse à ceux qui n'ont absolument aucune connaissance préalable de la conception Web.

Aussi disponible dans cette série:

Guide du débutant en design Web: Partie 1
Guide d'initiation à la conception Web: partie 2
Guide d'initiation à la conception Web: Partie 3

Navigateur Web moderne

Comme nous allons créer nos pages Web en utilisant les normes les plus récentes (HTML5 et CSS3), nous avons besoin d’un navigateur Web moderne, capable de comprendre les technologies Web les plus récentes..

Les versions du navigateur Internet Explorer de Microsoft sous IE8 ne le couperont tout simplement pas. Si vous utilisez IE7 ou une version antérieure, téléchargez l'un des navigateurs Web ci-dessous..

Si vous utilisez déjà un autre navigateur Web, veuillez vous assurer qu'il correspond à la configuration minimale requise ci-dessous pour optimiser les performances..

Mozilla Firefox 3+
Google Chrome
Apple Safari 4+
Opera 10+
Microsoft Internet Explorer 8

"Pourquoi ai-je besoin d'un certain navigateur?" tu peux demander. Eh bien, HTML5 étant relativement nouveau, les anciens navigateurs ne comprennent pas comment lire le code et le transformer correctement en page Web..

Éditeur de texte

Les fichiers HTML sont simplement des fichiers texte avec une extension .html, vous n'avez donc besoin d'aucun logiciel spécialisé ou coûteux comme Dreamweaver pour les créer. En fait, votre ordinateur est livré avec un logiciel pré-installé sur lequel vous pouvez écrire des pages Web: «Bloc-notes» sous Windows ou «TextEdit» (en «mode texte brut») sur Mac..

Alors que le logiciel pré-installé sur votre ordinateur ça ira, c'est loin d'être le meilleur. Je recommande de télécharger Notepad ++ si vous utilisez Windows ou TextWrangler sur Mac. Les deux programmes sont entièrement gratuits et offrent un certain nombre de fonctionnalités utiles aux développeurs Web, telles que la coloration syntaxique, l'édition de fichiers à onglets et la numérotation de lignes..

Pour les utilisateurs de Mac, je recommande vivement l’achat de TextMate, Coda ou Espresso. Utilisateurs Windows, essayez E-TextEditor.

Introduction au HTML

Chaque site Web sur Internet est écrit en langage HTML (Hyper-Text Markup Language). Le langage HTML a grandi et s'est étendu au fil des ans, à mesure que le Web devenait plus courant et que les sites Web nécessitaient de nouvelles fonctionnalités..

Le langage HTML est mis à jour par le World Wide Web Consortium (W3C) et la dernière spécification en date est le HTML 5, qui a ajouté un certain nombre de nouvelles fonctionnalités au langage et contribue à ouvrir la voie à des pages Web plus interactives et riches en fonctionnalités..

Une simple page HTML ressemble à ceci:

Bonjour le monde!

Bonjour et bienvenue sur mon site internet.

Le code ci-dessus créera le site Web suivant lorsqu’il sera ouvert dans un navigateur Web:

HTML est un langage très simple à apprendre. Vous insérez simplement des "balises" dans votre contenu qui décrivent comment chaque bit de contenu doit être affiché dans un navigateur Web..
Par exemple, vous insérez des balises dans votre page où vous souhaitez que les nouveaux paragraphes de texte commencent, pour que le texte devienne un en-tête du document, pour insérer des images, des liens vers d'autres pages de votre site ou ailleurs sur Internet, etc..

Les balises HTML sont enveloppées à l'intérieur < > équerres. En regardant l'exemple précédent, vous verrez que chaque "balise" est une paire. On a au sommet, et au fond.
informe le navigateur Web que tout ce qui est à l'intérieur de la paire de balises est du code HTML. le tag indique au navigateur que le contenu HTML est terminé. La "barre oblique" dans la dernière balise indique qu'il s'agit de la balise "de fermeture".

REMARQUE: le Pour que le code soit considéré comme "valide", vous devez inclure une ligne en haut de tout HTML5. Cette ligne indique au navigateur Web le type de document du reste de la page, autrement dit la version de HTML dans laquelle le document est marqué afin que le navigateur puisse le restituer correctement..

le … La section qui suit immédiatement est celle où vous placez des informations sur la page Web qui ne seront pas affichées dans la page principale elle-même, mais contiennent des métadonnées sur votre page pour le navigateur.

À l'intérieur de section, nous avons le texte "Hello, World!" enveloppé à l'intérieur … Mots clés.
contient littéralement le titre de la page Web actuelle utilisée par le navigateur Web pour nommer la fenêtre / l'onglet:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_4.png"><br> <p>Suivant le <head> section, nous avons <body>. C'est à cet endroit que le contenu réel de votre page Web est placé. Dans le corps nous avons un <p> balise avec un petit texte de bienvenue à l'intérieur.<br><p> marque un paragraphe sur votre page. Par exemple:</p> <pre> <p>Il était une fois, dans un pays lointain, une princesse qui vivait heureuse pour toujours.</p> <p>La fin.</p></pre> <p>Marks-up deux paragraphes de texte. Si nous devions voir cela dans un navigateur, nous verrions ce qui suit:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_5.png"><br> <p>Vous vous demandez peut-être pourquoi nous avons besoin de ces <p> et </p> balises pour afficher un paragraphe. Eh bien, si nous ne le faisions pas, et écrivions la page Web comme ceci:</p> <pre> Il était une fois, dans un pays lointain, une princesse qui vivait heureuse pour toujours. La fin.</pre> <p>La page ressemblera à ceci dans un navigateur:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_6.png"><br> <p>Comme vous pouvez le constater, le navigateur ignore toutes les mises en forme que nous effectuons dans le fichier. Nous pourrions écrire notre exemple de page Web comme suit et le même message s'affichera dans le navigateur:</p> <pre> <!doctype html><html><head><title>Bonjour le monde!

Bonjour et bienvenue sur mon site internet

Le navigateur ne s'intéresse qu'à ce que les balises HTML lui disent de faire. Il ignorera tous les espaces que vous incluez dans le document (espaces supplémentaires, tabulations, nouvelles lignes, etc.)

Créer une simple page Web

Maintenant que vous comprenez les bases du HTML, faisons notre première page Web! L'image ci-dessus est ce à quoi cette page ressemblera.

Créez un nouveau dossier quelque part sur votre ordinateur et nommez-le 'HTML-from-scratch'. A l'aide de votre éditeur de texte préféré, créez un nouveau fichier vierge et enregistrez-le dans ce dossier sous le nom "my-first-webpage.html"..
Entrez les informations suivantes dans le fichier:

    HTML à partir de zéro

Ce qui précède est une disposition de fichier HTML 5 de base. Nous avons déclaré le type de document sur la première ligne, ouvert notre et balises et définissez "HTML From Scratch" comme titre pour la page. Nous fermons ensuite la tête et ouvrons le corps.

Sur la ligne 7, nous avons inclus un commentaire. Utilisez les commentaires pour laisser des informations supplémentaires dans votre code qui ne seront pas affichées dans votre page Web. Marquez un commentaire en y insérant votre texte Mots clés.

Enfin, nous fermons nos balises body et html ouvertes pour terminer le document..

Entête

Retirer le ligne de votre code source et tapez ce qui suit:

  HTML à partir de zéro

le tag est un nouvel élément introduit en HTML5 qui existe pour baliser et structurer la section "en-tête" d'une page Web. L’en-tête est la partie supérieure d’une page Web, généralement là où le nom du site est.

Avant HTML5, nous utilisions

(ou quelque chose de similaire), mais je ne vais pas entrer dans les détails sur les anciennes spécifications HTML car nous apprenons la dernière norme.

IMPORTANT: ne doit pas être confondu avec . Ce sont deux tags complètement différents.

Dans notre en-tête, nous incluons un

étiquette. H1 est utilisé pour baliser le titre principal de votre page (dans ce cas, le nom de notre site). HTML contient des balises d’en-tête de 1 à 6, avec

étant le titre le plus important et le plus important de la page jusqu'à

.

La navigation

Ensuite, nous allons marquer le menu de navigation pour le site Web. Après la fermeture , tapez ce qui suit:

   Accueil
 Nettuts
 Google

Ce morceau de code peut sembler un peu effrayant, mais décomposons-le. Le bloc ci-dessus marque une zone de navigation (

) qui contient une liste non ordonnée (

).
est un nouvel élément HTML5 permettant de baliser une zone de navigation sur un site Web. Ceci est généralement utilisé pour afficher le menu de navigation principal de votre site Web. Cependant, comme nous ne créons actuellement qu'une seule page Web, nous allons simplement créer un lien vers Nettuts et Google..
- item (item item) est un nouveau point dans la liste.
  
  Enregistrez votre fichier et ouvrez "my-first-webpage.html" dans votre navigateur Web. Vous devriez voir ceci:
  
  Comme vous pouvez le voir, le la balise fonctionne correctement, le <h1> La balise affiche un gros titre en haut de la page et notre liste de navigation par puces s’affiche correctement..</p> <p>Vous remarquerez peut-être que nous avons actuellement un problème avec notre liste de navigation: les éléments ne sont pas des hyperliens et ne peuvent donc pas être cliqués. Pour résoudre ce problème, modifiez les trois éléments de la liste (<li>) à:</p> <pre> <li> Accueil </li> <li> Nettuts </li> <li> Google </li></pre> <p>À l'intérieur de chacun de nos <li> liste des éléments, nous avons transformé le texte en hyper-liens. le <a> La balise crée une ancre - un hyperlien vers une autre page de votre site Web ou un autre emplacement sur Internet..</p> <p>Pour que la balise d'ancrage soit effectivement liée quelque part, nous lui fournissons l'adresse à laquelle se connecter dans un paramètre 'href'. Les paramètres vont à l'intérieur de la balise d'ouverture (<a>…).<br>Sur notre page Web, le lien "Accueil" permet d'accéder à la page actuelle ("my-first-webpage.html"), "Nettuts" à Nettuts (http://net.tutsplus.com) et le lien "Google" à, vous l'avez deviné, Google.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_10.png"><br> <hr> <h2>Contenu principal</h2> <p>Suivant le tag, tapez ce qui suit:</p> <pre> <section> <p>C'est le contenu principal de mon site web.<br /> Voici quelques informations sur moi:</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada est célèbre pour son turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </section></pre> <p>le <section> balise est également nouvelle dans HTML5 (nous utilisions quelque chose comme <div>) et crée littéralement une "section" de contenu sur la page Web. Dans ce cas, nous utilisons <section> marquer la section principale de la page où notre contenu va.</p> <p>À l'intérieur, nous avons deux paragraphes contenant du texte aléatoire. Remarquez dans le premier paragraphe, nous avons un <br /> étiquette. C'est un saut de ligne; en d'autres termes, le texte qui suit s'affichera sur une nouvelle ligne, mais dans le même paragraphe.</p> <p>le <br /> La balise est spéciale car elle n’a pas de balise de fermeture. Au lieu de cela, la barre oblique de fermeture ('/') est incluse à la fin de la balise. En effet, un saut de ligne ne contient aucun contenu, il existe uniquement à des fins esthétiques, sinon nous écririons <br></br> ce qui est un peu inutile.</p> <p>Plusieurs autres tags sont également à fermeture automatique, tels que <img /> et <hr />, que nous examinerons plus tard.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_11.png"><br> <hr> <h2>Images</h2> <p>Dans votre dossier "html-from-scratch", créez un nouveau dossier nommé "images". Enregistrez l'image ci-dessous dans ce dossier (clic droit, enregistrer l'image sous):</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1.jpg"><br> <p>Maintenant, de retour dans le contenu principal du site, avant la fermeture </section> tag, entrez ce qui suit pour insérer l'image sur notre page:</p> <pre> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_2.jpg" alt="Envato Image de l'éditeur" /></pre> <p>le <img /> La balise, comme la balise d'ancrage, se ferme automatiquement et accepte la plupart de son contenu en tant que paramètres de la balise d'ouverture..<br>src = "…" signifie 'source' (le chemin de l'image). L'image pourrait être stockée ailleurs sur Internet ou localement avec la page Web. Ici, nous avons paramétré le tag pour afficher l'image que nous avons enregistrée dans notre répertoire images.</p> <p>alt = "…" contient le 'Texte alternatif' qui sera affiché si le chargement de l'image échoue. Vous décrivez généralement brièvement l'image ici.</p> <p>Jetez un coup d'oeil à la page maintenant. L'image doit afficher:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_12.png"><br> <hr> <h2>La barre latérale</h2> <p>Ensuite, marquons la barre latérale de notre page Web. Entrez ce qui suit <strong>après</strong> la fermeture </section> étiquette:</p> <pre> <aside> <hr /><h2>Barre latérale</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada célèbres ac turpis egestas:</p> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </aside></pre> <p><aside> est une balise HTML5 destinée à baliser une section de votre page Web mise à part du contenu principal, telle qu'une barre latérale, qui contient un contenu d'information moins important que la section principale de la page.</p> <p>Dans notre barre latérale, nous avons un en-tête de troisième niveau (H3) intitulé "Barre latérale", un paragraphe contenant du texte d’emplacement aléatoire, puis une liste non ordonnée de 3 éléments.</p> <p>Jetez un oeil à votre page, et vous devriez voir le contenu ci-dessus directement en dessous de ce que nous avons placé dans le <section> étiquette. Ne vous inquiétez pas, la barre latérale n'est pas encore une barre latérale, c'est ainsi que HTML a été conçu. Plus à ce sujet sous peu.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_13.png"><br> <hr> <h2>Le pied de page</h2> <p>Au bas de la page, sur notre site Web, nous allons inclure une petite notice de copyright. Certains sites Web prennent leur pied de page un peu plus loin et d'autres détails tels qu'un plan du site.</p> <pre> <footer> <p> Copyright © Votre Nom 2010.<br /> Partie d'un tutoriel pour Nettuts+. </p> </footer></pre> <p><footer> est également une nouvelle balise introduite en HTML5. Vous avez probablement compris le problème maintenant, et vous devriez remarquer que nous avons inclus un paragraphe dans le pied de page contenant notre avis de droit d'auteur et un saut de ligne, suivi d'un lien vers Nettuts..</p> <p><strong>REMARQUE:</strong> Vous voyez ce '©' dans notre pied de page? C'est une entité HTML. Cette entité affichera un symbole de droit d'auteur (©) lors du rendu dans le navigateur..<br>En savoir plus sur les entités de caractères HTML sur Wikipedia.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_14.png"><br> <hr> <h2>Dans la partie 2</h2> <p>Ceci conclut la première partie de cette série. En peu de temps, vous avez déjà accompli pas mal de choses! Vous avez appris un certain nombre de balises HTML de base et codé à la main votre première page Web..</p> <p>Dans la prochaine partie, nous allons apprendre à utiliser le code HTML de partenariat en crime, CSS, de HTML pour créer la page Web. <em>Regardez</em> sympa, et transformez la page non stylisée de base ci-dessus en notre produit final:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_7.png"><br> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Code</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/the-beginners-guide-to-web-design-part-2.html">Guide d'initiation à la conception Web partie 2</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-2_24.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/computers/the-beginners-guide-to-using-tex-in-os-x.html">Guide d'initiation à l'utilisation de TeX sous OS X</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/the-beginners-guide-to-using-tex-in-os-x_7.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Chercher..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>