Tabellen, graag vervangen voor....

[andries]

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.

[admin]

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)

[admin]

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)

[admin]

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]

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]

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]

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]

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

[DiWolff]

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

[DiWolff]

Bedoel je dat je de code (voorbeeldcode) van een menu wilt hebben???