Come allineare il testo in HTML

"Hypertext Markup Language" è la lingua di base della progettazione di un sito Web. HTML è noto per essere una lingua front-end per progettare l'interfaccia di un sito Web. Ci sono molte funzioni riguardanti questa lingua. I comandi utilizzati per la progettazione sono noti come tag. Questi tag si combinano per sviluppare un sito Web. Un singolo file di codice HTML è responsabile di un sito Web statico che non è in esecuzione. I contenuti HTML sono testo, immagine, forme, colore, allineamento, ecc. L'allineamento è un ingrediente importante nella progettazione in quanto determina il rispettivo contenuto da gestire in un luogo specifico. Discuteremo alcuni esempi di base in questa guida.

Strumenti richiesti

Per approfondire il concetto di allineamento in HTML, dobbiamo menzionare alcuni strumenti necessari per eseguire il codice HTML. Uno è un editor di testo e il secondo è un browser. Un editor di testo forse un blocco note, sublime, blocco note ++ o qualsiasi altro che potrebbe aiutare. In questa guida, abbiamo usato Blocco note, un'applicazione predefinita in Windows e Google Chrome come browser.

Formato HTML

Per comprendere l'allineamento, abbiamo bisogno di prima per avere un po 'di know-how di basi HTML. Abbiamo presentato lo screenshot di un codice di esempio.

..
.. .

HTML ha due parti principali. Uno è la testa e l'altro è il corpo. Tutti i tag sono scritti tra parentesi angolari. La parte principale tratta di nominare la pagina HTML utilizzando il tag di "Titolo". E anche, usa la dichiarazione di stile all'interno della testa. D'altra parte, il corpo si occupa di tutti gli altri tag di testo, immagini o video, ecc. In altre parole, qualunque cosa tu voglia aggiungere alla tua pagina HTML è scritta nella parte del corpo di HTML.

Una cosa che devo evidenziare qui è l'apertura e la chiusura del tag. Ogni tag scritto deve essere chiuso. Ad esempio, HTML ha il tag di inizio e il tag finale è . Quindi si osserva che il tag finale ha una barra seguita dal nome del tag. Allo stesso modo, tutti gli altri tag seguono anche lo stesso approccio. Ogni editor di testo viene quindi salvato con l'estensione di HTML. Ad esempio, abbiamo usato un file con l'esempio del nome.html. Quindi vedrai che l'icona del blocco note è cambiata nell'icona del browser.

Poiché l'allineamento è contento dello stile. Lo stile in HTML è di tre tipi. Uno stile in linea, uno stile interno ed esterno. In linea implica nel tag. L'interno è scritto all'interno della testa. Allo stesso tempo, lo stile esterno è scritto in un file CSS separato.

Styling in linea di testo

Esempio 1

Ora è il momento di discutere un esempio qui. Considera l'immagine visualizzata sopra. In quel file di blocco note, abbiamo scritto un semplice testo. Quando lo eseguiamo come browser, mostrerà l'output indicato di seguito nel browser.

Se vogliamo che questo testo venga visualizzato al centro, modificheremo il tag.

Questo tag è un tag in linea. Scriveremo questo tag quando introdurremo il tag paragrafo nel corpo HTML. Dopo il testo, quindi chiudere il tag paragrafo. Salva e quindi apri il file nel browser.

Il paragrafo è allineato al centro, come viene visualizzato nel browser. Il tag utilizzato in questo esempio viene utilizzato per qualsiasi allineamento, i.e., per sinistra, destra e centro. Ma se si desidera allineare il testo solo al centro, allora viene utilizzato un tag specifico per questo scopo.

..

Il tag centrale viene utilizzato prima e dopo il testo. Questo mostrerà anche lo stesso risultato dell'esempio precedente.

Esempio 2

Questo è un esempio di allineamento dell'intestazione anziché di un paragrafo nel testo HTML. La sintassi per questo allineamento dell'intestazione è la stessa. Questo può essere fatto tramite sia il tag che tramite lo styling in linea o l'aggiunta del tag di allineamento all'interno del tag di intestazione.

L'uscita è mostrata nel browser. L'etichetta di intestazione ha convertito il testo semplice in un'intestazione e il tag lo ha allineato al centro.

Esempio 3

Allinea il testo al centro

Considera un esempio in cui c'è un paragrafo visualizzato nel browser. Dobbiamo allinearlo al centro.

Apriremo questo file nel blocco note e poi lo allineeremo nella posizione centrale utilizzando il tag.

Dopo aver aggiunto questo tag nel tag paragrafo, salva il file ed eseguilo sul browser. Vedrai che il paragrafo è ora centrato allineato. Vedi l'immagine qui sotto.

Allinea il testo a destra

Appoggiarsi il testo a destra è simile a posizionarlo al centro della pagina. Solo la parola "centrale" è sostituita da "giusto" nel tag paragrafo.

..

Le modifiche possono essere visualizzate tramite l'immagine aggiunta di seguito.

Salva e aggiorna la pagina Web nel browser. Il testo viene ora spostato sul lato destro della pagina.

Styling interno del testo

Esempio 1

Come descritto sopra, quel CSS interno (foglio di stile a cascata) o lo styling interno è un tipo di CSS definito nella parte principale di HTML della pagina. Funziona in modo simile ai tag interni.

Considera la pagina mostrata sopra; contiene i titoli e il paragrafo in esso. Abbiamo l'obbligo di vedere il testo al centro. L'allineamento in linea richiede la scrittura manuale di tag all'interno di ogni paragrafo. Ma lo stile interno può essere automaticamente applicato a ciascun paragrafo del testo menzionando P nell'istruzione di stile. Non è necessario scrivere alcun tag all'interno del tag paragrafo. Ora osserva il codice e funziona.

Questo tag è scritto all'interno del tag di stile nella parte testa. Ora esegui il codice nel browser.

Quando esegui la pagina nel browser, vedrai che tutti i paragrafi sono allineati al centro della pagina. Questo tag viene applicato a ogni paragrafo presente nel testo.

Esempio 2

In questo esempio, proprio come un paragrafo, allineeremo tutte le intestazioni nel lato destro. A tale scopo, menzioneremo le intestazioni nella dichiarazione di stile all'interno della testa.

H2, H3

Allineamento del testo: giusto

Ora dopo aver salvato il file, eseguire il file del blocco note nel browser. Vedrai che le intestazioni sono allineate sul lato destro della pagina HTML.

Esempio 3

Nello stile interno, potrebbe esserci una situazione in cui è necessario allineare il testo solo di alcuni paragrafi nel testo mentre altri rimangono gli stessi. Quindi, stiamo usando il concetto di classe. Introduciamo la classe con un metodo DOT all'interno del tag di stile. È necessario aggiungere il nome della classe all'interno del tag paragrafo che si desidera allineare.

< p class = “center”>..

Abbiamo aggiunto la classe nei primi tre paragrafi. Ora esegui il codice. Puoi vedere nell'output che i primi tre paragrafi sono allineati al centro, mentre altri non lo sono.

Conclusione

Questo articolo ha spiegato che l'allineamento potrebbe essere fatto in diversi modi attraverso tag in linea e interni.