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