Scheletro & standards

flexlex

Posted on 9/2/2014, 14:38

+1

.

Group: Mod

Posts: 3,751

Reputation: +53

Location: bolzano/bozen

Status: Offline

Scheletro & standards

Standards & Storia
Tutti sappiamo come è nato l'internet, ma pochi si interessano della storia dei browser e del HTML. Vi faccio un mega riassunto in due righe.

In un passato lontano lontano, esistevano due browser (netscape e internet explorer) che erano in eterno conflitto (C'era anche konqueror, ma quello è arrivato dopo). Entrambi usavano lo stesso linguaggio per creare la struttura, ovvero l'HTML (Hyper Text Markup Language), però essendo in conflitto, spesso violavano gli "standard" per guadagnarsi un vantaggio sull'altro. L'innovazione è arrivata con Netscape di AOL che ha introdotto un linguaggio nominato "JavaScript", Internet Explorer rispose con un linguaggio chiamato "JScript" e con l'aggiunta di altri linguaggi "terzi" come Visual Basic all'interno del Browser. E beh, così insomma il mondo del Web è cresciuto molto velocemente, ma lasciando agli sviluppatori ancora il tempo di "tenere il passo coi tempi".

Dopo IE 4 (se non ricordo male) anche la Microsoft implementa il Javascript nel suo browser

Arrivati ad IE 7 e Netscape 9, succede che verso inizio Febbraio del 2008 AOL decide di abbandonare Netscape e consiglierà ai utenti di passare al browser di mozilla, il famosissimo FireFox. Casualmente iniziano a nascere più browser ed arriviamo al punto di avere principalmente 4 Browser: IE [Trident], FireFox[Gecko], Safari[WebKit], Opera[Presto] (Chrome si aggiunge dopo e si basa sul Motore di Rendering WebKit, lo stesso di safari). Beh i WebDeveloper passano un periodo di crisi, perché tutti i browser hanno dei "propri" standard e quindi ogni pagina Web doveva venir testata e adattata ad ogni browser.

Un bel giorno tutti quei bei browserini si incontrano e decidono di passare allo stesso standard, stesso linguaggio e tutto quanto. Così fa lo stesso quale browser si utilizza, ma si vede sempre uguale. Questo nuovo standard (che introduce anche nuovi tag, attributi, un nuovo css ed estende anche il JavaScript) viene chiamato HTML5.

Struttura
HTML è un linguaggio di markup basato su XML (eXtendibible Markup Language), oggi l'HTML viene anche definito xHTML (la x sta per extendible) visto che anche l'html può essere esteso, anche se potrebbe essere semanticamente incorretto (significa che si può fare, ma meglio non farlo, poi capirete nel capitolo "SEO").

Ogni documento HTML iniziano con una dichiarazione dello Standard. Fino ad oggi si usava questa dichiarazione qui:

CODICE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

In HTML 5 è:

CODICE

<!DOCTYPE html>

Poi arriva il documento diviso in due parti "HEAD" e "BODY".
Il tag HEAD è per le Meta-Data (i dati che descrivono qualcosa, come "titolo", "parole chiavi", "set di caratteri", "descrizione del sito", "stili","script","WebApp per cellulari","Dimensione della campo visivo su cellulare",...)
Il tag BODY invece è il corpo, quello visibile, cove poi verranno inserito , colore e tutto quello che vorrete xD

Prima di procedere vi spiego cos'è un TAG.
I Tag sono contenitori e hanno una funzione semantica per i browser (per esempio il tag button, genera un bottone e il suo contenuto verrà usato come testo). Ogni tag DEVE essere chiuso. Di solito così <tag>CONTENUTO</tag>

Principalmente la struttura di base usato per i siti è questa.

HTML

<!DOCTYPE html>
<html>
<head>
<title>TITOLO</title>
<meta HTTP-EQUIV="content-type" content="text/html; charset=windows-1252"></meta>
</head>
<body>
<h1>CIAO</h1>
</body>
</html>

Il DOCTYPE dovrebbe essere chiaro
Il tag HTML dice solo che qui inizia il tutto (spesso chiamato anche root element)
Il HEAD lo ho già spiegato sopra, principalmente contenuto che non si vede nel sito, ma hanno una funzione "logica".
Il TITLE definisce il testo che si trova nella tab (per esempio per il MAW è: manga&Anime World).
Il META.. ecco, qui ci ritorno dopo.
Il BODY è il corpo.
Il tag h1 significa "Header 1" e sarebbe il "titolo" con più importanza.

Tornando al META, notiamo due attributi.
1) Attributo http-equiv con valore content-type
2) Attributo content con valore text/hml; charset=XXXXXXXX

Attributi sono informazioni "extra" per un tag, per esempio in un tag "font" ci sarà l'attributo "color" che definirà il colore di un testo.
In questo caso ne abbiamo due uno che dice al browser "ho delle informazioni per l'interpretazione del sito, ovvero di che tipo di file si tratta" e l'altro "il contenuto è scritto in HTML e i caratteri che troverai saranno Est-Europei" (I charset li si trova su wikipedia, quelli corretti intendo).

Comunque la maggior parte dei browser riesce interpretare il sito anche senza quel meta-tag, quindi lo si mette per robot (come quelli di google che navigano il web per vedere i contenuti) per permettere loro di leggere bene quello che abbiamo scritto.

Il codice di default che viene offerto da JSBIn è

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>

</body>
</html>

Anche così si possono definire i charset. UTF-8 è un charset (se non ricordo male) globale, che riesce a mostrare ogni tipo di carattere, ma non ho mai capito esattamente come funziona :|

Nel capitolo "html entity" vi mostrerò il mio metodo per inserire caratteri speciali.

Esercizi
Guardate la struttura di JSBIN http://jsbin.com/woye/1/edit e poi cancellate tutto e provate a riscrivere tutta la struttura di base, senza imbrogliare e copiare xD

P.s
- Se guardate il sorgente di un qualsiasi sito, noterete queste strutture. Fate mouse destro sulla pagine e selezionato "visualizza sorgente pagina/HTML" ed ammirate xD
- Se volete un text editor gratuito per creare html, potete scaricare Notepad++ (per windows) e Sublime Text Edit (per Mac). Per Linux potete usare gEdit (già incorporato).

Edited by flexlex - 9/2/2014, 23:01