CSS: Inleiding tot CSS
|
|
|
- Bernard Visser
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 1. Specificaties 2. Basisbegrippen 3. Relaties tussen elementen 4. Overerving 5. DIV en SPAN-elementen Specificaties CSS: Inleiding tot CSS CSS heeft al een behoorlijke evolutie doorgemaakt:? CSS level 3: onder ontwikkeling: bevat alles van CSS 2.1 met daarbij uitbreidingen met nieuwe selectors, opvallende randen en achtergronden, vertikale tekst, gebruikersinteractie, spraak en nog veel meer.? CSS level 2 revision 1: bevat alles van CSS 1 met daarbij uitbreidingen voor absolute positionering, automatische nummering, pagina-eindes,...? CSS level 1: bevat mogelijkheden voor lettertypes, kleuren, marges,... die bijna elke CSS-pagina nodig heeft. Geschiedenis van CSS bij het W3C. De huidige standaardversie voor CSS is CSS 2.1, wij behandelen deze dan ook verder in de cursus. Basisbegrippen Cascading Style Sheets (CSS) is een manier om stijl (lettertypes, kleuren, witruimtes,...) aan webdocumenten toe te voegen. Om deze cursus goed te kunnen volgen is het nodig eerst de cursus HTML onder de knie te hebben. CSS vomen in de eeste plaats een manier om inhoud en opmaak van een webdocument te scheiden. Het is de bedoeling de CSS-opmaak van de elementen op een webpagina op een centrale plaats aan te geven, en de opmaakeigenschappen dan toe te passen op de aanwezige HTML-elementen. CSS in HTML inbedden CSS kan als volgt gebruikt worden op een webpagina:? inline stijldefinitie: In een HTML-tag neem je het attribuut style op met daarbinnen een stijdeclaratie. ICT CSS basiscursus 1
2 Een dergelijke stijl geldt enkel voor het element waarbinnen deze stijldefinitie is opgenomen. style="stijldeclaratie"? stijlblok op de huidige webpagina: Nu kan je de gebruikte stijlen op de huidige webpagina centraal in een stijlblok beheren, stijlen die je hier definiëert kunnen meerdere keren gebruikt worden. Een stijlblok plaats je in de hoofding van de webpagina.? <STYLE type="text/css">? stijlregel(s) </STYLE>? extern stijblad: Stijlen kan je ook vastleggen in een extern bestand met extensie.css. Zo kan je stijlen vastleggen die je gebruikt over een volledige website. Op een pagina die deze stijlen gebruikt plaatst je dan in de hoofding een regel code die de browser duidelijk maakt dat het stijlbestand moet worden geladen:? <LINK HREF="stijlblad.css" REL="stylesheet" TYPE="text/css"> Stijldeclaratie Een stijldeclaratie bestaat uit de correcte CSS-naam van een eigenschap gevolgd door een dubbele-punt en de waarde voor deze eigenschap. eigenschap-waarde paren worden gescheiden door een puntkomma. eigenschap: waarde;... Stijlregels In een stijlblok of in een extern stijlbestand worden eigenschappen aangegeven met stijlregels. In een stijlregel geef je eerst een selector en daarna tussen accolades een stijldeclaratie op. selector {stijldeclaratie Selectoren komen nog uitgebreid aan bod, deze kunnen verwijzen naar een of meerder tags, naar attributen, klassen of id's. Stijlblokken kunnen en commentaar ( /*... */ ) bevatten. Werken met inline stijlen Je kan met het HTML-attribuut style in zowat elke tag gebruik maken van CSS: <h1 style="color:red">gebruik van inline stijlen</h1> <p style="color:green"> Inline stijlen zijn <b>een eerste</b> manier om <b>css</b> te gebruiken. </p> ICT CSS basiscursus 2
3 Werken met een stijlblok Een stijlblok gebruik je om stijldeclaraties vast te leggen voor de ganse webpagina. Een stijlblok plaats je best in de hoofding van de webpagina. h1 { color:red p { color:green <h1>gebruik van een stijlblok</h1> <p> Inline stijlen zijn <b>een eerste</b> manier om <b>css</b> te gebruiken. </p> Werken met een extern stijlblad inl3.css h1 { color:red p { color:green inl3.html <LINK HREF="inl3.css" REL="stylesheet" TYPE="text/css"> <h1>gebruik van extern stijlblad</h1> <p>inline stijlen zijn <b>een eerste</b> manier om <b>css</b> te gebruiken.</p> Relaties tussen elementen Om een goed inzicht te verkrijgen in CSS is het heel belangrijk in te zien hoe elementen op een webdocumenten zich tot elkaar kunnen verhouden. Het is duidelijkst dit te bekijken aan de hand van een voorbeeld: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> ICT CSS basiscursus 3
4 <TITLE>Mijn webpagina</title> <H1>Mijn webpagina</h1> <P>Welkom op mijn webpagina! Mijn favoriete bands zijn: <UL> <LI>Ozark Henry <LI>Novastar <LI>Admiral Freebee </UL> Boomstructuur: Uit de boomstructuur kan je afleiden dat bepaalde elementen omvat worden door andere elementen, dat bepaalde elementen zich op hetzelfde niveau bevinden als andere elementen en dat bepaalde elementen omvat worden door andere elementen. We kunnen over bovenstaande pagina het volgende zeggen:? De LI-elementen zijn children van het UL-elementen? Het UL-element is parent van de LI-elementen? Het body-element is een ancestor van het H1-element, het P-element, het ULelement en de LI-elementen? P, H1, UL en LI en BODY zijn descendants van het HTML-element.? De LI-elementen zijn sibling-elementen.? P is een following-siblling van H1?... Uit dit voorbeeld komen we tot volgende afspraken: relatie beschrijving parent (ouder) Bovenliggende element in de boomstructuur: elk element heeft exact één parent, behalve het root-object dat er geen heeft. child (kind) A is een child van B als en alleen als B de parent is van A ICT CSS basiscursus 4
5 descendant (afstammeling) A is een descendant van B als B de parent is van A of A is child van een element C dat een descendant is van B. ancestor (voorouder) A is een ancestor van B als B en alleen als B een descendant is van A. sibling (gelijke) A is een sibling van B als en alleen als A en B hetzelfde parent-element hebben. Preceding sibling: komt voor een element uit de boomstructuur Following sibling: komt na een element uit de boomstructuur preceding element (voorafgaand) following element (voorafgaand) A is preceding B als A een ancestor is van B of als A een preceding sibling is van B. A is following B als B is preceding A. Overerving Je weet dat je op drie niveaus stijlen kan definiëren: in een extern stijlblad, in een stijlblok en in het style-attribuut van een element. Je kan op elk van die niveaus een stijl kunnen definiëren voor hetzelfde element (h1, h2, p,...). De concrete opmaak wordt dan als volgt opgebouwd: 1. Opmaak door de browser gedefiniëd 2. Opmaak in stijlregels (in stijlblokken of extern stijlbestanden), naargelang de invoegpositie in het document, de door de browser vooropgestelde opmaak wordt overgenomen, de opmaak in eerdere stijlregels wordt steeds verder overgenomen. 3. Opmaak gedefiniëerd in het style-attribuut Het overnemen van opmaakeigenschappen uit vorige stijlregels wordt overerving genoemd, vandaar de term Cascading Style Sheets. Vaak worden ook eigenschappen overgeërfd van ancestor-elementen, daar dit niet voor alle eigenschappen het geval is kan je dit specifiek aanduiden met het sleutelwoord inherit. DIV en SPAN-elementen ICT CSS basiscursus 5
6 Je kan style sheets gebruiken door stijlen aan HTML-tags te koppelen. Daar je niet steeds gebruik zal willen maken van hoofdingen, alinea's, font-tags bestaan er twee tags die enkel tot doel hebben stijldefinities te gebruiken. Het blok-element hiervoor is DIV Het inline-element is SPAN Deze tags zullen in het verdere verloop van de cursus veelvuldig gebruikt worden. Het verschil tussen blok- en inline-elementen komt ook nog uitvoerig aan de orde. ICT CSS basiscursus 6
7 ? ELEMENT-selectors 1. Type selectors 2. Descendant selectors 3. Child selectors 4. Adjacent sibling selector 5. Universele selector 6. Overzicht element-selectors? ATTRIBUUT-selectors? Class selectors? Id selectors? Pseudo-element selectors? Pseudo-class selectors Type selectors CSS 2.1: selectors Met een type-selector kan je ervoor zorgen dat elk aangegeven element dat voorkomt in een document wordt opgemaakt. Enkelvoudige type selectors h1 { color:red p { color:green <h1>type-selectors</h1> <p>werken met type selectors</p> <h1>nog een hoofding niveau 1</h1> <p>nog een alinea</p> Groeperen van type selectors Je kan stijldeclaraties ook toepassen voor meerdere elementen tegelijk door selectors op te geven gescheiden door een komma. ICT CSS basiscursus 7
8 H1, H2, H3 { color: red; background-color: white; font-family: sans-serif; H1 { font-size: 30px; H2 { font-size: 16px; H3 { font-size: 12px; margin-left:50px <h1>type-selectors</h1> <h2>deel1</h2> <p>werken met type selectors</p> <h2>deel2</h2> <h1>nog een hoofding niveau 1</h1> <h2>deel1</h2> <p>nog een alinea</p> <h2>deel2</h2> <h3>deel 2.1</h3> <h3>deel 2.2</h3> Hier geven we eerst een algemene definitie voor H1, H2 en H3 waarna we deze drie elementen nog afzonderlijk verder aanvullen. Descendant selectors Bij een descendant selector wordt de stijldeclaratie enkel toegepast wanneer het element een descendant is van een of meerdere andere elementen. Dit doe je door de descendant te scheiden van de ancestor met behulp van een spatie. P I {color:red <h1>de <i>schuine tekst</i> is niet rood</h1> <p>deze <i>schuine tekst</i> is wel rood</p> Child selectors Met child selectors ga je de descendant selector vernauwen: enkel children worden opgemaakt, geen verderliggende descendants. ICT CSS basiscursus 8
9 P > I {color:red <h1>de <i>schuine tekst</i> is niet rood</h1> <p>deze <i>schuine tekst</i> is wel rood</p> <p><b>deze vette en <i>schuine tekst</i> is NIET rood</b></p> Child selectors worden niet ondersteund in IE6. Adjacent sibling selector Een adjacent sibling selector gebruik je om een element op te maken dat onmiddelijk een ander element op hetzelfde niveau (sibling) volgt. H1 + H2 {margin-top:-5mm <h1>hoofding 1</h1> <p>alinea <h2>hoofding 2 na alinea</h2> <h1>hoofding 1</h1> <h2>hoofding 2 na hoofding 1</h2> Een H2 die onmiddellijk na een H1 komt in de boomstructuur van de pagina zal 5mm minder bovenmarge hebben dan een gewone H2. Adjacent sibling selectors worden niet ondersteund in IE6. Universele selector De Universele selector kan je gebruiken wanneer je wenst te verwijzen naar alle elementen. De Universele selector wordt aangeduid met een asterisk (*). ICT CSS basiscursus 9
10 * {color:brown; <h1>hoofding 1</h1> <p>alinea <h2>hoofding 2</h2> De universele selector wordt veel gebruikt in combinatie met class- en id-selectoren (zie later). Overzicht element-selectors notatie beschrijving Element {stijldeclaratie Type-selector: maak alle aangegeven elementen op Element1, Element2,... {stijldeclaratie Groeperen van type-selectors: maak alle aangegeven elementen op Element1 Element2 {stijldeclaratie Descendant-selector: maak alle aangegeven element2 op als die een descendant zijn van Element1 Element1 > Element2 {stijldeclaratie Child-selector: maak alle aangegeven element2 op als die een child zijn van Element1 Element1 + Element2 {stijldeclaratie Adjacent sibling-selector: maak alle aangegeven element2 op als die een adjacent sibling (opeenvolgende gelijke) zijn van Element1 * {stijldeclaratie Universele selector: beïnvloedt alle elementen Attribuut-selectors ICT CSS basiscursus 10
11 Met de invoering van CSS 2 werd het mogelijk stijlen te gebruiken wanneer aan bepaalde voorwaarden voor de element-attributen is voldaan. IE6 ondersteunt geen enkele van deze mogelijkheden. notatie omschrijving [attr] {stijldeclaratie Het attribuut moet aanwezig zijn Element[attr] {stijldeclaratie Het attribuut moet aanwezig zijn in het aangegeven element [attr]=waarde {stijldeclaratie Het attribuut moet een specifieke waarde hebben Element[attr]=waarde {stijldeclaratie Het attribuut moet een specifieke waarde hebben in het aangegeven element Wanneer het attribuut een tekenreeks kan bevatten met door spaties gescheiden woorden (zoals alt en title), dan plaats je een tilde (~) voor het gelijkheidsteken. Class selectors Wanneer een element het attribuut class bevat kan je aan dit element een stijl koppelen door gebruik te maken van een class-selector. Kenmerkend in de stijlregel is een punt (.) voor de naam van de class. Classnamen ken je zelf toe en zijn in principe hoofdlettergevoelig. Bepaalde browsers trekken zich van dit laatste echter niks aan. notatie beschrijving *.classnaam {stijdeclaratie universele class selector: alle elementen met de aangegeven classnaam als waarde voor het attribuut class worden opgemaakt. ICT CSS basiscursus 11
![Het attribuut moet een specifieke waarde hebben Element[attr]=waarde {stijldeclaratie Het attribuut moet een specifieke waarde hebben in het aangegeven element Wanneer het attribuut een tekenreeks](/docs-images/48/9067775/images/page_11.jpg "kan bevatten met door spaties gescheiden woorden (zoals alt en title), dan plaats je een tilde (~) voor het gelijkheidsteken.")
12 Element.classnaam {stijdeclaratie universele class selector: alle aangegven elementen met de aangegeven classnaam als waarde voor het attribuut class worden opgemaakt..classnaam1.classnaam2 {stijdeclaratie Het element moet de classnaam1 en classnaam2 in het attribuut class staan hebben. Deze classnamen worden in het attribuut class gescheiden door een spatie Element.classnaam1.classnaam2 {stijdeclaratie Het aangegeven element moet de classnaam1 en classnaam2 in het attribuut class staan hebben. H1 {color:red H1.schuin {font-style:italic;.leuk { color:green; background-color:#ffff99;.klein {font-size:10pt;.wit.kader { color:white; border:solid 1px; background:red; <h1>hoofding 1</h1> <p>alinea met een <font class="leuk">leuk</font> woord <h1 class="schuin">schuine Hoofding 1 met een <font class="leuk">leuk</font> woord</h2> <h2 class="wit kader">hoofding 2 in een kader</h2> <h2 class="klein wit kader">kleine hoofding 2 in een kader</h2> Id selectors Wanneer een element het attribuut id bevat kan je aan dit element een stijl koppelen door gebruik te maken van een id-selector. Kenmerkend in de stijlregel is een spoorwegteken (#) voor de naam van de id. Idnamen ken je zelf toe en zijn in principe hoofdlettergevoelig. Bepaalde browsers trekken zich van dit laatste echter niks aan. ICT CSS basiscursus 12
13 Het grote onderscheid met het gebruik van het attribuut class is dat voor het attribuut id slechts 1 element op de pagina aanwezig mag zijn met een specifieke id-waarde! notatie beschrijving *#idwaarde Universele id-selector: om het even welk element de aangegeven idwaarde heeft wordt opgemaakt. Opgepast: het specifieke id mag slechts 1 keer voorkomen #idwaarde Universele id-selector: om het even welk element de aangegeven idwaarde heeft wordt opgemaakt. Opgepast: het specifieke id mag slechts 1 keer voorkomen Element#idwaarde Universele id-selector: het aangegven element dat de aangegeven idwaarde heeft wordt opgemaakt. Opgepast: het specifieke id mag slechts 1 keer voorkomen De id-selector heeft voorang op de class selector. H1 {color:red #hoofdstuk1 { background:yellow; p#test {font-size:14pt; p.klein {font-size:10pt; <h1 id="hoofdstuk1">hoofdstuk 1</h1> <p>alinea <h1>hoofdstuk2</h1> <p class="klein">kleine alinea <p id="test" class="klein">testalinea class klein Pseudo-element selectors ICT CSS basiscursus 13
14 Pseudo-element selectors staan je toe opmaak te definiëren voor bijvoorbeeld de eerste letter of de eerste regel van een bepaald element. Voor die eerste letter of regel bestaan geen specifiek elementen, maar je kan ze toch benaderen vanuit CSS, vandaar de naam pseudo-elementen. notatie beschrijving Element:first-line Maakt de eerste regel binnen een element op Element:firstletter Maakt de eerste letter binnen een element op Element:before Onmiddellijk voor een element bepaalde inhoud invoegen (niet ondersteund in IE6) Element:after Onmiddellijk na een element bepaalde inhoud invoegen (niet ondersteund in IE6) p { width:150px; p:first-line {font-weight:bold; p:first-letter {font-size:24pt p.extra:first-letter {font-size:36pt;color:red h2:before { content:"(testhoofding:)" h2:after { content:"(einde testhoofding)" <h1 id="hoofdstuk1">hoofding 1</h1> <p>alinea met een beetje tekst om pseudo-elementen te demonstreren <p class="extra">nog een alinea met een beetje tekst om pseudo-elementen te demonstreren <h2>een testhoofding</h2> ICT CSS basiscursus 14
15 Pseudo-class selectors Een pseudo-class selector maakt het mogelijk stijlen te koppelen aan een element, maar niet op basis van een naam of attribuutwaarde. Je kan met behulp van pseudo-class selectors stijlen koppelen aan elementen naargelang acties die de gebruiker onderneemt. notatie beschrijving A:link Opmaak van een niet bezochte hyperlink A:visited Opmaak van een bezochte hyperlink A:active Opmaak van een actieve hyperlink Element:hover Opmaak van een element wanneer de gebruiker over het element beweegt met de muisaanwijzer. IE6 ondersteunt dit enkel voor A-elementen Element:focus Opmaak van een element wanneer het element het actieve element wordt. IE6 ondersteunt dit niet Element:first-child Opmaak van het eerste child van een element. IE6 ondersteunt dit niet :lang(taalcode) Element:lang(taalcode) Opmaak volgens een speciefieke taalcode. Wordt gebruikt in combinatie met een attribuut-selector voor het attribuut lang. IE6 ondersteunt dit niet a:link { color:red; a:visited { color:brown; a:active { color:black; ICT CSS basiscursus 15
16 a:hover { background:yellow; tewt-decoration:none; a.extern:hover { background:black; color:white; <h1 id="hoofdstuk1">pseudo-klassen</h1> <p><a href="../index.asp" target="_blank">cursus CSS</a> <p><a href="../../index.asp" target="_blank">cursusweb</a> <p><a href=" class="extern" target="_blank">w3c</a> Meer tutorials: Gra teller leer ook: html xhtml css asp java javascript Naar boven Cursusweb Zoeken HTML4.1 CSS 2.1 XHTML 1.0 JAVASCRIPT ASP JAVA Inleiding Structuur Tekst Opmaak Lijsten Tabellen Links Objecten Frames Formulieren Inleiding Positionering Kleuren en afmetingen Overzicht eigenschappen Inleiding Verschillen met HTML4 Basisbegrippen Variabelen William Schokkelé - Cursusweb ICT CSS basiscursus 16
17 Operatoren Objectgeoriënteerd Overerving GUI Swing GUI Swing - toepassingen Inleiding Basisbegrippen Sructuren ICT CSS basiscursus 17
18 CSS 3. kan worden gebruikt om binnen een stijlblok of een extern stijlblad stijlen op te nemen uit een ander extern stijlblad. Deze regel wordt niet ondersteund door oudere browsers en wordt dus ook vaak gebruikt wanneer stijlbladen door de oudere browsers niet mogen opgenomen worden. notatie url("uri") Neem het stijlbestand op waarnaar wordt verwezen door "uri" Neem het stijlbestand op waarnaar wordt verwezen door url("uri") media Neem het stijlbestand op waarnaar wordt verwezen door "uri" voor de media aangegeven in 'media'. Niet ondersteund door "uri" media Neem het stijlbestand op waarnaar wordt verwezen door "uri" voor de media aangegeven in 'media'. Niet ondersteund door IE6. De aanduiding media wil zeggen dat je hier een lijst kan opnemen van media-types die de stijl moeten gebruiken:? all: voor weergave door alle apparaten? screen: voor weergave op een computerscherm? print: voor weergave in pagina-opmaak bij het afdrukken of als print-preview? aural: voor weergave door een spraaksynthesizer? braille: voor weergave door een brailleleesapparaat) ICT CSS basiscursus 18
19 ? embossed: voor weergave in pagina-opmaak door een brailleprinter? handheld: voor weergave door een apparaat met een klein beeldscherm? projection: voor weergave door een projectieapparaat? tty: voor weergave door een apparaat dat alleen tekst weergeeft in een vast karaktergrid? tv: voor weergave op een televisietoestel regels1.css h1 { color:red; font-size:10pt p { color:blue url("regels1.css") print; p { color:green <h1>gebruik van extern stijlblad</h1> <p>inline stijlen zijn <b>een eerste</b> manier om <b>css</b> maakt het mogelijk binnen een stijlblok of een exteren stijlbestand stijlregels op te bouwen specifiek voor een bepaalde media-types. notatie media {stijlregels Pas de stijlregels toe voor de aangegeven media De aanduiding media wil zeggen dat je hier een lijst kan opnemen van media-types die de stijl moeten gebruiken:? all: voor weergave door alle apparaten? screen: voor weergave op een computerscherm? print: voor weergave in pagina-opmaak bij het afdrukken of als print-preview? aural: voor weergave door een spraaksynthesizer? braille: voor weergave door een brailleleesapparaat) ICT CSS basiscursus 19
20 ? embossed: voor weergave in pagina-opmaak door een brailleprinter? handheld: voor weergave door een apparaat met een klein beeldscherm? projection: voor weergave door een projectieapparaat? tty: voor weergave door een apparaat dat alleen tekst weergeeft in een vast karaktergrid? tv: voor weergave op een print{ p { screen{ p { color:blue <h1>media</h1> <p>op het scherm ben ik blauw, bij een afdruk ben is een stijlregel die kan worden gebruikt voor de pagina-opmaak bij het afdrukken. Deze eigenschap wordt niet ondersteund in IE6. notatie {stijlregels Pas de stijlregels toe voor alle {stijlregels Pas de stijlregels toe op alle linkerpagina's, voor ons: even {stijlregels Pas de stijlregels toe op alle rechterpagina's, voor ons: oneven paginanummers ICT CSS basiscursus 20
21 @page:first {stijlregels Pas de stijlregels toe op de eerste pagina Voorlopig enkel ondersteund door { margin-left:5cm <h1>media</h1> <p>even testen met Meer tutorials: Gra teller leer ook: html xhtml css asp java javascript Naar boven Cursusweb Zoeken HTML4.1 CSS 2.1 XHTML 1.0 JAVASCRIPT ASP JAVA Inleiding Structuur Tekst Opmaak Lijsten Tabellen Links Objecten Frames Formulieren William Schokkelé - Cursusweb ICT CSS basiscursus 21
22 Inleiding Positionering Kleuren en afmetingen Overzicht eigenschappen Inleiding Verschillen met HTML4 Basisbegrippen Variabelen Operatoren Objectgeoriënteerd Overerving GUI Swing GUI Swing - toepassingen Inleiding Basisbegrippen Sructuren ICT CSS basiscursus 22
23 CSS 2.1: positionering van elementen 1. indeling van de elementen 2. De box indeling van de elementen De elementen die je op een webpagina kan plaatsen kan je onderverdelen in een aantal categorieën: categorie beschrijving voorbeelden Deze elementen worden vooragegaan en gevolgd door een overgang naar een nieuwe regel P, H1, H2, DIV, BLOCKQUOTE, PRE, TABLE, UL, OL, LI, BR, HR, FORM,... Kunnen op dezelfde regel staan als andere elementen B, I, U, FONT, SPAN, EM, BIG, A, IMG,... Blokelementen Inlineelementen Verborgenelementen Worden niet getoond in het documentvenster LINK, STYLE, SCRIPT, TITLE,... inline blokelement Wordt als element gebruikt als een inline element maar kan inhoudelijk gevuld worden als een blok-element - sinds CSS 2.1 BUTTON, INPUT, OBJECT, TEXTAREA, SELECT De box Elk element op een webpagina kan in feite worden voorgesteld als een doos met een bepaalde inhoud, we spreken van de box. ICT CSS basiscursus 23
24 De box bevat van buiten naar binnen volgende onderdelen: margin - border - padding - inhoud Voorbeeld: margin - border - padding met list-elementen zonder opsomteken <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <TITLE>Voorbeeld margin, padding en border</title> <STYLE type="text/css"> UL { background: yellow; margin: 5px 30px 12px 50px; padding: 3px 3px 3px 20px; LI { color: white; background: blue; margin: 12px 12px 12px 50px; padding: 12px 12px 12px 30px; list-style: none; /* geen opsomteken */ LI.metrand { padding: 0px 12px 0px 0px; border-style: dashed; border-width: medium; border-color: lime; </STYLE> ICT CSS basiscursus 24
25 <div style="width:300px; background:gray"> <UL> <LI>Eerste element <LI class="metrand">tweede element, iets langer om wrapping te demonstreren </UL> </div> Opmerkingen:? voor onder elkaar gepositioneerde blok-elementen schuiven de vertikale margins in elkaar.? voor inline elementen kan de width eigenschap niet worden ingesteld? Voor de browsers lager dan IE6 en NS4 worden width en height verkeerd geïmplementeerd en vormen deze de totale breedte en hoogte van de box in plaats van de breedte en hoogte van de inhoud.? blok-elementen worden standaard vertikaal onder elkaar geplaatst? inline elementen worden standaard naast elkaar gepositioneerd. Als de inlinebox niet op een regel past wordt die gesplitst in meerdere boxen op meerdere regels.? Aaneengesloten tekst die niet in een inline box wordt geplaatst door de auteur wordt in een anonieme box geplaatst Voorbeeld: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <TITLE>Voorbeeld margin, padding en border</title> <STYLE type="text/css"> p { margin-left:10px; background:#ffff99; width:300px p.naarrechts { margin-left:50px p.naarbeneden {margin-top:40px.roze { background:pink.groen {background:green </STYLE> <p>een alinea <p class="naarrechts">een tweede alinea - naarrechts <p class="naarbeneden">een derde alinea - naarbeneden <p class="naarrechts naarbeneden">een vierde alinea - naarrechts en naarbeneden <p class="naarbeneden">een vijfde alinea - naarbeneden <p><span class="roze">een stukje doorlopende tekst met een roze achtergrond</span><span class="groen">tekst op een groene achtergrond</span>ik zit in een anonieme inline-box. ICT CSS basiscursus 25
26 1. Kleuren 2. Afmetingen Kleuren CSS 2.1: kleuren en afmetingen Wil je op een webpagina gebruik maken van kleuren, dan heb je een aantal mogelijkheden: notatie beschrijving voorbeeld sleutelwoord Engelse naam voor het kleur (slechts een beperkt aantal bruikbaar) red, green, blue, black, white, purple, orange, yellow,... #rgb Aandeel rood - groen - blauw met drie hexaddecimale cijfers, voorafgegeaan door een spoorwegteken #fff (= wit) #f00 (= rood) #rrggbb Aandeel rood - groen - blauw met zes hexaddecimale cijfers, voorafgegeaan door een spoorwegteken #ffffff (= wit) #ff0000 (= rood) rgb(d,d,d) Aandeel rood - groen - blauw met drie decimale getallen van rgb(255,255,255) (= wit) rgb(255,0,0) (= rood) rgb(p%,p%,p%) Aandeel rood - groen - blauw met drie percentages. rgb(100%,100%,100%) (= wit) rgb(100%,0,0) (= rood) Afmetingen ICT CSS basiscursus 26
27 Op een webpagina moet je vaak afmetingen aan elementen toekennen, lettergroottes, kolombreedtes,... Dit doe je door een getalwaarde in te geven gevolgd door een eenheid. Volgende eenheden kunnen gebruikt worden: eenheid beschrijving em relatief ten opzichte van de font-size van het element (als em gebruikt wordt voor de eigenschap font-size: relatief ten opzichte van de font-size van het parent element) ex relatief ten opzichte van de x-hoogte van het element - de x hoogte is de hoogte van de letter x in dat lettertype px pixels, afhankelijk van het toestel in inch - 1 inch = 2.54 cm cm centimeters mm millimeters pt points - 1 point = 1/72 inch pc pica - 1 pica = 12 points % percentage ICT CSS basiscursus 27
28 CSS 2.1: overzicht eigenschappen 1. Overzicht CSS 2.1 eigenschappen 2. Kleur en achtergrond 3. Font: lettertype 4. Tekst 5. Gegenereerde inhoud, automatische nummering en lijsten 6. Marges 7. Padding 8. Rand 9. Afmeting 10. Regel 11. Indeling 12. Zwevende elementen 13. Positioneren 14. User interface 15. Nog te verwerken: CSS-tables Overzicht CSS eigenschappen Categorie Eigenschappen Kleur en achtergrond color background-color background-image background-repeat background-attachment background-position background Font font-style font-variant font-weight font-size font-family font Tekst text-indent text-align text-decoration letter-spacing word-spacing text-transform white-space Gegenereerde inhoud :before list-style-type ICT CSS basiscursus 28
29 automatische nummering lijsten :after content quotes counter-reset counter-increment list-style-image list-style-position list-style Margin margin-top margin-bottom margin-left margin-right margin Padding padding-top padding-bottom padding-left padding-right padding Rand border-top-width border-bottom-width border-left-width border-right-width border-width border-top-color border-bottom-color border-left-color border-right-color border-color border-top-style border-bottom-style border-left-style border-right-style border-style border-top border-bottom border-left border-right border Afmeting width height Regel line-height vertical-align Indeling display Zwevende elementen float clear Positioneren position left visibility overflow ICT CSS basiscursus 29
30 right top bottom clip z-index User interface cursor outline-width outline-style outline-color outline Geen W3C standaard: scrollbar-3dlight-color scrollbar-arrow-color scrollbar-base-color scrollbar-darkshadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color Kleur en achtergrond eigenschap beschrijving mogelijke waarden color Stelt de voorgrondkleur van de tekst van een element in. kleur inherit background-color Stelt de achtergrondkleur van een element in. kleur inherit transparant background-image Stelt de achtergrondfiguur van een element in. uri - vb. url("figuur.gif") inherit none background-repeat Stelt in hoe de achtergrondfiguur moet worden herhaald, standaard: repeat. repeat: herhalen repeat-x: enkel horizontaal repeat-y: enkel vertikaal no-repeat: niet herhalen inherit ICT CSS basiscursus 30
31 background-attachment Stelt in of de achtergrondfiguur meescrollt of niet, standaard: scroll. scroll: meeschuiven fixed: niet meeschuiven inherit background-position Positie van de achtergrondfiguur - vertikaal horizontaal standaard: 0% 0%. horizontal: afmeting left center right vertikaal: afmeting top center bottom 1 waarde = vertikaal, horizontaal = 50% background afgekorte manier om backgroundeigenschappen in te stellen voorbeeld: BODY { background-image: url("../../images/computer.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; margin-bottom:2000px; P { background: url("../../images/achter1.jpg") repeat; width:100px; H1 { background: url("../../images/achter3.gif") repeat-x; width:600px; height:200px; border:solid 1px; <h1>een hoofding met een achtergrondfiguur<br>is het niet mooi?</h1> <p>een alinea met een achtergrondfiguur ICT CSS basiscursus 31
32 Font eigenschap beschrijving mogelijke waarden font-family Stelt het lettertype in lettertype (eventueel een lijst gescheiden door komma's) font-style De stijl van de letters normal italic oblique inherit font-variant Eventueel klein kapitaal normal small-caps inherit font-weight Donkerheid van de letters normal (=400) bold bolder lighter inherit font-size Grootte van de letters absolute afmeting: xx-small x-small small medium large x-large xx-large relatieve afmeting: smaller larger afmeting inherit font Afgekorte manier om fonteigenschappen in te stellen voorbeeld: ICT CSS basiscursus 32
33 BODY { font-family:serif; font-size:14pt; font-weight:bold; P { font-family: Verdana,"Century Gothic"; font-size:10pt; font-variant:small-caps; H1 { font: italic small-caps bolder x-large Arial <h1>een hoofding </h1> <p>een alinea met wat tekst</p> Gewone doorlopende tekst Tekst eigenschap beschrijving mogelijke waarden text-indent Inspringen eerste regel van een blok tekst afmeting inherit text-align Uitlijning van de tekst left right center justify inherit text-decoration Decoratie toegevoegd aan de tekst, zoals een lijntje (sterk browserafhankelijk) none underline overline line-through blink inherit ICT CSS basiscursus 33
34 letter-spacing Ruimte tussen lettertekens normal afmeting inherit word-spacing Ruimte tussen woorden normal afmeting inherit text-transform Gebruik van hoofden kleine letters none capitalize (eerste letter) uppercase lowercase inherit white-space Afhandeling van witruimte binnen een element normal pre nowrap pre-wrap pre-line inherit Gegenereerde inhoud, automatische nummering en lijsten eigenschap beschrijving mogelijke waarden :before pseudo-element: plaatst inhoud voor een element p:before { content:"voor" :after pseudo-element: plaatst inhoud na een element p:after { content:"na" content stelt de gegenereerde inhoud vast, in samenwerking met de :before en :after pseudo-elementen p:after { content:"na" normal string uri counter attr(identifier) open-quote close-quote noopen-quote no-close-quote inherit ICT CSS basiscursus 34
35 quotes Stelt de haakjes in die je wenst te gebruiken string string... none inherit counter-reset Stelt de waarde van een (of meerdere) aangegeven tellers in op een bepaalde waarde (standaard 0) tellernaam waarde... none inherit counterincrement Stelt de ophoogwaarde voor een (of meerdere) tellers in (standaard 0) tellernaam waarde... none inherit list-style-type Stelt het type in voor lijstopsommingstekens voor elementen met de eigenschap display: list-item disc circle square decimal decimalleading-zero lower-roman upper-roman lower-greek lower-latin upper-latin armenian georgian none inherit Stelt een aangegeven figuur in als lijstopsommingstekens voor elementen met de eigenschap display: list-item uri none inherit list-styleimage list-styleposition Stelt de positie in van de opsommingstekens in een lijst, voor elementen met de eigenschap display: list-item Standaard: outside outside inside inherit list-style Verkorte notatie voor list-style: type position image inherit ICT CSS basiscursus 35
36 lijst-eigenschappen Werken met tellers Hier een voorbeeld voor het werken met counters, voorlopig enkel ondersteund door Opera. H1:before { content: "Hoofdstuk " counter(hteller,upper-roman) ": " P:before {content: counter(hteller, upper-roman) ". " counter(mijnteller) ". " P {counter-increment: mijnteller H1 { counter-increment:hteller; counter-reset: mijnteller; <h1>een hoofding </h1> <p>een alinea met wat tekst</p> <p>nog een alinea <h1>nog een hoofding </h1> <p>nog een alinea Gewone doorlopende tekst Werken met lijsten ol {list-style-type:lower-roman ol.figuur {list-style-image: url("../../images/plus.jpg") ICT CSS basiscursus 36
37 ol.compact {list-style-position:inside <div style="width:150px"> <ol> <li>eerste item <li>tweede item <li>derde item </ol> <ol class="figuur"> <li>eerste item met een beetje tekst <li>tweede item met een beetje tekst <li>derde item met een beetje tekst </ol> <ol class="compact figuur"> <li>eerste item met een beetje tekst <li>tweede item met een beetje tekst <li>derde item met een beetje tekst </ol> </div> Geavanceerd voorbeeld: werken met lijsten - uitklapmenu In volgende voorbeelden wordt gebruik gemaakt van Javascript in combinatie met CSS (DHTML). Maak je er voorlopig geen zorgen over, met deze voorbeelden wil ik je enkel het belang van CSS laten inzien om dynamische webpagina's te maken..hmenu { display:list-item; list-style-type:none; border:solid 1px; margin:0px; width:150px; background:#ffcc66; cursor:hand;.smenu {display:none.smenuitem{ display:list-item; list-style-type:disc; margin-left:50px; width:100px; border:solid 1px; background:#ffffcc; <script language="javascript" type="text/javascript"> <!-- ICT CSS basiscursus 37
38 function toonverberg(item){ if (document.getelementbyid){ item = document.getelementbyid(item) if(item.style.display == 'block'){ item.style.display = 'none' else { item.style.display = 'block' --> </script> <div class="hmenu" onclick="toonverberg('s1')">menu1</div> <div id="s1" class="smenu"> <div class="smenuitem">submenu1</div> <div class="smenuitem">submenu2</div> </div> <div class="hmenu" onclick="toonverberg('s2')">menu2</div> <div id="s2" class="smenu"> <div class="smenuitem">submenu1</div> <div class="smenuitem">submenu2</div> </div> In principe kan je dit voorbeeld perfect uitvoeren zonder lijstitems te gebruiken. Geeavanceerd voorbeeld 2 (enkel IE).hmenu { display:list-item; list-style-image: url("../../images/map.gif"); margin:20px; width:150px; cursor:hand;.smenu {display:none.smenuitem{ display:list-item; list-style-image:url("../../images/pagina.gif"); margin-left:50px; width:100px; <script language="javascript" type="text/javascript"> <!-- function wisselmenu(){ if (document.getelementbyid && document.all){ ICT CSS basiscursus 38
39 var hmenu = document.getelementbyid(event.srcelement.id) var srcindex = event.srcelement.sourceindex var item = document.all[srcindex+1] if(item.style.display == 'block'){ item.style.display = 'none' hmenu.style.liststyleimage ="url(../../images/map.gif)" else { item.style.display = 'block' hmenu.style.liststyleimage ="url(../../images/mapopen.gif)" --> </script> <div id="h1" class="hmenu" onclick="wisselmenu()">menu1</div> <div id="s1" class="smenu"> <div class="smenuitem">submenu1</div> <div class="smenuitem">submenu2</div> </div> <div id="h2" class="hmenu" onclick="wisselmenu()">menu2</div> <div id="s2" class="smenu"> <div class="smenuitem">submenu1</div> <div class="smenuitem">submenu2</div> <div class="smenuitem">submenu3</div> </div> Margin eigenschap beschrijving mogelijke waarden margin-top margin-bottom margin-left margin-right Stelt de boven, onder, linker en rechtermarge in afmeting auto inherit margin Stelt de marges in afmeting auto inherit a: alle marges a b: vert / hor a b c d: boven rechts onder links ICT CSS basiscursus 39
40 Padding eigenschap beschrijving mogelijke waarden padding-top padding-bottom padding-left padding-right Stelt de afstand van de rand tot de inhoud in. afmeting inherit padding Stelt de padding in afmeting inherit a: alle paddings a b: vert / hor a b c d: boven rechts onder links Rand eigenschap beschrijving mogelijke waarden border-top-width border-bottomwidth border-left-width border-rightwidth Stelt de randdikte in voor de aangegeven kant. Standaard: medium afmeting thin medium thick inherit border-width Afgekorte notatie om de randdikte in te stellen. a: alle randdiktes a b: vert / hor a b c d: boven rechts onder links border-top-color border-bottomcolor Stelt de randkleur in voor de kleur transparent inherit ICT CSS basiscursus 40
41 border-left-color border-rightcolor aangegeven kant. Standaard: waarde van de coloreigenschap border-color Afgekorte notatie om de randkleur in te stellen. a: alle randkleuren a b: vert / hor a b c d: boven rechts onder links border-top-style border-bottomstyle border-left-style border-rightstyle Stelt de randstijl in voor de aangegeven kant. Standaard: none none hidden dotted dashed solid double groove ridge inset outset inherit border-style Afgekorte notatie om de randstijl in te stellen. a: alle randstijlen a b: vert / hor a b c d: boven rechts onder links border-top border-right border-bottom border-left Afgekorte notatie voor het instellen van de rand aan de aangegeven kant. dikte stijl kleur border Afgekorte notatie voor het instellen van de rand aan de 4 kanten. dikte stijl kleur ICT CSS basiscursus 41
42 p { border-style:ridge; border-color:green; border-top-color:red; border-width:thick; h1 { border: thin dotted blue; <h1>werken met randen</h1> <p>een alinea met een rand Afmeting eigenschap beschrijving mogelijke waarden width Stelt de breedte van een blok-element in afmeting auto height Stelt de hoogte van een blok-element in afmeting auto p { background:red; width:100px; height:200px; border:medium outset green; ICT CSS basiscursus 42
43 padding:20px; <h1>werken met afmetingen</h1> <p>een alinea: de inhoud neemt 100*200px in beslag, de padding is 20px. Regel eigenschap beschrijving mogelijke waarden line-height Stelt de regelhoogte van een element in afmeting normal (vaak 1.2 * lettergrootte) vertical-align Vertikale uitlijning van een inlineelement basline sub super top text-top middle bottom text-bottom percentage p { line-height:2em; width:200px; <h1>werken met regelinstellingen</h1> <p>een alinea met regelinstellingen, we experimenteren ook wat met vertikale uitlijning zoals met <span style="vertical-align:sub">sub</span> en <span style="vertical-align:sup">sup</span> en <span style="vertical-align:text-bottom">text-bottom</span>. Dit werkt nog niet naar behoren! ICT CSS basiscursus 43
44 <p> <FORM> <TEXTAREA ROWS="2" COLS="10" STYLE="vertical-align: baseline"> </TEXTAREA> baseline </FORM> <FORM> <TEXTAREA ROWS="2" COLS="10" STYLE="vertical-align: middle"> </TEXTAREA> middle </FORM> <FORM> <TEXTAREA ROWS="2" COLS="10" STYLE="vertical-align: top"> </TEXTAREA> top </FORM> Indeling eigenschap beschrijving mogelijke waarden display Bepaalt de weergave van een element none block inline list-item p { display:inline; background:yellow; h2 { display:none.litem { display:list-item; list-style-type:disc; margin-left:20px; <h1>werken met regelinstellingen</h1> Hier een voorbeeld van een <p>inline alinea</p>, in dezelfde tekstregel. <h2>onzichtbare hoofding 2</h2> <div class="litem">item1</div> <div class="litem">item2</div> <div class="litem">item3</div> ICT CSS basiscursus 44
45 Zwevende elementen eigenschap beschrijving mogelijke waarden float Door deze eigenschap in te stellen kan een element een andere postitie krijgen dan normaal Standaard: none none left right clear Aangeven of er links en/of rechts van het element zwevende elementen mogen voorkomen Standaard: none. Aan de opgegeven kant mogen geen zwevende elementen meer voorkomen. none left right both h1 { float:left; border: inset thin green; height:100px; <h1>werken met regelinstellingen</h1> <p>hier een voorbeeld van een alinea naast een hoofding</p> <p style="clear:left">nog een alinea Positioneren van elementen ICT CSS basiscursus 45
46 eigenschap beschrijving mogelijke waarden position top bottom left right Bepaalt de manier van positioneren van een element op een pagina. Standaard: static De plaats van het element bepaal je met de eigenschappen top, bottom, left en right Bij absolute, relative en fixed kunnen elementen elkaar bedekken of overlappen! Bepalen de plaats van een element. Kan worden toegepast op elementen met position absolute, relative of fixed. Bij absolute positionering nemen deze eigenschappen de plaats in van de margineigenschappen (absolutegepositioneerde elementen absolute De positie van het element wordt bepaald ten opzichte van het de linkerbovenhoek van het dichtsbijgelegen ancestor element dat als positionwaarde niet de waarde static heeft. Is zo'n element niet aanwezig, dan wordt de postitie bepaald ten opzichte van de box waarin de volledige pagina zich bevindt. Deze eigenschap bepaalt ook de positie van eventuele descendant-elementen. relative De positie van het element wordt bepaald ten opzichte van de normale plaats van het element. fixed De positie wordt steeds bepaald ten opzichte van het document (niet ten opzichte van een ancestorelement). static Positie zoals normaal in HTML, vormt geen referentiebox voor de positionering van descendantelementen, behalve het BODY-element afmeting auto inherit ICT CSS basiscursus 46
47 visibility overflow clip z-index hebben dus geen margin). Deze eigenschappen worden standaard niet geërfd. Standaard: auto Het al of niet zichtbaar zijn van een element. Standaard: inherit Weergave van inhoud die niet binnen de afmetingen van een element past. Is toepasbaar op elementen met position:absolute Standaard: visible Aangeven welk deel van een element zichtbaar moet zijn. Standaard: auto Bepaalt welk elementen bovenaan wordt gepositioneerd bij overlappende elementen. Standaard: auto Je kan de z-as visible hidden inherit visible hidden scroll auto inherit auto rect(top right bottom left), waarbij 4 afmetingen worden opgegeven inherit waarde: geheel getal (pos. of neg.) auto inherit ICT CSS basiscursus 47
48 opvatten als de as loodrecht op het beeldscherm. Een element met een hogere z-index bedekt een element met een lagere z- index. Toepasbaar op elementen met een positioneigenschap absolute of relative Normaal worden elementen bedekt door elementen die onder het element in het document voorkomen Positionering: absolute, relative, top, bottom, left, right h1 { position:absolute; left:40px; top:30px; width:200px; height:50px; border:solid 1px red; background:yellow;.relatief { position:relative; bottom:10px; left:50%; background:green; width:120px; ICT CSS basiscursus 48
49 h2 { position:absolute; left:100px; top:300px; width:300px; height:250px; border:solid 1px red; background:lime; <p>deze alinea heeft geen eigenschappen voor positionering en wordt dus static, heeft de plaats die normaal in een HTML-document zou worden gekregen. <div class="relatief">relatief tov body: geen andere ancestor</div> <h1>absoluut gepositioneerde H1 <div class="relatief">relatief tov h1</div> </h1> Visibility h1 { width:600px; height:50px; border:solid 1px red; background:yellow;.onzichtbaar { visibility:hidden <h1>h1 met zichtbaar stuk tekst erin</h1> <h1>h1 met <span class="onzichtbaar">onzichtbaar stuk</span> tekst erin</h1> clip ICT CSS basiscursus 49
50 .f1 { position:absolute; clip:rect(15px 100px 70px 20px); top:150px; <img src="../../images/geiten.jpg" width="134" height="101" alt="" border="0"> <p> <div class="f1"> <img src="../../images/geiten.jpg" width="134" height="101" alt="" border="0"> </div> z-index.tekstboven { position:absolute; top:220px; left:20px; z-index:3; background:yellow; width:300px;.tekstonder { position:absolute; top:170px; left:20px; z-index:1; background:yellow; width:300px;.figuur { position:absolute; top:150px; left:40px; z-index:2; <div class="tekstonder">een beetje tekst om de z-index te illustreren</div> ICT CSS basiscursus 50
51 <div class="tekstboven">een beetje tekst om de z-index te illustreren</div> <div class="figuur"> <img src="../../images/geiten.jpg" width="134" height="101" alt="" border="0"> </div> User interface eigenschap beschrijving mogelijke waarden cursor outline-width outline-style outline-color Bepaalt het type muisaanwijzer. Standaard: auto Bepaalt de dikte van de omlijning Standaard: medium Bepaalt de stijl van de omlijning Standaard: none Bepaalt de kleur van de omlijning Standaard: invert indien auto: afhankelijk van de User Agent. crosshair: kruis default: Standaardcursor: dikwijls een pijl pointer: zoals voor een hyperlink move: iets moet bewogen worden e-resize, ne-resize, nw-resize, n-resize, se-resize, swresize, s-resize, w-resize: sleepbewegen aan de kant aangeduid met de windrichting. text: tekst, meestal een I-vorm wait: Er moet gewacht worden, meestal een zandloper (hourglass) progress: Programma is bezig, maar je kan verder werken help: er is help-informatie beschikbaar <uri> : locatie van cursor-file afmeting thin medium thick inherit none hidden dotted dashed solid double groove ridge inset outset inherit kleur invert inherit ICT CSS basiscursus 51
52 ondersteund, anders: waarde van de coloreigenschap. outline Afgekorte notatie voor het instellen van de style, width en color van de omlijning cursor div { margin-top:20px; background:yellow; width:200px; border:solid 1px red; <div style="cursor:crosshair">kruis</div> <div style="cursor:pointer">hyperlink</div> <div style="cursor:move">bewegen</div> <div style="cursor:sw-resize">zuid-west formaat</div> <div style="cursor:text">tekst</div> <div style="cursor:wait">wachten</div> <div style="cursor:progress">bezig...</div> <div style="cursor:help">help</div> <div style="cursor:url(mijncursor.ani)">aangepast</div> Outline Dit wordt voorlopig enkel ondersteund door Opera. Een omlijning werkt qua uitzicht als een rand (border), maar met volgende verschillen:? Omlijningen nemen geen ruimte in, ze worden als het ware over de box getekend. Ze overlappen steeds andere inhoud (marge, border, inhoud). ICT CSS basiscursus 52
53 ? Omlijningen hoeven geen rechthoeken te zijn? Kunnen gecombineerd worden met pseudo-klassen focus en active div { outline-style: ridge; outline-width: medium; outline-color: blue; <div>hallo, ik heb een omlijning</div> ICT CSS basiscursus 53
54 ICT CSS basiscursus 54
Stelt de voorgrondkleur van de tekst van een element in. Stelt in hoe de achtergrondfiguur moet worden herhaald, standaard: repeat.
OVERZICHT CSS - EIGENSCHAPPEN Eigenschap Beschrijving Mogelijke waarden KLEUR EN ACHTERGROND color Stelt de voorgrondkleur van de tekst van een element in. background-color Stelt de achtergrondkleur van
CSS. CSS - Inleiding. Scheiding van inhoud en vorm
CSS opmaken met Cascading stylesheets inleiding style sheet declaratie stijl declaratie stijl eigenschappen commentaar
Cascading Style Sheets
Cascading Style Sheets Dit gedeelte wordt uitgebreid besproken in http://www.handleidinghtml.nl/css/index.html 1TIN Internettechnologie 2003-2004 les 07 1 Onderwerpen Cascading model Syntax Toevoegen van
Agenda HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?
HTML HyperText Markup Language Aniel Bhulai E-mail: abhulai@cs.vu.nl Agenda HTML algemeen Aantal tags HTML met stijl (CSS, DHTML) Demo Vragen vrije Univers iteit amsterdam 1 2 Opmaaktaal Letter Kleur Plaatjes
Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >
Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken
Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. Hiermee bepaal je het lettertype.
Stijlregels I Nu je de verschillende soorten CSS kent kan je deze ook gaan toepassen. Onthoudt dat alle opmaak in xhtml met CSS gemaakt moet worden. Tegenwoordig zijn er meer dan 200 CSS properties, deze
Hand-out Web Technologies, werkcollege 5 Alex Reuneker 2012
Hand-out Web Technologies, werkcollege 5 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Groeperen (div- en span-elementen) : Het HTML-element div is een block-level element (zie hand-out bij het
Internet Standaarden HC4
Internet Standaarden HC4 Hogeschool van Amsterdam - Instituut voor Interactieve Media 1 Invloed van Games Laatste ontwikkelingen Gebruik van Games 11 oktober 2007 Hogeschool van Amsterdam - Instituut voor
BIJLAGEN Begrippenlijst HTML
BIJLAGEN Begrippenlijst HTML In dit overzicht staan alle elementen, attributen en andere begrippen van xhtml versie 1.0 strict die in dit boek zijn behandeld, alfabetisch gerangschikt. BIJLAGEN Begrippenlijst
Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen.
CSS Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen. In CSS maken we een onderscheid tussen 2 soorten elementen in een webpagina: 1. Sommige elementen
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Stappenplan: stap 4 HTML, Stylesheets vervolg slides @ vanslooten.com/websitedesign Website-design 1-12-2014
Cascading Style Sheets (CSS)
pagina 1 van 32 Cascading Style Sheets (CSS) Copyright 2001-2005 Edwin Martin Laatst aangepast: 4 juni 2005. Bij veel voorbeelden in de cursus wordt gebruik gemaakt van style sheets.
XHTML en CSS. Deel 3. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters
XHTML en CSS Deel 3 Ruud Koortens Frans Peeters januari 2008 4-9-2008 Lyceum Sancta Maria 1 2 Inhoudsopgave 1.1.1. Het opmaken van hyperlinks... 1 1.1.2. Kleur... 1 1.1.3. Het gebruik van kleuren bij het
<head><style type="text/css">h1 {font-size: 150%}h2 {font-size: 130%}p {fontsize:
h1 {font-size: 150%h2 {font-size: 130%p {fontsize: 100%h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%
Descendant selectors toepassen
HTML EN CSS de basis Oefening 13.4 Descendant selectors toepassen Maak een lijst binnen een definitielijstlijst en geef de binnenste lijst een totaal andere vormgeving. 13.7 Verticaal navigatieblok Een
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 5) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Wat is een child-theme?
Child theme Waarschuwing 1. Het maken van een child theme is relatief eenvoudig, u hebt er wel FTP toegang voor nodig bij uw provider. 2. Het is soms lastig om precies uit te vinden welke css codes u moet
Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011
Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011 1 Inhoudsopgave Wat gaan we doen?... 4 Eerst wat uitleg:... 4 Wat is HTML:... 4 Wat is CSS:... 4 Wat is het resultaat
Er is nog heel wat voor nodig om van alle losse HTML-code
Boxmodel, weergavemodel en positionering 9 Er is nog heel wat voor nodig om van alle losse HTML-code een toonbare pagina te maken, meer dan u misschien op het eerste gezicht denkt. Als de HTML-code is
Software 1. Basis CSS. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1
Software 1 Basis CSS bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Alain Simons alain.simons@artesis.be Basis CSS 1. Introductie 2.
Websitecursus deel 2 CSS
Websitecursus deel 2 CSS A Eskwadraat WebCie www@a-eskwadraat.nl 5 oktober 2015 Introductie Vorige week HTML Deze week CSS Volgende week Javascript CSS CSS (Cascading Style Sheets) bepalen hoe een website
HTML. Dennis van Wakeren. CC Naamsvermelding 3.0 Nederland licentie. http://maken.wikiwijs.nl/68933
Auteur Laatst gewijzigd Licentie Webadres Dennis van Wakeren 14 December 2015 CC Naamsvermelding 3.0 Nederland licentie http://maken.wikiwijs.nl/68933 Dit lesmateriaal is gemaakt met Wikiwijsleermiddelenplein.
Agenda (X)HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?
(X)HTML HyperText Markup Language Aniel Bhulai E-mail: abhulai@few.vu.nl vrije Universiteit amsterdam Agenda HTML algemeen Aantal tags HTML met stijl (CSS, DHTML) XHTML Vragen Demo 1 vrije Universiteit
Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012
Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Id s en klassen (id- en class-attributen) id-attribuut: Elk HTML-element kan gespecificeerd worden door middel van een
Toen stylesheets nog niet bestonden, moesten webdesigners met
Hoofdstuk 11 Creatief met kleuren en lettertypen In dit hoofdstuk: `` Tekstopmaak definiëren met CSS `` Werken met paginakleuren en achtergronden `` Lettertypeweergave veranderen `` Tekstbehandelingen
LES 8: CSS. Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting.
LES 8: CSS Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je CSS in de WordPress
Min-height en min-width
Oefening 15.5 Min-height en min-width Maak op van uw een webpagina s een div die u voorziet van een geschikte waarde voor min-height en min-width. Laat zien wat er gebeurt als u het lettertype verkleint
XHTML en CSS. Deel 2. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters
XHTML en CSS Deel 2 Ruud Koortens Frans Peeters januari 2008 4-9-2008 Lyceum Sancta Maria 1 2 Inhoudsopgave 1.1.1. Positionering, absoluut en relatief... 2 1.1.2. Float en clear... 3 1.1.3. Float en clear
Internet_html.doc 1/6
Internet_html.doc 1/6 Internet html. HTML syntax en regels Een HTML-element is opgebouwd uit een startmarkering en een eindemarkering (behalve enkele speciale markeringen zoals bvb. , , ).
Frontend ontwikkeling
Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft
XHTML en CSS. Ruud Koortens Frans Peeters
XHTML en CSS Ruud Koortens Frans Peeters januari 2008 Inhoudsopgave Inleiding... i 1. XHTML 1.0... 1 1.1. XML Declaratie... 1 1.2. Het juiste DOCTYPE in hoofdletters... 2 1.3. De XML-namespace... 2 1.4.
Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012
Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Positie en flow Boxes, block-level en inline elements: Ieder HTML-element wordt, als het ware, als een omkaderd block-
HTML en CSS gevorderd
HTML en CSS gevorderd Inhoudsopgave Inleiding! 3 Opbouw webpage en css! 4 DIVʼs of iframes?! 8 Eigen icoon in de adresbalk van de browser! 8 Web-editors! 8 Koppelen van css-bestanden! 9 Browser afhankelijke
FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40
FFOUCHIER 01/11/2018 FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40 De meeste juiste antwoorden: #22 Minste Juiste antwoorden: #30 1. Selecteer de juiste HTML-code voor het maken
Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.
Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving
Heeft hetzelfde effect als <b> </b> maar is belangrijker voor SEO. Underline: de tekst wordt onderlijnd. Italic: de tekst wordt schuingedrukt
Hoofdstuk 1 : HTML 1.1 Structuur van het HTML bestand hier komt de titel van de pagina hier komt alles wat we op de pagina willen zien 1.2 HTML- TAGs De BREAK tag wordt gebruikt om
Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash
Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis
Markup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen
Markup: CSS en HTML5 Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen 1 CSS: Waarom ook alweer. HTML was bedoeld voor documentstructuur (text met verschillende levels in headings en body text)
Leer CSS Positioneren in Negen Stappen
Leer CSS Positioneren in Negen Stappen Deze tutorial (vertaald uit het engels, origineel hier te vinden: http://www.barelyfitz.com/screencast/html-training/css/positioning/ ) laat zien hoe je met CSS verschillende
HTML krijgt een standaard opmaak van de browser
1 HTML krijgt een standaard opmaak van de browser Een link in HTML In HTML maakt u een link met de HTML-markering (HTML-tag) . Een a-tag (anchor, anker) heeft een attribuutwaarde nodig om de link te
Software Instructions for Real Kids - Felix Plesoianu (2009) en Kris Merckx (2013) - Creative Commons License
SIRK Software Instructions for Real Kiddies (versie 0.247) De programmeeromgeving, interpreter en compiler kan je online gebruiken op www.ardeco.be/sirk Variabele Functies Functienaam Parameters Voorbeeld
HTML & CSS. Studievaardigheden 2013. Frank Takes (ftakes@liacs.nl) LIACS, Universiteit Leiden
HTML & CSS Studievaardigheden 2013 Frank Takes (ftakes@liacs.nl) LIACS, Universiteit Leiden Inleiding Voorkennis: geen Stof: www.w3schools.com en dit college: www.liacs.nl/~ftakes/pdf/htmlcss.pdf Opdracht:
WEBDESIGN HTML / CSS 2
WEBDESIGN HTML / CSS 2 Fons Vitae Lyceum INHOUD 1 INLEIDING 1.1 wat is HTML 1.2 wat is CSS 1.3 browsers browserkeuze top 5 meest gebruikte browsers 1.4 wat is er nodig 2 HTML: een eerste webpagina 2.1
Werken met afbeeldingen in webpagina's
Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.
Sushi MIJN EERSTE WEBSITE. DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Ik ben HTML/CSS aan het leren. Naar daar.
MIJN EERSTE WEBSITE Sushi DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Van hier Naar daar 1 2 3 Doe het stap voor stap om te zien hoe CSS werkt! Voeg een rand toe van 1 punt in de breedte om
Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp
DOORLOPENDE OPDRACHT KINEPOLIS Beste studenten, Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp maken/ code schrijven voor de Kinepolis website. Wat hoort er thuis
Extra: Hoe u uw website met HTML kunt verbeteren
Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel
webdesign CSS Cascading Style Sheets CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt.
webdesign CSS Cascading Style Sheets CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt. Waarom zou je CSS gaan gebruiken? 1 Met CSS kun je in hoge mate de weergave van
Inhoud leereenheid 3 CSS. Introductie 65. Leerkern 66. Terugkoppeling 91. Uitwerking van de opgaven 91
Inhoud leereenheid 3 CSS Introductie 65 Leerkern 66 1 HTML zonder CSS 66 1.1 Default styling 66 1.2 Block, inline, table 66 1.3 Reset CSS 67 2 Planning op papier 68 2.1 Responsive design 68 2.1.1 Eenheden
Schrijven voor het web. 1TIN Internettechonologie 2003-2004 les 02 1
Schrijven voor het web 1TIN Internettechonologie 2003-2004 les 02 1 Verschillen met gewone teksten niet noodzakelijk sequentieel lezen webpagina globaal lezen (geen details) beantwoorden aan doel van bezoek?
programmeren in HTML (5) CSS (3) JavaScript
programmeren in HTML (5) CSS (3) JavaScript Op dit lesmateriaal is een Creative Commons licentie van toepassing. 2010 Remie remie.woudt@gmail.com Woudt Inhoudsopgave 1 HTML...1 1.1 Wat heb je nodig?...1
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
CSS. Departement VHTI. Studiegebied handelswetenschappen en bedrijfskunde Industriële wetenschappen en technologie opleiding van één cyclus
Katholieke Hogeschool Zuid-West-Vlaanderen Studiegebied handelswetenschappen en bedrijfskunde Industriële wetenschappen en technologie opleiding van één cyclus Departement VHTI VRIJ HOGER INSTITUUT VOOR
Om te beginnen heb je een geraamte van je website nodig. Maak een nieuwe map met de naam gevorderden_website aan om je website in te zetten.
1 2 Als je de Beginner en Midden HTML & CSS Sushi Kaarten hebt afgerond, dan weet je al veel over het programmeren met deze twee talen. Deze kaarten leren je hoe je al die onderdelen samenvoegt om een
Programmeren in MyShop
Programmeren in MyShop Wat leer je in dit hoofdstuk: - Wat HTML en CSS is - (Een heel klein beetje) HTML - (Een heel klein beetje) CSS - Een aangepaste footer maken ( deurmat ) Eindresultaat Je gaat je
Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid
LEEREENHEID HTML/CSS Dit document bestaat uit twee onderdelen - Onderdeel Leereenheid - Onderdeel Onderwijsproduct 1 Naam leereenheid In deze tabel staat de naam en het type van de leereenheid Leereenheid
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK
Agenda. Wat is HTML? Meer over HTML... Waarom HTML leren? Aniel Bhulai. Inleiding Computergebruik - HTML 1. Waarin maak je een HTML-bestand?
Agenda HTML algemeen Wat is HTML? Korte historie Opbouw HTML document Aantal tags + voorbeelden Vragen 2 3 Opmaaktaal Letter Kleur Plaatjes Tabellen Formulieren Links Wat is HTML? Waarin maak je een HTML-bestand?
Welkom bij mijn website tutorial (Deel 2)
Welkom bij mijn website tutorial (Deel 2) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Handleiding Net-Book voor webdesigners. Iedereen kan het!
Handleiding Net-Book voor webdesigners Iedereen kan het! Colofon Colofon Leverancier: Become-IT Herderlaan 8 3851 BD ERMELO Telefoon: 0341-470068 Internet: http://www.become-it.nl Ondersteuning: Per e-mail:
Op heel brede monitoren kan een dergelijke site er snel ongemakkelijk worden doordat de tekst op heel lange regels komt te staan.
Layout met CSS Naast het opmaken van tekst, navigatie menu s en foto s komt de echte kracht van CSS tot uiting voor de layout van de webpagina. Het is geen eenvoudig onderwerp, daarom eerst een beetje
Informatietechnologie 1. Inleiding tot CSS. Richtlijnen voor opmaak. Kristof Michiels
Informatietechnologie 1 Inleiding tot CSS Richtlijnen voor opmaak Kristof Michiels In deze presentatie Voordelen en kracht van CSS Hoe schrijf je CSS stijlregels? Toevoegen aan HTML documenten Basisconcepten:
HTML richtlijnen e-mail marketing. part of the valley
e-mail marketing pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van
HTML&CSS OEFENBOEKJE. van:
HTML&CSS OEFENBOEKJE van: HTML SYNTAX De meeste HTML tags zien eruit zoals hierboven. Een tag om te openen , en een tag om te sluiten . De letters die tussen de staan, geven aan wat voor
I'VE GOT EM FRONTEND DEVELOPMENT LES 3
I'VE GOT EM FRONTEND DEVELOPMENT LES 3 VORIGE WEEK CSS bling Selectors deel 1 Even heel kort samenvatten waar we het ook al weer over hebben gehad vorige week. Niet te lang bij stilstaan want er is heel
qwertyuiopasdfghjklzxcvbnmq ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty
qwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwer Basiscursus HTML5 en CSS tyuiopasdfghjklzxcvbnmqwerty Applicatie Ontwikkelaar leerjaar 1 uiopasdfghjklzxcvbnmqwertyui
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 6) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Module IV - Cascading Style Sheets (CSS)
Module IV - Cascading Style Sheets (CSS) Cascading Style Sheets kunnen we het best vergelijken met opmaakprofielen binnen tekstverwerkers zoals Microsoft Word, Corel WordPerfect, OpenOffice Opmaakprofielen,
Foutoplossing FotoSpecial Blok
Les 9 Foutoplossing FotoSpecial Blok In een vorige les maakten we een blok op de front die de verschillende fotocategoriën weergeeft. Dat doet een beetje raar bij het hoveren. In onderstaande bijlage kan
<meta name="description" content= "de tekst die in zoekresultaten bij de link te lezen is" />
Author Description Favicon
Een LOI-opleiding is méér dan leerstof alleen
Een LOI-opleiding is méér dan leerstof alleen Bedankt voor het aanvragen van deze proefles. Hierin laten we een stukje van de leerstof zien, om een indruk te geven van de opzet en het niveau. Maar een
We passen eerst ons bestaand inhoudstype Fotospecial een beetje aan:
Les 12 Paragraph + Bootstrap Met deze module kan je de inhoud van een node beter rangschikken op het scherm. Denk hier aan Display Suite en/of Panels. Ook die modules laten u toe om inhoud anders te schikken
Webdesign. cursusjaar 2009-2010. Practicumoefeningen met. (X)HTML en CSS
Webdesign cursusjaar 2009-2010 Practicumoefeningen met (X)HTML en CSS Departement Informatica Bacheloropeliding Informatiekunde Hans Voorbij (2010) Inhoud 1. Basisoefeningen met HTML...........................................
Natuurlijk moet je niet element invoeren, maar de afgesproken benamingen, meestal afkortingen: zo staat p voor alinea en h1 voor een grote kop.
HTML-elementen Met de markeertaal HTML bouw je webpagina's en kan je ze eveneens aan elkaar koppelen (linken). Een webpagina bouw je niet met een tekstverwerker. Je schrijft hem best in code. Een browser
Inhalen les 7 (versie B)
Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet Startmap Les 6. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map Website.
Lab Webdesign: Javascript 11 februari 2008
H2: BASISBEGRIPPEN In dit hoofdstuk zullen er enkele basisbegrippen worden behandelt PLAATSING VAN JAVASCRIPT-CODE DE SCRIPT-TAG De script-tag geeft aan dat er gebruik zal worden gemaakt van een scripttaal.
HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt?
HTML in Outlook 2007 Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Inleiding Emark Mail biedt u de mogelijkheid om kant en klare HTML nieuwsbrieven in te laden en te versturen.
HTML Graphics. Hans Roeyen V 3.0
HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.
1. De basis 2. De basis uitbreiden
Wordpress Theme Hoe moet je deze reader gebruiken? Deze reader is digitaal, zodat je makkelijk stukjes code kunt kopieren en plakken. 1. De basis 2. De basis uitbreiden Hier aan de linkerkant vind je een
Bijlage. Onderzoeksrapport. Onderwerp: HTML 5 - CSS 3.0 - Web 3.0 Opdrachtgever: Karel de Heer Opdrachtnemers: Future Websolutions
Bijlage Onderzoeksrapport Onderwerp: HTML 5 - CSS 3.0 - Web 3.0 Opdrachtgever: Karel de Heer Opdrachtnemers: Future Websolutions Tom Somerville 428573 Roy Rutten 428148 Rob Lohmann 429898 Gerard Peters
Technische werking whitelabel reviewmodule
Na integratie van de whitelabel reviewmodule van Kieskeurig.nl kunnen bezoekers via jouw website reviews op Kieskeurig.nl en je eigen website achterlaten. In dit document vind je meer informatie over de
Stap voor stap door je studie
Groei door. Stap voor stap door je studie Welkom, Bedankt voor het aanvragen van deze proefles. Hiermee krijg je een goede indruk van studeren bij de LOI en de opleiding van je keuze. Je maakt kennis met
Gebruikershandleiding voor: Beperkte Password protectie met JavaScript
Gebruikershandleiding voor: Beperkte Password protectie met JavaScript URL: http://home.hccnet.nl/s.f.boukes/html-2/html-202.htm INHOUD : 1. Structuur van een beveiligde site 2. Login-formulier 3. Login
Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3
Uitgave 6 versie 2 Augustus 2010 Highpotech IT Nieuwsbrief Een webpagina maken Eerdere uitgaven Een website wordt weergegeven op een hoek waarvan de verhoudingen dicht in de Werken met Excel beeldscherm
HTML/CSS GEVORDERDEN 2
Inhoudsopgave 5 6 7 Configuratie Klikbare kaarten Alles op een rijtje Opmerkingen en bijschriften Ontwerp een gave pagina opmaak Fotocollage Speciale effecten.....5.6.7 Configuratie We gebruiken Thimble
Informatietechnologie 1. Cascading Style Sheets. Responsive web design - Positioning. Kristof Michiels
Informatietechnologie 1 Cascading Style Sheets Responsive web design - Positioning Kristof Michiels In deze presentatie Wat is Responsive web design? Waarom belangrijk? Vloeiende layouts Media queries
HTML/CSS GEVORDERDEN 1
Inhoudsopgave 5 6 7 8 9 Configuratie Alle kleuren! Organiseren van je pagina Thema's ontwerpen Jouw individuele stijl Inspector Gadget Groter Maken Animatie Leer Klara om om te rollen!.....5.6.7.8.9 Configuratie
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Tutorial HTML CSS met Adobe Dreamweaver CSx
Tutorial HTML CSS met Adobe Dreamweaver CSx Johan Smits, Saxion, Minor Internetmarketing, WCM1, week 4 Introductie Bij het werken met content op een website is het van groot belang om tekst en vormgeving
Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman
Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,
Introductie. Wat is HTML?
Introductie Wat is HTML? Hypertext Markup Language (HTML) is de taal van het World Wide Web. Elk document op het web is geschreven in HTML en alle onderdelen - zoals de opmaak van documenten, koppelingen,
Web building basis: HTML. Karel Nijs 2008/09
Web building basis: HTML Karel Nijs 2008/09 Webbuilding basis vorige les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities Webbuilding
Quick and Dirty HTML/CSS in epub - handleiding voor beginners
Quick and Dirty HTML/CSS in epub - handleiding voor beginners Introductie Deze handleiding is voor zowel de beginnende als de gevorderde gebruikers. Je hoeft niets te weten van HTML, CSS of zelfs epub
5. Inhoud, structuur en opmaak met HTML en CSS
5. Inhoud, structuur en opmaak met HTML en CSS Het oorspronkelijke doel van HTML was tekstinformatie via het "internet" uitwisselbaar maken onafhankelijk van het computersysteem of het besturingssysteem.
Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans
Les W-01: HTML 1.0 HTML Websites zijn opgebouwd uit afzonderlijke webpagina s. Deze webpagina s zijn geschreven in een aparte taal, HTML. De afkorting HTML staat voor Hyper Text Markup Language. Vrij vertaald
De frameset uit de afbeelding wordt op de volgende manier gedefinieerd:
FRAMES GEBRUIKEN Met frames kan het venster van een browser zo worden ingedeeld, dat er meerdere webpagina's tegelijk getoond kunnen worden. In de afbeelding hieronder staat een webpagina met frames. We
INTERSTENO 2013 Ghent Wereldkampioenschap professionele tekstverwerking
GEBRUIKT OPERATING SYSTEM GEBRUIKTE TEKSTVERWERKINGSSOFTWARE WEDSTRIJD-ID A-1 Instructies voor deelnemers Open het basisdocument TRANSPORT.DOC en sla het onmiddellijk op onder TRANSPORTXXX.DOC of DOCX,
MARTINA. Wist je dat..? Truckjes en weetjes in Drupal 7. 6. Artikels, lengte en aantal op frontpagina (en welkomtekst zonder lees meer )
MARTINA Wist je dat..? Truckjes en weetjes in Drupal 7 Inhoud: 1. Inlogknop 2. Aangepast beheerdermenu 3. Actieve pagina in de broodkruimel 4. Afbeelding op zoekknop (en geen tekst) [CSS] 5. Logo met link
Publicatie formulieren en surveys
Handleiding: Publicatie formulieren en surveys Deze handleiding is in te zetten voor MailPlus Marcom en MailPlus ecom. Inhoudsopgave Introductie... 1 1 Formulieren integreren... 2 1.1 Formulieren integereren
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen