Comme je l'ai promis plus tôt, dans ce didacticiel, vous apprendrez à aligner horizontalement le contenu de n'importe quelle balise HTML sur une page sans utiliser l'attribut align obsolète. Comme vous l'avez peut-être deviné, nous utiliserons à nouveau les styles (CSS), ou plutôt notre attribut de style préféré.

Ainsi, pour aligner le contenu d'un élément HTML, il faut attribuer une des valeurs suivantes à l'attribut style :

• aligner le texte : centrer- Alignez chaque ligne au centre d'un élément, tel qu'un paragraphe.
• aligner le texte : à gauche- Chaque ligne est alignée contre le côté gauche de l'élément (c'est la valeur par défaut).
• aligner le texte : à droite- Chaque ligne est pressée contre le côté droit.
• text-align:justifier- Alignement immédiat sur les côtés gauche et droit de l'élément. Expliquera. En règle générale, un élément, tel qu'un paragraphe, a un côté du texte toujours plat et l'autre côté est "déchiré", car les longueurs des lignes sont légèrement différentes. Et lorsque nous utilisons la valeur text-align:justify , chaque ligne est répartie uniformément en largeur. Si nécessaire, le navigateur ajoute des espaces supplémentaires entre les mots, et le premier et le dernier mot de la ligne sont toujours appuyés sur les côtés correspondants, de sorte que le bloc est égal des deux côtés.

Exemple d'alignement de contenu de balise

Titre central.

Paragraphe central.

Résultat dans le navigateur

Titre central.

Le texte du paragraphe est pressé vers la droite.

Paragraphe central.

En général, l'alignement horizontal ne s'applique qu'aux balises de bloc et aux cellules de tableau (nous en reparlerons plus tard). Bien que, d'un autre côté, même si vous essayez, vous ne pourrez pas l'appliquer à intégré (en ligne). Pourquoi? Rappelez-vous que nous avons récemment appris que la largeur d'un élément en ligne est égale à son contenu ? En conséquence, il s'avère que ce contenu même n'a tout simplement nulle part où s'aligner et le navigateur ignorera simplement votre "art". :)

Devoirs.

1. Créez un titre pour l'article, deux de ses sections et une sous-section dans la première section. Et que le titre de l'article soit situé au centre de la page.
2. Définissez la police de toute la page sur Arial et tous les titres sur Times et laissez-les en italique.
3. Définissez la couleur du texte du titre de l'article sur #FF6600, les sections sur #6600FF et laissez la sous-section inchangée.
4. Écrivez un paragraphe sous chaque titre, et le texte de chacun d'eux doit occuper au moins trois lignes lorsqu'il est affiché dans un navigateur.
5. Alignez le deuxième paragraphe au centre, le troisième à droite et le quatrième aux deux.

Nous continuons à étudier HTML. Dans ce didacticiel, nous examinerons les en-têtes de page HTML, ce que sont les en-têtes, comment les utiliser correctement et quand ils peuvent être utilisés. Nous analyserons également les paragraphes afin que vous puissiez déjà remplir votre page de texte, mais surtout, faites-le correctement.

Si vous n'avez pas lu le premier article, vous pouvez le trouver ici :

• Leçon 1. Qu'est-ce que le HTML ?

Théorie et pratique - Paragraphes et en-têtes d'une page HTML

Aujourd'hui, nous allons parler des paragraphes et des titres. Commençons simplement - avec des paragraphes et où ils s'appliquent.

Paragraphes par page

Je vais maintenant donner un exemple de code dans lequel la balise paragraphe sera présente.

Vous vous souvenez déjà de la structure de base de la première leçon. Là, nous avons démantelé les bases et regardé ce qu'est le HTML. Par conséquent, nous nous concentrerons sur ce qui se trouve entre les balises.

.

Lorsque vous écrivez du texte sur une page, que ce soit juste un paragraphe ou une petite ligne explicative sous l'image, vous devez mettre ce texte à l'intérieur de la balise.

Dans les leçons suivantes, vous verrez le processus de mise en forme de ces paragraphes. Maintenant, vous devez comprendre que vous ne pouvez pas mettre de balise sur une page sans balise. Parce qu'à l'avenir, il sera difficile d'appliquer certains styles individuels à cette section particulière du texte.

Essayez d'écrire quelques paragraphes. Mettez quelques paragraphes dans la balise et laissez-en d'autres sans elle. Et vous verrez immédiatement la différence. Parce que si vous écrivez un paragraphe à l'intérieur de cette balise, il aura immédiatement des retraits. Passons maintenant aux en-têtes HTML de la page.

En-têtes HTML par page

Il y a de la sémantique dans un document HTML. Je ne parle pas de la technologie HTML5 et de ses nouvelles balises. Ici, nous n'analyserons que les plus basiques afin que vous puissiez maîtriser rapidement les bases du HTML. La sémantique signifie que les titres, paragraphes, tableaux, etc. ne doivent pas être créés à l'aide de la même balise. Cela peut être fait, mais la technologie HTML est plus diversifiée et il existe des balises appropriées pour différentes situations. Et il suffit de maîtriser les balises de base pour pouvoir travailler librement avec du code HTML.

J'ai écrit cette petite introduction au fait que pour les paragraphes il faut utiliser la balise déjà connue de vous. Mais pour les en-têtes, on utilise des balises qui commencent par la lettre anglaise "H".

Voici la liste complète des en-têtes que vous pouvez utiliser :

Certaines de ces balises sont utilisées beaucoup plus fréquemment. Ce sont des balises telles que h1, h2 ou h3. Si quelqu'un est déjà familiarisé avec le CSS, alors il comprendra que l'en-tête HTML L'en-tête de la page h3 peut être stylisé de telle sorte qu'il ressemble également à h1 ou h2. Mais les significations qu'ils portent, du moins pour l'optimisation SEO, sont radicalement différentes. En règle générale, ces chiffres, à l'intérieur des balises, doivent être compris comme le niveau d'importance de tel ou tel titre HTML. Par conséquent, il est nécessaire de travailler très soigneusement ces éléments et les moteurs de recherche commenceront alors à remarquer vos articles.

Jusqu'à ce que nous arrivions au CSS, vous verrez les styles de titre qui sont définis par défaut dans les navigateurs. Si vous insérez ces balises une par une et écrivez du texte à l'intérieur, vous verrez ce qui suit :

Pour les robots de recherche, l'utilisation des titres sur la page est également importante. Il y a certaines règles que vous pouvez lire dans notre livre − Livre PDF sur la promotion du site.

Après avoir tout étudié, nous entrons immédiatement dans le code et essayons de tout écrire de nos propres mains. C'est le moyen le plus rapide de maîtriser n'importe quel langage de programmation. Mais la technologie HTML est beaucoup plus légère que n'importe quel langage de programmation, donc n'importe qui peut le comprendre. De cette façon, vous vous souviendrez mieux des balises.

Tutoriel vidéo - Titre de la page HTML ? (entraine toi)

Vidéo visuelle sur l'exemple de travail avec ces balises :

Devoirs

D/W :à titre d'exemple, écrivez un court texte qui se composera de 5 à 7 paragraphes et de 2 à 3 titres différents.

Entraînez-vous davantage dans les paragraphes et les titres de page HTML !

www.sitehere.ru

Comment faire un tableau en HTML

Chaque tableau contient des lignes et des colonnes. Ils peuvent à leur tour contenir du texte et une image.

Pour ajouter un tableau à la page, utilisez la balise

. C'est le conteneur principal et principal dans lequel les éléments du tableau (lignes et colonnes) sont placés. Et ce conteneur doit être fermé -.

Les lignes et les colonnes sont définies à l'aide de balises et , tandis qu'au lieu de vous pouvez utiliser en toute sécurité . différence depuis en ce que le navigateur affiche le texte dans la cellule en gras et l'aligne également sur le centre de la cellule - c'est-à-dire peut être utilisé dans les en-têtes de tableau sans formatage supplémentaire. Sinon, il n'y a pas de différence entre eux, vous pouvez en utiliser n'importe lequel.

Lignes du tableau ( ) doit être placée strictement entre

. Et les colonnes du tableau ( ) à leur tour sont placés strictement entre les balises .

Créons un tableau pratique composé d'une ligne et de quatre colonnes. Nous devons marquer le début du tableau (

), début de chaîne ( ), quatre cellules ( ), fin de tableau (

), fin de ligne (

).

Résultat:

Utilisons maintenant la balise pour ne plus y revenir.

Résultat:

J'ai défini la largeur du tableau sur 400 et, comme vous pouvez le voir, les première et troisième cellules sont en gras et alignées au centre. Les autres sont sur le côté gauche. Je vous recommande de toujours passer suffisamment de temps à formater votre code pour ne pas vous tromper. Dans une petite table, cela ne joue peut-être pas un grand rôle, mais dans une grande...

Parlons un peu plus de la largeur puisque je l'ai mentionné. La largeur du tableau est définie par l'attribut width, la hauteur - hauteur. Vous pouvez ainsi modifier non seulement la largeur et la hauteur du tableau, mais également la taille des cellules (elles doivent toutes tenir dans le tableau, sinon le navigateur ne comprendra pas ce que vous en attendez).

Ces valeurs (largeur et hauteur) sont spécifiées en pixels, pourcentage. Vous pouvez le laisser comme ça, n'écrivez rien, le navigateur pensera que vous avez été trop paresseux pour écrire « px » et considérera le nombre comme des pixels.

Eh bien, si vous souhaitez aligner le contenu d'une ou plusieurs cellules du tableau, utilisez l'attribut align avec les valeurs left, center, right. Il s'agit d'un alignement horizontal, mais il existe également un alignement vertical et il a son propre attribut séparé - valign, qui peut prendre les valeurs suivantes : baseline (alignement vertical exactement le long de la ligne de base), bottom (le long du bord inférieur), middle (cellule les valeurs seront alignées verticalement au milieu), en haut (le long du bord supérieur). Par défaut, les navigateurs alignent les cellules au centre (milieu).

Augmenter le cadre (bordures) du tableau et changer sa couleur

Vous l'avez peut-être remarqué, je vous ai déjà montré comment travailler avec le cadre et la largeur du tableau. En général, par défaut, le tableau est toujours affiché dans le navigateur sans cadre, et ce n'est pas toujours pratique. Voilà pourquoi:

D'accord, en quelque sorte pas beaucoup. Mais ce n'est pas un problème pour ceux qui connaissent déjà l'attribut de bordure HTML, que j'ai utilisé dans les exemples au début de l'article.

Ajouter juste 1 attribut et ça va mieux :

C'est comme Excel ! Imaginez qu'il n'y aurait pas de division des cellules par des lignes (grille) ? Eh bien, l'horreur. Mais que se passe-t-il si vous définissez la frontière sur 10.

Comme vous pouvez le voir, la bordure n'affecte que la bordure extérieure et le cadre du tableau, modifiant la largeur du cadre extérieur, tout en laissant les bordures entre les cellules du tableau identiques.

Changeons la couleur de cette bordure, car il existe également un attribut pour cela - bordercolor. Définissez sa valeur sur "d3d3d3". Résultat:

Comment indenter un tableau

Des retraits dans le tableau sont également nécessaires pour augmenter la "lisibilité", ainsi que les bordures de cellule. Pour créer un rembourrage, nous avons besoin de l'attribut "cellspacing". Je vais continuer à travailler avec notre table 4x4, en lui appliquant cet attribut. Je mettrai à jour le code pour vous (je n'inclus qu'une seule ligne pour ne pas encombrer le message):

Résultat:

C'étaient les renfoncements à l'extérieur des cellules. Mais il existe un attribut similaire pour définir le rembourrage à l'intérieur des cellules - cellpadding, maintenant je vais également le rendre égal à 10 et vous verrez comment la distance entre le contenu de la cellule et ses bordures a augmenté (j'ai dû réduire le nombre de cellules donc que la table ne grossisse pas excessivement). Le code:

Résultat:

Maintenant, nous allons supprimer "cellspacing" et ne laisser que "cellpadding". Résultat:

Nous avons donc compris comment créer des retraits dans le tableau et les gérer. Amende! Si vous êtes intéressé par la façon de faire un saut de ligne, alors ceci est écrit ici.

Comment fusionner correctement des cellules dans un tableau

Il existe également des attributs spéciaux pour fusionner des cellules dans votre tableau. Ce sont "colspan" et "rowspan". Le premier (colspan) combine les cellules par colonnes (horizontalement), le second (rowspan) - par lignes ou verticalement. Joignons quelque chose dans notre table.

Ici attentivement! Lors de la fusion de cellules, vous devez réduire leur nombre du nombre (moins un) que vous spécifiez dans les paramètres d'attribut. Si vous créez un tableau en HTML, fusionnez des cellules sans supprimer celles qui ne sont pas nécessaires, le site ira. Nous en unissons deux - nous en supprimons un. Nous en unissons trois - nous en supprimons deux. Etc.

Lors de la fusion de cellules dans des colonnes ou des colonnes, une cellule doit être supprimée ! Et faites cela autant de fois que le nombre de cellules que vous fusionnez. Maintenant, je vais vous montrer un exemple.

Lors de la fusion de cellules dans des colonnes ou des colonnes, une cellule doit être supprimée ! Et faites cela autant de fois que le nombre de cellules que vous fusionnez.

Maintenant, je vais vous montrer un exemple. Voici notre tableau actuel :

Fusionnons les cellules avec les numéros "1 et 2", "5 et 9", "4, 8, 12", "6 et 7". Regardez comme c'était cool, je ne m'y attendais pas moi-même!

Le principe de l'association est le suivant.

Lors de la fusion horizontale des cellules numéro 1 et 2, vous devez écrire « colspan = » 2 ″ dans la première, placer le contenu de la seconde dans la première (nous fusionnons) et supprimer la deuxième cellule (ou la masquer du HTML comme Je l'ai fait - je le montrerai plus tard.)

Lors de la fusion verticale des cellules numéro 4, 8, 12, vous devez écrire "rowspan =" 2 ″ "dans la première cellule (numéro 4) et supprimer le contenu du reste après l'avoir placé dans la cellule fusionnée.

Voici le code que j'ai trouvé. J'ai masqué les cellules pour plus de clarté (pour vous faciliter la compréhension), mais vous pouvez également les supprimer.

J'espère que j'ai expliqué clairement et donné un bon exemple.

Comment créer un en-tête pour un tableau

Pour donner un titre à un tableau - utilisez des balises après le début du tableau (

), mais avant le début de la balise . Voici ce qui se passe :

Eh bien, un petit hack HTML pour ceux qui ont besoin de placer l'en-tête du tableau sous le tableau lui-même. Utilisez l'attribut align avec la valeur bottom comme ceci :

Et puis l'en-tête du tableau se déplacera sous le tableau.

Donc, nous avons presque tout couvert sauf... l'arrière-plan !

Comment faire un beau fond pour une cellule ou un tableau entier

HTML vous permet de définir la couleur non seulement pour l'ensemble de l'arrière-plan du tableau, mais également pour chaque cellule individuelle (si nécessaire). Définit la couleur d'arrière-plan d'un tableau ou d'une cellule sur l'attribut "bgcolor".

Permettez-moi d'abord de définir l'arrière-plan de l'ensemble du tableau. Ce sera la couleur "" vert clair "" (en général, vous pouvez la définir comme ceci - "" # 90EE90 ""). Voici comment mon tableau commence maintenant :

Résultat:

Wow, la couleur de fond des cellules est devenue très "" vert clair "". Maintenant, je colorie l'une des cellules du tableau en blanc, en lui donnant le même attribut, mais avec une couleur différente :

Tada ! Résultat:

Je pense que c'est cool ! Si je participais à un concours de feuilles de calcul créatives (ou à des enfants d'âge préscolaire enseignant HTML), je gagnerais certainement.

Je voulais aussi écrire comment insérer une image comme fond de tableau en HTML, mais je l'ai déjà mentionné dans mon autre article sur le lien ci-dessus.

Bonne chance et succès dans l'apprentissage du HTML.

blogwork.ru

La mise en page et l'alignement au centre des pages du site est une question créative et pose souvent des difficultés aux débutants. Alors voyons comment faire. Supposons que nous voulions créer une page avec la structure suivante :

Notre page se compose de quatre blocs : header (header), menu (menu), content (content) et le bas du site (footer). Pour aligner au centre de la page, nous allons placer ces quatre blocs dans un seul bloc principal (main) : Sur l'exemple de cette structure, nous allons envisager plusieurs options.

Aménagement et centrage du site caoutchouc

Lors de l'aménagement d'un site en caoutchouc, l'unité de mesure principale utilisée est le %, car le site doit s'étendre en largeur et occuper tout l'espace libre.

Par conséquent, la largeur des blocs "en-tête" et "pied de page" sera de 100 % de la largeur de l'écran. La largeur du bloc "menu" doit être de 30 % et le bloc "contenu" doit être situé à côté du bloc "menu", c'est-à-dire il doit avoir une marge gauche (margin-left) d'une largeur égale à la largeur du bloc "menu", c'est-à-dire trente%.

Pour que les blocs "menu" et "contenu" soient situés côte à côte, faisons flotter le bloc "menu" et pressons-le vers le bord gauche. Nous définirons également les couleurs de fond de nos blocs. Maintenant, écrivons tout cela dans une feuille de style (dans la page style.css)

La hauteur des blocs a été définie de manière conditionnelle afin que le résultat soit visible. Regardez notre page dans un navigateur :

Si vous redimensionnez la fenêtre du navigateur, la largeur de tous les blocs changera. Ce n'est pas toujours pratique, car. lors de l'étirement du bloc de menu, un espace vide apparaît. Par conséquent, le plus souvent, la largeur du bloc "menu" est fixée, faisons-le. Pour cela, remplaçons les valeurs des propriétés correspondantes dans la feuille de style : Maintenant notre page s'étire plus naturellement. Avec une mise en page fluide, les pages occupent toute la largeur de l'écran, le centrage des pages n'est donc pas nécessaire.

Mais si vous le souhaitez, vous pouvez vous assurer que votre page a des retraits égaux à gauche et à droite de l'écran. Pour ce faire, nous devons ajouter un style au bloc « principal », qui est le conteneur de tous les autres blocs : Maintenant, notre page ressemble à ceci :

Aménagement et centrage du site, largeur fixe

Dans ce cas, nous devrons définir des tailles fixes pour nos blocs : Notre page est maintenant épinglée sur le bord gauche de l'écran.

Dans ce cas, l'alignement au centre des pages du site peut se faire comme suit. Rappelez-vous que notre page a une balise "body", qui peut également être dotée d'une largeur et d'un rembourrage.

Faisons ceci : définissez la largeur de la balise "body" à 800 pixels (comme le bloc "main") et l'indentation à gauche (padding-left) à 50 %. Ensuite, tout le contenu du bloc "principal" sera affiché sur le côté droit de l'écran (c'est-à-dire du milieu vers la droite) :

Pour que notre bloc "main" soit situé au milieu de l'écran, son milieu doit correspondre au milieu de la balise "body". Ceux. nous devons décaler le bloc "principal" vers la gauche de la moitié de sa taille. La largeur du bloc "principal" est de 800 pixels, vous devez donc lui définir la propriété "margin-left: -400px". Oui, cette propriété peut prendre des valeurs négatives, auquel cas la marge de gauche est réduite (c'est-à-dire décalée vers la gauche). Et c'est exactement ce dont nous avons besoin.

Maintenant, la feuille de style ressemble à ceci : Et notre page dans le navigateur est située exactement au milieu :

Nous avons envisagé deux options pour centrer les pages du site, en fait, elles ne sont pas un dogme. Vous pouvez expérimenter et créer votre propre version, il suffit de vérifier son fonctionnement dans différents navigateurs. Malheureusement, ce qui s'affiche bien dans FireFox ou Opera peut être complètement incompréhensible dans IE et vice versa. Et cela doit être rappelé.

Bonne chance dans vos activités créatives !

www.site-do.ru

Comment centrer le texte aligné en html?

En HTML, il existe deux options qui ne nécessitent pas l'utilisation de CSS.

1. 1.Étiqueter
   Une balise très simple d'utilisation qui centre tous les éléments inline qui s'y trouvent, à savoir :
   • texte,
   • Des photos,
   • liens,
   • ainsi que des balises , , , et quelques autres.
     2. Utilisation de l'attribut d'alignement HTML avec le centre de valeur.
     Nous devons ajouter cet attribut à l'intérieur de la balise block, qui contient le texte que nous devons centrer.
     C'est peut-être une balise

     ,

     ,

     …

     et quelques autres.

     L'attribut align a également d'autres valeurs :

     • align='"gauche'- alignement du texte à gauche
     • align='droit'- alignement à droite
     • align='justifier'- justifier le texte

     Comment centrer du texte avec CSS ?

     Personnellement, je pense que l'utilisation de balises HTML et d'attributs pour centrer le texte n'est pas la meilleure solution. Si vous n'avez besoin d'aligner le texte qu'à un ou deux endroits et que vous n'avez pas envie de jouer avec CSS, vous pouvez vous en sortir avec la puissance du HTML, mais pour centrer l'alignement à plusieurs endroits sur la page, il est préférable d'utiliser CSS.

     Pour cela, nous avons une propriété spéciale aligner le texte, qui a aussi plusieurs significations :

     • aligner le texte : centrer ;- pour l'alignement au centre
     • aligner le texte : à gauche ;- sur le côté gauche
     • aligner le texte : à droite ;- sur le côté droit
     • text-align : justifier ;- par la largeur du bloc ou de la page.

     Afin de l'appliquer à notre texte, vous pouvez utiliser l'une des options proposées :

     1. 1. Affectez la balise de bloc (titre, formulaire, paragraphe ou autre élément de bloc) à la classe CSS :

        Et puis dans le fichier CSS de votre site on écrit :

        À la place de bloc-texte peut être n'importe quel autre nom de classe.

        Si vous avez besoin de centrer l'alignement du texte pour tous les paragraphes ou titres du site à la fois, il n'est pas nécessaire d'écrire cette propriété CSS pour tout le monde. Il suffit de fixer ou de définir la classe ou l'identifiant du bloc à l'intérieur duquel se trouvent ces paragraphes ou en-têtes, puis d'ajouter l'entrée suivante dans le fichier CSS :

        Dans ce cas, l'alignement du texte au centre sera appliqué à toutes les balises

        Qui sont à l'intérieur de la balise avec la classe block :

        Pour aligner les titres à l'intérieur d'un bloc avec la classe de bloc, la notation sera légèrement différente :

     2. 2. Vous pouvez ajouter les propriétés CSS nécessaires dans la balise elle-même à l'aide de l'attribut style :

        Cette méthode, ainsi que l'attribut aligner ou balise centre, n'est utile que dans les cas où l'alignement doit être effectué à un ou plusieurs endroits. Pour l'alignement de texte en bloc, je ne recommande pas de l'utiliser.

     C'est tout pour moi ! Merci d'avoir visité mon site! Je serai très heureux de voir vos commentaires! Bonne chance et prospérité!

     Cordialement, Yulia Gusar

     impuls-web.ru

     Attributs en HTML

     Qu'est-ce qu'un attribut ? Un attribut est un paramètre qui donne aux balises certaines informations. Il peut y avoir beaucoup de ces paramètres. Par exemple, à l'aide d'attributs, nous pouvons aligner le texte d'un paragraphe en largeur, définir le style et la taille de la police, définir les retraits nécessaires, etc. Les attributs sont écrits à l'intérieur des balises, suivis d'un signe égal, puis les valeurs des attributs sont spécifiées entre guillemets. Les attributs sont séparés les uns des autres par un point-virgule.

     Exemples d'attributs

     Envisagez de travailler avec des attributs sur des exemples. L'exemple le plus simple - prenez la balise de paragraphe

     Avec l'attribut "aligner". Écrivons:

     Exemple de paragraphe aligné à gauche

     L'attribut "align" indique au navigateur d'aligner le paragraphe à gauche de l'écran.

     Les attributs peuvent également être appliqués à la balise de paragraphe :

     • align="center" - alignement au centre de l'écran ;
     • align="right" - alignement à droite ;
     • align="justify" - aligne le texte sur la largeur de l'écran.

     Compliquons maintenant la tâche - nous allons créer une page HTML en utilisant plusieurs attributs différents. Un exemple d'une telle page aurait le code suivant :

     Attributs en HTML

     
     
     

     L'attribut de couleur "bgcolor" nous permet de définir la couleur de fond de la page. Les attributs "center" et "justify" alignent le texte sur eux-mêmes, respectivement, au centre et en largeur.

     Titres en HTML

     avec indice. Il n'y a que six indices de ce type - de 1 à 6, ils indiquent la taille de l'en-tête (

     est le plus grand titre,

     - le plus petit). Par exemple, créons une page Web comportant plusieurs en-têtes. Le code de cette page ressemblera à :

     Attributs en HTML

     Qu'est-ce qu'un attribut ? Un attribut est un paramètre qui donne aux balises certaines informations. Ces paramètres peuvent être illimités.

     Titres en HTML

     Afin de créer un titre sur la page, une balise spéciale est utilisée. avec indice. Il n'y a que six indices de ce type - de 1 à 6, ils indiquent la taille de l'en-tête...

     
     
     

     Dans cet exemple, nous avons deux en-têtes - l'en-tête de premier niveau n'a aucun attribut ici, l'en-tête de deuxième niveau a un attribut d'alignement central. Après les titres viennent les paragraphes qui ont aussi leurs propres attributs.

     C'est ainsi qu'ils fonctionnent avec les attributs et les en-têtes en HTML. Il n'y a rien de compliqué ici. Assurez-vous de pratiquer sur vos propres exemples afin de consolider les informations reçues dans cette leçon.

     siteblogger.ru

     Bienvenue à tous. Avez-vous remarqué que le titre du blog, le titre de la publication et les titres des gadgets ne sont pas centrés dans la conception.

     Peut-être que quelqu'un est satisfait de cette option. Mais si vous souhaitez les aligner, alors cet article est pour vous.Habituellement, nous créons notre propre en-tête de blog unique à l'aide de Photoshop ou d'un autre éditeur. Ici, bien sûr, le nom est situé exactement là où nous voulons qu'il soit. Mais tout le monde ne sait pas comment faire au départ et se contente uniquement des paramètres qui nous sont proposés. En conséquence, le titre du blog est décalé vers la gauche.

     Voyons comment résoudre ce problème avec CSS dans le modèle de blog. Plaçons tous les titres strictement au centre et ajoutons-leur un peu d'unicité.

     Comme d'habitude, allez dans l'onglet modèle et assurez-vous de faire une copie de sauvegarde. En cas de problème, vous pouvez télécharger le modèle à partir de votre ordinateur. Et ce serait mieux si, pour l'instant, vous faisiez toutes les expériences sur les tests de blog. Créez un autre blog pour cela basé sur le même modèle.

     Comment centrer le titre du blog.
     
     Onglet Modèle - Modifier HTML. Tout en haut du modèle, cliquez sur le marqueur noir (flèche) à gauche.

     Et ici tous les codes CSS ont été ouverts devant nous. Nous descendons lentement et trouvons la ligne .En-tête h1 (
     
     

     Immédiatement après les parenthèses, écrivez la valeur

     text-align:center;

     Ainsi, le nom du blog est situé strictement au centre. Cliquez sur Afficher le modèle pour voir le résultat. Tout a fonctionné. Cliquez sur enregistrer.

     Mais pour pimenter un peu les choses, examinons quelques styles CSS supplémentaires qui peuvent être ajoutés à ces crochets. Que vous en ayez besoin ou non dépend de vous. Il y a beaucoup d'options ici. Modifier les valeurs de couleur.

     arrière-plan :#e9967a ; - couleur d'arrière-plan.
     ou background:url (http://www.fonstola.ru/large/201310/134392.jpg); image au lieu de fond.
     hauteur : 50px ; — valeur de la largeur du cartouche.
     texte-ombre : 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); - définir l'ombre du texte
     rayon de bordure : 15 px ; - coins arrondis.
     -moz-box-shadow:0 0 30px #a28b53 encart ;
     box-shadow:0 0 30px #a28b53 encart ;
     -webkit-box-shadow:0 0 30px #a28b53 encart ;

     L'ombre intérieure du champ de titre est surlignée en bleu. Fais attention. Si vous changez de couleur, alors seulement cela #e9967a(dièse et numéro à six chiffres). Deux-points, parenthèses, tiret, point-virgule - tout est très important dans le code.

     Comment aligner au centre le titre du gadget dans la barre latérale.

     Nous descendons également en bas et trouvons cette ligne
     
     .barre latérale .widget h2 (
     
     

     Entre parenthèses, nous écrivons text-align: center; Cependant, dans ce cas, il est nécessaire de définir la largeur, la taille de la police, les retraits. Ici, j'ai utilisé une image au lieu d'un arrière-plan et défini une ombre pour le texte et le bloc.

     arrière-plan:url(http://www.fonstola.ru/large/201310/134392.jpg); arrière-plan ou image
     hauteur : 20px ;
     largeur : 200px
     rayon de bordure : 13 px ;
     marge-gauche : 0px ;
     padding-top : 0px ; /distance du bord du cadre/
     taille de police : 16 px ; /taille de police/
     aligner le texte : centrer ; /position du texte/
     texte-ombre : 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10); /ombre pour le texte/
     boîte-ombre : 0 4px 6px rgba(0, 0, 0, .2); /bloquer l'ombre/
     

     www.spargalochki.ru

     Centrage vertical et horizontal en CSS niveau 3

     Nous pouvons étendre les deux méthodes pour centrer horizontalement et verticalement en même temps.

     Un effet secondaire du positionnement absolu des paragraphes est que le paragraphe devient exactement aussi large qu'il devrait l'être (sauf si nous spécifions explicitement une largeur). Dans l'exemple ci-dessous, c'est exactement ce que nous voulons : nous centrons un paragraphe d'un mot ("Centre !"), de sorte que la largeur du paragraphe doit être égale à la largeur de ce mot.

     Le fond jaune montre clairement que le paragraphe a bien la même largeur que son contenu. Nous supposons que le balisage reste le même :

     Centre!

     En termes de centrage vertical, cette feuille de style est similaire à celle de l'exemple précédent. Mais maintenant, nous déplaçons également l'élément à mi-chemin dans le conteneur avec la règle "gauche : 50 %" et en même temps le décalons vers la gauche de la moitié de sa propre largeur dans la transformation "translate" :

     div.container4 ( hauteur : 10em ; position : relative ) div.container4 p ( marge : 0 ; arrière-plan : jaune ; position : absolue ; haut : 50 % ; gauche : 50 % marge-droite : -50% transformer : traduire ( -50%, -50%) }

     L'exemple suivant explique pourquoi la règle 'margin-right: -50%' est requise.

     Lorsque le formateur CSS prend en charge 'flex', les choses deviennent encore plus simples :

     avec cette feuille de style :

     Div.container6( hauteur : 10 em ; affichage : flex ; align-items : center ; justifier-contenu : centrer) div.container6 p ( marge : 0 )

     ceux. le seul ajout est 'justify-content: center'. Tout comme 'align-items' définit l'alignement vertical du contenu d'un conteneur, 'justify-content' définit l'alignement horizontal de la même manière. (En fait, c'est un peu plus compliqué, comme leurs noms l'indiquent, mais dans un cas simple, c'est comme ça que ça marche.). Un effet secondaire de l'application de la propriété 'flex' est que l'élément enfant, P dans notre cas, devient automatiquement aussi petit que possible.

     Nous continuons à étudier HTML. Dans ce didacticiel, nous examinerons les en-têtes de page HTML, ce que sont les en-têtes, comment les utiliser correctement et quand ils peuvent être utilisés. Nous analyserons également les paragraphes afin que vous puissiez déjà remplir votre page de texte, mais surtout, faites-le correctement.

     Si vous n'avez pas lu le premier article, vous pouvez le trouver ici :

     Puisque vous en êtes à cette leçon, vous souhaitez approfondir le sujet de la création de sites. Et avec l'aide de ces leçons, vous aurez une compréhension de base de ce que c'est.

     Et si vous avez besoin de plus de connaissances et que vous souhaitez peut-être même travailler dans ce domaine ? Il vaut mieux trouver des cours spécialisés. Il n'y en a pas tellement de bons dans RuNet où les développeurs frontaux sont formés. J'ai aimé le programme de formation que Netology a dans le cours "". Skillbox a également un bon programme dans le cours "".

     Si vous étudiez le développement Web, alors avec des professionnels.

     Théorie et pratique - Paragraphes et en-têtes d'une page HTML

     Aujourd'hui, nous allons parler des paragraphes et des titres. Commençons simplement - avec des paragraphes et où ils s'appliquent.

     Paragraphes par page

     Je vais maintenant donner un exemple de code dans lequel la balise paragraphe sera présente.

     Vous vous souvenez déjà de la structure de base de la première leçon. Là, nous avons démantelé les bases et regardé ce qu'est le HTML. Par conséquent, nous nous concentrerons sur ce qui se trouve entre les balises.
     
     .

     Lorsque vous écrivez du texte sur une page, que ce soit juste un paragraphe ou une petite ligne explicative sous l'image, vous devez mettre ce texte à l'intérieur de la balise.

     Dans les leçons suivantes, vous verrez le processus de mise en forme de ces paragraphes. Maintenant, vous devez comprendre que vous ne pouvez pas mettre de balise sur une page sans balise. Parce qu'à l'avenir, il sera difficile d'appliquer certains styles individuels à cette section particulière du texte.

     Essayez d'écrire quelques paragraphes. Mettez quelques paragraphes dans la balise et laissez-en d'autres sans elle. Et vous verrez immédiatement la différence. Parce que si vous écrivez un paragraphe à l'intérieur de cette balise, il aura immédiatement des retraits. Passons maintenant aux en-têtes HTML de la page.

     En-têtes HTML par page

     Il y a de la sémantique dans un document HTML. Je ne parle pas de la technologie HTML5 et de ses nouvelles balises. Ici, nous n'analyserons que les plus basiques afin que vous puissiez maîtriser rapidement les bases du HTML. La sémantique signifie que les titres, paragraphes, tableaux, etc. ne doivent pas être créés à l'aide de la même balise. Cela peut être fait, mais la technologie HTML est plus diversifiée et il existe des balises appropriées pour différentes situations. Et il suffit de maîtriser les balises de base pour pouvoir travailler librement avec du code HTML.

     J'ai écrit cette petite introduction au fait que pour les paragraphes il faut utiliser la balise déjà connue de vous. Mais pour les en-têtes, on utilise des balises qui commencent par la lettre anglaise "H".

     Voici la liste complète des en-têtes que vous pouvez utiliser :

     Certaines de ces balises sont utilisées beaucoup plus fréquemment. Ce sont des balises telles que h1, h2 ou h3. Si quelqu'un est déjà familiarisé avec le CSS, alors il comprendra que l'en-tête HTML L'en-tête de la page h3 peut être stylisé de telle sorte qu'il ressemble également à h1 ou h2. Mais les significations qu'ils portent, du moins pour l'optimisation SEO, sont radicalement différentes. En règle générale, ces chiffres, à l'intérieur des balises, doivent être compris comme le niveau d'importance de tel ou tel titre HTML. Par conséquent, il est nécessaire de travailler très soigneusement ces éléments et les moteurs de recherche commenceront alors à remarquer vos articles.

     Jusqu'à ce que nous arrivions au CSS, vous verrez les styles de titre qui sont définis par défaut dans les navigateurs. Si vous insérez ces balises une par une et écrivez du texte à l'intérieur, vous verrez ce qui suit :

     Pour les robots de recherche, l'utilisation des titres sur la page est également importante. Il existe certaines règles que vous pouvez lire dans notre livre -.

     Après avoir tout étudié, nous entrons immédiatement dans le code et essayons de tout écrire de nos propres mains. C'est le moyen le plus rapide de maîtriser n'importe quel langage de programmation. Mais la technologie HTML est beaucoup plus légère que n'importe quel langage de programmation, donc n'importe qui peut le comprendre. De cette façon, vous vous souviendrez mieux des balises.

     Tutoriel vidéo - Titre de la page HTML ? (entraine toi)

     Vidéo visuelle sur l'exemple de travail avec ces balises :

     Devoirs

     D/W :à titre d'exemple, écrivez un court texte qui se composera de 5 à 7 paragraphes et de 2 à 3 titres différents.

     Cette leçon porte sur les attributs et les en-têtes en HTML, qui sont des éléments indispensables de tout document HTML. C'est pourquoi il est si important de s'approprier ce problème. Cette leçon explique ce qu'est un attribut et fournit des exemples d'utilisation des attributs. Aussi dans les en-têtes de cours utilisés en HTML sont considérés, des exemples d'en-têtes sont donnés.

     Attributs en HTML

     Qu'est-ce qu'un attribut ? Un attribut est un paramètre qui donne aux balises certaines informations. Il peut y avoir beaucoup de ces paramètres. Par exemple, à l'aide d'attributs, nous pouvons aligner le texte d'un paragraphe en largeur, définir le style et la taille de la police, définir les retraits nécessaires, etc. Les attributs sont écrits à l'intérieur des balises, suivis d'un signe égal, puis les valeurs des attributs sont spécifiées entre guillemets. Les attributs sont séparés les uns des autres par un point-virgule.

     Exemples d'attributs

     Envisagez de travailler avec des attributs sur des exemples. L'exemple le plus simple - prenez la balise de paragraphe

     Avec l'attribut "aligner". Écrivons:

     Exemple de paragraphe aligné à gauche

     L'attribut "align" indique au navigateur d'aligner le paragraphe à gauche de l'écran.

     Les attributs peuvent également être appliqués à la balise de paragraphe :

     • align="center" – alignement au centre de l'écran ;
     • align="right" – alignement à droite ;
     • align="justify" - aligne le texte sur la largeur de l'écran.

     Compliquons maintenant la tâche - nous allons créer une page HTML en utilisant plusieurs attributs différents. Un exemple d'une telle page aurait le code suivant :

     Attributs en HTML

     
     
     

     L'attribut de couleur "bgcolor" nous permet de définir la couleur de fond de la page. Les attributs "center" et "justify" alignent le texte sur eux-mêmes, respectivement, au centre et en largeur.

     Titres en HTML

     avec indice. Il n'y a que six indices de ce type - de 1 à 6, ils indiquent la taille de l'en-tête (

     est le plus grand titre,

     - le plus petit). Par exemple, créons une page Web comportant plusieurs en-têtes. Le code de cette page ressemblera à :

     Attributs en HTML

     Qu'est-ce qu'un attribut ? Un attribut est un paramètre qui donne aux balises certaines informations. Ces paramètres peuvent être illimités.

     Titres en HTML

     Afin de créer un titre sur la page, une balise spéciale est utilisée. avec indice. Il n'y a que six indices de ce type - de 1 à 6, ils indiquent la taille de l'en-tête...

     
     
     

     Dans cet exemple, nous avons deux en-têtes - l'en-tête de premier niveau n'a aucun attribut ici, l'en-tête de deuxième niveau a un attribut d'alignement central. Après les titres viennent les paragraphes qui ont aussi leurs propres attributs.

     C'est ainsi qu'ils fonctionnent avec les attributs et les en-têtes en HTML. Il n'y a rien de compliqué ici. Assurez-vous de pratiquer sur vos propres exemples afin de consolider les informations reçues dans cette leçon.

     
     
     

     Vous avez aimé l'article ? Partagez-le

     Articles connexes recommandés

     Dons dans le groupe VKontakte : comment ajouter l'application VKontakte Donations

     Aligner le contenu de la balise Insérer le contenu avant le contenu de l'objet sélectionné

     Correction de bogue : impossible de modifier les informations d'en-tête - les en-têtes ont déjà été envoyés par

     Les visiteurs discutent maintenant

     Pourquoi les messages vocaux ne fonctionnent pas dans VK - raisons et que faire ? Téléviseurs LG

     Créer un groupe VKontakte Sans fil

     Pourquoi la webcam ne fonctionne-t-elle pas sur mon ordinateur ? Sans fil

     Pourquoi la webcam ne fonctionne pas sur un ordinateur portable Conseil