Vogliamo realizzare una tabella per l’orario dei corsi di una palestra.
Per quanto riguarda lo sfondo della tabella e i font, sono validi tutti gli stili già studiati.
E’ possibile assegnare ampiezza e altezza della tabella con width ed height.
Nella prima riga posso utilizzare il tag TH (table heading) al posto del TD, in modo che il testo sia già centrato e sia in grassetto. In questo modo è anche possibile applicare uno stile diverso alle caselle della prima riga rispetto alle altre.
Per creare una semplice tabella (per esempio per gli orari dei corsi sul nostro sito web) dobbiamo imparare ad utilizzare diversi tag.
Il primo tag è <TABLE> che indica al browser che si sta aprendo una tabella.
Successivamente, è necessario aprire la riga con il tag TR, e poi la colonna (o la casella) con il tag <TD>.
All’interno del tag <TD> va inserito il contenuto da visualizzare.
Tutti i tag vanno richiusi.
Per esempio, se vogliamo realizzare la seguente tabella:
Gli Headings sono dei tag utilizzati per definire le intestazioni di un testo.
Sono sei: H1,H2,H3,H4,H5,H6, che indicano l’importanza dell’intestazione, in ordine discendente (H1 è il tipo di intestazione più importante).
In automatico il testo contenuto nel tag è in grassetto e una grandezza del font già decisa.
Le regole CSS sono strutturate secondo lo schema
selettore {
proprietà1 : valore1;
proprietà2 : valore2, valore3;
}
Per esempio:
body { background: black;}
I fogli di stile (CSS) sono dei file esterni. Servono per separare i contenuti (che vengono scritti nella pagina web) dalla formattazione (definita nei fogli di stile).
La dichiarazione che utilizzeremo un foglio di stile per la formattazione va inserita nell’HEAD. Tale dichiarazione può essere effettuata in modi diversi:
<html>
<head>
<title>MIA PAGINA</title>
<link rel=”stylesheet” type=”text/css” href=”style.css“>
</head>
Per scrivere una pagina in HTML, è necessario aprire un editor di testo (per esempio il notepad) e salvare la pagina con estensione .htm o .html.
Esistono diversi editor di testo gratuiti e con funzionalità molto utili agli sviluppatori.
In questa guida, faremo riferimento all’editor di testo Context, che è scaricabile gratuitamente al link http://www.contexteditor.org/.
Chiamiamo questa prima pagina saluta.html e scriviamo all’interno il seguente contenuto:
Il primo tag che useremo è il tag <HTML>, che indica che tutto ciò che è compreso tra apertura e chiusura tag è in codice HTML:
<html>
… altri tag …
</html>
Un documento HTML è normalmente diviso in due sezioni:
head
body
Il linguaggio HTML viene utilizzato per formattarele pagine web.
All’interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la formattazione della pagina web.
I tag vanno inseriti tra parentesi angolari
<Nome-TAG>
La chiusura del tag viene indicata con una “/” (è il simbolo comunemente detto “slash”). Quindi:
</Nome-TAG>
Nota bene: La maggior parte dei tag deve essere obbligatoriamente chiusa, altrimenti la pagina potrebbe non essere correttamente visualizzata.