Legge til bilder
Så er vi kommet til det vi har bygget opp til i det siste. Hvordan legge ut bilder på websiden vår. Dette er ikke en veldig avansert affære, men det er greit at vi gjør det på en ryddig og god måte!
For et par blogginnlegg siden, der vi startet opp serien med HTML programmering
ble du bedt om å lage en mappe på desktopen. Finn denne mappen og åpne den. Inni denne mappen lager du en mappe til som du kaller images
I denne undermappen skal du legge alle bildene du ønsker å bruke.
Grunnen til at vi gjør det slik er at etterhvert som du blir bedre og bedre på å lage sider så vil du inkludere mere materiell.
Om du da legger alt i en mappe kan det fort bli uoversiktlig. Og er tanken din å eksempelvis etterhvert lage en side for å selge produter eller promotere ditt eget firma er det "et must" at du har kontroll.
Eg legger bildene: bilde1, bilde2 og bilde3 inn i min images mappe.
Disse kjenner du til fra før om du har sett de andre blogginnleggene ang bilder.
Taggen vi skal bruke heter <img>
Her er det vi skal legge inn:
<img src="images/bilde1.jpg" alt="bilde 1" />
Om du finner frem html filen du allerede har laget, skal den se omtrentlig slik ut:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
<a href="side2.html">Side2</a>
</BODY>
</HTML>
La oss legge inn bildene under linken til side2.html
Slik:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
<a href="side2.html">Side2</a>
<br />
<img src="images/bilde1.jpg" alt="bilde 1" />
<img src="images/bilde2.jpg" alt="bilde 2" />
<img src="images/bilde3.jpg" alt="bilde 3" />
</BODY>
</HTML>
Det du da vil se er 3 bilder liggende under hverandre på venstresiden, og kanskje
de er blitt ganske så store.
Grunnen til dette er igjen det at vi har ikke opprettet en CSS fil, vi har heller
ikke sagt noe om hvor store de skal være.
La oss ta utgangspunkt i bilde 2:
<img src="images/bilde2.jpg" alt="bilde 2" />
For å sette størrelsen må vi inkludere informasjon om høyde og bredde:
width="336" height="69"
Da blir det seende slik ut:
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" />
Har du no gjort det riktig vil siden din se slik ut:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
<a href="side2.html">Side2</a>
<br />
<img src="images/bilde1.jpg" alt="bilde 1" /><br />
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" /><br />
<img src="images/bilde3.jpg" alt="bilde 3" />
</BODY>
</HTML>
For den observante leser så ser du kanskje at eg har lagt inn noen <br />
Dette er for å sikre at ikke bildene kommer ved siden av hverandre, men under hverandre.
Kanskje du kan eksperimentere litt? Så skal eg om ikke så lenge komme med en blogg
der eg viser kordan du kan gjøre om bildene til linker!
Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!
Ingen kommentarer:
Legg inn en kommentar