Inhoud 1KennismakenmetHTML51 EenkortegeschiedenisvanHTML2 Wieheefthetwebbedacht?3 Afsprakenoverwebtalen4 WHATWG5 TweesmakenHTML6 Backwardcompatible7 WatHTMLis8 HTMLbestaatuittags9 WatbehoortniettotHTML5?10 EenkortwoordjeoverCSS11 CSSinditboek13 Clientsenservers13 Browsers15 GoogleChrome16 MicrosoftInternetExplorer17 MozillaFirefox17 MacOSX:Safari19 HTML-editors19 Voorbeeldenvaneditors21 Brackets21 Aanvullendehulpmiddelen24 Hulpmiddelenvoorvalidatie24 Hulpmiddelenvoorontwikkeling25 ChromeDeveloperTools26 Verderbenodigdevoorkennis31 Tipsvoormeerlezen32 Oefenbestandendownloaden33 Samenvatting34
/ix
Praktijkoefeningen34
Theorie1–kenmerkenvanHTML-documenten40 Kaletekst40 HTML-bestandenheten.html40 Theorie2–elementen,tagsentekst41 Punthaken<en>43 Sluittag</…>43 Elementenbinnenelementen:nesting44 Elementeninkleineletters45 Praktijk–HTML-codevanwebpagina’sbekijken46 Theorie3–attributen49 Kenmerkenvanattributen49 Praktijk–debasisvanelkHTML5-document51 <!DOCTYPEhtml>53 <htmllang="nl">53 <head> 54 <metacharset="utf-8">54 <title> 55 <body> 56 HTML-bestanduitbreidenmet<link>56 Praktijk–depaginaverdervullen57 Koptekstengebruiken57 Attributenvoorkopteksten60 Tekstenenalinea’stoevoegen61 Enter,spatiesentabswordengenegeerd61 Alinea’saangevenmet<p>62 Attributenvoor<p>63 Hetregeleinde<br>63 Afbrekenvanwoorden64 Afbeeldingeninvoegen65 Detag<img/>65 Conclusie68 Praktijkoefeningen69 Uwwebsite69 Andereoefeningen70 /x /Inhoud/
2BeginnenmetHTML539
3HTML5-structuurtags73 Meeroverpaginastructuur74 Een‘websitealsboek’74 DocumentObjectModel–HTMLDOM74 Bijfoutievecode…76 Deoutlinevaneendocument77 Koptekstenenoutlines79 Nieuwevertakkingbeginnen80 Sectiesinvoegen81 HetcontentmodelvanHTML583 Hetcontentmodelsamengevat85 Sectiesmarkeren–theorie86 Markeringen:vroeger86 Markeringen:nu88 <article>(sectioningcontent)89 <section>(sectioningcontent)90 <nav>(sectioningcontent)91 <aside>(sectioningcontent)92 Sectioningroot93 <header>(flowcontent)93 <footer>(flowcontent)95 <address>(flowcontent)96 <main>(flowcontent)97 <div>(flowcontent)97 Samenvatting98 Sectiesmarkeren–praktijk98 Voorbeeld1–eenvoudigewebpagina99 Voorbeeld2–productpresentatie101 Voorbeeld3–eenblog105 Samenvatting108 Weergaveinoudebrowsers108 VervalleninHTML5109 Conclusie110 Praktijkoefeningen111 Uwwebsite111 Andereoefeningen112 /xi /HTML5/
4Lijsten,specialetekensenanderetekstmarkeringen115 Inleiding116 Meerovermarkeren116 Koppenineenheader116 Specialebetekenisaangevenmetinlineelementen117 <em> 118 <strong>119 <small>119 <s> 120 <cite>en<q>120 <abbr>en<dfn>120 <code>,<samp>en<kbd>121 <sub>en<sup>122 <mark>122 <span>123 <ins>en<del>123 Voorafopgemaakteinhoud:<pre>124 Lijstenmaken:<ol>,<ul>en<li>124 Genummerdelijsten:<ol>125 Ongenummerdelijsten:<ul>128 Lijstenalsnavigatiemenu130
Namedcharacterreference135
Unicode136
Conclusie138 Praktijkoefeningen139 Uwwebsite139 Andereoefeningen139 /xii /Inhoud/
Kopboveneenlijst130 Illustratiesenbijschriften:<figure>en<figcaption>131 Nieuwthemamarkeren:<hr>133 Specialetekensinwebpagina’s134
VanASCIInaarUTF-8136
Referentiesgebruiken136
5Meeroverkoppelingen141
Inleiding142
Verbindingenleggenmet<a>143
Attributenvan<a>144
Hetattribuuttitle146
Deattributentargetendownload146
Bestandendownloadenvanafwebsite148
Nietvolgen:nofollow148
Bladwijzersmaken149
Linknaareengrotefoto150
Linknaarhetvervolgvaneenartikel151
Linknaareene-mailadres153
Klikhiervoorrichtlijnen154
Geen‘klikhier’155
Absoluteenrelatievekoppelingen157
Absolutekoppeling157
Relatievekoppeling157
Koppelingnaarbestandeninanderemap158
Externebestandenkoppelenmet<link>160
Stylesheetkoppelen160
Eenfavicongebruiken161
favicon.ico162
Opeenvolgendepagina’saangevenmetrel="…"164
Overigewaardenvanrel164
Koppelingennaardynamischewebpagina’sbegrijpen165
Parametersdoorgeven166
Voorbeeld167
Conclusie168
Praktijkoefeningen169
Uwwebsite169
Andereoefeningen170
/xiii /HTML5/
6Beeld,geluidenandereexterneinhoud171 Inleiding172 Embeddedcontent172 URL’senstructuurvandewebsite172 Soortenafbeeldingen173 Bitmaps174 RGB-model175 Vectorafbeeldingen:SVG175 Bestandsformatenvoorbitmaps178 GIF 178 JPEG 179 PNG 181 AfbeeldingeninHTML182 Debron:src183 Beschrijvendetekst:alt183 Afmetingen:widthenheight185 ExterneHTML-inhoud:<iframe>186 Attributen186 Sandbox-beveiliging188 Insluitenmet<embed>of<object>189 Videoineenwebpagina191 Bestandstypenvoorvideo192 Eencodeckiezen193 Videocoderen194 Hetelement<video>194 Attributenvoor<video>194 Voorbeeldvan<video>195 Debron:<source>196
Uwwebsite206
/xiv /Inhoud/
Hulpvoorouderebrowsers198 Ondertitelingmet<track>199 Titelbestanden:WebVTT202 Audioopdewebsitegebruiken204 Conclusie205 Praktijkoefeningen206
Andereoefeningen207
7Tabellenenformulieren209
Inleiding210
DestructuurvaneenHTML-tabel210
Debasis:<table>212
Attributenvan<table>214
Rijenenkolommen:<tr>en<td>215
Koptekst:<thead>216
Eenbijschrift:<caption>217
Overigeelementen218
Detabelinhoud:<tbody>218
Voettekst:<tfoot>219
Voorbeeldenvantabellen219
Producttabel219
Tabelmetgecombineerderijenenkolommen221
Formulierenmaken–Inleiding223
Verbeteringenaandeclientkant224
Derolvandewebserver226
Debasisvaneenformulier:<form>226
Buiten<form>magook226
Deverwerking:action227
Verzendwijze:method227
Codering:enctype228
Automatischaanvullen:autocomplete228
Nietvalideren:novalidate229
Directinvoeren:autofocus229
Denaam:name230
Hetdoel:target231
Eenvoorbeeldformulier231
Hetelement<label>231
Invoerveldenmet<input>233
Attributenvan<input>234
Onmisbaar:name234
readonlyendisabled237 required238
placeholder239
minenmax239
value 235 pattern236 size 236
/xv /HTML5/
Meertypeninvoervelden240
Telefoonnummers:<inputtype="tel">240
E-mailadressen:<inputtype="email">242
Webadressen:<inputtype="url">242
Wachtwoorden:<inputtype="password">243
Getallen,bereik,datum,tijdenkleuren243
Selectievakjes:<inputtype="checkbox">244
Keuzerondjes:<inputtype="radio">247
Knoppen–verzendknop:<inputtype="submit">248
Resetknop:<inputtype="reset">248
Functielozeknop:<inputtype="button">249
Verborgenwaarden:<inputtype="hidden">249
Selectielijstenmet<select>250
<option>en<optgroup>250
Uitgebreidetekstinvoer:<textarea>252
Hetformulierverzenden253
Formulierscriptsopinternet254
Standaardscripts255
Testscriptbijditboek255
Oefening–Eenformuliermakenenverzenden256
Scriptsbijuwprovider258
Conclusie259
Praktijkoefeningen260
Uwwebsite260
Inleiding–welkeAPI‘szijnbeschikbaar?264
Webapps264
API–ApplicationProgrammingInterface264
GeïntegreerdeAPI’s265
GerelateerdeAPI’s266
API’sindithoofdstuk267
Letop:echtprogrammeren!267
Videozelfbesturen268
Stappenplan269
Stap1–de HTML-code269
Stap2–JavaScriptcodeschrijven270
Analyse270
Stap3–continuafspelendooreventaftevangen271
Stap4–tijdcodeweergeven273
Meeroptiesvoorvideo274
8HTML5API’sgebruiken263
/xvi /Inhoud/
DeAPIWebStorage275 Kortegeschiedenisvanlokaleopslag275 Beperkingenvancookies276 HTML5Storageendekenmerkenervan277 Naam-waardeparen277 Opslagruimte277 window.localStorage278 localStoragegebruiken279 EnkeleStorage-voorbeelden280 Eenpaginateller281 FormuliergegevensinlocalStorage283 MeeroverlocalStorage286 DeAPIGeolocation287 Kenmerken288 GeolocationincombinatiemetGoogleMaps289 MeerHTML5API’s293 Conclusie295 Praktijkoefeningen297 Index317 /xvii /HTML5/
EenkortegeschiedenisvanHTML
ElkepaginaophetworldwidewebheeftalsbasisdetaalHTML. Ditisdeafkortingvan HyperTextMarkupLanguage .Eensitekan ernogzoflitsenduitzienenerkunnenallerleiaanvullendetechniekenzijngebruikt,maardebasisisaltijdHTML.Ditboekgaat overHTML5.Hetisdenieuwsteversievandetaal,vastgelegdin oktober2014.
HTML5kannietloswordengezienvandevoorgangers,HTML 4.01enXHTML.HTML5isdaarvaneenvoortzetting.Erzijnonderdelenaangepast,toegevoegdenafgeschaft,maaralleoude webpagina’sblijvenwerken.MetHTML5beginnenwedusniet aaneencompleetnieuwweb.‘Afschaffen’betekentinditverbanddanookvooraldatauteurswordenaangemoedigdwebsites volgensdenieuwestandaardentecoderenenoudepagina’ste moderniseren.Gebeurtdatniet,danblijvendewebpagina’stoch toegankelijkvoorbezoekers.Browsersmoetenverouderde pagina’skunnenblijvenweergeven.
HebtualenigeervaringmetHTML,danzultinditboekveel elementenvanHTML4herkennen.Isdituweerstekennismaking metHTML,danleertu–nietgehinderddoorsomsverouderde kennis–directhoehetmoderneHTMLkanwordentoegepast.
HTML4enHTML5
DeofficiëleschrijfwijzevanHTML5iszonder spatie.HTML4heeftweleenspatieindenaam. Datzietersomswatvreemdofinconsequent uit,maarwevolgendaarmeedeschrijfwijzevan w3.org
/2 /Hoofdstuk1/KennismakenmetHTML5
Wieheefthetwebbedacht?
Hetisindezetijdvanmultinationalsenontwikkelteamsdieuit tientallenofhonderdenpersonenbestaanbijnanietmeervoorte stellen.MaarHTML,hetweb,dewebserverendebrowserzijnin principebedachtdooréénman,TimBerners-Lee.Hijwerkterond 1990bijhetnucleaireinstituutCERNinZwitserlandenzochtnaar eenmanieromdocumentatiebinnenhetbedrijfmakkelijken centraalopteslaan.Viaonderlingerelaties(de hyperlinks)kondenhierbijsteedsgerelateerdedocumentenwordenbereikt.
Simpelgezegdishetwebzoalswedatnukennenmetallewebsites,e-commerceenstreamingvideoenaudiooorspronkelijkdus ontstaanalseeneenvoudigelektronischdocumentbeheersysteem.
TimBerners-Leeisinzijnhuidigefunctiealsalgemeendirecteur vanhetWorldWideWebConsortiumW3Cnogsteedsbetrokken bijdeontwikkelingvanhetweb.Alsumeerinzichtwiltindeachtergrondenvanhetontstaanvanhetwebofdemanierwaarop Berners-Leehetwebbedoeldheeft,leesdanookzijnboek
/3 /HTML5/
Afbeelding1.1 TimBerners-Lee,demandieHTMLenhetwebbedacht heeft,isnunogsteedsvoorzittervanW3C.
WeavingtheWeb (ISBN006251587X)enbekijkzijnpersoonlijke homepageopdesitevanW3C.Hierstaanlinksnaarinteressante artikelenenkrijgtuinzichtinhet‘ideaalplaatje’voorhetworld wideweb.
TimBerners-LeeheeftHTMLenzijnserversoftwaredestijdsvrijgegevenalsopensource.Ergingenveelanderebedrijvenmee aandeslag,waaronderNetscape,Microsoftenanderepioniers opinternetgebied.Dithadechterookwildgroeitotgevolg.IedereenbreiddedeHTML-‘standaard’uitmeteigenmogelijkheden.
Afsprakenoverwebtalen
Sinds1994wordtgeprobeerdlijntebrengenindeontwikkeling vanHypertextMarkupLanguage(HTML)enCascadingStyle Sheets(CSS).DaarvoorishetWorldWideWebConsortium,kortwegW3C,opgericht.Inverschillendewerkgroepenoverleggen browserfabrikantenzoalsMicrosoft,Google,MozillaenOpera, maarooktelecombedrijvenenandereindustrieën.
WorldWideWebConsortium
KijkvoormeerinformatieoverwathetW3Cis endoetop w3.org.Datisdethuishavenvan dezeinAmerikagevestigdeorganisatie.Uvindt erookinformatieoverdehiernagenoemde talenXHTMLenXML.
IndeloopderjarenzijnerallerleiversienummersvoorHTML geweest,variërendvanHTML2.0via3.2naarHTML4.0en4.01.
DaarnaisnogeenaantaljarendevariantXHTMLgepromoot(dat wasHTMLgebaseerdopXML),maardieontwikkelingisin2009 gestopt.SindsdiengaatdestandaardalsHTML5doorhetleven.
/4
/Hoofdstuk1/KennismakenmetHTML5
Sinds2004iserookeenalternatievegroeperingaanhetwerk metHTML5,aangevoerddoorApple,MozillaenOpera.Ditisde WebHypertextApplicationTechnologyWorkingGroup,kortweg WHATWG.Zijpublicereneigenmodulesenstandaardenrondom HTML5.Zenoemenditde HTMLLivingStandard
LivingStandard
Ineendynamischeomgevingalsinternetmoetendemogelijkhedennietbeperktwordendoor starreregels.Metdatuitgangspuntpropageert WHATWGdatHTMLeenlevendestandaardis, constantinontwikkeling.Daarpastgeenversienummerbij.LeesdeFAQvanWHATWGvoor achtergrondinformatieoverdezeorganisatieop wiki.whatwg.org/wiki/FAQ.
HetzijndegedrevenheidvanWHATWGendesnelheidwaarmee inbrowsersnieuwemogelijkhedenwordeningebouwddiede ontwikkelingvanHTMLineenstroomversnellinghebben gebracht.MetnameGoogle(Chrome),maarookMozilla(Firefox) enOperabrengeninhoogtempoupdatesvoordebrowseruit. Hetresultaatisdatdenieuwsteversiesvanalletoonaangevende browsersveelnieuwemogelijkhedenondersteunen.Hetwerktals eenvliegwiel:hetfeitdatnieuweoptiessnelwordenopgenomen inbrowsersstimuleertdeontwikkeling.
WHATWG
/5 /HTML5/
TweesmakenHTML
Automatischeupdates
Erwordennietalleensnellernieuweversiesvan browsersuitgebracht,zewordenookveelsnelleropgroteschaalgebruiktdoorhetinternetpubliek.Datkomtdoordatbrowserupdates automatischwordengedownloadengeïnstalleerd,zondertussenkomstvandegebruiker.Dit principestaatbekendalsEvergreenbrowsers (zieook http://eisenbergeffect.bluespire.com/ evergreen-browsers/
ZijnernutweesmakenHTML?Inzekerzinisdatzo.Hoewelde HTML5-recommendationopdewebsitevanhetW3ChetresultaatisvansamenwerkingtussenW3CenWHATWG,hebbende wegenvandegroepenzichgescheiden.WatW3Cbetreftis
HTML5‘af’.Sinds2012wordtdaaromgewerktaanHTML5.1. Daarbijgaathetomzakendieindehuidigespecificatienogonvoldoendeontwikkeldzijn.IngrotelijnenisdeHTML5-specificatie vanW3Ctezienalseenstabielgeheeldatwordtondersteund dooreengrootaantalmarktpartijen.DeLivingStandardvan WHATWGdaarentegenisveeldynamischer.Erwordtpermanent gewerktaannieuweofverbeterdemogelijkhedenopbasisvan watwebsitebouwersnodighebben.
/6 /Hoofdstuk1/KennismakenmetHTML5
Afbeelding1.2 Delogo’svanHTML5enHTMLLivingStandard.
Vooruwleerprocesinditboekmaakthetnietuitdaterinde kleinelettertjesverschillenbestaantussenHTML5enHTMLLiving Standard.Allevoorbeeldenencodeswerkeninallebrowsers.
Bekijkdespecificaties
Uiteraardzijnallespecificatiesonlinebeschikbaar.DeW3C-recommendationistevindenop http://www.w3.org/TR/html5/ .Dezespecificatietoontwateris.DespecificatievanWHATWG istevindenop www.whatwg.org/html entoont watermogelijkkomt.Daardoorisdekansook groterdaterzakeninstaandienognietinwebbrowserszijnopgenomen.
Backwardcompatible
Weliswaarishetgetalsmatigeenhelestapvan4.01naar5,dat betekentnietdatallesvanHTML4ongeldigenoverbodigisnu HTML5eris.Integendeel.Erzijnweldingenveranderd,vervallen entoegevoegd,maarhetisnogsteedsHTML.HTML5iszogezegd backwardcompatible,ofteweluitwisselbaarmetvoorgaande versies.HebtuervaringmetHTML,dankuntudeoverstapnaar HTML5beschouwenalsbijscholing.
/7 /HTML5/
OudeHTMLwerktnog
DebackwardcompatibilityvanHTML5gaatver. Ook‘verboden’opmaaktagszoals <center> of <font> doenhetnogindeallernieuwstebrowsers.Datmoetookwel,wanterzijntalloze webpagina’sdiemetdezetagszijngemaakten ookdiepagina’smoetentoegankelijkblijven voorbezoekers.Welwordenwebsitebouwers aangemoedigddergelijketagsnietmeerte gebruiken.HTMLisvoorstructuureninhoud, nietvooropmaak.Verderopwordtdituitgelegd.
WatHTMLis
MetHTMLwordtde structuur vaneenwebpaginaaangegeven.Er wordtincodegeschrevenwatdekoptekstenenalineatekstenvan eenpaginazijn,welkeafbeeldingenindepaginamoetenworden geladenenmeer.Viahyperlinkswordtaangegevenwatdeonderlingerelatietussenpagina’sis.HTMLheeftnietstemakenmet hetuiterlijkvaneenpagina.InHTMLwordenalleendeinhouden destructuurbeschreven.
HTMLisdaaromgeenprogrammeertaal.Hetiseenmarkeertaal. VandaarookdeafkortingHypertextMarkupLanguage,oftwel ‘eenmarkeertaaldieisgebaseerdophypertext’.Hetprincipevan hypertextkentondertusseniedereen.Ditzijndetekstdelenwaarmeerelaties(ookwel‘koppelingen’of‘links’)tussendepagina’s onderlingzijnaangegeven.Vrijwelelkewebpaginabevatweleen ofmeerhyperlinks.
/8 /Hoofdstuk1/KennismakenmetHTML5
Afbeelding1.3 Gestructureerdetekstenhyperlinksvormendebasisvan hetweb.
HTML5iseenupgradevanHTML4.Wehebbenhetdanalleen overdemarkeertaalHTML.Nietovertechniekendievaakinéén ademmetHTMLwordengenoemd,maarerinfeitenietzoveel meetemakenhebben(zieookverderop).
HTMLbestaatuittags
Dehyperlinks,maarookalleanderestructuurkenmerkenworden aangegevenmet tags.OmHTMLtelerenmoetuwetenwelke tagserzijnenhoezegenoteerdworden.Steldatubijvoorbeeld eenstuktekstopeenpaginaalskoptekstwiltaanmerken.De codehiervoorisdan:
Decode <h1> isdeopeningstag.Alleswathiernavolgt(indit voorbeelddetekst Ditiseenkoptekst)wordtalskoptekstaangemerkt.Ditgaatzodoortotdatdesluittag </h1> wordtgeschreven.Eenstukgemarkeerdetekstwordtaltijdafgeslotenmeteen sluittag.Eensluittagheeftdezelfdenaamalsdeopeningstag, maarbegintmeteenvoorwaartseslash </… .
<h1>Ditiseenkoptekst</h1>
/9 /HTML5/
Indebrowserzietdekopteksterzouitalsindeafbeelding.In totaalkentHTMLmeerdanhonderdverschillendetags.Indit boekleertudebelangrijksteenmeestgebruikte.
HTML5isondertussenookeenmodewoordofmarketingterm gewordenvooreenverzamelingvanwebtechniekenommoderne (mobiele)webapplicatiestebouwen.NaastHTMLgaathetdan ookovertechniekenzoalsCSS,JavaScript,XML,JSONenSVG. BedenkdatdezegeendeeluitmakenvandeHTML5-standaard vanW3C.Uzultzedaarnietinterugvinden.Datneemtnietweg datzeinhetlevenvandewebontwikkelaareenonmisbarerol spelen.Eenkortetoelichting:
• CSSstaatvoorCascadingStyleSheetsenisdetaalvoorde vormgevingvanHTML-pagina’s.Devolgendeparagraafgaat kortinopCSS,maarinditboekstaanweerverdernietuitgebreidbijstil.Leesbijvoorbeeld WebDevelopmentLibrary–CSS3 (ISBN9789059408081)alsumeerwiltlerenoverCSS.
• JavaScriptiseenprogrammeertaal(scripttaal)omondermeer webpagina’sinteractieftemaken.JavaScriptwordtinditboek nietbesproken,alkomthetinhoofdstuk8weltersprake.Ook hiervooriseenaparteuitgaveverschenen, WebDevelopment Library–JavaScript (ISBN9789059407589).
WatbehoortniettotHTML5?
/10
/Hoofdstuk1/KennismakenmetHTML5
Afbeelding1.4 Eenniet-opgemaakteHTML-koptekstindebrowser.
• XMLstaatvoorExtensibleMarkupLanguageeniseenmarkeringstaal(zoalsHTML).Hetisontwikkeldomgestructureerde gegevensuittewisselentussen(web)toepassingenopeen manierdieookvoormensenleesbaaris.XMLhebtuvrijwel nietmeernodigalsuophetwebaandeslaggaat.
• JSONisdeafkortingvanJavaScriptObjectNotationeniseen alternatiefvoorXML.Defunctieishetzelfde:uitwisselingvan gegevenstusseneenservereneenapplicatie.JSONwordtin modernwebdevelopmentvaakgebruiktincombinatiemet JavaScript.VoorHTMLisJSONbijnanietvanbelang.
• SVGstaatvoorScalableVectorGraphics.DitiseenopXML gebaseerdbestandsformaatvoorvectorafbeeldingen(vectorafbeeldingenkunnenwordenvergrootofverkleindzonderdat zerafeligofblokkerigwordenzoalsbitmapafbeeldingen).Het komtkorttersprakeinhoofdstuk6.
EenkortwoordjeoverCSS
HTMLzegtniksoverdevormgevingvandepagina.DaarisCSS voorontwikkeld.MetCSSwordthetuiterlijkvandepaginaaangegeven.CSS-codebeschrijfthoedekopteksten,alineatekstenen afbeeldingenwordenopgemaakt.InCSSwordtaangegevenwelk lettertypewordtgebruikt,welkelettergrootte,letterkleur,uitlijning,regelafstand,witruimtetotandereonderdelenennogveel meer.MetCSSisookdelay-outvandepaginaintestellenin kolommen,kop-envoettekstenenkaders.CSSheeftnietste makenmetdeinhoudvandepagina.
Neemnogevenhetvoorbeeldvandekoptekstuitdevoorgaande paragraafingedachten.InHTMLhebtuaangegevendateen bepaaldeteksteenkoptekstmoetzijn,maardatzegtnogniets overhetuiterlijk.Wiltudekoptekstbijvoorbeeldineenanderlettertypedandegewonetekst,meteenlijneronderofnoganders?
DitisnujuistdetaakvanCSS.Onthouddevolgendeuitspraken:
/11 /HTML5/
h1{
• MetHTMLwordtde structuur vandewebpaginaende betekenis vandeinhoudingesteld(kopteksten,tussenkoppen, hyperlinks,alinea’sendergelijke).
• MetCSSwordthet uiterlijk vandewebpaginaingesteld(lettertype,kleur,regelafstand,marges,endatallesdesgewenst perelementvandepagina).
Omdekoptekstuitdevorigeafbeeldingtevoorzienvaneen blauweachtergrondmetdonkerblauweonderrandeneencursief lettertype,kanbijvoorbeelddevolgendestylesheetworden geschreven:
font-family:Arial,Helvetica,sans-serif;
font-style:italic;
background-color:hsl(200,85%,50%);
border-bottom-width:4px;
border-bottom-style:solid;
border-bottom-color:hsl(200,85%,35%);
padding-left:15px;
Eenkoptekstopgemaaktmeteenstylesheet.Inde HTML-codeisnietsgewijzigd,alleenhetuiterlijkisaangepastCSS.
Afbeelding1.5
DecompleteCSS-familiebestaatuitenkelehonderdenopdrachtendiegezamenlijkallemogelijkemanierenbiedenomeenwebpaginaoptemaken.HoemeerCSS-regelsukunttoepassen,hoe fraaierheteindresultaatindebrowserkanzijn.
}
/12 /Hoofdstuk1/KennismakenmetHTML5
