Costruire un sito Web 1 – HTML – Parte 1
HTML
Metterò i comandi (Tag) più usati per la costruzione di una pagina web. Per prima cosa ci vuole un buon editor. Io uso Notepad++.
L’HTML ha uno schema iniziale da rispettare.
Come si vede un tag è composto da < >. Se fate caso, quando si apre un tag es. <html> si deve chiudere con / es. </html>. Come vedete tutti hanno un’apertura e una chiusura. Perciò tutto il linguaggio html deve essere scritto tra <html> e </html>. Poi si mette <head>… </head> qui ci si mette prevalentemente il titolo. Invece in <body>..</body> tutto il resto del codice.
Adesso vediamo altri tag. Cominciamo col titolo. <title>La mia prima pagina Web</title>. Tutto quello che viene scritto tra il tag <title> sarà il titolo della scheda del Browser.
Qui a sinistra avete tre modi in cui si può scrivere del testo. Nel primo caso non ho utilizzato nessun tag e anche se vado a capo, il browser non l’ho riconosce. Perchè come vedete nella figura sopra mette le due righe a fianco. Per poter andare a capo ci sono due modi. Il primo è quello di utilizzare il tag <p></p> che sarebbe un paragrafo, e utilizzerei due paragrafi uno per ogni riga. Nel secondo caso utilizzo un solo tag <p></p> e dove voglio andare a capo utilizzo il tag <br> che come vedete non ha bisogno del tag di chiusura. Si chiama tag autochiudente. L’unica differenza tra le due modalità per andare a capo sono gli spazi tra una riga e l’altra.
Adesso vi metto degli esempi di formattazione del testo.
Infine abbiamo il tag <h1></h1> che viene utilizzato come titolo e per questo è utile per il SEO per il semplice fatto che viene indicizzato da Google. Da questo tag ne esistono 6 tipi.
Merita un discorso a parte la lista non ordinata e quella ordinata.
Per poter fare una lista non ordinata si utilizza il tag <ul></ul> e al suo interno per ogni lista si utilizza <li></li>
Mentre per le liste ordinate si usa il tag <ol></ol> e al suo interno per ogni lista si utilizza <li></li>
Volendo le liste si possono far partite da un numero prestabilito. Non necessariamente devono partire da 1. Se nel tag di apertura scrivo <ol start=10> ……. </ol> il primo numero della lista sarà 10 poi 11 ect. Inserendo nel tag reversed, cioè <ol reversed> ……… </ol> la numerazione sarà decrescente.
Utilizzando la lista type possiamo scegliere tra 5 modi diversi lista. Scrivendo <ol type=”a”>……</ol> la numerazione sarà alfabetica. Le altre numerazioni sono “1”,”i”,”I”,”a” e “A”.
Per quanto riguarda la formattazione del testo in HTML per il momento è tutto. Adesso vediamo come inserire delle immagine in un sito web. Prima di tutto consiglio di copiarsi le immagini nella cartella del sito web. Perchè si possono fare dei collegamenti con altri siti web, il problema è che non ne abbiamo il controllo, per il semplice fatto che gli potrebbero cambiare percorso e non li troveremo più.
Si scrive <img src=”nomefile.estensione”> anche questo è un tag autochiudente. In questo modo l’immagine appare nel suo formato originale. Se volessimo ridurre o ingrandire l’immagine si utilizza width per la larghezza height per l’altezza. Scrivendo ad es. <img src=”nomefile.estensione” width=”100″ height =”130″> i numeri corrispondono ai pixel. Per finire si può decidere se mettere l’immagine a destra (right) o a sinistra (left) col comando align. Scrivendo es. <img src=”nomefile.estensione” width=”100″ height =”130″ align=right>
Mentre per visualizzare un’immagine che si trova in un’altro sito web.
<img src=https://upload.wikimedia.org/wikipedia/it/thumb/3/37/Marge_Simpson_in_A_proposito_di_Margie.png/120px-Marge_Simpson_in_A_proposito_di_Margie.png width=”100″ height =”150″ align=left>
Per concludere questa Parte con HTML, se si volesse scrivere dei commenti del codice si utilizza il tag <!– Qui si puo scrivere tutto quello che si vuole. –> Vedo che non si capisce come si scrive. Dopo <! ci sono due – come nella chiusura del tag.
Se proverete a scrivere in HTML vi accorgerete che graficamente non è bello. Per questo si utilizza il CSS che si utilizza insieme HTML. Con questo codice si potrà abbellire il tutto.
Nella prossima parte vi parlerò dei Form e delle Tabelle.
Se volete approfondire meglio HTML potete cercare su internet.
Lascia una risposta
Lascia una risposta
Info sull'autore