HTML5 DEEL 1 STRUCTUUR VAN DE WEBPAGINA N. WITTEBROODT. In dit deel: 1.1 De wereld van het World Wide Web. 1.2 Wat is HTML en wat is het niet?

Transcriptie

1 HTML5 STRUCTUUR VAN DE WEBPAGINA DEEL 1 In dit deel: 1.1 De wereld van het World Wide Web 1.2 Wat is HTML en wat is het niet? 1.3 Browsers 1.4 Grondbeginselen van HTML 1.5 De 1ste webpagina 1.6 Paginastructuur van HTML5 1.7 Een HTML-editor kiezen 1.8 Blokelementen, inline elementen en stijlen 1.9 Directory s maken 1.10 Grafisch materiaal 1.11 Hyperlinks 1.12 Metadata en zoekmachines 1.13 Tabellen 1.14 Formulieren 1.15 Video, audio, canvas en iframes 1.16 HTML testen/oudere browsers N. WITTEBROODT

2 1 1.1 De wereld van het World Wide Web Definitie Er zijn veel woorden nodig om het World Wide Web te beschrijven: het is een grafisch hypertext-informatiesysteem, het werkt wereldwijd, het is interactief, dynamisch en gedistribueerd, het werkt op verschillende platforms en het werkt via Internet Hypertext-informatiesysteem Wanneer je wel eens op Internet hebt gesurft, is het concept dat aan het WWW ten grondslag ligt, je al bekend: hypertext. Bij het gebruik van hypertext lees je een tekst niet van boven naar beneden en van voor naar achter, maar kan je naar believen naar een ander punt springen om de informatie daar te bekijken, vervolgens teruggaan naar het uitgangspunt of juist weer andere onderwerpen selecteren Grafisch en eenvoudige navigatie In het Web kan een tekst afbeeldingen, geluiden en videobeelden bevatten en is de interface uiterst gemakkelijk te bedienen je springt van koppeling naar koppeling, van pagina naar pagina, op welke locaties of servers dan ook Het Web werkt op meerdere platforms Wanneer je op Internet kan komen, kan je ook het World Wide Web betreden. Het doet er niet toe welk systeem je gebruikt en of je de voorkeur geeft aan Windows of aan Macintosh, het WWW is niet gebonden aan een bepaald systeem en houdt zich niet bezig met de concurrentiestrijd tussen de verschillende softwarefirma s. Je krijgt toegang tot het Web met een applicatie die een browser wordt genoemd, een soort blader- programma waarmee je in de beschikbare informatie kan grasduinen Het Web heeft toegang tot vele vormen van Internet-informatie Toen het World Wide Web gecreëerd werd, was één van de nieuwe voorzieningen ervan een nieuw Internet-protocol voor het beheer van hypertext-informatie op het Internet: HTTP of Hyper Text Transfer Protocol. HTTP is een eenvoudig protocol waarmee de hypertextdocumenten via het net snel tussen Web-browsers en servers kunnen worden verzonden. N. Wittebroodt Toegepaste Informatica Grafiweb

3 URL s: Uniform Resource Locators Een URL is een pointer, een (adres-)verwijzing naar gegevens op het Web. Dat kan een Webdocument zijn, een bestand op FTP, een gegevens-record in een database. De URL is een universeel, consistent middel voor het zoeken en opvragen van informatie voor de Web-browser. Voorbeeld van URL: Homepages Wanneer je op het Web gaat grasduinen, zal je de term homepage regelmatig tegenkomen. De homepage is de Web-pagina die wordt geladen wanneer je de browser start. Elke browser heeft zijn eigen standaardhomepage: vaak is dat de homepage van de locatie waar de browser werd ontwikkeld. Je kan de standaard homepage in de browser zodanig wijzigen dat je van daaruit elke gewenste pagina kunt starten. Als je een homepage maakt voor een eigen publicatie kan deze een menu bevatten van de items die zich dieper in het web bevinden, een inhoudsopgave van de server en andere algemene informatie. Webdesign Deel 1 HTML5

4 3 1.2 Wat is HTML en wat is het niet? Inleiding Elke pagina die je van het Web haalt is één document, geschreven in een taal die HTML (Hyper Text Markup Language) wordt genoemd. De HTML-module omvat de tekst en de structuur van het document, eventuele koppelingen met andere documenten en afbeeldingen of andere media. Er kunnen allerlei aanvullende talen en technieken worden gebruikt om geavanceerde webtoepassingen mogelijk te maken, maar de basis, de kern, is altijd HTML Markuptalen HTML is een van de markuptalen (markeertalen) die de afgelopen jaren zijn ontwikkeld. Kort samengevat bevat een markuptaal de regels voor het toevoegen van markup, beschrijvingen, in de vorm van speciale symbolen aan tekstdocumenten. Markup is nodig omdat computers nogal dom zijn als het om begrijpen van tekst gaat. Een computer ziet niet of een stuk tekst een samenvatting is, een titel, een kop of een alinea. Zonder aanvullende codering weet de computer niet hoe hij tekst zo moet weergeven dat het echt een document lijkt. Tekstverwerkers hebben voor die codering opmaakcodes, maar dat heeft één geweldig nadeel: die codes werken alleen als je de tekst bekijkt met behulp van die ene tekstverwerker op die ene computer. Bij markuptalen wordt dit comptabiliteitsprobleem opgelost door alleen gebruik te maken van de ASCII code (tekst zonder codering) en door de koppeling van structuurbeschrijving en presentatie te verbreken. Met name dit laatste is belangrijk. Bij structuurbeschrijving kenmerk je de delen van een tekst. Je zegt in feite dit is een titel of dit is een kop maar je zegt niets over hoe dat deel van de tekst moet worden gepresenteerd met behulp van speciale opmaak (lettertype, uitlijning, ). Maar er is meer. De presentatie, dat wil zeggen de manier waarop het document wordt opgemaakt voor weergave of afdrukken, wordt in zijn geheel overgelaten aan een browser, een programma dat speciaal is ontworpen om een beschreven document weer te geven op een bepaald type computer. Het onderscheid tussen structuur en presentatie is belangrijk, want juist daardoor is de markuptaal in staat om zonder haperingen te functioneren in een omgeving van meerdere platforms. Met een marktuptaal hoef je maar één versie van een document te maken. Dat document kan zonder problemen worden weergegeven met browsers die ontworpen zijn voor een Macintosh-systeem, UNIX-computers en alle versies van Windows. De browser weet steeds hoe hij het beschreven document moet weergeven op die specifieke computer. N. Wittebroodt Toegepaste Informatica Grafiweb

5 HTML5 een manier van denken HTML5: dé vernieuwing van HTML Hiervoor is betoogd dat het doel van markuptalen is het van elkaar scheiden van structuur en presentatie zodat je documenten kan maken die zonder problemen kunnen worden weergegeven op verschillende typlen computers. Met dat scheiden is het niet zo best gegaan. Tegen de tijd dat HTML 3.2 ontstond, was er al aardig de klad in gekomen. De reden daarvoor heeft te maken met de snelle commercialisering van het web. HTML-pagina s worden volgepropt met allerlei HTML-code die op een belachelijke manier is opgerekt om tijdschriftopmaak na te bootsen, maar het bijwerken en onderhouden van dergelijke pagina s is een nachtmerrie. Voor het corrigeren van fouten in de tekst zal je een weg moeten banen door een woud van codering. Kortom, de erosie die het onderscheid tussen structuur en presentatie in HTML heeft uitgehold, heeft het principe van HTML zwaar beschadigd. De hiervoor beschreven ontwikkeling heeft bij het World Wide Web Consortium (W3C), een nonprofit-organisatie voor het ontwikkelen van standaarden die verantwoordelijk zijn voor HTML, tot het inzicht geleid dat er iets drastisch moest gebeuren. De specificatie voor een nieuwe versie van HTML, versie 4.01 is daarvan het gevolg. Hoewel compatibel met vorige versies, is versie 4.01 ontwikkeld met het doel het verloren gegane evenwicht tussen structuur en presentatie te herstellen. Daarnaast is geprobeerd de ontwerpers van webpagina s te geven wat ze vroegen, namelijk beheersbaarheid van de opmaak van de pagina. Dat is gebeurd met het fenomeen dat Cascading Style Sheet wordt genoemd. HTML5 kan niet los gezien worden van de voorgangers, HTML 4.01 en XHTML. HTML5 is daar een voorzetting van, waarbij onderdelen zijn aangepast, toegevoegd en afgeschaft, maar alle oude webpagina s blijven werken. Met HTML5 beginnen we dus niet aan een nieuw web. De officiële schrijfwijze van HTML5 is zonder spatie, daarmee volg ik de schrijfwijze van de specificatie van het W3C Doel van HTML HTML staat voor Hypertext Markup Language. Met HTML wordt de structuur van de pagina aangegeven. Er wordt in code geschreven wat de kopteksten en alineateksten van een pagina zijn, welke afbeeldingen in de pagina moeten worden geladen en met hyperlinks wordt aangegeven wat de onderlinge relatie tussen pagina s is. HTML heeft in principe niets te maken met het uiterlijk van de pagina. In HTML wordt alleen de inhoud en de structuur beschreven. HTML is daarom geen programmeertaal. Het is een markeertaal. Vandaar ook de afkorting Hypertext Markup Language, oftewel een markeertaal die is gebaseerd op hypertext. Hyperlinks maar ook alle andere structuurkenmerken worden aangegeven met tags. Om met HTML te kunnen werken moet je weten welke tags er zijn en hoe ze genoteerd worden. Webdesign Deel 1 HTML5

6 Cascading style sheets Met CSS wordt het uiterlijk van de pagina weergegeven. CSS-code beschrijft hoe de kopteksten, alineateksten en afbeeldingen worden opgemaakt. In CSS wordt aangegeven welk lettertype wordt gebruikt, welke lettergrootte, letterkleur, uitlijning, regelafstand, witruimte tot andere onderdelen en meer. Met CSS is ook de opmaak van de pagina in te stellen in kolommen, kop- en voetteksten en kaders. CSS heeft niets te maken met de inhoud van de pagina. CSS koppelt de kracht van opmaakprofielen aan HTML en het Web. Met CSS maak je opmaakprofielen die browsers precies vertellen hoe de tekst die je hebt beschreven met HTML, moet worden weergegeven. Kort gezegd: in HTML bepaal je bv. de koppen en de paragrafen in CSS bepaal je de lay-out van die koppen en die paragrafen Programmeertalen Naast HTML en CSS kunnen programmeer- scripttalen worden gebruikt om webpagina s tot leven te brengen. JavaScript is zo n scripttaal. Deze wordt bijvoorbeeld gebruikt om acties na een klik op een knop uit te voeren of om onderdelen van een webpagina te manipuleren. JavaScript wordt in HTML5 achter de schermen gebruikt om browsers die HTML5 niet snappen, toch met HTML5 te kunnen laten werken. Een andere veelgebruikte programmeertaal is PHP. Deze taal wordt bijvoorbeeld toegepast om contentmanagementsystemen (kortweg CMS) zoals Joomla aan te sturen. PHP wordt daar onder meer gebruikt om pagina s samen te stellen aan de hand van informatie die in een database is opgeslagen De HTML5 methode De HTML5-methode maakt volop gebruik van de nieuwe mogelijkheden van HTML en CSS. Zij vereist dat je met beide vanaf de basis leert werken. Je begint met het schrijven van pure HTML. Daarbij wordt geen enkele aandacht geschonken aan presentatie. Vervolgens leer je CSS met de HTML-documenten verweven zodat een resultaat ontstaat waarover je volledige controle behoudt. Je schrijft code die uitblinkt in eenvoud en helderheid, die goedkoop en gemakkelijk is in onderhoud en een verbijsterende fraaie pagina op het scherm zet. HTML5 houdt in dat je HTML in het HTML-document alleen gebruikt voor het definiëren van structuur en dat je alle informatie die de browser nodig heeft voor de presentatie, opslaat in een style sheet. HTML5 is de toekomst voor het webontwerp. De kosten voor onderhoud van websites worden gereduceerd, bijwerken van presentaties wordt eenvoudiger en dus sneller en de mogelijkheden voor webontwerp worden oneindig veel groter door een consequente scheiding van structuur en presentatie. N. Wittebroodt Toegepaste Informatica Grafiweb

7 Verleden en toekomst SGML Standard Generalized Markup Language (SGML) is de basis voor HTML. SGML werd in 1988 een standaard toen de markuptaal werd goedgekeurd door de ISO. Kort gezegd is SGML een standaard voor elektronische uitwisseling van documenten HTML 1.0 De 1 ste browser met een grafische interface (Mosaic 1.0) die in 1993 het licht zag, was slechts in staat een klein deel van alle SGML-tags te verwerken. Veel meer dan het centreren van tekst, kiezen uit 4 lettergrootten en het scheiden van alinea s met een witregel was nog niet mogelijk. Alle pagina s leken op elkaar, ze hadden allemaal dezelfde grijze achtergrond en werkten met Times New Roman HTML 2.0 Van HTML 1.0 naar 2.0 was een geweldige stap voorwaarts. In de tussentijd werd ook het W3C opgericht. In HTML 2.0 konden achtergrondkleuren en afbeeldingen worden ingesteld. Formulieren en tabellen werden ondersteund HTML 3.2 Waarom geen 3.0? Het lukte W3C niet op tijd een specificatie gepubliceerd te krijgen waarover de leden het eens waren. HTML 3.2 was veel uitgebreider dan de HTML 2.0. Het ondersteunde style sheets, het aantal attributen voor het verfijnen van de opmaak werden uitgebreid HTML 4.1 Alle opmaak is verbannen naar style sheets XHTML en HTML5 Het is nog maar twee jaar geleden dat HTML5 als verre toekomst werd gezien. Alles draaide toen om XHTML, een vorm van HTML met zeer strikte regels. XTML was een reactie op het losbandige bestaan van HTML, waarbij elke browser zijn eigen interpretatie standaard had. Echter, de enige noodzakelijke eigenschap van de X in XHTML was dat deze door XMLparsers gelezen en begrepen kon worden. HTML5 kan dat ook waarmee de noodzaak voor een speciale X-versie van HTML is verdwenen. Webdesign Deel 1 HTML5

8 Verschil tussen HTML 4 en HTML5 Een wezenlijke verandering in HTML5 ten opzichte van het inmiddels 13 jaar oude HTML 4, is te vinden in de structureel andere opbouw van elementen. Waar HTML 4 elementen nog vooral om visuele weergave draaiden, draait het bij HTML5 om de functionaliteit van een element. Een element als <P> markeert in beide HTML s een paragraaf. In HTML 4 is dit eigenlijk de enige logische teksteenheid, waaraan geen vormgeving is gekoppeld. HTML heeft het arsenaal logische teksteenheden flink uitgebreid met elementen als <HEADER>, <SEC- TION>, <ARTICLE> en meer. Een HTML5 pagina kan dus uit logische eenheden worden opgebouwd, waarbij in het geheel niets over positie of vormgeving van die delen wordt vermeld. In de HTML5 pagina geef je alleen de onderlinge samenhang aan. Visuele plaatsing van verschillende onderdelen in de webpagina bepaal je via het stijlblad: met CSS3 dus Wie maakt de regels? Sinds 1994 wordt geprobeerd lijn te brengen in de talen waarmee websites worden gemaakt. Die talen zijn onder meer HTML en CSS. Daarvoor is het World Wide Web Consortium, kortweg W3C opgericht. In verschillende werkgroepen overleggen browserfabrikanten zoals Microsoft, Google, Mozilla en Opera. Omdat W3C ook allerlei andere webstandaarden beheert, vind je onder de leden ook bedrijven als Nokia, Vodafone, Walt Disney Internet Group en The American Institute of Architects. Het doel van bijvoorbeeld de HTML-werkgroep is afspraken maken over hoe een auteur in een webdocument aangeeft dat iets een hyperlink, een kop of een opsomming is, en hoe de browser daarmee om zou moeten gaan. Bij versie 4.01 hield het W3C de ontwikkeling van HTML voor gezien en werd alle energie gestoken in XHTML. Uit onvrede over de gang van zaken bij het W3C is in 2004 de Web Hypertext Application Technology Working Group (WHATWG) opgericht, een groeiende gemeenschap van mensen met interesse in de ontwikkeling van het web. De nadruk ligt op de ontwikkeling van HTML en API s. WHATWG is een initiatief van medewerkers van Apple, de Mozilla Foundation en Opera Software, ontstaan vanuit bezorgdheid over de ontwikkeling van webstandaarden door het W3C en een gebrek aan belangstelling voor HTML en de behoeften van websitebouwers bij het W3C. Het is overigens niet alleen de gedrevenheid van de WHATWG die de ontwikkeling van HTML5 voortstuwt. Ook de snelheid waarmee in browsers nieuwe mogelijkheden worden ingebouwd, heeft een verbijsterende sprong voorwaarts gemaakt. Met name Google (Chrome) maar ook Mozilla (Firefox) en Opera, brengen in hoog tempo updates voor de browser uit. Het resultaat is dat de nieuwste versies van alle toonaangevende browsers al veel nieuwe mogelijkheden ondersteunen. Dat is inclusief Internet Explorer 9 en dat is bijzonder én belangrijk voor de ontwikkeling van HTML. Het ligt voor de hand om te denken dat als er twee organisaties aan HTML werken, er ook verschillende soorten HTML5 zijn. Dat is een beetje waar, maar het W3C en WHATWG werken ondertussen wel samen. N. Wittebroodt Toegepaste Informatica Grafiweb

9 8 1.3 Browsers Inleiding In de voorafgaande paragrafen is een van de belangrijkste programma s al verschillende keren genoemd, de browser. Op elke moderne computer en mobiele telefoon is tegenwoordig een browser aanwezig. Tijdens het ontwerpen van webpagina s gebruik je de browser om te kunnen zien hoe de bezoekers jouw pagina s te zien krijgen. Het liefst beschik je over meerdere browsers om de verschillen goed te kunnen beoordelen. En als jouw pagina er in Internet Explorer heel anders uitziet dan in Firefox, zal je de code moeten aanpassen (of tweaken) om er voor te zorgen dat de pagina s er liefst in alle browsers gelijk uitzien. De laatste versies van Internet Explorer, Mozilla Firefox en Google Chrome zijn op vrijwel elke designer-pc aanwezig. Dit zijn ook de drie meest gebruikte browsers, met nog steeds Internet Explorer als nummer één. Elke browser heeft andere mogelijkheden en laat zich iets anders bedienen, maar het algemene doen is altijd hetzelfde: surfen op het web. Voor de beginnende webdesigner zijn de verschillen tussen de huidige browserversies niet meer zo belangrijk als enkele jaren geleden; de functionaliteit van browsers is grotendeels gelijk getrokken Microsoft Internet Explorer Internet Explorer is nog steeds de meest gebruikte browser. In januari 2011 was het marktaandeel van Internet Explorer ruim 50%. Dat is al veel minder dan de 90% dat het ooit was, maar toch een getal om rekening mee te houden. De brede toepassing van Internet Explorer klimt natuurlijk doordat de browser jarenlang standaard bij Windows werd geleverd. Internet Explorer 9 biedt een betere ondersteuning van de huidige webstandaarden en vooral: ondersteuning van HTML5. Internet Explorer heeft ook een standaard ingebouwde optie waarmee de opbouw van webpagina s is te analyseren. In Internet Explorer vind je de optie met Extra F12-ontwikkelingsprogramma s Mozilla Firefox Eveneens populair en een geduchte concurrent voor Internet Explorer is is Firefox. Deze is ooit ontstaan uit de failliete inboedel van de oerbrowser Netscape Navigator. Programmeurs die eerst voor Netscape werkten, hebben in eigen beheer een nieuwe browser: Firefox ontwikkeld. Ondertussen snoept Firefox marktaandeel af van Internet Explorer. In 2011 had Firefox een marktaandeel van 30%. Gebruikers van Firefox noemen als voordelen dat de browser sneller en stabieler is, beter ondersteuning biedt voor de nieuwste webstandaarden en dat er minder veiligheidsproblemen gekend zijn. Webdesign Deel 1 HTML5

10 9 Speciaal voor webdesigners zijn er verschillende handige Firefox-plugins ontwikkeld. Zoek bijvoorbeeld eens naar de plugins Firebug (snel HTML- en CSS-code inspecteren en aanpassen,) Yslow (de laadtijden van pagina s optimaliseren), ColorZilla (snel kleurwaarden opsporen en selecteren) en de Web Developer Toolbar (tal van handige ontwikkelhulpjes bij webdesign in een werkbalk). In de sectie Firefox Add-ons is webontwikkeling een aparte categorie. Neem eens een kijkje bij addons.mozilla.org/nl/firefox Ook in deze cursus gebruiken we enkele add-ons. Ze zijn gratis en eenvoudig te installeren Google Chrome In september 2008 heeft ook Google een eigen browser op de markt gebracht. Dit is Google Chrome. Deze browser neemt ondertussen de derde plaats in op de browserranglijst. Chrome is gebaseerd op dezelfde engine als Apple Safari en geeft de webstandaarden goed weer. Chrome is daarmee een goed alternatief voor Firefox. Los daarvan is het ook een prettig werkende en snelle browser. De uitbreidbaarheid is voor Chrome net zo n pluspunt als voor Firefox. Op vind je nuttige browseruitbreidingen. De extension Web Developer (dezelfde als die van Firefox maar aangepast voor Chrome) is een nuttige toevoeging, maar Editor Lite (complete webeditor in de browser) is ook aardig. N. Wittebroodt Toegepaste Informatica Grafiweb

11 Grondbeginselen van HTML De editor starten Voor deze 1 ste webpagina gebruik je de teksteditor die deel uitmaakt van het besturingssysteem. Als je met Windows werkt op een pc, open je het menu Start Programma s Bureauaccessoires Kladblok (in het Engels Notepad). De teksteditor wordt dan geopend. Ook al beschik je over een of ander fraai programma dat deel uitmaakt van het softwarepakket dat bij de computer is geleverd, of dat je hebt gedownload van Internet, je kan dat beter nu nog niet gebruiken. Dergelijke programma s komen later aan de orde. Nu gaat het om een aantal elementaire HTML-vaardigheden en dergelijke programma s kunnen het zicht daarop benemen. Gebruik de extensie.htm of.html om het tekstbestand op te slaan. Een pagina bekijken kan vanuit de Windows-verkenner De elementaire bouwstenen: elementen en tags Als je HTML schrijft, gebruik je elementen voor het definiëren van de structuur en de presentatie van het document, de links naar andere documenten en het gewenste gedrag. Elementen zijn bijvoorbeeld HEAD, BODY, P, BLOCKQUOTE en UL. Als je deze elementen in een tekst gebruikt, plaats je ze tussen een kleinerdanteken (<) en een groterdanteken (>) die samen punthaken worden genoemd. Het resultaat daarvan is <HEAD>, <BODY>, <P>, <BLOCKQUOTE> en <UL>. Op dat moment worden het geen elementen meer genoemd maar tags ( etiketten ). De elementen in HTML bestaan over het algemeen uit 3 bestanddelen: begintags, eindtags en inhoud. De meeste elementen hebben begintags en eindtags. De begintag is het element tussen punthaken: <HEAD>, <BODY>, <P>, <BLOCKQUOTE> en <UL>. De eindtag wordt gevormd door voor de naam van het element een schuine streep (forward slash) te plaatsen, ook weer tussen punthaken: </HEAD>, </BODY>, </P>, </BLOCKQUOTE> en </UL>. Als een browser een begintag tegenkomt, zal hij alle tekst die erop volgt beschouwen als behorend tot het type dat door de begintag wordt gedefinieerd. Pas als de browser een eindtag tegenkomt, wordt aan die situatie een einde gemaakt. Omdat elementen vaak worden genest, betekent een nieuwe begintag niet automatisch dat de vorige begintag niet meer geldig is. In feite trekt de browser uit de confrontatie met een nieuwe begintag geen enkele conclusie over iets anders dat die begintag. De browser accepteert alles wat je hem voorschotelt heel letterlijk. Als voorbeeld de opbouw van een paragraaf met behulp van het P element. <P>Deze tekst vormt een paragraaf.</p> Webdesign Deel 1 HTML5

12 11 Dit is belangrijk Elke element heeft een naam. De begintag bestaat uit de naam van het element tussen punthaken. De eindtag begint altijd met een slash gevolgd door de naam van het element, dit alles tussen punthaken. De meeste elementen bevatten inhoud tussen begintag en eindtag. Sommige elementen hebben geen inhoud. Sommige elementen hebben geen eindtag. Bij de bespreking van elementen zal ik steeds aangeven of het element inhoud heeft en of een eindtag vereist is. Het onderscheid tussen hoofdletters en kleine letters is voor elementen niet van belang: de namen van de elementen zijn dus case-insensitive, voor een browser zijn TITLE, Title, title één pot nat. Om het lezen van de markuptaal makkelijker te maken is het aangeraden de elementen in hoofdletters te schrijven. Tussen de begintag en de eindtag van een element plaats je de inhoud. Een hoofdoorzaak voor het ontstaan van fouten in HTML-documenten is het vergeten van de slash in de eindtag. Wees nauwkeurig bij het typen van HTML, spel de namen van de tags precies en vergeet noch de punthaken, noch de slash in een eindtag. Kort gezegd: In een editor maak je een HTML-tekstbestand. De browser leest en interpreteert de HTML-markeringen of HTML-tags. Tags staan tussen punthaken; ze bepalen het type effect dat je bekomt Attributen bieden mogelijkheden Elementen hebben attributen die flexibiliteit geven bij het schrijven van HTML. Elk element heeft eigen, unieke attributen. Vanzelfsprekend zijn er patronen te ontdekken tussen overeenkomstige elementen, maar je kan niet zo maar attributen instellen voor een willekeurig element Attributen en waarden Attributen hebben een waarde. Attributen en waarden zijn onlosmakelijk met elkaar verbonden. Steeds als je een attribuut gebruikt, zal je die ook een waarde moeten geven. Die waarde plaats je tussen dubbele aanhalingstekens: src= logo.gif width= 400 height= 200 Voorbeeld binnen een tag: <IMG src= logo.gif width= 400 height= 200 > Deze tag roept de afbeelding logo.gif aan met een breedte van 400 pixels en een hoogte van 200 pixels. N. Wittebroodt Toegepaste Informatica Grafiweb

13 Speciale tekens: entiteiten De tekst tussen HTML-tags, evenals de tags en hun argumenten, moeten worden weergegeven in een beperkte tekenset. In onze voorbeelden is dat steeds de verzameling der gewone hoofden kleine letters, de cijfers, en enkele leestekens. Speciale tekens en accenten moeten worden weergegeven in de volgende vorm: een ampersand (&-teken) gevolgd door de standaardbenaming van het speciale teken gevolgd door een kommapunt(;). Een dergelijke codering van een karakter noemt men in HTML een karakter-entiteit. In HTML-code kan je een entiteit op 3 manieren schrijven. Welke manier je ook kiest, een entiteit begint altijd met een ampersand (&) en eindigt altijd met een puntkomma. Tekstnotatie: dit is verreweg de gemakkelijkste manier om entiteiten weer te geven. Er is echter niet voor iedere entiteit een tekstnotatie, enkel voor de meest gangbare. &copy is bijvoorbeeld de entiteit voor het copyrightsymbool. Bij tekstnotatie voor entiteiten geldt bij wijze van uitzondering binnen HTML dat het onderscheid tussen hoofdletters en kleine letters van belang is. Decimale notatie: de decimale notatie voor het copyrightsymbool is &#169. Heximale notatie: programmeurs houden van het hexadecimale stelsel. Ze typen liever &#xa9 dan &copy. Alle hexadecimale waarden worden voorafgegaan door een kleine letter x. Enkele vaak gebruikte karakter-entiteiten zijn: Tekstnotatie Hexadecimale notatie Resultaat vaste spatie trema copyrightteken ««dubbel kleinerdanteken niet-teken afbreekstreepje geregistreerd handelsmerk gradenteken ± ± plusminusteken apostrof»» dubbel groterdanteken ¼ ¼ eenvierde in breuknotatie Webdesign Deel 1 HTML5

14 Basisstructuur HTML: HEAD en BODY Een HTML-document bestaat uit twee delen: de HEAD en de BODY. De HEAD wordt gedefinieerd met het HEAD element en bevat informatie over het document, de BODY wordt gedefinieerd met het BODY element en bevat de feitelijk inhoud van het document. Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. Een HTML-document heeft de volgende opbouw: <HTML> <HEAD> Informatie over het document. </HEAD> <BODY> Inhoud document. </BODY> </HTML> Het begrip nesten Hiervoor is al even aan de orde geweest dat sommige elementen worden genest in andere elementen. Je kan informatie op veel verschillende manieren nesten. Zo kan je vrijwel elk element nesten in het element BODY, met uitzondering van het element HEAD. Sommige elementen kunnen niet worden genest, bijvoorbeeld een link in een link. Het belangrijkste bij nesten is dat je het binnenste element steeds afsluit voordat je het buitenste element afsluit. Een voorbeeld: Volgende tekst moet verschijnen op de site: Over the Web Presents Stay In Touch. Het element voor cursief is I, en voor vet is B. Syntactisch onjuiste HTML: <B>Over the Web Presents <I>Stay in Touch.</B> </I> Syntactisch wel juist: <B>Over the Web Presents <I>Stay in Touch.</I> </B> N. Wittebroodt Toegepaste Informatica Grafiweb

15 De 1 ste webpagina De basistags De basisstructuur verder uitgewerkt: <!DOCTYPE html> <HTML> <HEAD> <META name= author content= hier komt je naam > <META name= keywords content= hier komen de sleutelwoorden > <TITLE>Restaurant Biryani Ronse</TITLE> </HEAD> <BODY> Inhoud document. </BODY> </HTML> DOCTYPE declaratie DOCTYPE geeft aan van welk type het document is. Dat is in het geval van HTML5 reuze eenvoudig: het type is html. HTML5 kent in tegenstelling tot HTML 4.1 maar één soort doctype. Het zetten van de doctype in HTML5 is trouwens niet meer verplicht maar wel zo netjes om te gebruiken. Deze code plaats je gans bovenaan de HTML-structuur. <!DOCTYPE html> Een titel op een pagina Met het TITLE element wordt een titel voor het document vastgelegd. Deze titel wordt niet weergegeven in het documentvenster, maar in de titelbalk of op het tabblad van de browser. De titeltag komt in de HEAD van het document. Daarnaast wordt de titel door zoekmachines geplaatst als kopje boven een zoekresultaat. Elk document moet een TITLE element bevatten. Het is verstandig een titel te gebruiken, die duidelijk maakt waar het document over gaat en op basis waarvan bijvoorbeeld gebruikers van een zoekmachine kunnen beslissen, of het bekijken van het document zinvol is. Het TITLE element wordt bijvoorbeeld als volgt gebruikt: <HEAD> <TITLE>Restaurant Biryani Ronse</TITLE> </HEAD> Webdesign Deel 1 HTML5

16 15 Oefening 1 1. Open kladblok. 2. Maak een HTML-document. Begin met de Doctype declaratie. 3. Maak vervolgens de basisstructuur aan: <HTML> <HEAD> <TITLE> Hier komt de titel van de titelbalk </TITLE> </HEAD> <BODY> Wat is websitebouwen toch gemakkelijk! </BODY> </HTML> 4. Maak een map Oefeningen. 5. Bewaar in deze map onder eerstewebpagina.html. 6. Bekijk nu het resultaat in de Windows-verkenner: Het META-element De auteur identificeren Naast de TITLE kan je ook nog metadata in de HEAD van een HTML document plaatsen. Metadata is informatie over de informatie op de pagina. Daartoe behoren onder andere de naam van de auteur, de gebruikte software, eventueel de bedrijfsnaam, contactgegevens enzovoort. Ik ga op deze plaats niet dieper in op de syntaxis van het META-element. Je wilt de auteur van de pagina vermelden en daar leent het META-element zich uitstekend voor: <META name= author content= natascha > Een META-element heeft minstens 2 attributen. In het voorbeeld heb ik er 2 gebruikt. Het META-element is uniek omdat de inhoud niet tussen een begintag en een eindtag staat, maar wordt verpakt in een attribuut content. Bovendien heeft het META-element geen eindtag. Je zal het META-element voor veel doeleinden leren gebruiken. Over het algemeen wordt van het META-element niets weergegeven in de browser. N. Wittebroodt Toegepaste Informatica Grafiweb

17 Trefwoorden voor zoekmachines Ook bij HTML is het belangrijk vanaf het begin de goede dingen aan te leren. Het opnemen van een META-element met trefwoorden is één van die goede gewoonten bij het schrijven van een webpagina: <META name= keywords content= restaurant, resto, ronse, renaix, indie, indisch, oudenaarde, trendy, eten, food, lounge, modern, suggestie, aanrader, menu, dessert, voorgerecht, hoofdgerecht, harmonie, sfeer, specialiteit, chef, keuken, uitstekend, service, maandmenu > Via het attribuut content geef je een lijst met trefwoorden, van elkaar gescheiden door komma s. Voor sommige zoekmachines speelt het onderscheid tussen hoofdletters en kleine letters een rol dus zou het slim zijn om 3 verschillende trefwoorden op te nemen: guestbook, Guestbook, Guest Book. Weer andere zoekmachines zullen dat helaas echter beschouwen als een vorm van spamming waarbij je probeert een hogere prioriteit te krijgen in de lijst met zoekresultaten. Een opmerking over zoekmachines De meeste zoekmachines gebruiken de metadata met trefwoorden om je pagina op te nemen in de index. Er zijn regels voor dit soort dingen, maar die verschillen van zoekmachine tot zoekmachine. Op het web is veel te vinden op de methoden die je kan aanwenden om een webpagina hoger te krijgen in de index van zoekmachines. Zo zal de ene zoekmachine automatisch alle woorden negeren die meer dan 7 keer voorkomen in de string met trefwoorden, ook al worden ze op een andere manier gepresenteerd. Het is belangrijk kennis te nemen van de regels die zoekmachines hanteren. Het wordt steeds moeilijker ze voor de gek te houden De tekensetbepalen De tag <META> kan dus onderdak bieden aan verschillende attributen, de ene al belangrijker dan de andere. Het attribuut charset is een aanrader. Dit attribuut bepaalt uit welke tekenset de browser de letters, cijfers, leestekens en meer moet halen. <META charset="utf-8"> Oefening 2 1. Voeg in het document eerstewebpagina.html je naam toe evenals een lijst van sleutelwoorden. Vermeld eveneens de tekenset. Gebruik hiervoor het META-element. 2. Bewaar onder dezelfde naam. Webdesign Deel 1 HTML5

18 JOOMLA WEBONTWERP DEEL 4 In dit deel: 4.1 Wat is Joomla? 4.2 Installatie 4.3 De Joomla website verkennen 4.4 Artikelen 4.5 Soorten webpagina s 4.6 Menu s 4.7 Extensies in Joomla 4.8 Templates downloaden en aanpassen 4.9 Gebruikers laten inloggen en bijdragen 4.10 De site publiceren op een webserver 4.11 Beveiligen van admin & site 4.12 De site promoten 4.13 Artisteer N. WITTEBROODT

19 Wat is Joomla? Situering Joomla is een Content Management System, ook wel kortweg CMS genoegd. Een CMS is een software-oplossing, waarmee het mogelijk is om een website te maken, te vullen en te onderhouden. In meer algemene zin is een CMS een systeem om inhoud (informatie) te beheren. Dat omvat vrijwel elk informatiesysteem, al dan niet geautomatiseerd. In de praktijk wordt de term CMS echter gebruikt voor systemen waarmee websites worden gemaakt. Joomla is een zogenaamd open source CMS. Dat betekent dat de programmacode (meestal broncode genoemd) vrij beschikbaar is. Bij commerciële aanbieders is dat meestal niet het geval. Je mag het systeem dan gebruiken, maar je kan zelf niet wijzigen of uitbreiden. Bij een open-source systeem is dat juist de kracht. Het systeem is open dat wil zeggen dat iedereen in feite verbeteringen kan in aanbrengen. En dat gebeurt ook. Naast een zeer grote groep enthousiaste en vaak kundige gebruikers kent Joomla ook een core team met ontwikkelaars. Dit zijn de programmeurs die zich actief bezig houden met het verbeteren van het systeem. Joomla is ondergebracht in een stichting zonder winstoogmerk, met de naam Open Source Matters Waarom een CMS? Waarom zou je eigenlijk een CMS gebruiken? Er zijn toch tal van andere mogelijkheden om een website te bouwen? Denk aan het gebruik van bijvoorbeeld Dreamweaver, Flash Dit zijn ook heel goede programma s voor het bouwen van een website. Het grote voordeel echter van het inzetten van een CMS is dat het je in staat stelt om de informatie en functies op je website op een goede en structurele manier te onderhouden. Je kan eenvoudig met meerdere gebruikers aan een website werken, waarbij niet iedereen over diepgaande kennis hoeft te beschikken. Een CMS stelt je in staat om de inhoud van je site dynamisch te maken. Dat wil zeggen dat de informatie die je plaatst weer geactualiseerd en vernieuwd wordt. Grote websites maken daarbij allemaal gebruik van een CMS. Zonder een dergelijk hulpmiddel zou de website niet te onderhouden zijn Voordelen Joomla is een zeer gebruiksvriendelijk Content Management Systeem. Dit betekent dat je kosteloos zelf de website kan bijhouden zonder enige kennis van HTML, FTP of CSS. Extra kennis kan natuurlijk geen kwaad, integendeel. Joomla scheidt de opmaak en de inhoud van de website netjes van elkaar. N. Wittebroodt Toegepaste Informatica Grafiweb

20 284 Joomla heeft zich inmiddels bewezen als één van de beste systemen op dit gebied. Dit blijkt wel uit het feit dat wereldwijd miljoenen websites gebruik maken van de flexibiliteit van Joomla. Joomla maakt het mogelijk de site heel gemakkelijk te beheren. Je kan nu al een berichtje schrijven voor de homepage van volgende maand, en Joomla zorgt er automatisch voor dat het verschijnt op de datum die jij bij het schrijven prikt. Ook het toevoegen en bijhouden van hyperlinks naar tientallen of honderden pagina s gaat heel gemakkelijk. Joomla houdt hyperlinks voor je bij en zorgt er bijvoorbeeld voor dat, als je een nieuwspagina toevoegt, automatisch een link verschijnt in de lijst met laatste nieuws. Joomla is uitermate geschikt voor dynamische en interactieve websites. Joomla is open source software en tevens gratis verkrijgbaar. Dit in tegenstelling tot andere Content Management Systemen die over het algemeen zeer prijzig zijn. Open source software heeft zich inmiddels bewezen als betrouwbaar alternatief voor dure systemen. Het open source karakter van Joomla heeft als gevolg dat wereldwijd continu wordt gewerkt aan nieuwe uitbreidingen op het systeem. De mogelijkheden om een Joomla website uit te breiden zijn daardoor bijna onbeperkt. Een webwinkel, nieuwsbrievensysteem, fotogalerij, meerdere talen, formulieren: praktisch alles is mogelijk binnen het Joomlaframework. Joomla wordt ondersteund door een zeer grote wereldwijde community van actieve developers. Dit betekent dat het systeem voortdurend wordt doorontwikkeld en verbeterd. De hoeveelheid informatie en ondersteuning die op het gebied van Joomla te vinden is op het internet is zeer omvangrijk. Het aantal bedrijven dat diensten aanbiedt op het gebied van Joomla is de laatste jaren explosief gegroeid. Ben je niet tevreden over het bedrijf dat jouw Joomla-website heeft gebouwd of onderhoudt? De universaliteit van het systeem maakt dat je zeer gemakkelijk kan overstappen naar een andere dienstverlener. Kortom: je bent niet langer afhankelijk van één, wellicht duur, webdesign- of reclamebureau. Joomla is een webbased-applicatie. Een internetverbinding is het enige wat je nodig hebt om een website te updaten en onderhouden Nadelen Door het volledige open source-karakter ben je voor support op de behulpzaamheid van de community aangewezen, of je moet hiervoor een commerciële aanbieder in de arm nemen. De ontwikkeling van Joomla verloopt relatief langzaam en de toekomst blijft onzeker. Joomla kent voor beginners een wat steile leercurve. Door de populariteit van het systeem worden Joomla sites nog wel eens het slachtoffer van hackers. Daarom wordt in deze cursus uitgebreid aandacht besteed aan de beveiliging van je website. Webdesign Deel 4 Joomla