login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Duidelijke uitleg html en css.

Offline Cindym - 08/12/2015 08:11
Avatar van CindymNieuw lid Hallo iedereen.
Kan iemand mij heel kort uitleggen wat in css en wat er in html moet? Ik gooi alles door elkaar en zie de bomen door het bos niet. Ik zoek eventueel ook bijles maar vind die nergens.
Ik woon in Maldegem.
Groetjes.

4 antwoorden

Gesponsorde links
Offline Thomas - 08/12/2015 13:15 (laatste wijziging 08/12/2015 13:21)
Avatar van Thomas Moderator Beste Cindy,

Heel kort dan .

Allereerst wat definities

HTML staat voor HyperText Markup Language, oftewel, dit is een opmaaktaal voor (hyper)tekst.

CSS staat voor Cascading Style Sheets, hiermee geef je meer (of een specifiek) uiterlijk aan de opmaak.

Met HTML geef je bepaalde "gebieden" in je tekst een bepaalde betekenis, bijvoorbeeld een bepaalde passage omvat een paragraaf of een stuk tekst daarbinnen bevat een hyperlink. Deze afbakeningen regel je door middel van HTML tags.

Een HTML tag is niets meer dan een tekstueel label omvat door, euh, ik geloof dat je dat < punthaken > noemt. Doorgaans hebben HTML tags een openings- en een sluitingscomponent. Een sluitings-tag ziet er hetzelfde uit als een openings-tag met als enig verschil dat deze voorafgegaan wordt door een / (een "forward slash").

Een paragraaf geef je bijvoorbeeld aan met de code "p" omvat door de eerder genoemde punthaken:
  1. <p>Dit is een paragraaf.</p>


Een (openings-)tag kun je ook nog voorzien van (tag-specifieke) attributen. Dit zijn paren die bestaan uit een naam en een waarde (naam="waarde"), bijvoorbeeld in een hyperlink geeft het "href"-attribuut aan naar welk webadres een hyperlink moet wijzen:
  1. <a href="http://www.nu.nl/">nu.nl</a>


Met HTML geef je ook structuur aan de opbouw van een pagina door middel van tabellen (table en bijbehorende tags) of (wellicht beter) divs (div tags). Hiermee kun je een pagina-indeling of layout creëren zoals ook op deze site gebeurt. Je deelt hierbij je pagina op in functionele stukken: kop, menubalk, zijmenu's, hoofd inhoud van de pagina, voettekst.

CSS bepaalt vervolgens hoe deze elementen er allemaal uitzien. In het geval van je paragraaf heb je bijvoorbeeld de volgende aspecten: letttertype en -grootte, tekstkleur, achtergrondkleur, marge, witruimte aan de binnenrand van de paragraaf (padding), de kleur en dikte van een mogelijke rand zelf et cetera.

Ik denk dat je het beste de volgende vergelijking kunt gebruiken: stel je hebt een tuin met hierin planten, bloempotten, struiken, een schutting et cetera. Je kunt een omschrijving geven van wat er allemaal in die tuin aanwezig is (dit is je HTML) zonder te beschrijven hoe al deze dingen er allemaal uitzien (dit doet je CSS).

Ik denk ook dat oefening, het bekijken van voorbeelden (heb je bijvoorbeeld de tutorials al bekeken?) en simpelweg kijken want anderen doen je een eind op weg kunnen helpen.
Offline Cindym - 08/12/2015 22:31
Avatar van Cindym Nieuw lid Heel erg bedankt Thomas. De uitleg met de tuin helpt mij al een beetje verder. Ik oefen heel erg veel. Dus nog meer oefenen dus. Van nul begonnen en in 10 lessen een website moeten kunnen maken vind ik een beetje van het goede. Ken je soms geen easy gemaakte sites die ik kan bekijken (in html)? Of goede sites met tutorials?

Heel erg bedankt.

Groetjes Cindy.
Offline Thomas - 09/12/2015 15:36 (laatste wijziging 09/12/2015 15:41)
Avatar van Thomas Moderator HTML en CSS aanleren door complete/complexe designs te bekijken lijkt mij toch een beetje een "top down" aanpak, terwijl een "bottom up" aanpak mij toch geschikter lijkt. Met "bottom up" bedoel ik: leer eerst wat de individuele (HTML) tags betekenen, doen en hoe je ze kunt gebruiken. Leer vervolgens welke CSS attributen er allemaal zijn en (daarna) hoe je deze met HTML kunt combineren.

Neemt trouwens niet weg dat je gewoon door kunt gaan met het bovenstaande, soms kun je hier leuke CSS/HTML truuks uithalen die je zelf kunt gebruiken die je ook verder helpen in het begrip, vooral blijven doen dus. Maar voor het aanleren van HTML/CSS zelf is dat wellicht minder geschikt .

Het "probleem" van direct complete designs bestuderen is dat hier ook geldt dat het geheel meer is dan de som der delen.

Zoals ik al aangaf: onze site heeft tutorials over uiteenlopende onderwerpen, waaronder HTML en CSS. Deze zijn mogelijk ondertussen wel een beetje gedateerd.

Daarnaast heeft deze site ook een onderdeel genaamd overzicht. Hierin is ook het een en ander -zij het mogelijk wat gedateerd- kunnen terugvinden.

Je zou ook op het forum kunnen zoeken naar specifieke HTML/CSS gerelateerde onderwerpen. Dit zou in het algemeen ook een goede leer-strategie kunnen zijn: kies een onderwerp binnen HTML of CSS wat je (huidige) interesse heeft en probeer daar alles over uit te vinden (ook door vooral te doen). Een bijkomende voordeel is is dat je maar met een relatief klein deel van de materie bezig bent en daarmee veel minder snel "de bomen door het bos niet meer ziet" maar ook dat je veel gerichter kunt zoeken naar informatie. Kijk ook hoe andere mensen de "ontwerp problemen" aanpakken. Als je met een design issue zit is de kans groot dat hier tientallen/honderden/duizenden anderen ook al tegenaam gelopen zijn en tevens dit probleem al (voor jou) opgelost hebben!

Dan zijn er nog een heleboel externe sites. Eentje waar ik af en toe nog wel eens wat opsnor is:
http://htmlhelp.com/reference/html40/ (voor HTML)
Deze site is dan wel verouderd maar is wel een redelijk compleet naslagwerk, bekijk de alfabetische lijst maar eens.

En dezelfde site voor CSS: http://htmlhelp.com/reference/css/
In het onderdeel "CSS properties" staan een heleboel basis-eigenschappen gegroepeerd naar onderwerp. Ondertussen is de functionaliteit verder uitgebreid met CSS versie 3 maar dat is toch een beetje "stap 2".

Dan is daar nog de gouwe ouwe W3Schools. Hier staat ook een ton aan informatie met heel veel voorbeelden.

En tot slot een site waar HTML/CSS design ongeveer tot kunst verheven is: CSS Zen Garden.

Je kunt natuurlijk ook op elke willekeurige site waarvan jij benieuwd bent hoe deze is opgebouwd op Ctrl-U drukken of rechtermuisknop > View Source doen he. Al weet ik niet of dit een goed idee is op deze site, al is de HTML/CSS van dit forum recent nog een beetje opgekuisd .

Maar tis dus vooral een kwestie van oefenen, oefenen, oefenen. Leer de basis, de theorie is alles beschouwend niet heel erg uitgebreid en ga aan de slag want daar zit hem de kneep: hoe combineer je dit alles tot iets dat prettig werkt en er ook nog eens mooi uitziet.
Offline Cindym - 10/12/2015 22:58
Avatar van Cindym Nieuw lid Amai heel erg bedankt W3Schools heb ik bij mijn favorieten staan.
Ik zal het zo doen zoals je zegt, eerst html en dan css.
Op het forum bekijk ik ook veel en haal er veel uit, maar gooi de 2 nog door elkaar.
Dus eerst apart leren.
In januari examen en wil er heel erg graag door zijn.


Vele groetjes Cindy.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.174s