------ HTML ------
Un qualsiasi file di testo, ache semplicissimo, se salvato con estensione .html o .htm sará visuallizzato come una pagina Web dal vostro browser.
Basterá scrivere:
L'HTML non é un linguaggio di programmazione vero e proprio, consente di creare pagine Web anche accattivanti dal punto di vista grafico, ma deve comunque essere interpretato (parsificato) dal programma che usi per navigare: il browser.
Qui entriamo nella "guerra" fra i browsers, uno li interpreta in un modo l'altro li capisce diversamente, la cosa sará piú chiara e evidente per il CSS e JavaScript.
Formato da "tag" inseriti in appositi marcatori di apertura e chisura <quello che vuoi aperto> </quello che vuoi chiuso>, la struttura - guarda caso - é identica a quella dell'uomo: l'insieme del doccumento <html> e </html>, una testa <head> con </head>, un corpo <body> insieme a </body>:
Tra <html> e </html> solo <head> e <body> con le loro relative chiusure.
Tra <head> e </head> normalmente vengono inserite informazioni sulla pagina e collegamenti (link) a fogli di stile (.css) o lbrerie JavaScript (.js).
Tra <body> e </body> di tutto, adesso con HTML5 anche l'impossibile.
Invece <!-- questo é un commento -->. La cosa interessante é che qualsiasi cosa posta tra <!-- e --> non sará presa in considerazione, quindi non verrá visualizzata. Sapeste quante volte vengono usati cosí, al fine di nascondere parte di codice per capire dove sta il problema
Non ho intenzione di approfondire il discorso legato ai vari marcatori, diventerebbe una trattazione lunga e noiosa riservata solo a pochi. Tanto piú che esistono una miriade di software i quali scrivono automaticamente il codice secondo la logica WYSIWYG (acronimo inglese What You See Is What You Get, ossia quello che vedi é quello che ottieni in italiano), alcuni molto costosi altri gratuiti.
Ritengo piú interessante vedere quei marcatori, usati poco, che però sono di grande utilitá:
Ad esempio <addres> e </address> il quale al suo interno racchiude le informazioni di contatto dell’autore o del proprietario di un documento. In questo modo, chi visita il sito ha la possibilitá di contattarlo.
<big> e </big> serve ad ingrandire il testo compreso al suo interno. In realtá sarebbe piú opportuno ingrandire il testo tramite un foglio di stile, come avviene nella maggior parte dei casi.
<datalist id="browsers"> con </datalist> finale, quando abbinato a <input type="browsers"> permette di creare una casella di testo scrivibile dentro la quale, dopo aver digitato la prima lettera, comparirá una lista a tendina nella quale scegliere la voce voluta, un autocompletamento semplice e veloce.
Poi esistono:
durante l'implementazione di queste pagine mi sono guardato intorno, ho letto le classifiche ed ho visitato i 40 migliori siti web del modo. Belli, non c'é che dire, dotati di grafica e animazioni notevoli. Tutti, a parte 4, usano foto di dimensioni enormi, questo si traduce in una grandezza (peso) notevole.
Dieci o piú secondi per caricare la pagina, poi altri dieci o piú secondi per altra pagina e altro argomento. Non tutti hanno la fibra ottica o l'ADSL super veloce, se poi il sito viene consultato con lo smartphone, a meno che tu non sia interessato all'acquisto di una giacca in goretex o ad un servizio fotografico professionale, sono tutti Giga sprecati e te ne vai.
La soluzione consiste nel farcire la pagina di immagini piccole (io ho due cartelle, una per le miniature e l'altra per le immagini a dimensione reale), poi con il CSS scrivere:<div class="cursore"></div> e dopo: <div class="cursoreOut"></div> cosí, anche senza scriverlo, l'utente capisce che facendo click l'immagine può essere ingrandita, a quel punto, non prima, parte l'eventuale animazione.
Non a caso il sito di gran lunga piú visitato al mondo é quello di Google, provate a fare click con il pulsante destro del mouse in mezzo alla pagina e scegliete "visualizza codice" (o altra dicitura, dipende dal browser), per rendersi conto di quanta tecnologia nasconde una pagina quasi completamente bianca che si carica in decimi di secondo.
Evitare di essere troppo prolissi, anlizzare attentamente la frase e capire quale messaggio vuole dare cercando di lasciare solo quello. Es: "oggi é una bella giornata, prendo la macchina e vado al mare", vediamo, se vai al mare significa che non piove, non é nuvolo e quant'altro, di conseguenza "é una bella giornata" non serve, che tu al mare vada in aereo, treno, bus, macchina, bici, monopattino, autostop o a piedi poco importa. Rimangono solo le parole che veicolano il messaggio e cioé "oggi vado al mare".
Prestare molta atenzione ai colori. Quelli a video hanno effetti molto differenti da quelli dal vivo: un muro dipinto di verde chiaro ha un effetto rilassante, a video dopo 15 minuti rischi la crisi isterica.
<html>
<head>
</head>
<body>
Ciao
</body>
</html>
e il gioco é fatto. Io sono andato accapo per mantenere una parvenza d'ordine, in ogni caso se scrivete tutto sulla stessa riga é lo stesso.
L'HTML non é un linguaggio di programmazione vero e proprio, consente di creare pagine Web anche accattivanti dal punto di vista grafico, ma deve comunque essere interpretato (parsificato) dal programma che usi per navigare: il browser.
Qui entriamo nella "guerra" fra i browsers, uno li interpreta in un modo l'altro li capisce diversamente, la cosa sará piú chiara e evidente per il CSS e JavaScript.
Formato da "tag" inseriti in appositi marcatori di apertura e chisura <quello che vuoi aperto> </quello che vuoi chiuso>, la struttura - guarda caso - é identica a quella dell'uomo: l'insieme del doccumento <html> e </html>, una testa <head> con </head>, un corpo <body> insieme a </body>:
<html>
<head>
</head>
<body>
</body>
</html>
Dentro ci si mette di tutto, o meglio, quello che necessita.
Tra <html> e </html> solo <head> e <body> con le loro relative chiusure.
Tra <head> e </head> normalmente vengono inserite informazioni sulla pagina e collegamenti (link) a fogli di stile (.css) o lbrerie JavaScript (.js).
Tra <body> e </body> di tutto, adesso con HTML5 anche l'impossibile.
Invece <!-- questo é un commento -->. La cosa interessante é che qualsiasi cosa posta tra <!-- e --> non sará presa in considerazione, quindi non verrá visualizzata. Sapeste quante volte vengono usati cosí, al fine di nascondere parte di codice per capire dove sta il problema
Non ho intenzione di approfondire il discorso legato ai vari marcatori, diventerebbe una trattazione lunga e noiosa riservata solo a pochi. Tanto piú che esistono una miriade di software i quali scrivono automaticamente il codice secondo la logica WYSIWYG (acronimo inglese What You See Is What You Get, ossia quello che vedi é quello che ottieni in italiano), alcuni molto costosi altri gratuiti.
Ritengo piú interessante vedere quei marcatori, usati poco, che però sono di grande utilitá:
Ad esempio <addres> e </address> il quale al suo interno racchiude le informazioni di contatto dell’autore o del proprietario di un documento. In questo modo, chi visita il sito ha la possibilitá di contattarlo.
<big> e </big> serve ad ingrandire il testo compreso al suo interno. In realtá sarebbe piú opportuno ingrandire il testo tramite un foglio di stile, come avviene nella maggior parte dei casi.
<datalist id="browsers"> con </datalist> finale, quando abbinato a <input type="browsers"> permette di creare una casella di testo scrivibile dentro la quale, dopo aver digitato la prima lettera, comparirá una lista a tendina nella quale scegliere la voce voluta, un autocompletamento semplice e veloce.
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Esempio:
Poi esistono:
- Footer
- Section
- Article
- Nav
- Aside
- Hgroup
- Mark
- Time e gli attributi pubdate e datetime
- Meter
- Progress
- L'elemento <picture>
Per chi volesse approfondire, esiste il sito ufficiale della W3schools
(tranquilli lo uso sovente anch'io)
durante l'implementazione di queste pagine mi sono guardato intorno, ho letto le classifiche ed ho visitato i 40 migliori siti web del modo. Belli, non c'é che dire, dotati di grafica e animazioni notevoli. Tutti, a parte 4, usano foto di dimensioni enormi, questo si traduce in una grandezza (peso) notevole.
Dieci o piú secondi per caricare la pagina, poi altri dieci o piú secondi per altra pagina e altro argomento. Non tutti hanno la fibra ottica o l'ADSL super veloce, se poi il sito viene consultato con lo smartphone, a meno che tu non sia interessato all'acquisto di una giacca in goretex o ad un servizio fotografico professionale, sono tutti Giga sprecati e te ne vai.
La soluzione consiste nel farcire la pagina di immagini piccole (io ho due cartelle, una per le miniature e l'altra per le immagini a dimensione reale), poi con il CSS scrivere:<div class="cursore"></div> e dopo: <div class="cursoreOut"></div> cosí, anche senza scriverlo, l'utente capisce che facendo click l'immagine può essere ingrandita, a quel punto, non prima, parte l'eventuale animazione.
Non a caso il sito di gran lunga piú visitato al mondo é quello di Google, provate a fare click con il pulsante destro del mouse in mezzo alla pagina e scegliete "visualizza codice" (o altra dicitura, dipende dal browser), per rendersi conto di quanta tecnologia nasconde una pagina quasi completamente bianca che si carica in decimi di secondo.
Evitare di essere troppo prolissi, anlizzare attentamente la frase e capire quale messaggio vuole dare cercando di lasciare solo quello. Es: "oggi é una bella giornata, prendo la macchina e vado al mare", vediamo, se vai al mare significa che non piove, non é nuvolo e quant'altro, di conseguenza "é una bella giornata" non serve, che tu al mare vada in aereo, treno, bus, macchina, bici, monopattino, autostop o a piedi poco importa. Rimangono solo le parole che veicolano il messaggio e cioé "oggi vado al mare".
Prestare molta atenzione ai colori. Quelli a video hanno effetti molto differenti da quelli dal vivo: un muro dipinto di verde chiaro ha un effetto rilassante, a video dopo 15 minuti rischi la crisi isterica.