[html] template/layout

Minnie ffl

Posted on 6/4/2009, 12:29

.

User deleted

Alcune delle mie conoscenze trovano fondamento negli studi che intrapprendo a scuola, per altri si tratta di studi da autodidatta, se avete conoscenze di maggior rilievo rispetto alle mie, non esitate a confrontarvi.

Mi aspetto che impariate questi codici e non li copiate, dato che io ci ho sudato e rinuncio al mio tempo libero per voi. Per questo mi aspetto un riconoscimento a questo forum, altrimenti passate ad un altro tutorial. Grazie.

Basi
Aprite un foglio di blocco note (o editor di testo in ubuntu) e salvatelo con estensione .html (va bene anche .htm, ma personalmente vi consiglio .html visto che ci sono alcune finezze, ma non mi dilungo qui).
Sostanzialmente l'html è formato da dei tags, ovvero parole chiave che vengono racchiuse fra < e > e per chiudere i tag si inserisce uno / prima della parola chiave, un esempio lo vedremo subito.

Ogni pagina html inizia e finisce con questo tag:

HTML

<html>

</html>

All'interno inseriremo l'head (la testa del nostro documento, ovvero tutte le caratteristiche)

HTML

<html>
<head>

</head>
</html>

e dopo l'head il body (il corpo, quindi i contenuti)

HTML

<html>
<head>

</head>

<body>

</body>
</html>

Potete notare che all'interno ho inserito altre cose, ovvero i commenti che si formano in quel modo.

Meta tags
Cosa sono i meta tags? Di certo non mi metto qui a spiegarveli tutti o faccio notte xD Vi propongo una semplice e veloce guida ^^
In ogni caso il meta che dovete inserire in questo caso è questo:

HTML

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

E' una guida molto utile anche per quanto riguarda il resto delle basi che comprendono veramente un sacco di cose. Se c'è un nuovo effetto che desiderate aggiungere alle vostre pagine basta che chiediate qui.
Come è scritto nella guida c'è il tag

HTML

<title>Titolo</title>

Si tratta del titolo che viene visualizzato in alto, nella barra.
Se state creando un template splinder vi consiglio di usare il tag apposito di splinder, ovvero <$BlogTitle$>.

Style
Successivamente ai meta, al titolo, ma sempre dentro all'head, bisogna inserire lo style.

HTML

<html>
<head>
<title><$BlogTitle$></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

</style>
</head>

<body>

</body>
</html>

Le classi
Non so se "classi" sia il nome classico xD ma ci dovremmo capire...
Questi elementi sono già inseriti di default, ma dal momento che sono abbastanza orrendi, ci prendiamo la briga di modificarli.

Questa classe è quella che stabilisce come vogliamo rendere il body.
Vi inserisco le cose che solitamente tornano utili.

HTML

body {
background-color: #codice;
background-image: url('link_immagine.png');
background-repeat: repeat-y;
}

Le classi hanno sempre il nome e successivamente, dentro alle parentesi graffe che devono sempre essere chiuse, ci sono le varie impostazioni. I punti e virgola non vanno tolti, non sono lì per bellezza, nè tanto meno le virgolette.
Il primo, come si può facilmente intuire, stabilisce il colore di sfondo (potete aiutarvi anche con gimp per i codici a 6 cifre).
Nel secondo potete inserire l'immagine che sarà quella che si andrà a ripetere come sfondo, ovvero se abbiamo 2 colonne, dovremmo creare un immagine che disegni le nostre colonne. Se avete uno sfondo a tinta unica potete togliere sia questa caratteristica che quella successiva.
L'ultima è strettamente legata alla precedente, repeat-y significa che quest'immagine verrà ripetuta in verticale, invece per farla ripetere orizzontalmente basterà sostiturire la y con la x.

Per il resto cercate sempre di andare ad intuizione, vi mostro i principali.
Questo è per il corpo del testo:

HTML

p, body, td, tr, div {
font-family: font_che_desiderate_utilizzare;
font-size: 9px; 
color: #codice; 
}

Per creare una classe aggiuntiva (per esempio un titolo) dovete fare così:

HTML

.classe {

}

e dove desiderate applicare questa classe inserireste questo codice (nell'esempio del titolo):

HTML

<div class="classe">Titolo</div>

Poi per imparare a fare le classi delle classi c'è tempo, siete ancora gggiovani xD

Link
Le classi dei link sono così formate:
A:link sono "l'apparenza" dei link
A:visited rispecchia le caratteristiche successivamente il cliccamento (non so come dire xD), ovvero quando quella pagina è nella cronologia.
A:hover è quando ci passiamo sopra.

HTML

A:link{

}

A:visited {

}

A:hover {

}

Per aggiungere degli effetti basterà inserire tra le caratteristiche:

HTML

text-decoration:***;

Al posto degli asterischi:
none = niente
underline = sottolineato
ecc Se lo desiderate magari metteremo una discussione anche per questo.

Body
Dentro al body metteremo colonne, testo ecc.
Con questo codice inseriamo l'immagine, per esempio in questo template che ho fatto precedentemente, l'immagine era questa, per intenderci.

HTML

<div id="immagine" style="position: absolute; top: 33px; left:0px;"><img src="LINK_IMMAGINE.png" border="0"></div>

Lasciate tutto com'è, cambiando il link dell'immagine. Potreste cambiare i valori della sua posizione, ma ve lo sconsiglio. (33 sono i pixel della barra di splinder).

Le colonne
Sostituite alle x, i valori che desiderate per le vostre colonne, fatelo in base al disegno dell'immagine inserita prima.

HTML

<div id="colonna" style="position: absolute; top: xxxpx; left: xxxpx; width: xxxpx; height: 500px;">

Dopo tutto ciò siamo pronti per inserire il contenuto della nostra colonna, inserite pure le classi come indicato prima (per l'esempio del titolo).
Per inserire un'altra colonna basterà copiare quel codice e cambiare i valori.

Inseriamo ora il corpo del blog (sostituite sempre le x):

HTML

<div id="post" style="position:absolute; left:xxxpx; top:xxxpx; width:xxxpx; height:500px; z-index:1">
<Blogger>

</Blogger><br>
<$BlogPager$>

Il tag <blogger> è fondamentale se state creando un template splinder, è quello che fa ripetere i post. Potete ometterlo nel caso di un layout.

Avete finito il vostro template.
Non copiate il tut.
Non dimenticate ovviamente i crediti a questo tut e al GW.
Altrimenti mi incazzo veramente e incazzata non mi avete mai vista.

PS. Spero presto di riuscire a fare il tut per la skin, ma purtroppo è molto più lungo di quello per i template.

.

*CrAzY_fAnTaSy*

Posted on 6/4/2009, 13:31

.

User deleted

che belloooooo..finalmenteeeee....
anche se io conosco un pò di html già...mi verrà facile...!!
Bavaaaaaaaaa fflinaaaaaaaaaa ^_^

.

~SweetOblivion~

Posted on 6/4/2009, 13:37

.

User deleted

ma..ma io ti amo Flifflina, grazie mille!!!! *w*

.

Amethyst77

Posted on 6/4/2009, 21:31

.

Bigamy is having one wife too many. Monogamy is the same. (Oscar Wilde)

Group

Posts: 24,395

Wilberini: +250

Location: dal fitto fogliame di un bosco

Status: Anonymous

.

OniAn

Posted on 8/4/2009, 11:42

.

User deleted

fflina

ti adoro...lo sai vero?

.

Minnie ffl

Posted on 8/4/2009, 13:32

.

User deleted

Grazie

SPOILER (click to view)

L'ho fatto soprattutto per farmi perdonare che non ho ancora fatto quello per la skin

.

#Kobrax#

Posted on 2/5/2009, 10:49

.

User deleted

Grazie Minnie ffl!
le tue lezioni di html e affini sono bellissime, si capiscono al volo!

.

# Nicolove

Posted on 2/5/2009, 22:16

.

User deleted

fflina aspettiamo il tut per le skin

.

*funny princess*

Posted on 9/5/2009, 20:42

.

User deleted

io ho provato a farne uno ma è uscito uno schifo uff

qui

se riuscite mi dite come migliorarlo, anche perche non so come far venire il numero delle persone che lo visitano e la parte dove dovrebbe apparire nome cognome foto ecc

.

OniAn

Posted on 9/5/2009, 20:52

.

User deleted

CITAZIONE (*funny princess* @ 9/5/2009, 21:42)

io ho provato a farne uno ma è uscito uno schifo uff

qui

se riuscite mi dite come migliorarlo, anche perche non so come far venire il numero delle persone che lo visitano e la parte dove dovrebbe apparire nome cognome foto ecc

CITAZIONE

La pagina richiesta non è stata trovata o non è disponibile. Controllare che l'indirizzo della pagina sia corretto.

.

*funny princess*

Posted on 9/5/2009, 20:56

.

User deleted

ho copiato il lik sbagliato hihihi è QUIIIIIIIIIII

.

«Martina;

Posted on 3/6/2012, 22:40

.

«Martina;

Group: Member

Posts: 3,703

Wilberini: 0

Status: Offline

Awwww, grazie *-----*
Finalmente, se mai mi venisse la folle idea di fare qualche codice da 0, sono capace di farne uno *----*
(extended da qualche ora e già sto guardando tutti i tutorial ahah <3)

.

Loki Laufeyson

Posted on 4/6/2012, 07:49

.

User deleted

Eheheh non sono mai stata brava con i codici, ma mi piacerebbe imparare a fare una skin tutta mia....

.

Flox^-^

Posted on 1/7/2012, 16:31

.

User deleted

Anche a me, ma sto già andando in confusione con questo, figurati con le skin...

.

Loki Laufeyson

Posted on 24/7/2012, 14:30

.

User deleted

Iniziamo con le domande:

le classi dove vanno?
Non mi apparte lo sfondo, come mai? Ho usato il codice che dici tu, ma nulla.

.