Per strutturare e progettare il testo, vengono utilizzati i tag - parole chiave speciali racchiuse tra parentesi< и >... La maggior parte di essi ha una coppia di chiusura con una barra "/" davanti al nome del tag. Ciò consente di contrassegnare alcune parti del testo. Per esempio:

Come puoi vedere dall'esempio, i tag non vengono visualizzati nel browser, ma possono influenzare la visualizzazione del testo.

Alcuni tag non sono progettati per evidenziare un'area di testo, ma sono responsabili di un singolo elemento del documento (ad esempio un'immagine o un pulsante). Tali tag non richiedono una coppia di chiusura e la barra "/" viene posizionata prima della parentesi di chiusura del tag. Per esempio,
(interruzione di riga) o

Un elemento (o nodo) è una raccolta di tag di inizio e di fine, insieme al loro contenuto, e tag vuoti. Gli elementi sono gli elementi costitutivi di un documento. Per motivi di leggibilità, visualizzeremo gli elementi costituiti da tag vuoti con una barra e quelli associati senza di essa.

Sintassi e motore di visualizzazione

Ricordiamo che una delle funzioni del motore di presentazione HTML 5 è quella di garantire la compatibilità del nuovo standard con i documenti HTML/XHTML esistenti. Ciò è dovuto alla presenza di tre "modalità" (HTML5, XHTML5, DOM5 HTML) dell'interprete, ognuna delle quali supporta la propria sintassi.

In generale, lo standard HTML consente di digitare i tag in ogni caso. Inoltre, puoi omettere alcuni tag di chiusura (e la barra nei tag singoli). In HTML 5, anche questo è consentito (sintassi di presentazione HTML5), ma tale codice non sarà compatibile con la sintassi XML / XHTML, il che rende difficile l'uso di tecnologie compatibili con XML come, ad esempio, i microformati. Per questo motivo, ti consigliamo di scrivere il tuo codice utilizzando la sintassi XHTML (il documento viene interpretato nella rappresentazione XHTML5). Sulla base di questo, verrà condotta un'ulteriore presentazione.

Per compatibilità con i browser meno recenti che non comprendono la sintassi XHTML, è consigliabile lasciare uno spazio tra il nome e la barra "/" nei singoli tag, sebbene questa sia più un'abitudine utile che una regola:

Regola di nidificazione dei tag

I tag accoppiati (contenitori) possono contenere non solo testo, ma anche altri tag. In questo caso, si applica una regola: i tag devono essere chiusi nell'ordine inverso a quello in cui sono stati aperti. Prendere nota della posizione dei tag nell'esempio seguente:

Per ricordare questa regola, immagina che i tag stiano annidando bambole. Puoi metterli uno dentro l'altro, ma non puoi metterne una metà dentro e l'altra fuori. Questa regola non si applica ai tag vuoti che semplicemente non hanno una coppia finale.

Gli elementi nidificati sono chiamati figli e quelli in cui sono nidificati sono chiamati genitori. Questa è una proprietà relativa, poiché ogni nodo può essere sia figlio di uno che padre di altri. L'elemento di livello superiore (non genitore) è chiamato elemento radice.

Attributi dei tag

Qualsiasi tag di inizio (o vuoto) può contenere attributi che definiscono alcune proprietà aggiuntive per l'intero elemento. Gli attributi vengono scritti subito dopo il nome del tag, separati da esso e tra loro da uno spazio:

<а href="http://www.example.com/" target="_blank">Collegamento

In questo esempio, abbiamo specificato il tag (collegamento ipertestuale) due attributi. Abbiamo assegnato il valore http://www.example.com/ al primo (href) responsabile dell'indirizzo del collegamento. Il valore _blank dell'attributo target significa che quando si fa clic sul collegamento, la pagina specificata in href dovrebbe aprirsi in una nuova scheda del browser.

Alcuni attributi possono avere un solo valore valido e solo due possibili stati: quando l'attributo è presente nell'elemento e, di conseguenza, quando è assente. In questo corso, tali attributi sono chiamati booleani, per analogia con le variabili in matematica. Il valore di un attributo booleano è solitamente lo stesso del suo nome. Ad esempio, disabilitato = "disabilitato". In generale, possono essere omessi specificando solo il nome dell'attributo (cosiddetti attributi abbreviati). Tuttavia, per la compatibilità con la sintassi XHTML/XML, sono necessari dei valori. Inoltre, tutti i nomi degli attributi devono essere in minuscolo e racchiusi tra virgolette, sebbene HTML 5 non applichi questa limitazione.

Non consigliato:
Consigliato:

Simboli speciali

Ma cosa succede se è necessario utilizzare un doppio apice nel valore dell'attributo? O nel testo del documento - una parentesi triangolare? Dopotutto, quindi non è chiaro quale delle virgolette chiude l'attributo e quale si riferisce al suo valore, e la parentesi è l'inizio del tag o è un segno matematico "meno"? In questo e in molti altri casi vengono in soccorso speciali caratteri HTML.

I caratteri speciali in HTML vengono implementati utilizzando codici mnemonici interpretati dal browser. Ad esempio, le virgolette doppie (") possono essere stampate con il codice", e il simbolo dell'euro (€) - €. Tutti i codici mnemonici iniziano con una e commerciale (&) e terminano con un punto e virgola (;). Affinché la consueta e commerciale nel testo non venga confusa con l'inizio del codice mnemonico, deve essere sempre visualizzata con il codice &. Anche i caratteri UTF-8 possono essere visualizzati utilizzando codici mnemonici. Tali codici mnemonici sono della forma xxx; , dove xxxx è il codice decimale del carattere nella codifica UTF-8. Ad esempio, © apparirà come "©". Molti dei caratteri UTF-8 hanno controparti mnemoniche di testo. Lo stesso simbolo "" può essere designato in questo modo:.

9 commenti

Ho letto da qualche parte che l'attributo target = "_blank" non è molto buono da usare, viola qualche standard? Ho letto che lo sviluppatore non può decidere per l'utente come aprire il collegamento (in una nuova scheda o nella stessa), non importa quanto sia buono. vorrei conoscere la tua opinione. L'attributo target = "_blank" non è incluso nello standard XHTML. Per preservare la validità delle pagine XHTML, il valore target viene sovrascritto (se necessario, ovviamente) utilizzando JavaScript. In HTML, questo è un attributo perfettamente valido e non c'è bisogno di tali trucchi.

Per quanto riguarda l'opportunità, sono d'accordo che non dovrebbe essere abusato, poiché la maggior parte degli utenti conosce un modo per aprire qualsiasi collegamento in una nuova scheda e il pulsante "Indietro" è sempre a portata di mano. Eppure, senza target = "_blank" c'è qualche possibilità di perdere un utente che si è "dimenticato" di tornare, mentre con esso c'è la possibilità di incorrere nella giusta rabbia dello stesso utente. Si scopre un'arma a doppio taglio.

Nella mia pratica, di norma, utilizzo questo attributo solo per i collegamenti aggiunti dagli utenti (nei commenti, ad esempio), ad es. il cui passaggio non era previsto in fase di redazione dell'articolo. E anche nelle situazioni in cui è davvero necessario: ad esempio, su pagine dove, al momento di un clic, l'utente può scaricare un video, ascoltare la radio, chattare, ecc.

Sembra che sia in HTML 5 che puoi lasciare aperti i tag associati se seguiti da un altro tag. Ad esempio, nelle liste, il tag li può ora essere lasciato aperto. Katerina, puoi, sì. E anche in HTML 4. In questo caso, i browser devono chiuderli da soli. Tuttavia, in alcuni casi, (IE9, ad esempio) lo fanno in modo errato, il che porta a errori di layout non facili da individuare. È probabile che anche i parser XML (se è necessario utilizzarli) incappino in questo rake. E in generale, non ci sono vantaggi da tali risparmi nel codice. A mio parere, è ancora meglio chiudere i tag. I tipografi HTML 5 non si preoccupano molto di IE. Non supporta molte funzionalità HTML5 - Confronto browser Wikipedia (HTML5). E su htmlbook.ru c'è un elenco di tag che possono essere saltati - http://htmlbook.ru/samhtml5/sintaksis-html5

Ci sono abbastanza utenti di IE da lasciarli indietro. Il grazioso degrado è il nostro tutto. Per quanto riguarda i tag accoppiati non chiusi, hai ragione: se segui rigorosamente questo elenco, non dovrebbero esserci problemi nemmeno in IE, queste regole sono in vigore dall'HTML 3.2.

Grazie, lo leggerò) Grazie per la rivelazione! Roba fantastica, sicuramente da usare.

Ministero della Pubblica Istruzione della Repubblica di Bielorussia

UNIVERSITÀ TECNICA NAZIONALE DELLA BIELORUSSIA

Dipartimento di "Fondamenti aziendali"

Relazione sull'attuazione del lavoro di laboratorio n. 1

"STRUTTURA DEL DOCUMENTO IPERTESTUALE"

nella disciplina "Tecnologie dell'informazione"

Completato da: gruppo studentesco 105032 Bychko E.V.

Accettato da: insegnante Dashkevich N.V.

Lavoro di laboratorio n. 1

STRUTTURA DEL DOCUMENTO IPERTESTUALE

Scopo del lavoro: acquisire le competenze iniziali per creare i documenti Internet più semplici; imparare a formattare le pagine Web generate.

Completamento dei lavori

Attività 1: creare una struttura di file

Utilizzando gli strumenti di Explorer, è stata creata una struttura di file nella sua cartella di lavoro, mostrata in Fig. 1.1.

Riso. 1.1. Struttura del file

Attività 2. Creazione di un documento HTML

Utilizzando l'applicazione Blocco note, creare un documento HTML che, quando visualizzato nei browser, visualizzi il testo "Contenuto barra del titolo" nella barra del titolo della finestra e il testo "Questo è un documento HTML simile" nell'area principale. Figura 2.1. Viene presentato il documento HTML.

Riso. 2.1. Documento HTML

La visualizzazione di un documento in un browser è mostrata nella Figura 2.2.

Riso. 2.2. Documento nel browser

Attività 3. Modifica del documento HTML

È necessario modificare il documento in modo tale che, quando viene visualizzato in un browser, nella barra del titolo venga visualizzato il testo "Vista generale del documento html" e il testo venga visualizzato nella parte principale del documento:

“Ecco alcuni modi di lavorare,

che domineremo:

dividere il testo

allineamento del testo

creazione di intestazioni

lavorare con le tabelle."

La struttura del documento HTML è mostrata nella Figura 3.1.

Riso. 3.1. Documento HTML

Visualizzazione di un documento in un browser (Fig. 3.2).

Riso. 3.2. Documento nel browser

Domande di controllo

Cos'è l'ipertesto?

Qual è la struttura del documento HTML più semplice?

La struttura del documento HTML più semplice è simile a questa:

PRIMO TESTO IN PAGINA

Come viene impostato l'inizio di un paragrafo di testo?

Per impostare un paragrafo iniziale, devi utilizzare un tag di coppia: l'inizio e la fine del paragrafo.

Che cos'è il markup HTML per l'ipertesto?

HTML è un linguaggio di markup con tag per i documenti. Qualsiasi documento HTML è un insieme di elementi e l'inizio e la fine di ciascun elemento sono indicati da segni speciali - tag. Gli elementi possono essere vuoti, ovvero non contengono testo o altri dati. In questo caso, il tag finale di solito non è specificato. Inoltre, gli elementi possono avere attributi che definiscono alcune delle loro proprietà. Gli attributi sono specificati nel tag di apertura.

In che modo i tag non accoppiati sono diversi dai tag accoppiati?

I tag HTML possono essere accoppiati o disaccoppiati. I tag senza corrispondenza influiscono sull'intero documento o definiscono un effetto una tantum nel punto in cui vengono inseriti. Quando si utilizzano tag accoppiati, al documento vengono aggiunti tag di apertura e chiusura, che influiscono sulla parte del documento racchiusa tra di essi.

Etichetta (pl. tag, a volte tag) È un elemento 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 es. tag

…

scorciatoia per la parola inglese paragrafo, ovvero il testo racchiuso in questo tag verrà riconosciuto dai browser come 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 il tag

…

- Questo è lo stesso. Cioè, i tag possono essere scritti sia in lettere minuscole che maiuscole. Era generalmente accettato che tutti i tag dovessero essere scritti in lettere maiuscole per distinguere i tag dal testo normale. Ora non c'è più bisogno, dal momento che molti editor hanno l'evidenziazione della sintassi.

Classificazione dei tag

Ci sono più di 90 tag in HTML in totale. Di norma, un tag interessa solo una parte del documento, ad esempio il tag di intestazione di primo livello

…

... In tali casi, vengono utilizzati tag accoppiati: apertura e copertura... Tag di apertura (ad esempio,

) crea l'effetto e la chiusura (

) - ne estingue gli effetti. Come si vede dall'esempio, il tag di chiusura ha sempre il seguente simbolo ( / ) - barra. Tali tag sono chiamati accoppiato.

Alcuni tag hanno un effetto una tantum dove appaiono. Ad esempio, il tag della barra orizzontale

---

o tag di visualizzazione dell'immagine ... Tali tag non hanno tag di fine. Tali tag sono chiamati tag non accoppiati.

Tipi di tag

Inoltre, i tag sono suddivisi in diversi tipi, che si differenziano per le 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 sono in gruppi diversi. Ad esempio, tag per la creazione di elenchi

e
si applicano sia agli elenchi che agli elementi di blocco.

Struttura dei tag

Quando vengono caricati in un browser, i tag stessi non vengono visualizzati, ma influiscono sul modo in cui viene visualizzato il loro contenuto. Se c'è un errore nell'ortografia del tag, viene ignorato del tutto.

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

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

1. 
2. Stesso Webmaster

Ad esempio, ho fornito due tag completamente diversi. Primo single - è responsabile della visualizzazione di immagini, attributi - src = "logo.jpg"... Secondo … accoppiato è responsabile della creazione di collegamenti, attributi - href = "sito".

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

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

Immagine per chiarimento:



Hey! Bene, hai fatto la tua prima pagina? Molto bene! Parliamo ora dei tag: cosa sono e perché servono.

La creazione di una pagina Web utilizzando HTML viene eseguita utilizzando i tag. Ogni tag contiene un elemento specifico. E tutti insieme formano esattamente la pagina che viene visualizzata nelle finestre del browser. Queste sono le basi dell'HTML. Parliamo di loro in modo più dettagliato.

Qualsiasi tag, indipendentemente dallo scopo e dalla posizione, viene inserito tra i caratteri < e > situati rispettivamente all'inizio e alla fine del tag.

Esempio:

Tag accoppiati

I tag sono disponibili in due gusti. La prima comprende stanze abbinate, che comprendono due componenti, da cui hanno preso il nome. Questi componenti sono chiamati tag di inizio e fine. Il cartellino di chiusura si differenzia dalla sua coppia per la presenza del carattere / che si trova subito dopo < .

Il secondo tipo di tag include tag singoli. E, come suggerisce il nome, non sono accoppiati come un secondo tag di chiusura.

Tag HTML singoli

Quando si crea una pagina con HTML, lo scopo principale di un abbinamento di tag è contrassegnare l'inizio e la fine di un pezzo di testo specifico. Tuttavia, vengono utilizzati anche i tag, il cui compito non ha nulla a che fare con la selezione di frammenti di testo.

Esempi di tali tag includono quelli che consentono di impostare una striscia di separazione o aggiungere un'immagine alla pagina. E sono questi tag che sono singoli, poiché, per così dire, svolgono la loro funzione senza una coppia.

Questi tag includono:
,

---

, .

Linea
Riga successiva

Se vedi un formato di registrazione a tag singolo come questo da qualche parte
quindi tieni presente che questo è il modo in cui sono stati esposti nelle versioni precedenti di HTML. Ma ora che HTML 5 è disponibile, la barra è facoltativa.

Attributi dei tag HTML

Inoltre, quando si parla delle basi dell'HTML, non si possono non menzionare gli attributi dei tag. Per alcuni tag, l'uso degli attributi è facoltativo, ma perfettamente accettabile. E in alcuni casi, sono necessari senza ambiguità.

Un esempio di un caso del genere sarebbe il tag , progettato per inserire un'immagine nella pagina. L'attributo richiesto per questo tag è src, con cui puoi indicare dove si trova esattamente l'immagine. Questo viene fatto in modo che il browser possa aprire l'immagine. Se l'indirizzo dell'immagine viene specificato senza un attributo, l'immagine non verrà visualizzata sulla pagina.

Di norma, nella maggior parte dei casi, i tag e gli attributi sono scritti in HTML in questo modo:

<имя-тега атрибут1="значение1" атрибут2="значение2" …>

Un tag può avere uno o più attributi. Puoi vedere gli esempi di seguito.

......

Quindi, spero che tutto sia semplice e diretto. Ma se all'improvviso qualcosa, sentiti libero di chiedere: ti aiuterò sicuramente. Nelle prossime lezioni, analizzeremo i vari tag ed esploreremo a cosa serve ciascuno di essi.