Pagina 1 - Websites maken met HTML en CSS

Maat: px
Weergave met pagina beginnen:

Download "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="http://html5.com">html5</a></li> <li><ahref="http://html4.com">html4</a></li></ul> </aside> <footer> <p>copyright <ahref="http://html-site.nl">html-site</a></p> </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

Pagina 1 - Website maken voor beginners

Pagina 1 - Website maken voor beginners Pagina 1 - Website maken voor beginners 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

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Publiceren met WordPress

Publiceren met WordPress Publiceren met WordPress Peter Osterop Tweede herziene editie 1. Installatie van WordPress 2. Configuratie van WordPress 3. Het uiterlijk van WordPress 4. Pagina s en berichten maken in WordPress 1 Installatie

Nadere informatie

Een website omzetten naar WordPress

Een website omzetten naar WordPress 1 Een website omzetten naar WordPress Er zijn talloze programma s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt

Nadere informatie

WEBSITE SCAN Vrijblijvend advies

WEBSITE SCAN Vrijblijvend advies WEBSITE SCAN Vrijblijvend advies IBAN: NL57ABNA0479025207 Inleiding: Wij hebben uw website op diverse facetten geanalyseerd en hier een bondig rapport voor geschreven. Door het uitvoeren van onderstaande

Nadere informatie

Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP... 8 Joomla installeren op

Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP... 8 Joomla installeren op 1 Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP.... 8 Joomla installeren op XAMPP... 15 Handige links... 16 2 Disclaimer Bij de samenstelling

Nadere informatie

- Plan Zo kun je een. website bouwen!

- Plan Zo kun je een. website bouwen! - Plan Zo kun je een website bouwen! BoekjeHoeKanJeEenWebsiteBouwen.i1 1 8-7-2008 17:23:14 BoekjeHoeKanJeEenWebsiteBouwen.i2 2 8-7-2008 17:23:15 In dit boekje staat de uitgebreide versie van hoe je een

Nadere informatie

SEO IS SIMPEL SEARCH ENGINE OPTIMIZATION E-BOOK

SEO IS SIMPEL SEARCH ENGINE OPTIMIZATION E-BOOK SEARCH ENGINE OPTIMIZATION E-BOOK VERSIE: 1.0 DATUM: APRIL 2009 AUTEUR: ERWIN SIGTERMAN WEBSITE: WWW.SIGGYVOLGT.NL E-MAIL: ERWIN@SIGTERMAN.COM INHOUDSOPGAVE 1 Search engine optimalization... 3 URL aanmelden

Nadere informatie

WordPress Website. Bouw zelf je WordPress Website. www.supersnelonline.nl Maarten Hendrix. Maarten Hendrix

WordPress Website. Bouw zelf je WordPress Website. www.supersnelonline.nl Maarten Hendrix. Maarten Hendrix WordPress Website Bouw zelf je WordPress Website Maarten Hendrix Maarten Hendrix 2 Inhoudsopgave WordPress inleiding... 5 Wat is WordPress?... 5 Wat is het verschil tussen WordPress.org en WordPress.com?...

Nadere informatie

WordPress in het Kort

WordPress in het Kort WordPress in het Kort Een website maken met Wordpress. In minder dan één uur online! Inclusief installatie van een thema en plugins Alle rechten 2013, Rudy Brinkman, BrinkhostDotCom, http://www.brinkhost.nl

Nadere informatie

De Kleine WordPress Handleiding

De Kleine WordPress Handleiding Introductie Dit is geen uitgebreide handleiding om een WordPress website of blog mee te bouwen. Het is ook geen overzicht van alle aspecten die een WordPress website zo bijzonder maken en geen verhandeling

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde

Nadere informatie

In deze PDF zal er vanuit worden gegaan dat je weet wat HTML is en dat je weet hoe je een website aan moet passen in de code.

In deze PDF zal er vanuit worden gegaan dat je weet wat HTML is en dat je weet hoe je een website aan moet passen in de code. Bedankt! Als eerste bedankt voor het aanschaffen van deze PDF waarin ik je handige tips en trucs zal geven voor de optimalisatie van jouw website. Deze PDF staat vol met informatie om de website te kunnen

Nadere informatie

Algemene handleiding beheermodule: WORDPRESS. digital4u.nl effectief op internet

Algemene handleiding beheermodule: WORDPRESS. digital4u.nl effectief op internet Algemene handleiding beheermodule: WORDPRESS digital4u.nl effectief op internet Inhoudsopgave Algemene handleiding 03 04 04 05 05 06 06 07 07 08 09 11 12 13 15 16 17 Introductie Inloggen Dashboard Berichten

Nadere informatie

Syllabus Zelf een website bouwen. Artheos

Syllabus Zelf een website bouwen. Artheos Syllabus Zelf een website bouwen Artheos Helma de Boer Artheos Webdiensten & Office Support www.artheos.nl 2012 Inhoud Syllabus Zelf een website bouwen H1 De techniek van een website... 3 1.1 Browser en

Nadere informatie

Test Joomla op je PC 1

Test Joomla op je PC 1 1 Disclaimer Bij de samenstelling van dit ebook is de grootst mogelijke zorg besteed aan de juistheid en correctheid van de informatie die in dit ebook wordt verstrekt. De auteur van dit ebook kan op geen

Nadere informatie

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien. Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te

Nadere informatie

Bitrix Site Manager gebruikershandleiding BureauZuid

Bitrix Site Manager gebruikershandleiding BureauZuid Bitrix Site Manager gebruikershandleiding BureauZuid Introductie Deze gebruikershandleiding geeft gedetailleerde basisinformatie over hoe te werken met Bitrix Site Manager. Deze handleiding is bedoeld

Nadere informatie

Handleiding Joomla 3.x

Handleiding Joomla 3.x Handleiding Joomla 3.x Hoe maak ik een categorie aan? Geschreven: Sandra van der Heijden (2015) AdviesMies Waarom categorieën aanmaken? Categorieën zijn van belang binnen een website. Met het aanmaken

Nadere informatie

Handleiding voor het gebruik van de community website van OBS t Padland

Handleiding voor het gebruik van de community website van OBS t Padland Handleiding voor het gebruik van de community website van OBS t Padland Versie: 1.1 Datum: 18 juli 2013 Geschreven door: ict@padland.nl 2013 OBS t Padland. Pagina 1 Inhoud Inleiding... 3 Padland Startpagina...

Nadere informatie

Cursus Onderwijs en ICT. bloggen met Wordpress

Cursus Onderwijs en ICT. bloggen met Wordpress Cursus Onderwijs en ICT Deel 21 (versie 1.0 NL 27-04-2011) bloggen met Wordpress door Serge de Beer Inleiding Zelf ben ik niet zo n blogger. Niet dat ik het niet heb geprobeerd trouwens. Al regelmatig

Nadere informatie

Jouw bedrijf in 3 stappen bovenin Google Whitepaper online vindbaarheid versie augustus 2012

Jouw bedrijf in 3 stappen bovenin Google Whitepaper online vindbaarheid versie augustus 2012 Jouw bedrijf in 3 stappen bovenin Google Whitepaper online vindbaarheid versie augustus 2012 Whitepaper Online vindbaarheid Allebedrijvenin augustus 2012 Pagina 1 Een woord vooraf Je hebt een prachtige

Nadere informatie

design ook items uitsnijden

design ook items uitsnijden (fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het

Nadere informatie

De WordPress 3.5 Beginners Handleiding

De WordPress 3.5 Beginners Handleiding De WordPress 3.5 Beginners Handleiding Internetbureau Elephant april 13 Inhoud Introductie... 2 Inloggen... 3 Het dashboard... 5 Berichten en pagina's... 6 Nieuw Bericht... 6 Nieuwe Pagina... 8 Afbeeldingen,

Nadere informatie

Handleiding: Whitelabel Customersite

Handleiding: Whitelabel Customersite ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.

Nadere informatie

LES 11: VAN LOKAAL NAAR ONLINE. Lesoverzicht: Aan de slag Domeinnaam Web hosting FTP gegevens FTP programma s Database exporteren Samenvatting

LES 11: VAN LOKAAL NAAR ONLINE. Lesoverzicht: Aan de slag Domeinnaam Web hosting FTP gegevens FTP programma s Database exporteren Samenvatting LES 11: VAN LOKAAL NAAR ONLINE Lesoverzicht: Aan de slag Domeinnaam Web hosting FTP gegevens FTP programma s Database exporteren Samenvatting Tijd: 10 minuten Doel: Aan het einde van de les kun je de lokale

Nadere informatie

CMS Template Handleiding

CMS Template Handleiding CMS Template Handleiding Inhoudsopgave Inloggen in het CMS... 3 Pagina s toevoegen... 4 Pagina s bewerken... 6 Een link toevoegen... 7 Een afbeelding toevoegen... 9 Foto s plaatsen op de fotopagina...

Nadere informatie

C o n t e n t M a n a g e m e n t S y s t e e m. G e b r u i k s a a n w i j z i n g - 2 0 1 2

C o n t e n t M a n a g e m e n t S y s t e e m. G e b r u i k s a a n w i j z i n g - 2 0 1 2 C o n t e n t M a n a g e m e n t S y s t e e m G e b r u i k s a a n w i j z i n g - 2 0 1 2 Zelf pagina's bewerken met het Content Management Systeem Met het Content Management Systeem (CMS) heeft u

Nadere informatie

Instellingen voor het publiceren opgeven

Instellingen voor het publiceren opgeven 289 Aanvulling hoofdstuk 9 i.p.v. blz. 289 tot en met 308 Instellingen voor het publiceren opgeven Voordat u webpagina s kunt publiceren, moet u eerst de instellingen voor het publiceren opgeven. Anders

Nadere informatie

WordPress Handleiding

WordPress Handleiding Algemene Informatie Disclaimer: Bij het samenstellen van dit boek is de grootst mogelijke zorg besteed aan de juistheid van de opgenomen informatie. Wij kunnen echter niet verantwoordelijk gesteld worden

Nadere informatie

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor NHV verenigingen Versie 0.2 Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Websitecheck. Taak en Tekst voor websites die werken. www.jouwsite.nl

Websitecheck. Taak en Tekst voor websites die werken. www.jouwsite.nl Taak en Tekst voor websites die werken www.jouwsite.nl Websitecheck Taak en Tekst, www.taakentekst.nl Buijs Ballotstraat 27A, 2563 ZH Den Haag 06-13935470 1 Websitecheck Website: Eigenaar: Datum: www.jouwsite.nl

Nadere informatie

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for

Nadere informatie

Handleiding wordpress

Handleiding wordpress Handleiding wordpress Wordpress versie 3.0.4 Handleiding versie 1.1 Auteur Website Geert Hoekzema www.geerthoekzema.nl www.geerthoekzema.nl geert@geerthoekzema.nl 1 Inhoudsopgave Inleiding... 3 Beginnen

Nadere informatie

WEBSITE USABILITY. white-paper

WEBSITE USABILITY. white-paper WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te

Nadere informatie

Wat je moet weten over jouw website. Berichten

Wat je moet weten over jouw website. Berichten Wat je moet weten over jouw website Berichten Inleiding Inleiding Soms is het verwarrend... pagina's en berichten, categorieën en tags... En hoe krijg je die in je menu? Met dit document hoop ik daar wat

Nadere informatie

Navigator CMS 2009. Beknopte handleiding v1.0

Navigator CMS 2009. Beknopte handleiding v1.0 Navigator CMS 2009 Beknopte handleiding v1.0 Inhoudsopgave 1. Inleiding... 3 2. Inloggen... 4 3. Menustructuur... 5 4. Document Verkenner... 6 5. Mappen beheren... 7 5.2 Map hernoemen... 7 5.3 Map verplaatsen...

Nadere informatie

Safira CMS Handleiding

Safira CMS Handleiding Safira CMS Handleiding Inhoudsopgave 1Mappen en artikelen... 2 1.11.1 Naam wijzigen map/ pagina... 3 1.21.2 Website structuur: nieuwe pagina aanmaken, pagina verwijderen, pagina blokkeren, structuur wijzigen...

Nadere informatie

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Introductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11

Introductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11 I n h o u d s o p g ave Introductie 2 Inloggen 3 Dashboard 4 Pagina aanmaken / bewerken 5 Bericht toevoegen / bewerken 6 Afbeelding toevoegen 7 De tekstbewerker 11 Menu toevoegen / aanpassen 12 I n t ro

Nadere informatie

2 december 2013 Eindgebruikershandleiding Weblicity CMS

2 december 2013 Eindgebruikershandleiding Weblicity CMS 2 december 2013 Eindgebruikershandleiding Weblicity CMS Deze handleiding is opgesteld door Weblicity http://www.weblicity.nl Inhoudsopgave Inhoudsopgave... 2 Introductie... 3 Inloggen Uitleg onderdelen

Nadere informatie

SELECTEER EEN PAGINA TEMPLATE EN HOOFD VOOR DE PAGINA: Selecteer, in de PAGINA ATTRIBUTEN module rechts naast

SELECTEER EEN PAGINA TEMPLATE EN HOOFD VOOR DE PAGINA: Selecteer, in de PAGINA ATTRIBUTEN module rechts naast OPMAKEN VAN BERICHTEN EN PAGINA S ONE PAGER Berichten en pagina s worden op dezelfde wijze opgemaakt. Voor het opmaken van een bericht ga je in het navigatiemenu (afbeelding rechts) naar BERICHTEN > NIEUW

Nadere informatie

HANDLEIDING DOIT BEHEER SYSTEEM

HANDLEIDING DOIT BEHEER SYSTEEM HANDLEIDING DOIT BEHEER SYSTEEM ALGEMENE INFORMATIE Het Doit beheer systeem is een modulair opgebouwd systeem waarin modules makkelijk kunnen worden toegevoegd of aangepast, niet iedere gebruiker zal dezelfde

Nadere informatie

28 juli 2014 Eindgebruikershandleiding Weblicity CMS

28 juli 2014 Eindgebruikershandleiding Weblicity CMS 28 juli 2014 Eindgebruikershandleiding Weblicity CMS Deze handleiding is opgesteld door Weblicity http://www.weblicity.nl Inhoudsopgave Inhoudsopgave... 2 Introductie... 3 Inloggen Uitleg onderdelen 4

Nadere informatie

Zicht - Content Management Systeem een algemene beschrijving

Zicht - Content Management Systeem een algemene beschrijving Zicht - Content Management Systeem een algemene beschrijving Versie april/2008 Zicht nieuwe media ontwerpers 2008 1 Inleiding Een Content Management Systeem (CMS) is een webapplicatie waarmee je zonder

Nadere informatie

HTML Editor: tabellen en hyperlinks

HTML Editor: tabellen en hyperlinks LES 19 HTML Editor: tabellen en hyperlinks In deze les leert u nog iets meer over HTML en de HTML Editor van OpenOffice.org. U leert hoe u absolute en relatieve hyperlinks maakt. We staan even stil bij

Nadere informatie

Nieuwsbrieven versturen met MailPoet

Nieuwsbrieven versturen met MailPoet Nieuwsbrieven versturen met MailPoet Een nieuwe nieuwsbrief maken Om een nieuwe nieuwsbrief te maken klik je op de button nieuwe nieuwsbrief (2). Je kunt ook een reeds bestaande nieuwsbrief dupliceren

Nadere informatie

WordPress-website maken in 1 dag Installatiehandleiding WordPress

WordPress-website maken in 1 dag Installatiehandleiding WordPress WordPress-website maken in 1 dag Installatiehandleiding WordPress Jaap Vink Inleiding Voordat je kunt beginnen met het maken van je website met WordPress moet je eerst WordPress installeren. Dat kan op

Nadere informatie

mijndomein.nl De Basiscursus Websitemaker

mijndomein.nl De Basiscursus Websitemaker De Basiscursus Websitemaker iedereen een website Deel 3: Promotie en SEO, 7 mei 2012 Inhoudsopgave 12: Je website promoten 3 Een abonnee toevoegen 3 Een abonnee verwijderen 4 De wizard abonnees 4 13: Distributie

Nadere informatie

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm:

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm: CMS Handleiding Inhoudsopgave Inloggen in het CMS... 3 Pagina s toevoegen... 4 Pagina s bewerken... 7 Een link toevoegen... 8 Een afbeelding toevoegen... 10 Foto s plaatsen op de fotopagina... 12 Media...

Nadere informatie

Handleiding Websitebeheer

Handleiding Websitebeheer Handleiding Websitebeheer Event Media Websites Copyright 2005, Event Media 1. Inleiding... 3 2. CMS-systeem... 3 2.1 Inloggen... 3 2.2 Basis-menu... 3 2.3 Bestaande pagina s aanpassen...3 2.4 Nieuwe pagina

Nadere informatie

cbox UW BESTANDEN GAAN MOBIEL! WEBINTERFACE GEBRUIKERSHANDLEIDING

cbox UW BESTANDEN GAAN MOBIEL! WEBINTERFACE GEBRUIKERSHANDLEIDING cbox UW BESTANDEN GAAN MOBIEL! WEBINTERFACE GEBRUIKERSHANDLEIDING BV Inleiding cbox is een applicatie die u eenvoudig op uw computer kunt installeren. Na installatie wordt in de bestandsstructuur van uw

Nadere informatie

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407 Project plan Erwin Hannaart Sander Tegelaar 61849 62407 I4C2 I4C1 1 Inhoudsopgave Doel en doelgroep van het project... 3 Beschrijving van het project... 4 Benodigde materialen... 5 Te verwachten resultaten,

Nadere informatie

Zoekmachine Optimalisatie (SEO)

Zoekmachine Optimalisatie (SEO) Zoekmachine Optimalisatie (SEO) Dit ebook wordt u geheel gratis aangeboden door Usense - Dé Online Marketing Specialist. Zoekmachine Optimalisatie Zoekmachine optimalisatie, oftewel SEO, gaat over het

Nadere informatie

Algemene WordPress Handleiding uitleg basics Karin de Wit Design

Algemene WordPress Handleiding uitleg basics Karin de Wit Design Inhoudsopgave Inhoudsopgave... 2 Algemene informatie... 3 Introductie... 4 Inloggen bij WordPress... 5 Introductie in het dashboard... 6 Berichten en pagina's... 8 Bericht Categorieën... 8 Nieuw Bericht...

Nadere informatie

Handleiding Joomla CMS

Handleiding Joomla CMS Handleiding Joomla CMS Inhoudsopgave Inloggen bij de beheeromgeving 3 Artikelen 4 Prullenbak bekijken 4 Nieuw artikel maken / bewerken 5 Afbeelding toevoegen aan artikel 6 Link in een artikel plaatsen

Nadere informatie

www.eduwebsupport.nl Expert blog artikel: SEO check SEO check is een EDU Expert Artikel

www.eduwebsupport.nl Expert blog artikel: SEO check SEO check is een EDU Expert Artikel www.eduwebsupport.nl Expert blog artikel: SEO check SEO check is een EDU Expert Artikel De woorden SEO check suggereren dat je de status van je zoekmachine optimalisatie eenvoudig kunt vaststellen met

Nadere informatie

Handleiding bij WSM MailformGenerator

Handleiding bij WSM MailformGenerator 1. Voorwoord Welkom bij de handleiding voor de WSM MailformGenerator. Deze handleiding hebben we gemaakt om je snel en gemakkelijk uit te leggen hoe de WSM MailformGenerator werkt. Deze handleiding is

Nadere informatie

Outlook Web App 2010 XS2office

Outlook Web App 2010 XS2office Handleiding Outlook Web App 2010 XS2office Toegang tot uw contacten, adressen en e-mail berichten via internet XS2office Versie: 22 juli 2014 Helpdesk: 079-363 47 47 Handleiding OWA Helpdesk: 079-363 47

Nadere informatie

Handleiding. Outlook Web App 2010 - CLOUD. Versie: 22 oktober 2012. Toegang tot uw e-mailberichten via internet

Handleiding. Outlook Web App 2010 - CLOUD. Versie: 22 oktober 2012. Toegang tot uw e-mailberichten via internet Handleiding Outlook Web App 2010 - CLOUD Versie: 22 oktober 2012 Toegang tot uw e-mailberichten via internet Handleiding Multrix Outlook Web App 2010 - CLOUD Voorblad Inhoudsopgave 1 Inleiding...3 2 Inloggen...4

Nadere informatie

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4 Handleiding CMS Inhoud 1 Inloggen 2 Algemeen 3 Hoofdmenu 4 Pagina s 4.1 Pagina s algemeen 4.2 Pagina aanpassen 5 Items 5.1 Items algemeen 5.2 Item aanpassen 6 Editor 6.1 Editor algemeen 6.2 Afbeeldingen

Nadere informatie

1 BUSINESS INTERNET SUPPORT

1 BUSINESS INTERNET SUPPORT Versie 1 BUSINESS INTERNET SUPPORT Yoron Dot Net Stap voor stap Handleiding YORON DOT NET BEHEER V1.X Stap voor stap handleiding YORON Het Wielsem 10 s-hertogenbosch Inhoudsopgave Opstarten Yoron DotNet

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress

Gebruikershandleiding websitebeheer m.b.v. Wordpress Gebruikershandleiding websitebeheer m.b.v. Wordpress Saft Websites Gebruikershandleiding Wordpress pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Inloggen in administratorgedeelte Informatie

Nadere informatie

Woord vooraf. Deze handleiding geeft je inzichten in hoe SEO werkt en wat je moet doen om resultaat te behalen.

Woord vooraf. Deze handleiding geeft je inzichten in hoe SEO werkt en wat je moet doen om resultaat te behalen. Woord vooraf Een goede zoekmachine optimalisatie strategie gaat uit van een langere termijn commitment. SEO (search engine optimization) is niet iets wat je zomaar kunt implementeren. Er is een duidelijke

Nadere informatie

Trippeltrap Content Management System

Trippeltrap Content Management System Handleiding Trippeltrap Content Management System versie 2.4 Aanmelden Voordat u de tekst op uw webpagina kunt aanpassen, moet u zich eerst aanmelden. Bovenaan de pagina vindt u een link naar het intranet.

Nadere informatie

E.M. van Nieuwaal. Frontpage 2003. Jouw vak op het leerlingenweb. Copyright 2008. http://cursus.anguillanova.nl

E.M. van Nieuwaal. Frontpage 2003. Jouw vak op het leerlingenweb. Copyright 2008. http://cursus.anguillanova.nl Frontpage 2003 Jouw vak op het leerlingenweb E.M. van Nieuwaal Copyright 2008 http://cursus.anguillanova.nl Inleiding... 3 1. Ontwerp een sitemap... 4 2. Index.htm... 4 3. Nieuwe pagina s maken... 7 4.

Nadere informatie

Websitecursus deel 1 HTML

Websitecursus deel 1 HTML Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015 Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!

Nadere informatie

Die vraag krijg ik regelmatig. De meest voorkomende situaties zijn deze:

Die vraag krijg ik regelmatig. De meest voorkomende situaties zijn deze: Hoe verhuis je een WordPress website? Die vraag krijg ik regelmatig. De meest voorkomende situaties zijn deze: Iemand heeft een WordPress website en stapt over naar een andere webhost (meestal blijft het

Nadere informatie

qwertyuiopasdfghjklzxcvbnmq ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty

qwertyuiopasdfghjklzxcvbnmq ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty qwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwer SEO Optimalisatie tyuiopasdfghjklzxcvbnmqwerty Carlo Konijn uiopasdfghjklzxcvbnmqwertyui 29-5-2013 Chi Computers opasdfghjklzxcvbnmqwertyuiop

Nadere informatie

SEO checklist om hoog in Google te komen

SEO checklist om hoog in Google te komen SEO checklist om hoog in Google te komen Als je website hoog in Google komt dan heeft dat vele voordelen. Je bent beter vindbaar, krijgt meer (gerichte) bezoekers. En als je het goed aanpakt kun je die

Nadere informatie

WORDPRESS. De Volgende Stap. 2015, Roy Sahupala

WORDPRESS. De Volgende Stap. 2015, Roy Sahupala WORDPRESS De Volgende Stap 2015, Roy Sahupala Belangrijke opmerking De methodes en programma s in deze handleiding zijn zonder inachtneming van enige patenten vermeld. Ze dienen enkel voor amateuren studiedoeleinden.

Nadere informatie

WORDPRESS. op de FourBottles manier. Pagina 1

WORDPRESS. op de FourBottles manier. Pagina 1 WORDPRESS op de FourBottles manier Pagina 1 Fijn dat je voor FourBottles hebt gekozen voor het realiseren van je website. Bij een website hoort natuurlijk een Content Management Systeem (CMS). Ik maak

Nadere informatie

SEO whitepaper. 1. Inleiding 3. 2. Wat is SEO? 4. 3. Onderdelen SEO 5. 4. Praktische SEO tips 8. 5. Hulp nodig? 10

SEO whitepaper. 1. Inleiding 3. 2. Wat is SEO? 4. 3. Onderdelen SEO 5. 4. Praktische SEO tips 8. 5. Hulp nodig? 10 SEO SEO whitepaper 1. Inleiding 3 2. Wat is SEO? 4 3. Onderdelen SEO 5 4. Praktische SEO tips 8 5. Hulp nodig? 10 2 Inleiding Dit document is met grote zorgvuldigheid opgesteld, echter kunnen fouten voorkomen.

Nadere informatie

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond Frontpage Express is het meest eenvoudige programma voor het maken van je homepage. Is het programma niet geïnstalleerd op je PC, dan is het te downloaden en daarna te installeren. We zullen nu een aantal

Nadere informatie

11. Website controleren

11. Website controleren 11. Website controleren 11.1 Website controleren op verschillende browsers Het blijkt nog altijd nodig te zijn een website te controleren. De website zoals deze er in Kompozer uit ziet, ziet er op internet

Nadere informatie

Verdien model. Affiliate marketing

Verdien model. Affiliate marketing Verdien model Er zijn verschillende manieren om geld te verdienen met je site. Als je slim bent gebruik je alle manieren zo kan je op zo veel mogelijk manieren geld uit je site halen. Al deze manieren

Nadere informatie

Handleiding voor het zelf onderhouden van je Wordpress website

Handleiding voor het zelf onderhouden van je Wordpress website Handleiding voor het zelf onderhouden van je Wordpress website Inhoud Introductie... 3 Belangrijke Termen... 3 Inloggen op jouw Wordpress website... 4 Een Backup maken... 4 Het Wordpress dashboard... Thema

Nadere informatie

16. Web Station. In dit hoofdstuk komen de volgende onderwerpen aan bod:

16. Web Station. In dit hoofdstuk komen de volgende onderwerpen aan bod: 16. Web Station U kunt uw QNAP NAS gebruiken om een website te hosten. U kunt zelf een website bouwen in HTML of gebruik maken van één van de vele content management systemen die beschikbaar worden gesteld

Nadere informatie

Handleiding Website Laatste update: april 2014

Handleiding Website Laatste update: april 2014 Laatste update: april 2014 1. Google Search Tijdens de ontwikkeling van uw website werd er veel aandacht besteed aan optimalisatie voor zoekmachines zoals Google. Dit onder andere door de broncode technisch

Nadere informatie

Informatieopslag van websites

Informatieopslag van websites Informatieopslag van websites Inleiding Tijdens je project raadpleeg je veel websites. Vaak is het lastig om achteraf te achterhalen wat het adres en bijbehorende inhoud van de desbetreffende pagina was.

Nadere informatie

Kies [paginas]: Een lijst met alle paginas verschijnt. Muis-over en er verchijnen opties per pagina: Bewerken prullenbak bekijken

Kies [paginas]: Een lijst met alle paginas verschijnt. Muis-over en er verchijnen opties per pagina: Bewerken prullenbak bekijken Wordpress handleiding: Algemeen: -Hosting 200Mb webruimte en 2Gb verkeer per maand voor 3 euro per maand. Bij overschrijding volgt automatisch een verdubbeling naar de ruimte/verkeer naar 400Mb/4Gb/6 euro

Nadere informatie

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind

Nadere informatie

SMART- Leerdoel Mathijs de Bok Emotion - RMM42

SMART- Leerdoel Mathijs de Bok Emotion - RMM42 SMART- Leerdoel Mathijs de Bok Emotion - RMM42 Inhoudsopgave 1.0 Inhoudsopgave 1 1.0 Inleiding 2 1.1 Algemeen 2 1.2 Mijn leerdoelen 2 2.0 Beschrijving leerdoel 2 3 2.1 Responsive 3 2.2 Up- to- date HTML&CSS

Nadere informatie

Websites & Zoekmachines

Websites & Zoekmachines Zoekmachines, Wat en Hoe... 2 Wat is een Zoekmachine?... 2 Hoe werkt het?... 2 Meldt Je Site Aan... 3 Meta-data... 3 Links naar je site... 3 De grote 3... 3 Hoe aanmelden?... 3 Wachttijd na aanmelding...

Nadere informatie

Zelf een eenvoudige website opzetten. Jorrit Groenevelt & Arjan Kraak Juni 2013

Zelf een eenvoudige website opzetten. Jorrit Groenevelt & Arjan Kraak Juni 2013 Zelf een eenvoudige website opzetten Jorrit Groenevelt & Arjan Kraak Juni 2013 1 Inleiding/Doel Een onmisbaar onderdeel van het starten van een bedrijf is het opzetten van een website. Een onderneming

Nadere informatie

Studio Visual Steps Uploaden naar uw eigen webhostingservice

Studio Visual Steps Uploaden naar uw eigen webhostingservice Studio Visual Steps Uploaden naar uw eigen webhostingservice Aanvullend PDF-bestand bij het boek Een website maken voor uw eigen bedrijf Uploaden naar uw eigen webhostingservice 2 Uploaden naar uw eigen

Nadere informatie

Handleiding voor het maken van je eigen webpagina op de schoolsite

Handleiding voor het maken van je eigen webpagina op de schoolsite Waar gaat dit over? Handleiding voor het maken van je eigen webpagina op de schoolsite Hier leer je hoe je een eigen webpagina kunt maken op de site van de school. Op deze webpagina kun je vertellen wie

Nadere informatie

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.6 Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Aan de slag met Twitter

Aan de slag met Twitter Aan de slag met Twitter Registreren De URL (het adres op het internet) om te registreren is: https://twitter.com/signup In dit voorbeeld is er een Twitter 1 account aangemaakt voor een woning die te koop

Nadere informatie

1) Inloggen op beheer omgeving a. Aanmelden b. Wachtwoord vergeten 2) Berichten a. All posts

1) Inloggen op beheer omgeving a. Aanmelden b. Wachtwoord vergeten 2) Berichten a. All posts 1) Inloggen op beheer omgeving a. Aanmelden b. Wachtwoord vergeten 2) Berichten a. All posts b. Nieuw bericht c. Categories d. Tags 3) Media a. Bibliotheek b. Nieuw bestand 4) Pagina s a. All pages b.

Nadere informatie

HTML Editor: de eerste stappen

HTML Editor: de eerste stappen LES 18 HTML Editor: de eerste stappen In deze les leert u werken met HTML Editor. Daarbij geven we tevens een inleiding tot HTML. Hoewel op dit moment HTML versie 4.01 in gebruik is, maakt de HTML Editor

Nadere informatie

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Hier vind je de cursus op het internet: www.acc.dds.nl/acconline/ Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Een bestaande website met kompozer www.acc.dds.nl/lesonline/kompozer/website/ Bestanden

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Saft Websites Gebruikershandleiding Wordpress icm Woocommerce pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Liever persoonlijke

Nadere informatie

Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS

Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS Handleiding CMS 1 Inhoudsopgave 1. Inloggen... 3 2. Het CMS... 3 3. Websitecontent... 4 3.1 Een nieuwe pagina toevoegen... 4 3.2 Een pagina wijzigen... 4 3.3 Een pagina verwijderen... 5 4. De WYSIWYG editor...

Nadere informatie