Un sito Web è composto da tre parti principali che sono intestazione, corpo e piè di pagina. Queste parti sono create dalla combinazione di molti altri elementi come intestazione, paragrafo, immagini e altro ancora. Più specificamente, l'intestazione è la parte più importante di qualsiasi pagina web perché contiene tutte le informazioni relative alla pagina web, incluso il titolo, la descrizione e il logo.

In questo manuale, discuteremo del ""Tag. Quindi iniziamo!

Tag di intestazione HTML

HTML fornisce il “"Tag, che viene utilizzato per definire il titolo e l'intestazione dei contenuti correlati su una pagina web. Puoi anche aggiungere un intestazione, un paragrafo, un logo, un'immagine e un collegamento nell'intestazione.

Sintassi

La sintassi del tag di intestazione è:

Elementi HTML

Gli elementi che desideri includere nell'intestazione devono essere aggiunti tra i tag di intestazione di apertura e chiusura.

Passiamo all'esempio in cui impareremo come creare un'intestazione.

Esempio: come creare un'intestazione?

Nel file HTML, in primo luogo, useremo il ""Tag per creare un'intestazione. Dopodiché, aggiungi una voce "

"E quattro collegamenti usando il"Tag all'interno del ""Tag. Nel "Href", aggiungere "#"E imposta il collegamento della pagina che si desidera aggiungere. Successivamente, assegna i nomi dei collegamenti come "Casa","Di","Contattaci", E "politica sulla riservatezza". Questi nomi di collegamenti appariranno sull'intestazione della pagina web.

Html

Linuxhint

Casa
Di
Contattaci
politica sulla riservatezza

Nell'immagine sotto fornita puoi vedere che l'intestazione viene creata:

Puoi anche modellare l'intestazione usando CSS. Ecco il metodo per farlo.

Nel CSS, useremo "intestazione"Per accedere all'intestazione creata in HTML. Qui, usa il "allineamento"Valore della proprietà come"centro"Per allineare l'intestazione e i collegamenti al centro della pagina. Imposteremo anche il colore di sfondo dell'intestazione come "RGB (80, 80, 79)"E imposta il colore dell'intestazione come"RGB (206, 158, 34)". Adatteremo la dimensione del carattere su "30px". Dopodiché, imposta l'imbottitura come "30px".

CSS

intestazione
Testo-align: centro;
Background: RGB (80, 80, 79);
Colore: RGB (206, 158, 34);
Font-size: 30px;
imbottitura: 30px;

La seguente immagine mostra che l'intestazione è disegnata correttamente:

Ora modelleremo i collegamenti.

Link di stile

Per fare questo, prima, usa "UN"Per accedere ai collegamenti. Qui imposteremo il valore di "decorazione del testo"Proprietà come"nessuno"Per cancellare la decorazione predefinita dei collegamenti. Successivamente, imposta il margine-sinistra come "40px", Margine-destra come"30px", E margine-top come"50px". Alla fine, imposteremo il colore dei collegamenti come "RGB (206, 158, 34)":

UN
DECORAZIONE DEL TESTO: Nessuno;
Margin-Left: 40px;
margine-destra: 30px;
margine-top: 50px;
Colore: RGB (206, 158, 34)

Ecco il risultato che dimostra che l'intestazione è disegnata con successo:

Intestazione con logo

Puoi anche aggiungere un logo all'intestazione della pagina web. Per questo, è necessario aggiungere un'immagine logo nel file HTML e impostarla sull'intestazione usando CSS.

Esempio

Qui creeremo un div all'interno del tag di intestazione e nomineremo la classe Div come "Immagine". La parte rimanente dell'intestazione è la stessa dell'esempio precedente:

..

Nel CSS, useremo ".Immagine"Per accedere al Div e aggiungere un'immagine del logo usando"sfondo" proprietà. Nel "url ()", Aggiungeremo il percorso dell'immagine come"URL (logo.PNG)". Qui, useremo "no-ripeat"Per evitare la ripetizione dell'immagine. Alla fine, imposteremo la larghezza del logo come "250px"E l'altezza come"100px":

.Immagine
Sfondo: URL (logo.png) no-ripeat;
larghezza: 250px;
Altezza: 100px;

Usando il codice sopra, si ottiene il seguente output e si può vedere che il logo viene aggiunto nell'angolo in alto a sinistra dell'intestazione:

Intestazione con immagine

È anche possibile creare un'intestazione con l'immagine di sfondo. Creiamolo.

Esempio

Innanzitutto, aggiungeremo l'immagine nel file HTML, uguale all'esempio precedente, quindi aggiungere il percorso dell'immagine nell'URL () come "Immagine.jpg"E usa un"no-ripeat"Valore per evitare la ripetizione dell'immagine. Successivamente, utilizzare la proprietà in posizione sfondo per impostare la posizione dell'immagine come "centro"E la proprietà di dimensioni di fondo come"copertina"Per impostare l'immagine nell'intera intestazione. Infine, impostare l'altezza dell'immagine come "250px":

.Immagine
Sfondo: URL (immagine.jpg) no-ripeat;
Posizione di background: centro;
Size di sfondo: copertina;
Altezza: 250px;

Ecco il risultato che dimostra che l'immagine viene aggiunta nell'intestazione:

Questo è tutto! Abbiamo spiegato in dettaglio il tag di intestazione.

Conclusione

In HTML, il ""Il tag viene utilizzato per creare l'intestazione della pagina web. Nella parte dell'intestazione della pagina web, è possibile aggiungere l'intestazione, il paragrafo corto, il logo, l'immagine di sfondo e la barra di navigazione. In questo manuale, abbiamo discusso del tag e fornito un esempio creando e accumulando l'intestazione della pagina web.