Principali codici HTML

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

Condividi
Federico Deserti

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!

Ti potrebbe anche interessare…