link naar volgende pagina

[StudioVandaag]

Ik ben nog niet zo lang bezig met het bouwen van websites in Dreamweaver. Ik wil dit een beetje beheersen zodat ik met het ontwerpen rekening kan houden met de mogelijkheden. Ik kom alleen niet uit het volgende (ook niet met mijn studioboek)...

Ik wil bij het aanklikken van een illustratie/foto dat de site door linked naar de volgende pagina.
Ik heb dit met de volgende code gedaan, maar hij werkt niet. Wat doe ik fout?

<div id="portfolio">
<a href="bellypaint_1.htm"><img src="../images/pijl_portfolio_home.jpg" align="left">
</a></div>

Alvast bedankt!
Saskia

 

[Dinux]

<div id="portfolio">
    <a href="bellypaint_1.htm"><img src="../images/pijl_portfolio_home.jpg" align="left" /></a>
</div>

De image tag heeft geen end tag, dus sluit enkel met />
Developer opties kan dit ook laten zien. (Chrome F12, Firefox in het menu, IE F12)

 

[ciske de rat]

je div is goed en link is goed

link ziet er zo uit

<a href="url">Link text</a>

url is bestands naam.html of .php of .htm
link text bijvoorbeeld volgende pagina
link buiten je website dus van iemand anders

<a href="http://www.helpmij.nl/forum/showthread.php/782979-link-naar-volgende-pagina">link naar de volgende pagina</a>

Een plaatje is een link
maar dan anders

In html plaats je een plaatje door in de html code de plaats op de computer aan te wijzen waar het plaatje staat.

syntax:
<IMG SRC="plaatje.gif">
Dat werkt dus eigenlijk precies hetzelfde als een link.

De imagetag kan flink worden uitgebreid:

<IMG SRC="plaatje.gif" ALT="hand plaatje" ALIGN=LEFT WIDTH="150" HEIGHT="150" BORDER="0" HSPACE="10" VSPACE="10">

hand plaatje
SRC bepaald het adres van de afbeelding

ALT een tekst die verschijnt als de afbeelding niet wordt weergegeven
(zie alt tekst)
WIDTH en HEIGHT bepalen de afmetingen van de afbeelding
HSPACE en VSPACE zorgen voor ruimte rond de afbeelding
ALIGN top, middle of bottom plaatsen de tekst t.o.v. de afbeelding
ALIGN left of right plaatst de afbeelding links of rechts op de pagina
BORDER bepaald de dikte van de rand om de afbeelding
USEMAP en ISEMAP worden gebruikt voor zgn. clickable maps


Een plaatje kan ook een link naar een andere pagina zijn:

<A HREF="simpeldoc.html"><IMG SRC="plaatje.gif"></A>

Klik hier maar eens op:



je ziet dat er een randje verschijnt om het plaatje, in de linkkleur. Dit kun je weg halen met: border=0

<A HREF="simpeldoc.html"><IMG border=0 SRC="plaatje.gif"></A>



het blijft een link maar de rand is weg.

!!tip!!
zet je plaatjes in een map houd je website vrij
heb nog vragen hoor ik graag zit meestal in de chat

 

[StudioVandaag]

Hoi Ciske,
Als mijn div goed is en mijn link ook, waarom werkt deze dan toch niet?
Ik test de link door de index.htm pagina te openen in mijn browser (safari). Mijn tekst linkjes werken wel (van mijn menu) maar de foto linkjes allemaal niet!

Ik snap er echt niks van...

 

[ciske de rat]

zo als dinux aaangaf is dat code niet afsluit
<a href="bellypaint_1.htm"><img src="../images/pijl_portfolio_home.jpg" align="left"> dit gaf k je op
dit gaf dinux op gaf

<a href="bellypaint_1.htm"><img src="../images/pijl_portfolio_home.jpg" align="left" /></a>

je vergeet plaatje af te sluiten

 

[Dinux]

Voer ook even een border="0" toe als attribute toe aan de img, anders krijg je van die lelijke blauwe randen erom heen.

 

[ciske de rat]

stdui als niet lukt verzoek ik toch ff weer naar chat te komen voor tekst en uit leg

 

[bron]

Hoi, het is simpel zoals dinux al heeft aangegeven:

- Voorbeeld als er wel een eind tag is : <a href="...">.....</a>
- Voorbeeld als er geen eind tag is : <img src="..." alt="" /> ,afslutien met spatie en />
- Overige attributen zijn niet nodig voor een goede werking.
- Gebruik liever geen "align" of "border" maar <img src="...." style="float:left; border:0;" alt="" />
- Wat verder in je studie ga je werken met stylesheets (verdeling tussen pagina en opmaak).
- Het is handig en gebruikelijk alleen kleine letters te gebruiken. Webservers zijn meestal hoofdletter gevoelig.
- Gebruik geen spaties of vreemde tekens in bestandsnamen, maar dat doe je al goed.
- Het is gebruikelijk .html (of .php) te gebruiken, geen .htm (of .php3)

Neem de code van dinux maar over. Als het niet werkt komt dat waarschijnlijk door de omliggende code.

Veel succes met je studie!! Roon.

 

[StudioVandaag]

Hallo Dinux en Ciske,

Heel erg bedankt voor jullie tips en opmerkingen. Ik heb de fout gevonden!!!
Dankzij Dinux kwamen we erachter dat er een div over de code heen stond waardoor de link werd genegeerd. Het was de div 'header' die ik pagina hoog had gemaakt. Door deze te verkleinen werkten de links wel...

Weer wat geleerd...

En Bron: ik ga zeker met jouw opmerkingen en tips aan de gang. Bedankt!!!