Tout le monde utilise Internet et tout le monde navigue sur différents sites, et probablement tout le monde aimerait placer son site Web sur Internet, mais ce n'est pas facile à faire, il y a plusieurs raisons à cela. Cependant, pour que vous puissiez héberger un site internet de qualité, il suffit d’en connaître les bases” Programmation web", qui est le langage HTML. Dans cet article, nous examinerons les principaux éléments, balises, attributs et même rédigerons la première page Web.

Langage de balisage hypertexte - "HTML" ( Langage Signalétique Hyper Text) beaucoup ont depuis longtemps cessé de le considérer comme un simple langage de programmation. Depuis lui-même Notion HTML comprend diverses méthodes conception de documents hypertextes, design, éditeurs hypertextes, navigateurs et bien plus encore. Un utilisateur qui maîtrise ce langage acquiert la capacité de faire des choses sérieuses méthodes simples et surtout, rapidement, qu'en monde moderne considéré comme très bon !

En langage HTML, vous pouvez créer vos propres produits multimédias et les diffuser sur CD, et tous ces produits, réalisés sous forme d'ensembles de pages HTML, ne nécessitent pas le développement de logiciels spécialisés, puisque tout le nécessaire pour travailler avec les données ( Navigateurs Web) font désormais partie du logiciel standard de la plupart des ordinateurs personnels.

• Élément ( élément) - conception Langage HTML. Il s'agit d'un objet qui contient des données et permet de les formater d'une manière spécifique. Toute page Web est un ensemble d'éléments. L’une des idées principales de l’hypertexte est la possibilité d’imbriquer des éléments.
• Étiqueter ( étiqueter) - marqueurs de début ou de fin d'un élément. Les balises définissent les limites de l'action des éléments et séparent les éléments les uns des autres. Dans le texte d'une page Web, les balises sont placées entre crochets et la balise de fin est toujours suivie d'une barre oblique.
• Attribut - un paramètre ou une propriété d'un élément. En d'autres termes, il s'agit d'une variable qui a un nom standard et peut se voir attribuer un ensemble spécifique de valeurs : standard ou arbitraires. Les valeurs des attributs de caractère doivent être placées entre guillemets droits, mais certains navigateurs vous permettent d'omettre les guillemets. En effet, le type d'attribut est toujours connu à l'avance. Les attributs sont situés à l'intérieur de la balise de début et sont séparés les uns des autres par des espaces.
• Un lien hypertexte est un morceau de texte qui pointe vers un autre fichier ou objet. Des hyperliens sont nécessaires pour permettre la navigation d'un document à un autre.
• Cadre ( cadre) - ce terme a deux significations. La première est la zone du document avec ses propres barres de défilement. La deuxième valeur est une image dans un complexe ( Animé) fichier graphique (semblable à une image fixe d'un film). Il est également possible à la place du terme « cadre » dans la littérature spécialisée et localisée produits logiciels Vous rencontrerez peut-être le terme « frame » ou « frame ».
• Un fichier HTML ou page HTML est un document créé sous forme d'hypertexte basé sur le langage HTML. Ces fichiers portent les extensions htm ou html.
• Applette ( applet) - un programme transféré sur l'ordinateur du client sous la forme fichier séparé et lancé lors de la visualisation d'une page Web.
• Script ou script ( scénario) est un programme inclus dans une page Web pour étendre ses capacités.
• Extension ( extension) est un élément qui n'est pas inclus dans la spécification du langage, mais est utilisé pour offrir la possibilité de créer un effet de formatage nouveau et intéressant.
• Image de synthèse ( Interface de passerelle commune) est un nom général pour les programmes qui, exécutés sur un serveur, vous permettent d'étendre les capacités des pages Web. Par exemple, sans de tels programmes, il est impossible de créer des pages interactives.
• Le code HTML est un document hypertexte dans sa forme originale, avec tous les éléments et attributs visibles.
• Page Web - un document (fichier) préparé au format hypertexte et publié sur World Toile large.
• Site web ( site) - un ensemble de pages Web situées au même endroit et interconnectées.
• Navigateur ( navigateur) - un programme pour visualiser des pages Web.
() - copier des fichiers du serveur vers l'ordinateur client.
• URL( Localisateur de ressources uniformes) ou un localisateur de ressources uniforme, l'adresse d'un objet sur Internet, c'est-à-dire Une URL typique pour WWW ressemble à : http://www.name.domain/filename.

Tous les éléments du langage peuvent être divisés en trois groupes. Le premier comprend des éléments qui créent la structure d'un document hypertexte. L’utilisation de tels éléments est une formalité nécessaire qui ne peut être négligée. Le deuxième groupe comprend des éléments qui créent des effets de formatage. Leur utilisation est dictée par les exigences spécifiques du document, l'imagination et la compétence du développeur. Le troisième groupe comprend des éléments qui permettent de gérer logiciel installé et exécuté sur l'ordinateur client. Souvent, ces éléments sont créés automatiquement lorsqu'un développeur utilise un éditeur hypertexte ou un programme similaire pour insérer un objet dans un document.

Bien que la spécification HTML soit un standard, de nouveaux éléments sont ajoutés au langage ( extensions). Par conséquent, certaines pages Web sont plus pratiques à visualiser à l’aide de certains navigateurs. Les extensions sont créées uniquement par des sociétés renommées qui développent logiciel pour WWW, et les utilisateurs ordinaires peuvent améliorer leurs pages Web à l'aide de la programmation. Les applets permettent de supprimer les limitations du HTML et de laisser libre cours à l'imagination du développeur.

Versions HTML

La première version de HTML a été développée au début des années 90 par Tim BenersLee pour l'un des navigateurs Mosaic les plus populaires du passé. Mais à cette époque, ni le navigateur ni le HTML lui-même n’avaient encore trouvé une bonne utilisation. HTML+ est apparu en 1993, et cette version est également passée quasiment inaperçue. Mais le langage HTML s'est généralisé grâce à la version 2.0, apparue en juin 1994. Et à partir de ce moment, la popularité du WWW n’a cessé de croître dans le monde entier. Les normes incluses dans la version 2 sont devenues si établies qu'elles sont encore utilisées aujourd'hui.

La version HTML 3.0, apparue environ un an plus tard, a introduit la possibilité de dessiner symboles mathématiques (signes intégraux, infini, fractions, parenthèses, etc.) en utilisant des éléments de langage. Mais le développement de ce projet s'est ralenti et n'a pas été davantage diffusé.

En 1996, la version HTML 3.2 est apparue. C'était une solution brillante ; il suffit de mentionner que les frames ont été introduits dans la spécification du langage, qui sont désormais devenus très populaires parmi les développeurs de sites Web. À ce jour, tous les navigateurs prennent en charge cette version du HTML.

Spécification officielle HTML 4 ( HTML dynamique) a été élaboré en 1997. A cette époque, il était déjà évident que la poursuite du développement l'hypertexte sera implémenté via la programmation Web. Cela s’est avéré bien plus efficace que d’introduire de nouveaux éléments dans le langage.

Structure des pages Web

Vous trouverez ci-dessous le code de la page Web, qui est écrit en HTML, et en utilisant cette page comme exemple, nous analyserons sa structure, mais d'abord, copiez tout le code dans le format normal. bloc-notes de texte et cliquez sur « Enregistrer sous » et enregistrez le fichier avec l'extension html, c'est-à-dire après le nom write.html

Structure d'un document web Aller à la fin du document Rubrique 1 Rubrique 2 Rubrique 3 Rubrique 4 Rubrique 5 Rubrique 6 Le premier lien se trouve ici Doit être situé ici
basique texte Web pages.
Et moi, par exemple, j'insérerai ici
plusieurs transferts,
pour que tu puisses
observer clairement
comment ça marche pour toi
des liens dans le document,
sinon si vous avez une grande résolution,
Vous ne remarquerez tout simplement pas les liens suivis

Notation des documents HTML. L'un des principes du langage est l'imbrication d'éléments à plusieurs niveaux. Cet élément est l'élément le plus externe, puisque la page Web entière doit être située entre ses balises de début et de fin. En théorie, cet élément peut être considéré comme une formalité. Il possède les attributs version, lang et dir, qui sont rarement utilisés dans ce cas, et permet l'imbrication de HEAD, BODY FRAMESET et d'autres éléments qui déterminent la structure globale de la page Web. Naturellement, tous ces documents se terminent par une balise de fin.

< head >

La zone de titre d'une page Web. Autrement dit, sa première partie. Tout comme l'élément précédent, HEAD sert uniquement à former structure générale document. Cet élément peut avoir les attributs lang et dir.

< title >

Un élément pour placer le titre d'une page Web. La ligne de texte située à l'intérieur de cet élément n'apparaît pas dans le document, mais dans la barre de titre de la fenêtre du navigateur. Cet élément influence grandement la promotion dans le moteur de recherche car les moteurs de recherche accordent une attention particulière à Balise TITRE. Mon conseil : ne faites jamais de texte très long dans cette balise ( 65 caractères suffisent).

Cet élément contient des informations de service qui ne sont pas reflétées lors de l'affichage d'une page Web. Il n’y a pas de texte à l’intérieur au sens habituel du terme, donc il n’y a pas de balise de fin. Chaque élément META contient deux attributs principaux, le premier définissant le type de données et le second définissant le contenu.

< body >

Cet élément combine l'hypertexte, qui définit la page Web elle-même. C'est la partie visible du document qui est développée par la page auto et qui est affichée par le navigateur. Par conséquent, la balise de fin de cet élément doit se trouver à la fin de la page Web. À l'intérieur de l'élément BODY, vous pouvez utiliser tous les éléments destinés à la conception de pages Web. Dans la balise de début de l'élément BODY, vous pouvez placer de nombreux attributs qui servent à définir la page entière. Regardons-les dans l'ordre.

L'un des attributs les plus utiles de cette balise, qui a un impact sur le design de la page, est

background="chemin d'accès au fichier d'arrière-plan"

Une conception d'arrière-plan plus simple revient à définir sa couleur

bgcolor="#FFFFFF"

La couleur d'arrière-plan est spécifiée par trois chiffres à deux chiffres nombres hexadécimaux, qui déterminent l'intensité du rouge, du vert et couleurs bleues(rbg).

Puisque vous pouvez modifier l’arrière-plan de la page, vous pouvez également modifier la couleur du texte. A cet effet, il existe l'attribut suivant

texte="#RRGGBB"

Pour définir la couleur du texte des hyperliens, utilisez l'attribut suivant

lien="#RRGGBB"

Vous pouvez également spécifier un changement de couleur pour le dernier lien hypertexte sélectionné par l'utilisateur.

Élément d'en-tête. Il existe six niveaux de titres, désignés comme suit.
Titre
Titre
Titre
Titre
Titre
Titre

Le titre de niveau 1 est le plus grand et le niveau 6 fournit le titre le plus petit. Pour les titres, vous pouvez utiliser un attribut qui spécifie l'alignement à gauche, au centre ou à droite :

align="gauche" align="centre" align="droite"

Pour créer un nouveau paragraphe, utilisez la balise

Et pour aller à nouvelle ligne sans créer de paragraphe - tag
c'est-à-dire que le transfert se produit. Il n'est pas nécessaire de fermer ces balises. Bien sûr, si vous n'utilisez pas dans la balise

L'élément ALIGN, qui peut définir l'alignement des paragraphes :

Gauche

Centré

Droite

Le texte entre ces éléments est aligné en largeur

Ligne horizontale ( La règle horizontale) est un élément très courant. Premièrement, parce que cela rend très simple et pratique la division d’une page en plusieurs parties. Deuxièmement, parce que l’auteur de la page dispose d’une très petite sélection de ces éléments de conception. L'élément n'a pas de balise de fin, mais possède un certain nombre d'attributs pour gauche, centre, droite et justification :

• aligner="gauche"
• aligner="centre"
• aligner="droite"
• aligner="justifier"

Un document HTML peut être très fastidieux et peu pratique pour l'utilisateur qui doit accéder rapidement à la section souhaitée du document. Pour ce faire, vous pouvez utiliser le mécanisme de lien hypertexte. Pour ce faire, placez les marques appropriées aux bons endroits dans le texte.

Texte libre

Dans ce cas, une ligne donnée du document reçoit un nom, et donc un lien hypertexte peut être créé vers une autre partie du document, voire sur un autre document, menant vers cette étiquette.

Pour insérer des images ( Des photos) dans un document HTML, la balise suivante est utilisée ( présenté Description complète attributs de cette balise):

Listes

(liste) ont été développés en HTML, sans doute influencés par le succès des éditeurs de texte. Une liste diffère du texte ordinaire, tout d'abord, en ce que l'utilisateur n'a pas besoin de penser à numéroter ses éléments : HTML se charge de cette tâche. Si la liste est complétée par de nouveaux éléments ou raccourcie, la numérotation se poursuit automatiquement. En cas de non numéroté Listes HTML met des marques devant chaque élément : cercles, rectangles, losanges et autres images. En fin de compte, la liste prend une forme décente. Il existe deux groupes de telles balises : certaines définissent l'apparence générale de la liste ( et vous permettent de spécifier des attributs), tandis que d'autres précisent sa structure interne. Vous pouvez utiliser des attributs standard dans les listes. Il existe plusieurs types de listes.

La plus courante est la liste non numérotée ( liste non ordonnée). Il est présenté ci-dessous :

• Élément de liste 1
• Élément de liste 2
• Élément de liste 3

L'élément ul est une sorte de mise en évidence d'une liste. Il vous permet de séparer une liste d'une autre. L'élément li représente chacun des éléments.

les tables

Ils constituent l’un des moyens les plus nécessaires pour formater les données d’une page Web. La principale commodité est que le navigateur se charge de dessiner l’intégralité du tableau. La taille du cadre peut être automatiquement ajustée à la taille de la fenêtre de visualisation du navigateur et, bien sûr, à la taille des lignes de texte et des images dans les cellules du tableau. En plus de tout le reste, les tableaux permettent de résoudre de nombreux problèmes de conception : aligner des parties d'une page les unes par rapport aux autres, placer des images et du texte les uns à côté des autres, gérer les jeux de couleurs, etc. Lors de la création de tableaux, le principe d'imbrication est appliqué : à l'intérieur de l'élément principal du tableau (TABLE), un certain nombre d'éléments sont créés qui définissent des lignes (TR), et à l'intérieur de ces éléments se trouvent des éléments pour décrire chaque cellule de la ligne (TD, ÈME).

Afin de comprendre la structure d'un tableau existant ou de développer nouveau tableau, il existe une règle selon laquelle la séquence d'éléments décrit le tableau de haut en bas et de droite à gauche. Par exemple, si un élément TABLE est suivi d'un élément TR, cela indique qu'une description commence nouvelle ligne les tables. Tout ce qui se trouve derrière cet élément sera placé sur une seule ligne (de droite à gauche). Cela pourrait être une séquence d'éléments TD ( cellules), une autre table et ainsi de suite. Après l'apparition d'un nouvel élément TR, la description de la ligne suivante commence, et ainsi de suite jusqu'à la fin du tableau (balise).
Le tableau peut être aligné horizontalement à l'aide de l'attribut align :

• align="gauche" - gauche ;
• align="center" - au centre ;
• align="right" - à droite.

La largeur du tableau peut être définie exactement en pixels ou en pourcentage de la largeur de la page dans la fenêtre du navigateur. Par exemple : largeur=400 ou largeur=50 %

Deux attributs sont utilisés pour contrôler l'apparence du cadre. Le fait est que le navigateur crée une image du cadre, simulant sa tridimensionnalité ( convexe) utilisant les différences d'éclairage des visages

Scénarios

Presque tous les webmasters souhaitent que leurs pages sur le site aient look moderne, étaient multifonctionnels, beaux et dynamiques. Par des moyens standards Ceci n'est pas possible en HTML, donc différents outils sont utilisés : applets, objets, feuilles de style en cascade, etc. Mais le type le plus populaire et le plus répandu ( réception) est l'utilisation de scripts.

Un script est un code de programme inclus dans le texte d'une page en tant que texte source et exécuté par le navigateur lorsque la page est affichée. Le script peut être écrit en JavaScript, développé par Netscape, ou en Visual Basic Script ( VBScript), développé par Microsoft.

Cette balise vous permet de séparer le texte du programme de script des autres informations de la page. La balise SCRIPT doit inclure un attribut de langue, qui spécifie la langue et peut prendre les valeurs suivantes :

• javascript - code en JavaScript ;
• vbscript - code en langage VBScript.

L'attribut type peut également indiquer le type de langue, bien que son utilisation ne soit pas obligatoire. Afin de ne pas enfreindre toutes les règles, vous pouvez placer la définition suivante à l'intérieur de l'élément :

type="texte/javascript"

L'une des fonctionnalités les plus intéressantes des scripts est la possibilité de modifier le contenu d'une page à la suite de l'exécution d'un programme. Mais ce n’est qu’une caractéristique et non une règle. En utilisant l'attribut defer (qui n'accepte aucune valeur), vous pouvez « indiquer » au navigateur que de telles modifications ne seront pas apportées. Dans certains cas, cela permet à la page de se charger plus rapidement.

Parmi les attributs standard, vous pouvez utiliser l'attribut charset.

Balise SCRIPT ( ou un certain nombre de ces éléments) peut être situé soit à l’intérieur de l’élément HEAD, soit à l’intérieur de l’élément BODY. Si le script se trouve à l'intérieur de l'élément BODY, il est également possible qu'un navigateur qui ne prend pas en charge l'élément SCRIPT perçoive le code du programme comme du texte brut et l'affiche à l'écran. Pour éviter que cela ne se produise, le code du script est saisi en commentaire :

-
-
-

Tous navigateurs modernes reconnaissez cette technique et ignorez les caractères de commentaire. Si vous devez saisir un commentaire dans le texte du script, alors une notation différente est utilisée pour cela : deux barres obliques // sont saisies au début de la ligne.
Code du programme Le script est exécuté lorsque la page est chargée, c'est-à-dire lorsque son contenu est encore visible à l'écran. Vous trouverez ci-dessous un exemple du scénario le plus simple ( afficher un message dans une fenêtre).

-
-
-
- Juste un script
-
- alert("Vous avez écrit votre premier script !")
-
-
-
-

Ce pages simples, mais il inclut un script sur une seule ligne. En utilisant la méthode d'alerte, un message s'affiche avant le chargement. Et il se bloquera jusqu'à ce que l'utilisateur clique sur le bouton OK, le téléchargement ne continuera pas.
Il est possible que la page soit visualisée dans un navigateur ne prenant pas en charge les scripts ; l'élément NOSCRIPT est prévu à cet effet. Programmes modernes les vues ignorent son contenu. Cet élément peut être utilisé de plusieurs manières. Pour commencer, vous pouvez afficher une annonce à l’intérieur comme celle-ci : « Votre navigateur ne peut pas exécuter le script requis pour afficher cette page Web !"Deuxièmement, à l'intérieur de l'élément, vous pouvez développer une version simplifiée de la page, sans scripts. Troisièmement, vous pouvez créer un lien vers un autre document HTML. L'élément NOSCRIPT doit avoir une balise de fin.

Nous avons donc examiné les bases d'un langage de programmation WEB tel que HTML. Même après avoir lu ce court article, vous avez déjà une idée, et même la possibilité de programmer dans ce langage. Bonne chance!

Bonjour! Dans cet article, nous examinerons les bases du langage Balisage HTML, faisons connaissance avec la structure d'un document HTML et les balises principales. Pour créer un document HTML, vous pouvez utiliser un bloc-notes ordinaire, en enregistrant le fichier avec l'extension .html, mais il est préférable de travailler dans un bloc-notes spécial pour écrire du code Notepad++, vous pouvez le télécharger depuis le site officiel, c'est absolument gratuit .

Après le téléchargement et l'installation, ouvrez le programme et définissez l'encodage sur « UTF-8 (sans fesses) », comme dans la capture d'écran.

Examinons maintenant la structure du document. Voici à quoi ressemble ce qu'on appelle le squelette HTML.

Titre de l'ensemble du document

Faites attention à la hiérarchie des éléments dans la structure du document. L'élément racine est considéré comme , et tous les éléments suivants vont à l'intérieur, et à la toute fin du document indique sa fermeture. Tous les éléments écrits avant ou après la balise ne seront pas traités par le navigateur.

L'élément est le parent des éléments et, et ils sont respectivement enfants, puisqu'ils sont situés à l'intérieur de la balise …. Cette hiérarchie s'étendra à tous les éléments imbriqués du document.

Élément

La balise... contient Informations techniquesà propos de la page web : encodage, titre, description, mots clés, connexion de feuilles de style, de polices, etc. Le contenu de cette section n'est pas affiché dans la fenêtre du navigateur, mais ces données indiquent au navigateur exactement comment afficher la page.

La balise requise incluse dans ... est ... . C'est le titre de l'ensemble du document et il est affiché sur onglet ouvert navigateur et dans les résultats des moteurs de recherche, dans ce que l'on appelle l'extrait, et sa taille ne doit pas dépasser 60 caractères. La balise est très importante pour la promotion SEO d’un site Web.

Titre de l'ensemble du document

La balise est considérée comme un élément de section facultatif, mais elle est presque toujours utilisée. Cette balise est unique et ne nécessite pas de fermeture, comme .... Avec son aide, les métadonnées de page mentionnées ci-dessus, toutes sortes d'éléments de balisage, le blocage de l'indexation, etc.

La description de la page est spécifiée à l'aide de l'attribut name et de sa valeur-description. La description est également importante pour la promotion du site Web moteurs de recherche.

Il y a beaucoup de débats sur la signification des mots-clés ; de nombreux webmasters pensent que les moteurs de recherche n'ont pas prêté attention aux mots-clés depuis longtemps et ne les enregistrent donc pas du tout, tandis que d'autres prétendent le contraire.

L'attribut charset spécifie l'encodage du document à utiliser. ce moment coûte UTF-8.

La balise est une balise unique, utilisée pour définir la relation entre le document actuel et d'autres fichiers ou, plus simplement, pour relier le contenu fichier tiers sur notre page, il peut y avoir plusieurs de ces connexions. Il peut également indiquer la canonicité du document.

Élément

Un élément est la partie principale du document qui est affichée dans la fenêtre du navigateur, c'est-à-dire que le contenu de la balise ... est montré à l'utilisateur lors de l'ouverture du document HTML. Cette section décrit différentes balises et leurs attributs avec différentes significations, qui ne peut tout simplement pas être discuté dans un seul article, je recommande donc le site htmlbook.ru. Sur ce site vous trouverez toutes les balises HTML et CSS avec des exemples d'utilisation et Description détaillée tout le monde. Je recommande également de regarder des mini-cours gratuits sur la création de sites Web. Ces cours sont constitués de leçons vidéo et permettent de se familiariser davantage avec l'écriture de code.

HTML, par définition, ne peut pas être un langage de programmation, comme le croient à tort de nombreuses personnes inexpérimentées en programmation. Le langage HTML est, en principe, une formulation intrinsèquement incorrecte. Il devrait être appelé langage de balisage hypertexte, car HTML signifie cela – HyperText Markup Language. Pour faire simple, HTML est une série de balises. La balise, à son tour, est le mot de contrôle, le principal. Les balises offrent la possibilité de donner à des textes d'apparence standard une apparence formatée, c'est-à-dire de les mettre en évidence en italique, en gras, souligner ou effectuer une autre action. Cependant, faites différentes actions au-dessus des textes, vous ne pouvez utiliser que des programmes de navigation spécialisés, grâce auxquels vous parcourez réellement réseau mondial World Wide Web. Ces programmes affichent un seul texte déjà modifié et masquent les balises HTML utilisées pour la modification. Pour mieux comprendre tout cela et comprendre rapidement de quoi on parle, directement sur cette page, faites un clic droit sur la souris et sélectionnez le point « Source"ou quelque chose de similaire dans son sens. La même page apparaîtra devant vous sous sa vraie forme.

Pour créer du code HTML, vous pouvez utiliser des éditeurs de texte standards, ainsi que des éditeurs visuels, ils sont souvent appelés visuels. La principale différence entre ces types d'éditeurs est que les éditeurs visuels sont spécialement créés pour taper du code HTML, JavaScript, CSS et PHP, ainsi que quelques autres, notamment pour la programmation Web. De plus, ces éditeurs vous donnent la possibilité de voir immédiatement ce que vous avez fait dans le programme et d'identifier (afficher) les erreurs commises dans le code imprimé. Nous vous conseillons de saisir le code directement de vos propres mains, et les éditeurs visuels simplifieront votre travail. Vous pouvez utiliser le navigateur Macromedia Dreamweaver 8. Bien que ce programme ne soit pas l'un des derniers, ses fonctionnalités vous suffiront largement, voire en excès. Il est préférable de procéder comme suit : saisissez le code dans le programme Dreamweaver, puis enregistrez et cliquez sur le bouton « Afficher dans le navigateur », où vous pouvez modifier vous-même l'ensemble des navigateurs. Ensuite, revenez à Dreamweaver et reprenez le processus d'édition. À cet endroit, vous verrez un crack pour Macromedia Dreamweaver 8. Nous vous avons donc parlé des outils. Passons ensuite directement aux balises HTML.

Tout d'abord, faisons connaissance avec la structure de la page en code HTML, ou plutôt avec les éléments qui doivent toujours y être strictement présents.

Balises de page immuables dans le code HTML :

, , , , ,

Veuillez noter que de nombreuses personnes, pour que le programme produise du code HTML sous forme de texte, mettent un espace, c'est-à-dire un espace, après le crochet angulaire ouvrant. Vous ne devriez pas faire cela lorsque vous tapez du code !

Vous avez probablement immédiatement remarqué que toutes les balises sont appariées les unes par rapport aux autres. Une balise s'ouvre et l'autre la ferme. Dans le code HTML, presque toutes les balises sont appariées. La différence entre eux est qu'il y a une barre oblique / devant la balise de fermeture. Ces balises sont également appelées balises conteneur car il est possible d'installer d'autres balises entre les données, comme si elles étaient définies dans un conteneur. Vous voyez peut-être déjà par vous-même comment les autres se situent parmi les balises. Il est permis d'imprimer les noms de balises en majuscules et en minuscules ; il n'y aura aucune différence ici. De telles entrées, comme pour le programme, ne feront aucune différence et sont interprétées de manière identique par celui-ci.

Alors, que sont les balises immuables pour une page en code HTML ? Examinons cette question plus en détail.

Les balises d'ouverture et de fermeture sont transmises aux programmes conçus pour la visualisation. pages hypertextes, et d'autres informations des navigateurs indiquant qu'ils fonctionnent spécifiquement avec des matériaux hypertextes. Chaque document en code HTML commence toujours par et se termine par . Cela signifie qu’entre ces deux balises se trouve tout un code HTML.

Les balises contiennent le titre du matériel hypertexte. Il contient des informations sur la page en code HTML. En principe, ces balises ne sont pas obligatoires, même si elles ne sont pas présentes, les navigateurs interpréteront parfaitement votre matériel html. Cependant, si vous décidez de ne pas écrire de titre dans le document, tapez quand même . Ce déplacement est nécessaire pour la compatibilité dans différentes variantes navigateurs. Absolument tous les caractères situés dans ces balises ne seront en aucun cas déchiffrés par le navigateur. Cela n'inclut pas uniquement les informations contenues dans les balises contenant le nom même du matériel HTML (le nom est inclus dans zone supérieure panneau du navigateur). Cependant, cela peut affecter l'apparence générale du document HTML, la façon dont il existera sur le Web et sera classé selon la hiérarchie dans les moteurs de recherche. Plus de détails sur les balises placées dans le titre du matériel hypertexte seront discutés plus tard.

Tout l’intérêt du matériel est Code HTML placé dans et balises. Cet endroit contient absolument tout ce qui constitue notre document HTML et que nous envisageons en le développant (images graphiques, données texte, boutons et autres éléments). Il s’agit du « corps » principal de la page, ou de la base.

Les autres balises utilisées dans le processus de création de matériel HTML se trouvent à l'intérieur de toutes les balises inchangées requises. Presque toutes les balises HTML contiennent une variété de paramètres et d'attributs, à l'aide desquels vous pourrez recréer les informations exactement sous la forme sous laquelle elles ont été présentées et développées. Par exemple, vous imprimeriez :

où est la balise elle-même, bgcolor est l'attribut de la balise, « #FF0000 » est la signification de cet attribut. Une balise possède un certain nombre d’attributs.

Et ainsi, le ton de toute la page deviendra rouge.

Faites attention ici au fait que les attributs de la balise (tous) et leur signification sont placés dans la balise d'ouverture (elle n'a pas de barre oblique), et jamais dans la balise de fermeture.

Ainsi, vous avez découvert les balises immuables d’une page html. Mais avant de passer à l’exploration des autres, faisons une petite digression.

En utilisant les connaissances acquises, extraites de divers manuels sur les bases du langage HTML pour débutants, nous avons identifié dans des activités pratiques l'erreur principale et très grave commise par de nombreux auteurs de cette littérature. Conçus exclusivement pour les débutants, tous ces éléments aides à l'enseignement et les didacticiels enseignent les bases du HTML de manière séquentielle, en commençant par les balises de titre hypertexte ( ) et en continuant avec les balises de corps de document ( ). Au fond, tout cela est bien entendu très correct. Cependant, comme notre expérience pratique, pour les débutants, cette voie d'apprentissage des bases du HTML n'est pas pratique. En explorant d'innombrables balises de titre qui lui sont totalement floues, un débutant ne pourra pas voir les fruits de sa formation, puisque le navigateur n'interprète pas ces balises, et il ne pourra pas en appliquer beaucoup en travaillant sur sa création. de quelque manière que ce soit (au tout début de la formation bien sûr). De cette façon, tout débutant ne fera que perdre son énergie et son temps, et surtout, son désir de faire quelque chose à l'avenir, et même d'étudier le HTML. De plus, l'idée selon laquelle le travail de développement d'une ressource ne peut être effectué que par des webmasters expérimentés pour beaucoup d'argent s'enracinera fermement dans les têtes inexpérimentées des débutants. Par conséquent, nous vous conseillons de laisser tout incompréhensible pendant un moment et de passer à autre chose. Ensuite, après avoir traité tout ce qui est compréhensible, vous pourrez assimiler le reste.

Salut tout le monde! Aujourd'hui, j'ai passé la matinée à expliquer avec mes doigts comment écrire des liens texte et image à l'aide de stylos. Je pense que des connaissances de base en HTML ne feront de mal à personne, je vais donc décrire brièvement l'essence principale du HTML. Pour que, pour ainsi dire, les optimiseurs de référencement novices et les blogueurs aient une idée de ce langage et de la façon dont les pages sont construites.

Qu’est-ce que le HTML ?

HTML signifie Hypertext Markup Language. C'est un langage informatique utilisé pour créer des documents sur Internet. Ces documents représentent fichiers texte, contenant votre contenu (texte, images, vidéos, etc.) et les balises HTML utilisées pour structurer ce contenu. Les navigateurs lisent la page et les balises HTML et HTML leur indiquent quoi afficher et comment l'afficher. Les balises HTML ne sont pas affichées dans le navigateur. Toutes les balises commencent sur le côté gauche par une icône "" plus petite. Pour construire une base Page HTML tu auras besoin de texte Éditeur de bloc-notes++ (à mon avis le meilleur) ou n'importe quel éditeur de texte simple au choix parmi TextEdit, TextWrangler, SimpleText, TextPad ou même Notepad. Il y a aussi programmes spécialisés, qui facilitent la vie des webmasters, comme Adobe Dreamweaver, mais ce n'est pas nécessaire. N'utilisez pas Microsoft Word ! HTML n'est pas sensible à la casse.

En savoir plus sur les balises HTML

Il existe deux types de balises : conteneur et vide.

• Une balise conteneur "enveloppe" le texte ou l'image et doit être constituée d'une balise d'ouverture et de fermeture, telle que.... La balise de fermeture comporte une barre oblique / indiquant au navigateur que la balise est terminée.
• Une balise vide est autonome, comme
  pour un saut de ligne ou pour une ligne horizontale. Les balises vides ne nécessitent pas de balise de fermeture car elles n'enveloppent rien.

Comment créer une page HTML

Pour commencer, examinons un modèle HTML très simple.

Nom du site ou de la page


Contenu de la page principale

Veuillez noter que lorsque nous ouvrons une balise, nous devons être sûrs de la fermer. Les documents HTML sont divisés en deux parties principales : la tête et le corps. La balise indique au navigateur qu'il s'agit d'un document HTML. La balise comprend des informations sur le document telles que :

• titre de la page - une balise qui apparaît dans les navigateurs dans le titre de l'onglet
• balise d'auteur -
• balise de mot-clé -
• balise de description - etc.

Est-ce là que les fichiers de style (CSS) sont inclus ? mais c'est pour les camarades plus avancés. Enfin, la balise, qui contient tout le contenu de la page du site : textes, images, graphiques, etc.

Création de la première page HTML

Ouvrez un éditeur de texte et collez le code suivant dans un nouveau document :

Ma première page Web


Formation HTML
Bonjour!
Ceci est ma première page Web.
J'apprends les bases du HTML et des balises de titre
LES BASES DU HTML

Ça devrait ressembler à ça:

Enregistrez le fichier sous le nom example.html sur votre bureau. Ouvrez le fichier dans un navigateur Web pour voir comment il convertit les balises. Cela semblera assez ennuyeux à ce stade, mais c'est un début.

Vous pouvez l'embellir un peu :).

Formatage du texte

Nous pouvons ajouter des balises au texte pour lui donner plus de structure. Dans un premier temps, nous mettrons en évidence les titres, les paragraphes, les sauts de ligne et ligne horizontale, Mais commençons par le commencement.

Catégories

Il existe 6 niveaux de titres en HTML, ils déterminent le niveau d'importance. Par exemple, sur un blog, le titre de votre article peut être une balise h1, tandis que les titres des paragraphes de votre article peuvent être des balises h2 ou h3. Par exemple:

Rubrique h1
Cap h2
Titre h3

Articles

Pour des sections individuelles de texte, vous pouvez utiliser

Balise pour ajouter un espace entre les paragraphes.

Paragraphe

Sauts de ligne

Pour ajouter un saut de ligne, utilisez une balise vide
, c'est-à-dire qu'il n'est pas nécessaire de le fermer /. Cela crée une ligne vide et envoie le code suivant à la ligne suivante.

Ligne horizontale

Pour créer une ligne horizontale sur votre page, nous utilisons le .

Comment ajouter une mise en forme de texte à une page ?

Ouvrez à nouveau example.html dans un éditeur de texte et ajoutez un formatage de texte comme ceci :

À la suite de ces mouvements, nous obtenons ce qui suit :

Déjà plus agréable à l'oeil.

Voici les bases absolues du HTML et probablement la partie la plus ennuyeuse ! J'ai l'intention de développer un peu ce sujet dans les prochains articles. ce sujet, parce que n'importe qui Spécialiste du référencement Finalement, vous devez vous familiariser avec les bases du HTML.

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 de éditeur de texte. Les balises sont utilisées pour le balisage - équipes spéciales, décrivant 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, à notre époque Internet haut débit Cela importe moins qu’avant, mais il existe un certain nombre de raisons pour lesquelles un site Web concis et bien rédigé est 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 à placer des caractéristiques telles que la couleur, la hauteur et l'emplacement de l'élément dans 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. Une quantité énorme est utilisée 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 :

• - utilisé pour mettre en évidence une sous-chaîne qui sera soumise à un style particulier décrit en css ;
• - crée un lien sur une page web ; l'adresse de transition est spécifiée par l'attribut href ;
• - un des balises les plus populaires la modernité; Quiconque décide d'apprendre les bases du langage HTML doit y prêter une attention particulière, car il élément de bloc, sur la base duquel est constituée la part du lion des sites modernes (les paramètres des blocs sont définis en CSS et d'autres blocs peuvent être situés à l'intérieur de cette balise) ;

• Sélectionne un paragraphe dans le texte ; le contenu du paragraphe se situe entre les balises d'ouverture et de fermeture ;

• - une liste numérotée dont les éléments sont enfermés dans une balise appariée
• - une liste à puces, dans laquelle, tout comme dans une liste numérotée, les éléments sont désignés par une balise
  • - - les titres du document (le numéro indique le niveau du titre, c'est-à-dire le titre principal, et les options suivantes sont ses sous-titres ; d'ailleurs, les titres de niveau sont presque impossibles à trouver sur Internet), il est également important de se rappeler qu'il ne peut être qu'un seul en-tête sur une page ;
  • - vignette;
  • - italique ;
  • - insérer une image sur un site Web (il s'agit d'une balise unique, elle ne nécessite pas de balise de fermeture, mais elle doit inclure attribut alt, qui spécifie le texte de l'image) ;
  • - insérer une vidéo dans une page Web ;
  • - une balise qui insère un fichier audio dans le document.

  Ce ne sont pas toutes les balises dont vous avez besoin pour créer votre propre page Web, mais elles suffisent à poser les bases du HTML pour les débutants.

  CSS

  Le développement du langage HTML a conduit au fait que chaque balise a acquis de nombreux attributs et exigences pour apparence les pages Web ont considérablement augmenté. Le code est devenu encombrant et peu pratique, il était difficile de le lire, encore moins de l'adapter ou de le modifier. De plus, si votre site comporte dix pages avec de nombreuses rubriques marquées vert, et que vous avez soudain envie de les rendre rouges, vous devrez transpirer en les changeant manuellement. Avec l'avènement des feuilles de style en cascade, ce processus est devenu simple et logique, et le code HTML est devenu beaucoup plus lisible.

  

  Application de CSS

  Pour créer des pages Web, il faut connaître les bases du HTML et du CSS, puisque désormais il n'y a plus rien à faire dans ce domaine sans connaissance des feuilles de style en cascade. Ils définissent les attributs de tout élément qui s'appliquent à l'ensemble du document. De cette façon, vous pouvez définir la couleur de tous les éléments à la fois

  Ou en écrivant une seule règle. Compte tenu des exigences modernes en matière d’apparence des pages Web, l’utilisation de feuilles de style en cascade est obligatoire.

  Afin de connecter un fichier CSS à un document, il existe balise de lien. Le principe de son utilisation a été décrit un peu plus haut, mais ce n'est pas la seule option permettant de combiner tous les styles en un seul endroit. Il existe également une balise située dans « l’en-tête » du document et qui vous permet d’écrire des styles sans utiliser de fichiers CSS. Il n’est pas nécessaire d’utiliser une méthode ou une autre. Ils peuvent être combinés avec succès pour obtenir le meilleur résultat. Pour créer un fichier avec des feuilles de style, vous devez créer un fichier avec une extension .css, par exemple Styles.css.

  Javascript

  Souvent, une personne qui décide de commencer à se rendre compte que les outils proposés par HTML ne suffisent pas pour ses tâches. Les bases vous permettront de créer belle page, mais que faire si vous avez soudainement besoin de le rendre interactif ? À ces fins, il existe une programmation unique qui interagit parfaitement avec HTML. Il s'appelle JavaScript car il est destiné à être jeune frère langage Java populaire. Aujourd'hui, ces langues ont acquis des différences significatives et l'écart entre elles ne fait que se creuser.

  

  JavaScript peut étendre les capacités du HTML en vous permettant de créer et de modifier des balises. De plus, en utilisant ce merveilleux outil, vous pouvez travailler avec Cokie, télécharger des données depuis le serveur sans recharger la page et rendre le site plus interactif que ne le permettent les capacités HTML. Ce langage présente également des limites liées à la sécurité. Si JavaScript n'est pas utilisé côté serveur, il sera exécuté dans des conditions qui limitent ses capacités afin que les attaquants ne puissent pas l'exploiter. code malicieux sur n'importe quel ordinateur.

  Éditeurs

  Les bases du HTML pour un débutant nécessitent la connaissance des programmes les plus pratiques et les plus pratiques pour créer des pages Web. Comme cela a été écrit ci-dessus, éditeurs visuels, tels que Dreamweaver et autres, ne conviennent pas à ces fins. Alors, devriez-vous écrire des balises dans un bloc-notes ordinaire ? Cette option est également discutable, puisqu'un bloc-notes standard ne dispose pas d'outils de mise en page particuliers. Notepad++ peut très bien gérer cette tâche. Le gros plus de ce produit est qu'il possède Open source et est distribué absolument gratuitement. Il propose une coloration syntaxique pratique et une fermeture automatique des balises. Notepad++ propose également une large sélection de langages d'interface et ses capacités sont facilement étendues avec de nombreux modules complémentaires.

  

  Sublime Text 3 est un programme similaire à Notepad++, mais disponible moyennant des frais. C'est elle qui a conquis le cœur de la plupart des développeurs. Sublime Text 3 est parfait pour JavaScript, CSS et HTML. Vous devrez apprendre les bases pour travailler avec vous-même, mais cela en vaut la peine. Il contient des possibilités de réglage vraiment illimitées, ce qui vous permet d'adapter autant que possible le programme à vos besoins.

  Bases HTML et CSS pour les débutants

  Comme vous pouvez le constater, apprendre l’art de créer des pages Web n’est pas aussi difficile qu’il y paraît à première vue. Juste quelques mois cours pratiques vous transformera d’utilisateur timide en développeur novice. L'apprentissage de la mise en page est beaucoup plus facile que la maîtrise d'un langage de programmation ou de Linux. En fait, il n’existe pas tellement de balises HTML, il est important de comprendre l’aspect pratique de leur utilisation.

  

  Il ne sera pas superflu en la matière d'avoir les compétences nécessaires pour travailler dans Adobe Photoshop. Ce programme vous permet de travailler avec des photographies, des images et autres éléments graphiques les pages Web. Pour le moment, c'est Photoshop qui fait le mieux face à de telles tâches, il a peu de concurrents. Pour ceux qui n'aiment pas ce produit Adobe, il existe Lightroom, GIMP, Illustrator et d'autres programmes dotés de fonctions similaires.

  Que donne la connaissance du HTML ?

  Les compétences en création de pages Web sont très pertinentes aujourd’hui, alors qu’Internet se développe à pas de géant. Chaque entreprise, même le plus petit magasin, atelier et les clubs sportifs- tout le monde veut avoir son propre site Internet. Et bien sûr, pour cela, ils auront besoin d’un développeur connaissant CSS et HTML. Les bases sont faciles à maîtriser, après quoi c'est une question de pratique. Étant donné que les technologies de mise en page évoluent constamment, les développeurs front-end seront toujours recherchés. Quiconque décide de se consacrer à cette industrie intéressante ne se retrouvera jamais sans travail.