DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
[html, css, js] Voor Dummies
Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: Topicreeks: Algemeen Wordpress topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.
Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.
Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: Topicreeks: Algemeen Wordpress topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.
Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
De TT is wel toepasselijk op alle 15 jarige "web designers" die tegenwoordig als aardappelen uit de grond schieten
Google eens op 'set onclick with javascript'
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Done!quote:Op vrijdag 5 april 2013 22:39 schreef Catch22- het volgende:
Google eens op 'set onclick with javascript'
maar krijg nu een andere fout zie updatehttp://jsfiddle.net/4sK2M/1/
heeft toch te maken met crossdomain accept gebeuren.. Denk dat het in mijn geval gemakkelijker is om een extra php scriptje te schrijven die ik in de root van de site plaats en deze aanroep via $.ajax om zo toch de externe data te kunnen laden, want het grappige is dat dat wel gewoon werkt?!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Niet lullig bedoelt, maar je hebt er meer aan als je een aantal artikelen gaat lezen. Je maakt namelijk een hoop conceptuele fouten en debuggen is volgens mij ook niet je sterkste punt
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Catch, ik neem je kritiek dan ook serieus 
maar normaal als ik 'code' overneem zou het moeten werken, en debuggen is idd niet mijn sterkste kant maar als chrome geen fouten aangeeft kan ik toch ook niets debuggen? 
maar ik ben altijd bereid om te leren 
en dat doe ik door te doen...
Ja ik ben een doener, geen lezer helaas... al heb ik mijn http://test.testertje.nl/test 100% zelf geschreven! (wel afgekeken maar toch!) Welke cunceptuele fouten maak ik dan? ik begrijp dat cros van de versturende partij (de URL die ik opvraag) extra headers moet meegeven wil deze worden geaccepteerd... en dat is in dit geval niet het geval...
maar normaal als ik 'code' overneem zou het moeten werken, en debuggen is idd niet mijn sterkste kant maar als chrome geen fouten aangeeft kan ik toch ook niets debuggen? maar ik ben altijd bereid om te leren en dat doe ik door te doen...Ja ik ben een doener, geen lezer helaas... al heb ik mijn http://test.testertje.nl/test 100% zelf geschreven! (wel afgekeken maar toch!) Welke cunceptuele fouten maak ik dan? ik begrijp dat cros van de versturende partij (de URL die ik opvraag) extra headers moet meegeven wil deze worden geaccepteerd... en dat is in dit geval niet het geval...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Prutsen wil pas als je enigszins snapt wat je doet en weet hoe je moet debuggen en wat je met foutmeldingen moet
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Oh... maar ik snap het enigszins hoor 
denk ik... maar goed... ik ga weer verder knutselen, ooit ga ik het allemaal begrijpen 
denk ik... maar goed... ik ga weer verder knutselen, ooit ga ik het allemaal begrijpen
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Hoe zit het nu eigenlijk met die section-tag? Wanneer gebruik je die en wanneer kan je beter een div gebruiken?
Ik heb bijvoorbeeld op mijn website meerdere blokken, met ieder 4 evenementen naast elkaar. Ene blok is voor evenementen in de buurt, ander weer voor evenementen van bepaalde categorie.
Geef ik zo'n blok met evenementen dan ook een section-tag? Of is die daar niet voor bedoeld?
Ik heb bijvoorbeeld op mijn website meerdere blokken, met ieder 4 evenementen naast elkaar. Ene blok is voor evenementen in de buurt, ander weer voor evenementen van bepaalde categorie.
Geef ik zo'n blok met evenementen dan ook een section-tag? Of is die daar niet voor bedoeld?
Vuistregel: als je er een titel-tag boven kan zetten is het een <section>.
Ik zou dus zeggen van wel. Ieder evenement zou je eventueel in een eigen <article> kunnen zetten, al vind ik dat zelf wat overkill.
Ik zou dus zeggen van wel. Ieder evenement zou je eventueel in een eigen <article> kunnen zetten, al vind ik dat zelf wat overkill.
Section is voor een samenhangend stuk content (een header + een of meerdere paragrafen bv) dat essentieel is voor de pagina.quote:
Hoe zit het nu eigenlijk met die section-tag? Wanneer gebruik je die en wanneer kan je beter een div gebruiken?
Niet echt, ik gebruik het meer als onderdeel van een article. Zo kan je een article opknippen in meerdere onderdelen elk weer met een header en footer indien nodig. Maar als aside de voorkeur heeft moet je dat juist weer gebruiken.quote:
Hoe zit het nu eigenlijk met die section-tag? Wanneer gebruik je die en wanneer kan je beter een div gebruiken?
Ik heb bijvoorbeeld op mijn website meerdere blokken, met ieder 4 evenementen naast elkaar. Ene blok is voor evenementen in de buurt, ander weer voor evenementen van bepaalde categorie.
Geef ik zo'n blok met evenementen dan ook een section-tag? Of is die daar niet voor bedoeld?
Gebruik een section sowieso niet als styling atribuut. Bruce Lawson legt het best duidelijk uit op de HTML5 doctor website http://html5doctor.com/the-section-element/ en hier kan je ook meer info vinden: http://www.whatwg.org/spe(...)#the-section-element
Edit: Wat Tijn dus ook zegt maar dan in minder woorden
Het gaat erom dat je met de header/article/header/footer/nav elementen wat meer informatie over je pagina kunt vertellen aan bv zoekmachines. Als je denkt dat je site duidelijker voor Google is door bepaalde content als section te markeren, dan moet je dat doen.quote:
Ooh.. duidelijk.
Is dus niet heel erg duidelijk/vast gedefinieerd dus?
Mja, dacht zelf ook vooral aan teksten om het daarvoor te gebruiken, maar zie links en rechts ook echt voor blokken. Vandaar mijn vraag.
Hier een voorbeeld van mijn blok. Elke tile draait om als je eroverheen hooverd en dan komt er meer informatie beschikbaar en actie knoppen:
Dit blok "In your neighborhood", zou je dat nou dan wel of niet in een section plaatsen?
Hier een voorbeeld van mijn blok. Elke tile draait om als je eroverheen hooverd en dan komt er meer informatie beschikbaar en actie knoppen:
Dit blok "In your neighborhood", zou je dat nou dan wel of niet in een section plaatsen?
Is dit de hoofdcontent van de pagina of staat het ergens bij? Indien dat laatste dan zou ik het in <aside> zetten.
Ah, weer andere optie.
dit betreft de homepage waar 3 van dit soort blokken komen. Verder nog wat visuele attributen om de gebruiker wegwijs te maken. wel weinig tekst op de homepage.
dit betreft de homepage waar 3 van dit soort blokken komen. Verder nog wat visuele attributen om de gebruiker wegwijs te maken. wel weinig tekst op de homepage.
div is iig alleen voor opmaak en heeft geen semantische waarde. Dus alleen als je een .container oid nodig hebt hoeft je nog naar div te grijpen (dus eigenlijk een block-level span).
“Specialization is for insects”.—Robert Heinlein
Precies. Als een groep content semantische samenhang heeft, kun je een van de smantische elementen gebruiken. Als het alleen qua opmaak bij elkaar hoort, heb je div en span.quote:Op zaterdag 6 april 2013 15:36 schreef n8n het volgende:
div is iig alleen voor opmaak en heeft geen semantische waarde. Dus alleen als je een .container oid nodig hebt hoeft je nog naar div te grijpen (dus eigenlijk een block-level span).
Java wordt ook gebruikt voor server-side code. Dat kan prima en je hebt er geen aparte browserplugin voor nodig.quote:Op woensdag 3 april 2013 09:11 schreef Tijn het volgende:
De laatste keer dat ik Java op een website heb gezien kan ik me niet eens herinneren. Ik surf al jaren zonder Java plugin en ik heb niet het idee dat ik iets mis.
Ik kan me ook niet herinneren dat het ooit echt veel gebruikt is voor websites. Voor zover ik weet is het alleen gebruikt voor gimmicky features of als launcher van iets dat niks met het web te maken heeft.
Op school hele projecten moeten maken met JSP's en JavaBeans. Daarvoor is het inderdaad prima.quote:
[..]
Java wordt ook gebruikt voor server-side code. Dat kan prima en je hebt er geen aparte browserplugin voor nodig.
@work doen we alle grote projecten in Java.
Java is iets complexer, naar wel beter schaalbaar en je hebt meer controle
Java is iets complexer, naar wel beter schaalbaar en je hebt meer controle
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Die kant is het idd op gegaan nadat het in de browser en op de desktop is gefaaldquote:
[..]
Java wordt ook gebruikt voor server-side code. Dat kan prima en je hebt er geen aparte browserplugin voor nodig.
In de browser is het ingehaald idd. Maar het werd natuurlijk gebruikt voor iets waar t suboptimaal voor was.
Serverside is t wel een van meestgebruikte talen voor grotere applicaties
Serverside is t wel een van meestgebruikte talen voor grotere applicaties
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Altijd leuk van die zeldzame bugs waar je uren naar loopt te zoeken.
In FF20 geeft dit 3x ja...
Overigens gaat het met een nieuwe mootools-versie wel goed, maarja daar denk je ook niet meteen aan om dat te upgraden.
In FF16.0 ging het ook nog goed, in FF17.0 opeens niet meer.
[ Bericht 3% gewijzigd door mstx op 08-04-2013 15:22:08 ]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <script type="text/javascript" src="/js/mootools-1.2.4-core-yc.js"></script> </head> <body> <input type="text" class="test123" id="testinput" /> <br /> <script type="text/javascript"> document.write('#testinput heeft class 123? '+($('testinput').hasClass('123')?'ja':'nee')+'<br />'); document.write('#testinput heeft class test123? '+($('testinput').hasClass('test123')?'ja':'nee')+'<br />'); document.write('#testinput heeft class test? '+($('testinput').hasClass('test')?'ja':'nee')+'<br />'); </script> </body> </html> |
In FF20 geeft dit 3x ja...
Overigens gaat het met een nieuwe mootools-versie wel goed, maarja daar denk je ook niet meteen aan om dat te upgraden.In FF16.0 ging het ook nog goed, in FF17.0 opeens niet meer.
[ Bericht 3% gewijzigd door mstx op 08-04-2013 15:22:08 ]
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
Ik heb het, mede om die reden, ook niet zo op frameworks. Ik probeer altijd zo veel mogelijk zelf te schrijven. Natuurlijk is dat niet altijd te doen, maar ik heb er gewoon een hekel aan afhankelijk van andermans code te zijn.quote:Op maandag 8 april 2013 15:12 schreef mstx het volgende:
Altijd leuk van die zeldzame bugs waar je uren naar loopt te zoeken.
[ code verwijderd ]
In FF20 geeft dit 3x ja...
In FF16.0 ging het ook nog goed, in FF17.0 opeens niet meer.
De syntax is op zich best mooi, er zit alleen net wat te veel onlogische troep in de taal en de standaardlibrary. Ik denk dat Java nog steeds wel zo ongeveer de beste oplossing is als je een beetje goede ondersteuning op elk platform wil hebben.quote:Op zaterdag 6 april 2013 23:36 schreef Tijn het volgende:
Die kant is het idd op gegaan nadat het in de browser en op de desktop is gefaald
(Mijn posts zijn een beetje offtopic, eerst had ik ook een vraag over CSS, maar dat is voordat ik hem postte al opgelost. Vraag me niet hoe, maar het werkt inmiddels
)
jquery heeft daar weibig last van. Hun slogan gaat voor mij ook opquote:
[..]
Ik heb het, mede om die reden, ook niet zo op frameworks. Ik probeer altijd zo veel mogelijk zelf te schrijven. Natuurlijk is dat niet altijd te doen, maar ik heb er gewoon een hekel aan afhankelijk van andermans code te zijn.
Write less, do more
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
