Con il rilascio HTML5, molte nuove funzionalità sono state aggiunte all'HTML. E cosa ancora meglio, alcuni browser supportano già alcune di queste funzionalità mentre altri si stanno muovendo verso di essa. Puoi seguire l'aggiunta di queste funzionalità ai browser in questa pagina.
1. Nuovo tipo di documento e set di caratteri.
Uno dei punti di forza di HTML5 è la sua semplicità.
Sì, questo è tutto. Letteralmente due parole. Questa semplicità è probabilmente dovuta al fatto che HTML5 esiste da solo e non rimane parte di SGML.
Charset è anche molto semplice, usa utf-8 ed è impostato allo stesso modo, letteralmente con un tag:
2. Nuova struttura
HTML5 comprende che una pagina web ha una struttura, proprio come, ad esempio, un libro. Di solito si tratta della navigazione, del contenuto stesso, del menu laterale (barra laterale) e dell'intestazione. E HTML5 fornisce tag per tutti questi elementi.
- definisce le sezioni della pagina
- definisce il titolo della pagina
– definisce l'articolo o il contenuto principale della pagina
– definisce un'immagine, abstract dell'articolo
3. Nuovi elementi integrati.
Questi nuovi elementi definiscono alcuni concetti di base e designano elementi di pagina:
- per indicare il contenuto
– per indicare alcune misurazioni, come lo spazio su disco
4. Nuovo supporto per le pagine dinamiche
HTML 5 è stato progettato per semplificare le attività degli sviluppatori web, quindi ci sono molte nuove funzionalità per supportare le pagine dinamiche.
Menu contestuale - HTML 5 supporterà la creazione e l'utilizzo di menu contestuali nelle pagine Web e nelle applicazioni
attributo asincrono: questo tag indica al browser che lo script deve essere caricato in modo asincrono in modo che non rallenti il resto della pagina.
- crea una tabella che viene creata da un database o da un'altra origine di pagina dinamica
- definisce le azioni che dovrebbero verificarsi quando l'elemento dinamico viene attivato
5. Nuovi tipi di moduli
HTML5 supporta tutti i vecchi tipi di modulo, ma ne sono stati aggiunti anche di nuovi:
appuntamento
datetime-local
mese
numero
gamma
e-mail
6. Nuovi articoli
Ci sono alcuni nuovi elementi in HTML5:
Ciò potrebbe consentirti di aggiungere immagini o elementi grafici ai suggerimenti o semplicemente creare elementi grafici dinamici sulla pagina in movimento.
7.Articoli rimossi
Ci sono anche elementi HTML4 che non possono più essere utilizzati in HTML5. La maggior parte di essi sono obsoleti, quindi tali azioni non sono sorprendenti.
Traduzione
Le tecnologie web sono in continua evoluzione. Ogni giorno vengono creati nuovi siti Web che estendono la potenza dell'HTML. HTML 4 è in circolazione da quasi un decennio, ma gli editori sono alla ricerca di nuovi modi per estendere le funzionalità del formato. Tuttavia, la varietà di lingue e browser limita alcune delle sue capacità.
Per offrire agli sviluppatori un prodotto più flessibile e interoperabile e per rendere i progetti più interattivi e interessanti, HTML 5 introduce ed estende una gamma di funzionalità, inclusi controlli dei moduli, API, contenuti multimediali, struttura e semantica.
Il lavoro su HTML 5 è iniziato nel 2004. Gli sviluppi sono attualmente in corso come parte di uno sforzo di collaborazione tra il WG HTML W3C e il WHATWG. Molte aziende famose sono coinvolte nello sviluppo, tra cui: Apple, Mozilla, Opera e Microsoft, e una serie di altre organizzazioni e individui con interessi e background diversi.
Si noti che la specifica è ancora in fase di sviluppo ed è tutt'altro che completa. Pertanto, è possibile che le funzionalità menzionate in questo articolo possano cambiare in futuro. Questo articolo ha lo scopo di descrivere le nuove funzionalità del formato HTML versione 5.
Struttura
HTML 5 introduce una serie di nuovi elementi che semplificano notevolmente la struttura della pagina. La maggior parte delle pagine HTML4 contiene una serie di strutture comuni, ad esempio, intestazioni e piè di pagina (intestazione e piè di pagina di pagina) e colonne, e oggi sta diventando una tradizione evidenziarli utilizzando elementi div, assegnandogli una classe o un id.
L'illustrazione mostra un tipico layout a 2 colonne che utilizza elementi div, a cui è assegnata una classe o un ID. La struttura contiene - l'"header" della pagina, il footer, il menu di navigazione e il contenuto, suddiviso in 2 colonne -
L'uso di elementi div è preferibile, perché nella corrente Versioni HTML 4 manca della semantica per descrivere queste parti in modo più specifico. HTML 5 questo problema risolve introducendo nuovi elementi, ognuno dei quali ha il proprio nome separato.
Il codice del documento è simile a questo:
...
...
...
...
...
Ci sono diversi vantaggi nell'usare questi elementi. Se utilizzato in combinazione con le intestazioni degli elementi (h1 - h6), consente di incorporare una sottosezione con un'intestazione ad ogni livello, al contrario dei possibili 6 livelli nella versione precedente di HTML. La specifica include un algoritmo dettagliato per la generazione dei bordi. Questi elementi possono essere utilizzati come strumenti di creazione e browser per generare un sommario e aiutare gli utenti a navigare in un documento.
Ad esempio, la struttura seguente è stratificata con elementi h1 annidati:
Livello 1
Livello 2
Livello 3
Si noti che per la massima compatibilità con browser diversi, puoi utilizzare diversi livelli di intestazione come h2, h3, ecc.
Definendo lo scopo delle sezioni su una pagina utilizzando elementi di sezione specifici, questa tecnologia può aiutare l'utente a navigare più facilmente nella pagina. Ad esempio, un utente può passare facilmente a una sezione di menu o passare rapidamente da un articolo all'altro senza che uno sviluppatore debba creare un collegamento di questo tipo. Gli sviluppatori possono anche festeggiare, perché sostituendo gli elementi div con gli elementi appropriati, il codice sorgente sarà più semplice e "pulito".
L'elemento "intestazione". rappresenta il titolo della pagina. Questa sezione può contenere non solo l'intestazione in quanto tale, ma anche eventuali sottotitoli che aiuteranno l'utente a comprendere meglio il contenuto della pagina.
Un'anteprima di HTML 5
Di Lachlan Hunt
Esempio di blog
Inserisci qui lo slogan.
L'elemento "piè di pagina". rappresenta il "piè di pagina" della pagina. Questa parte della pagina contiene solitamente un collegamento a diritti d'autore, contatori, ecc.
elemento "navigatore".- definisce la sezione di navigazione del sito:
elemento "a parte". definisce una sezione tangenzialmente correlata al contenuto della pagina, più comunemente usata come allegato.
introduzione
HTML 4 è con noi da circa 10 anni. Durante questo periodo non ci sono stati seri passi per migliorarlo. Ovviamente è apparso XHTML, tuttavia, non fa altro che inasprire le regole e costringerti a scrivere codice sempre migliore. Allo stesso tempo, ti preoccupi completamente del rispetto dello standard. HTML 5 è progettato per fare di più. Aggiunge una serie di novità molto importanti.
Il lavoro su HTML5 è iniziato nel 2004, ma solo ora (2009) sta iniziando a generare un serio interesse. Il supporto dei browser è in aumento e l'elemento che mi piace di più (CANVAS) è supportato da 4 dei 5 browser più comuni. Tuttavia, non è del tutto realistico, sebbene possibile, utilizzare HTML 5, poiché nuovo standard non supportato in MSIE.
Quindi cosa c'è di nuovo in HTML 5?
Etichetta
Etichetta
Menu contestuali
HTML5 fornisce anche un metodo per aggiungere facilmente menu contestuali a una pagina web. Forse tali menu non sono molto utili per i siti normali. Ma per le applicazioni in cui molte funzioni vorrebbero essere raggruppate e visualizzate contestualmente, questa funzione è giusta.
Nuovi elementi strutturali
Poiché HTML 4 è strutturato in modo approssimativo, sono stati aggiunti nuovi elementi alla quinta versione della specifica per correggere questa lacuna:
sezione o paragrafo.
- intestazione della pagina (da non confondere con )
- questo tag può includere, ad esempio, un articolo del blog.
- può essere utilizzato, ad esempio, per creare diagrammi.
Nuovi elementi in linea
Lo standard HTML5 introduce nuovi elementi che consentono di selezionare in modo speciale frammenti di testo contenenti orari e numeri:
- segna un pezzo di testo. È possibile, ad esempio, contrassegnare i termini trovati nell'elenco dei risultati di ricerca.
- per rappresentare i numeri in un intervallo specifico. Può avere vari attributi: valore, minimo, massimo, basso, alto e ottimo.
Nuovi tipi di campi di input
HTML5 aggiunge una serie di nuovi tipi per i campi di input:
appuntamento
datetime-local
mese
numero
gamma
e-mail
Alcuni di essi sono ampiamente utilizzati nelle interfacce utente delle applicazioni desktop. E, molto probabilmente, saranno già ben noti a tutti i tuoi utenti.
Elementi deprecati
I seguenti elementi HTML sono obsoleti:
acronimo
applet
carattere di base
centro
telaio
cornice
isindex
nessun frame
noscript
colpire
Sintassi per specificare la codifica
La sintassi per impostare la codifica di un documento in HTML5 è ora molto semplice:
Innovazioni interattive
Diverse innovazioni che renderanno la creazione di siti web e applicazioni web più facile e divertente:
- informazioni aggiuntive su qualcosa. Ad esempio, questo tag può essere utilizzato nei browser per implementare una descrizione comando. Il tag può avere un attributo aperto che indica se il contenuto del tag verrà inizialmente mostrato all'utente o meno.
- A differenza delle tabelle tradizionali (che sono progettate per essere statiche), questo tag può essere utilizzato per rappresentare un set di dati interattivo. Ad esempio, per una tabella con selezione di righe o colonne, modifica dei dati in linea, ordinamento e così via.
Nuova definizione del tipo di documento (DTD)
In HTML5, è molto più semplice dichiarare un DTD:La dichiarazione DTD è diventata più carina e, suppongo, più facile da ricordare. Questo è molto probabilmente il risultato del fatto che HTML non è più associato a SGML.
href facoltativo nei collegamenti
L'attributo href è ora facoltativo poiché i collegamenti possono essere utilizzati insieme agli script. Probabilmente sarà utile nelle applicazioni web.
attributo asincrono
L'attributo fornisce al browser un suggerimento che il blocco di script può essere eseguito in modo asincrono, invece di attendere il caricamento completo della pagina.
Conclusione
Naturalmente, non tutti i browser supporteranno l'intero standard (penso che il lettore abbia ora ricordato l'MSIE "preferito"). Ma il supporto arriverà con il tempo. E i nuovi elementi HTML 5 sono stati progettati pensando alla situazione attuale. D'altra parte, la maggior parte dei browser supporta già parzialmente le specifiche. Quindi, ad esempio, il tag
Quindi, non vediamo l'ora.
Per chi fosse interessato, la specifica HTML 5 può essere trovata al seguente link -
Quindi cosa c'è di nuovo in HTML5 che non era in HTML4?
E in fondo è tutto nuovo. La specifica HTML5 porta con sé molti cambiamenti di vari livelli e importanza. Le modifiche fondamentali possono essere suddivise in diversi blocchi:
La semantica del linguaggio. HTML5 ha introdotto una serie di nuovi tag semantici per aiutare a organizzare la struttura interna delle pagine web in modo più significativo.
Considera il più famoso di loro:
nav- utilizzato per creare una barra di navigazione;
a parte- è un tag unificante, più adatto per evidenziare una barra laterale. Può includere sia blocchi di navigazione che altri elementi non di navigazione (banner pubblicitari, foto dell'autore, pulsanti dei social network, ecc.);
sezione- anche un tag unificante. Inoltre, può svolgere diversi ruoli: dividere la pagina in più aree tematiche, oppure dividere l'articolo direttamente nella pagina in sezioni separate;
articolo- serve a suddividere la pagina in articoli separati. Sia la sezione che i tag dell'articolo hanno una serie di caratteristiche interessanti. Ad esempio, ora puoi tranquillamente utilizzare più volte l'intestazione H1 di primo livello sulla stessa pagina, cosa che prima era inaccettabile;
hgruppo- il tag è progettato per raggruppare i titoli delle pagine in un'unica unità logica;
video- serve per il semplice inserimento di video nelle pagine del sito;
Audio- progettato anche per un facile inserimento di contenuti multimediali nelle pagine del sito;
tela- crea un'area in cui, utilizzando JavaScript, è possibile disegnare oggetti diversi, visualizzare immagini, trasformarli e modificarne le proprietà.
Puoi conoscere il resto dei tag da htmlbook.ru.
Multimedia. HTML5 ora supporta i contenuti multimediali (lettore audio e video) con markup HTML pronto all'uso, con l'API appropriata per il controllo della riproduzione e dei codec.
Arti grafiche. Lavorare con la grafica è diventato molto più semplice grazie al tag canvas e a una speciale API JavaScript per lavorarci. Anche ufficialmente incluso in HTML5 è il tag svg, che ti consente di incorporare grafica vettoriale, descritto dal corrispondente standard web (SVG, Scalable Vector Graphics).
Moduli web. Nuovi elementi dei moduli Web: sia tipi che attributi che consentono di estendere le funzionalità dei moduli tradizionali con strumenti integrati, senza utilizzare librerie aggiuntive per la convalida dei dati di input, prompt dei moduli.
API JavaScript. Un'API per lavorare con grafica e multimedia, nuove funzionalità avanzate per spostare oggetti e lavorare con la cronologia delle transizioni (History API), oltre a una serie di piccole cose, come la possibilità di rendere i contenuti modificabili direttamente nella posizione corrente utilizzando Contenuto Attributi modificabili.
Molto di piu. Comunicazioni di rete migliorate. Archiviazione dei dati notevolmente migliorata. Strumenti Web Operaio per l'esecuzione processi in background. Interfaccia WebSocket per stabilire una connessione permanente tra un'applicazione residente e un server. Migliorata la velocità di salvataggio e caricamento delle pagine. Supporto per CSS3 nel controllo dell'interfaccia utente, che garantisce l'orientamento del contenuto HTML5.
Quindi, è ovvio che il formato HTML5 dimostra un approccio fondamentalmente nuovo alla creazione di grafica spettacolare e memorabile, elementi interattivi e altri componenti di design e interfaccia web di alta qualità. Ciò offre un innegabile vantaggio: la possibilità di rifiutare gli elementi flash, che creano alcune difficoltà nel caricamento delle pagine. Allo stesso tempo, è necessario un certo tempo per caricare tali pagine. Inoltre, per funzionare correttamente con HTML5, è necessario un computer con la capacità di sistema appropriata e gli sviluppatori di browser sono troppo pigri per aggiungere il supporto completo per tutte le funzionalità di HTML5.
Da più di 10 anni, linguaggio di marcatura ipertestuale HTML praticamente non è cambiato, il che era molto strano, data l'enorme velocità di sviluppo delle tecnologie Web, e ora, finalmente, il cambiamento è avvenuto ed è apparso HTML 5.
A HTML 5 alcuni nuovi elementi e attributi sono stati aggiunti e alcuni vecchi sono stati rimossi (ad esempio, font e centro).
Sono stati aggiunti i seguenti elementi:
1) intestazione.
2) piè di pagina.
4) sezione.
5) articolo.
6) a parte.
7) figure.
8) dialogo.
9) m (segno).
10) volta.
11) metro.
12) progresso.
13) video.
14) Audio.
15) particolari.
16) griglia dati.
17) menù.
18) comando.
Tutto il resto è rimasto invariato. Cioè, non ci saranno problemi, a condizione che tu abbia familiarità con lo standard. In realtà, tutto è rimasto come prima, sono state aggiunte solo nuove funzionalità.
Grazie alle innovazioni HTML 5 Puoi rendere il lavoro dei webmaster molto più semplice semplificando lo stesso markup.
Sicuramente ti starai chiedendo: "Funzionerà HTML 5 con browser più vecchi?" La risposta è "Sì, certo, ma i nuovi elementi ovviamente non verranno visualizzati." O in altre parole, tutti vedranno le nuove pagine, ma i possessori di versioni moderne di browser vedranno un po' più e diversamente.
Sono sicuro che presto HTML 5 potranno vedere la stessa percentuale di utenti che vedono ora HTML 4 che ha più di 10 anni.
Informazioni sull'utilizzo di nuove funzionalità HTML 5 ne parleremo nei seguenti articoli.
sushiandbox.ru Mastering PC - Internet. Skype. Social networks. Lezioni su Windows.
