Guida all'html di Maki-chan
Allora, spiego velocemente, spero che non sia troppo difficile o contorto :)
innanzitutto, per creare un documento html basta aprire il notepad ^_^
si inizia scrivendo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (questa è la
dichiarazione del tipo di documento)
<html>
i cosi <> indicano o si chiamano tag, ed indicano il comando impartito. Quello
scritto sopra significa che stai creando dell'html, e che tutto ciò che si trova
fra quello e la relativa chiusura è codice. I tag si chiudono così </*>,
mettendo al posto dell'asterisco il nome del tag.
quindi il nostro sarà
<html>
</html>
La chiusura del tag html va messa ALLA FINE DEL DOCUMENTO.
<html>
<head>
<title> QUI SI INSERISCE IL TITOLO DELLA PAGINA che comparirà nella barra
sopra</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
In HEAD si possono inserire diverse cosine, ad esempio, i css. I css sono dei
codici che impostano tutte le caratteristiche della pagina.
esempio:
<style type="text/css">
body {
font-family: Verdana;
font-size: 10px;
color: #FF0000;
background-color: #000000;
text-align: center;
}
</style>
ESAMINIAMOLO
body indica che tu modifichi tutta la pagina principale, quindi lo sfondo, il
carattere che vuoi utilizzare, il suo colore, le sue dimensioni, l'allineamento
del testo, TUTTO IN POCHE PAROLE!
font-family: indica il tipo di carattere
font-size: indica le dimensioni del carattere
color: #FF0000: indica il colore del carattere (rosso)
background-color: #000000: il colore del background, nel nostro caso nero :)
text-align: center: l'allineamento del testo
In word tutta questa parte di codice è parecchio sporca, ed inficia il corretto
funzionamento della pagina, soprattutto perchè inserisce codice proprietario e
dell'xml, ma questo è un discorso più lungo :D
Fino a questo punto abbiamo quindi un codice simile:
<html>
<head>
<style type="text/css">
body {
font-family: Verdana;
font-size: 10px;
color: #FF0000;
background-color: #000000;
text-align: center;
}
</style>
</head>
dopo aver chiuso head, dobbiamo aprire l'altro tag necessario al funzionamento
delle pagine, cioè
<body>
In body ci va tutto il corpo della pagina, ricordalo bene! nello stile di prima
abbiamo deciso che vogliamo lo sfondo nero (#000000) e le scritte rosse
(#ff0000), le scritte in verdana, grandi 10 punti (quindi sono piccine). Il
testo verrà allineato direttamente al centro.
Nel corpo della pagina va, in pratica, il contenuto: scritte, immagini, tabelle,
etc etc.
<html>
<head>
<style type="text/css">
body {
font-family: Verdana;
font-size: 10px;
color: #FF0000;
background-color: #000000;
text-align: center;
}
</style>
</head>
<body>
<p> la grande storia di pinuccio e pinetto <br>
inizia quando la principessa venne rapita dagli alieni. <br>
</p>
</body>
</html>
Quella scritta sopra è una pagina html, purissima e semplicissima :)
il tag <p> indica un paragrafo di testo, e puoi dargli diverse impostazioni, per
esempio se lo vuoi al centro, a destra o a sinistra. Per fare questo si scrive
<p align="right">; <p align="left"> o <p align="center">. Se vuoi ad un certo
punto una scritta in corsivo, puoi inserire questo tag: <i>, con relativa
chiusura </i> che va inserita alla fine del testo; il tag per il grassetto è
<b></b>, per il sottolineato <u> </u>.
Il tag <br> non si chiude, o, per lo meno, non è obbligatorio farlo: esiste in
due versioni, cioè <br> e <br />, la funzione è la medesima, e non genera alcun
errore. Dimenticavo! <br> serve ad andare semplicemente a capo :) (chiamiamola
dimenticanza, vabbè)
Io sto facendo una brevissima panoramica di html semplice, quello che può
servire per piccole cose, Word genera codice molto sporco, al punto che alle
volte neppure explorer lo visualizza correttamente.
Se ad esempio vogliamo pubblicare una fanfic sul sito di EFP, dobbiamo dare una
bella sistemata al testo creato dall'editor, soprattutto perchè non si possono
usare i css.
COME SI FA?
<p> se non ci scrivi niente, allinea il paragrafo automaticamente a sinistra, e
fino qui tutto ok.
Il carattere si imposta con <font size="GRANDEZZA" face="CARATTERE">, se non
segnate niente di niente, vi mette il carattere e la grandezza predefiniti. Non
è dunque OBBLIGATORIO inserire questo tag (la cui chiusura è </font>), anzi, si
risolvono problemi di grandezza del file, non facendolo...
Ora, apri una fanfic che hai scritto con word, salvala in html o come pagina
web. Aprila con explorer e poi, sempre su I.E., vai su "visualizza" =>
"sorgente" o "html"; ti si aprirà un file di testo con il codice html creato da
word.
Confronta poi i tag che ho inserito io con quelli creati dal programma.
Visto che schifo?
Nello specifico, io ho scritto in word la scemenza sopra riportata "la grande
storia etc etc", ho salvato il file etc etc;
quando ho aperto il codice mi è apparso qquesto:
<p class=MsoNormal>la grande storia di <span class=SpellE>pinuccio</span> e <span
class=SpellE>pinetto</span> <o:p></o:p></p>
<p class=MsoNormal><span class=GramE>inizia quando</span> la principessa venne
rapita dagli alieni.</p>
ORA ORA ORA.
Da 'sto schifo si possono e devono togliere le classi e gli span.
Di "<p class=MsoNormal>" cancellate tutto escluso <p>;
"<span class=SpellE>" e "</span>" vanno tolti senza remore, e pure tutti i tag
ad essi similari, non servono a NIENTE.
Idem per "<o:p></o:p>". Fra "pinetto" e " inizia" va messo il tag <br>
Nel caso si vogliano inserire delle immagini va inserito il tag <img border="BORDOIMMAGINE"
src="NOMEIMMAGINE" width="LARGHEZZAIMMAGINE" height="ALTEZZAIMMAGINE">; il bordo
delle immagini è meglio porlo a "0", così non viene il fastidiosissimo riquadro
:) larghezza e altezza si possono prendere dalle proprietà dell'immagine. (Il
tag delle immagini non si chiude)
I link!
<a href="INDIRIZZO" target="_blank"> </a>
Non dimenticare MAI di mettere l'indirizzo completo di http://, perchè
potrebbero esserci problemi, ad esempio, ci si scorda spesso di farlo, e si
lascia il collegamento all'hard disk personale :D
il "target="_blank" " serve a far aprire il collegamento in un'altra finestra, è
molto utile nel caso di collegamenti diretti all'esterno, ad esempio in una
pagina dei link. E' invece fastidioso usarlo nelle pagine interne, ad esempio
nel caso di una sezione del sito.
Se si vuole inserire un link ad un'immagine, si scrive <a href="INDIRIZZO"><img
border="0" src="IMMAGINE" width="LARGHEZZA" height="ALTEZZA"></a>, così
l'immagine stessa funge da collegamento.
*cogita* *cogita*
Penso di aver finito ^_^
ciauz!
PS: una guida molto semplice e buona si trova all'indirizzo http://www.html.it
--
Maki-chan
http://makichan.altervista.org