Iniziamo una serie di semplici tutorial per chi è alle prime armi e vuole sapere come fare un sito internet.
In questa breve lezione apprenderemo come si inseriscono le foto in una pagina internet, il codice da usare e gli attributi.
Nei prossimi corsi cercheremo di complicare la cosa fino a imparare come si inseriscono le foto in un sito internet dinamico completamente programmato da noi (no CMS) in php con l’uso dei database.
Capire il codice di base di una pagina internet
La prima cosa da fare è aprire un editor di testo come dreamweaver. Ce ne sono anche alcuni gratuiti come context, nvu oppure il semplice blocco note di windows.
All’interno della nostra pagina bianca andremo a inserire i tag head che “identificano” per certi versi la nostra pagina.
Il codice iniziale è questo:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Documento senza titolo</title>
</head>
<body>
</body>
</html>
Questo è il codice completo di una pagina internet in html. Come abbiamo già detto dove si trova scritto “documento senza titolo” è possibile inserire il titolo della pagina che poi comparirà sul browser e sui motori di ricerca.
A questo punto occorre agire tra i tag <body> </body>: è lì che dobbiamo inserire il nostro contenuto, sia esso scritto sia una foto.
Per inserire una foto in un sito internet basta inserire il seguente tag all’interno del body:
<img src=”nomedellafoto.jpg” >
Attenzione come nome della foto va inserito il percorso della foto rispetto alla nostra pagina sul server. Per es. se la foto si trova nella cartella images rispetto alla nostra pagina che si trova nella root del server dovremo scrivere così:
<img src=”images/nomedellafoto.jpg” >
A questo punto il gioco è fatto. Se la foto è troppo grande o vogliamo cambiare dimensioni è possibile inserire alcuni attributi all’interno del tag come width (larghezza) e height (altezza). Possiamo ovviamente inserire anche un bordo (border) e dare un titolo alla nostra immagine (con alt).
Il tag si trasformerà così:
<img src=”images/nomedellafoto.jpg” width=”80″ height=”100″ border=”1″ alt=”nome della foto” />
E’ sempre consigliabile inserire un tag per ogni foto, soprattutto per la funzione di ricerca immagini di Google e per la validazione del codice.
Nessun Commento