plaatjes plaatsen in HTML

Status
Niet open voor verdere reacties.
F

Flessepost

Nieuwe gebruiker
Lid geworden
15 jun 2013
Berichten
4
Goedenavond,

Zojuist heb ik mij gewaagd aan het leren van HTML en vrijwel direct stuitte ik op iets waar ik niet uit kwam.

Via een tutorial op youtube ben ik van start gegaan. Link: http://www.youtube.com/watch?v=bWPMSSsVdPk
Ik bleef echter haken op het plaatsen van een plaatje... In mijn geval geeft de browser slechts een klein rechthoekje aan in plaats van het in paint gemaakte .bmp bestandje. Hoe komt het dat mijn browser ook niet gewoon het paint geklieder laat zien?

Waarschijnlijk zie ik iets zeer eenvoudigs over het hoofd, maar in ieder geval alvast bedankt voor de tijd en moeite. :thumb:
 
gebruik je

Code: 
<img src='bestand.png' />

heb je wel de juiste plaats van het bestand aangegeven?
 
Is het niet zo dat wanneer je je .HTML bestand en je plaatje in de dezelfde map hebt staan, het voldoende is om de naam van het bestand in kladblok in te voegen? image.bmp in mijn geval. Dat werkte bij mij niet en ook het volledige pad aangeven helpt niet.:confused:
 
ik zou ten eerste './image.bmp' gebruiken, is altijd netter.
Ten tweede zou ik goed de spelling in je html controleren.
probeer je plaatje eens in je browser te benaderen, kan tie dat wel weergeven?
 
Heb je wel de juiste extensie gebruikt bij de verwijzing naar je plaatje?

Denk er ook aan gebruik van hoofdletters en klein letters: Image.bmp is anders dan: image.bmp
 
De spelling is in orde en via de browser het rechthoekje in een ander tabblad openen leidt tot het volgende: Fout 6 (net::ERR_FILE_NOT_FOUND): Kan bestand of directory niet vinden.
 
Kan je hier de complete code van je pagina even neerzetten?
Het kan ergens een heel klein foutje zijn.

  • Zelf tik ik af en toe per abuis scr="..." in, in plaats van src="...".
  • Dan kan de browser ook geen src (=source) vinden. :)

=======
Verder zitten in deze tutorial een paar essentiële fouten. :rolleyes:
  1. Gezegd wordt dat alles binnen de <html> ... </html> komt, en dat dat dan de pagina is. Nop!
    Voorafgaand aan de tag <html> moet er een tag komen waarin het zogenaamde "DocType" wordt aangegeven. Die tag is verplicht, want er zijn verschillende varianten van html, en de browsers moeten weten welke variant in de pagina wordt gebruikt.
    Laat je het DocType weg, dan maakt het in dit eenvoudige voorbeeld niet uit; maar zodra je iets met een layout gaat doen, kunnen er grote verschillen in weergave tussen verschillende browsers komen. Meer over DocType's is bv. hier te vinden.

  2. Ten onrechte wordt weggelaten, dat in de <head> tag (als eerste) een declaratie van de "charset" moet komen in een <meta> tag. Ook dat is een verplicht nummer, want hiermee weten de browsers hoe ze met de lettertekens moeten omgaan.
    Laat je de meta voor de charset weg, dan maakt het in dit eenvoudige voorbeeld niet uit; maar zodra je bv. accenttekens als é in de tekst gaat gebruiken, gaat het mis.
    Hierbij is ook belangrijk, dat de pagina bij het opslaan wordt opgeslagen met dezelfde charset-codering als in de <meta> staat. Gebruik je bv. het aanbevolen "utf-8", dan moet bij gebruik van Kladblok bij het uitrolvakje "Codering" (helemaal onderaan) niet de optie "ANSI" worden genomen, maar "UTF-8". Anders gaat het alsnog mis!

  3. Een image is een zogenaamd "inline" element (iets wat in een regel opgenomen kan worden). Dat mag niet zomaar in de <body> worden gezet, maar hoort binnen een zg. "block" element als een <p> of een <div> te staan (die in principe de hele breedte van het scherm innemen).
Als je op zoek bent naar correcte en complete informatie over webbouwen, kan ik wat ik noem Het Groene Boek aanraden.

PS:
Er kan iets vergelijkbaars aan de hand zijn als met de verwijzing naar een pagina, die niet gevonden kan worden; zie dit topic.
 
Laatst bewerkt:
Bedankt voor deze volledigheid csshunter. Het Groene Boek ga ik zeker achteraan. Ik heb me trouwens niet uit het veld laten slaan. Het is mij gelukt door de volgende code in html te zetten: <img src=" image.bmp"/> en daarnaast mijn bestandsnaam te veranderen in: image. Klaarblijkelijk voegt mijn laptopp automatsch .bmp toe aan het plaatje.

Iedereen bedankt voor de moeite.

Vriendelijke groet via de flessepost
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan