Pagina 1 - Websites maken met HTML en CSS

Pagina 1 - Websites maken met HTML en CSS

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.


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


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 HTMLsite 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 2002... 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!


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. http://nl.wikipedia.org/wiki/Internet 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.


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 http://www.xs4all.nl/~gebruiker 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 http://www.transip.nl

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!


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), emailadressen 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


allerlei zaken regelen die te maken hebben met je website. Denk hierbij aan het aanmaken van emailadressen, 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 emailadres(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.


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 HTMLkit

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: http://www.irfanview.com/ Er is ook een Nederlandse vertaling beschikbaar waardoor het werken met dit programma nog


iets makkelijker wordt. HTMLkit Wanneer je serieus aan de slag gaat dan kun je een stapje verder gaan dan kladblok en een HTML editor aanschaffen. HTMLkit 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. HTMLkit is ook gratis en een van de meest uitgebreide html editors die je momenteel kunt vinden. De editor HTMLkit, kun je vinden op de website http://www.htmlkit.com/download/ Daar moet je kiezen om HTMLkit 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 http://www.lemkesoft.com/index.html. 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: http://www.barebones.com/products/bbedit/ 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: http://netrenderer.com/ 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.


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 . 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 . 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:

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.


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. 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<br /> <br /> 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<br /> <br /> 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<br /> <br /> 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<br /> <br /> maken.<br /> <br /> Pagina 12 - Websites maken met HTML en CSS<br /> <br /> Een eenvoudige, eerste webpagina kan er dan in HTML als volgt uitzien: <!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8" /> <title>Untitled <style type="text/css" title="text/css" media="all">

HTML5,& structuur aanbrengen in een HTML5 document

Archief

About

<article>
nav is niet bedoeld voor <em>alle Links

Maar het nav element bevat wel vaak links. Niet <em>alle links hebben de nav nodig.
<article>
De DOCTYPE. Wat nog meer?

Heb je de DOCTYPE dan kun je HTML5 gaan leren.

HTML5 links

Meer links over HTML:

HTML5

HTML4

Copyright © 2013 - HTML-site


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:


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:

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
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:


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 puntkomma ; . 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:
...

...

De eerste alinea (
) 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:


.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.


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. http://www.mozilla.org/nl/firefox/new/ 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’.


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:


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.


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).


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.


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.


Als voorbeeld voor het gebruik van JavaScript heb ik een script gekozen waarbij er een popup op het scherm verschijnt als er geklikt wordt. De linktekst

Je ziet ‘De linktekst’ staan in een tag die opent naar een website ‘jewebsite.nl/bestandsnaam.html’. Dan volgt de javascript code onclick. Daarna worden er bepaalde acties gegeven die uitgevoerd moeten worden. width 200 staat voor de breedte van het popupscherm. height 100 bepaalt de hoogte scrollbars bepalen of er wel of geen scrollbalken gebruikt worden als er meer tekst in staat dan de schermgrootte toestaat. toolbar gaat over de knoppenbalk location bepaalt of je tekst in mag voeren. Test dit scriptje eens uit en ga vervolgens eens aan de slag met het veranderen van bepaalde onderdelen. Je leert dan werken met Javascript.


Hoofdstuk 10 PHP Wanneer je nog een stap verder wilt gaan dan kun je aan de slag met PHP. Hiermee kun je, in combinatie met MySql ook gegevens in een database gaan opslaan. Dit is met name handig als je aan de slag wilt met het maken van bijvoorbeeld een forum, een gastenboek of een content management systeem. PHP kan acties in gang zetten. Dit gebeurt, in tegenstelling tot JavaScript, niet op jouw computer, maar het vindt al plaats op de server. Een voorbeeld verduidelijkt de werking van PHP. Stel dat je een website hebt die altijd de zelfde opbouw heeft. Een logo bovenaan en een menu aan de linkerkant. Wanneer je gewoon met HTML werkt zou je, wanneer je het menu of logo wilt aanpassen, iedere pagina langs moeten lopen om dit te doen. Door PHP te gaan gebruiken kun je het logo en het menu in een apart bestand zetten en laten inladen op het moment dat een bezoeker de website bezoekt. PHP kan dus veel zaken enorm vereenvoudigen. Ook PHP is niet heel ingewikkeld om te leren en te begrijpen. En de mogelijkheden om dingen te maken zijn eindeloos. Het content management systeem Wordpress, om blogs mee te maken, is gebouwd met Wordpress. Door de gegevens op te slaan in een database krijg je altijd de juiste informatie. Een ander voorbeeld is een forum. Het forum van HTMLsite werkt ook met PHP. Een reactie wordt opgeslagen in de database. Wil een bezoeker de reacties lezen dan wordt deze informatie razendsnel uit de database gehaald en getoond. Maar een bezoeker kan zich ook aanmelden. Hij bedenkt een naam en geeft zijn emailadres door. Deze informatie wordt niet alleen maar opgeslagen, er wordt ook automatisch (met PHP) een mail gestuurd naar het emailadres met daarin de opgegeven naam. Je ziet, in het hedendaagse internet kunnen we niet zonder PHP.


Overigens zijn er vergelijkbare talen die soortgelijke zaken ook kunnen. Zo heeft Microsoft een eigen taal bedacht om bijvoorbeeld een forum op te kunnen baseren, ASP en ASP.NET. Het voert te ver om daar in dit boek op in te gaan. Over deze talen kun je complete boeken schrijven. In ieder geval is het grote voordeel van PHP, dat het open source is. het is vrij beschikbaar en te gebruiken. Op mijn website heb ik een artikel geschreven waar ik een voorbeeld in geef hoe PHP werkt. http://www.htmlsite.nl/watisphp Naast dit artikel ook een voorbeeld van datgene wat ik beschreef over het inladen van een menu vanuit een apart bestand: http://www.htmlsite.nl/bestand_includen.php


Hoofdstuk 11 SEO SEO, dat is de afkorting voor Search Engine optimisation. In goed Nederlands, Zoekmachine optimalisatie. Het gaat hier om de techniek om je website zodanig op te bouwen dat deze goed gevonden wordt in zoekmachines. Goed gevonden worden in zoekmachines is niet gemakkelijk. In 2011 had Google 40 miljard webpagina’s geindexeerd. Dus in die massa zul je moeten opvallen. Nu gaan die miljarden webpagina’s niet allemaal over hetzelfde onderwerp. Maar typ een willekeurig onderwerp in en je zult zien dat je vaak honderdduizenden resultaten worden gegeven. In de praktijk, wanneer mensen aan het zoeken zijn, komt men niet veel verder dan de resultaten op de eerste pagina. Soms komt men nog op de tweede pagina, maar dat is het dan wel. Dat geeft te denken natuurlijk. Wil je scoren bij een zoekmachine (lees: Google) dan zal je website op de eerste pagina met resultaten moeten komen te staan wil je wat succes hebben. Je zult begrijpen dat het ene woord makkelijker is om mee te scoren dan het andere woord. Dat heeft weer alles te maken met de concurrentie op het gebied. Er zijn bijvoorbeeld veel websites die gaan over hypotheken. Er zijn veel minder websites die gaan over de ‘spitsmuis’. Bouw je dus een website over hypotheken dan zal het scoren veel lastiger zijn, dan wanneer je website gaat over het kleine diertje. Je moet dus goed weten rond welk onderwerp je website is opgezet. Vervolgens moet je weten hoe je hier nu onderzoek naar doet zodat je gaat scoren met bepaalde woorden. Dit onderzoek is niet gemakkelijk, maar wel te doen. Een andere factor van belang is het linken van en naar andere websites, linkbuilding. Dit is een proces waar een website eigenaar altijd mee bezig is en blijft. Je moet een link vanaf een andere website zien als een stem. Alleen deze stem geldt zwaarder naarmate een website belangrijker is. Wanneer je een link krijgt vanaf een educatieve website dan weegt deze link zwaarder door in de rankings dan wanneer je een link krijgt vanaf een linkpagina. Wanneer je de code schrijft zorg er dan voor dat iedere pagina een unieke titletag krijgt. (Hier komt de titel van je pagina in ongeveer 60 karakters)


Zorg dat deze title tag een goede weergave is van de inhoud van de webpagina, zet de belangrijkste woorden vooraan. Dus niet ‘Jan de Groot Webdesign’, maar ‘Webdesign in Goes, Zeeland, Jan de Groot maakt al uw websites’. Een meta description, hiervoor geldt hetzelfde als voor de titletag, alleen plaats je hierin een iets langere omschrijving, ongeveer 160 karakters, die je als een kleine advertentie moet zien. Dit komt namelijk als omschrijving van een link in de zoekmachine resultaten. Voorbeeld: <meta name="description" content="Leren om je website te maken, met sitechecks, artikelen over html en css, internetmarketing en een online cursus website maken" />

Intern linken is dat je vanaf de ene pagina verwijst naar een andere pagina op je website. Met name handig als het gaat om bijvoorbeeld blogs. Intern linken is niet alleen goed voor zoekmachines, maar ook voor de bezoekers die daarmee verder geholpen worden en langer op je website blijven. Zorg voor semantische code. Met semantische code wordt bedoeld dat je je html code logisch opbouwt. Je begint met een header, daarna heb je de kern en tenslotte de footer. Als je de titel van de website hebt dan geef je die koptekst h1 mee. Een titel van een artikel krijgt dan koptekst h2, een subtitel h3. Een menu wordt opgebouwd uit een lijst met items (ul en li). Dergelijke aanpassingen zorgen er voor dat je website logisch in elkaar steekt en makkelijker doorzoekbaar wordt voor crawlers. Daarnaast is het gewoon netjes. Naast semantische code moet je alle opmaak uit je html code halen en in een stijlblad plaatsen. Je moet je website dus opmaken met CSS. Door dit toe te passen maak je het jezelf makkelijk omdat je bij een aanpassing in de layout, maar in 1 document een verandering moet doorvoeren. Door CSS en HTML te scheiden maak je een document makkelijker doorzoekbaar voor een zoekmachine crawler.

Naast het gebruik van kernwoorden in je title, in je kopteksten en in je metadescription moet je kernwoorden laten voorkomen in de eigenlijke tekst. Maar ook weer niet teveel. Je moet daarin de juiste ‘keyword density’ zien te vinden.


Sommige SEO guru’s vinden dat keywoorden 5 tot 10% van de tekst moeten uitmaken. Het lijkt me nogal veel, misschien is 2% al genoeg. Het blijft in ieder geval een beetje zoeken. Door een sitemap te maken zijn alle pagina’s of onderdelen van je website vanaf 1 pagina te benaderen. Er zijn grofweg twee soorten sitemaps. De xml sitemap, wordt over het algemeen automatisch gegenereert en zijn specifiek gemaakt voor zoekmachines. Handmatige (html) sitemaps staan wel onderaan een webpagina of op een aparte pagina, maar deze is meer bedoeld voor bezoekers. Kopteksten bevatten, als je het goed doet, belangrijke woorden en de crawler ziet deze als belangrijk, waarbij h1 weer belangrijker is dan h3. Maar let er wel op dat je niet alle koppen h1 mee geeft, want dan wordt het weer als spam gezien. Bij een hyperlink kun je een omschrijving toevoegen met het attribuut ‘title’. Niet te verwarren met de ‘titletag’. Daarmee geef je extra informatie over de link waar naar wordt verwezen. Voorbeeld: link

Het altattribuut bij een afbeelding wordt vaak leeggelaten, maar is nuttig om een afbeelding (die een zoekmachine niet ‘ziet’) toch te beschrijven. Het titleattribuut kan ook hier weer worden gebruikt. Sinds korte tijd wordt ook laadtijd van een pagina gezien als een manier om hoger te komen in zoekresultaten. Laat niet teveel toepassingen los op een webpagina, zorg dat je een snelle server hebt, bij een betrouwbare host, in het land waar je website gevonden moet worden, en je site wordt snel geladen. Vaak updaten is niet alleen prettig voor bezoekers, maar de crawler komt ook vaker terug. Let maar eens op, sites die meerdere malen per dag nieuwe content plaatsen worden vaker door zoekmachine spiders bezocht, sites met statische content worden minder vaak bezocht. Niet voor niets zijn weblogs zo populair! Door gebruik te maken van mod rewrite wordt een URL beter leesbaar. Niet alleen voor een mens is het volgende voorbeeld niet prettig lezen, en niet te begrijpen, maar ook niet voor een crawler (het zijn net mensen…): http://www.site.nl/index.php?id=1&pid=12 Dan ziet dit er toch wat beter uit: http://www.site.nl/index/1/12/ Een crawler blijkt na de eerste & te stoppen met indexeren.


Met robots.txt kun je de crawler extra informatie geven over pagina’s die wel en eventueel niet doorzocht moeten worden. Je kunt natuurlijk kiezen voor pagina’s waar een zoekmachine niets mee te maken heeft. Voorbeeld 1: User-agent: * Disallow: /cgi-bin/ Disallow: /test/ Disallow: /prive/

Deze geldt voor alle zoekmachines, waarbij alleen de mappen cgibin, test en prive niet doorzocht mogen worden. Tweede manier is het gebruik van meta informatie: <meta name="robots" content="index,nofollow" />

Bij deze tag kun je geen specifieke zoekmachine aangeven, iets wat bij robots.txt wel kan. Belangrijk en al even genoemd, het gaat uiteindelijk om artikelen voor mensen, door mensen. Laat je zelf niet te veel afleiden door al deze tips. Neem ze ter harte, neem ze serieus, maar draai er niet op door. De belangrijkste tip. Zorg dat je plezier houdt in het hebben van een website. Uiteindelijk komen daar bezoekers op af. Ga niet valsspelen, dat wordt afgestraft, schrijf gewoon zoals jij dat wilt, blijf trouw aan jezelf.


Hoofdstuk 12 Aan de slag! Een eenvoudige website opzetten dat is wat je in dit eboek geleerd hebt. Het gaat er om dat je enkele eenvoudige pagina’s hebt gemaakt en die voorzien hebt van een stijl. Toch is het ook hierin aan te raden om een domeinnaam en hosting te gaan gebruiken. Mocht je dan een stap verder willen gaan dan kan dat gewoon. Het wordt echt van jou en een stukje investeren is dan nooit overbodig. Het voordeel van een eenvoudige website is dat je niet veel geld moet investeren. het gaat maar om een klein bedrag en meestal is de webruimte prima geschikt om voorlopig vooruit te kunnen.

Mensen die een website willen maken zijn er genoeg. Mensen die een website kunnen maken zijn er al veel minder. Doordat je dit eboek hebt gelezen, wat ik overigens zeer waardeer, hoor je tot de top 10% van de mensen die meer weten over websites maken dan de rest van Nederland. Het is namelijk niet voor niets dat sites als blogger.com, wordpress.com enzovoort, zo populair zijn. Mensen hoeven namelijk niet zelf aan de slag met het maken van een website. Jij hebt al bewezen dat je een stap verder bent. Je kunt tot de 10% van de Nederlanders gaan behoren als je alle informatie uit dit eboek bestudeerd en je echt eigen maakt. Een cursus of boek kan je daar bij helpen. Het lezen van een boek over HTML en CSS is een erg waardevolle bezigheid die je nog verder helpt op het pad van websites maken. Een cursus is een grotere investering in jezelf. Een investering die je naar mijn idee dubbel en dwars terug verdient. Studeren brengt je verder en er is wel eens gezegd dat de tijd en het geld die je in een cursus steekt zich dubbel, viervoudig of wel tienvoudig terug verdient. Heb jij zin gekregen om een website te maken? Ga aan de slag en doe dat! Zorg dat je door echt aan de slag gaat meer en meer leert.


Heb je de behoefte om wat extra ondersteuning te krijgen, een stappenplan met video’s waarin je leert om je website te maken, direct een domeinnaam en een hostingpakket tot je beschikking hebt? Ik wil je graag helpen! Via HTMLsite+ bied ik een platform aan waar je kunt leren om je eigen website te leren maken. Alles wat ik hierboven heb beschreven wordt in detail uitgelegd en voorgedaan. Opdrachten zorgen ervoor dat je direct aan het werk gaat. Niet alleen lezen, maar ook doen. Kom je ergens niet uit dan kun je terugvallen op mijn expertise die ik in de afgelopen jaren heb opgedaan. Dat is de garantie. Aan het einde van de cursus heb je een website online staan! http://www.htmlsite.nl/plus/ Je eigen visitekaartje op het internet, of meer... Zoals je in dit eboek hebt gelezen zijn de mogelijkheden van internet eindeloos! Ik wens je veel succes bij jouw ontdekkingstocht!


Pagina 1 - Websites maken met HTML en CSS

Recommend Documents

nav is niet bedoeld voor <em>alle Links

De DOCTYPE. Wat nog meer?

`nav` is niet bedoeld voor <em>alle Links

De `DOCTYPE`. Wat nog meer?