HTML en CSS leren

[Joey9]

Hoi,

Ik wil mij gaan verdiepen in HTML en CSS (de opmaaktalen van het internet). Kan iemand mij een goede manier vertellen hoe ik dit het beste kan gaan aanpakken? (Ik vind het heel lastig om vanuit een bestaand werkje, zonder tutorials/uitleg, "wegwijs" te worden. Het liefst zou ik een hele handleiding willen krijgen met HTML5 en CSS3.)

Ik wil er alle tijd voor nemen, zodat ik een écht goede webdeveloper kan en mag worden.

[Elin3]

Een prima gratis basic HTML cursus kan je hier vinden. Simpel en puur basis, maar wel goede uitleg om zelf mee aan de slag te gaan.

[Joey9]

Elin3 schreef:

Een prima gratis basic HTML cursus kan je hier vinden. Simpel en puur basis, maar wel goede uitleg om zelf mee aan de slag te gaan.

Bedankt voor je reactie.
De link werkt alleen niet.

[Elin3]

Joey9 schreef:

Bedankt voor je reactie.
De link werkt alleen niet.

Misschien wat fout gegaan met kopiëren omdat ik op de tablet zit, sorry. Deze site bedoel ik: http://home.hccnet.nl/t.amerongen/HT...ael%20Doel.htm

[Joey9]

Die website is heel erg verouderd, helaas.

[freyk]

Ik vind de lesstof van w3schools.com geweldig: Ze leren je de stappen en geven je de mogelijkheid om het online snel en eenvoudig uit te proberen/testen.
In combinatie met een "what you see, is what you get" html bewerker genaamd kompozer.

Ik ben nu bezig met cursus javascript en jquery.

[Dark Phoenix]

http://www.codecademy.com/tracks/htmlcss

Erg goede en snelle manier om het te leren imho.

[Joey9]

@freyk Bedankt voor je reactie.
Ik heb er even rondgekeken en het voldoet aan al mijn wensen. +1

@Dark Phoenix Ik heb er even naar gekeken, maar het is meer om echt te trainen. Het staat niet op zo'n manier opgesteld dat je het in je hoofd kunt stampen. Toch bedankt voor je reactie.

[M@rco]

MDN (Mozilla Developer Network) is een prima naslagwerk, kwalitatief zeker beter dan W3Schools. Het bevat ook links naar een aantal goede tutorials voor beginners.

[freyk]

Nog ff een toevoeging aan mijn vorige post:
Start eerst met html en html5
Daar leer met HTML elementen en hun eigenschappen te werken.
Hierna is CSS een peulenschil.
Want met CSS spreek je de HTML elementen aan en geef je ze "extra" eigenschappen. (ook handig voor het mobiele gedeelte)

Heb je de bovenstaande onder de knie, dan heb, volgens mijn mening, je de basis.
Wil je je site interactief / dynamisch maken, kijk van daar uit naar javascript/jquery/enz, php/asp/java/enz, mysql/postgres/enz.

[xXmathXx]

heey, Het program Dreamweaver is een zeer good program

[TheHunter]

Elin3 schreef:

Misschien wat fout gegaan met kopiëren omdat ik op de tablet zit, sorry. Deze site bedoel ik: http://home.hccnet.nl/t.amerongen/HT...ael%20Doel.htm

Wat een nostalgie, toen ik 10 jaar oud was, heeft mijn moeder destijds die pagina's van michael doel gedownload. Naar mijn computer overgezet (ja want toen hadden niet alle computers al internet). Maandenlang naar dat muziekje cradle.mid geluisterd . Toen kreeg ik het onder de knie, in de brugklas met PHP begonnen en in de 2e klas een 'browsergame' gemaakt en in de 4e m'n eigen content management systeem. Prachtig om dit zo terug te zien.

Trouwens ik quote even michael doel:

Ten eerste: als je zo'n leuke HTML editor hebt en van plan bent om die nu te gaan gebruiken... vergeet het maar. De slechtste manier om dit te leren is zo'n editor gebruiken. (Natuurlijk zijn er wel een paar goeie maar daar heb je pas wat aan als je de beginselen onder de knie hebt, dus denk daar voorlopig maar niet aan.)

Wat is dan wel de beste manier om HTML te leren? Kladblok!! Kladblok?? Ja, kladblok. OK, OK, je hebt zo'n fantastisch, ruimtevretend programma dat belooft dat het maken van een homepage net zo makkelijk is als op je kop krabben maar geloof mij dit nou maar, blijf er vanaf.

[Dark Phoenix]

TheHunter schreef:

Trouwens ik quote even michael doel:

Nouja, iets als Dreamweaver is wellicht niet handig om mee te beginnen, maar kladblok is het andere uiterste. Iets als notepad++ is dan een stuk beter, want dat geeft in ieder geval de syntax in kleuren weer, wat behoorlijk sneller leert, waarbij je een stuk minder fouten maakt, en fouten een stuk sneller oplost wat een hoop frustratie scheelt.

En dan is notepad++ verder nog vrij basic.

[Elin3]

Mijn informatica leraar van de afgelopen 3 jaar heeft ons serieus die site als leerboek laten gebruiken. Nog net met gebruik van notepad++, maar dat was het dan ook wel. Ik begrijp geheel goed waarom informatica op mijn middelbare school voor de jaren na mij wordt afgeschaft

[Dark Phoenix]

Nouja, ik zou oprecht heel graag willen dat ik informatica had gehad waarbij je daadwerkelijk HTML e.d. leerde. Het kan dus altijd erger.

[freyk]

Ik leerde html door een wysiwyg html editor te gebruiken, omdat geen kennis/zin/tijd had om html opmaaktaal te leren en te schrijven.
Maar wanneer ik de site interactiever/mooier wilde maken, ontdekte ik dat wel verstandig was om de achterliggende code te leren. Hierna Is het is vooral dan handig, wanneer je ff snel pagina's wil bewerken, zonder dat je daarvoor zware applicaties hoeft te openen.

Wanneer je een webapp maakt, vind ik het verstandig om dan ook je aan de html standaarden te houden, regelmatig de code te controleren met online scanners en de boel op verschillende browsers te testen.

Applicaties die ik gebruik zijn:
ontwikelen: kompozer, netbeans, notepadd++ en colorcop.
testen: alle populaire browsers,utilu browser collectie, firebug, intere ontwikkelaar tools van google chrome, selenium webdriver + rc (met mijn eigen geschreven grafisch frontendje) en virtualbox.
Hosting: filezilla en xampp.

Dark Phoenix schreef:

Nouja, ik zou oprecht heel graag willen dat ik informatica had gehad waarbij je daadwerkelijk HTML e.d. leerde. Het kan dus altijd erger.

Mijn eerste lessen 'informatica' waren toen ik 15 was op Apples uit eind jaren 80. We zaten toen in 1997. Ik had mijn eerste eigen pc al in mijn handen toen ik 8 was, dus ik heb die lessen nooit serieus kunnen nemen

De basis van HTML en CSS is niet bijzonder moeilijk. Als je wil gaan designen, kan iets als Dreamweaver van pas komen, maar mijn persoonlijke advies is om altijd in split screen te werken, nooit enkel in de design omgeving, zodat je altijd een oog op de code kunt houden.

Maar ik ben zelf niet meer thuis in het dagelijkse webdesign. Van mijn 16 tot mijn 22 druk mee bezig geweest (Bachelor in gehaald zelfs), maar als je het niet bijhoudt, dan vergeet het maar, al zal de HTML-basis wel hetzelfde blijven natuurlijk.

Ik heb zelf een flink stuk CSS / HTML autodidactisch geleerd met de split screen van Dreamweaver. Dus code bewerken en dan kun je min of meer meteen zien wat dat doet. Verder veel googlen. Tip: begin niet met tabellen maar duik meteen in de div's. Goed geleerd is goed gedaan. Ik heb tijd verloren door eerst met tabellen aan de slag te gaan. Verder is er een tof forum: help mij forum. Daar kun je vragen stellen als je vastloopt.

[TheHunter]

ik snapte de tabellen vrij snel hoor

Mutant schreef:

De basis van HTML en CSS is niet bijzonder moeilijk.

Niet mee eens. Dat lijkt misschien wel zo maar het goed doen vergt een bijzondere inspanning.

[BlazeFire]

Als je wil kan ik je toegang geven tot readers die wij op school hebben gebruikt voor basis htmlt en css. Ik ben een webdesigner en wij moesten onze eigen website maken met onze eigen css. Normaal maakt een webdesigner alleen het ontwerp, maar we moesten alles zelfs schrijven.

Best lastig. PM maar als je ze wil. Oh ja, readers zijn gewoon in het Nederlands.

[freyk]

BlazeFire, gaat jouw school akkoord met de verspreiding van hun materiaal?
(bedankt voor het up'pen van een topic dat een maand oud was,....)

[Carn]

deadlock schreef:

Niet mee eens. Dat lijkt misschien wel zo maar het goed doen vergt een bijzondere inspanning.

Mwah, het is niet perse 'moeilijk', het is minder complex dan de gemiddelde programmeertaal, maar het is wel erg uitgebreid. Wil niet zeggen dat je snel en vrij simpel leuke dingen kan maken, maar als je semantisch goed te werk wil gaan moet je er behoorlijk wat tijd en denkwerk insteken en zorgvuldig zijn.

Anyway, gratiz tips: HTML is structuur, CSS is de opmaak van deze structuur, zaken zoals Javascript/Jquery gaan over hoe jouw opgemaakte structuur zich gedraagt. Probeer ze niet alle drie tegelijk te leren; leg de nadruk dus eerst op het correct gebruik van HTML, daarna verder verdiepen in CSS, etc.

Probeer je ook in te lezen over dingen als markup-talen in het algemeen, soorten HTML rendering, het HTML Document Object Model, CSS Box Model, verschillen tussen HTML en XHTML, etc.

De kennis van het hoe en waarom het op een bepaalde manier werkt geeft je veel inzicht en heeft op termijn meer waarde (en ingewikkelder) dan het maken van wat webpagina's, want dat is uiteindelijk (ook dankzij Google) een stuk makkelijker tegenwoordig. Focus je verder op HTML5 en CSS3, dat zijn de komende jaren de standaarden.

Probeer verder een leuke website te bedenken die je wil maken, en begin zo simpel mogelijk. Tutorials zijn er ook genoeg; kwestie van eentje vinden die je aanspreekt.

Overigens is er niets mis met ook tabel-layouts goed onder de knie te krijgen, genoeg toepassingen (zoals bv email) die dat nog steeds gebruiken.

[ruurdv]

Ik bouw al jaren websites, zonder tabellen ;-) Pure HTML(5)/CSS(3). Heb je nog hulp nodig? Ik kan je het een en ander uitleggen als je met gerichte vragen komt.

Happy to help :-)

[Jeroene]

ruurdv schreef:

Ik bouw al jaren websites, zonder tabellen ;-) Pure HTML(5)/CSS(3). Heb je nog hulp nodig? Ik kan je het een en ander uitleggen als je met gerichte vragen komt.

Happy to help :-)

Ik mag hopen dat men tegenwoordig geen websites meer bouwt in tabellen. Nieuwsbrieven wel, maar websites niet. Ik bouw ook héél veel websites dus als je vragen hebt stel ze gerust.
Hoe ik het heb geleerd is vrij gemakkelijk: Gewoon doen.

Download notepad++ en begin gewoon eens wat te doen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
</head>

<body>

HIER KUN JE DOEN WAT JE WILT. :-)

</body>
</html>

Nog beter is om DreamWeaver te downloaden. Dan kun je namelijk bijvoorbeeld het teken "<" intypen en dan krijg je meteen suggesties wat je kunt doen. Dit is handig want zo leer je automatisch heel veel mogelijkheden binnen HTML.

Succes