Guida per principianti A: Creazione di pagine Web HTML5 / CSS3

Questo articolo fa parte della nostra "serie di tutorial HTML5 / CSS3", dedicata a farti diventare un designer e / o uno sviluppatore migliori. 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.

Anche se molti sviluppatori sembrano 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

Ci si potrebbe chiedere perché sia ​​anche importante passare a HTML5. Ci sono una miriade di motivi, ma soprattutto perché lavorerai con gli standard Internet globali come ogni altro designer. In questo modo troverai più supporto online e i tuoi siti web verranno visualizzati correttamente nei browser moderni, che vengono 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 insieme è ora visto come una piattaforma applicativa per HTML (in particolare HTML5), CSS e JavaScript su cui basarsi. Inoltre, questo sistema crea elegantemente l' armonia tra i web designer e gli sviluppatori impostando standard comuni che tutti i browser dovrebbero seguire.

Inoltre sono stati creati molti elementi per rappresentare i media digitali new age . Questi includono

Scheletro HTML5 nudo

Trovo che il modo più semplice per capire qualsiasi argomento è immergersi direttamente in esso . 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 non abbiamo bisogno di 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 come auto-chiusura . Questi si concluderebbero con una barra diretta prima che l'operatore "maggiore di" significasse che non sarebbe 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 non hai nemmeno bisogno della barra extra in avanti ! è completamente valido, sebbene tu possa 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. Il nostro doctype è incredibilmente più semplice che mai, non c'è bisogno di attributi eccessivi del corpo e le informazioni nella nostra rubrica sono chiaramente etichettate. Andando avanti vorrei concentrare la tua attenzione sul contenuto 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 che l'intera pagina è incapsulata all'interno di un tag div . L'ho etichettato con un ID del wrapper, il che significa che avvolge tutto il contenuto del nostro sito web. Questo è utile per impostare una larghezza massima o posizionare il contenuto sullo schermo. Successivamente ho suddiviso la pagina in 3 elementi fondamentali: uno