HTML5 - Creazione di documenti e attributi

HTML5 - Creazione di documenti e attributi

Questa è la parte meno interessante, ma senza dubbio è una delle più critiche. Ogni documento HTML utilizza almeno una parte di questi elementi e talvolta tutti, quindi non fa male che sappiamo come usarli in modo appropriato per creare documenti HTML5 corretto e generale.
Elementi del tipo di documento
Iniziamo con gli elementi di tipo documento. Questi sono i blocchi che danno forma al nostro documento HTML e imposta un contesto iniziale per il browser.
L'elemento doctype
L'elemento doctype è unico nella sua categoria. È buona norma iniziare ogni documento HTML che creiamo con un elemento di tipo doctype. Questo è l'elemento che dice al browser con cui avrà a che fare HTML.
La maggior parte dei browser continuerà a visualizzare correttamente i nostri contenuti se omettiamo il doctype, ma è una cattiva pratica fidarsi che il browser si comporti in questo modo.
La sintassi corretta per applicare un elemento di tipo doctype è il prossimo:
L'elemento html
Questo elemento è principalmente chiamato l'elemento radice e indica l'inizio dell'HTML all'interno del nostro documento.
La sintassi è la seguente:


Contenuti ed elementi qui

L'elemento di testa
L'elemento testa Contiene tutti i metadati per il documento. Nel HTML, i metadati forniscono al browser informazioni sul contenuto e sul markup nel documento, ma in aggiunta possiamo includere script e riferimenti a risorse esterne come i fogli di stile CSS.
La sintassi è la seguente all'interno del documento:



Ciao


L'elemento del corpo
Questo elemento incapsula il contenuto di un documento HTML, è l'opposto dell'elemento head che incapsula i metadati e le informazioni del documento. L'elemento corpo segue sempre l'elemento head, il che significa che è il secondo figlio nella struttura dell'elemento radice html.
Vediamo la sua sintassi:

Esempio

mi piace mele e arance.

Elementi di tipo metadata
Gli elementi del tipo di metadati ci consentono di fornire informazioni sul documento HTML. Non sono contenuti da soli, ma forniscono informazioni sul contenuto che li seguirà. Gli elementi di tipo metadata vengono aggiunti all'elemento head.
Dare un titolo al nostro documento
L'elemento titolo imposta un titolo o un nome al nostro documento. I browser di solito visualizzano il contenuto di questo elemento nella parte superiore della finestra o della scheda.
Vediamo come lo aggiungiamo alla nostra struttura:

Esempio

mi piace mele e arance.

Impostare la base per gli URL relativi
L'elemento base fissa a URL base, in cui quali relativi collegamenti, contenuti nel documento HTML sarà risolto. Un collegamento relativo è uno che omette il protocollo, l'host e la porta dell'URL e viene valutato rispetto a un altro URL. L'elemento di base specifica anche come vengono aperti i collegamenti quando un utente fa clic su di essi e come agisce il browser dopo l'inserimento di un modulo.
Dopo aver visto gli elementi essenziali per il documento, possiamo solo completare con il resto degli elementi che funzionano per i metadati e quindi costruire un documento HTML corretto e che può essere interpretato da qualsiasi browser nel migliore dei modi.
attributi

• dir

Attributo dir specifica la direzione del testo contenuto in un elemento. I valori supportati per esso sono:

• ltr (testo da sinistra a destra)
• rtl (testo da destra a sinistra)

Vediamo un semplice esempio della sua applicazione:

Esempio

dir = "rtl"> Questo è da destra a sinistra

dir = "ltr">Questo è da sinistra a destra

• menù contestuale

Questo attributo ci permette di definire il contesto degli elementi per i menu. Questi appaiono sullo schermo quando l'utente li spara per così dire, ad esempio, quando facciamo clic con il tasto destro su un elemento.

• trascinabile

Attributo trascinabile fa parte del supporto HTML5 per trascina e rilascia e viene utilizzato per indicare quando un elemento può essere trascinato.

• zona di rilascio

Attributo zona di rilascio fa parte del supporto HTML5 per trascina e rilascia y è la controparte dell'attributo trascinabile spiegato sopra.

• nascosto

Attributo nascosto È un attributo booleano che indica che un elemento non è rilevante, quindi non sarà visivamente presente nel documento. I browser interpretano questo attributo in modo da nascondere l'elemento alla vista dell'utente. Vediamone un esempio:

Esempio
Attiva/disattiva



nascosto>

patata dolce	Città
Adam Freeman	Londra
Joe Smith	New York
Anne Jones	Parigi

In questo esempio definiamo una tabella che contiene un elemento tr che rappresenta una riga in cui è presente l'attributo nascosto. Inoltre definiamo un pulsante che quando viene premuto richiama la funzione Javascript toggleNascosto che rimuove l'attributo nascosto.

• andare

Uno degli attributi più noti è andare, che consente di assegnare un identificatore univoco a un elemento. Questi identificatori sono comunemente usati per modellare un elemento o selezionare un elemento con Javascript. Diamo un'occhiata a un esempio di come usiamo l'attributo id per definire lo stile di un elemento.

Esempio

id = "w3clink"href =" http://w3c.org "> Sito web W3C

• controllo ortografico

Attributo controllo ortografico viene utilizzato per specificare se il browser deve verificare la sintassi di alcuni contenuti. L'uso di questo attributo ha senso solo quando viene applicato a un elemento che l'utente può modificare.
Vediamo un esempio:

Esempio
controllo ortografico = "vero"> Questo è un testo sbagliato

• stile

Attributo stile ci permette di definire uno stile CSS direttamente in un elemento, vediamo:

Esempio
style = "sfondo: grigio; colore: bianco; imbottitura: 10px">
Visita il sito Apress

• tabindex

Questo attributo ci consente di controllare l'ordine dei fuochi degli elementi quando vi accediamo tramite il tasto tabulare.
Esempio
Patata dolce: tabindex = "1"/>

Città: tabindex = "- 1"/>

Nazione: tabindex = "2"/>

tabindex = "3"/>

Siamo stati in grado di imparare tutto sugli attributi e su come possono essere applicati agli elementi nel nostro documento HTML. Questo al fine di estendere la sua funzionalità in modo che si adatti alle esigenze del nostro sito web.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo