Principali codici HTML

Novembre 6, 2014
in Web Design
Federico Deserti

Siccome sarebbe impossibile fare un corso di Html In un solo articolo, inizierò una serie di brevi guide, che possano essere utili per chi si approccia a questo linguaggio. Voglio quindi iniziare con un sommario dei principali codici HTML o meglio detti Tag (ossia codici di programmazione).

Chiunque abbia un sito o un blog personale , può trovarsi nella condizione di dover mettere mano al codice di un testo o di una pagina; ormai è vero che le piattaforme CMS, forniscono ottime interfacce per gestire semplicemente i contenuti, ma non si può mai sapere, quindi procediamo:

Tag di base e di struttura

<HTML></HTML>
<HEAD></HEAD>
<TITLE> Pagina web </TITLE>
<BODY bgcolor=“#FFFFFF”>corpo del documento ….</BODY>

* Alcuni browser potrebbero visualizzare correttamente una pagina anche senza i tag di struttura, è però sempre opportuno utilizzarli.

** Nel tag body si possono settare vari attributi tra cui l’attributo bgcolor, che serve per definire lo sfondo della pagina. All’ attributo bgcolor si può assegnare una stringa esadecimale di 6 caratteri che definisce un colore tramite il formato RGB (Red Green Blue) preceduta dal carattere cancelletto (#). In alternativa si può assegnare direttamente il nome di un colore (green, blue, red, yellow)

Tag di formattazione del testo e divisori

<I> corsivo </I>
<B> grassetto </B>
<U> sottolineato </U>
<h1> Stile 1</h1>
<h2> Stile 2 </h2>
<h3> Stile 3 </h3>
<h4> Stile 4 </h4>

* Lo stile effettivamente scelto dipende dal browser; browser differenti potrebbero visualizzare stessi stili in modo differente

<P> nuovo paragrafo </P>
<BR>: a capo
<font size= “24” color= “grey”> TITOLO </font>

Liste a punti e numerate

<UL type= “circe”>
<LI>  elemento 1<LI>  elemento 2

<LI>  elemento 3

</UL>

* Il tipo delle liste non ordinate può essere circle, disk o square

<OL type= “A”>
<LI> A. elemento 1<LI> B. elemento 2

<LI> C. elemento 3

</OL>

** Il tipo delle liste ordinate può essere A,a,I,i,1 per ottenere come indici lettere maiuscole, minuscole , numeri romani maiuscoli o minuscoli o numeri arabi

Collegamenti e immagini

Visualizzazione immagine: <span style=”color: #ff0000;”><img src=”URL” alt=”” /></span>
Allineamento immagine: <span style=”color: #ff0000;”><img src=”URL” alt=”” align=”TOP/BOTTOM/MIDDLE/LEFT/RIGHT” /></span>
Testo alternativo di un’immagine: <span style=”color: #ff0000;”><img src=”URL” alt=”***” /></span>
Dimensioni immagine (in pixel): <span style=”color: #ff0000;”> <img src=”URL” alt=”” width=”?” height=”?” /></span>
Bordo immagine (in pixel): <span style=”color: #ff0000;”><span style=”color: #ff0000;”><img src=”URL” alt=”” border=”?” /></span></span>

Tabelle

<TABLE> contenuto tabella in righe e colonne </TABLE>

<TR> contenuto riga </TR>

<TD> contenuto cella </TD>

<CAPTION> titolo tabella </CAPTION>

<TH> titolo colonna </TH>

* alcuni attributi che si possono utilizzare sono border, align, valign, colspan, rowspan

Vi rimando infine ad una pagina utile al fine di ottenere i codici html dei colori: hslpicker.com

Federico Deserti

Da anni nel settore del Web design e nello sviluppo di siti web in tutte le loro componenti, ho realizzato numerosi progetti Web. Google partner certificato e specialista SEO e SEA, ho gestito e gestisco progetti di web Marketing multi canale sia nel settore B2B che B2C.

Domande? Contattami!