HTML sta per la lingua di markup ipertestuale. Vengono utilizzati diversi tag per creare una struttura di pagine Web. Questi tag sono anche noti come elementi HTML. Gli elementi HTML visualizzano il contenuto sul browser.

I risultati di apprendimento di questo articolo sono:

• Cos'è la struttura del documento HTML?
• Cosa sono i tag HTML?
• Cosa sono elementi e attributi HTML?

Nella sezione imminente, la struttura del documento HTML sarà discussa.

Cos'è una struttura di documenti HTML?

Un documento di struttura HTML sembra questo:

Linuxhint

Miglior sito web tutorial

Gli elementi utilizzati nel codice sopra menzionato sono spiegati di seguito:

• ""È la dichiarazione di un documento HTML5.
• ""È il componente principale di una pagina HTML. L'attributo lang con il valore "en"Rappresenta la lingua inglese.
• ""Mantiene la meta-informazione sulla pagina.
• ""Specificare la codifica UTF-8 quando si traduce il codice in testo leggibile dall'uomo nel browser o viceversa.
• ""Contiene il collegamento al foglio di stile CSS.
• ""Definisce un titolo di pagina HTML che verrà visualizzato nella barra del titolo del browser.
• ""Tag di chiusura dell'elemento.
• ""L'elemento contiene il contenuto visibile sul browser.
• "

  "L'elemento determina l'intestazione nel documento.

• "

  "Definisce un paragrafo.

• ""È il tag di chiusura dell'elemento corporeo.
• ""È il tag di chiusura dell'elemento radice HTML.

Produzione

Nell'uscita sopra, la freccia rossa rappresenta il titolo, la freccia blu rappresenta l'intestazione e la freccia verde rappresenta il paragrafo.

Cosa sono i tag HTML?

Ci sono diversi tag usati per costituire una pagina HTML. Questi tag sono anche noti come elementi HTML e sono determinati da un tag iniziale, contenuto nel tag e tag finale. I tag sono di due tipi che sono:

• Tag accoppiati
• Tag vuoti

Esempio 1: come utilizzare i tag accoppiati in HTML?

Gli elementi HTML con tag iniziali e chiusure sono chiamati tag accoppiati. Di seguito sono menzionati alcuni esempi di tag accoppiati:

Il tag di intestazione

Il tag paragrafo

Questo testo è in corsivo
Un testo di sciopero

Questi elementi sono scritti all'interno dell'elemento corporeo del file HTML.

L'output del codice sopra menzionato è mostrato di seguito:

Quindi, il risultato del

Il tag è puntato dalla freccia blu,

Il tag è indicato dalla freccia verde, Il tag è indicato dalla freccia rosa e la freccia rossa punta a un risultato di tag.

Esempio 2: quali sono i tag vuoti in HTML?

Alcuni tag HTML sono noti come elementi vuoti perché sono costituiti da solo tag di inizio, come
,

---

tag e altro ancora.

Cosa sono elementi e attributi HTML?

Gli elementi HTML, a volte noti come tag, possono essere associati agli attributi. Questi attributi sono scritti nel tag iniziale e utilizzati per aggiungere ulteriori informazioni agli elementi. Gli attributi hanno nomi e valori.

Esempio: struttura della pagina HTML

Di seguito è riportato un esempio di una pagina HTML:

• ""L'elemento specifica una divisione o un componente in un documento HTML.
• "classe"È l'attributo che specifica i nomi delle classi per un elemento da utilizzare in CSS e JavaScript:

Dopo l'aggiunta del contenitore Div. Ora specificheremo una sezione di intestazione utilizzando i seguenti elementi:

• ""L'elemento contiene la parte introduttiva iniziale.
• ""È un tag di ancoraggio che crea un collegamento ipertestuale ai file HTML.
• "Href"È l'attributo con tag che contiene il collegamento di altri file HTML.
• "
• "
  "Viene utilizzato per aggiungere un elenco non ordinato al documento HTML, come un elenco proiettato.
  • "
  • "Rappresenta un elemento in un elenco:

  
  LOGO
  
  

  Dopo aver aggiunto l'elemento di intestazione, aggiungi un elemento div con il nome della classe "principale"Ciò contiene l'immagine. Per posizionare un'immagine, un html ""Il tag viene utilizzato associato agli attributi:

  • "src"È l'attributo che specifica il percorso di un'immagine.
  • "Al"L'attributo viene utilizzato per specificare alcuni testo che verranno visualizzati sullo schermo al posto dell'immagine se l'immagine non si carica:

  
  
  

  Quindi, aggiungi un div con il nome di classe "articolo". Contiene gli elementi elencati di seguito:

  • ""L'elemento specifica il contenuto autonomo e indipendente.
  • "

    "Viene aggiunto per includere l'intestazione.

  • "

    "L'elemento viene utilizzato per specificare un paragrafo in HTML:

  
  

  
  

  Intestazione dell'articolo

  
  

  Linuxhint è il miglior sito web online. È sviluppato per scopi educativi. Scriviamo articoli e realizziamo video per insegnare al mondo online!

  
  

  
  

  Quindi, aggiungi un elemento del piè di pagina come segue:

  • ""L'elemento aggiunge un piè di pagina al documento HTML. Normalmente contiene informazioni sui dati sul copyright, sui collegamenti e sull'autore.
  • ""L'elemento specifica la dimensione del carattere piccolo:

  Quindi, abbiamo appreso di diversi elementi e attributi utilizzati in un documento HTML. Ora, salva le modifiche nel file e aprilo sul browser Web. Di conseguenza, la tua pagina web sarà così:

  Ora, modeliamo la nostra pagina web usando CSS.

  Elemento "corpo" di stile

  corpo
  Margine: 0;
  imbottitura: 0;
  Dimensizzazione di scatole: bordo-box;
  Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;
  

  Di seguito sono riportate le proprietà applicate alla sezione del corpo HTML:

  • "margine"La proprietà viene utilizzata per aggiungere spazio attorno all'elemento.
  • "imbottitura"Proprietà utilizzata per inserire spazio all'interno del bordo dell'elemento o attorno al contenuto dell'elemento.
  • "dimensionamento della scatola"Con il valore"Border-Box"Restende la larghezza e l'altezza dell'animale ai bordi di confine.
  • "famiglia di font"La proprietà è impostata con l'elenco dei valori. Questo elenco è fornito per garantire che se il browser non supporta il primo stile, l'altro verrà utilizzato.

  Stile "Container" Div

  .Container
  Licromra massima: 90%;
  Margine: 0 Auto;
  

  Qui:

  • "larghezza massima"La proprietà specifica la larghezza massima dell'elemento.
  • "margine"La proprietà aggiunge spazio attorno all'elemento.

  Stile "Main" Div

  principale
  display: flex;
  giustificare contento: centro;
  

  L'elemento principale è disegnato con le seguenti proprietà:

  • "Schermo"Proprietà Flex rende il layout dell'elemento flessibile per gli articoli al suo interno.
  • "giustificare il contenuto"La proprietà imposta l'allineamento dell'articolo dell'elemento flessibile in verticale.

  Elemento "header" di stile

  intestazione
  imbottitura: 10px;
  imbottitura-bottom: 10px;
  Background-color: #ffffff;
  display: flex;
  Giustify-Content: spazio-spazio;
  ALIGE-ITMS: CENTRO;
  

  L'elemento di intestazione è decorato con le proprietà menzionate di seguito:

  • "imbottitura"La proprietà aggiunge lo spazio nella parte superiore dell'elemento.
  • "imbottitura"La proprietà imposta lo spazio dalla parte inferiore dell'elemento.
  • "colore di sfondo"La proprietà alloca il colore di sfondo dell'elemento.
  • "Schermo"Proprietà con il valore"flettere"Renderà l'elemento flessibile per gli articoli al suo interno.
  • "giustificare il contenuto"Con il valore spaziale mezzo aggiungerà spazio tra i suoi articoli.
  • "allineare"La proprietà imposta l'allineamento dell'articolo in orizzontale.

  Stile "UL" dell'elemento "header"

  header ul
  stile elenco: nessuno;
  display: flex;
  

  L'elemento UL del tag di intestazione viene applicato con queste proprietà di styling:

  • "stile elencoLa proprietà "è impostata su"nessuno"Ciò rimuoverà lo stile proiettato dall'elenco.
  • "Schermo"La proprietà funzionerà come discusso prima.

  Elemento "A" di stile

  header ul li a
  DECORAZIONE DEL TESTO: Nessuno;
  imbottitura: 10px;
  Colore: #000000;
  

  Qui:

  • "decorazione del testo"Proprietà con il valore"nessuno"Rimuove la sottolineatura dal testo.
  • "imbottitura"La proprietà aggiunge spazio all'interno del limite dell'elemento.
  • "colore"La proprietà specifica il colore del carattere.

  Elemento "img" di stile

  img
  Object-Fit: copertura;
  larghezza: 100%;
  Altezza: 300px;
  

  IL "img"L'elemento viene disegnato fornendo le seguenti proprietà:

  • "Object-Fit"Imposta il contenuto dell'elemento sostituito.
  • "larghezza"La proprietà definisce la larghezza dell'elemento.
  • "altezza"La proprietà viene utilizzata per definire l'altezza dell'elemento.

  Elemento "Articolo" di stile

  articolo
  larghezza: 450px;
  Testo-align: centro;
  Margine: auto;
  

  L'elemento articolo è disegnato con le proprietà spiegate di seguito:

  • "larghezza"La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento.
  • "allineamento"Definisce l'allineamento del testo dell'elemento.
  • "margine"La proprietà genera spazio attorno all'elemento.

  Elemento "footer" di stile

  Footer
  imbottitura: 20px;
  imbottitura-bottom: 20px;
  Background-color: #000000;
  Colore: #ffffff;
  Testo-align: centro;
  

  IL "piè di pagina"L'elemento è disegnato con le proprietà spiegate di seguito:

  • "imbottitura"La proprietà aggiunge spazio nella parte superiore del contenuto dell'elemento.
  • "imbottitura"La proprietà viene utilizzata per aggiungere lo spazio inferiore del contenuto dell'elemento.
  • "colore di sfondo"Imposta il colore di sfondo dell'elemento.
  • "colore"Viene utilizzato per specificare il colore del carattere.

  Stile "H2" dell'elemento "articolo"

  Articolo H2
  Testo-align: centro;
  

  L'elemento H2 all'interno del tag dell'articolo viene applicato con "allineamento"Proprietà con il Centro di valori.

  Stile "p" dell'elemento "articolo"

  Articolo P
  Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;
  Font-size: 20px;
  

  Qui:

  • "famiglia di font"La proprietà è impostata con i valori Verdana, Ginevra, Tahoma, Sans-Serif. Questo elenco è fornito per garantire che se il primo stile non è supportato dal browser, l'altro verrà applicato.
  • "dimensione del font"Imposta le dimensioni del carattere.

  Ecco l'aspetto finale della pagina HTML dopo aver applicato le proprietà CSS:

  Queste erano tutte informazioni essenziali relative alla struttura di una pagina HTML.

  Conclusione

  Un documento HTML è una struttura di una pagina web. Diversi elementi vengono utilizzati nei documenti HTML che indicano al browser cosa visualizzare sulla pagina web. Questi elementi possono essere accoppiati con i loro tag iniziali e finali o possono essere vuoti, come ad esempio
  ,

  ---

  tag e altro ancora. Gli elementi HTML sono proprietà di styling applicate con l'uso di CSS. Per una migliore comprensione, questo articolo ha spiegato la struttura della pagina HTML con l'aiuto di un esempio pratico.