Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Opnieuw verdiepen in Websites maken..

13 antwoorden
  • Na een lange tijd wil ik me weer eens gaan verdiepen in het maken van sites en ik heb even wat duwtjes in de goede richting nodig. Met name over de taal/standaard. Uiteindelijk zal ik ook PHP/MySql gaan gebruiken maar voor nu wil ik me even richten op de layout. De eerste vragen zijn: Welke HTML versie kan ik nu het beste gebruiken? 4.x of 5? Is xHTML een vervanging of aanvulling op HTML? Is xHTML met HTML te combineren of behoort het samen gebruikt te worden? Behoor ik nu wel of geen tabellen voor de layout te gebruiken? Als ik google op termen die ik ken kom ik alleen maar oude (2004-2008) tutorials tegen over CSS/HTML. Zijn er bij jullie nieuwere bekend? Bedankt!
  • Deze tutorial over CSS is meestal goed up to date. http://www.w3schools.com/css/ Ook gebruik ik deze website veel om bepaalde tags op te zoeken. Zeer handig en toch ook wel actueel.
  • [quote:73841ecfdd="Lord Wodan"]Welke HTML versie kan ik nu het beste gebruiken? 4.x of 5?[/quote:73841ecfdd]Ik zou me nu richten op HTML5 als je nu weer 'blanco' begint. In principe een stuk schoner en met de juiste tools kun je het ook toonbaar maken in oudere browsers (mocht je dat nu al willen). [quote:73841ecfdd="Lord Wodan"] Is xHTML een vervanging of aanvulling op HTML? [/quote:73841ecfdd]Een vervanging. xHTML is een doctype die zorgt dat je XML en HTML samen kunt gebruiken. Het gros doet dat overigens niet... Het voordeel van XHTML is wel dat de syntax netter is n.m.m., waardoor je jezelf aanleert alles iets gestructueerder (en dus overzichtlijker) op te bouwen. [quote:73841ecfdd="Lord Wodan"] Is xHTML met HTML te combineren of behoort het samen gebruikt te worden?[/quote:73841ecfdd]Het zijn 2 verschillende doctypes, dus je moet óf A óf B gebruiken. Als je overigens voor HTML5 gaat is deze vraag verder niet meer zo relevant. Zie ook: http://forum.computertotaal.nl/phpBB2/viewtopic.php?t=216088 [quote:73841ecfdd="Lord Wodan"] Behoor ik nu wel of geen tabellen voor de layout te gebruiken?[/quote:73841ecfdd]Niet voor de structuur van je pagina. Een tabel-tag moet je gebruiken als je tabulaire data (<td>) wilt weergeven. Zoniet, dan moet je de browser dat ook niet wijs maken. ;) [quote:73841ecfdd="Lord Wodan"] Als ik google op termen die ik ken kom ik alleen maar oude (2004-2008) tutorials tegen over CSS/HTML. Zijn er bij jullie nieuwere bekend? [/quote:73841ecfdd]Wat zeg je van de twee stickies in dit subforum? ;) Een leuke tutorial is ook deze: http://www.webdesignermagazine.nl/tutorials/tutorial-maak-een-portfoliosite-met-html5-css3-jquery/4287/
  • Bedankt voor de info. de laatste tuto kan ik niet volgen, hij gaat me te snel en te diep. Het komt op me over alsof hij alleen maar verteld wat hij gedaan heeft zonder na te denken of de lezer wel op de zelfde pagina zit. [code:1:5983b12f13] /* Logo */ header[role='banner'] h1 {float: left; height: 47px; margin: 0;} header[role='banner'] h1 a { background: url('../images/logo-fooltography.png') no-repeat; display: block; float: left; height: 33px; margin: 16px 0 0; text-indent: -9999em; width: 153px; } /* Navigation */ header[role='banner'] nav[role='navigation'] { float: right; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.273em; } header[role='banner'] nav[role='navigation'] ul {list-style: none; line-height: 14px; margin: 19px 0 0;} header[role='banner'] nav[role='navigation'] li {display: inline; float: left; margin: 0 0 0 1em;} header[role='banner'] nav[role='navigation'] a { color: #525252; padding: 0 .25em 11px; text-decoration: none; } header[role='banner'] nav[role='navigation'] .active a, header[role='banner'] nav[role='navigation'] a:hover { border-bottom: 3px solid #0078B4; padding-bottom: 8px; } header[role='banner'] nav[role='navigation'] .active {font-weight: bold;} [/code:1:5983b12f13] Na het volgen van de gehele CSS van WC3 is dit nog steeds abracadabra, alsof hij zelf een opmaak methode verzonnen heeft?[/code]
  • Ok, die gaat dan iets te ver wellicht. Kijk hier dan nog maar eens naar als je verder bent ingelezen. :) Kun je met de rest wel uit de voeten, m.n. de stickies hier?
  • Ik kom wel een eindje ja maar er is veel info en eigenlijk spreken ze elkaar soms tegen. De basis CSS is overigens niet zo moeilijk maar ik kom weinig tut's tegen die ook echt naar de praktijk gericht zijn. Voor de layout loop ik wat vast met CSS en dan met name het werken met DIV. Soms werkt men met een container en dan weer niet. Heb je daar wat specifiekere informatie over? Een tabel gaan gebruiken is erg verleidelijk maar ik vertik het :-)
  • Het wel of niet kiezen van een container hangt af van hoe je de pagina wil weergeven. Grofweg: als je een vaste breedte wilt hebben, dan gebruik je een container (die je dan vaak centreert) en als je een flexibele breedte wil hebben (browservullend) dan vaak niet. Overigens zijn hier weer meer dan voldoende uitzonderingen op te bedenken.
  • Ok, ik ga er mee spelen. Heb ik het wel goed begrepen dat ik SPAN moet gebruiken wanneer ik geen vrije regel wil hebben zoals dat bij P gebeurt?
  • Elk element heeft zijn eigen functie. P staat voor paragraaf, in het Nederlands duiden we dat aan met alinea. Dit gebruik je voor vrije tekst. Span gebruik je als inline-element eigenlijk alleen maar om een andere opmaak toe te kennen (met CSS) aan een deel van de inhoud binnen een ander element. Verder is het redelijk vergelijkbaar met een div, eigenlijk is span het inline-equivalent van het block-level element div. Mocht je onder een P geen "vrije regel" willen hebben, dan moet je dat regelen met CSS. In de meeste browsers heeft de P namelijk een margin-bottom van bjivoorbeeld 12px. Mijn tip: ga gewoon eens lekker spelen met de info die je nu hebt. Maak een basispagina als deze: [code:1:1f09c8d981]<!DOCTYPE html> <html> <head> <title>Lord Wodan testsite</title> </head> <body> <div id="container"> <!-- jouw inhoud hier --> </div> </body> </html>[/code:1:1f09c8d981] En ga vervolgens lekker spelen met elementen. Kijk wat er gebeurt, wat het gedrag is, etc. Kijk vervolgens regelmatig naar de [url=http://validator.w3.org/]W3 Validator[/url] om te kijken of je geen ongeldige nestings e.d. gebruikt. Vervolgens kun je hetzelfde doen door hier een CSS aan te koppelen om de opmaak te veranderen.
  • Ik ga er vanavond weer mee spelen. zo 123 heb ik geen code bij de hand maar ik heb nu iets van: [code:1:e6897d7102] <div id="container"> <header role"="banner"> <h1> First page, welkom</h1> <span>Mijn eerste gepruts</span> </header> <div role="sidebar"> <nav role="navigatie"> <list verhaal> </nav> <p> blahblah</> </div> <div role="maincontent"> <p>Blahblah</p> </div> <div role="footer"> <p>Blahblah</p> </div> </div> [/code:1:e6897d7102] Nu de Divs nog op de juiste plek krijgen op de pagina :-)
  • Ik ben wat aan het proberen en loop nu tegen iets basics aan maar ik kan het antwoord maar niet vinden (google). Ik weet hoe ik de attributen van bv een tabel kan definieren, zoals: [code:1:058cf6fe7a] table { border-collapse:collapse; } table,th, td { border: 1px solid black; } [/code:1:058cf6fe7a] ook weet ik hoe ik een Class kan maken en die oproepen (table class="test") maar waar ik NIET achter kan komen is hoe ik het gedrag van de TD/TR/TH uit die 'table class="test"' kan beinvloeden. Tenzij elke TD tag hernoem en dat is bij een grote tabel nogal wat werk. Wat is dus eigenlijk zoek is door het vermelden van table class=test, ook meteen de TD/TR/TH eigenschappen bepaal. Hoe moet ik dit "nesten"?
  • [quote:6ffd75448b="Lord Wodan"]Hoe moet ik dit "nesten"?[/quote:6ffd75448b] Door het ook in CSS te nesten. ([i:6ffd75448b]Cascading[/i:6ffd75448b] Style Sheet) ;) [code:1:6ffd75448b] table { border-collapse:collapse; } table th, table td { border: 1px solid black; } [/code:1:6ffd75448b] - Bas
  • Of met het voorbeeld class="test": [code:1:6515567d08] table.test { border-collapse:collapse; } table.test th, table.test td { border: 1px solid black; } [/code:1:6515567d08] Waarbij 'table' optioneel is. m.a.w. [code:1:6515567d08] .test th, .test td { border: 1px solid black; } [/code:1:6515567d08] Mag ook.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.