|
Opgave 6: Billeder & grafik
|
| Formål |
Du skal her lære at indsætte et billed i din
web-side.
På www bruges primært billeder / grafik i filformatet .jpg (jpeg) eller
.gif. Billeder / grafik kan du finde på www, eller scanne dine egne billeder ind på din pc.
|
højreklik ->
"Gem billede som..."
|
Hvis du højreklikker på et billede eller andet grafik på en web-side , kan du vælge menupunktet : 'Gem
billede som...' og derefter gemme
grafikfilen på din harddisk.
|
| IMG SRC 
|
- Opret et nyt html dokument - og gem det med filnavnet opgave_6.html
- Skriv følgende overskrift efter dit <body>- tag :
<h1>Indsæt billeder / grafik på websiden</h1>
Syntaksen for indsættelse af grafik/billeder er følgende :
<img src="filnavn.type" >
hvor img src
står for Image Source,
og altså angiver stien / kilden til vores grafik fil. Her forudsættes at
grafik-filen ligger i samme mappe som websiden der skal vise billedet!
- Højreklik på rosen her til venstre og vælg menuen 'gem billed
som...'
- du kan se at billedet har filnavnet 'rose' og
filtypen 'jpeg'
- uden at ændre filnavn eller type , gemmer du billedet i samme
mappe som dine html filer
- Indsæt herefter følgende html-kode efter overskriften i opgave 6
<IMG SRC="rose.jpg">
(bemærk at filtypen jpeg, her blot skal skrives som 'jpg')
- Gem filen som opgave_6.html
Check resultatet
i browseren
|
| Justering |
For at styre placering af billedet i forhold til den omgivende
tekst, anvendes justerings koden 'align'.
Med koden 'align' kan sættes til værdien , left, center, right.
koden afvendes således:
<img src="rose.jpg" align="left">
billedet venstre-justeres
i forhold til efterfølgende tekst.
Prøv at indsætte flere billeder på din side , idet du for de
enkelte billeder anvender forskellig justering , h.h.v. 'left', 'center' og 'right'
Se
eksempel
|
| Størrelse |
Hvis du vil vise billedet i en anden størrelse en
originalstørrelsen angives størrelsen i pixels. f.eks.
<img src="rose.jpg"
align="left" width="200px">
se eksempel
Dette vil dog ofte give problemer med proportionerne i billedet.
Man bør derfor anvende et billedbehandlingsprogram til at justere størrelsen og
bevare proportionerne i billedet, inden man indsætter det på websiden.
|
| Ramme |
Hvis du ønsker en ramme omkring dit
billede (hvilket ikke er
pænt..!) indsættes følgende kode :
<IMG SRC="filnavn.type" align="left" border="1">
hvis rammen skal være tykkere bruges tallet 2, 3, eller 4 etc.
Hvis der ikke skal vises nogen ramme sættes værdien til 0.
|
| image mappe |
For at holde orden i dine grafikfiler er det en god ide at placere dem i en egen mappe.
Opret f.eks. en undermappe til den mappe hvor dine html filer ligger. Navngiv denne mappe
som 'image'.
Når du skal vise et billede som ikke ligger i rodmappen (der hvor dine html filer ligger)
men i en undermappe hertil, skal dette angives i IMG SCR koden. Det gøres f.eks sådan
her:
<img src="image/rose.jpg">
|
