Strumenti richiesti
Per approfondire il concetto di allineamento in HTML, dobbiamo menzionare alcuni strumenti necessari necessari per eseguire il codice HTML. Uno è un editor di testo e il secondo è un browser. Un editor di testo potrebbe essere un blocco note, sublime, blocco note ++ o qualsiasi altro che possa aiutare. In questa guida abbiamo utilizzato il blocco note, un'applicazione predefinita in Windows e Google Chrome come browser.
formato HTML
Per capire l'allineamento, dobbiamo prima avere un po' di conoscenza delle basi dell'HTML. Abbiamo presentato lo screenshot di un codice di esempio.
< html >
< testa >...</ testa >
< corpo >….</ corpo >
</ html >
HTML ha due parti principali. Uno è la testa e l'altro è il corpo. Tutti i tag sono scritti tra parentesi angolari. La parte principale si occupa di nominare la pagina html utilizzando il tag del titolo. Inoltre, 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, tutto ciò che vuoi aggiungere alla tua pagina html è scritto nella parte del corpo dell'html.
Una cosa che devo evidenziare qui è l'apertura e la chiusura del tag. Ogni tag che viene scritto deve essere chiuso. Ad esempio, Html ha il tag iniziale di e il tag finale è . Quindi si osserva che il tag finale ha una barra seguita dal nome del tag. Allo stesso modo, anche tutti gli altri tag seguono lo stesso approccio. Ciascun editor di testo viene quindi salvato con l'estensione html. Ad esempio, abbiamo utilizzato un file con il nome example.html. Quindi vedrai che l'icona del blocco note è cambiata nell'icona del browser.
Poiché l'allineamento è contenuto dello stile. Lo stile in html è di tre tipi. Uno stile in linea, stile interno ed esterno. Inline implica nel tag. Interno è scritto all'interno della testa. Allo stesso tempo, lo stile esterno è scritto in un file CSS separato.
Stile del testo in linea
Esempio 1
Ora è il momento di discutere un esempio qui. Considera l'immagine mostrata 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 di paragrafo nel corpo html. Dopo il testo, quindi chiudi il tag di paragrafo. Salva e quindi apri il file nel browser.
Il paragrafo è allineato al centro, così come viene visualizzato nel browser. Il tag utilizzato in questo esempio viene utilizzato per qualsiasi allineamento, ovvero per sinistra, destra e centro. Ma se vuoi allineare il testo solo al centro, viene utilizzato un tag specifico per questo scopo.
< centro > …… ..</ centro >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 invece di un paragrafo nel testo html. La sintassi per questo allineamento di intestazione è la stessa. Questo può essere fatto sia attraverso il tag che con uno stile in linea o aggiungendo il tag di allineamento all'interno del tag di intestazione.
L'output viene mostrato nel browser. Il tag di intestazione ha convertito il testo normale in un'intestazione e il tag lo ha allineato al centro.
Esempio 3
Allinea il testo al centro
Considera un esempio in cui è visualizzato un paragrafo nel browser. Dobbiamo allinearlo al centro.
Apriremo questo file nel blocco note e quindi lo allineeremo nella posizione centrale utilizzando il tag.
< P stile =testo-allineare: centro ;>Dopo aver aggiunto questo tag nel tag di paragrafo, salva il file ed eseguilo nel browser. Vedrai che il paragrafo è ora centrato e allineato. Vedi l'immagine qui sotto.
Allinea il testo a destra
Inclinare il testo a destra è simile a posizionarlo al centro della pagina. Solo la parola centrale viene sostituita da destra nel tag di paragrafo.
< P stile =testo-allineare: destra ;>………..</ P >Le modifiche possono essere viste attraverso l'immagine allegata di seguito.
Salva e aggiorna la pagina web nel browser. Il testo viene ora spostato sul lato destro della pagina.
Stile interno del testo
Esempio 1
Come descritto sopra, quel css interno (foglio di stile a cascata) o stile interno è un tipo di css che è definito nella parte principale dell'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 applicato automaticamente a ciascun paragrafo del testo menzionando p nella dichiarazione di stile. Non è quindi necessario scrivere alcun tag all'interno del tag di paragrafo. Ora osserva il codice e funziona.
< stile >P{Testo-allineare: centro}
</ stile >
Questo tag è scritto all'interno del tag style nella parte head. 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 del testo sul lato destro. A tal fine, menzioneremo i titoli nella dichiarazione di stile all'interno della testa.
H2, h3{
Testo-allineare: Giusto
}
Ora, dopo aver salvato il file, esegui 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 verificarsi una situazione in cui è necessario allineare il testo solo di alcuni paragrafi del testo mentre altri rimangono invariati. Quindi, stiamo usando il concetto di classe. Introduciamo la classe con un metodo punto all'interno del tag style. È necessario aggiungere il nome della classe all'interno del tag di paragrafo che si desidera allineare.
< stile >.centro{
Testo-allineare: centro}
</ stile >
classe =centro>……</ P >
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 no.
Conclusione
Questo articolo ha spiegato che l'allineamento può essere eseguito in modi diversi tramite tag in linea e interni.