|
|
|
| |||||
| Startpagina >> Tutorials | ||||||||
|
Tutorials en artikels: Opmaak in HTML
Je leest momenteel tutorial/artikel: Opmaak in HTML. 
Opmaak in HTMLVroeger werd de opmaak van een document meestal volledig in HTML-code beschreven. Vandaag wordt meer en meer gebruik gemaakt van CSS (Cascading Style Sheets). Ze worden gebruikt om elke tag met een bepaalde opmaak te definiëren.Verder worden ook uitlijning en lijsten in dit hoofdstuk behandeld. We vertrekken best weer van een voorbeeld. Pas de reeds gemaakte index.htm aan op volgende manier. Als alles goed gegaan is, zou dit het resultaat moeten zijn. Ok, ik veronderstel dat er veel uitleg te geven is. Laten we de code analyseren. Vooreerst zijn er een aantal standaardtags bijgekomen voor standaardopmaak. Een overzicht
De tags <style>Tussen deze tags komt de styldefinitie die van toepassing is op het gehele document. We hebben hier als voorbeeld de tags <h1> uitgewerkt.Alle tekst tussen <h1> tags zullen een blauw kleurtje krijgen, onderlijnd en vet zijn en lettertype Verdana van lettergrootte 18 hebben. je zou dezelfde definitie aan eender welke opmaaktag kunnen toekennen. Welke eigenschappen kunnen we toekennen aan een tag gelijkwaardig aan <h1>?
Style als attribuutTot nu toe hebben we style als aparte tag binnen de head behandeld. We kunnen echter style ook gebruiken als attribuut bij de meeste opmaak tags. Ook op tabellen kan CSS worden toegepast (zie later).Voor de <h1> tag uit onze header zou de code er dan zo uitzien: <h1 style="color: blue; font-family: verdana; text-decoration: undeline; font-weight: bold; font-size: 18pt;">Hier komt de hoofdtitel</h1> Werken met ClassesTussen de <style> tags valt het volgende stukje code op: b.belangrijk{color: red}We hebben hier een speciaal kenmerk aan de <b> tag toegevoegd. Namelijk dat dat de tekst tussen die tags niet alleen vet, maar ook rood wordt. Merk dat in het document niet alle <b> tags een rood kleurtje krijgen. Enkel de tekst tussen de tags van de vorm <b class="belangrijk"> krijgen de rode kleur. Het spreekt uiteraard voor zichzelf dat hiermee zeker nog niet alles gezegd is over CSS. Probeer zelf wat te "spelen" met datgene je al weet, zodat je het principe beet krijgt. Voor een zeer volledig overzicht van alle mogelijkheden van CSS kijk je het best op volgende site: http://www.w3schools.com/css/default.asp Werken met lijstenLijsten zijn een middel om op een overzichtelijke manier opsommingen weer te geven. We onderschijden twee soorten lijsten. De geordende lijsten (binnen de tags <ol>) en de ongeordende lijsten (binnen de tags <ul>).Geordende lijsten geven de opsomming weer in de vorm van oplopende cijfers, ongeordende lijsten geven de opsomming weer door middel van opsommingstekens (in Internet explorer zijn dit bolletjes). Elk onderdeel van een opsomming komt tussen <li> tags te staan. Voorbeelden
SamenvattingCSS is de taal binnen HTML die gebruikt wordt voor de meeste opmaaktalen. CSS eigenschappen kunnen vooraf toegekend worden door middel van de aparte <style> tags binnen de <head> tags. Ze kunnen ook "ter plaatse" toegepast worden wanneer style als attribuut gebruikt wordt binnen opmaaktags zoals <h1> of <b> .Er begint stilaan vorm te komen in onze pagina, toch kan er nog heel wat aan verbeteren. Zo zijn er nog geen prentjes of klikbare links te bespeuren. Om te weten te komen hoe je deze moet plaatsen, ga je naar het volgende hoofdstuk. Ga naar "Links, prentjes en geluid toevoegen" >> |
| Advertenties |
Op dit werk is een Creative Commons Licentie van toepassing.
webtoolsnation.be | funnynation.be | messengernation.be |