Tips waar te beginnen Html(5) en CSS te leren

[Vighu]

Ik ben dus van plan zelf naast mijn studie (Architectuur) te leren een degelijke website in elkaar te zetten. Ik ben van plan met html/css te werken en me daar voorlopig tot te beperken.

Op het gebied van html en css heb ik al wat geoefend en ik vind het erg leuk en interessant. Het aller simpelste hiervan denk ik nu te weten. Standaard opzet en de style ervan verwerken in een CSS snap ik. Waar ik nu mee zijn alle codes tags etc. Ik heb er grote moeite mee om informatie te vinden die mij opweg helpt om vooral de layout en de grafische elementen in te voeren zoals ik dat wil. Hierbij kan je denken aan een portfolio pagina die pngs van mijn projecten in een grid plaatst en op het moment dat je deze mouse-over dat project en text zich spreid over datzelfde grid. Klik je dan ga je naar de desbetreffende pagina, beweeg je je muis eraf keert het gris terug naar zijn oude vorm.

Eerst was ik begonnen in iWeb, dit beviel mij totaal niet omdat ik alleen standaard dingen kon bereiken. Daarom werk ik nu met DreamWeaver CS5. Graag zou ik mijn website ook hierin maken. Verder kan ik goed overweg met Photoshop en inDesign mocht dit relevant kunnen zijn.

Ik zou graag tips krijgen om verder te kunnen leren!

[CodeCaster]

Vighu schreef op zaterdag 20 november 2010 @ 18:17:
[E]en portfolio pagina die pngs van mijn projecten in een grid plaatst en op het moment dat je deze mouse-over dat project en text zich spreid over datzelfde grid. Klik je dan ga je naar de desbetreffende pagina, beweeg je je muis eraf keert het gris terug naar zijn oude vorm.

Dat neigt toch echt naar Javascript.

Het is niet makkelijk om "even" html, css en JS te leren. Html is een opmaaktaal die gebruikt wordt om (voor bezoekers en voor zoekmachines) betekenis aan tekst te geven. Dit is nog relatief makkelijk. Zodra je echter aan CSS gaat beginnen zul je zien dat er onevenredig veel werk in gaat zitten om een site in iedere browser op je scherm te laten verschijnen zoals jij wil. En als je dan wat dynamiek wilt zul je Javascript moeten gaan oppakken. Het is niet iets wat je in een blauwe maandag leert, maar vooral door veel lezen, oefenen, afkijken en nadoen. Zoals alles eigenlijk.

Zootje links:
http://www.handleidinghtml.nl/
http://www.w3schools.com/
Zoekt en gij zult vinden.

[ Voor 18% gewijzigd door CodeCaster op 20-11-2010 18:24 ]

[marcop23]

Waar ik toch aardig wat van geleerd had is w3schools.com, zoals Codecaster ook al noemde. Hier staat voldoende informatie in over HTML en CSS om de beginselen te kennen. Ik klikte gewoon af en toe op een HTML functie, en las het dan. Later als ik iets nodig had, dacht ik er weer aan en ging dat artikel verder lezen. Na een poos kende ik al ongeveer alle HTML functies (zoveel zijn dat eigenlijk niet) uit mijn hoofd.

[MsG]

Als je HTML en CSS op den duur redelijk beheerst kan je ook vrij makkelijk dit toespitsen op templating binnen diverse CMS-systemen. Hierdoor kan je zonder zelf een enorme scriptkennis te hebben toch relatief eenvoudig dynamische websites aanbieden aan mensen, in plaats van dat je het zelf statisch moet veranderen iedere keer.

Ik leerde vooral door veel doen. Pak een leuk ontwerp van een willekeurige tutorial. Ik bladerde zelf wel vaak naar www.good-tutorials.com/ en probeer zo'n statisch ontwerp om te bouwen tot een statische website. Daarna kan je daarbinnen nog weer dingen om gaan zetten naar een dynamisch systeem. Of met javascript dingen erbij gaan doen.

[Vighu]

Bedankt voor de snelle reacties, ik ga maar beginnen bij w3schools en laat de fancy javascript achtige dingen even achterwegen. Ik ben overigens ook voorbeelden tegen gekomen van Html5 en Css3 die zonder javascript toch erg (voor mij) geavanceerde animaties etc maakten

[MsG]

Bedenk sowieso dat HTML5 leuk is voor de toekomst, maar dat het meerendeel nog lang niet kan zien wat je er mee maakt. Dus belangrijke dingen kunnen beter the old way.

[Peter]

Kijk eens naar het boek "Introducing HTML5" van Remy Sharp en Bruce Lawson. In het boek worden een aantal van de nieuwe mogelijkheden uitgelegd. Niet alleen wat voor functie ze hebben, maar ook op welke manier je ze hoort te gebruiken en vaak korte achtergrondjes.

[Raynman]

Geen allesomvattend handboek, maar voor een introductie heel aardig: http://www.htmldog.com/.

Op handleidinghtml.nl staat alle HTML nog steeds in hoofdletters en krijg je al snel allerlei attributen (en tags) te zien die niet zo interessant (meer) zijn (opmaak die je met CSS kunt regelen en zo). Als naslagwerk misschien nog wel handig, maar ik zou het cursusgedeelte niet als startpunt aanraden.

[Ronnyrr]

Zelf ben ik 2 jaar geleden begonnen met de cursussen van mijnhomepage.nl. Het zijn misschien niet de beste dingen en ze leggen echt de basics uit. Maar om in te stappen vond ik het zeker handig en heb ik er ten der tijd veel van geleerd.
Verder zijn de w3c schools erg aan te raden. Veel nuttige informatie.
En verder is het belangrijkste denk ik, het doen.
Ontwerp wat een website in photoshop en zet hem om naar dreamweaver.
Niet één keer maar gewoon telkens opnieuw en jezelf daarin telkens blijven uitdagen!

[CH4OS]

CodeCaster schreef op zaterdag 20 november 2010 @ 18:23:
Dat neigt toch echt naar Javascript.

Nou ben ik ook niet zo goed op de hoogte van HTML5 (ik begrijp dat de TS dat ook wil leren), maar is een grid zoals bedoeld door de ts niet gewoon een canvas in HTML5? (Of word die ook door JS aangestuurd?)?

Ronnyrr schreef op zondag 21 november 2010 @ 13:27:
Zelf ben ik 2 jaar geleden begonnen met de cursussen van mijnhomepage.nl. Het zijn misschien niet de beste dingen en ze leggen echt de basics uit. Maar om in te stappen vond ik het zeker handig en heb ik er ten der tijd veel van geleerd.

Ik heb ook veel geleerd van w3schools en handleidinghtml.nl. Niet de best practices van HTML, maar het brengt je wel een heel eind. Mocht men later ook nog besluiten gebruik te willen maken van semantiek, kan ik http://home.parse.nl/~michiel/semantiek.html erg aanraden.

En verder is het belangrijkste denk ik, het doen.

Totally agree, kostte mij 4 jaar (naast mijn MBO ICT Beheer studie), maar was zeker de moeite waard!

Ontwerp wat een website in photoshop en zet hem om naar dreamweaver.

Ik hoop niet dat je dit meent, want dit levert of tabbellen-troep op, of een verschrikkelijke tag-soup!

[ Voor 56% gewijzigd door CH4OS op 21-11-2010 13:39 ]

[mithras]

Ik heb wel het idee dat w3schools niet met de mooiste voorbeelden komt. Je kan er prima leren omgaan met html/css/javascript maar als je uiteindelijk wat verder bent zal je zien dat bepaalde technieken achterhaald zijn of helemaal niet zo handig zijn (of tegen de recente standaarden ingaan).

Dat neemt niet weg dat het een goede beginnersstap is, maar neem het aub mee in je leerproces. Wat ik verder merk is dat sites waar korte onderwerpen worden besproken in artikelen (blogs) je veel kan leren over specifieke onderwerpen. Kijk bijvoorbeeld eens naar de dingen van A List Apart (ALA) of Smashing Magazine.

Als je meer (specifiek) over html5 wil leren, kijk dan naar het boek HTML5 for Web Designers.

CptChaos schreef op zondag 21 november 2010 @ 13:36:
[...]
Nou ben ik ook niet zo goed op de hoogte van HTML5 (ik begrijp dat de TS dat ook wil leren), maar is een grid zoals bedoeld door de ts niet gewoon een canvas in HTML5? (Of word die ook door JS aangestuurd?)?

Nope, zie canvas als een tekenvel (papier, om met potlood op te tekenen). Een dergelijk grid met blokjes is een stukje javascript wat (afhankelijk van wat je precies wilt) redelijk eenvoudig is te maken.

[ Voor 34% gewijzigd door mithras op 21-11-2010 13:44 ]

[Ronnyrr]

CptChaos schreef op zondag 21 november 2010 @ 13:36:
Ik hoop niet dat je dit meent, want dit levert of tabbellen-troep op, of een verschrikkelijke tag-soup!

Ik bedoel daarmee ook natuurlijk niet het exporteren vanaf photoshop naar dreamweaver.
Dat levert inderdaad een dramatische code op en leer je niet veel van.
Maar als je in photoshop een lay-out maakt. En die vanuit het 0 punt in dreamweaver opbouwt gewoon met eigen html en css en daar de uitdaging zoeken, zeg ik wel gewoon doen. Zo begon ik ook en leer je echt veel van!

mithras schreef op zondag 21 november 2010 @ 13:39:
Dat neemt niet weg dat het een goede beginnersstap is, maar neem het aub mee in je leerproces. Wat ik verder merk is dat sites waar korte onderwerpen worden besproken in artikelen (blogs) je veel kan leren over specifieke onderwerpen. Kijk bijvoorbeeld eens naar de dingen van A List Apart (ALA) of Smashing Magazine.

En om hier nog even op in te haken, hier ben ik het wel volledig mee eens.
Net als het gebruik van boeken, wat veel mensen ook doen. Ze schaffen boeken aan over HTML, CSS of/en JS en proberen daar wat uit te leren. Echter is het vaak moeilijk om daarheen te komen en kan je op internet evenveel leren.

[CH4OS]

mithras schreef op zondag 21 november 2010 @ 13:39:
Nope, zie canvas als een tekenvel (papier, om met potlood op te tekenen). Een dergelijk grid met blokjes is een stukje javascript wat (afhankelijk van wat je precies wilt) redelijk eenvoudig is te maken.

Ja, ik snap dat een canvas te vergelijken is met een tekenvel. Het is eigenlijk een (linnen) doek, gezien veel foto's tegenwoordig op canvas worden afgedrukt. Maar daarom wil dat nog niet zeggen dat meerdere projecten in een portfolio niet meerdere canvassen zijn natuurlijk, zie de nieuwe image viewer op t.net's frontpage. Die maakt gebruik van canvas (afaik) en is juist hetgeen de TS zoekt lijkt me.

Zie bijvoorbeeld reviews: WRC: FIA World Rally Championship

[ Voor 9% gewijzigd door CH4OS op 21-11-2010 14:36 ]

[Peter]

Ronnyrr schreef op zondag 21 november 2010 @ 13:27:
Verder zijn de w3c schools erg aan te raden. Veel nuttige informatie.

Kleine note: w3schools heeft niets met het W3C te maken.

Ronnyrr schreef op zondag 21 november 2010 @ 14:07:
En om hier nog even op in te haken, hier ben ik het wel volledig mee eens.
Net als het gebruik van boeken, wat veel mensen ook doen. Ze schaffen boeken aan over HTML, CSS of/en JS en proberen daar wat uit te leren. Echter is het vaak moeilijk om daarheen te komen en kan je op internet evenveel leren.

Er is wel een heel belangrijk verschil: de kwaliteit/rotzooi ratio. Deze ligt stevig in het voordeel van boeken. Het internet zit vol met mensen die denken met HTML en gerelateerde technologieën om te kunnen gaan en hier ook tutorials over schrijven, maar in werkelijkheid nog nooit een HTML specificatie gezien hebben.
Natuurlijk zijn er ook boeken waar een hoop onzin instaat, maar de kans dat je iets goeds te pakken hebt is een stuk groter.

[Bosmonster]

Het grote nadeel van boeken is dat ze meestal al achterlopen op het moment dat ze uitkomen. Het is dus wel zaak om goed uit te zoeken wat de moeite waard is en wat niet.

Persoonlijk ben ik meer van het praktisch leren. Gewoon doen. Er zijn een paar miljard voorbeelden te vinden op internet

[Rudolf]

Moet bekennen dat ik na 5 jaar nog regelmatig W3C open laatst staan

[TheJVH]

CptChaos schreef op zondag 21 november 2010 @ 14:30:
[...]
Ja, ik snap dat een canvas te vergelijken is met een tekenvel. Het is eigenlijk een (linnen) doek, gezien veel foto's tegenwoordig op canvas worden afgedrukt. Maar daarom wil dat nog niet zeggen dat meerdere projecten in een portfolio niet meerdere canvassen zijn natuurlijk, zie de nieuwe image viewer op t.net's frontpage. Die maakt gebruik van canvas (afaik) en is juist hetgeen de TS zoekt lijkt me.

Zie bijvoorbeeld reviews: WRC: FIA World Rally Championship

Om even hier in te haken:
Wat de TS wil is een simpel grid. Heel simpel, plaatjes in een raster die je (meestal) bekijkt van links naar rechts. Op het moment dat je bij het laatste plaatje bent, begin je op de volgende regel bij meest linkse plaatje. Net zoals je tekst leest .

Zo bouw je dus ook zo'n grid op. Je zet verschillende images achter elkaar en zorgt ervoor dat ze een terugloop hebben. Heel snel de HTML/CSS code hiervoor:

HTML:

<body>
<div id="container">
  <img src="plaatje.jpg" width="200" height="150" />
  <img src="plaatje.jpg" width="200" height="150" />
  <img src="plaatje.jpg" width="200" height="150" />
  <img src="plaatje.jpg" width="200" height="150" />
</div>
</body>

Cascading Stylesheet:

#container {
    width: 220px;
}

Dit is het enige wat je nodig hebt om een grid te maken met afbeeldingen, niets meer, niets minder. Eventueel kan je zelfs #container eruit halen, maar die kan je gebruiken om een vaste breedte aan te geven.

Eventueel kan je de images nog in een div tag zetten, en zet je de div op 'inline' als je er nog tekst bij wilt doen.

Hier is dus helemaal geen HTML5 of JavaScript voor nodig, pure HTML/CSS .

Tweakers gebruikt zoiets ook voor hun imagegrids, gewoon een <center> tag (lekker oldskool trouwens) met daarin <img> in <a> tags voor de lightbox.

EDIT: Om even terug te komen op de semantiek:
Simpel gezien is zoiets ook een lijst. Een lijst van afbeeldingen, maar dan in een grid. Als je echt semantisch bezig wilt zijn, moet je dat dus doen met een unordered list en list items. Je maakt het jezelf dan wel lastig maar het is wel iets om over na te denken .

[ Voor 7% gewijzigd door TheJVH op 23-11-2010 14:01 ]

[Herko_ter_Horst]

Vighu schreef op zaterdag 20 november 2010 @ 18:17:
Hierbij kan je denken aan een portfolio pagina die pngs van mijn projecten in een grid plaatst en op het moment dat je deze mouse-over dat project en text zich spreid over datzelfde grid. Klik je dan ga je naar de desbetreffende pagina, beweeg je je muis eraf keert het gris terug naar zijn oude vorm.

Een simpele grid is niet het enige dat de TS wil

[ Voor 80% gewijzigd door Herko_ter_Horst op 23-11-2010 18:26 ]

[tvdweij]

Ik weet niet zeker hoe up to date deze bronnen nog zijn maar hier heb ik vroeger wel het nodige geleerd:
http://www.cssplay.co.uk/
http://css.maxdesign.com.au/index.htm

Ook kun je er eens een CSS "framework" bij pakken om te kijken hoe zij de dingen aanpakken,
bv yaml css www.yaml.de/en/ (de site lijkt nu even down btw)

Voor html5:
http://www.html5rocks.com/
http://diveintohtml5.org/
http://html5doctor.com/
https://github.com/paulirish/html5-boilerplate

[Peter]

tvdweij schreef op dinsdag 23 november 2010 @ 22:29:
https://github.com/paulirish/html5-boilerplate

Wellicht is http://html5boilerplate.com/ makkelijker