Creare una PaginaWeb (passo passo), HTML 4.01 + CSS (base)

« Older Newer »

~vale93kotor}

Posted on 7/9/2009, 17:37

Creare una Pagina Web

Guida creata da vale93kotor solo per il My Simple Romance

Indice:
Creare una Pagina Web
Primi Passi (si inizia)
"Parte" Head
"Parte" Body (+ tabella)
CSS
Cutenews e Gallery (links)

Altre Guide

Iniziamo a scegliere un hosting gratuito per creare la nostra prima pagina HTML e l' "allegato" CSS...

Io consiglio altervista ( www.altervista.org ); una volta registrati facciamo accesso al nostro pannello di controllo...
Una volta eseguito l'accesso dovremmo avere una pagina tipo questa:

(clicca per ingrandire)

Clicchiamo su Pubblica > Editor HTML > Livello 3 (logicamente se desiderate prima fare delle prove a livello 1 o 2 siete liberi di farle xD

Vi troverete di fronte ad una pagina bianca... beh... si inizia!

di fianco a salva troverete il link di salvataggio della pagina mettete index.php così aprendo il vostro sito si visualizzerà direttamente questa pagina...

Ora torniamo all'html:

All'inizio del foglio bianco inseriamo

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

che specifica che usiamo l'HTML (versione 4.01 transitional)

andiamo a capo e subito dopo

iniziamo inserendo

HTML

<html>

</html>

segnalando che stiamo lavorando in html e mettiamo molto spazio in mezzo

appena dopo il primo <html> mettiamo
<head> </head>che sarebbe la sezione di testa dove ci devono essere tutte le informazioni non direttamente visibili al visitatore ma importanti per il motore di ricerca e quindi per il posizionamento del sito sullo stesso...

Come avrete notato la maggioranza dei tag html richiede di essere aperta e chiusa ( vedi <html> </html> ); ci sono invece alcuni codici (ad esempio quello per inserire le immagini che non va chiuso dopo l'uso.

Per una lista dei codici più o meno comuni da inserire andate qui.

Continuiamo all'interno dell'head iniziamo ad inserire le informazioni:

HTML

<meta http-equiv="Content-Language" content="it">

informiamo che il linguaggio utilizzato è l'italiano ( se vogliamo fare la pagina in inglese inseriremo al posto di it > en.

HTML

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

Il tipo di codifica utilizzata (windows-1252)

HTML

<meta name="description" content="Descrizione della Pagina">

Una breve descrizione del sito (in google apparirà appena sotto al nome del sito) basta modificare "Descrizione della Pagina" ricordandosi di non cancellare le due " " (virgolette)

HTML

<title>Titolo della Pagina</title>

Il titolo visualizzato sulla barra del browser al posto di Titolo della Pagina

Ora possiamo chiudere il tag head ( </head> )

La nostra pagina compilata dovrebbe presentarsi più o meno così:

HTML

bene!

Appena dopo l'head inseriamo

HTML

<body> </body>

Qui all'interno va tutto il contenuto visualizzabile del sito.

Facciamo finta di voler fare una specie di blog a 2 colonne da un lato una descrizione di noi e cose varie mentre da un altro lato che occupa più spazio il lato dove scriviamo i nostri blog...

In questo caso ci servirà una tabella:

Contenuto Tabella

HTML

<table>
Contenuto Tabella
</table>

Al tag table è possibile aggiungerci altre informazioni

HTML

<table border="0"> </table>

Così diremo di non far visualizzare il bordo della tabella (è antiestetico)

Ecco come dovrebbe presentasi la nostra pagina:

(clicca per ingrandire)

Iniziamo ora a creare le 2 colonne una più larga mentre l'altra più stretta...

HTML

<table border="0">
<tr>
<td width="250">

a

</td><td width="850">

a

</td>
</tr>

</table>

così abbiamo creato una base.

il tag td rappresenta la colonna (di destra e di sinistra)
e deve sempre essere contenuto in tr la riga...
Abbiamo aggiunto ai td le loro dimensioni width="850"e width="250"

(continua...)

--
Torna In Cima

Edited by ~vale93kotor} - 22/12/2009, 12:49

~vale93kotor}

Posted on 8/9/2009, 09:19

Guida creata da vale93kotor solo per il My Simple Romance

Ora se vogliamo fare anche una terza colonna (mettiamo a caso per i crediti) dovremmo mettere un altro tag td e modificare un po le grandezze in modo di farcelo stare (senza alcuna scrollbar).

Quindi modifichiamo il nostro 850 in 500 e aggiungiamo una nuova colonna a destra (quindi dopo la colonna del blog) e mettiamo 150 di grandezza...
Poi per comodità mettiamo il contenuto di ogni tabella per farla visualizzare...

Ecco l'html della tabella:

HTML

<table border="0" width="1000">

<tr>
<td width="250">

/Intestazione/

</td>

<td width="500">

/Inserire qui il contenuto del Blog/

</td>

<td width="150">

/Credits/

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

Ora per inserireun titolo alla tabella facciamo un'altra tabella sopra:

(codice completo della pagina con la new tabella)

HTML

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

<head>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="description" content="My Simple Romance - Tutto sui My Chemical Romance e i Simple Plan - Un sito aggiornato ogni giorno con un sacco di news, foto, video,lyrics,... sui MCR e i SP">
<meta name="keywords" content="music, simple plan, my chemical romance, video, cd, news, rock, punk, dvd, forum, site, forumfree forumcommunity, the black parade, msr, 2009, venganza, gallery, bio, my simple romance">
<title></title>
</head>
<body>

<table border=0 width="1000">
<tr><td>

<div align=center>
<h1>TITOLO TABELLA</h1>
</div>

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

<table border="0" width="1000">

<tr>
<td width="250">

/Intestazione/

</td>

<td width="500">

/Inserire qui il contenuto del Blog/

</td>

<td width="150">

/Credits/

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

</body>
</html>

Codice della nuova tabella:

HTML

<table border=0 width="1000">
<tr><td>

<div align=center>
<h1>TITOLO TABELLA</h1>
</div>

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

Il tag < div align = center > < / div > serve per centrare l'elemento nella pagina...

Beh ora lo scheletro della pagina è finito...
Ora iniziamo con la grafica

(CSS)

--
Torna In Cima

Edited by ~vale93kotor} - 22/12/2009, 12:50

~vale93kotor}

Posted on 8/9/2009, 09:37

Guida creata da vale93kotor solo per il My Simple Romance

Il file del foglio di stile potra essere all'interno della pagina html oppure esterno (se è interno dovremmo ricopiarlo in ogni pagina che creiamo) o incorporato usando il codice

HTML

<link rel=stylesheet href="style.css" type="text/css">

In head di ogni pagina

Il file che creeremo si chiamerà quindi style.css (se ne creiamo un'altro dovremo modificare il link al file)...

Apriamo di nuovo un'altra pagina con l'editor html modo 3
e la chiamiamo style.css

Iniziamo dai link...

CODICE

A{color:#4C9E61;font-weight:bold;}

Link normali

CODICE

A:visited{color:#4C9E61;font-weight:bold;}

Link Visitati

CODICE

A:active
{color:#4C9E61;font-weight:bold;}

Link Attivi

Per ognuno di questi tre ( che incolleremo sul nostro file vuoto così senza aggiungere nessuna "intestazione")
Al posto di color:#4C9E61 Inseriremo il colore dei nostri links; Se li vogliamo anche in grassetto li lasciamo così, se invece non li vogliamo in grassetto possiamo cancellare la parte dove c'è font-weight:bold; (oltre a bold che è grassetto si può mettere underline > sottolineato o corsivo)

--

CODICE

TH { FONT: 9px arial; COLOR: #4C9E61;cursor:default;
}
TD {
FONT: 9px arial; COLOR: #4C9E61;
}

Ora scegliamo il tipo di scrittura (FONT: 9px arial)
la dimensione (FONT: 9px arial)
Il colore (COLOR:#4C9E61) sia per tutti i contenuti delle righe della tabella che delle colonne consiglio di metterli uguali)

CODICE

body {
background-image: url(link);
}

se vogliamo mettere un'immagine di sfondo

Ora iniziamo a salvare il file e ad inserire l'html detto prima
nella pagina del blog...

HTML

<link rel=stylesheet href="styleframes.css" type="text/css">

(prossima "lezione" xD > Come gestire i post del blog con cutenews)

(Intanto potete visionare l'articolo riguardante l'FTP > qui )

--
Torna In Cima

Edited by ~vale93kotor} - 22/12/2009, 12:50

~vale93kotor}

Posted on 20/9/2009, 10:06

Guida creata da vale93kotor solo per il My Simple Romance

Inserire i primi interventi sul blog con CuteNews e Gallery

Ora che la pagina base è stata fatta iniziamo ad inserirgli i contenuti...
Nella tabella sul lato sinistro (intestazione,links,....) sperimentate un po voi, magari successivamente spiegherà qualcosa anche di quello ma è abbastanza facile...

Presto aprirò un nuovo articolo su cutenews e sulla gallery..

--
Torna In Cima

Edited by ~vale93kotor} - 22/12/2009, 12:51

~vale93kotor}

Posted on 22/12/2009, 12:20

Articolo su CuteNews-> CuteNews

4 replies since 7/9/2009, 17:22 55 views