Eines necessàries
Per aprofundir en el concepte d'alineació en HTML, hem d'esmentar algunes eines necessàries per executar el codi HTML. Un és un editor de text i el segon és un navegador. Un editor de text potser un bloc de notes, sublim, bloc de notes ++ o qualsevol altre que us pugui ajudar. En aquesta guia, hem utilitzat el bloc de notes, una aplicació predeterminada a Windows i Google Chrome com a navegador.
Format HTML
Per entendre l'alineació, primer hem de tenir coneixements bàsics sobre HTML. Hem presentat la captura de pantalla d’un codi de mostra.
< html >
< cap >...</ cap >
< cos >....</ cos >
</ html >
HTML té dues parts principals. Un és el cap i l’altre és el cos. Totes les etiquetes s’escriuen entre claudàtors. La part principal tracta de nomenar la pàgina html mitjançant l'etiqueta de títol. I també, utilitzeu la declaració d’estil dins del cap. D’altra banda, el cos tracta totes les altres etiquetes de text, imatges o vídeos, etc.
Una cosa que he de destacar aquí és l’obertura i el tancament de l’etiqueta. Cal tancar cada etiqueta que s’escrigui. Per exemple, Html té l'etiqueta inicial i l'etiqueta final és. Per tant, s’observa que l’etiqueta final té una barra seguida del nom de l’etiqueta. De la mateixa manera, totes les altres etiquetes també segueixen el mateix enfocament. Després, cada editor de text es desa amb l'extensió de html. Per exemple, hem utilitzat un fitxer amb el nom example.html. A continuació, veureu que la icona del bloc de notes s'ha convertit en la icona del navegador.
Com que l'alineació és contingut de l'estil. L’estil en html és de tres tipus. Un estil en línia, estil intern i extern. Inclou en línia a l'etiqueta. L’interna s’escriu dins del cap. Al mateix temps, l'estil extern s'escriu en un fitxer CSS separat.
Estil en línia del text
Exemple 1
Ara és hora de parlar d’un exemple aquí. Penseu en la imatge que es mostra més amunt. En aquest fitxer de bloc de notes, hem escrit un text senzill. Quan l'executem com a navegador, mostrarà la sortida que es mostra a continuació al navegador.
Si volem que aquest text es mostri al centre, alterarem l’etiqueta.
Aquesta etiqueta és una etiqueta integrada. Escriurem aquesta etiqueta quan introduirem l’etiqueta de paràgraf al cos html. Després del text, tanqueu l'etiqueta de paràgraf. Deseu i obriu el fitxer al navegador.
El paràgraf està alineat al centre, tal com es mostra al navegador. L'etiqueta que s'utilitza en aquest exemple s'utilitza per a qualsevol alineació, és a dir, per a l'esquerra, la dreta i el centre. Però si voleu alinear el text només al centre, s'utilitza una etiqueta específica per a aquest propòsit.
< centre > ...... ..</ centre >L'etiqueta central s'utilitza abans i després del text. També es mostrarà el mateix resultat que l'exemple anterior.
Exemple 2
Aquest és un exemple d'alineació del títol en lloc d'un paràgraf al text html. La sintaxi d’aquest alineament de capçalera és la mateixa. Això es pot fer tant mitjançant l'etiqueta com mitjançant l'estil en línia o afegint l'etiqueta d'alineació dins de l'etiqueta de capçalera.
La sortida es mostra al navegador. L’etiqueta d’encapçalament ha convertit el text pla en un encapçalament i l’etiqueta l’ha alineat al centre.
Exemple 3
Alineeu el text al centre
Penseu en un exemple en què aparegui un paràgraf al navegador. Cal alinear-ho al centre.
Obrirem aquest fitxer al bloc de notes i l’alinearem a la posició central mitjançant l’etiqueta.
< pàg estil =text-alinear: centre;>Després d'afegir aquesta etiqueta a l'etiqueta de paràgraf, deseu el fitxer i executeu-lo al navegador. Veureu que ara el paràgraf està alineat al centre. Vegeu la imatge següent.
Alineeu el text a la dreta
Inclinar el text cap a la dreta és similar a situar-lo al centre de la pàgina. Només la paraula central se substitueix per la dreta a l'etiqueta de paràgraf.
< pàg estil =text-alinear: dret;> ……… ..</ pàg >Els canvis es poden veure a través de la imatge adjunta a continuació.
Deseu i actualitzeu la pàgina web al navegador. El text es mou ara a la part dreta de la pàgina.
Estil intern del text
Exemple 1
Com s'ha descrit anteriorment, css intern (full d'estil en cascada) o estil intern és un tipus de css que es defineix a la part principal de html de la pàgina. Funciona de manera similar a les etiquetes internes.
Penseu en la pàgina que es mostra més amunt; conté els encapçalaments i el paràgraf. Tenim el requisit de veure el text al centre. L'alineació en línia requereix l'escriptura manual d'etiquetes dins de cada paràgraf. Però l'estil intern es pot aplicar automàticament a cada paràgraf del text mencionant p a la declaració d'estil. Aleshores no cal escriure cap etiqueta dins de l'etiqueta de paràgraf. Ara observeu el codi i funciona.
< estil >Pàg{Text-alinear: centre}
</ estil >
Aquesta etiqueta s'escriu dins de l'etiqueta d'estil a la part del cap. Ara executeu el codi al navegador.
Quan executeu la pàgina al navegador, veureu que tots els paràgrafs estan alineats al centre de la pàgina. Aquesta etiqueta s'aplica a tots els paràgrafs presents al text.
Exemple 2
En aquest exemple, igual que un paràgraf, alinearem tots els encapçalaments del text al costat dret. Amb aquest propòsit, esmentarem els encapçalaments a la declaració d'estil dins del capçal.
H2, h3{
Text-alinear: dret
}
Ara després de desar el fitxer, executeu el fitxer del bloc de notes al navegador. Veureu que els encapçalaments estan alineats a la part dreta de la pàgina HTML.
Exemple 3
A l'estil intern, pot haver-hi una situació en què hagueu d'alinear el text només d'alguns paràgrafs del text mentre que d'altres continuïn sent els mateixos. Per tant, fem servir el concepte de classe. Introduïm la classe amb un mètode de punts dins de l’etiqueta d’estil. Cal afegir el nom de la classe dins de l’etiqueta de paràgraf que voleu alinear.
< estil >.center{
Text-alinear: centre}
</ estil >
classe =centre> ...</ pàg >
Hem afegit la classe als tres primers paràgrafs. Ara executeu el codi. Podeu veure a la sortida que els primers tres paràgrafs estan alineats al centre, mentre que altres no.
Conclusió
En aquest article s’explicava que l’alineació es podria fer de diferents maneres mitjançant etiquetes internes i en línia.