Ciarpame {.com} » HTML http://www.ciarpame.com Useful stuffs for the masses. Useless things for few. Tue, 01 Dec 2009 13:03:55 +0000 en hourly 1 http://wordpress.org/?v=3.4-alpha Primi passi di HTML http://www.ciarpame.com/2009/01/20/primi-passi-di-html/ http://www.ciarpame.com/2009/01/20/primi-passi-di-html/#comments Tue, 20 Jan 2009 14:59:14 +0000 Fabio Lenotti http://www.ciarpame.com/?p=477 Salve a tutti mi chiamo Fabio Lenotti e per una settimana sono andato a “lavorare” presso la ditta SIS.Srl di Varese.
Durante il periodo di stage mi è stato chiesto di imparare i rudimenti dell’html, linguaggio alla base del web.
Me lo aspettavo molto più difficile e complicato, forse però mi è sembrato  facile perche ho appreso solo i concetti base di questo linguaggio.

Va bene per tutti coloro che vorrebbero imparare qualcosa sull’HTML vi spiego come ho fatto.

Nella mia settimana di lavoro non ero da solo, ma ero seguito dal mio tutor aziendale Giovanni Savastano che mi ha insegnato tante cose riguardanti il mondo del web, comunque se volete provare ad apprendere l’HTML vi consiglio di andare sul sito http://www.w3schools.com/html/default.asp è un sito tutto in inglese ma scritto in modo chiaro e semplice e quindi molto facile da tradurre.
Questo sito ha diviso l’HTML in Basic e Advanced, nel primo impari i concetti base e nel secondo scopri qualche tag in più per rendere ancora più bella e interessante la tua pagina web, la cosa che rende semplice e chiaro l’HTML in questo sito sono gli esempi che fa ogni volta che ti spiega qualcosa.

Alla fine vi consiglio di fare il quiz che trovata, per vedere cosa avete appreso e cosa dovete riguardare, io li ho fatti e mi sono serviti molto.
Come ambiente di sviluppo vi consiglio un ottimo sofware gratis: Notepad++. Potete scaricarlo da http://notepad-plus.sourceforge.net/it/site.htm
È un programma che ti permette di scrivere in molti linguaggi di programmazione tra cui l’HTML, scaricatevi anche firebug, questa estensione di Firefox ti permette di vedere come è scritto il file (.html) di tutti i siti web è molto utile.

Se volete vedere ed imparare anche l’XHTML andate sul sito http://www.w3schools.com/xhtml/default.asp
L’XHTML (acronimo di eXtensible HyperText Markup Language, Linguaggio di marcatura di ipertesti estensibile) è un linguaggio di marcatura che associa alcune proprietà dell’XML con le caratteristiche dell’HTML: un file XHTML è un pagina HTML scritta in conformità con lo standard XML.
L’XHTML è nato ufficialmente il 26 gennaio 2000 come standard del World Wide Web Consortium (W3C), e può essere definito tecnicamente una riformulazione dell’HTML 4.01 in XML 1.0; è una sorta di “ponta” tra questi due linguaggi.
Il linguaggio prevede un uso più restrittivo dei tag HTML; solo la struttura della pagina è scritta in XHTML, mentre il layout è imposto dai fogli di stile a cascata (Cascading Style Sheets, CSS).

Tag del HTML

GENERALE

(impostazioni obbligatorie del documento ipertestuale)

tag descrizione
<HTML></HTML> (inizio e fine del tag, tag obbligatorio)tipo di documento
<HEAD></HEAD> (descrizioni varie come il titolo e il matename)testa
<TITLE></TITLE> (nome del documento, contenuto in head)titolo del documento
<BODY></BODY> (corpo del file)contenuto

FORMATTAZIONE DEL TESTO

tag descrizione
<H?></H?> (sono disponibili 6 diversi livelli di grandezza ed importanza: h1, h2, etc.)titolo di paragrafo e capitoli
<H? ALIGN=LEFT|CENTER|RIGHT></H?> (alliniamento titolo)
<DIV></DIV> (usato per porzioni di testo o paragrafi)divisione di un blocco
<DIV ALIGN=LEFT|RIGHT|JUSTIFY|CENTER></DIV> (allineamento del blocco)

FORMATTAZIONI PARTICOLARI

tag descrizione
<BLOCKQUOTE></BLOCKQUOTE> (rientrato)citazioni
<EM></EM> (corsivo)evidenziato
<STRONG></STRONG> (neretto)molto marcato
<CITE></CITE> (corsivo)citazione
<CODE></CODE> (programmi)codice programmi
<SAMP></SAMP> (esempio)
<KBD></KBD> (carattere a spaziatura fissa)immissione da tastiera
<VAR></VAR> (variabile)
<DFN></DFN> (definizione)
<ADDRESS></ADDRESS> (indirizzo dell’autore)
<BIG></BIG> (font grande)
<SMALL></SMALL> (font piccolo)
<B></B> (grossetto)
<I></I> (corsivo)
<U></U> (sottolineato)
<S></S> (depennato)strikeout
<SUB></SUB> (pedice)
<SUP></SUP> (apice)
<TT></TT> (spazziatura fissa)font non scalabile
<PRE></PRE> (mantiene gli allineamenti originali)preformattato
<PRE WIDTH></PRE> (in caratteri)larghezza
<CENTER></CENTER> (sia per testo che immagini)centrato
<BLINK></BLINK> (Intermittente)
<FONT FACE=”Verdana,Arial,Helvetica,Geneva”> (pecifica il tipo di Font)
<FONT SIZE=?></FONT> (valori da 1 a 7)randezza del Font
<FONT SIZE=+|-></FONT> (cambia la grandezza del font)
<BASEFONT SIZE=?> (da 1 a 7; il valore di default e’ 3)grandezza font di base
<FONT Color=”#$$$$$$”></FONT> (colore del Font )

COLLEGAMENTI NEL TESTO E AD ALTRI FILE

tag descrizione
<A HREF=”URL”></A> (collegamento di base)
<A HREF=”URL#$$$$”></A><A HREF=”#$$$$”/></A> il primo(in altro file)il secondo(nello stesso file)link ad un’ ancora nel file
<A HREF=”URL” TARGET=”$$$$”></A> (nello stesso file)ad un file indicando la destinazione
<A NAME=”$$$$”></A> (Definizione di ancora nel file)

IMMAGINI

tag descrizione
<IMG SRC=”URL”> (Inserimento di una immagine )
<IMG SRC=”URL” ALIGN=TOP|BOTTOM|MIDDLE> (Allineamento )
<IMG SRC=”URL” ALIGN= LEFT|RIGHT|TEXTTOP |ABSMIDDLE|BASELINE> (Allineamento)
<IMG SRC=”URL” ALT=”$$$$”> (quando non viene visualizzata l’immagine si vedra’ il testo carattere)testo alternativo
<IMG SRC=”URL” ISMAP> (richiede un script)Mappa navigabile
<IMG SRC=”URL” USEMAP=”URL#$$$$”> (Mappa navigabile client-side o locale)
<IMG SRC=”URL” WIDTH=”?” HEIGHT=”?”> (in pixel)Dimensioni
<IMG SRC=”URL” BORDER=?> (in pixel)Bordi
<IMG SRC=”URL” LOWSRC=”URL”> (Bassa risoluzione)
<IMG SRC=”URL” HSPACE=? VSPACE=?> (Spaziatura)

MAPPE

Occorre conoscere in molti casi la directory sul server per posizionare il file .map di definizione.
Usando però un tipo di dichiarazione Client-Side il file .map non è più necessario. La definizione di mappa può essere dichiarata all’interno del file documento HTML. Per la dichiarazione si usa il codice

come indicato sotto.

tag descrizione
<MAP NAME=”$$$$”;></MAP> (descrive la mappa)Specifica della mappa
<AREA SHAPE=”RECT|CIRCLE|POLYGON” COORDS=”,,,” HREF=”URL”|NOHREF> (Sezione mappa)

SEGNI DI PARAGRAFO ED ARGOMENTO

tag descrizione
<P></P> (lascia due righe bianche)Paragrafo
<P ALIGN=LEFT|CENTER|RIGHT></P> (Allineamento)
<BR> (ritorno a capo)Interruzione riga
<HR> (riga orizzontale)
<HR ALIGN=LEFT|CENTER|RIGHT> (Allineamento)
<HR SIZE=?> (spessore in pixel)
<HR WIDTH=?> (lunghezza in pixel)
<HR WIDTH=%> (lunghezza in %)
<HR NOSHADE> (No effetto 3D)

LISTE

Elenchi semplici, composti, numerati o puntati

tag descrizione
<UL><LI></UL> (<LI> prima di ogni elemento)Liste libere
<UL TYPE=DISC|CIRCLE|SQUARE><LI TYPE=DISC|CIRCLE|SQUARE> (valido per tutta la lista)Punto
<OL><LI></OL> (<LI> prima di ogni elemento)Liste numerate
<OL TYPE=A|a|I|i|1><LI TYPE=A|a|I|i|1gt; (valido per per tutta la lista)Tipo di numero
<OL VALUE=?><LI VALUE=?> (per tutta la lista)Numero di partenza
<DL><DT><DD></DL> (Molto usata nella definizione dei menu )Lista di definizioni

SFONDI E DEFINIZIONE DI COLORE

tag descrizione
<BODY BGCOLOR=”#$$$$$$”> (in ordine di RGB)Colore di sfondo
<BODY LINK=”#$$$$$$”> (colore dei collegamenti)
<BODY VLINK=”#$$$$$$”> (colore dei collegamenti visitati )
<BODY TEXT=”#$$$$$$”> (colore del testo)
<BODY ALINK=”#$$$$$$”> (colore del collegamento in corso)
<BODY BACKGROUND=”URL”> (immagine di sfondo)
]]> http://www.ciarpame.com/2009/01/20/primi-passi-di-html/feed/ 0