Piccole basi di Html

[Matty90]

Introduzione rapida all'html


STRUTTURA DI UN TAG

All'interno di ogni pagina web è presente una serie di marcatori, o codici (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione.



I tag sono inseriti tra parentesi uncinate < > e la loro chiusura viene indicata con una slash (/). Il contenuto che si vuole rappresentare sulla pagina html va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:
contenuto


Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra:

<P align="right">testo</P>

dall'esempio è evidente che la struttura di un attributo è: attributo="valore"
Quindi in definita la struttura di un tag sarà:

<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>

Alcuni tag, come per esempio il tag immagine non viene chiuso in quanto l'immagine è ricercata in una specifica directory del sito. Si avrà quindi:

<IMG widht="20" height="20" src="miaImmagine.gif" alt="alt">

[Matty90]

TAG IN MAIUSCOLO O MINUSCOLO??


L'HTML è "case unsensitive", cioè indipendente dal formato. Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo.

e

vengono letti allo stesso modo dal browser.
Fino a qualche tempo fa, per aumentare la leggibilità del codice, era buona norma scrivere in maiuscolo il nome del tag (es:

) e in minuscolo gli attributi (es: align="right"). Quindi:

[Matty90]

Dopo questa piccola introduzione faccio per voi un elenco dei più importanti tag, anzi, diciamo dei più utilizzati...

----colore testo in tutta la pagina----



---paragrafo---

testo

---allineamenti---

testo

testo a sx

testo

testo a dx

testo

testo giustificato

---stile carattere----
testo in grassetto
testo in corsivo

testo preformattato

testo sottolineato
testo barrato
^{testo in apice}
_{testo in pedice}

---font del testo---
testo in Arial
testo in Verdana
testo in Geneva
.....

---colore del testo e grandezza---
testo blu
testo di grandezza 1


---elenchi ordinati numerati---

1. primo elemento


2. secondo elemento


3. terzo elemento

---elenchi ordinati lettere---

1. primo


2. secondo


3. terzo

---elenchi ordinati n° romani---

1. primo


2. secondo


3. terzo

[Matty90]

---collegamenti ipertestuali---
sito

---immagini---

hspace="20">

---tabella---

prima cella	seconda cella
terza cella	quarta cella

------------------------------------------------------------

[Matty90]

Pensando di aver fatto cosa gradita e di utilità pubblica, mi tengo disponibile, per qualunque altra spiegazione, per qualunque aiuto o in caso per la realizzazione del codice di base per le vostre pagine web...

Matty90

[lubu]

complimenti matty questo è veramente interessante..mucho mucho..conosci qualke tutorial in proposito??

[Matty90]

qualche tutorial magari no...

io mi sono ispirato prevalentemente a quello che abbiamo fatto a a scuola, ma copiando la struttura di un tag da www.html.it

[TheMic]

Bravo Matty ottime info iniziali per HTML...

aggiungo solo alcune cosine:
la W3C ( World Wide Web Consortium. L'organizzazione internazionale che definisce gli standard e le norme per Internet. ) ha dichiarato che TUTTA la struttura html va scritta in minuscolo, e inoltre i TAG sprovvisti del tag di chiusura ( come ad esempio il TAG img ) dovranno essere chiusi SEMPRE inserendo uno slash prima dell'ultima parentesi uncinata... quindi in questo modo:

errato:

giusto:

Per ultimo aggiungo (ma metto solo il cenno perchè questo discorso andrebbe approfondito di molto) che è necessario anche inserire il DOCTYPE della pagina HTML o anche definito DTD(Document Type Declaration) e specifica che versione HTML viene usata nel documento.
Qui potete leggere qualcosa sui DTD: http://en.wikipedia.org/wiki/DocType (è in inglese)

Tutti questi accorgimenti sono diventati necessari perchè il tanto amato HTML sta convergendo o meglio sta tornando all'iniziale derivazione dalla strutturazione XML.

Ultima cosettina per chi è interessato... qui potete trovare tantissime informazioni GIUSTE su tutto ciò che riguarda le pagine WEB: http://www.w3schools.com/


ZAO BELI!

[Matty90]

perfetto... la cosa nuova della slash nei tag senza chiusura non l'avevo mai sentita... vabbè... grazie comunque... ciao!!!

[wasky]

visto che hai iniziato a parlare di

perderei due spicci di tempo per parlare dei foglio di style.css


ecco un esempio

BODY
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-SIZE: 12px;
    PADDING-BOTTOM: 0px;
    COLOR: lawngreen;
    PADDING-TOP: 0px;
    FONT-FAMILY: balloon Bd BT, Verdana, Geneva, Arial, Helvetica, monospace, Comics Sans MS 'Comics Sans MS';
    BACKGROUND-COLOR: #000000
}
A:link
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    COLOR: #00ff00;
    FONT-FAMILY: Comics Sans MS;
    TEXT-DECORATION: none
}
A:visited
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    COLOR: #00ff00;
    FONT-FAMILY: Comics Sans MS;
    TEXT-DECORATION: none
}
A:hover
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    COLOR: #ff6600;
    FONT-FAMILY: Comics Sans MS
}
P
{
    FONT-SIZE: 12pt;
    COLOR: #ffffff;
    FONT-FAMILY: Arial
}
TD
{
    FONT-SIZE: 12pt;
    COLOR: #ffff00;
    FONT-FAMILY: Comics Sans MS
}
LI
{
    FONT-SIZE: 12pt;
    COLOR: #ffff00;
    FONT-FAMILY: Comics Sans MS
}
TD.Std
{
    FONT-SIZE: 12pt;
    COLOR: #ffff00;
    FONT-FAMILY: Comics Sans MS
}

come vedi i Tag

e sono presenti anche nel foglio di stile da questo parti per ottenere ad esempio scritte che al passaggio del mouse cambiano colore o per decidere se vuoi un carattere ( font ) standard per permettere a chi visita il sito di leggerlo anche se non ha il font usato installato in windows/font

per usare il foglio di style.css devi aggiungere nella Head questo codice

complimenti per il topic matty90

wasky