Ci siamo: creiamo la nostra prima pagina Web!
Apriamo il file index.html creato qualche capitolo fa ed accediamo al codice HTML come già spiegato ed inseriamo questo codice al suo interno
<html>
<head>
<title>La nostra prima pagina Web</title>
</head>
<body>
<h1 align="center">La nostra prima pagina Web</h1>
</body>
</html>
Cercate una vostra foto sul vostro computer, copiatela nella cartella mio_sito e rinominatela assegnandole il vostro nome.
Attenzione: il file immagine ha un'estensione, ovvero un suffisso, che potrebbe essere .gif, .bmp o presumibilmente, trattandosi di una foto, .jpg. Non so se per come è impostato il vostro computer, ma non è detto che visualizziate l'estensione. Io ho rinominato la mia foto e l'ho chiamata luca.jpg e leggo esattamente cosi il nome del file perchè ho impostato il mio computer in modo visualizzare l'estensione; voi potreste non visualizzarla e leggere solo il vostro nome. In caso contrario non cancellate assolutamente l'estensione oppure il file diventerà irriconoscibile.
Modifichiamo il codice HTML del file index.html come segue (ho aggiunto le parti evidenziate in rosso)
<html>
<head>
<title>La nostra prima pagina Web</title>
</head>
<body>
<h1 align="center">La nostra prima pagina Web</h1>
<p align="center"><img src="luca.jpg"></p>
</body>
</html>
Il Tag <img> non necessita di chiusura finale.
Adesso aggiungiamo una descrizione su di noi come segue (aggiungiamo le parti evidenziate in rosso)
<html>
<head>
<title>La nostra prima pagina Web</title>
</head>
<body>
<h1 align="center">La nostra prima pagina Web</h1>
<p align="center"><img src="luca.jpg"></p>
<p>
Mi chiamo Luca Ruggiero e sono nato a
Napoli il 12 Aprile del 1978.<br><br>
Sono un programmatore Web ed amo realizzare siti
e scrivere guide ed articoli per insegnare ai miei lettori
come si realizzano pagine Web, anche molto complesse!<br><br>
Siccome questo è solo un esempio e mi è finita la fantasia,
la finisco qui :-)
</p>
</body>
</html>
Il Tag <br> che troviamo all'interno della descrizione personale serve a mandare il testo a capo.
Concludiamo il nostro esempio aggiungendo la parte in rosso del codice che segue, ovvero un link verso MR Webmaster
<html>
<head>
<title>La nostra prima pagina Web</title>
</head>
<body>
<h1 align="center">La nostra prima pagina Web</h1>
<p align="center"><img src="luca.jpg"></p>
<p>
Mi chiamo Luca Ruggiero e sono nato a
Napoli il 12 Aprile del 1978.<br><br>
Sono un programmatore Web ed amo realizzare siti
e scrivere guide ed articoli per insegnare ai miei lettori
come si realizzano pagine Web, anche molto complesse!<br><br>
Siccome questo è solo un esempio e mi è finita la fantasia,
la finisco qui :-)
</p>
<p align="center">
Ho realizzato questa pagina grazie al codice della guida
che ho trovato sul sito
</body>
</html>
Adesso selezionate sul blocco note il menu File e selezionate la voce Salva. Chiudete il blocco note e cliccate il tasto Aggiorna del browser, contrassegnato da un'icona raffigurante due frecce verdi che si rincorrono.
Se avete seguito correttamente le istruzioni riportate avrete una pagina come questa
altrimenti... rileggete e prestate più attenzione ;-)
E' possibile cambiare il colore,le dimensioni ed il carattere utilizzato per il testo. Si può cambiare il colore di sfondo, inserire i contenuti in delle tabelle, inserire moduli di raccolta dati e molte altre cose.
Rimando, tuttavia, ulteriori informazioni in merito al linguaggio HTML alla guida del sito ad esso dedicata:
La guida in oggetto è molto semplice ed è adatta soprattutto ai neofiti... quindi dategli un'occhiata...
Fonte:
Apriamo il file index.html creato qualche capitolo fa ed accediamo al codice HTML come già spiegato ed inseriamo questo codice al suo interno
<html>
<head>
<title>La nostra prima pagina Web</title>
</head>
<body>
<h1 align="center">La nostra prima pagina Web</h1>
</body>
</html>
Cercate una vostra foto sul vostro computer, copiatela nella cartella mio_sito e rinominatela assegnandole il vostro nome.
Attenzione: il file immagine ha un'estensione, ovvero un suffisso, che potrebbe essere .gif, .bmp o presumibilmente, trattandosi di una foto, .jpg. Non so se per come è impostato il vostro computer, ma non è detto che visualizziate l'estensione. Io ho rinominato la mia foto e l'ho chiamata luca.jpg e leggo esattamente cosi il nome del file perchè ho impostato il mio computer in modo visualizzare l'estensione; voi potreste non visualizzarla e leggere solo il vostro nome. In caso contrario non cancellate assolutamente l'estensione oppure il file diventerà irriconoscibile.
Modifichiamo il codice HTML del file index.html come segue (ho aggiunto le parti evidenziate in rosso)
<html>
<head>
<title>La nostra prima pagina Web</title>
</head>
<body>
<h1 align="center">La nostra prima pagina Web</h1>
<p align="center"><img src="luca.jpg"></p>
</body>
</html>
Il Tag <img> non necessita di chiusura finale.
Adesso aggiungiamo una descrizione su di noi come segue (aggiungiamo le parti evidenziate in rosso)
<html>
<head>
<title>La nostra prima pagina Web</title>
</head>
<body>
<h1 align="center">La nostra prima pagina Web</h1>
<p align="center"><img src="luca.jpg"></p>
<p>
Mi chiamo Luca Ruggiero e sono nato a
Napoli il 12 Aprile del 1978.<br><br>
Sono un programmatore Web ed amo realizzare siti
e scrivere guide ed articoli per insegnare ai miei lettori
come si realizzano pagine Web, anche molto complesse!<br><br>
Siccome questo è solo un esempio e mi è finita la fantasia,
la finisco qui :-)
</p>
</body>
</html>
Il Tag <br> che troviamo all'interno della descrizione personale serve a mandare il testo a capo.
Concludiamo il nostro esempio aggiungendo la parte in rosso del codice che segue, ovvero un link verso MR Webmaster
<html>
<head>
<title>La nostra prima pagina Web</title>
</head>
<body>
<h1 align="center">La nostra prima pagina Web</h1>
<p align="center"><img src="luca.jpg"></p>
<p>
Mi chiamo Luca Ruggiero e sono nato a
Napoli il 12 Aprile del 1978.<br><br>
Sono un programmatore Web ed amo realizzare siti
e scrivere guide ed articoli per insegnare ai miei lettori
come si realizzano pagine Web, anche molto complesse!<br><br>
Siccome questo è solo un esempio e mi è finita la fantasia,
la finisco qui :-)
</p>
<p align="center">
Ho realizzato questa pagina grazie al codice della guida
che ho trovato sul sito
</body>
</html>
Adesso selezionate sul blocco note il menu File e selezionate la voce Salva. Chiudete il blocco note e cliccate il tasto Aggiorna del browser, contrassegnato da un'icona raffigurante due frecce verdi che si rincorrono.
Se avete seguito correttamente le istruzioni riportate avrete una pagina come questa
altrimenti... rileggete e prestate più attenzione ;-)
E' possibile cambiare il colore,le dimensioni ed il carattere utilizzato per il testo. Si può cambiare il colore di sfondo, inserire i contenuti in delle tabelle, inserire moduli di raccolta dati e molte altre cose.
Rimando, tuttavia, ulteriori informazioni in merito al linguaggio HTML alla guida del sito ad esso dedicata:
La guida in oggetto è molto semplice ed è adatta soprattutto ai neofiti... quindi dategli un'occhiata...
Fonte:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Ultima modifica da un moderatore:
