HTML5 e CSS3: primi passi

HTML (HyperText Markup Language) o linguaggio di markup ipertestuale, è lo standard utilizzato per lo sviluppo delle pagine web, è un linguaggio basato su tag che struttura le informazioni in base alla gerarchia dei contenuti. L'HTML di per sé non conferisce caratteristiche grafiche alle informazioni che vengono presentate, le organizza solo in modo che abbiano un ordine di lettura logico.
In secondo luogo CSS (Cascading Style Sheet) o fogli di stile a cascata è un linguaggio utilizzato per definire e creare la presentazione di un documento strutturato scritto in HTML, si occupa di formulare le specifiche dei fogli di stile che serviranno da standard per i browser.
In questo tutorial presenteremo la struttura di base di un documento HTML5, le etichette più popolari e l'ordine gerarchico per dichiararle. A sua volta spiegheremo la relazione tra HTML5 e CSS3, il modo in cui possono essere correlati, la struttura delle dichiarazioni fatte in CSS3 e gli attributi grafici che possono dare al documento HTML.
Per gli esempi che andremo a realizzare è necessario disporre di un editor di codice, nel nostro caso l'editor selezionato è Dreamweaver CC 2014, nel tutorial Nozioni di base di Dreamweaver CS6: conoscere l'ambiente di lavoro vengono descritte le caratteristiche dell'applicazione che rimangono le stesse nonostante la differenza nelle loro versioni
1. Struttura di un documento HTML5

A) Questo tag indica la versione che utilizzeremo nel documento, in questo caso è la versione 5 di HTML.
B) Indica l'apertura di un documento HTML, è il primo tag che viene dichiarato.
C) Puoi includere un titolo per il documento, script, stili, meta-informazioni, tra gli altri.
D) Fornisce i metadati sul documento HTML. I metadati non verranno visualizzati nella pagina, verranno analizzati solo come informazioni allegate. Gli elementi vengono normalmente utilizzati per specificare la descrizione della pagina, le parole chiave, l'autore del documento, tra gli altri. Nell'esempio mostrato nell'immagine abbiamo utilizzato l'attributo charset per definire l'insieme di caratteri in cui verrà visualizzata la pagina, charset = "utf-8" nel caso della lingua spagnola.
E) Ci consente di assegnare il nome della pagina che verrà visualizzata nei browser.
F) La stragrande maggioranza dei tag in HTML necessita di una dichiarazione di apertura e di una dichiarazione di chiusura:

 Contenuto dell'etichetta 

In questo caso l'immagine mostrata chiude il tag della testa con
G) Tutto all'interno di questo elemento verrà visualizzato dal browser, ovvero all'interno di questo tag designeremo tutto il contenuto visivo del nostro documento HTML.
H) Allo stesso modo spiegato nella sezione F questa è la chiusura del tag
IO) Allo stesso modo spiegato nella sezione F questa è la chiusura del tag
Struttura di un documento CSS3

A) .class: Tutte le dichiarazioni che iniziano con un punto sono del tipo class, le loro caratteristiche grafiche possono essere applicate a qualsiasi tag HTML.
B) #Id: le dichiarazioni che iniziano con il cancelletto indicano che è di tipo ID. Sia le classi che gli ID vengono utilizzati per specificare quali attributi grafici vogliamo dare al nostro contenuto HTML. Tuttavia, le differenze tra questi 2 tipi di dichiarazioni sono le seguenti:
Gli ID sono univoci:
- Ogni elemento può avere un solo ID.
- Ogni pagina può avere un solo elemento con quell'ID.
Il nostro codice HTML non supererà la convalida se lo stesso ID viene utilizzato in più di un elemento.
Le classi non sono uniche:
- La stessa classe può essere utilizzata in più elementi.
- Puoi usare più classi nello stesso elemento.
Qualsiasi stile che deve essere applicato a più oggetti in una pagina deve essere eseguito con una classe. È importante ricordare che tutto ciò che è dichiarato nei documenti CSS fa distinzione tra maiuscole e minuscole.
C) {parentesi graffa che avvia la dichiarazione degli attributi.
D) } Chiave che chiude le dichiarazioni fatte ad una classe o ad un ID.
E) Struttura degli attributi: dopo aver dichiarato un attributo è necessario specificarne il valore, nell'esempio mostrato nell'immagine stiamo assegnando un'altezza di 600 pixel a #Id.
Per separare gli attributi ei loro valori, viene utilizzato un punto e virgola; come illustrato nella foto.
Queste sono, in modo semplice, le caratteristiche generali della struttura di un codice HTML, le etichette necessarie e come ordinarle. In caso di CSS i tipi di dichiarazioni e la loro struttura generale. Con questa conoscenza saremo pronti per realizzare il nostro primo HTML e dare alle etichette le caratteristiche grafiche.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo