Tabellen, graag vervangen voor....

Heb je een vraag over (X)HTML of CSS stel die dan hier!
andries
Moderator
Berichten: 2301
Lid geworden op: 09 mei 2008, 16:17
Contacteer:

Re: Tabellen, graag vervangen voor....

Bericht door andries » 26 jul 2010, 21:49

Op zich kan dat met tabellen nog wel, maar het word gewoon erg weinig gebruikt, en ziet er erg onprofessioneel uit (qua code, want de normale gebruiker ziet zoiets niet).

Als ik jou was, zou ik me eens verdiepen in het gebruik van xhtml in combinatie met css. Dan maak je in de html divs aan, die je met css op de goede plaats toont, ook kun je met css alle opmaak van je site doen.
zoals background-images, text kleuren, text groottes, borders, etc.

Ik hoop dat ik je hiermee geholpen hebt, als je vragen over het gebruik van xhtml in combinatie met css hebt kun je die altijd hier stellen.

Gebruikersavatar
admin
Oprichter
Berichten: 3310
Lid geworden op: 16 apr 2008, 13:47
Contacteer:

Re: Tabellen, graag vervangen voor....

Bericht door admin » 30 jul 2010, 18:28

Andries, is momenteel op vakantie, dus ik ga je even verder helpen.
Met het volgende code, verwijs je naar het css document:

Code: Selecteer alles

<link href="bestandsnaam.css" rel="stylesheet" type="text/css" />
Plaats dit code tussen de </tittle> en de </head> tag.

Als je dat hebt gedaan kunnen we verder met de opbouw van het CSS document. Laat het even weten als je zover bent.


Joep (admin)

Gebruikersavatar
admin
Oprichter
Berichten: 3310
Lid geworden op: 16 apr 2008, 13:47
Contacteer:

Re: Tabellen, graag vervangen voor....

Bericht door admin » 31 jul 2010, 22:52

Oké, mooi zo!
Maak nu in kladblok of een andere HTML-editor een nieuw bestand aan met de naam:
'stylesheet.css' dit bestand moet je bij je andere HTML bestanden neer zetten.
Om nu de tekst een klein beetje vorm te geven, moet je in het document: 'stylesheet.css'
Het volgende gaan neerzetten:

Code: Selecteer alles

body { font-family: Verdana; background-color: green }
h2 { color: black; font-style: italic }
p { text-decoration: underline }
Nu nog wat uitleg over het code.
Het eerste gedeelte van de tekst in het html bestand moet je tussen de <h2></h2> tags zetten. Vervolgens zullen ze worden weergegeven zoals dat in de tweede regel van de stylesheet staat.
De achtergrond, dat is de eerste regel, zou: 'groen' zijn, in het Engels natuurlijk: 'Green'.
Het lettertype zou: 'Verdana' zijn.

De laatste regel zou ervoor zorgen dat de tekst onderstreept wordt.

Bekijk is goed het CSS code, en je zult zien dat het eigenlijk best meevalt. Probeer het is uit, en laat het resultaat vooral is zien. Speel ook bijv. is met de kleuren bijvoorbeeld: red, orange of blue.


Joep (admin)

Gebruikersavatar
admin
Oprichter
Berichten: 3310
Lid geworden op: 16 apr 2008, 13:47
Contacteer:

Re: Tabellen, graag vervangen voor....

Bericht door admin » 02 aug 2010, 16:30

Oké, dan kunnen we nu nog een stapje verder!
Maar eerst gaan we nog even spelen, met het bestand dat we nu hebben.

Want je kan natuurlijk niet alleen de kleur aanpassen, maar ook het lettertypen zoals ik al had gezegd.
Hieronder leg ik dus even de verschillende onderdelen uit, zodat je nog wat verder kan komen met het CSS bestand. Het voordeel hiervan is, dat je het nu echt helemaal aan je eigen stijl kan aanpassen.

Goed daar gaan we:
Met de

Code: Selecteer alles

font-family
kan je het lettertypen aanpassen, je kan er ook meerdere opgeven. Het voordeel hiervan is, dat je er zo voor zorgt dat je website altijd te lezen is voor iedereen. Ook al heeft iemand een bepaald lettertypen niet.
Je kan kiezen uit:
serif
sans-serif
cursive
fantasy
monospace

Code: Selecteer alles

p { font-family: serif, fantasy, 'Franklin Gothic Book', sans-serif }
Nu de

Code: Selecteer alles

font-style
hiermee kan je aangeven, hoe je het lettertypen graag wil. Bijv. samengedrukt, dan moet je: 'italic' nemen. Je kan ook weer kiezen uit verschillende mogelijkheden:
normal (gewoon normaal)
italic
oblique

Een voorbeeld:

Code: Selecteer alles

h2 { font-style: italic }
alles dat je nu tussen de

Code: Selecteer alles

<h2></h2>
tags zet, is nu schuingedrukte.

Natuurlijk kan je in het HTML code aangeven hoe groot de tekst is, door bijv. de:

Code: Selecteer alles

<h2></h2>
tag. Maar nu kan het natuurlijk best handig zijn, om gewoon precies aan te geven hoe groot het moet zijn.
Dat kan op deze manier:

Code: Selecteer alles

h2 { font-size: 20pt }
maar je kan het ook bijv. opgeven in: pixels, dan krijg je dit:

Code: Selecteer alles

h1 { font-size: 20px }
Met CSS, kan je dus veel beter de tekst en de kleuren maken.
Wil je een afbeelding als achtergrond hebben, het voordeel hiervan is dat je de perfecte kleur kan maken. Zet dan dit, in je CSS bestand:

Code: Selecteer alles

p { background-image: url(naam-afbeelding.jpg); }
Ik hoor het wel weer.


Joep (admin)

andries
Moderator
Berichten: 2301
Lid geworden op: 09 mei 2008, 16:17
Contacteer:

Re: Tabellen, graag vervangen voor....

Bericht door andries » 03 aug 2010, 20:17

Even op internet bij het park, ik zie dat de admin je verder heeft geholpen.
Met html in combinatie met css kun je heel veel dingen, je moet gewoon vooral uitproberen en bij andere sites kijken hoe ze het daar doen.

m@tje
Berichten: 18
Lid geworden op: 04 aug 2010, 00:22

Re: Tabellen, graag vervangen voor....

Bericht door m@tje » 04 aug 2010, 12:54

Hallo allemaal Ik ben nieuw op het forum hier vandaar deze reactie op een ouder onderwerp :)

Is het niet mogelijk om tutorials te plaatsen voor beginners ( zoals ik )

Wat hier boven allemaal beschreven staat is erg handig als hulp en lesmateriaal

vriendelijke groet Martien

andries
Moderator
Berichten: 2301
Lid geworden op: 09 mei 2008, 16:17
Contacteer:

Re: Tabellen, graag vervangen voor....

Bericht door andries » 04 aug 2010, 17:32

Er zijn wel plannen om tutorials te schrijven, wanneer deze precies verschijnen weet ik nog niet.
Zit momenteel namelijk in Duitsland op vakantie, en heb er nu dus geen tijd voor.

m@tje
Berichten: 18
Lid geworden op: 04 aug 2010, 00:22

Re: Tabellen, graag vervangen voor....

Bericht door m@tje » 04 aug 2010, 17:48

Hallo , dat zou mooi zijn ! ik wacht af , veel plezier daar in Duitsland

Gebruikersavatar
DiWolff
Berichten: 771
Lid geworden op: 31 mei 2010, 15:16
Contacteer:

Re: Tabellen, graag vervangen voor....

Bericht door DiWolff » 04 aug 2010, 18:43

Misschien kan ik er ook wel aan werken, maar aangezien ik nu ook in Duitsland zit heb ik er ook geen tijd voor;)
Met vriendelijke groet,
Dick Wolff

-----
http://www.dickwolff.nl
http://www.aquatrad.com

Vanaf nu online!
wwih.nl - Welke week is het?
Meer informatie? Klik hier!
Huidige versie: 1.2

Mij volgen omtrend mijn DIY-projecten?
Klik dan hier en lees mee!!

Gebruikersavatar
DiWolff
Berichten: 771
Lid geworden op: 31 mei 2010, 15:16
Contacteer:

Re: Tabellen, graag vervangen voor....

Bericht door DiWolff » 05 aug 2010, 11:50

Bedoel je dat je de code (voorbeeldcode) van een menu wilt hebben??? ;)
Met vriendelijke groet,
Dick Wolff

-----
http://www.dickwolff.nl
http://www.aquatrad.com

Vanaf nu online!
wwih.nl - Welke week is het?
Meer informatie? Klik hier!
Huidige versie: 1.2

Mij volgen omtrend mijn DIY-projecten?
Klik dan hier en lees mee!!

Plaats reactie