Tutoriel HTML - Apprendre à concevoir un site Web en utilisant HTML ()

Chapitre 1: Guide du débutant à l'apprentissage HTML et CSS

questions préliminaires

Tutoriels pour les éditeurs web visuels gratuits et commerciaux se trouvent dans les pages suivantes:

Dreamweaver CS6 Tutorial - Dreamweaver est un éditeur web commercial bien connu. Si vous utilisez une ancienne version de Dreamweaver, s'il vous plaît voir les versions appropriées du tutoriel plutôt que, comme Dreamweaver CS5.5 Tutorial. Dreamweaver CS5 Tutorial. Dreamweaver CS4 Tutorial ou Dreamweaver CS3 Tutorial.

BlueGriffon Tutorial - BlueGriffon est un éditeur web gratuit, open source.

J'ai des tutoriels pour d'autres éditeurs web moins connus aussi bien. La liste des tutoriels pour ces différents éditeurs se trouvent sur la page Web Editeurs Tutoriels pour WYSIWYG. Cela inclut la Fusion 11 Tutorial NetObjects (un éditeur Web commercial) et le tutoriel Nvu (une ancienne version de Nvu).

Ce guide omet certaines étapes importantes

HTML ne suffit pas

Obtenez un éditeur de texte approprié

La première chose que vous avez besoin est d'obtenir un éditeur de texte approprié. Permettez-moi de commencer par écarter certaines choses, de sorte qu'il n'y ait pas de malentendu sur ce que je veux dire quand je dis « éditeur de texte proprement dit ».

Ne pas utiliser le Bloc-notes

Je sais que quand je l'ai mentionné « éditeur de texte », certaines personnes ont probablement pensé, « pas de problème, mon ordinateur utilise Windows, qui est livré avec le Bloc-notes ».

Ne pas utiliser un traitement de texte

Ne pas utiliser de traitement de texte pour les fichiers HTML de code à la main. traitement de texte insérer le code caché (et invisible) dans vos fichiers qui ne font pas partie du langage HTML.

Par traitement de texte, je veux dire un programme qui vous permet de souligner le texte, texte en caractères gras, en italique mettre du texte, créer des tableaux, etc. Cela inclut Microsoft Word, LibreOffice, OpenOffice.org, et toutes les choses énumérées dans la Free Word Processeurs et page office Suites. Il comprend également Wordpad, qui est fourni avec Windows. Oui, WordPad est un traitement de texte rudimentaire. Ne pas l'utiliser à cette fin.

Rappelez-vous: le type d'éditeurs de texte dont je parle ne vous permettent pas de faire des choses comme des mots soulignés, mettre du texte en gras, etc. Ils se comportent comme le Bloc-notes (sans les problèmes que ce dernier a). Si votre programme a ces types de fonctionnalités, ce n'est pas un éditeur de texte, mais un traitement de texte complet soufflée.

Il existe de nombreux éditeurs de texte libre et commercial contournements

Certains d'entre vous pensent probablement à ce moment que je l'ai Exclue à peu près tout sur votre système informatique. Ne vous inquiétez pas. Les éditeurs de texte sont un sou une douzaine sur Internet. En fait, vous n'avez même pas besoin d'un sou. Il y a zillions des éditeurs de texte libre autour. (Et zillions de ceux commerciaux aussi, d'ailleurs. Les programmeurs semblent aimer la création d'éditeurs de texte.)

Une liste des éditeurs de texte libre se trouve dans les pages suivantes:

Éditeurs HTML gratuits et WYSIWYG éditeurs Web - bien que cette page répertorie les deux des éditeurs de texte ainsi que les éditeurs web WYSIWYG, rappelez-vous que vous êtes à la recherche d'un éditeur de texte, de sorte que vous pouvez ignorer la section éditeurs web WYSIWYG de cette page. (Dans le cas où vous vous demandez, les éditeurs HTML répertoriés sur la page ne sont que des éditeurs de texte. Ils peuvent être utilisés pour taper le code HTML, le code de programmation ou tout autre type de texte brut.)

(En fait, pour les débutants, il est probable que quelqu'un que vous choisissez fonctionnera très bien.)

Si vous avez Dreamweaver.

Si vous avez déjà Dreamweaver. vous n'avez pas d'obtenir un éditeur de texte séparé. Il suffit de passer à l'affichage du code de Dreamweaver. Cela est, cliquez sur « Affichage » dans la barre de menu, et « Code » dans le menu déroulant qui apparaît. Cette Dreamweaver passe de son interface de conception visuelle à son interface éditeur de texte.

Votre première page Web

Maintenant que je vous ai ennuyé aux larmes avec les préliminaires, nous allons sauter dans la partie profonde de la piscine immédiatement.

Avant de discuter du code ci-dessus, s'il vous plaît copiez-le dans votre éditeur de texte, et l'enregistrer comme un fichier nommé « sample.html » sur votre bureau. Je sais qu'il est facile de simplement rejeter mes mots et sauter cette étape, mais le faire permettra d'accélérer votre apprentissage et d'améliorer votre compréhension de ce dont je parle plus tard. (Vous serez également en train de modifier le code en cours de route.) Il y a aussi un secondaire (moins important) bénéficient en ce qu'elle va vous aider à vous familiariser avec votre éditeur de texte.

Pour ceux qui ne savent pas comment faire ce que je viens de dire dans le paragraphe ci-dessus, cliquez une fois dans la case ci-dessus contenant le code. Le contenu de la boîte doit être automatiquement mis en surbrillance. Dans le cas contraire, faites glisser votre souris sur le texte et sélectionnez manuellement tout. Cliquez ensuite sur le bouton droit de la souris. Dans le menu qui apparaît, cliquez sur l'élément « Copier ». Démarrez votre éditeur de texte. Cliquez sur « Modifier » dans la barre de menu suivi de la rubrique « Coller » dans le menu déroulant qui apparaît. Le texte que vous voyez dans la case ci-dessus doit apparaître dans votre éditeur de texte.

Pour enregistrer le fichier, cliquez sur le menu « Fichier », suivi par l'élément « Enregistrer » dans le sous-menu qui apparaît. Lorsque vous êtes invité à un nom de fichier, sélectionnez le dossier approprié pour le fichier à enregistrer (par exemple, votre bureau, de sorte que vous n'oublierez pas où vous mettez) et tapez « sample.html » (sans les guillemets). Notez que je suppose que vous ne l'utilisez Bloc-notes. Si vous utilisez le Bloc-notes, cela ne fonctionnera pas, car le Bloc-notes invisiblement changer votre nom de fichier « sample.html.txt » derrière votre dos. Ne pas utiliser le Bloc-notes.

Maintenant, ouvrez le fichier dans votre navigateur Web. Une façon de le faire est de Doublecliquez fichier sur votre bureau. Le fichier doit apparaître dans votre navigateur Web par défaut. Gardez à la fois le navigateur et l'éditeur de texte ouvert. Autrement dit, ne pas fermer ou quitter les deux programmes.

La logique de HTML

Regardez le code HTML (soit dans votre éditeur de texte ou en faisant défiler dans cet article).

Tous ces mots-angle entre crochets (ou lettres) sont communément appelés « balises HTML ». En HTML, la majorité des balises viennent par paires, avec la version sans fioritures, comme " «Utilisé pour indiquer le début de quelque chose, et la version avec une barre oblique précédente ( « / »), comme » », Utilisé pour marquer la fin de quelque chose.

Chaque balise a une fonction spécifique. Par exemple, le "

" et "

« Paire de balises est utilisé pour indiquer le début et la fin d'un paragraphe. (Pensez à la « p » dans »

"Comme faisant référence au « paragraphe ».)

La structure d'un document HTML

Avant de discuter de la structure d'une page Web, pensez à une lettre commerciale normale dans le monde de brique et de mortier. Ces lettres ont en fait une forme particulière: si le papier que vous utilisez ne dispose pas d'un en-tête, vous devrez normalement taper (ou écrire) votre propre adresse en haut de la page, suivi de l'adresse de la personne que vous » re écrit ci-dessous. Alors seulement, vous commencez votre lettre correcte avec quelque chose comme « Cher. ». Il y a généralement une ligne d'objet suivant celui, et au-dessous qui vient le corps de votre lettre où vous arrivez finalement à dire les choses que vous vouliez dire.

pages Web ont également un format particulier.

La première ligne de la page identifie le type et la version de HTML que votre page Web utilise.

Le reste de la page est jointe entre la " "/" "Paire étiquette. Code enfermé entre ces deux balises forment la page web appropriée.

La première partie de la page Web est ce qu'on appelle la section HEAD. La section commence par " « Et se termine par » . » Il contient des informations conçue pour les navigateurs Web et les moteurs de recherche de code placé dans cette section ne figure pas dans un navigateur Web, il est comme les adresses que vous placez au début d'une lettre d'affaires -.. Ils servent un but, mais ils ne sont pas fait partie du contenu principal. Quoi qu'il en soit, je suis sûr que vous avez remarqué que la section HEAD dans mon exemple de code est vide en ce moment. C'est parce que je ne voulais pas vous embrouiller par encombrer le fichier avec trop de choses. Nous » ll insérer quelque chose dans cette section plus loin dans ce chapitre.

La partie de la page Web qui contient les informations affichées dans un navigateur Web est appelée la section BODY, et il est, comme vous l'avez probablement deviné, compris entre la " " et " "Paire de balises.

Chacune de ces choses est discuté en détail ci-dessous.

Dans l'exemple de code que vous avez utilisé ci-dessus, la première ligne se lit comme suit:

Contrairement aux autres lignes sur votre page web, cette première ligne n'est pas une balise HTML. Comme mentionné ci-dessus, il est une sorte d'identificateur de version qui indique aux navigateurs Web que votre page utilise la version 4.01 des spécifications HTML. Au moment où je vous écris cela, pour autant que je peux dire, les versions les plus utilisées de HTML sur Internet sont HTML 4 (ou 4.01 pour être exact) et XHTML 1.0. Pour toutes fins pratiques, ces deux versions sont en fait essentiellement les mêmes, sauf que XHTML est fussier sur certaines choses, comme nécessitant de petites lettres (minuscules) mots pour vos balises, ce qui nécessite des balises de fermeture pour tout, et quelques autres trucs.

Nous ne traiterons avec HTML 4.01 dans ce tutoriel. Ne vous inquiétez pas. Vous ne perdez pas quoi que ce soit en utilisant HTML 4 par rapport à XHTML. Malgré son nom flashier (avec la lettre supplémentaire), XHTML ne vous donne pas plus de fonctionnalités à utiliser sur votre page Web. Il fait la plupart du temps que le navigateur fussier sur ce qu'il acceptera de votre page Web. Il ajoute également des complications avec la compatibilité multi-navigateurs (principalement avec les anciennes versions d'Internet Explorer) qui rendront votre vie un peu plus malheureux si vous êtes un puriste et insistez sur le strict respect de tous les aspects de XHTML. Puisque vous êtes débutant, il est plus facile de simplement commencer par HTML 4. (Et il n'y a pas vraiment besoin de passer à XHTML soit. HTML 4 est complet en soi.)

Le chef de la section: Présentation de la balise TITLE

Mettez à votre éditeur de texte et ajoutez la ligne suivante dans votre section HEAD.

Ma première page Web

Pour ceux qui ne sais pas ce que je veux dire, déplacez votre curseur jusqu'à la fin de la ligne contenant la marque. Appuyez sur la touche ENTRER pour créer une nouvelle ligne en dessous. Ensuite, tapez les mots que je donnai dans le bloc ci-dessus. En fait, vous n'avez pas vraiment d'utiliser les mots « Ma première page Web ». Utiliser tous les mots que vous voulez que le titre. Mais assurez-vous que ces mots sont enfermés entre l'ouverture tag et la fermeture marque. Et assurez-vous que cette séquence entière se produit avant la fermeture marque. En d'autres termes, quand je dis d'ajouter une certaine ligne dans la section HEAD, cela signifie que vous devez ajouter cette ligne entre l'ouverture tag et la fermeture correspondante marque.

Enregistrez votre page et recharger (refresh) dans votre navigateur Web. Pour ceux qui ne savent pas comment recharger une page dans votre navigateur, découvrez comment. Dans la plupart des navigateurs, appuyant sur Ctrl + R devrait faire l'affaire (qui est, en maintenant la touche Ctrl enfoncée tout en tapant la lettre « r » sur le clavier). De plus, si vous utilisez Windows, un moyen rapide pour enregistrer votre travail dans la plupart (sinon tous) des éditeurs de texte est de frapper Ctrl + S, qui est, maintenez la touche Ctrl enfoncée et tapez sur le clavier « s ». (Je ne sais pas si cela fonctionne à tous les niveaux sur les logiciels Mac aussi.)

Maintenant, regardez la barre de titre de la fenêtre du navigateur. Vous devriez être en mesure de voir le titre que vous définissez. Notez que les mots que vous avez saisi ne figurent pas dans le corps principal de votre page Web lui-même. le définit seulement le titre de votre page Web au profit des navigateurs Web et les moteurs de recherche. Il ne change pas l'apparence de votre page Web. Tout ce que vous voulez afficher sur votre page Web lui-même doit être inséré dans la section BODY.</p> <p>Important: La balise TITLE est nécessaire sur chaque page Web. Ne le laissez pas sortir. Comme je l'ai mentionné plus haut, la page HTML exemple que j'ai donné plus tôt n'a pas été complète, car il manquait la balise TITLE. En fait, il est toujours pas terminé, comme une page minimale, et ne sera pas jusqu'à ce que le prochain chapitre.</p> <p>Encore une fois, s'il vous plaît ne quittez pas votre éditeur de texte ou un navigateur Web. Gardez ouvert tout au long du tutoriel. Vous apprendrez plus rapidement si vous essayez ce que je mentionne.</p> <h2>La section du corps et la balise de paragraphe</h2> <p>Bien que je vais vous présenter la majorité des balises HTML traitant de texte dans le chapitre suivant, nous allons gérer la balise de paragraphe, <p>. ici. Cela me permettra aussi de démontrer une caractéristique très importante de HTML, à savoir, les caractères blancs ne comptent pas dans la partie de la page web entre les balises HTML plupart d'ouverture et de fermeture. (Ne vous inquiétez pas si la dernière partie de cette phrase n'a pas de sens C'est ce que tout cet article est là pour:.. Pour l'expliquer)</p> <p>Avant d'entrer en avance sur nous, laissez-moi d'abord dire que la <p> les signaux de balises au navigateur qu'il est d'afficher ce qui suit comme un seul paragraphe jusqu'à ce qu'il atteigne un </p> marque.</p> <p>Enregistrez la page et le recharger dans votre navigateur, et regardez attentivement la mise en place de votre nouvelle phrase. Notez que même si vous mettez la phrase sur une nouvelle ligne dans votre éditeur de texte, votre navigateur affiche la phrase immédiatement après la précédente, de façon à faire les deux phrases partie du même paragraphe.</p> <p>Encore une fois, enregistrez votre page et le rafraîchir dans le navigateur. Regardez votre paragraphe dans le navigateur à nouveau. Notez que votre paragraphe semble pas différent d'avant. Il est comme si le navigateur Web avala tous vos espaces supplémentaires.</p> <p>Le caractère de l'espace et le caractère de nouvelle ligne (le caractère invisible ou d'une séquence de caractères que les inserts de l'éditeur de texte dans votre page Web lorsque vous appuyez sur la touche ENTRER ou RETOUR) sont appelés caractères « blancs ». Plusieurs caractères blancs sont remplacés par un seul caractère par des espaces tous les navigateurs Web. En HTML, vous ne formatez pas une page Web en ajoutant des espaces ou des lignes. Il ne fonctionnera pas. Comme vous l'avez remarqué en haut, le navigateur ignore simplement les espaces supplémentaires ou des lignes que vous ajoutez. Au lieu de cela, vous formatez une page en HTML en ajoutant différentes balises HTML, ou en utilisant CSS.</p> <p>Comment peut-on ajouter un nouveau paragraphe à une page Web? Je suis sûr à ce stade, la plupart d'entre vous ont déjà (long) deviné la réponse. Mais nous allons l'essayer pour que vous puissiez le voir en action. (Je veux aussi l'utiliser pour démontrer quelque chose d'autre sur le langage HTML. Alors, s'il vous plaît le faire même si il semble vraiment évident.)</p> <p>Déplacez le curseur jusqu'à la fin de la </p> ligne. Hit la touche ENTER. Ensuite, insérez ce qui suit dans la nouvelle ligne que vous avez créé.</p> <p><p>Ceci est un nouveau paragraphe parce que j'utilisé une nouvelle balise de paragraphe pour commencer hors tension.</p></p> <p>Enregistrez la page et le recharger dans votre navigateur. Le plus récent ajout à votre page Web devrait maintenant apparaître comme un nouveau paragraphe dans votre navigateur.</p> <p>Revenez à votre éditeur de texte à nouveau. Notez que, contrairement au paragraphe précédent, je ne l'ai pas mis mon <p> étiquette sur sa propre ligne. Au lieu de cela, je viens juste tapé la phrase appartenant au paragraphe immédiatement après l'étiquette, et pourtant tout a fonctionné la même chose que quand je mets la balise sur une ligne distincte. Si oui ou non il y a un espace entre la balise de paragraphe et mon texte actuel n'a pas d'importance du tout.</p> <p>Je vous recommande de jouer avec ce temps pour se familiariser avec la façon dont les navigateurs web interprètent l'espace blanc et les balises de paragraphe. Cela est, ajouter de nouveaux paragraphes ou phrases nouvelles à vos balises de paragraphe existantes, mettre toutes les phrases et les étiquettes sur une seule ligne, et recharger la page dans votre navigateur pour voir ses effets.</p> <h2>Recommandations (pour protéger votre santé d'esprit)</h2> <p>A partir des expériences ci-dessus, vous avez probablement réalisé que vous pouvez probablement mettre votre page Web entière sur une seule ligne dans votre éditeur de texte, et tout montrerez encore correctement dans votre navigateur Web.</p> <p>Bien que cela soit vrai, il est préférable que vous ne le faites pas. Bien que les navigateurs Web auront aucune difficulté à faire face à ce genre de code, vous, le webmaster en maintenant la page, vous. Avec tout comprimé pour occuper un minimum d'espace, il est très facile pour vous de manquer quelque chose et de créer des erreurs sur votre page Web. L'espace minimum vous permettant d'économiser obtenir de faire ce genre de trucs stupides est tout simplement pas la peine.</p> <h2>Chapitre suivant</h2> <p>Dans le chapitre suivant. nous traiterons plus en détail les caractéristiques HTML qui se rapportent au texte.</p> <p>Il apparaîtra sur votre page:</p> <h4>Articles Liés</h4> <ul> <li> <p><a href="/articles/comment-faire-un-site-web-en-utilisant-html.php">Comment faire un site Web en utilisant HTML • Tutoriel HTML • décloisonnés</a></p> </li> <li> <p><a href="/articles/comment-construire-un-site-web-html-css-et.php">Comment construire un site Web HTML, CSS et éditeurs HTML</a></p> </li> <li> <p><a href="/articles/construire-un-reactif-site-web-pour-mobile-from.php">Construire un réactif, site Web pour mobile From Scratch sémantique HTML - SitePoint</a></p> </li> </ul> </div> <div class="extra"> <div class="info"><a href="/articles/comment-creer-une-mise-en-page-adaptative-avec.php">Précédent</a> ◈ <a href="/articles/recettes-des-visiteurs-vinification-submitted.php">Suivant</a></div> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> <div class="box"> <div class="content"> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>© Copyright 2016 - 2025</p> <script type="text/javascript"> document.write("<a href='//www.liveinternet.ru/click' "+ "target=_blank><img src='//counter.yadro.ru/hit?t50.6;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet' "+ "border='0' width='31' height='31'><\/a>") </script> </div> </footer></div> </body> </html>