webpagina maken met html en css - Softwareontwikkeling

donderdag 16 oktober 2014 14:10

Acties:

Topicstarter

hoi,

ik probeer een website te maken met behulp van html en css.
ik weet alleen niet wat ik telkens fout doe.
ik wil graag als ik in het menu klik dat dit dan naar mijn content gaat.
heb al van alles geprobeerd maar kom er echt niet uit
dit is wat ik nu heb:

<style type="text/css">
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

.header {

}

.menu {
width: 150px;
height: 80%;
float: left;
margin-left: auto;
margin-right: auto;
background-color: green;
}

.content {
width: 850px;
height: 80%;
float: right;
margin-left: auto;
margin-right: auto;
}
</style>

<div class="container">
<div id="header"/>
<img src="plaatjes/leiding.jpg" height="168px" width="1000px"/>
</div>

<body>

<div class="content">
<frame name="frame1">
Welkom op de website van: Stg Jeugdbelangen - Jong Nederland </p>
Het nieuwe seizoen is nog steeds in volle gang! </br>
wil je ook dit jaar iedere week anderhalf uur sport, spel, creativiteit en plezier niet missen? </br>
Kom dan eens langs op de groepsavonden voor jouw leeftijd in het jeugdhuis (Bremveld 10) en geef je alsnog op! </p>
Tot dan! </br>
Leiding Jong Nederland Wintelre </p>
</div>

</body>

<div class="menu">
<font size="6" color="black" face="calibri">
<a href="right side.html"> home </a></br>
<a href="Wat doen wij.html"> Wat doen wij </a></br>
<a href="Wie zijn wij.html"> Wie zijn wij</a></br>
<a href="ledenlijst.html"> Ledenlijst</a></br>
<a href="activiteiten.html"> Activiteiten</a></br>
<a href="fotos.html"> Foto's </a></br>
<a target="frame1" href="Contact.html"> Contact </a></br>
</font>
</div>

donderdag 16 oktober 2014 14:13

Acties:

sypie

* In ieder geval géén spaties in de bestandsnamen zetten.
* In ieder geval geen hoofdletters gebruiken in bestandsnamen.
* Zorgen dat de html bestanden in dezelfde map staan als het index.html bestand. (zoals je het nu hebt geschreven in ieder geval)

Dat zijn in ieder geval 3 belangrijke basispunten.
(en de volgende keer graag code tussen de code tags zetten)

[ Voor 9% gewijzigd door sypie op 16-10-2014 14:14 ]

donderdag 16 oktober 2014 14:13

Acties:

TommieW

Numa numa.

Zet alsjeblieft je code in [code=html] tags. Maakt het een stuk beter te lezen.

1700X@3,9GHZ - Asus Crosshair VI Hero - 32GB Corsair LPX - GTX 1070Ti
iPhone 17 Pro Max - Macbook Pro 16" M1 Pro

donderdag 16 oktober 2014 14:16

Acties:

Verwijderd

sypie schreef op donderdag 16 oktober 2014 @ 14:13:
* In ieder geval géén spaties in de bestandsnamen zetten.
* In ieder geval geen hoofdletters gebruiken in bestandsnamen.
* Zorgen dat de html bestanden in dezelfde map staan als het index.html bestand. (zoals je het nu hebt geschreven in ieder geval)

Dat zijn in ieder geval 3 belangrijke basispunten.
(en de volgende keer graag code tussen de code tags zetten)

Waarom zou iemand geen hoofdletters mogen gebruiken in de namen van de bestanden?

donderdag 16 oktober 2014 14:18

Acties:

LordSinclair

Ik mis de standaard attributen al, je moet alle attributen die je opent ook afsluiten.

HTML:

<html>
  <head>
    <style>
    </style>
  </head>
  <body>
  </body>
</html>

There's no need to kneel, I'm a very democratic sort of lord.

donderdag 16 oktober 2014 14:21

Acties:

Utoka

Verwijderd schreef op donderdag 16 oktober 2014 @ 14:16:
[...]

Waarom zou iemand geen hoofdletters mogen gebruiken in de namen van de bestanden?

Dit is een goeie conventie, maar wat nog belangrijker is dat wat je doet je altijd consistent/bewust doet. Nu zie ik "fotos.html" en "Wat doen wij.html"

[ Voor 2% gewijzigd door F_J_K op 07-05-2018 09:38 . Reden: op verzoek geanonimiseerd ]

donderdag 16 oktober 2014 14:28

Acties:

thof

FP ProMod

Ik weet ook niet hoe je het probeert te testen? Test je het in een IDE? lokaal op filesystem? op een lokale webserver of een externe webserver? Dit kan allemaal invloed hebben op het navigeren en het wel/niet kunnen inladen van bepaalde files. Bij pure html pagina's is het minder strikt.

Wel op letten dat de bestandsnamen ook daadwerkelijk overeenkomen. Je geeft aan dat je wil dat er naar een pagina genavigeerd wordt als je er op klikt. Wat gebeurd er op dit moment als je op een link klikt?

donderdag 16 oktober 2014 14:37

Acties:

Audiowaste

Het is voor mij ook erg onduidelijk wat je bedoelt.

ik wil graag als ik in het menu klik dat dit dan naar mijn content gaat.

Wat bedoel je daar precies mee?

donderdag 16 oktober 2014 14:44

Acties:

HamuNaptra

Beste DirkDas,

Neem even een paar goeie (basic) HTML tutorials door voor je aan dit project verder werkt.

Het is belangrijk om eerst de basis onder de knie te krijgen, focus daarom even eerst op HTML en combineer het daarne pas met CSS. Het zal je betere inzichten geven hoe een document is opgebouwd en je zal direct zelf herkennen waar je hier de fout bent ingegaan.

Tip: Kijk even naar de code geschreven door LordSinclair, vergelijk met je eigen code en je zal direct enkele grote fouten tegenkomen.

donderdag 16 oktober 2014 14:56

Acties:

DirkDas

Topicstarter

nou ik heb alle standaard dingen er wel in staan maar heb dat niet gekopieerd.
als ik op een link klik opent er een nieuw tabblad met daarin mijn tekst enz.

Groetjes
Dirk Das

donderdag 16 oktober 2014 15:00

Acties:

LordSinclair

Je opent ergens "<frame name="frame1">" (in een div, wat ook niet correct is) maar deze wordt nergens afgesloten met </frame>

Ik raad je aan de volgende pagina's eens door te lezen:
http://www.homepage-maken.nl/htmlcursus/les8.php en http://dalemuus.home.xs4all.nl/lessen/html/htmlles9.htm

Daarnaast staan je div van het menu en header buiten de body tags. Deze hoort binnen de body tags te staan.
Je pagina begint en eindigt niet met <html> en </html> tags.

[ Voor 26% gewijzigd door LordSinclair op 16-10-2014 15:09 ]

There's no need to kneel, I'm a very democratic sort of lord.

donderdag 16 oktober 2014 15:40

Acties:

MisterEagle

Probeer het eens met deze website:
http://www.handleidinghtml.nl/html/frames/frames05.html

donderdag 16 oktober 2014 15:43

Acties:

DirkDas

Topicstarter

MisterEagle schreef op donderdag 16 oktober 2014 @ 15:40:
Probeer het eens met deze website:
http://www.handleidinghtml.nl/html/frames/frames05.html

dit is een goede site als je alleen met html werkt maar kan er zo niks uithalen als je ook met css werkt

donderdag 16 oktober 2014 15:44

Acties:

FotW

Je moet in je link (<a> tag dus) een target attribuut opnemen die naar je frame linkt. En dat staat ook in de link die MisterEagle aanhaalt. Overigens heeft dit niks met css te maken.

[ Voor 36% gewijzigd door FotW op 16-10-2014 15:46 ]

donderdag 16 oktober 2014 15:46

Acties:

DirkDas

Topicstarter

FotW schreef op donderdag 16 oktober 2014 @ 15:44:
Je moet in je link (<a> tag dus) een target attribuut opnemen die naar je frame linkt.

dit heb ik nu gedaan, en heb meteen 2 dingen geprobeerd:

<a target="content" href="fotos.html"> Foto's </a></br>
<a target="right side" href="Contact.html"> Contact </a></br>

dit werkt allebij niet

Groetjes
Dirk Das

donderdag 16 oktober 2014 15:47

Acties:

FotW

DirkDas schreef op donderdag 16 oktober 2014 @ 15:46:
[...]

dit heb ik nu gedaan, en heb meteen 2 dingen geprobeerd:

<a target="content" href="fotos.html"> Foto's </a></br>
<a target="right side" href="Contact.html"> Contact </a></br>

dit werkt allebij niet

Groetjes
Dirk Das

En wat is het id van je frame? Hint: niet content en ook niet right side

donderdag 16 oktober 2014 15:49

Acties:

DirkDas

Topicstarter

wat bedoel je FotW?

<div class="content">
<div id="rechts"/>
Welkom op de website van: Stg Jeugdbelangen - Jong Nederland </p>
Het nieuwe seizoen is nog steeds in volle gang! </br>
wil je ook dit jaar iedere week anderhalf uur sport, spel, creativiteit en plezier niet missen? </br>
Kom dan eens langs op de groepsavonden voor jouw leeftijd in het jeugdhuis (Bremveld 10) en geef je alsnog op! </p>
Tot dan! </br>
Leiding Jong Nederland Wintelre </p>
</div>

donderdag 16 oktober 2014 15:50

Acties:

FotW

Zet je code eens in http://jsfiddle.net/ en link hier naartoe in volgende post want ik heb geen idee wat je inmiddles ten opzichte van je startpost hebt veranderd.

donderdag 16 oktober 2014 15:51

Acties:

Rannasha

Does not compute.

DirkDas schreef op donderdag 16 oktober 2014 @ 15:49:
wat bedoel je FotW?

<div class="content">
<div id="rechts"/>
Welkom op de website van: Stg Jeugdbelangen - Jong Nederland </p>
Het nieuwe seizoen is nog steeds in volle gang! </br>
wil je ook dit jaar iedere week anderhalf uur sport, spel, creativiteit en plezier niet missen? </br>
Kom dan eens langs op de groepsavonden voor jouw leeftijd in het jeugdhuis (Bremveld 10) en geef je alsnog op! </p>
Tot dan! </br>
Leiding Jong Nederland Wintelre </p>
</div>

De "target"-attribuut van een <a> tag verwijst naar een frame, niet naar een div. Je probeert opmaak via frames en opmaak met divs door elkaar te halen.

|| Vierkant voor Wiskunde ||

donderdag 16 oktober 2014 15:51

Acties:

ByteMe_

Fotw heeft het over frame. Een div element is een ander onderdeel. Lees eerst de handleidingen door. Je sluit die bold div nu ook af voordat ie gebruikt is.

Mijn laatste reviews: Xiaomi Mi 9T | Mpow H12

donderdag 16 oktober 2014 15:54

Acties:

MisterEagle

DirkDas volgens mij mis je iets belangrijks voordat je frames kunt gebruiken (Wat je wilt als je enkel met HTML (en CSS) wilt werken)

Laat ik overigens eerst iets anders uit de wereld helpen. CSS is enkel en alleen voor de opmaak van een pagina. Layout + opmaak tekst.

Terug naar wat je volgens mij mist: een frameset.

Je hoofdbestand (index.html) dient iets te bevatten als:

code:

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="120,*">
<FRAME SRC="navigatie.html" NAME="navigatieframe">
<FRAME SRC="begin.html" NAME="hoofdframe">
</FRAMESET>
</HTML>

hierin definieer je de vakken op de website.
Vervolgens ga je verder in de bestanden: navigatie.html (Dit is je menu)
en je 'content' vak is begin.html.

Als je nu in het bestand navigatie.html een link zet, waarvan je wilt dat er in het contentvak wat anders komt te staan zodra ze op de link klikken, dan moet je die link 'targetten' op het frame: "hoofdframe"

Dit alles staat, in mijn ogen zeer duidelijk, uitgelegd op de link die ik eerder gaf.

Kom je hier verder mee?

donderdag 16 oktober 2014 19:55

Acties:

asstastic

Frames zijn ook redelijk outdated..

[ Voor 1% gewijzigd door asstastic op 16-10-2014 19:55 . Reden: typo ]

vrijdag 17 oktober 2014 11:04

Acties:

DirkDas

Topicstarter

wat raad je me dan aan als je geen frames wilt gebruiken?

vrijdag 17 oktober 2014 11:08

Acties:

Rikkiz0r

Ik raad je aan om met zoiets te beginnen: http://www.w3schools.com/html/default.asp

vrijdag 17 oktober 2014 11:10

Acties:

Rub3s

+3 , omdat het kan

DirkDas schreef op vrijdag 17 oktober 2014 @ 11:04:
wat raad je me dan aan als je geen frames wilt gebruiken?

Gewoon div's!

vrijdag 17 oktober 2014 11:20

Acties:

ByteMe_

Frames zijn eigenlijk alleen handig voor een CMS:

http://www.webrichtlijnen.nl/aan-de-slag/alles-over-frames

Je website is op dit moment ook SEO onvriendelijk. Met Divs(zoals aanbevolen door anderen) kun je net als frames gewoon je structuur opzetten (template). Maar als je er niets vanaf weet, zou ik eerst verdiepen in de materie, eigenlijk de website opnieuw opbouwen. Dan doe je het meteen op de goede manier.

Mijn laatste reviews: Xiaomi Mi 9T | Mpow H12

vrijdag 17 oktober 2014 11:38

Acties:

Rub3s

+3 , omdat het kan

Frames zijn volgens mij gewoon vervangen door server-side code, ook voor een CMS.

vrijdag 17 oktober 2014 11:52

Acties:

Pindakaas

Misschien handig voor DirkDas om even af te vragen of die deze website wel zelf wil gaan uittypen in code. Kan je niet beter iets als Joomla of wordpress gebruiken voor een standaard website als dit.

Ziet er vaak vele malen mooier uit. Veel makkelijker en gebruiksvriendelijker in gebruik en bijna bij elke hosting maatschappij wel te verkrijgen. (+ vaak beter te vinden in google)

don't mind me

vrijdag 17 oktober 2014 11:56

Acties:

DirkDas

Topicstarter

nou dat is het dus,
een collega van mij maakt een website via wordpress en ik doe de code zelf uittypen
straks kijken we welke beter en mooier is en welke we gaan gebruiken.
had alleen wat informatie nodig over het gebruik van CSS.

vrijdag 17 oktober 2014 11:59

Acties:

Verwijderd

Misschien ter verduidelijking wat MisterEagle ook al heeft gezegd: CSS is _uitsluitend_ voor de opmaak van je website.
Kijk voor de grap eens hier om te zien wat je met CSS kan doen: http://www.csszengarden.com/
Uitsluitend door de CSS te veranderen wordt steeds dezelfde content heel anders weergegeven. Erg leuk om mee te spelen overigens....

vrijdag 17 oktober 2014 12:01

Acties:

AW_Bos

Liefhebber van nostalgie... 🕰️

Rub3s schreef op vrijdag 17 oktober 2014 @ 11:38:
Frames zijn volgens mij gewoon vervangen door server-side code, ook voor een CMS.

Als het om inladen gaat: Half, want je kan ook met AJAX-requests werken.
Als het om indelen gaat, dan is CSS de beste manier, met DIVjes. Een beetje spelen met float's en clear's en je kan elke structuur maar bouwen.

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

vrijdag 17 oktober 2014 12:02

Acties:

Pindakaas

ah okee. Op die fiets.

Dan inderdaad zoals de mensen boven mij ook al aangegeven hebben. Even goed verdiepen in het materiaal en misschien een tutorial volgen waarin iemand een website maakt vanaf het begin.

Gaat wel erg veel tijd inzitten en dat is totaal niet efficient als je collega hetzelfde gaat doen...

don't mind me

vrijdag 17 oktober 2014 12:27

Acties:

Metian

Snert is vies

Om mooi begin te maken kan je ook onderstaande website proberen, duidelijk en goed om te leren.

http://learn.shayhowe.com/html-css/

Rupsen, Rapsen.