Il concetto di tag HTML. Tag in HTML

Etichetta ( per favore tag, a volte tag) è un elemento del linguaggio HTML utilizzato per contrassegnare il testo sorgente di una pagina web. I tag sono abbreviazioni o abbreviazioni di parole inglesi racchiuse tra parentesi angolari, ad esempio tag

…

abbreviazione della parola inglese paragrafo, ovvero il testo racchiuso in questo tag verrà riconosciuto dai browser come un paragrafo.

Ogni tag in HTML ha un significato speciale ed è responsabile della visualizzazione di determinati dati. Il caso delle lettere nei nomi dei tag non ha importanza, ad esempio tag

…

e etichetta

…

- È lo stesso. Cioè, i tag possono essere scritti sia in lettere minuscole che maiuscole. In precedenza, era pratica comune scrivere tutti i tag in lettere maiuscole in modo che i tag differissero dal testo normale. Ora non ce n'è più bisogno, poiché molti editor hanno l'evidenziazione della sintassi.

Classificazione dei tag

Esistono più di 90 tag in HTML. In genere, un tag influisce solo su una parte del documento, ad esempio il tag di intestazione di primo livello... In questi casi, vengono utilizzati tag accoppiati: apertura E chiusura. Un tag di apertura (ad esempio, ) crea l'effetto e un tag di chiusura ( ) interrompe l'effetto. Come puoi vedere dall'esempio, il tag di chiusura ha sempre questo simbolo (/) - una barra. Questi tag sono chiamati raddoppia.

Alcuni tag forniscono un effetto una tantum nel punto in cui vengono visualizzati. Ad esempio, un tag a barra orizzontale o un tag di visualizzazione dell'immagine . Tali tag non hanno tag di chiusura. Tali tag sono chiamati non accoppiati.

Tipi di tag

Inoltre, i tag sono divisi in diversi tipi, che differiscono nelle loro funzioni:

• tag del titolo del documento;
• elementi di blocco;
• elementi in linea;
• elementi universali;
• elenchi;
• tavoli;
• cornici.

Questa divisione non è rigida, quindi alcuni tag si trovano in gruppi diversi. Ad esempio, i tag per creare elenchi e

si applicano sia agli elenchi che agli elementi di blocco.
Struttura dell'etichetta

Quando vengono caricati nel browser, i tag stessi non vengono visualizzati, ma influenzano il modo in cui viene visualizzato il loro contenuto. Se un tag è scritto in modo errato, viene completamente ignorato.

Tutti i tag hanno una determinata struttura che deve essere seguita durante la scrittura. Inoltre, quasi tutti i tag hanno vari attributi che possono cambiare il modo in cui viene visualizzato il contenuto.

Diamo un'occhiata alla struttura corretta dei tag contenenti attributi:

• 
• Il tuo webmaster

Ad esempio, ho fornito due tag completamente diversi. Primo single - responsabile della visualizzazione delle immagini, attributo - src="logo.jpg" . Secondo … quello accoppiato è responsabile della creazione dei collegamenti, l'attributo è href = "site" .

Conclusione 1: gli attributi possono avere tag accoppiati e non accoppiati.

Conclusione 2: solo i tag di apertura possono avere attributi, i tag di chiusura non hanno attributi.

Immagine per chiarimenti:



Figura 1. Struttura dei tag HTML

Test di attenzione e conoscenza della sintassi HTML

Diamo un'occhiata all'esempio di una semplice pagina web che abbiamo visto nella lezione.

I tag HTML sono la base del linguaggio HTML. I tag vengono utilizzati per delimitare l'inizio e la fine degli elementi nel markup.

Ogni documento HTML è costituito da un albero di elementi HTML e testo. Ogni elemento HTML è identificato da un tag di inizio (apertura) e di fine (chiusura). I tag di apertura e chiusura contengono il nome del tag.

Tutti gli elementi HTML sono divisi in cinque tipi:

• elementi vuoti - , ,
  , , , , , , , , , , , , ;
• elementi con testo non formattato - , ;
• elementi che visualizzano testo non formattato - , ;
• elementi da un altro spazio dei nomi: MathML e SVG;
• elementi ordinari - tutti gli altri elementi.

La tabella fornisce un elenco completo degli elementi supportati da HTML4 e HTML5. Sono esclusi i tag sperimentali e legacy. Gli elementi aggiunti alla specifica HTML5 sono evidenziati in verde acqua.

Elenco completo degli elementi HTML Tabella 1. Elementi HTML Descrizione dell'etichetta

	Utilizzato per aggiungere commenti.
	Dichiara il tipo di documento e fornisce informazioni di base al browser: lingua e versione.
	Crea collegamenti ipertestuali.
	Identifica il testo come abbreviazione o acronimo. Il testo esplicativo viene specificato utilizzando l'attributo title.
	Specifica le informazioni di contatto dell'autore/proprietario del documento o dell'articolo. Visualizzato in corsivo nel browser.
	È un collegamento ipertestuale con testo corrispondente a un'area specifica su una mappa immagine o un'area attiva all'interno di una mappa immagine. Sempre nidificato all'interno di un tag.
	Una sezione di contenuto che costituisce una parte indipendente di un documento o sito Web, ad esempio un articolo di rivista, un post di blog, un commento.
	Rappresenta il contenuto della pagina che è indirettamente correlato al contenuto principale della pagina/del sito.
	Carica il contenuto audio in una pagina web.
	Imposta un passaggio di testo in grassetto senza aggiungere enfasi o importanza al testo evidenziato.
	Specifica l'indirizzo di base (URL) da cui vengono calcolati tutti gli indirizzi relativi. Ciò aiuterà a evitare problemi quando si sposta la pagina in un'altra posizione, poiché tutti i collegamenti funzioneranno come prima.
	Isola un passaggio di testo scritto in una lingua in cui il testo si legge da destra a sinistra dal resto del testo.
	Visualizza il testo nella direzione specificata dall'attributo dir, sovrascrivendo la direzione del testo corrente.
	Evidenzia il testo come citazione, utilizzato per descrivere virgolette di grandi dimensioni.
	Rappresenta il corpo del documento (contenuto che non fa parte dei metadati del documento).
	Avvolgi il testo su una nuova riga.
	Crea un pulsante interattivo. Puoi inserire contenuto all'interno del tag: testo o immagine.
	Contenitore Canvas per la visualizzazione dinamica di immagini come semplici immagini, diagrammi, grafici, ecc. Per il disegno viene utilizzato il linguaggio di scripting JavaScript.
	Aggiunge una didascalia alla tabella. Inserito subito dopo il tag . Utilizzato per indicare la fonte di una citazione. Visualizzato in corsivo. Rappresenta una parte del codice del programma, visualizzata in una famiglia di caratteri a spaziatura fissa. Seleziona una o più colonne della tabella per la formattazione che non contengono lo stesso tipo di informazioni. Crea un gruppo strutturale di colonne che identifica molte celle logicamente omogenee. L'elemento viene utilizzato per associare il valore dell'attributo value, che è in un formato leggibile dalla macchina e può essere elaborato da un computer, al contenuto del tag. Elemento contenitore per un elemento di elenco a discesa. I valori delle varianti vengono inseriti negli elementi. Utilizzato per descrivere un termine da un tag. Contrassegna il testo come eliminato barrandolo. Crea un widget interattivo che l'utente può aprire o chiudere. Rappresenta un contenitore per contenuti, il titolo visibile del widget è inserito nel tag. Identifica una parola come termine mettendola in corsivo. Il testo che segue dovrebbe contenere una definizione di questo termine. Un elemento interattivo con cui l'utente interagisce per completare un'attività, ad esempio una finestra di dialogo, una finestra di ispezione o una finestra. Senza l'attributo open, non è visibile all'utente. Un tag contenitore per le sezioni di un documento HTML. Utilizzato per raggruppare elementi di blocco per la formattazione con stili. Un tag contenitore contenente un termine e la relativa descrizione. Utilizzato per specificare un termine. Evidenzia passaggi importanti del testo visualizzandoli in corsivo. Un tag contenitore per incorporare contenuto interattivo esterno o un plug-in. Raggruppa gli elementi correlati in un modulo disegnando un riquadro attorno ad essi. Titolo/didascalia per l'elemento. Un tag contenitore autonomo per contenuti quali illustrazioni, diagrammi, fotografie, esempi di codice, solitamente con una didascalia. Definisce l'area finale (piè di pagina) di un documento o sezione. Un modulo per la raccolta e l'invio di informazioni dagli utenti al server. Non funziona senza l'attributo action. Crea sei livelli di intestazioni per le sezioni correlate. Un elemento contenitore per i metadati del documento HTML, come , , , , . Sezione di informazione introduttiva di un sito o di un gruppo di link di navigazione. Può contenere uno o più titoli, logo, informazioni sull'autore. Una linea orizzontale per la divisione tematica dei paragrafi. L'elemento radice di un documento HTML. Indica al browser che questo è un documento HTML. È un contenitore per tutti gli altri elementi html. Il corsivo è un passaggio di testo senza dargli ulteriore enfasi. Crea un frame in linea caricando un altro documento nel documento HTML corrente. Incorpora immagini in un documento HTML utilizzando l'attributo src, il cui valore è l'URL dell'immagine incorporata. Crea campi modulo completo in cui l'utente può inserire dati. Evidenzia il testo sottolineandolo. Utilizzato per evidenziare le modifiche apportate a un documento. Seleziona il testo che l'utente deve inserire utilizzando la tastiera in un carattere a spaziatura fissa. Utilizzato per memorizzare informazioni aggiuntive sulla pagina. Queste informazioni vengono utilizzate dai browser per elaborare la pagina e dai motori di ricerca per indicizzarla. In un blocco possono esserci più tag, poiché a seconda degli attributi utilizzati contengono informazioni diverse. Indicatore di misura in un dato intervallo. Una sezione di un documento contenente i collegamenti di navigazione per il sito. Definisce una sezione che non supporta lo scripting. Contenitore per incorporare contenuti multimediali (ad esempio audio, video, applet Java, ActiveX, PDF e Flash). Puoi anche inserire un'altra pagina web nel documento HTML corrente. Il tag viene utilizzato per passare i parametri del plugin. Elenco numerato ordinato. La numerazione può essere numerica o alfabetica. Un contenitore con un titolo per un gruppo di elementi. Specifica un'opzione/opzione da selezionare dall'elenco a discesa , o . Campo per visualizzare il risultato di un calcolo calcolato utilizzando lo script. Paragrafi nel testo. Definisce i parametri per i plugin incorporati utilizzando l'elemento. Un elemento contenitore contenente un elemento e zero o più elementi. Di per sé non visualizza nulla. Consente al browser di selezionare l'immagine più appropriata. Restituisce il testo senza formattazione, preservando gli spazi e le interruzioni di testo. Può essere utilizzato per visualizzare codice computer, messaggi e-mail, ecc. Un indicatore del completamento di un'attività di qualsiasi tipo. Definisce una breve citazione. Contenitore per simboli dell'Asia orientale e loro decodificazione. Definisce il testo nidificato come componente base dell'annotazione. Aggiunge una breve descrizione sopra o sotto i caratteri contenuti nell'elemento, visualizzata con un carattere più piccolo. Contrassegna il testo incorporato come annotazione aggiuntiva. Visualizza testo alternativo se il browser non supporta l'elemento. Visualizza il testo non corrente barrato. Utilizzato per visualizzare il testo che rappresenta il risultato del codice del programma o dell'esecuzione dello script, nonché i messaggi di sistema. Visualizzato in carattere a spaziatura fissa. Utilizzato per definire uno script lato client (solitamente JavaScript). Contiene testo di script o punta a un file di script esterno utilizzando l'attributo src. Definisce un'area logica (sezione) di una pagina, solitamente con un'intestazione. Un elemento di controllo che consente di selezionare valori da un insieme proposto. I valori delle varianti vengono inseriti in . Visualizza il testo con una dimensione del carattere più piccola. Specifica la posizione e il tipo di risorse multimediali alternative per , , . Contenitore per elementi in linea. Può essere utilizzato per formattare passaggi di testo, ad esempio evidenziando singole parole. Dà enfasi al testo, evidenziandolo in grassetto. Include fogli di stile incorporabili. Specifica la scrittura in pedice dei simboli, ad esempio l'indice degli elementi nelle formule chimiche. Crea un titolo visibile per il tag. Visualizzato con un triangolo pieno, facendo clic su di esso è possibile visualizzare i dettagli del titolo. Specifica l'ortografia dei caratteri in apice. Tag per creare una tabella. Definisce il corpo della tabella. Crea una cella di tabella. Utilizzato per dichiarare frammenti di codice HTML che possono essere clonati e inseriti in un documento tramite uno script. Il contenuto di un tag non ne è figlio. Crea campi di immissione testo di grandi dimensioni. Definisce il piè di pagina della tabella. Crea un titolo di cella di tabella. Definisce il titolo della tabella. Definisce data/ora. Il titolo di un documento HTML che appare nella parte superiore della barra del titolo del browser. Può anche apparire nei risultati di ricerca, quindi è necessario tenerne conto quando si fornisce un titolo. Crea una riga della tabella. Aggiunge i sottotitoli per gli elementi e . Evidenzia un passaggio di testo sottolineandolo, senza enfasi aggiuntiva. Crea un elenco puntato. Evidenzia le variabili dei programmi visualizzandole in corsivo. Aggiunge file video alla pagina. Supporta 3 formati video: MP4, WebM, Ogg. Indica al browser il punto in cui una riga lunga potrebbe interrompersi. Foglio informativo con tag Per facilità d'uso, ho raggruppato i tag in sezioni tematiche, aggiungendo valori di proprietà di visualizzazione per ciascun tag. Per andare alla tabella, clicca sull'immagine. L'HTML è un normale file di testo con estensione .htm (html). Per creare una pagina semplice all'inizio, quando ti stai allenando, hai solo bisogno di un blocco note. Apri il blocco note e scrivi del testo. Ogni elemento HTML è un tag circondato da parentesi. Qualsiasi file, pagina html inizia con un tag e termina con un tag. Questo tag indica semplicemente al browser (questo è il programma in cui visualizzi le pagine Internet) che questo documento è un documento di markup html. Il tag indica l'inizio del documento html e il tag di chiusura indica la fine del documento html. All'interno di questi tag ci sono molti altri tag importanti. Immediatamente dopo il tag ci sono i tag che indicano il titolo della pagina e il corpo della pagina. La mia prima pagina HTML Il tag indica il titolo della finestra quando viene visualizzata questa pagina. Ora puoi creare un nuovo documento di testo nel Blocco note, copiare il testo presentato sopra e salvarlo come Pagina1.html ed eseguirlo nel browser, vedrai il nome della pagina nella barra del titolo della finestra del browser e un pagina bianca, perché Non mostriamo nulla nel corpo della pagina nei tag. Quindi, il testo sopra sarà per noi lo scheletro di base di qualsiasi pagina web. Tag accoppiati e non accoppiati! , , Questi sono solo tag accoppiati - quei tag che si presentano in coppia: un tag e la sua chiusura, un tag di chiusura con il simbolo /. Per i tag accoppiati, il valore contenuto tra l'inizio e la fine del tag è l'azione del tag. L'azione continuerà finché non verrà trovato un tag con il simbolo /. Tag non accoppiati: non hanno un tag di chiusura. Di seguito forniremo esempi di tali tag. — Il titolo della pagina html, che include parole chiave per motori di ricerca, vari script, ecc. — Il corpo del documento html stesso. Etichetta non abbinata. Nota: nella maggior parte dei casi, quando si creano siti Web ora, vengono utilizzate routine, plug-in, ecc. già pronti. – per una creazione più rapida del sito, ma per applicare e utilizzare tali routine e modelli è comunque richiesta una conoscenza minima dei dati della sessione. Hai già letto che tutte le lingue sono composte da tag. In questa lezione daremo uno sguardo più approfondito ai tag HTML. Nel linguaggio HTML i tag sono divisi in tag singoli (non accoppiati) e tag accoppiati. Pertanto, i singoli tag HTML sono costituiti da un tag, ovvero non hanno un tag di chiusura. E i descrittori accoppiati hanno un tag di apertura e chiusura. Tag HTML singoli I tag singoli non hanno un tag di chiusura. Per esempio: , . Prima scrivevano così: , , ora questo stile di scrittura dei singoli tag non è rilevante, quindi non scrivere così. I tag singoli più utilizzati: - passare a una nuova riga, - linea di divisione, - inserire un'immagine. Tag HTML accoppiati Esistono molti altri tag accoppiati. Un descrittore accoppiato ha un tag di apertura e di chiusura. Il tag accoppiato forma un contenitore. Il contenuto del contenitore è ciò che si trova tra i tag di apertura e chiusura. Nell'esempio di questo articolo, hai visto il tag What are descriptors in HTML? , quindi questo è un tag accoppiato, il contenuto di questo tag è il testo "Cosa sono i tag in HTML?" Il suo inizio è il tag e la sua fine è . L'errore principale dei principianti nello scrivere tag accoppiati è la confusione nell'annidamento. Ad esempio, questa è la voce corretta: Paragrafo in grassetto . Ed ecco l'errore: Paragrafo in grassetto , un documento HTML con tale layout è considerato non valido. Per non confondere la nidificazione, fai così: crea tag accoppiati, poi annidane altri al loro interno, e alla fine scrivi il testo all'interno di entrambi i tag Come scrivere correttamente i tag accoppiati . Cosa c'è di nuovo in HTML5 in termini di tag? HTML5 è un'estensione di HTML4, quindi conserva la maggior parte o tutti i descrittori di HTML4 e ne aggiunge i propri. HTML5 ha introdotto tag speciali per dividere il sito in blocchi principali: intestazione, menu, piè di pagina, barra laterale e contenuto. Perché è importante imparare a utilizzare i tag? I motori di ricerca Yandex e Google sono sensibili al layout dei documenti HTML, verificandone la validità. Cercano parole chiave racchiuse in descrittori speciali e così via. Ma questa sezione non riguarda questo. Questo vale per la promozione (SEO). Come imparare tutti i tag HTML? Sì, ci sono parecchi tag. Ma non è necessario insegnarli appositamente. Finché ti eserciterai a scrivere qualcosa, tutti i descrittori, accoppiati e singoli, saranno facilmente ricordati. Nel tempo, ovviamente. Un elemento HTML è l'unità strutturale di base di una pagina web, scritta in HTML. Tag HTML accoppiati e singoli La sintassi degli elementi HTML costituiti da tag accoppiati è: L'elemento inizia con un tag di apertura. L'elemento termina con un tag di chiusura. Il contenuto di un elemento è tutto ciò che si trova tra i tag di apertura e chiusura. Il contenuto può essere testo e/o altri elementi HTML. Nota: non dimenticare di inserire un "/" nel tag di chiusura, indica al browser che il tuo elemento è terminato e che ciò che viene dopo è un altro elemento. Se non inserisci il carattere "/" nel tag di chiusura, il browser lo scambierà per un nuovo elemento annidato in uno precedente, che il browser pensa non sia ancora chiuso. La sintassi per gli elementi HTML costituiti da singoli tag è: L'elemento è costituito solo da un tag di apertura. Gli elementi costituiti da singoli tag sono detti vuoti. Ci sono un totale di 16 tag singoli in HTML: Elementi nidificati Gli elementi HTML costituiti da tag accoppiati possono contenere qualsiasi altro elemento oppure possono essere annidati all'interno di altri elementi e la profondità di annidamento degli elementi non è limitata. L'esempio seguente è costituito da tre elementi, due dei quali sono nidificati: Il mio primo paragrafo Quando un elemento è nidificato all'interno di un altro, è necessario assicurarsi che l'elemento nidificato inizi e finisca all'interno dello stesso elemento. Quindi, ad esempio, il seguente codice non è corretto: Questo è molto Interessante Qui l'elemento va oltre i limiti dell'elemento Esempio con annidamento corretto: È molto interessante Qui l'elemento è annidato correttamente: è completamente all'interno dell'elemento Caratteri degli spazi bianchi Il browser ignora gli spazi bianchi nel codice HTML, quindi puoi utilizzarli a tuo vantaggio per rendere il tuo codice più leggibile. I caratteri degli spazi bianchi includono tabulazioni, interruzioni di riga e spazi regolari; possono essere utilizzati in qualsiasi quantità. Codice di esempio che utilizza gli spazi bianchi: Titolo Il mio primo titolo Il mio primo paragrafo Il codice di esempio potrebbe essere scritto senza utilizzare affatto gli spazi, ma tale codice sarebbe meno leggibile: TitoloIl mio primo titolo Il mio primo paragrafo Man mano che il codice del documento HTML diventa più grande e complesso nel tempo, vedrai che l'uso degli spazi bianchi migliora effettivamente la leggibilità del codice. I migliori articoli sull'argomento Cos'è un plug-in in un aggiornamento del computer? Come puoi leggere gratuitamente i messaggi di altre persone su Odnoklassniki? Cosa fare se il video non si espande a schermo intero Categorie: Programmi Sicurezza Windows 10 Ferro Windows 8 In contatto con Errori © 2024 bumotors.ru. Come configurare smartphone e PC. Portale informativo.