HTML BASE
Dopo il post scorso in cui ho trattato i DB con C#, oggi vado a gettare le basi per fare la stessa cosa, ma invece che con i Database, con le pagine web.
Iniziamo quindi aprendo il nostro programma per la creazione delle Web-Pages (io consiglio "Bluefish" poiché ritengo, soprattutto per i neofiti, renda la creazione di una pagina web molto più semplice).
La struttura base di una Pagina è composta come illustrato dall'immagine di seguito:
Il nostro <Head> conterrà il titolo ( <title> ), il meta-charset (ovvero la codifica del carattere, che sarà "utf-8") e successivamente anche la parte di stile.
Per tradurre il tutto in HTML sarà:
<head>
<meta charset="utf-8" />
<title>Pagina di prova</title>
</head>
Il <Body> invece conterrà paragrafi (<p>), una mappa di google maps e un video.
Ogni TAG aperto deve essere sempre chiuso.
Di seguito l'immagine rappresentante il codice in HTML del corpo che andremo a commentare.
Senza vedere per ora la parte di stile, andiamo ad analizzare ogni singolo TAG. Il primo che vediamo è il TAG <H1> che sarebbe il sottotitolo, più la cifra di fianco all' H diventa grande più il carattere diventa piccolo, in sostanza diventano il sottotitolo di quello precedente. Con <STRONG> rendiamo in grassetto il contenuto, ovvero quello che c'è scritto, se fosse stato <EM> invece, sarebbe stato enfatizzato.
Il TAG <P> identifica un paragrafo, mentre quello <A HREF ..../A> un collegamento ipertestuale, ossia un Link.
<DIV> è uno dei TAG più importanti poichè è come se fosse un contenitore, determina infatti una porzione della pagina web in cui va inserito qualcosa. Nel nostro caso andiamo tramite codice JavaScript ad inserire una mappa di GoogleMaps. Per correttezza la chiave l'ho censurata, è possibile però reperirla piuttosto facilmente sul Web.
La funziona scritta in JavaScript "MyMap" genera la mappa di GoogleMaps tramite le coordinate fornite, infatti a "mapProp" andiamo a passargli le coordinate dell' Italia, oltre che di quanto zoomare/ingrandire la mappa. A questo punto un'altra variabile inserirà nell'elemento div (id=googleMap) la precedente variabile rappresentante la mappa (mapProp). I codici JavaScript vanno inseriti nel TAG <SCRIPT>. Le due linee dopo sono delle "librerie" che ci consentono di utilizzare le API di GoogleMaps.
Il TAG <IFRAME> ci consente di inserire nella nostra pagina elementi come video che sono passati tramite il link specificato nell'attributo "SRC". Le due restanti righe in fondo creano una "casella di ricerca" che andremo a sviluppare nella parte legata a C#.
Vediamo ora la parte legata allo stile/ all'estetica della pagina tramite CSS. Ci sono 3 modi per inserire codice di stile nella pagina.
1) Come attributo del TAG stesso:
In questo caso stiamo definendo lo sfondo di colore azzurro e l'allineamento centrale.
2) Tra i TAG <STYLE> inseriti nell'head :
Qui stiamo definendo i TAG <P>, <HR> (che sarebbe una riga) e <H1>, indicando che il colore del paragrafo deve essere "bianco", la riga di colore "aqua" e il sottotitolo con un'animazione che cambia colore da "azzurro" a "blue" in un tempo di 3 secondi e che si ripete all'infinito.
La pagina composta da HTML+CSS da me creata è la seguente :
Essendo un'immagine non è possibile vedere le animazione dei TAGs <H1>, mentre invece il link che io ho inserito come potete vedere dall'immagine sopra rappresentante il codice del body, rimanda al mio sito. Inoltre il corpo ha un attributo per lo sfondo che lo colora di rosa; la sezione legata allo stile è soggettiva a seconda di come una persona la vuole realizzare. Questa parte la rivedremo nella guida su C#, però ho deciso di incominciare a gettare le basi come ho detto inizialmente.
E come ogni conclusione dei miei post, vi ricordo che per ogni domanda, informazione o critica costruttiva potete contattarmi nei riferimenti che trovate nel sito.