Guida per principianti alla creazione di pagine Web HTML5 / CSS3

Questo articolo è parte del nostro "Serie di tutorial HTML5 / CSS3" - dedicato a farti diventare un designer e / o sviluppatore migliore. Clicca qui per vedere più articoli della stessa serie.

HTML5 e CSS3 hanno travolto il web in due anni. Prima di loro ci sono state molte semantiche modificate nel modo in cui ci si aspetta che i web designer creino pagine web, e con il loro arrivo arrivano moltissimi supporti fantastici come media alternativi, tag in stile XML e attributi di input progressivi per i web designer per realizzare sogni caratteristiche come l'animazione.

Sebbene molti sviluppatori sembrino mostrare dimostrazioni potenziali ma complicate, HTML5 / CSS3 non sono davvero una scienza missilistica e ti guiderò attraverso il processo di rilassamento per costruire una pagina web HTML5 / CSS3 standard con una spiegazione completa e approfondita e tada! Bonus come risorse di apprendimento e modelli HTML5 gratuiti sono disponibili per te, quindi cogli l'occasione per avviare il tuo viaggio HTML5!

Cambiamenti tra HTML4 e HTML5

Forse ti starai chiedendo perché sia ​​persino importante passare a HTML5. Ci sono una miriade di ragioni, ma soprattutto perché lo sarai lavorare con gli standard Internet globali come ogni altro designer. In questo modo troverai più supporto online e il tuo i siti Web verranno visualizzati correttamente nei browser moderni che sono costantemente migliorati.

(Fonte immagine: W3C)

Il confronto tra HTML4 e HTML5 è difficile da individuare a livello di superficie. Dalla visualizzazione della nuova bozza HTML5 è possibile visualizzare gli elementi in primo piano e le procedure corrette di gestione degli errori. Gli sviluppatori di browser hanno apprezzato in particolare le nuove specifiche per il rendering di pagine Web predefinite.

Cosa c'è di più da HTML5 è la conversione del nostro browser web moderno. Con queste nuove specifiche il web nel suo complesso è ora visto come un piattaforma applicativa per HTML (in particolare HTML5), CSS e JavaScript su cui basarsi. Inoltre, questo sistema elegantemente crea armonia tra web designer e sviluppatori stabilendo standard comuni che tutti i browser dovrebbero seguire.

Inoltre molti elementi sono stati creati per rappresentano i media digitali new-age. Questi includono e che sono enormi per il supporto multimediale. In alcuni browser è possibile completare la convalida del modulo direttamente in HTML. Certo, c'è ancora un forte bisogno di jQuery, dal momento che ci sono molti sviluppatori di software che devono ancora riconoscere le funzionalità. Se desideri un elenco di tag, controlla questa tabella W3Schools per ulteriori informazioni su di essi.

Scheletro HTML5 nudo

Trovo il modo più semplice per capire qualsiasi argomento è tuffati proprio dentro. Quindi costruirò un modello di scheletro HTML5 di base per una pagina web. Ho incluso alcuni degli elementi più recenti, che spero di classificare un po 'più tardi.

        
 
 
Benvenuto, uno e tutti!
  
 
 
 
qualche contenuto qui.
 
 
 
ma alcuni anche qui!
 
 
  
   

Questo non è molto diverso da una pagina web HTML4 standard. Quello che potresti notare è che noi non è necessario includere altri tag a chiusura automatica. Questa è davvero una notizia meravigliosa perché farà risparmiare molto tempo ai tuoi progetti di sviluppo.

Per coloro che non sanno, in bozze XHTML c'erano molti elementi etichettati a chiusura automatica. Questi si concluderebbero con una barra in avanti prima che l'operatore "maggiore di" indichi che non è necessario includere un altro tag di chiusura altrove. Ad esempio, per creare un tag meta keywords che useresti senza la necessità di una chiusura altrove.

Questa regola si applica ancora in HTML5. Ma ora tu non serve nemmeno la barra extra in avanti! è completamente valido, sebbene tu sia autorizzato a continuare a utilizzare lo standard XHTML / XML. Per tutti i browser conformi agli standard, entrambi gli elementi renderanno lo stesso.

Definire le nostre aree della pagina

La maggior parte del nostro nuovo codice non dovrebbe essere troppo scioccante. Nostro doctype è incredibilmente più semplice che mai, nessuna necessità di attributi eccessivi del corpo, e le informazioni nella nostra rubrica sono chiaramente etichettate. Andando avanti vorrei concentrare la tua attenzione sul contenuto all'interno del nostro etichetta. Questo include tutta la struttura della pagina principale. Ho intenzionalmente usato alcuni bei tag HTML5 per indicare come potresti includerli nel tuo lavoro.

Per prima cosa vedrai l'intera pagina incapsulato in a div etichetta. Ho etichettato questo con un ID di involucro, significa che avvolge tutto il contenuto del nostro sito web. Questo è utile per impostare una larghezza massima o posizionare il contenuto in giro sullo schermo. Successivamente ho suddiviso la pagina in 3 elementi fondamentali: uno

, un nucleo

, e un breve

Guida per principianti a Flock, il browser dei social media

Guida per principianti per lo sviluppo iOS L'interfaccia - Parte I

Guida per principianti per la configurazione di Windows 7 Media Center