Apprendre à programmer du HTML CSS à partir de zéro. Bases du HTML pour débutants en langage clair

De l'auteur : Bonjour à tous. Nous voulons tous mieux comprendre la création de sites Web afin d'aborder des projets intéressants et de donner vie à nos idées. Mais que se passe-t-il si vous êtes complètement débutant ? Notre manuel HTML pour les nuls avec des leçons pratiques vous aidera enfin à faire une avancée aussi importante dans la création de sites Web, du niveau zéro à au moins une compréhension de base.

Dans la création de sites Web d’apprentissage, comme dans presque tout autre domaine, la pratique est importante. Vous pouvez relire la recette pour faire du bortsch 1000 fois, mais cela ne vous empêchera pas de le cuisiner. Vous pouvez apprendre les principes de base de la conduite automobile, mais jusqu'à ce que vous preniez le volant, tout reste un mystère. Les connaissances théoriques présentent sans aucun doute certains avantages, mais pas autant que les compétences réelles.

Donc, si nous parlons d’apprendre le HTML, il y a aussi la théorie, puis la pratique. La théorie dans ce cas est simplement une sorte de série d'articles, de leçons sur le thème du langage, des balises de base et de leur application, etc.

La pratique commence pour vous lorsque vous créez vous-même un fichier HTML, y écrivez le code de départ et commencez à étudier de vos propres mains comment tout cela fonctionne. J'ai écrit une balise et vu comment cela fonctionne. J'ai inséré une photo et je l'ai vérifiée. Ajout de quelques attributs, etc. C'est la pratique qui permet de comprendre et de mémoriser rapidement les principales balises. Ensuite, vous les écrivez automatiquement et vous n’avez pas besoin de vous rappeler pendant une demi-heure comment créer une liste.

Eh bien, pour les balises rares, vous devriez toujours utiliser un dictionnaire. Personne, pas un seul super maquettiste ou développeur Web, je pense, ne connaît toutes les balises par cœur. Ce n'est tout simplement pas nécessaire. Si vous utilisez un tag une fois tous les 10 ans, pourquoi le garder en tête ? Je pense que c'est clair.

Mais j’appellerais cette pratique simplement une sorte de jeu bac à sable. Vous écrivez simplement différentes balises, essayez de tout comprendre avec le plus de détails possible, mais pour quoi faire ? Il doit y avoir un but. Généralement, le HTML et le CSS sont étudiés afin de créer ultérieurement vos propres pages Web et des sites Web à part entière.

La meilleure pratique consiste donc à prendre une mise en page de site Web prête à l’emploi et à la mettre en page. La mise en page est précisément le processus de création de pages Web à partir d'un dessin multicouche à l'aide des langages HTML et CSS. Même pendant la mise en page, ils peuvent utiliser des frameworks, du javascript et des bibliothèques d'applications, mais c'est un sujet pour une autre conversation. Tout cela est un ajout. HTML est une technologie de base qui doit être très bien comprise.

Mais je vais vous faire plaisir, c'est basique, c'est le plus simple. Il est très simple d'apprendre comment fonctionnent certaines balises et comment les appliquer. Il n'y a pas d'algorithmes, de fonctions, de méthodes, de classes complexes en HTML, comme c'est le cas dans les langages de programmation. C'est un langage de balisage, étudiez-le un peu et tout sera extrêmement clair.

Comment apprendre correctement une langue et où la pratiquer ?

Encore une fois, je parle d'un apprentissage facile seulement si vous suivez le bon chemin. Autrement dit, regardez des didacticiels vidéo intelligents où les éléments nécessaires sont expliqués étape par étape, du plus simple au plus complexe. Si vous regardez des leçons qui ne sont pas structurées selon ce format, vous ne comprendrez probablement tout simplement pas la majeure partie du contenu.

Heureusement, sur notre site Web, toutes les leçons sont structurées et organisées du simple au complexe. Par conséquent, si vous étudiez le HTML en utilisant nos leçons, vous n'aurez aucun problème à maîtriser la matière.

Je peux vous assurer que le CSS est plus intéressant à apprendre ! Et d’une certaine manière, c’est encore plus facile. Premièrement, CSS possède également un certain nombre de propriétés et de règles dont vous devez vous souvenir. Deuxièmement, ce langage a une syntaxe très simple, donc même un débutant n'aura aucun problème à y écrire du code. Troisièmement, puisque CSS est responsable de l’apparence de la page, vous serez d’abord ravi d’avoir rendu la page rouge et d’avoir donné un cadre à cette image.

En général, apprendre le CSS est simple et intéressant, je recommande donc de ne pas tergiverser et de commencer immédiatement après avoir terminé les bases du HTML.

Votre pratique finale

Enfin, vous avez un examen. Mais ne vous inquiétez pas, ce ne sera pas difficile. De plus, vous n’êtes pas obligé de le faire vous-même, mais uniquement selon les instructions contenues dans les leçons. Cet examen est un cours. Dans ce document, vous atteindrez enfin l'objectif intermédiaire principal : vous concevrez votre premier site Web et comprendrez comment utiliser le HTML et le CSS dans la création de sites Web réels. Même s’il s’agit d’un site simple, les connaissances que vous aurez acquises seront suffisantes pour évoluer davantage et créer des mises en page plus complexes.

HTML est le langage de balisage hypertexte qui a fait d’Internet ce que nous connaissons et aimons. C'est grâce à ce merveilleux outil que les sites sont beaux et modernes, et garantissent également une facilité d'utilisation. HTML organise simplement les éléments d'une page Web dans un format convivial. Son travail est comparable à ce que font des gens comme MS Word ou OpenOffice. Ils transforment une masse de lettres sans relief en un document contenant des paragraphes, du texte en gras, en italique, des tableaux et même des images. Le langage HTML fait à peu près la même chose, à la seule différence que ses documents sont affichés dans le navigateur, et les capacités de cet outil sont bien plus larges que celles d'un éditeur de texte. Les balises sont utilisées pour le balisage - des commandes spéciales qui décrivent la structure d'une page Web. Ils sont placés entre crochets afin que le navigateur puisse les distinguer de la majeure partie du texte. Ensuite, nous aborderons les bases du HTML pour les débutants.

Éditeurs visuels

Les débutants qui viennent de se lancer dans l'apprentissage du HTML commencent souvent leur travail avec des programmes qui vous permettent de créer des sites Web sans aucune connaissance. Dans ceux-ci, vous pouvez simplement disposer les éléments sur l'écran de la manière dont ils seront affichés dans le navigateur. Il semblerait que ce soit la source de la grâce éternelle qui permet de se débarrasser de la majorité des développeurs web. Mais tout n'est pas si simple, car les éditeurs visuels présentent de nombreux défauts qui rendent impossible leur utilisation dans des projets sérieux.

Tous ces programmes créent de nombreuses balises inutiles qui rendent la page finale lourde et sous-optimale. Bien sûr, à l'ère de l'Internet haut débit, cela est moins important qu'avant, mais il existe un certain nombre de raisons pour lesquelles un site Web concis et bien rédigé s'avère plus pratique que son homologue créé dans un éditeur visuel. Une page Web créée dans un tel programme sera mal traitée par les robots de recherche, car chaque kilo-octet de code est important pour eux, et il est peu probable qu'un code volumineux et illogique avec un tas convienne à leur goût. De plus, les éditeurs sont souvent à la traîne, deviennent inutiles, et il est peu pratique de consacrer des ressources à leur développement, car aucun professionnel n'utilise ces produits. Par conséquent, toute personne souhaitant travailler dans le secteur du développement de sites Web doit connaître les bases du HTML.

Mots clés

Comme mentionné ci-dessus, les balises décrivent la structure d'une page Web au navigateur. La plupart d’entre eux ont une balise d’ouverture et de fermeture, mais pas tous. Par exemple, ..., où au lieu de points il y a du contenu. Le premier montre où commence la balise et le second la ferme. Il peut y avoir d’autres éléments de balisage de page à l’intérieur ; ils peuvent être imbriqués les uns dans les autres comme une poupée gigogne. Il est important de fermer les balises à temps afin que la page s'affiche correctement.

Il existe également des balises simples qui n'ont pas besoin d'être fermées. Dans ceux-ci, le contenu est situé à l'intérieur, tout comme il peut être écrit pour la plupart des balises HTML, et définit les propriétés de l'élément. Il est indiqué dans la balise d'ouverture et ressemble à ceci : attribut="...", où au lieu de points se trouve la valeur de l'attribut. Connaître les balises est la première et la plus importante étape pour maîtriser le HTML. Les bases de cet art impliquent également de comprendre la structure d’une page Web.

Structure du document

Chaque document HTML a une extension correspondante, par exemple Index.html. De cette façon, le navigateur peut comprendre à quoi il a affaire et afficher correctement la page. Il est conseillé de stocker tous les fichiers utilisés pour créer un site Web dans un seul répertoire, ce qui vous facilitera grandement la vie à l'avenir. Les bases du langage de balisage hypertexte HTML nécessitent une compréhension claire de la structure du document. Il commence par une balise qui indique au navigateur la version du HTML utilisée dans ce document. Pour le moment, la cinquième version du langage est pertinente, il n'est donc pas nécessaire d'inventer quoi que ce soit, vous pouvez insérer en toute sécurité la balise ci-dessus au début de n'importe quelle page.

Viennent ensuite les principales structures jumelées qui constituent le « squelette » du site. La première balise, dans laquelle toutes les autres sont imbriquées, est .... Tout ce qui se trouve en dehors n'est pas reconnu par le navigateur comme une page Web, il ouvre donc le document et le ferme. Cette balise est obligatoire pour tout document. Il contient également plusieurs autres balises obligatoires, qui seront discutées ci-dessous.

Tête

A l'intérieur de la balise ... se trouvent des informations techniques qui n'apparaîtront pas sur la page, mais qui constituent néanmoins une partie importante du document HTML. Les bases du site sont posées à cet endroit, ici l'encodage est sélectionné et le nom de la page est saisi. Il est contenu à l'intérieur d'une balise obligatoire.... Le titre est affiché en haut du navigateur, où vous pouvez également placer une petite icône qui caractérise le contenu de la page. Il est conseillé d'indiquer immédiatement l'encodage du document pour son affichage correct. Cela peut être fait en utilisant la balise. Les balises méta fournissent des informations sur la structure de la page et sont généralement situées à l’intérieur de l’en-tête.

Lien

Connaître les bases du HTML implique également d'utiliser le style en cascade, ou CSS. Ils définissent les propriétés des éléments qui seront affichés sur la page. Une approche moderne de cette tâche consiste à transférer des caractéristiques telles que la couleur, la hauteur et l'emplacement de l'élément vers un fichier externe pour plus de commodité. Pour inclure un fichier CSS, utilisez la balise. Dans sa forme finale, cela ressemble à ceci : où href indique l'emplacement du fichier et type indique son type.

Corps

C'est dans cette partie du document HTML qu'est créée la partie visible de la page. Tout ce qui est fait à l'intérieur du "corps" sera affiché par le navigateur. Il utilise un grand nombre de balises HTML. Les bases sont le formatage du texte, l'utilisation des liens et les outils de base pour structurer une page Web. Pour commencer à travailler en HTML, il vous suffit de connaître les balises de base et de pouvoir les utiliser. Voici les plus populaires :

mob_info