Pagina 1 - Websites maken met HTML en CSS

Transcriptie

1 Pagina 1 - Websites maken met HTML en CSS

2 Een website gaan bouwen is niet alleen een leuke hobby. Je kunt er ook je werk van maken. Webdesigners zijn gewild, goede webdesigners hebben altijd werk. Elk bedrijf heeft wel een website, maar 80% van de websites is slecht. Dat komt omdat het er vaak bij hing. Terwijl de meeste ondernemers en nu toch wel achter komen dat een website eigenlijk van groot belang is voor een bedrijf of onderneming. Het is dus meer dan ooit de moeite waard om te leren hoe je een website maakt en dat je weet wat HTML en CSS is. Hoe begin je daar nu eigenlijk mee? Wat heb je nodig, wat komt er allemaal bij het maken en onderhouden van een website kijken en wat kost dat eigenlijk? Allemaal vragen die voorbij komen op het moment dat je voor het eerst aan de slag gaat met een website. Voor wie is dit boek bedoeld? In ieder geval voor beginners. Als je nog nooit een website hebt gemaakt en geen idee hebt hoe zoiets in zijn werk gaat. De tweede groep: Als je wel eens een website bent begonnen bij een gratis website dienst zoals Wordpress.com, blogspot.nl, blogger.com of Wix.com. Daar kun je zonder technische kennis een website beginnen, maar je merkt al snel dat dat ook beperkingen kent. Je kunt niet alles doen wat je zou willen. De derde groep: Je bent wel eens bezig geweest met wat basiskennis van HTML. Je hebt een simpele pagina gemaakt, maar hoe je dat allemaal online krijgt, hoe je een domeinnaam aan je website koppelt, dat soort zaken, dat gaat nog een stap te ver. De vierde groep: Mensen die al best enige kennis van zaken hebben, maar je wilt toch even weten hoe de basis ook alweer was. Hoe pak je het nu aan. De laatste groep: Jij hebt wel een goede kennis van HTML en CSS. Je weet hoe je een website gaat bouwen, maar je wilt niet steeds hetzelfde verhaal houden. Je wilt duidelijk en eenvoudig een uitleg op papier hebben die je door kunt geven aan beginners. Ook daarmee heb je dus een prima start in handen, dit eboek. Pagina 2 - Websites maken met HTML en CSS

3 Waar gaat dit boek over? Ik ga je uitleg geven over domeinnamen, over hosting en over het uploaden van je website. Daarnaast ga ik je vertellen hoe je het beste kunt starten met bouwen. Wat is HTML en CSS? Wat is javascript, PHP en al die termen. Wat betekenen ze en wat kun je er mee. Vervolgens geef ik nog enkele specifieke voorbeelden over de aanpak van het starten met een website. Naar mijn idee is het het meest handig als je eerst dit hele boek eens doorneemt. Daarna kun je de verschillende onderdelen stap voor stap daadwerkelijk uitvoeren. Onderdelen die je al weet kun je gerust overslaan, maar wellicht kom je toch zaken tegen die je nog niet wist. Ik hoop dat je met dit eboek een goed startpunt hebt en dat je aan de slag kunt om een mooie website te gaan bouwen. Ik wens je er veel succes mee! April 2013, Bjorn Simmering Pagina 3 - Websites maken met HTML en CSS

4 Hoofdstuk 1 Mijn verhaal Meer dan tien jaar geleden vatte ik eens het plan op om een website te gaan maken. Ik had werkelijk geen idee hoe ik dat moest doen. Ik keek wat rond op internet en zag dat je met Microsoft Word een webpagina kon maken. Leuk natuurlijk, maar wat een ramp. Deze pagina plaatste ik op de gratis webruimte van mijn internetprovider. Dat ging nog eens traag ook... weet je wel met zo n telefoon modem. Maar goed. Dat kon de pret niet drukken, dat deed het resultaat wel. Een hoop code en de website zag er niet uit. Verder kijkend hoorde ik dat je voor een website HTML code moest gebruiken. Nu ben ik niet dom, maar dat leek me toch teveel van het goede. Toch maar een simpel boekje gekocht en zowaar, na een paar dagen ploeteren had ik een website online staan. Dit wilde ik graag leren aan andere mensen en dan met name aan de leerlingen op de school waar ik werkte. Zo kwam het allereerste artikel op HTML site te staan. Eerst nog op die gratis server, maar na een tijdje onder een eigen domeinnaam! Kijk en nu was ik ineens de trotse eigenaar van een eigen.nl domeinnaam. We schrijven Allemaal leuk en aardig, maar in de jaren erna groeide de website uit tot een grote website waar anderen leerden hoe je zelf een website kon maken. Inmiddels heb ik aan honderden, zo niet duizenden mensen uitgelegd hoe ze een website moeten maken, wat ze hiervoor nodig hebben en hoe ze aan de slag kunnen gaan. In 2009 besloot ik een cursus te maken voor iedereen die echt een stap verder wilde gaan met leren. Ik bundelde al mijn kennis tot een uitgebreide cursus waarin ik stap voor stap uitleg gaf over HTML, CSS en meer. Vorig jaar kwam HTML5 steeds meer in opmars. Dat deed mij besluiten om een eboek te schrijven met daarin de basis van het bouwen van een website. Dat eboek ligt nu voor je. Gebaseerd op HTML5 leer je hierin de eerste schreden op het gebied van websites maken. Als je dit boek hebt doorgelezen dan weet je termen en begrijp je hoe websites in elkaar steken. Ik zou willen dat er in 2000 een document zoals dit was zodat ik niet alles zelf hoefde te leren. Dat was er niet, dus heb ik door schade en schande, proberen enzovoort me alles eigen gemaakt. Dat is nu anders. Hier heb je de eerste stap. Ga op pad om internet te ontdekken met alle mogelijkheden die er tegenwoordig zijn. Een hele uitdaging! Pagina 4 - Websites maken met HTML en CSS

5 Hoofdstuk 2 Het internet Ik ga hier geen geschiedenisboek van maken. Mocht je interesse hebben in het ontstaan van internet en de enorme groei die internet heeft doorgemaakt, dan verwijs ik je graag naar Wikipedia. Op deze website kun je alles lezen wat je maar wil over dit onderwerp. Nee ik wil het hebben over de manier waarop je met internet verbonden bent en op welke manier je daar met een website een andere dimensie aan kunt geven. Vroeger (zo n 25 jaar geleden) was ik erg geïnteresseerd in auto s. Een BMW 7 serie vond ik toen een erg mooie auto. Omdat ik daar alles van wilde weten nam ik de moeite om naar een BMW dealer toe te gaan en op mijn allernetste te vragen of ze misschien een autofolder voor me hadden. Meestal strandde dat al bij de voordeur omdat die mannen in nette pakken er wel erg streng en druk uitzagen. Dus besloot ik de BMW importeur een nette brief te sturen en zowaar, na een week of twee kreeg ik een mooie glanzende folder in de bus. Alles is anders geworden en nu zou ik voor informatie, binnen 2 minuten alles weten wat ik weten wilde. Je typt een domeinnaam in of je geeft een zoekopdracht en binnen no time staat het voor je neus. Dat is de kracht van internet. Je hebt alles wat je weten wilt met een paar klikken op je muis op je scherm staan en je kunt alles volgen, alle informatie is beschikbaar. Hierin schuilt ook een gevaar, maar daar ga ik in dit eboek verder niet op in. Het internet is dus een verzamelplaats geworden van informatie. En deze informatie komt op allerlei manieren naar je toe. Met steeds snellere verbindingen kun je video kijken, televisie programma s volgen, boeken downloaden en veel, heel veel tekst lezen. De uitdaging is om hier een onderdeel van te gaan vormen. Je hoeft niet bang te zijn dat datgene waar jij wat over kwijt wilt, nog niet te vinden is. Integendeel. Over alles is op internet geschreven. Alleen jij kunt het verschil maken door een website te maken met jouw invalshoek, jouw uitstraling en jouw manier van schrijven en tonen. Deze uitdaging ga je aan met dit eboek. Je maakt een begin met het bouwen van je eigen website, je eigen plek op het wereldwijde web. En dan kun je je maar beter goed voorbereiden. Pagina 5 - Websites maken met HTML en CSS

6 Doe je mee? Hoofdstuk 3 Domeinnamen Voordat je een website kunt starten heb je een domeinnaam nodig. Nou ja, dat is niet helemaal waar, maar toch adviseer ik dat wel. Ik bedoel het volgende: Je krijgt bij het bedrijf waarbij je een internetverbinding hebt een beetje webruimte cadeau. Een hoeveelheid waarmee je kunt experimenteren. De domeinnaam die daar bij hoort is zoiets als Probeer dat maar eens uit te leggen aan iemand die wil weten waar je website te vinden is. Dan kun je beter een domeinnaam vastleggen. Een domeinnaam is de eerste stap die je moet nemen als je een website maken serieus neemt. En dat hoeft echt niet veel te kosten. Soms is er een actie bij een bedrijf dat domeinnamen en hosting aanbiedt (een hostingprovider, zodadelijk meer daarover). Een domeinnaam kost je dan 2 of 3 euro. Op dat moment ben jij een jaar lang eigenaar van die domeinnaam. Je kunt daar dus niet erg de mist mee ingaan. Op het moment dat een andere naam je beter lijkt kun je altijd nog overstappen. Maar toch een advies. Denk goed na over de naam die je wilt gaan gebruiken. En ga dan onderzoeken of die naam nog vrij is. Een paar tips hierbij: Kies voor een.nl domeinnaam Probeer een naam vast te leggen zonder streepje Gebruik je voor en achternaam of als domeinnaam Let er op dat het gemakkelijk uit te spreken is Gebruik geen cijfers in de domeinnaam Controleer de naam op sidn.nl Leg de domeinnaam vast op bijvoorbeeld een website als Mocht je een goede naam hebben, die al bezet is, dan kun je overwegen om de eigenaar van die domeinnaam te benaderen of je deze mag kopen. Dat kan wel eens in je voordeel uitvallen, aangezien een bestaande domeinnaam al wat ouder is en dus meer waarde heeft. Maar dat kan tevens een duurdere aangelegenheid zijn. Dus komt niet te wanhopig over. Probeer dan een naam te kiezen die misschien wat minder goed is, maar wel betaalbaar. Aan jou de keuze! Pagina 6 - Websites maken met HTML en CSS

7 Hoofdstuk 4 Wat is hosting? Hosting is je plekje op internet. Hosting is als het ware een grote computer die is aangesloten op het internet vanuit een grote beveiligde serverruimte. Tenminste als je hosting afneemt van een hostingbedrijf. Je kunt in principe ook vanuit thuis een computer laten draaien als host, maar dan moet deze 24 uur per dag aan staan en online zijn. Los van deze zaken dien je alle installaties van software, hardware en beveiliging zelf te organiseren. Een hostingbedrijf doet dit allemaal voor je. Nu zul je begrijpen dat ze niet een computer gebruiken voor enkel jouw website. Nee ze zetten deze computer vol met meerdere sites die allemaal naast elkaar staan te draaien. Deze sites hebben geen last van elkaar en je kunt ze niet tegelijk benaderen. Als zo n computer een storing heeft, dan heeft dat natuurlijk wel consequenties voor al die websites. Om een eenvoudige website in de lucht te houden heb je geen enorme pakketten nodig. Een normaal hosting bedrijf zal een pakket aanbieden die alle functies heeft die je mag verwachten. Denk hierbij aan zaken als ondersteuning voor PHP (kom ik verderop nog op terug), adressen aanmaken, databases gebruiken, subdomeinen aanmaken en nog veel meer. Als een hostingbedrijf aangeeft dat je extra moet betalen om PHP te installeren dan raad ik je aan om snel weg te rennen. Dat kan tegenwoordig niet meer! Voor een hostingpakket van een gemiddelde website moet je rekenen op een prijs tussen de 25 en 100 euro per jaar. Soms zit daar een domeinnaam al bij inbegrepen. Bij andere bedrijven moet je dit nog apart betalen. Veel hostingbedrijven roepen dat hun servers een uptime hebben van 99,9%. Dat wil zeggen dat de servers in het verleden 99,9% van de tijd bereikbaar zijn geweest. Dit biedt natuurlijk geen garanties voor de toekomst. 100% uptime is wat lastiger te bieden. In feite komt het er dan op neer dat je website op twee verschillende servers staat te draaien. Zodra de ene server dan uitvalt moet de andere server het overnemen. Dergelijke opties zijn natuurlijk wel duurder en de vraag is of het echt haalbaar is en of je het echt nodig vindt. Wanneer je hosting besteld dan krijg je ook toegang tot een beheersysteem. Van hieruit kun je Pagina 7 - Websites maken met HTML en CSS

8 allerlei zaken regelen die te maken hebben met je website. Denk hierbij aan het aanmaken van adressen, het bekijken van statistieken, het beheren van databases enzovoort. Bekende beheersystemen zijn Cpanel en DirectAdmin. Beide systemen bevatten soms ook de mogelijkheid om bepaalde software automatisch te installeren. Zo kun je bijvoorbeeld een forum installeren of Wordpress, met een enkele muisklik. Bij je hosting krijg je ook een mail met allerlei gegevens. Deze gegevens moet je goed bewaren. hier staan wachtwoorden en gebruikersnamen in die je nodig hebt. Zo vind je er de gebruikersnaam en het wachtwoord voor je adres(sen). Ook krijg je een gebruikersnaam en wachtwoord voor FTP gegevens. Deze gegevens zijn belangrijk voor het moment waarop je een website online wilt gaan zetten. Hoe je dat doet leg ik uit in hoofdstuk 6. Pagina 8 - Websites maken met HTML en CSS

9 Hoofdstuk 5 Wat heb je nodig? Naast hosting heb je nog wat zaken nodig om aan de slag te kunnen met het maken, het bouwen van een website. In principe kun je alles doen met gratis middelen, te krijgen op internet, of standaard op je computer geinstalleerd. Soms loont het de moeite om software te kopen zodat je net wat meer mogelijkheden hebt. Natuurlijk heb je ook duurdere producten zoals Adobe Dreamweaver, Photoshop of Indesign. We laten dergelijke producten nu buiten beschouwing. Mocht je toch met zoiets aan de slag gaan dan kan dat overigens ook gewoon. In Dreamweaver kun je bijvoorbeeld gewoon met HTML code aan de slag. En uitgebreid ook! Als je een computer of laptop hebt met daarop Windows dan kun je de volgende software gebruiken: Kladblok Irfanview HTML kit Heb je een Apple computer of laptop dan raad ik je aan om te werken met Teksteditor Graphic converter BBEdit Daarnaast kun je Firefox en Chrome als extra browsers installeren. Bij Firefox kun je vervolgens een plugin toevoegen waarmee je bestanden naar je webruimte kunt uploaden. Een zogenaamde FTP plugin. Kladblok Onder Windows staat kladblok standaard geinstalleerd. Met dit eenvoudige programma kun je al je code voor een website regelen. Je voert HTML code en CSS code in en je slaat het bestand op als.htm bestand. Daarna kun je het bestand in een browser bekijken, je ziet dan een gewone webpagina. Je moet het bestand niet opslaan als een.txt bestand, want dan zie je de pagina niet als webpagina maar als een tekstbestand. Irfanview Dit gratis programma is bij uitstek geschikt om grote afbeeldingen kleiner te maken en daarmee geschikt te maken voor het web. Je hebt hier meer mogelijkheden mee dan met bijvoorbeeld Paint. Irfanview kun je vinden op de website: Er is ook een Nederlandse vertaling beschikbaar waardoor het werken met dit programma nog Pagina 9 - Websites maken met HTML en CSS

10 iets makkelijker wordt. HTML kit Wanneer je serieus aan de slag gaat dan kun je een stapje verder gaan dan kladblok en een HTML editor aanschaffen. HTML kit is zo n editor. Hiermee kun je eenvoudig html codes toevoegen en aanpassen. Je ziet ook meteen in beeld wat je doet en wat voor resultaat dit heeft. HTML kit is ook gratis en een van de meest uitgebreide html editors die je momenteel kunt vinden. De editor HTML kit, kun je vinden op de website Daar moet je kiezen om HTML kit 292 te downloaden. Dit programma werkt in Windows 8 en kan zelfs nog werken op Windows 95. Een aanrader! Teksteditor Ook op een Apple computer staat een programma om tekstbestanden in te maken. Dit heet teksteditor. Hiermee kun je dus ook HTML pagina s en CSS pagina s aanmaken. Dit gaat op dezelfde manier als met een Windows computer, altijd opslaan als.htm en.css en de bestanden worden als een webpagina weergegeven. Graphic Converter Het programma Graphic converter is nog een stuk uitgebreider dan het programma IrfanView. Met dit programma kun je alles wat je nodig hebt om een afbeelding te maken, te bewerken en te verkleinen. Ikzelf kan niet zonder dit programma. Het programma is te downloaden in een shareware versie. Als onmisbare tool kun je het ook aanschaffen in de App store voor 35 euro. Meer over dit programma op BBEdit DE software van BBEdit is ook weer extra handig als je meer gaat doen met websites bouwen. Dit is een volwaardige html editor en biedt extra handige instrumenten zoals een ingebouwd FTP programma. Zo kun je een bestand wat al op de server staat online bewerken en direct op de server opslaan. BBEdit kost wel een paar dollar, maar dan heb je de beste HTML editor voor de mac naar mijn idee. Meer informatie kun je vinden op: Firefox en Chrome zijn naast Internet Explorer (voor Windows) en Safari voor Mac OS X, de meest gebruikte browsers. Je moet een website die je gemaakt hebt in meedere browsers testen wil je zeker weten dat alles goed werkt. Op een Apple computer staat geen Internet Explorer. Daarvoor is er een handige website in de lucht waarmee je de website die je hebt gemaakt toch kunt testen: Ideaal om te zien of de zaken die je zo mooi voor elkaar hebt in Chrome, ook wel werkt in een oudere versie van Internet Explorer. Pagina 10 - Websites maken met HTML en CSS

11 Hoofdstuk 6 HTML Wanneer je een website maakt heb je HTML nodig. HTML betekent HyperText Markup Language. HTML bestaat uit codes die tags worden genoemd. Zo n tag wordt opgebouwd uit scherpe haakjes, de < en de >. Tussen deze haakjes komt een code te staan. Dat ziet er als volgt uit: [afbeelding opzet tag html] Zoals je las is HTML een markup language. Dat betekent dat het een opmaak taal is. In tegenstelling tot wat vaak gedaan werd tot een paar jaar terug, kun je daarmee niet een website een uitstraling geven. Je gebruikt het om de website van een opbouw te voorzien. Met een voorbeeld zal ik het wat duidelijker maken. Als je een auto hebt bestaat deze uit een motor en de carosserie. HTML is de motor en CSS is de carosserie, hoe het er uit ziet. Wanneer je wilt zorgen dat de auto zelf de ruitenwissers aanzet als het regent, dan gebruik je javascript. In feite schets ik het nu heel simpel, maar dit is als het ware de basis. Er zijn heel veel tags. De allereerste tag die je moet weten is de tag <html>. Daarmee geef je aan een browser (zoals Firefox) aan, dat het hier gaat om een html document. Aan het einde van de pagina sluit je af met </html>. Alle code die je hierna plaatst zal niet meer gebruikt worden. Overigens komt er voordat je deze tag gebruikt nog wel een andere tag,. Dit is de zogenaamde doctype. Hiermee vertel je de browser welke versie van html je gaat gebruiken. Om het gemakkelijk te maken is er voor html5 een eenvoudige doctype bedacht: <!DOCTYPEhtml> Deze tag hoef je niet af te sluiten aan het einde van het document. Het voert te ver om in document alle tags te beschrijven, maar enkele belangrijke tags wil ik wel even de revue laten passeren. Pagina 11 - Websites maken met HTML en CSS

12 <head>hiermee open je het gedeelte van de html code waar je zaken in plaatst die nodig zijn voor een webpagina, maar niet zichtbaar moeten zijn in de browser. <title>deze plaats je in <head> Het bevat de titel van de webpagina. <body>hiermee start je de feitelijke webpagina, datgene wat zichtbaar moet worden voor de bezoeker. <header>dit is de kop van website, waar je bijvoorbeeld het logo in plaatst. <nav>de navigatie van een website plaats je hier in. <article>deze tag gebruik je om aan te geven waar een artikel komt te staan. <footer>hierin plaats je de onderzijde van de webpagina, bijvoorbeeld met adresgegevens of copyright. <h1>hierin plaats je de titel, koptekst van een artikel of pagina <h2>t/m <h6>gebruik je voor tussenkopjes van verschillende groottes <p>deze tag wordt gebruikt voor het opzetten van een paragraaf met tekst. <div>deze tag bepaalt een gedeelte van een webpagina. In eerdere versies van HTML werd deze tag veel gebruikt, in de huidige versie (HTML5) is een deel van de div tags vervangen door bijvoorbeeld <nav>, <article> en <footer>. <em>nadruk leggen op een woord of een stuk tekst (schuingedrukt) <strong>nadruk leggen, maar dan vetgedrukt. <ul>en <ol>opzet voor het maken van lijsten, welke vaak gebruikt worden om de navigatie te maken. Pagina 12 - Websites maken met HTML en CSS

13 Een eenvoudige, eerste webpagina kan er dan in HTML als volgt uitzien: <!DOCTYPEhtml> <htmllang="nl"> <head> <metacharset="utf-8"/> <title>untitled</title> <styletype="text/css" title="text/css" media="all"> <!-- header, footer, nav, article, aside, section{ display: block; } --> </style> </head> <body> <header> <h1><abbrtitle="hypertextmarkuplanguage">html</abbr>5,& structuuraanbrengenineenhtml5document</h1> <nav><ul> <li><ahref="/archief/">archief</a></li> <li><ahref="/about/">about</a></li></ul> </nav> </header> <article> <h2><code>nav</code>isnietbedoeldvoor<em>alle</em>links</h2> <p>maarhet<code>nav</code>elementbevatwelvaaklinks. Niet<em>alle</em>linkshebbende<code>nav</code>nodig.</p> </article> <article> <h2>de<code>doctype</code>. Watnogmeer?</h2> <p>hebjede<code>doctype</code>dankunjehtml5gaanleren.</p> </article> <aside> <h2>html5links</h2> <p>meerlinksoverhtml:</p><ul> <li><ahref=" <li><ahref=" </aside> <footer> <p>copyright <ahref=" </footer> Pagina 13 - Websites maken met HTML en CSS

14 </body> </html> Je ziet hierboven al een nieuw stukje verschijnen waarin gewerkt wordt met CSS. De CSS code wordt geregeld door in de head <style> toe te voegen. Je kunt style in een html document plaatsen, maar je kunt er beter een apart document voor maken. Daarover in het volgende hoofdstuk meer. Het resultaat van deze html code: Pagina 14 - Websites maken met HTML en CSS

15 Hoofdstuk 7 CSS Je hebt gezien dat de html code alleen maar weinig spannends laat zien in een browser. Om meer uiterlijk te krijgen moet je aan de slag met CSS. Vroeger werd dat voor een groot deel gedaan in de HTML code. Zo maakte men een website op met behulp van tabellen. Inmiddels is dat achterhaald. Een tabel gebruik je om een tabel in weer te geven en niet voor de opmaak van een website. Cascading Stylesheets dus. De styleheets zijn er voor bedoeld om in een apart document te plaatsen. Naast je html document maak je dus een tweede document met daarin alles wat met de stijl van de website te maken heeft. Om dit stijlblad vervolgens weer te kunnen gebruiken moet je html document dat wel weten te vinden. Dat doe je met een tag, zoals we die al in het vorige hoofdstuk gezien hebben. Deze tag is als volgt: <linkrel="stylesheet" href="naam-bestand.css" type="text/css" media="screen"/> Achter href zie je de naam van het bestand staan waar je css code in komt te staan. Achter media zie je screen staan. Dat bepaald dat de code voor beeldschermen bedoeld is. Je kunt namelijk ook CSS code maken, speciaal voor mobiele telefoons, om te printen of voor andere soorten schermen. In CSS worden selectors en declaraties gebruikt. Selectors zijn de onderdelen die je ook weer in je html code terug kunt vinden, bijvoorbeeld de p in de <p> tag. Declaraties, dat zijn de uitwerkingen van die selector. Een declaratie omschrijft wat er moet gaan gebeuren met het uiterlijk van een tag. Dat ziet er zo uit: Pagina 15 - Websites maken met HTML en CSS

16 Hier hebben we dus de omschrijving voor een h1 koptekst. Deze krijgt de kleur rood en lettergrootte 12 pixels mee. Alle declaraties zijn gewoon in het Engels. Declaraties staan in een stijlblad tussen accolades. { als begin en } als einde. Tussen twee declaraties plaats je een punt komma ;. Een declaratie is onderverdeeld in de eigenschap, dat wil zeggen wat ga je aanpassen. De waarde is de aanpassing zelf. Dus in ons voorbeeld krijgt iedere h1 tag een rode kleur en een lettergrootte van 12 pixels. Tussen de eigenschap en de waarde staat een dubbele punt :. Class en id Dit kun je dus voor ieder html element toepassen. Maar natuurlijk wil je dat lang niet altijd. Soms wil je een klein stukje tekst rood laten worden, of een alinea vetgedrukt laten overkomen. Daar zijn classes en id s voor in het leven geroepen. Je kunt ieder html element een class of id meegeven. Er is een verschil tussen deze twee. Een class mag meerdere keren op een webpagina voorkomen, een id maar een keer. Een id wordt gebruikt om onderdelen van een webpagina te benoemen, bijvoorbeeld het menu, of het artikel zelf. Een class wordt meer gebruikt om algemene onderdelen te benoemen zoals plaatje links of plaatje rechts. Een voorbeeld hiervan: <pid="menu">...</p> <pclass="belangrijk">...</p> De eerste alinea (<p>) krijgt een id mee. Een menu komt meestal maar een keer voor op een pagina. De tweede alinea krijgt een class mee, een belangrijk stuk tekst kan vaker voorkomen op een pagina. Praktische toepassing van class en id Vervolgens kun je deze twee laten terugkomen in je stijlblad. Een id komt op de volgende manier terug: #menu{font-size: 13px; font-weight: bold;} Een id wordt dus aangeroepen met een hekje #. De class wordt aangeroepen met een punt (.). Dat gaat als volgt: Pagina 16 - Websites maken met HTML en CSS

17 .belangrijk{color: green; font-weight: bold; font-style: italic;} Zo zie je dat een html tag die de class belangrijk mee krijgt groen gekleurd wordt, vetgedrukt en schuingedrukt is. Pagina 17 - Websites maken met HTML en CSS

18 Hoofdstuk 8 Een website online zetten Je bent aan de slag gegaan met het maken van je website. Deze staat mooi op je computer. Maar nog niemand weet van het bestaan. Ook heb je een domeinnaam geregeld en je hebt hosting. Kortom, je hebt alle gegevens verzameld om je website van je computer naar je hosting te verplaatsen. Daarvoor heb je een paar zaken nodig. Ten eerste alle gegevens die je hebt gehad van je hosting. De zogenaamde FTP gegevens. FTP staat voor File Transfer Protocol. In goed Nederlands: Bestanden Verplaatsen Protocol. Welke gegevens zijn dat dan? a. FTP servernaam (bijvoorbeeld ftp.websitenaam.nl) b. Gebruikersnaam c. Wachtwoord. Daarnaast heb je een FTP programma nodig. Dit programma heb je nodig om de bestanden daadwerkelijk te kunnen verplaatsen van jouw computer naar de hosting computer. De computer die verbonden is met het internet. FireFTP is een handige plugin voor Firefox om je website eenvoudig te kunnen uploaden. In het onderstaande stappenplan laat ik zien hoe eenvoudig dat uploaden dan wel gaat. Maar ik begin natuurlijk bij het downloaden van FireFTP. Ik ga er in ieder geval van uit dat je Firefox wel op je computer hebt staan. Als websitebouwer is die browser namelijk verplichte kost. Deze browser heeft zoveel meer mogelijkheden dan Internet Explorer dat je het niet kunt maken om deze niet te hebben. Mocht je de nieuwste versie willen hebben, dan ga je naar de site van Mozilla en download je de meest actuele versie. Het maakt overigens voor FireFTP niet uit welk besturingssysteem je gebruikt, het wordt door Windows, Apple en Linux ondersteunt en werkt vrijwel identiek. Wanneer je op de pagina addons gaat zoeken naar FireFTP kom je vanzelf op de pagina waar alle informatie staat over deze FTP plugin. Omdat je als het goed is aan het werk bent in Firefox staat er al een button op de pagina met daarop: Aan Firefox toevoegen. Pagina 18 - Websites maken met HTML en CSS

19 Wanneer je daar op klikt dan wordt de plugin automatisch gedownload en toegevoegd. Even opnieuw opstarten en je bent klaar. Alles gaat helemaal vanzelf. Ga naar browsermenu Extra In je browsermenu, helemaal bovenaan in je browser (Firefox) staat een kopje extra. Als je daar op klikt dan verschijnt er een menu. Dan zoek je in dat menu FireFTP op. Wanneer je daarop klikt verschijnt het volgende scherm in je browser: Pagina 19 - Websites maken met HTML en CSS

20 De opbouw van het scherm Het scherm is opgebouwd uit een aantal onderdelen. Aan de linkerkant zie je twee vlakken, met daarin alle bestanden en mappen die op jouw eigen computer staan. Aan de rechterkant zie je twee witte vlakken die straks gevuld zullen worden met de bestanden die op de server van je website staan. Je kunt door de linkerkant bladeren. Het uiterst linkse scherm gebruik je als verkenner, zoals je dat ook in Windows kunt doen. Het scherm daarnaast geeft alle bestanden en mappen in een bepaalde map weer. Ook daar kun je door bladeren. Pagina 20 - Websites maken met HTML en CSS

21 Bestanden van je website Wanneer je nu de bestanden wilt zien die op je website staan dan moet je eerst een account aanmaken. In de linkerkant aan de bovenkant zie je een optie Create an account staan. Wanneer je daarop klikt kun je een website toevoegen. Daarvoor heb je de gegevens van je webhost nodig. Je hoeft meestal alleen de main details en id aan te maken. Wanneer je dan op connect klikt dan zie je aan de rechterkant de mappen verschijnen van je website. Uploaden van bestanden Nu gaan we daadwerkelijk een bestand uploaden. Wanneer je voor het eerst een website gaat uploaden dan zie je meestal een aantal mapjes staan op de webserver. Een van die mapjes heet public_html of www. Daarin komt je website te staan. Als je dit mapje opent zie je in ieder geval een bestand staan met de naam index, of soms default. Deze kun je gaan vervangen door je eigen indexpagina. Let er op dat het eerste bestand ook weer index.htm of default.htm heet (Of.php als je dynamische webpagina s hebt gemaakt). Pagina 21 - Websites maken met HTML en CSS

22 Hieronder zie je wat ik bedoel. Klik nu op het bestand wat je wilt gaan uploaden. Dat wordt blauw. Vervolgens klik je op de juiste map, waar het naar toe moet (www in ons voorbeeld). Als die map open is klik je op de pijl die naar rechts wijst. Met de pijl naar links kun je namelijk bestanden die op een server staan naar je computer downloaden. En eigenlijk is dat alles. Makkelijk toch? Nog een paar beginnerstips. Zorg ook dat je de plaatjes mee upload, dat wordt nog wel eens vergeten. Je kunt ook meerdere bestanden of een hele map tegelijk uploaden. Je hoeft het niet allemaal een voor een te doen. FireFtp zorgt voor de rest. Pagina 22 - Websites maken met HTML en CSS

23 Hoofdstuk 9 Javascript Met JavaScript kun je je website interactief maken. Er zijn een heel aantal onzinnige toepassingen te bedenken met JavaScript. Denk maar eens aan de vallende sneeuwvlokjes rond de kerstdagen. Ieder jaar zoeken mensen weer een javascriptje hiervoor op het internet. Of wat dacht je van een klokje... O ja, voor ik het vergeet, verwar JavaScript niet met Java. Dat zijn echt twee verschillende dingen. Java wordt bijvoorbeeld veel gebruikt voor allerhande spelletjes die je op verschillende websites kunt spelen. JavaScript heeft meer dan sneeuwvlokken en klokjes tot zijn beschikking. Veel meer! Er zijn zelfs complete libraries voor gemaakt om het werken met Javascript te vereenvoudigen. Een zo n library is jquery. Een afbeelding vergroot in beeld brengen kun je doen met JavaScript, je kunt een slideshow maken, een formulier op geschiktheid testen, een kleuren animatie regelen en bijvoorbeeld cookies maken. De mogelijkheden zijn enorm. JavaScript is ook niet heel erg ingewikkeld om te leren en te begrijpen. Wanneer je eenmaal de structuur doorhebt dan kun je prima zelf scripts schrijven of scripts aanpassen. Het is altijd handig om eerst te starten met bestaande scripts die ongeveer doen wat jij wilt. Door de code te gebruiken en te doorgronden ga je bepaalde onderdelen herkennen die je dan weer voor andere zaken in kunt stellen. Pagina 23 - Websites maken met HTML en CSS