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/
Hier schreef tong80 het volgende:
Faux is een FOK!held, zoals dat vroeger Gellarboy en Brechtje waren. Users die je koestert.
Faux is een FOK!held, zoals dat vroeger Gellarboy en Brechtje waren. Users die je koestert.
ik ben wel een beetje lui, maar als ik zoiets doe ( wat ik ook leuk vind) wil ik het wel goed leren 
.
.
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
naja of je nu <span class="black"> doet of <span style="color:black"> is natuurlijk allebei net zo fout 
ik zou dan nog liever voor de inline-style kiezen.
ik zou dan nog liever voor de inline-style kiezen.
als ik echt lui ben ( wat ik later ook ga doen) maak ik de CSS in een extern documentje en gebruik ik dat document voor elke html.
dan heb ik met fontArial in elke html gewoon normaal arial etc.
als ik dan iets nodig heb doe ik dat gewoon in het CSS document, of kan dat niet?
EDIT:
als ik het leuk blijf vinden wil ik ook door naar PHP, javascript etc, maar je moet klein beginnen, is het niet?
dan heb ik met fontArial in elke html gewoon normaal arial etc
.als ik dan iets nodig heb doe ik dat gewoon in het CSS document, of kan dat niet?
EDIT:
als ik het leuk blijf vinden wil ik ook door naar PHP, javascript etc, maar je moet klein beginnen, is het niet?
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
Nah, daar ben ik het niet mee eens. Natuurlijk is het niet de bedoeling om met je classnames precies te omschrijven wat je visueel wilt bereiken, maar inline styles is zo mogelijk wel de slechtste techniek als je nog aan het leren bent hoe HTML en CSS werken.quote:Op woensdag 10 oktober 2012 21:23 schreef KomtTijd... het volgende:
naja of je nu <span class="black"> doet of <span style="color:black"> is natuurlijk allebei net zo fout
Gewoon allebei niet doen is het beste jaquote:Op woensdag 10 oktober 2012 21:28 schreef Tijn het volgende:
[..]
Nah, daar ben ik het niet mee eens. Natuurlijk is het niet de bedoeling om met je classnames precies te omschrijven wat je visueel wilt bereiken, maar inline styles is zo mogelijk wel de slechtste techniek als je nog aan het leren bent hoe HTML en CSS werken.
das het nadeel van css, als ik een andere grootte wil moet ik een andere regel en classname bedenken.quote:
[..]
Nah, daar ben ik het niet mee eens. Natuurlijk is het niet de bedoeling om met je classnames precies te omschrijven wat je visueel wilt bereiken, maar inline styles is zo mogelijk wel de slechtste techniek als je nog aan het leren bent hoe HTML en CSS werken.
maarja, zoveel werk is dat niet. als ik dat al te veel vind had ik niet eens hoeven beginnen
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
Het idee is dat je 1 (of meerdere) CSS files maakt voor een hele website. Alle HTML-pagina's op de site gebruiken dezelfde stylesheet(s), zodat alle pagina's er uniform en consistent uitzien.quote:Op woensdag 10 oktober 2012 21:26 schreef AppleOcean het volgende:
als ik echt lui ben ( wat ik later ook ga doen) maak ik de CSS in een extern documentje en gebruik ik dat document voor elke html.
Ga je een nieuwe site maken met een ander uiterlijk, dan heb je nieuwe CSS file(s) nodig. Maar de kans is groot dat je stukken HTML dan juist kunt hergebruiken, omdat de structuur van veel onderdelen generiek is.
dus het is een soort van, als je goed begint kom je er wel?quote:
[..]
Het idee is dat je 1 (of meerdere) CSS files maakt voor een hele website. Alle HTML-pagina's op de site gebruiken dezelfde stylesheet(s), zodat alle pagina's er uniform en consistent uitzien.
Ga je een nieuwe site maken met een ander uiterlijk, dan heb je nieuwe CSS file(s) nodig. Maar de kans is groot dat je stukken HTML dan juist kunt hergebruiken, omdat de structuur van veel onderdelen generiek is.
.
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
oke: weer een vraagje.
http://www.w3schools.com/(...)css_background-image
deze ben ik aan het proberen, maar hij lukt niet.
het gaat om dit stukje:
body
{margin: 2px;padding: 20px;border-style:solid;border-color:black;border width:12px;}
{background-image:url('http://imgur.com/DLhbD.jpg');}
maar het werkt niet.
hoe komt dat?
http://www.w3schools.com/(...)css_background-image
deze ben ik aan het proberen, maar hij lukt niet.
het gaat om dit stukje:
body
{margin: 2px;padding: 20px;border-style:solid;border-color:black;border width:12px;}
{background-image:url('http://imgur.com/DLhbD.jpg');}
maar het werkt niet.
hoe komt dat?
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
body {quote:
oke: weer een vraagje.
http://www.w3schools.com/(...)css_background-image
deze ben ik aan het proberen, maar hij lukt niet.
het gaat om dit stukje:
body
{margin: 2px;padding: 20px;border-style:solid;border-color:black;border width:12px;}
{background-image:url('http://imgur.com/DLhbD.jpg');}
maar het werkt niet.
hoe komt dat?
margin: 2px;
padding: 20px;
border-style:solid;
border-color:black;
border-width:12px;
background-image:url('http://imgur.com/DLhbD.jpg');
}
zou moeten werken
Hier schreef tong80 het volgende:
Faux is een FOK!held, zoals dat vroeger Gellarboy en Brechtje waren. Users die je koestert.
Faux is een FOK!held, zoals dat vroeger Gellarboy en Brechtje waren. Users die je koestert.
En dat komt omdat je twee keer { } gebruikt.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
ohja, thanx beide.quote:
En dat komt omdat je twee keer { } gebruikt.
ik weet niet of het goed gaat, maar hij is iig niet meer wit.
miss is he hele pagina grijs omdat het een grijs wit grijs gradient was van 4000 bij 10000 px
hoe zorg ik dat de bg de volledige schermbreedte van een computer inneemt en de lengte even lang is als de pagina?
het laden duurt ook redelijk lang zo
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
Zoals ik in het vorige topic al zei:quote:
body
{margin: 2px;padding: 20px;border-style:solid;border-color:black;border width:12px;}
{background-image:url('http://imgur.com/DLhbD.jpg');}
| 1 2 3 4 | selector <--- hiermee bepaal je wat je wilt stylen { <--- hier bepaal je hoe die style eruit ziet } |
Op
Omdat je dubbele brackets hebt denkt CSS dat je met die tweede set brackets ergens een stijl aan wil geven, maar geef je dat nergens aan. Dus gaat die regel niet op.quote:
Lees 't als dit:
| 1 2 3 4 5 6 7 | #hierwiljeachtergrond { margin: 10px; } { background-image: url('bla.png'); } |
Dat gebeurde er bij jouw code.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
ohja, zoquote:
[..]
Omdat je dubbele brackets hebt denkt CSS dat je met die tweede set brackets ergens een stijl aan wil geven, maar geef je dat nergens aan. Dus gaat die regel niet op.
Lees 't als dit:
[ code verwijderd ]
Dat gebeurde er bij jouw code.
alles in 1 regel dus
.hoe los ik dat achtergrond probleem op?
het laden vanaf een hdd duurt al redelijl lang, stel je hebt een 1 mbps verbinding
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
quote:
[..]
hoe zorg ik dat de bg de volledige schermbreedte van een computer inneemt en de lengte even lang is als de pagina?
| 1 2 3 4 5 6 7 8 9 10 11 | html, body { width: 100%; height: 100%; } body { background-image: url('plaatje.png'); background-size: cover; } |
quote:
maakt dus niet uit hoe groot hij echt is? thanx
.
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
Een beetje groot plaatje is natuurlijk wel aan te raden, dat is het mooist op een groot scherm. Maar je hebt gelijk dat je ook aan mensen moet denken die niet zulk supersonisch internet hebben, dus ga geen plaatje van 1 MB als achtergrond instellen aub.quote:
[..]
maakt dus niet uit hoe groot hij echt is? thanx
de breedte maakt sws niks uitquote:
[..]
Een beetje groot plaatje is natuurlijk wel aan te raden, dat is het mooist op een groot scherm. Maar je hebt gelijk dat je ook aan mensen moet denken die niet zulk supersonisch internet hebben, dus ga geen plaatje van 1 MB als achtergrond instellen aub.
.het is toch een gradient van boven naar beneden.
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
Daar heb je op zich helemaal geen plaatje voor nodig, hoewel CSS gradients nooit zo gemakkelijk zijn geworden als eigenlijk de bedoeling was.quote:
[..]
de breedte maakt sws niks uit
het is toch een gradient van boven naar beneden.
achja, nu weet ik metee hoe ik een plaatje moet doenquote:Op woensdag 10 oktober 2012 22:07 schreef Tijn het volgende:
[..]
Daar heb je op zich helemaal geen plaatje voor nodig, hoewel CSS gradients nooit zo gemakkelijk zijn geworden als eigenlijk de bedoeling was.
.die gradient tut lees ik nog wel een keertje
.
| Macbook pro i5 mid 2012 | The New iPad 64 GB cellular |
