Guida HTML [Base]

« Older   Newer »
  Share  
~vale93kotor}
view post Posted on 11/4/2009, 18:17




Guida creata da vale93kotor solo per il My Simple Romance

Guida liberamente ispirata da Wiki.


Guida Codici HTML





Indice:
Guida Codici HTML

Codici Semplici<
Codici Per Il Testo
Liste
Colori HTML

Codici Semplici [2]<
Tabella
Inserire Flash,Video,Musica,...

Visualizzare HTML di una pagina web
Versioni Del Codice HTML e XHTML
Commenti all'interno del codice HTML
Elementi base di una pagina HTML

Sfondo della pagina

Pagina Web completa
Codici Semplici [3]<
Menù

HTML 5
Specifiche HTML5

XHTML
Versioni XHTML
DocType
Errori comuni
Tag XHTML comuni

Validatore W3C
Plug In Firefox
Info Validatore

Inserire Formule Matematica

Altre Guide






I codici HTML, a differenza del CSS e Del BBCode è utilizzabile sia in amministrazione->Gestioni Codici HTML, Sia all'interno dei singoli post.
L'HTML nel titolo di una discussione è consentito solo agli amministratori del forum.
I tag HTML sono di due tipi aperti
HTML
<hr>
oppure chiusi
HTML
<h1>testo</h1>
.



Codici Semplici




Elenco dei più elementari codici HTML utilizzabili dai webmaster;

--

Andare Accapo

HTML
<br>


--
Obbligare il testo a non andare accapo anche una volta esaurito lo spazio a disposizione

HTML
<nobr>testo</nobr>



Linea Orizzontale

HTML
<hr>


--

Collegamento

HTML
<a href="linksito">testo</a>


--

Inserire un'immagine

HTML
<img src="linkimmagine">


Per prelevare il link di un'immagine è sufficiente:
.Per Firefox->tasto destro sull'immagine->copia indirizzo immagine
.Per Explorer->proprietà->Indirizzo Immagine->copia

Se l'immagine è sul vostro computer è necessario Hostarla (caricarla) su un sito web come ad esempio:
.Tynpic
.Photobucket
.Image Shack
.Fc Image Hosting
.FF Image Hosting

--

Unendo i precedenti 2 codici è possibile inserire un'immagine con collegamento

HTML
<a href="linksito"><img src="linkimmagine"></a>


--

Posizionare un elemento:

Al centro
HTML
<div align="center">immagine/testo</div>

A destra
HTML
<div align="right">immagine/testo</div>

A sinistra
HTML
<div align="left">immagine/testo</div>


--

Collegamento ad un punto all'interno della pagina

HTML
<a name="target"></a>

Inserire il testo che si vuole linkare


HTML
<a href="#target">testo</a>

Inserire il "link al testo"

--

Immagini o testo in movimento:

HTML
<marquee direction="up" scrollAmount=1 height="30" width="70%">immagine/testo</marquee>

Personalizzazione:
HTML
direction="up"
modificare up per la direzione
HTML
scrollAmount=1
modificare 1 per la velocità
HTML
height="30"
modificare 30 per l'altezza del campo di scorrimento
HTML
width="70%"
modificare 70 per larghezza del campo di scorrimento rispetto alla larghezza della pagina

Che si ferma al passaggio del mouse:

HTML
<marquee onmouseover="this.stop()" onmouseout="this.start()">immagine/testo</marquee>

Non funziona nella firma

Che rallenta al passaggio del mouse:

HTML
<marquee scrollamount='5' onMouseover='this.scrollAmount=1' onMouseout='this.scrollAmount=5'>immagine/testo</marquee>


--

Codici Per Il Testo

:


Grassetto
HTML
<b>testo</b>


--


Corsivo
HTML
<i>testo</i>


--


Sottolineato

HTML
<u>testo</u>


--


Barrato
HTML
<s>testo</s>


--


Modificare Il Colore

HTML
<font color="colore">testo</font>

Al posto di colore inserire il colore con cui volete far diventare il testo

--


Modificare La Dimensione
HTML
<font size="dimensione">testo</font>

dimensione cambia la dimensione del testo (min 1)

--


Font testo
HTML
<font face="font1">testo</font>

font1 cambia il tipo di scrittura

Attenzione usare solo tipi di scrittura conosciuti e posseduti dalla maggior parte dei pc.

--


Cambiare colore, dimensione, font
HTML
<font color="colore" size="dimensione" face="font da utilizzare">testo</font>


--


Testo con alone ( solo Internet Explorer)

HTML
<div style="width:100%;filter:glow(color=colore)">testo</div>


--


Testo sfumato (solo Internet Explorer)
HTML
<div style="width:100%;filter:blur">testo</div>


--

apice

HTML
<sup>...</sup>

Testo in piccolo leggermente al di sopra della posizione occupate di solito dal testo

--


pedice

HTML
<sub>...</sub>

Testo in piccolo leggermente al di sotto della posizione occupate di solito dal testo




Liste





HTML
<ul type="disc">
<li>voce</li>
<li>voce</li>
<li>voce</li>
</ul>

Si può cambiare disc->cerchi pieni

con circle->cerchi vuoti
HTML
<ul type="circle">
<li>voce</li>
<li>voce</li>
<li>voce</li>
</ul>


square->quadrati
HTML
<ul type="square">
<li>voce</li>
<li>voce</li>
<li>voce</li>
</ul>



--


Lista numerata
HTML
<ol>
<li>voce</li>
<li>voce</li>
<li>voce</li>
</ol>


Verrà un elenco del tipo
1.voce 2. voce 3.voce


--


Other




Area di testo
HTML
<textarea>testo</textarea>


--


Input
HTML
<input type="" value="testo">



--


Menù a tendina
HTML
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Menù ad opzioni

--

Pulsante

HTML
<button>testo</button>

Pulsante con all'interno il testo

--




I frame
(pagine esterne incorporante all'interno della tua pagina web)

HTML
<iframe src="limkpagina" width="100" height="100"></iframe>




HTML
width="100" height="100"
->
Per modificare rispettivamente la larghezza e l'altezza del frame.
è da notare che google penalizza l'uso dell'iframe sia per il sito che incorpora l'inframe, sia per il sito incorporato all'interno dell'iframe.
In passato,ma a volte anche ora si usavano gli iframe anche per fare la grafica e l'impaginazione di un sito web.
In seguito si è passati all'impaginazione a tabella



Colori HTML



Qui trovate i codici per tutti i colori

Per inserire un colore è consigliabile mettere il numero che lo identifica e non la semplice dicitura white or black.






Colori Comuni




Il Codice che ci intesessa è il secondo.. quello preceduto da cancelletto (da copiare anch'esso), mentre il primo è il nome in inglese del colore.


Nome del colore | Codice colore:

aliceblue #F0F8FF 240 248 255
antiquewhite #FAEBD7 250 235 215
aqua #00FFFF 0 255 255
aquamarine #7FFFD4 127 255 212
azure #F0FFFF 240 255 255
beige #F5F5DC 245 245 220
bisque #FFE4C4 255 228 196
black #000000 0 0 0
blanchedalmond #FFEBCD 255 255 205
blue #0000FF 0 0 255
blueviolet #8A2BE2 138 43 226
brown #A52A2A 165 42 42
burlywood #DEB887 222 184 135
cadetblue #5F9EA0 95 158 160
chartreuse #7FFF00 127 255 0
chocolate #D2691E 210 105 30
coral #FF7F50 255 127 80
cornflowerblue #6495ED 100 149 237
cornsilk #FFF8DC 255 248 220
crimson #DC143C 220 20 60
cyan #00FFFF 0 255 255
darkblue #00008B 0 0 139
darkcyan #008B8B 0 139 139
darkgoldenrod #B8860B 184 134 11
darkgray #A9A9A9 169 169 169
darkgreen #006400 0 100 0
darkkhaki #BDB76B 189 183 107
darkmagenta #8B008B 139 0 139
darkolivegreen #556B2F 85 107 47
darkorange #FF8C00 255 140 0
darkorchid #9932CC 153 50 204
darkred #8B0000 139 0 0
darksalmon #E9967A 233 150 122
darkseagreen #8FBC8F 143 188 143
darkslateblue #483D8B 72 61 139
darkslategray #2F4F4F 47 79 79
darkturquoise #00CED1 0 206 209
darkviolet #9400D3 148 0 211
deeppink #FF1493 255 20 147
deepskyblue #00BFFF 0 191 255
dimgray #696969 105 105 105
dodgerblue #1E90FF 30 144 255
firebrick #B22222 178 34 34
floralwhite #FFFAF0 255 250 240
forestgreen #228B22 34 139 34
fuchsia #FF00FF 255 0 255
gainsboro #DCDCDC 220 220 220
ghostwhite #F8F8FF 248 248 255
gold #FFD700 255 215 0
goldenrod #DAA520 218 165 32
gray #BEBEBE 128 128 128
green #008000 0 128 0
greenyellow #ADFF2F 173 255 47
honeydew #F0FFF0 240 255 240
hotpink #FF69B4 255 105 180
indianred #CD5C5C 205 92 92
indigo #4B0082 75 0 130
ivory #FFFFF0 255 240 240
khaki #F0D58C 240 230 140
lavender #E6E6FA 230 230 250
lavenderblush #FFF0F5 255 240 245
lawngreen #7CFC00 124 252 0
lemonchiffon #FFFACD 255 250 205
lightblue #ADD8E6 173 216 230
lightcoral #F08080 240 128 128
lightcyan #E0FFFF 224 255 255
lightgoldenrodyellow #FAFAD2 250 250 210
lightgreen #90EE90 144 238 144
lightgrey #D3D3D3 211 211 211
lightpink #FFB6C1 255 182 193
lightsalmon #FFA07A 255 160 122
lightseagreen #20B2AA 32 178 170
lightskyblue #87CEFA 135 206 250
lightslategray #778899 119 136 153
lightsteelblue #B0C4DE 176 196 222
lightyellow #FFFFE0 255 255 224
lime #00FF00 0 255 0
limegreen #32CD32 50 205 50
linen #FAF0E6 250 240 230
magenta #FF00FF 255 0 255
maroon #800000 128 0 0
mediumaquamarine #66CDAA 102 205 170
mediumblue #0000CD 0 0 205
mediumorchid #BA55D3 186 85 211
mediumpurple #9370DB 147 112 219
mediumseagreen #3CB371 60 179 113
mediumslateblue #7B68EE 123 104 238
mediumspringgreen #00FA9A 0 250 154
mediumturquoise #48D1CC 72 209 204
mediumvioletred #C71585 199 21 133
midnightblue #191970 25 25 112
mintcream #F5FFFA 245 255 250
mistyrose #FFE4E1 255 228 225
moccasin #FFE4B5 255 228 181
navajowhite #FFDEAD 255 222 173
navy #000080 0 0 128
oldlace #FDF5E6 253 245 230
olive #808000 128 128 0
olivedrab #6B8E23 107 142 35
orange #FFA500 255 165 0
orangered #FF4500 255 69 0
orchid #DA70D6 218 112 214
palegoldenrod #EEE8AA 238 232 170
palegreen #98FB98 152 251 152
paleturquoise #AFEEEE 175 238 238
palevioletred #DB7093 219 112 147
papayawhip #FFEFD5 255 239 213
peachpuff #FFDAB9 255 218 185
peru #CD853F 205 133 63
pink #FFC0CB 255 192 203
plum #DDA0DD 221 160 221
powderblue #B0E0E6 176 224 230
purple #800080 128 0 128
red #FF0000 255 0 0
rosybrown #BC8F8F 188 143 143
royalblue #4169E1 65 105 225
saddlebrown #8B4513 139 69 19
salmon #FA8072 250 128 114
sandybrown #F4A460 244 164 96
seagreen #2E8B57 46 139 87
seashell #FFF5EE 255 245 238
sienna #A0522D 160 82 45
silver #C0C0C0 192 192 192
skyblue #87CEEB 135 206 235
slateblue #6A5ACD 106 90 205
slategray #708090 112 128 144
snow #FFFAFA 255 250 250
springgreen #00FF7F 0 255 127
steelblue #4682B4 70 130 180
tan #D2B48C 210 180 140
teal #008080 0 128 128
thistle #D8BFD8 216 191 216
tomato #FF6347 253 99 71
turquoise #40E0D0 64 224 208
violet #EE82EE 238 130 238
wheat #F5DEB3 245 222 179
white #FFFFFF 255 255 255
whitesmoke #F5F5F5 245 245 245
yellow #FFFF00 255 255 0
yellowgreen #9ACD32 154 205 50

Per la tabella ringraziamo webalice

Per Gli altri consultare il link fornito sopra.


--
Torna In Cima

Edited by ~vale93kotor} - 20/5/2009, 18:34
 
Top
Pukky_Rainbow™
view post Posted on 11/4/2009, 19:16




Bella guida! perfetta!
 
Top
~vale93kotor}
view post Posted on 12/4/2009, 13:06




Guida creata da vale93kotor solo per il My Simple Romance

Codici HTML


Part 2 liberamente ispirata a html.it



Posizionare il testo rispetto alla pagina (2):

Centrato
HTML
<center>testo</center>



Giustificato
HTML
<p align="justify">testo</p>



--


Titoli

Principale
HTML
<h1>Titolo</h1>


Altri: (via via più più piccoli)

HTML
<h2>Titolo</h2>

HTML
<h3>Titolo</h3>

HTML
<h4>Titolo</h4>

HTML
<h5>Titolo</h5>

HTML
<h6>Titolo</h6>

Il testo apparirà in grassetto e lascierà una riga vuota prima e dopo di sè


--


Paragrafi

HTML
<p>paragrafo1</p>


il testo lascierà una riga vuota prima e dopo di sè.


--


Blocco di testo

HTML
<div>Blocco di testo</div>

Il testo andrà semplicemente a capo senza lasciare alcuno spazio.


--


Span
HTML
<span>contenitore</span>

Il testo rimane normale (non lascia spazi e non va a capo).


--

Linea Orizzontale con attributi

HTML
<hr noshade size="5" width="50%" align="center" />


HTML
size="5" width="50%" align="center"

5->dimensione
50%->grandezza
center->allineamento (centrato)

--


Testo Lampeggiante

HTML
<blink>Testo</blink>


--

Inserire e-mail

( =codice che per i link)
HTML
<a href="mail">mail</a>


--


Tornare in cima

HTML
<a href="#top">Cima</a>

Codice per tornare in cima ad una pagina web

--

Tabella Base



HTML
<table border="1">
<tr>
<td>prima</td>
<td>seconda</td>
</tr>

<tr>
<td>terza</td>
<td>quarta</td>
</tr>
</table>


HTML
<table border="1">
Modificando 1 si cambia lo spessore del bordo

tr indica una riga, mentre td una cella all'interno della riga.
In questo caso lo spazio delle celle sarà tutto uguale (dimensionato in base al contenuto).
Il contenuto va inserito tra i codici
HTML
<td>inserirecontenuto</td>


-

HTML
<table width="300" height="200" border="1">

inserendo questo codice al posto della prima riga si potrà specificare rispettivamente la larghezza e l'altezza della tabella stessa;

-
mentre
HTML
<td width="25%">prima cella</td>
<td width="75%">seconda cella</td>

modificheremo la larghezza di ciascuna cella.


--


Elementi interni alla tabella



All'interno del tag td,come gia specificato precedentemente va inserito il contenuto della cella.

I tag principali del contenuto di una tabella sono:

Titolo della tabella
HTML
<caption>


Intestazione
HTML
<thead>


Piede ( parte conclusiva)
HTML
<tfoot>


Contenuto vero e proprio della tabella
HTML
<tbody>


--

Inoltre è possibile inserire una tabella dentro un'altra

HTML
<table width="430" border="1"> <tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td height="24">


<table width="100%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></td>
<td>

</td>
</tr>
</table>

Esempio: (del codice sopra)
  
   
   



----

Inserire Flash,Video,Musica,...



Audio


(Solo Internet Explorer)
HTML
<bgsound src="urlaudio" loop="ripetizioni" />

al posto di urlaudio va messo il link diretto al file e al posto di ripetizioni il n° di volte che lo si vuole far ripetere (1,..,infinite)


HTML
<embed src="urlaudio" autostart="true" />

True->parte in automatico
False->parte manualmente


Il metodo migliore consiste,però nell'usare il seguente codice:
HTML
<object data="urlaudio" type="audio/wav" autostart="true">
<embed src="urlaudio" autostart="true">
</object>


----

Flash






Ricordo che il link deve sempre essere diretto (terminare in .swf nel caso dei flash)
width e height indicano rispettivamente la larghezza e l'altezza.

----

Filmati


Per i semplici video da you tube consultare la seguente discussione x

Per inserire invece un altro tipo di video sempre con un link diretto bisogna usare il seguente codice
HTML
<object data="linkfilmato" type="video/quicktime" width="164" height="140">
<embed src="linkfilmato" type="video/quicktime" width="164" height="140">
</object>

width e height indicano rispettivamente la larghezza e l'altezza.

----

Java


NB: non tutti i pc hanno il supporto a java perciò nel codice ci dovrà essere un codice alternativo per le suddette macchine

HTML
<object id="appletLake" codetype="application/java" codebase="linkjava" classid="java:lake.class" width="263" height="130" >
<param name="image" value="linkimmagine">


<!--html alternativo -->
<img src="linkimmagine" width="263" height="65">

</object>


----

Script



Inserire nel codice
HTML
<script type="text/javascript">
function ciao()
{
alert ("msr");
}
</script>



Dove si vuole far comparire l'avviso
HTML
<input type="button" value="clicca" onClick="ciao()">


----


Torna In Cima

Edited by ~vale93kotor} - 18/5/2009, 15:30
 
Top
~vale93kotor}
view post Posted on 12/4/2009, 14:11




Guida creata da vale93kotor solo per il My Simple Romance


Visualizzare HTML di una pagina web



Per visualizzare il codice sorgente di una pagina è necessario;

Internet Explorer:
Visualizza -> HTML

Mozilla Firefox:
Visualizza -> Codice Sorgente

----

Versioni Del Codice HTML e XHTML



Di html il wc3 ha rilasciato varie versioni, l'ultima è l'HTML 4.01 rilasciata nel 1999.

Riguardo l'XHTML (xml+html circa) sono state rilasciate già 2 versioni.


Di HTML 4.01 sono state rilasciate diverse versioni:

-Strict: è una DTD particolarmente rigorosa.

-Transitional: è una versione temporanea, per consentire il passaggio da una specifica all'altra.

-Frameset. Per i frames


La più usata è la Transitional.


----

Commenti all'interno del codice HTML


Per inserire dei commenti all'interno del codice html per facilitarne la lettura da parte nostra è consigliabile inserire dei commenti che non influenzeranno la visualizzazione della pagina in questo modo
HTML
<!-- commento -->


----

Elementi base di una pagina HTML



Apriamo la nostra pagina HTML vuota e per prima cosa specifichiamo il tipo di html che intendiamo usare
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Info: (thanks to)

. HTML: il tipo di linguaggio utilizzato è l'HTML

. PUBLIC: il documento è pubblico

. W3C: il documento fa riferimento alle specifiche rilasciate dal W3C

. - (è il segno "meno"): le specifiche non sono registrate all'ISO (organizzazione di standardizzazione nternazionale). Se lo fossero state, ci sarebbe stato un "+"

.DTD HTML 4.01 Transitional: il documento fa riferimento a una DTD ("Document Type Definition" cioè "Definizione del tipo di documento"); la versione di HTML supportata è la 4.01 "transitional"

.EN: la lingua con cui è scritta la DTD è l'inglese


-

Dopo inseriamo il tag html
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>


</html>


-

inseriamo il codice head-> informazioni utili al browser per interpretare la pagina

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

</head>
</html>



All'interno del codice head inseriamo

il titolo della pagna web
HTML
<title>titolo</title>


il tipo di testo utilizzato (html|occidentale)
HTML
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


una descrizione sintetica del sito ( che può apparire nei risultati dei motori di ricercaù
HTML
<meta name="description" content="descrizione">


Le keywords (parole "chiave")
di cosa tratta il sito
HTML
<meta name="keywords" content="inserire keywords qui (esempio: simple plan my chemical romance forum e robba simile)">


--
Inseriamo il codice body dove va tutto il contenuto della nostra pagina web
HTML
<body>
contenuto pagina web
</body>


-
Logicamente body va all'interno del tag html:
HTML
<html>

<...tutto il resto spiegato sopra>

<body>
contenuto pagina web
</body>

</html>

--
Altro

A volte quando si fanno delle prove si desidera che il browser non ricordi nella cache la pagina (mostrandola così immutata mentre noi l'abbiamo modificata) per ovviare questo problema basta inserire nel documento HTML questo codice:
HTML
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

oppure
HTML
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

(essendo un meta tag va inserito nella sezione head)
--
Per fare in modo che la pagina web si aggiorni dopo un tot di secondi si può usare il seguente codice:
HTML
<META HTTP-EQUIV="Refresh" CONTENT="secondi; url=linksito">

--
Aggiungere ai Preferiti
basta inserire in head
HTML
<script language="JavaScript1.2">

var bookmarkurl="linksito"
var bookmarktitle="nomesito"

function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
</script>

--
Inserire come Homepage
Per mettere un "link" con cui inserire il sito come Homepage si può usare questo:
HTML
<a href="#" onClick="this.style.behavior=‘url(#default#homepage)‘;this.setHomePage(‘linksito‘);"> Imposta come home page</a>

--
Bloccare uso tasto destro (inserire in body | gestione codici html in cima )
HTML
<script language="JavaScript1.2">
<!--
if (document.all)
document.body.onmousedown=new Function("if (event.button==2||event.button==3)alert(testocheappare)")
// -->

</script>

Modificare testocheappare con ciò che si vuole far apparire
(non va su Firefox)




--
Torna In Cima

Edited by ~vale93kotor} - 20/5/2009, 18:10
 
Top
~vale93kotor}
view post Posted on 12/4/2009, 14:37




Guida creata da vale93kotor solo per il My Simple Romance

Sfondo della pagina




Colore



Per inserire un colore di sfondo ad una pagina web si usa
HTML
<body bgcolor="blue">

come detto prima al posto di blue è meglio mettere il codice del colore.

--

Immagine



HTML
<body background="linkimmagine">


--
è possibile inserire entrambi i tag in questo modo
HTML
<body bgcolor="colore" background="linkimmagine">

affichè durante il caricamento dell'immagine si veda un colore di sfondo

--

fissare lo sfondo (non si ripete)

HTML
<body style="
background-image: url(linkimmagine);
background-repeat: repeat;"

>


--

fissare lo sfondo (fare scorrere sopra il contenuto della pagina)

HTML
<body style="
background-image: url(sfondo.gif);
background-attachment:fixed;"

>



----

Eliminare i margini
HTML
<body leftmargin="0" topmargin="0">

va inserito sempre in body

----

Determinare la lingua della pagina
HTML
<body lang="it">

questo serve principalmente ai motori di ricerca

----

Colore Testo



per modificarlo in tutta la pagina è necessario inserire in boby
HTML
<body text="colore">


--

Link



ecco come cambiare colore ai link della pagina
HTML
<body link="colore1" alink="colore2" vlink="colore3">

.link->link non visitati
.alink->link visitati
.vlink->link attivi


--
Torna In Cima

Edited by ~vale93kotor} - 18/5/2009, 16:01
 
Top
Pukky_Rainbow™
view post Posted on 13/4/2009, 07:44




Very very GOOD!
 
Top
~vale93kotor}
view post Posted on 13/4/2009, 13:55




Guida creata da vale93kotor solo per il My Simple Romance

Pagina Web completa



(Riallacciamoci alla spiegazione precedente)
Quindi il codice completo della nostra prima pagina web sarà:

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="descrizione">
<meta name="keywords" content="inserire keywords qui (esempio: simple plan my chemical romance forum e robba simile)">

</head>
<body>
contenuto pagina web
</body>
</html>



----

All'interno del body vanno sia i vari stili (a meno che non siano inclusi in un css esterno caricato assieme alla pagina),
sia il contenuto vero e proprio della pagina web.

Altri Codici HTML



Elenco di altri codici HTML utili.

Thanks To Support Board FF .


Testo con alone intorno


HTML
<div style="width:100%; filter:glow(color=FF0000)">
testo con l'alone</div>


Modificando
HTML
glow(color=FF0000)
con codice del colore che si trova nella tabella in alto si cambia il colore dell'alone.

----


Testo al contrario (orizzontale)



HTML
<div style="width:100%; filter:fliph">testo al contrario</div>


----


Testo al contrario (verticale)



HTML
<div style="width:100%; filter:flipv">testo al contrario</div>


----


Testo con ombra



HTML
<div style="width:100%; filter:blur">testo con ombra</div>


un testo con ombra occupa più spazio di uno normale

----


Testo con ombra proiettata



HTML
<div style="width:100%; filter:shadow(color=FF0000)">testo con ombra</div>


Modificate sempre il codice del colore con i valori in tabella.
HTML
filter:shadow(color=FF0000)


l'ombra va un po' sotto il testo scritto.

----


Testo con ombra singola per lettera



HTML
<div style="width:100%; filter:dropshadow(color=FF0000)">testo con ombra</div>


Modificate sempre il codice del colore con i codici in tabella. L'ombra delle lettere va sotto il testo che avete scritto.

----


Gradazioni colori



HTML
<div style="width:100%; filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr=#C3CDDA,EndColorStr=#FFFFFF)"
>
Testoprova</div>


Modificando
HTML
(GradientType=0,StartColorStr=#C3CDDA,EndColorStr=#FFFFFF)
il colore d'inizio e quello di fine cambierete la gradazione.

----


Menù


Thanks To FF Wiki

Laterale a scomparsa



Codice per inserirlo
(Per i forum il codice va inserito nel box in fondo al forum)

HTML
<script type="text/javascript"><!--
moving=setTimeout('null',1);
function move(b){if(b<0&&parseInt(Menu.left)>-Width||b>0&&parseInt(Menu.left)<0)
{clearTimeout(moving); moving=setTimeout('move('+b+')',slideSpeed); theleft+=b; Menu.left=theleft} else{clearTimeout(moving); moving=setTimeout('null',1)}}
function startMenu(menu,barText){document.write('<div id=ssm style="width:'+(Width+30)+'px; left:-'+(Width)+'px; z-index:9; top:'+Yoffset+'px; '+(isStatic?'':'top:expression('+Yoffset+'+(y=document.body.scrollTop)+'px'); position:fixed!important; ')+'position:absolute" onmouseover=move(10) onmouseout="clearTimeout(moving); moving=setTimeout('move(-10)',waitTime)"><table class=mainbg width=100% cellpadding=4 cellspacing=1><tr><td class=title align=center><b>'+menu+'</b><td class=ww rowspan=100 style="width:20px;padding:12px 4px 12px 4px;font-size:10pt;font-weight:bold" align=center valign=middle>'+barText); Menu=document.getElementById("ssm").style; theleft=-Width}
function addItem(text,link){document.write('<tr><td class=aa><span class=web><a HREF='+link+'>'+text+'</a></span>')}
function endMenu(){document.write('</table></div>')}
if(document.getElementById){

isStatic=false;
Yoffset=20;
Width=130;
slideSpeed=20;
waitTime=500;

startMenu("Titolo Menu","T<br>i<br>t<br>o<br>l<br>o<br><br>M<br>e<br>n<br>ù");

addItem("NomeLink","link");
addItem("NomeLink","link");

endMenu()}
//-->
</script>


Per bloccare il menù in alto e non farlo scorrere modificare false con true:
HTML
if(document.getElementById){

isStatic=false;
Yoffset=20;
Width=130;
slideSpeed=20;
waitTime=500;

con
HTML
if(document.getElementById){

isStatic=true;
Yoffset=20;
Width=130;
slideSpeed=20;
waitTime=500;


--

Menù sotto il logo del forum


(Per i forum -> inserire prima di tutti gli altri codici in Hompage)

HTML
<table style="position: relative; z-index: 1; margin-top: -13px" class="header_width" cellpadding="0" cellspacing="0"><tr><td><table class="mainbg" style="text-align: center; width: 100%" cellpadding="4" cellspacing="1"><tr><td class="title" style="letter-spacing: 1px; border: 0">

<a href="link">nome link</a> -
<a href="link">nome link</a>

</table></table><br>



--


Versione trasparente del menù sotto il logo


(Per i forum -> inserire prima di tutti gli altri codici in Hompage)

HTML
<table style="position: relative; z-index: 1; margin-top: -13px; -moz-opacity: 0.70; -khtml-opacity: 0.70; filter:alpha(opacity=70); opacity: 0.70" class="header_width" cellpadding="0" cellspacing="0"><tr><td><table class="mainbg" style="text-align: center; width: 100%" cellpadding="4" cellspacing="1"><tr><td class="title" style="letter-spacing: 1px; border: 0">

<a href="link">nomelink</a> -
<a href="link">nomelink</a>

</table></table><br>


--


Menù sopra il logo del forum


(Per i siti:Codice in body)
(Per i forum:Il codice va inserito in cima al forum. )

HTML
<table class="header_width" cellpadding="0" cellspacing="0"><tr><td><table class="mainbg" style="text-align: center; width: 100%" cellpadding="4" cellspacing="1"><tr><td class="title" style="letter-spacing: 1px; border: 0">

<a href="link">nome link</a> -
<a href="link">nome link</a>

</table></table>


--


Versione trasparente del menù sopra il logo


(Per i siti:Codice in body)
(Per i forum:Il codice va inserito in cima al forum. )

HTML
<table style="-moz-opacity: 0.70; -khtml-opacity: 0.70; filter:alpha(opacity=70); opacity: 0.70" class="header_width" cellpadding="0" cellspacing="0"><tr><td><table class="mainbg" style="text-align: center; width: 100%" cellpadding="4" cellspacing="1"><tr><td class="title" style="letter-spacing: 1px; border: 0">

<a href="link">nomelink</a> -
<a href="link">nomelink</a>

</table></table>


--


Menù sopra il logo a linguette


(Per i siti:Codice in body)
(Per i forum:Il codice va inserito in cima al forum. )

HTML
<style type="text/css"><!--
#menu {background: none; border: 0; margin: 0; padding: 20px 0 0 0}
#menu a {background: url(http://skin.forumfree.net/menu/slide-left.gif) no-repeat; float: left; padding: 0 0 0 9px; text-decoration: none}
#menu a b {color: #444; font-size: 7.5pt; font-family: Verdana; background: url(http://skin.forumfree.net/menu/slide-right.gif) no-repeat right top; display: block; padding: 2px 13px 2px 4px}
#menu a:hover {background-position: 0% -40px}
#menu a:hover b {color: #000; background-position: 100% -40px}
//-->
</style><table id="menu" class="header_width" cellpadding="0" cellspacing="0"><tr><td>

<div><a href="link">nome link</a></div>
<div><a href="link">nome link</a></div>

</table>


Per centrarlo scrivere
CODICE
#menu {width: auto; background: none; border: 0; margin: 0; padding: 20px 0 0 0}


--


Menù sopra il logo a linguette rettangolari


(Per i siti:Codice in body)
(Per i forum:Il codice va inserito in cima al forum. )

HTML
<style type="text/css"><!--
#menu {background: none; border: 0; margin: 0; padding: 20px 0 0 0}
#menu div {background: #222; margin: 0 0 0 5px; padding: 3px 0 4px 0; float: left; position: relative; top: 1px}
#menu a {background: #4379B9; color: #FFF; font: normal 11px Verdana; border: 1px solid #FFF; text-decoration: none; padding: 3px 5px 3px 5px; position: relative; right: 2px; bottom: 1px}
#menu a:hover {background: #76ACD6; right: 1px; bottom: 0}
//-->
</style><table id="menu" class="header_width" cellpadding="0" cellspacing="0"><tr><td>

<div><a href="http://supporto.forumfree.net">Supporto</a></div>
<div><a href="http://skinlab.forumfree.net">Skin Lab</a></div>

</table>


Per centrarlo scrivere
CODICE
#menu {width: auto; background: none; border: 0; margin: 0; padding: 20px 0 0 0}


--
Altri Menù: Qui.


--
Torna In Cima

Edited by ~vale93kotor} - 18/5/2009, 15:37
 
Top
~Psycho Therapy
view post Posted on 13/4/2009, 17:49




io ho litigato con i codici HTML,con quello d splinder ci ho lavorato 3 ore emmezza e non andava,cazzo!
 
Top
~vale93kotor}
view post Posted on 24/4/2009, 15:02




Guida creata da vale93kotor solo per il My Simple Romance

HTML 5





Tratto da html.it

HTML5 (noto anche tra gli addetti ai lavori come Web Applications 1.0) è una tecnologia sviluppata dal WHATWG, un gruppo di lavoro aperto iniziato e supportato da tre dei principali produttori di browser: Mozilla, Opera e Apple. HTML5 non mira tanto a sostituire completamente HTML 4.01 o XHTML 1.0, si tratta piuttosto di una sorta di upgrade, di un'evoluzione. Mira ad avere una retrocompatibilità col passato, tenta di definire specifiche modalità di interazione oggi non definite in HTML 4.01, cerca di aggiornare i meccanismi di parsing dei browser con una soluzione che non vada a spaccare del tutto il web come oggi lo conosciamo. Nello stesso tempo, aggiunge nuovi elementi semantici per attività come la validazione dei form, l'interattività e lo storage dei dati in locale.

HTML5, non definisce solo come creare documenti validi, definisce anche come dovrebbe avvenire il parsing di documenti non validi o mal formati. L'obiettivo è quello di raggiungere rispetto a tutto ciò la piena interoperabilità tra i browser.


Il lavoro su HTML 5, che è iniziato nel 2004, è al momento portato avanti nell'ambito di un sforzo comune tra l'HTML WG del W3C e il WHATWG. Molti attori chiave nel settore stanno partecipando a questo lavoro faticoso, inclusi rappresentanti dei quattro principali browser e delle loro aziende: Apple, Mozilla, Opera e Microsoft. Sono attivi anche diverse altre organizzazioni e singoli individui con interessi e livelli di esperienza anche molto diversi.


Ecco le specifiche HTML5

QUI



sembra che la specifica HTML5 diverrà ufficiale e "operativa" solamente nel 2022...

--
Torna In Cima

Edited by ~vale93kotor} - 18/5/2009, 15:39
 
Top
~vale93kotor}
view post Posted on 25/4/2009, 19:20




Guida creata da vale93kotor solo per il My Simple Romance

XHTML



Versioni:



Come sopra accennato, XHTML è una riformulazione di HTML come linguaggio XML. Quindi, come è logico aspettarsi, ne esistono tre differenti DTD, corrispondenti ad altrettante DTD di HTML 4.01

* XHTML 1.0 Transitional: nato per favorire la migrazione dalla vecchia versione HTML 3.2 o per uso insieme a link e frame in-line. Accetta come validi anche i tag HTML che sono stati definiti come deprecati in XHTML ed è tollerante rispetto ad alcune non conformità sintattiche.
* XHTML 1.0 Strict: rispetto alla versione Transitional non accetta i tag HTML definiti deprecati, non è tollerante a non conformità sintattiche e prevede controlli più rigorosi anche rispetto al valore di alcuni attributi dei tag (per esempio, l'attributo id deve avere valori univoci all'interno dello stesso documento).
* XHTML 1.0 Frameset: nato per motivi di compatibilità per suddividere la finestra visualizzata dal browser in diversi frame (sottofinestre), pratica un tempo diffusa ma ora deprecata dal World Wide Web Consortium.

L'ultima versione di XHTML è la XHTML 1.1, che è una riformulazione dell' XHTML Strict, quindi ha una sola DTD. Non accetta i tag e gli attributi più criticati della precedente versione (come la struttura a frameset). Questa versione invece supporta i tag del cosiddetto markup «ruby», che consente di visualizzare i set di caratteri delle lingue orientali.

Esistono altre versioni di XHTML, studiate per dispositivi portatili:

* XHTML Basic: versione speciale semplificata dell'XHTML, per dispositivi le cui risorse non sono in grado di supportare il set completo di comandi e tag XHTML, come ad esempio i telefoni cellulari. È da considerare come la controparte degli esistenti linguaggi WML e C-HTML.
* XHTML Mobile Profile: basato sulla versione Basic di XHTML, sviluppato da Nokia per aggiungere all' XHTML Basic funzionalità specifiche dei terminali telefonici.

Lo sviluppo delle specifiche della versione XHTML 2 ha subito un rallentamento a causa di grossi problemi di compatibilità, dato che si sarebbe trattato a tutti gli effetti di di markup quasi completamente nuovo piuttosto che di un'evoluzione dell'XHTML 1.1. In parallelo, ha ripreso slancio lo sviluppo di una nuova serie di specifiche dell'HTML, l'HTML 5, che riprende alcune delle definizioni e degli approcci concepiti per XHTML 2 ma adattati per garantire un funzionamento compatibile con gli attuali browser. Secondo le intenzioni del W3C, le due specifiche sono nate per coesistere.


DocType



XHTML 1.0 Strict
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



Errori comuni


Alcuni degli errori più comuni che gli sviluppatori commettono scrivendo codice XHTML sono:

* Elementi privi di terminatore (come sopra detto l'XHTML è molto più restrittivo dell'HTML sotto questo aspetto).
* Omissione del testo da visualizzare in alternativa ad un'immagine (da usare mediante l'attributo alt, in modo da consentire la compatibilità con dispositivi il cui display non supporta immagini).
* Inserire testi direttamente nel corpo del documento.
* Annidare[1] blocchi di codice all'interno di elementi inline.
* Dimenticare le virgolette per delimitare gli attributi.
* Annidare gli elementi in modo non valido.
* Usare in modo scorretto entità varie (ad esempio & anziché &).
* Usare le maiuscole per i nomi dei tag e/o degli attributi.

Questo non è, ovviamente, un elenco esauriente degli errori, ma solo un'indicazione di quelli che i programmatori commettono più frequentemente. Quando una pagina è validata utilizzando il servizio di validazione del W3C, il validatore restituisce una piccola icona che può essere inserita nel documento per comprovarne la conformità allo standard. Il W3C fornisce lo stesso servizio anche per i fogli di stile CSS e per i documenti HTML.

è costituito da moduli divisi per tematica: da quelli struttuali (che definiscono cioè elementi creati allo scopo di strutturare il documento vero e proprio) a quelli di formattazione dei testi, passando per alcuni insiemi "extra" (ad esempio l'estensione Ruby per gli scritti asiatici).


L'esigenza che col tempo si è sentita sempre più viva nelle menti di chi produceva documenti aderenti alle specifiche consisteva nella possibilità di portare l'HTML ad un gradino più alto, dove il suo campo d'azione potesse rivelarsi ben più vasto del previsto: ramo mobile (cellulari, dispositivi portatili) e multimediale (browser da televisione, proiettori), programmazione, persino negli uffici o nei magazzini (attrezzature varie). Con una sintassi così chiara ed immediata, ne risulta un utilizzo altrettanto intuitivo e facilitato, adatto a più occasioni, pronto a diventare economicamente vantaggioso in più settori e situazioni.

Tuttavia, prima che questo fosse fisicamente possibile, era necessario ridefinire la struttura di base del linguaggio, rivederne caratteristiche e priorità, trarre ed ereditare i benefici dai metalinguaggi ad esso superiori. Stiamo parlando di XHTML come risultato e XML come ispirazione. Ne otteniamo quindi una sintassi che è a metà strada tra semplice HTML e applicazioni più avanzate.


Tornando alla domanda iniziale, quindi, è necessario chiarire alcuni punti (i più attenti se ne saranno accorti sicuramente):

*

XHTML 1.0 è un linguaggio di passaggio, ancora fortemente legato ad HTML. Non è modulare, e include tre DTD esattamente come HTML. Permette ancora l'utilizzo di molti tag deprecati e attributi a scopo presentazionale o dal contenuto semantico praticamente assente, ed ha quindi poco a che fare con XML, se non per la rigidità sintattica.
*

XHTML 1.1 consiste in un'evoluzione modulare di XHTML 1.0. Non ha più le tre dichiarazioni DTD classiche, ma potremmo dire che si rifà molto al set Strict della sua versione precedente.
*

Il supporto ad XHTML è attualmente scadente nella maggior parte dei parser in circolazione.





Tutti i tag XHTML presi dal sito lau.csi


Tag Xhtml comuni


* NN: indica la versione più datata di Netscape che supporta il tag
* IE: indica la versione più datata di Internet Explorer che supporta il tag
* DTD: indica in che tipo di XHTML 1.0 DTD il tag è supportato.
S= Strict, T= Transitional, e F= Frameset

Tag Descrizione NN IE DTD
HTML
<!--...--> Marca un commento 3.00 3.00 STF
<!DOCTYPE> Definisce il tipo di documento STF
<a> Marca un'ancora 3.00 3.00 STF
<abbr> Marca un'abbreviazione (abbreviation) 6.02 STF
<acronym> Marca un'acronimo 6.02 4.00 STF
<address> Marca un'elemento indirizzo 4.00 4.00 STF
<applet> Marca un'applet 2.00 3.00 TF
<area> Marca un'area in una mappa immagine 3.00 3.00 STF
<b> Marca un testo in grassetto (bold) 3.00 3.00 STF
<base> Definisce la base-URL per tutti i link nella pagina 3.00 3.00 STF
<basefont> Definisce il font di base 3.00 3.00 TF
<bdo> Definisce la direzione in cui il testo verrà visualizzato (bi-directional override) 6.02 5.00 STF
<big> Identifica un testo più grande 3.00 3.00 STF
<blockquote> Marca una citazione lunga 3.00 3.00 STF
<body> Marca il corpo del documento 3.00 3.00 STF
Manda a capo il testo 3.00 3.00 STF
<button> Marca un bottone 6.02 4.00 STF
<caption> Marca il titolo di una tabella 3.00 3.00 STF
<center> Marca del testo centrato 3.00 3.00 TF
<cite> Marca una citazione 3.00 3.00 STF
<code> Marca del codice da computer 3.00 3.00 STF
<col> Definisce attributi per le colonne delle tabelle (column) 3.00 STF
<colgroup> Marca un gruppo di colonne in una tabella (column group) 3.00 STF
<dd> Marca una descrizione dei termini in una lista di definizione (definition description) 3.00 3.00 STF
<del> Marca del testo che è stato eliminato (deleted text) 6.02 4.00 STF
<dir> Marca una lista di directory (directory) 3.00 3.00 TF
<div> Marca un contenitore logico in un documento (no valore semantico) 3.00 3.00 STF
<dfn> Marca un termine di definizione (definition term) 3.00 STF
<dl> Marca una lista di definizione (definition list) 3.00 3.00 STF
<dt> Marca un termine in una lista di definizione (definition term) 3.00 3.00 STF
<em> Marca del testo enfatizzato 3.00 3.00 STF
<fieldset> Marca un fieldset 6.02 4.00 STF
<font> Definisce il tipo di font, la dimensione e il colore del testo (deprecato con i css2) 3.00 3.00 TF
<form> Delimita un form 3.00 3.00 STF
<frame> Marca una sotto-sezione del <frameset>, ossia un singolo frame 3.00 3.00 F
<frameset> Marca un set di frame 3.00 3.00 F
<h1>..<h6> Marcano i titoti di diverso livello d'importante gerarchica da h1 a h6 (heading 1 to 6) 3.00 3.00 STF
<head> Delimita le informazioni relative al documento 3.00 3.00 STF
<hr> Inserisce una linea orizzontale (horizontal rule) 3.00 3.00 STF
<html> Delimita un documento HTML (hyper text markup language) 3.00 3.00 STF
<i> Marca del testo corsivo (italic) 3.00 3.00 STF
<iframe> Marca un frame inline che contiene altri documenti (inline frame) 6.00 4.00 TF
<img> Marca un immagine (image) 3.00 3.00 STF
<input> Marca un campo input (in un form) 3.00 3.00 STF
<ins> Marca del testo inserito (insered text) 6.02 4.00 STF
<isindex> Deprecato - marca un input a linea singola (usare input) 3.00 3.00 TF
<kbd> Marca del testo digitato da tastiera (keyboard text) 3.00 3.00 STF
<label> Marca e collega un'etichetta a un oggetto di un form 6.02 4.00 STF
<legend> Marca il titolo di un fieldset 6.02 4.00 STF
<li> Marca i singoli elementi di una lista (list item) 3.00 3.00 STF
<link> Definisce la relazione tra due documenti relazionati 4.00 3.00 STF
<map> Marca una mappa lato client (immagine con regioni cliccabili) 3.00 3.00 STF
<menu> Delimita un menù a lista 3.00 3.00 TF
<meta> Marca le meta infomazioni relative alla pagina 3.00 3.00 STF
<noframes> Rende disponibile del testo per i browser che non supportano i frame 3.00 3.00 TF
<noscript> Tag usato per browser che non sono in grado di eseguire gli script contenuti nel tag <script> 3.00 3.00 STF
Marca un oggetto "incastonato" nella pagina (embedded object) 3.00 STF
<ol> Delimita una lista ordinata (ordered list) 3.00 3.00 STF
<optgroup> Delimita un gruppo logico di opzioni in una select (option group) 6.00 6.00 STF
<option> Marca un opzione in una select 3.00 3.00 STF
<p> Marca un paragrafo (paragraph) 3.00 3.00 STF
Marca i parametri per un tag object (parameter) 3.00 3.00 STF
<pre> Marca del testo preformattato (preformatted text) 3.00 3.00 STF
<q> Marca una breve citazione (quotation) 6.02 STF
<s> Marca del testo barrato (strikethrough text) 3.00 3.00 TF
<samp> Marca un codice d'esempio da computer 3.00 3.00 STF
<script> Delimita uno script 3.00 3.00 STF
<select> Marca un menù a discesa (drop-down list) 3.00 3.00 STF
<small> Marca del testo piccolo 3.00 3.00 STF
<span> Marca una sezione in un documento (no valore semantico) 4.00 3.00 STF
<strike> Marca del testo barrato (strikethrough text) 3.00 3.00 TF
<strong> Marca del testo in grassetto 3.00 3.00 STF
<style> Marca uno stile in linea (verrà deprecato, è consigliato l'utilizzo di css esterni) 4.00 3.00 STF
<sub> Marca un testo a pedice (subscript text) 3.00 3.00 STF
<sup> Marca un testo a apice (superscript text) 3.00 3.00 STF
<table> Delimita una tabella 3.00 3.00 STF
<tbody> Delimita il corpo della tabella (table body) 4.00 STF
<td> Marca la cella di una tabella 3.00 3.00 STF
<textarea> Marca un'area di inserimento testo in un form 3.00 3.00 STF
<tfoot> Delimita il "piede" della tabella (table foot) 4.00 STF
<th> Marca un cella d'intestazione in una tabella (table header) 3.00 3.00 STF
<thead> Delimita la testata della tabella (table head) 4.00 STF
<title> Marca il titolo di un documento 3.00 3.00 STF
<tr> Marca una riga in una tabella (table row) 3.00 3.00 STF
<tt> Marca del testo stile teletype (teletype text) 3.00 3.00 STF
<u> Marca del testo sottolineato (underline) 3.00 3.00 TF
<ul> Marca una lista non ordinata (unordered list) 3.00 3.00 STF
<var> Marca una variabile (variable) 3.00 3.00 STF
<xmp> Deprecato - Marcava del testo preformattato (usare <pre>) 3.00 3.00





Fonti: X e Wiki


--
Torna In Cima

Edited by ~vale93kotor} - 18/5/2009, 15:49
 
Top
~vale93kotor}
view post Posted on 30/4/2009, 16:43




Guida creata da vale93kotor solo per il My Simple Romance

Validatore W3C



Il validatore, che è presente a Questo indirizzo analizza i vari errori (a volte ignorati dai browser che visualizzano la pagina corretta) del codice sorgente (html,css,xhtml,...) della vostra pagina web.

Inseriamo il link e compioliamo le varie opzioni:

Character Encoding lasciamo in autmomatico;
Document Type inseriamo il tipo di html,xhtml,... usato per la nostra pagina web oppure lasciamo in automatico;


List Messages Sequentially->messaggi d'errore ordinati per riga
Group Error Messages by Type->messaggi d'errore ordinati per tipo d'errore


Inoltre sono selezionabili
Show Source Clean up Markup with HTML Tidy
Show Outline Validate error pages Verbose Output


Clicchiamo su Check e vediamo gli errori (se presenti)

Esempio di pagina con errore
CITAZIONE
Errors found while checking this document as HTML 4.01 Transitional!

Esempio di pagina corretta
CITAZIONE
This document was successfully checked as HTML 4.01 Transitional!

Se il vostro sito passa il controllo riceverete un "tagliando" da inserire nel vostro sito per comunicare che esso è validato.


Se invece sono presenti degli errori oltre a specificare il punto dove vi è l'errore c'è una spiegazione sull'errore
Esempio:
CITAZIONE
# Error Line 157, Column 50: required attribute "ALT" not specified

<td></td></tr>



The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Oltre agli errori possono esserci degli avvisi che determinano una incorrezione del codice non grave quanto gli errori (sbaglio nel scrivere il doctype,...)



Inoltre è possibile validare il codice css di una pagina web tramite Questo link con le stesse modalità della validazione HTML o XHTML precedente.



Plug In FIrefox


Ecco dei Plug-In per validare la vostra pagina grazie a firefox:
1
2 (Solo firefox 1 e 2)
3 (Solo firefox 1 e 3)
4 (Solo firefox 1 e 3.6a1pre)
5(Solo firefox 1 e 2)
6(SPERIMENTALE. Solo firefox 3)

Se ne trovate altri segnalatelo pure qui sotto


--
Torna In Cima

Edited by ~vale93kotor} - 18/5/2009, 15:44
 
Top
~vale93kotor}
view post Posted on 16/5/2009, 17:16




Guida creata da vale93kotor solo per il My Simple Romance

Altre Info Sul validatore



Il validatore fornisce unicamente il tipo di errore e dove è copllocato (il numero della riga); Inoltre segnala la natura dell'errore,ma non da le soluzioni che vanno trovate manualmente;


Il validatore funziona con i seguenti linguaggi web:


































Inoltre i caratteri (scrittura) supportati per la validazione sono:
























































-
Logicamente non è necessario inserire il tipo di codice che si usa nella pagina, esso verrà capito automaticamente.

--
Torna In Cima

Edited by ~vale93kotor} - 18/5/2009, 15:44
 
Top
~vale93kotor}
view post Posted on 20/5/2009, 17:33




Guida creata da vale93kotor solo per il My Simple Romance


Formule Matematiche




Girando per il web ho visto che è molto difficile se non a volte impossibile riuscire a mettere delle equazioni o delle formule relativamente complesse su un sito web.

Per quelle facili basta avere un po di accortezza e di invettiva:

Per mettere un esponente basta mettere
HTML
x<sup>2</sup>

Otteniamo:
x2

e l'opposto
HTML
x<sub>n</sub>=

Si ha:
xn=

Per le frazioni si possono ottenere o mettendo semplicemente la /
oppure
HTML
&frac14;

¼
Al posto di 1 quello che va sopra e al posto di 4 quello che va sotto..

Per avere frazioni su righe differenti le si può inserire in una tabella,ma questo appesantisce di molto il codice
HTML
<table border="0" cellspacing="0" width="50">
<tr> <td>
x <hr align="center"> 2-x
</td></tr>
</table>

x
2-x


[thanks to miimati]


Il metodo migliore,oltre ad usare il codice javascript di matematica fornito da mozilla (non compatibile con molti browser) oppure il codice Tex coi comandi
HTML
<math></math>
che ha molti limiti è inserire la formula in un'immagine e hostarla su un sito web per hosting.

Ho trovato un sito in cui si inserisce la formula direttamente dalla calcolatrice (che è abbastanza decente) presente sul sito stesso e ti viene fornito il codice con l'immagine da mettere sul vostro sito web con la formula

Link al Sito

Esempio di formula eseguita da me su quel sito:





--
Torna In Cima

Edited by ~vale93kotor} - 6/6/2009, 19:22
 
Top
~vale93kotor}
view post Posted on 7/9/2009, 16:53




A presto una guida su come creare una pagina HTML con relativo CSS (base) passo passo xD.
 
Top
13 replies since 11/4/2009, 18:17   558 views
  Share