Tip: doorzoek de pagina met Control-F (Command-F op de Mac). Kik hier voor nieuwe advanced tips.
Internet (het world wide web of www) is een wereldwijd computernetwerk. Als je twee computers naast elkaar zet wil je al gauw dat er gegevens van de ene naar de andere overgezet kunnen worden. Om dat te doen werden computers via ethernet (netwerkkaart) met elkaar verbonden. De gegevens kunnen dan via een afgesproken “protocol” uitgewisseld worden.
Er liggen alleen geen ethernetkabels tussen alle huizen. Maar er liggen wel overal telefoondraden of tv-kabels. Deze draden kan je ook gebruiken voor een netwerk. Het computersignaal moet dan vertaald worden naar een signaal dat geschikt is voor die kabel. Dat doet de modem: een modulator-demodulator, hij codeert en decodeert.Het gebruikte protocol heet HTTP (HyperText Transfer Protocol). Web-adressen beginnen daarom met "http://www.". Daarachter tik je de domeinnaam, met een toplevel-domein erachter (bijvoorbeeld .nl of .com). Het allerlaatste stukje kabel, van modem naar computer, kan je vervangen door draadloze wifi.
Mappen kun je bereiken door een slash, gevolgd door de mapnaam of documentnaam: http://www.aartjan.nl/
De homepage is de eerste pagina van een website, de openingspagina dus. Het bestand heet meestal index.html en staat in de hoofdmap (root) van de webserver. De HTML-code wordt ingelezen en in een standaardopmaak getoond door de browser (zoals Chrome, Firefox of Explorer).
Met HTML kan je tekst ordenen en structureren door code. Je kunt aangeven dat iets “Kop 1” is of “Kop 2” (er zijn 6 kop-niveaus), waar een paragraaf begint en eindigt, of er een genummerde of ongenummerde opsomming is, of een woord vet is of cursief, waar een plaatje staat en waar je op kan klikken. Er zijn er nog een aantal, maar dit zijn de belangrijkste. De basis-HTML kun je in een middag leren.
In het html-bestand staan teksten, plaatjes en links naar andere pagina’s. Die andere pagina's zijn ook weer html-bestanden. Er kunnen er audio- en videobestanden in de pagina getoond worden. Bestanden kunnen overal op internet staan. Het webadres van een plaatje bijvoorbeeld (met http://www etc erbij) kun je kopiëren en gebruiken. Normaliter staan de bestanden op je eigen server. De plaatjes, de vormgeving en de scripts staan voor het gemak in aparte mappen.
De HTML-taal is niet geschikt voor visuele opmaak zoals kleur, lettertype, marges en inspringers; dat doe je met CSS (Cascading Style Sheets). Deze css (opmaakdefinitie) zet je in een los bestand op de server. Verderop komt CSS nog uitgebreid aan bod.
De HTML- en CSS-code van elke pagina kan je altijd bekijken, bijvoorbeeld via rechtklik > toon bron, of heel uitgebreid (én aanpasbaar, in Chrome en Safari) met Control-Alt-i (Command-Alt-i op de Mac).
Een webserver is een computer die 24 uur per dag aanstaat en een snelle upload heeft. Zulke servers staan bij hosting-providers. Jouw site staat dan op hun server. Die server kan ook jouw email hosten. Je kan zelf ook een server thuis installeren op je computer of op je NAS. Webhosting kost niet veel, dat kan al vanaf 10 euro per jaar. HIer kan je providers vergelijken:
https://www.mijnhostingpartner.nl/
https://www.hostingwijzer.nl
http://www.hostingvergelijken.eu
https://www.hostinginnederland.nl/webhosting/
https://www.ispgids.com/webhosting
https://www.mcseo.nl
Een access provider biedt toegang tot internet. Deze providers bieden je meestal bij het abonnement ook gratis ruimte op hun server aan waar jij je website neer kan zetten.
Elke modem (en eigenlijk ook elk aangesloten apparaat of computer) heeft een ip-nummer. Dat ziet er bijvoorbeeld zo uit: 80.89.239.60. Je kan door het intikken van dat nummer in je browser contact maken met die computer. Maar het is veel handiger om een naam te gebruiken. Dat is een domeinnaam. De extensie "nl" erachter is een top-level-domein. Die naam wordt online vertaald naar je ip-adres door DNS-servers (Dynamic Name Servers).
Het is erg belangrijk om een goede domeinnaam te hebben. Check bij een provider of je gewenste domeinnaam vrij is. Een domeinnaam kun je registreren bij vrijwel elke provider en kost zo’n 5 tot 12 euro per jaar.
Via ftp (file transfer protocol) kun je de files op de server zetten, ofwel uploaden. In een ftp-programma zoals Filezilla, Cyberduck (of direct in Dreamweaver of Notepad++) zie je 2 vensters: de bestanden op jouw eigen computer, en de bestanden op de server. Bestanden die klaar zijn zet je op de server (uploaden), de website staat dan pas echt online. Bestanden van internet naar je eigen computer overbrengen is downloaden.
Je hebt 3 gegevens nodig om in te kunnen loggen (kijk in je gegevens van je provider):
De naam van de server (bijvoorbeeld ftp.gameschool.nl),
je login en
je password. Verder moet je de website in de map zetten die daarvoor bedoeld is: die heet meestal public_html of httpdocs.
Als de ftp niet werkt, check dan al je firewalls.
De website-statistieken leveren zeer interessante informatie. Je weet dan bijvoorbeeld waar de bezoekers vandaan komen, wat ze bekijken, hoe lang ze blijven, hoeveel pagina's ze bezoeken, welke pagina's het beste scoren, welke zoekwoorden ze gebruiken om jou te vinden, en van welke sites ze doorgelinkt werden. Statistieken kan je gratis op je website zetten (afgeschermd, alleen voor jezelf zichtbaar), bijvoorbeeld met Google Analytics.
Je website moet goed gevonden kunnen worden, ofwel goed geïndexeerd (doorzocht en gecategoriseerd). Je kan je website hiervoor optimaliseren. Dat heet SEO, search engine optimization. Iedereen wil graag hoog in de zoekresultaten te komen. Een zoekmachine zoals Google zoekt dagelijks het internet af en indexeert alle nieuwe pagina’s en veranderingen. Het recept van Google is geheim en wordt voortdurend aangepast, maar er zijn wel enkele belangrijke principes bekend:
Een website is HTML-code die door een browser wordt getoond. HTML-code kun je met elk tekstprogramma maken zoals Kladblok op Windows, of Teksteditor op de Mac, maar er zijn ook veel gespecialiseerde (en soms gratis) editors zoals Notepad++ of SublimeText, of apps in browsers zoals CodeAnywhere in Chrome.
Dreamweaver is een voorbeeld van een WYSIWYG-html-editor, ofwel what you see is what you get: je ziet niet alleen de code maar ook het voorbeeld, en je kan in het voorbeeld direct wijzigingen aanbrengen. De vormgeving kan je in CSS-taal intikken maar de genoemde software kan dat ook voor jou op een makkelijkere manier doen, zoals met auto-aanvullen, kleurcodering, auto-indent en spellcheck.
Dezelfde vormgeving kan er anders uitzien op verschillende browsers, op verschillende systemen en op verschillende schermen. De grootste browser in 2014 is Chrome, daarna volgen Firefox en Internet Explorer. Safari en Chrome gebruiken dezelfde engine, webkit. De engine van Firefox heet Mozilla, afgekort moz, Explorer heet ook wel ie. Er zijn helaas zelfs in 2014 nog steeds verschillen tussen browsers. Vooral in de nieuwste CSS3-technieken waar nog geen standaard voor is. In die gevallen kan je soms voor elke browser apart de CSS aangeven met een vendor prefix, bijvoorbeeld -webkit- voor Chrome, en -moz- voor Firefox.
HTML is ontwikkeld om de inhoudelijke structuur van een tekst weer te geven; om tekst te ordenen met behulp van code. Vrijwel alle website zijn in HTML gemaakt. HTML is niet geschikt voor visuele opmaak; dat gebeurt met stylesheets (CSS). De browser gebruikt een standaard vormgeving als er geen CSS bijstaat.
De computer-instructies staan altijd tussen rechte haakjes: <zo dus>.
Een instructie (ook wel tag) moet je ergens eindigen, met een slash in de eind-tag: </zo dus>. Als het niet tussen die haakjes staat, dan is het gewone tekst, zichtbaar voor de bezoeker.
De code tussen de haakjes is in kleine letters, niet in hoofdletters.
Bestandsnamen en mapnamen op webservers, zoals index.html, ima/ en plaatje.jpg zijn ook in kleine letters, zonder spaties of speciale tekens. Alleen cijfers, letters, afbreeksreepjes (-) en underscores (_) mogen. Een slash betekent een map dus die kun je niet in de naam gebruiken.
Je kan gratis online HTML en CSS leren en oefenen, bijvoorbeeld bij handleidinghtml.nl, bij Codecademy.com of tutsplus.com. De grootste, w3schools, is ook heel goed. Of betaald, zoals bij lynda.com of udemy.com. Kijk voor nieuwe tips op aartjan.nl/css
Een voorbeeld van een tekststructuur:
<h1>Dit is een Koptekst level 1</h1>.
Met het element <h1>geef je een koptekst aan. Alles wat tussen deze begin- en eindtag staat wordt een Koptekst van het aangegeven level. Een <h2> is een kleinere (sub)kop. Er zijn 6 levels: <h1> tot en met <h6>.
<p>Paragraaf</p>
Een paragraaf <p> is een blokje samenhangende tekst, bijvoorbeeld 5 zinnen.
Nu een lijst met items, dit wordt ook vaak voor een menu gebruikt:
<ul> Unordered list. Zo begint een lijst met bulleted items. <li>Dit is een item</li> <li>Nog een list item</li> </ul> Zo sluit de lijst weer af
Vet of cursief gaat zo (in plaats van <i> of <b> kan <em> of <strong> ook):
<i>Cursief</i> Alles wat tussen deze tags staat wordt cursief. <b>Vet</b> Alles wat tussen deze tags staat wordt vet.
Elk element wordt altijd afgesloten met een / (slash), zelfs al is het een enkel, los element:
<br />
Deze Line Break <br> breekt een tekst naar de volgende regel (zachte return). Het sluit zichzelf af, dus <br /> in plaats van <br></br>.
Het element <a> gebruik je voor een link, en het element <img> is een afbeelding. Deze beide elementen hebben ook attributen nodig, verderop meer daarover.
Een <hr> is een horizontal rule, een lijn dus. Hij sluit zichzelf af dus de correcte manier is <hr />.
Er zijn 2 elementen die alleen maar voor de vormgeving gebruikt worden: <div> en <span>.
Een <div> is een block-element waarmee je bijvoorbeeld een menu, een kolom tekst of een ander heel blok kunt afbakenen.
Een <span> is een inline-element waarmee je een stukje inline tekst kunt afbakenen, bijvoorbeeld om een paar woorden rood te maken.
Er zijn 2 soorten elementen: inline en block. Inline elementen kunnen in een regel tekst staan, zoals img, a, b, i en span. Block-elementen vormen een heel blok, zoals h1, h3, p, ul , li en div. Je kunt dat in de css aanpassen met display:block of display:inline.
Het element <a>, een anchor ofwel een link, heeft attributen nodig:
<a href="contact.html">Dit is een link naar de contactpagina </a>
Het attribuut href gebruik je om het doel van de link (de referentie van de hyperlink) aan te geven. Het wordt gevolgd door een = en een waarde. Als die waarde een spatie bevat moeten er aanhalingstekens omheen. Je kan beter de waarde atijd tussen aanhalingstekens (quotes) zetten. Enkele of dubbele quotes maakt niet uit, als je maar overal dezelfde gebruikt.
Er kunnen meerdere attributen toegevoegd worden. De volgorde maakt niet uit, zolang het maar achter het element staat, en tussen de <> blijft. Bijvoorbeeld om een link te laten openen in een nieuw venster, met target=_blank. Of om een tooltip te tonen als je de muis stilhoudt over een link (een mouse-over of hover): title="Hier een tekst".
<a href="contact.html" target=_blank title="Hier een tekst">
Link naar de contactpagina </a>
Het element img is een afbeelding. De bestandsnaam (source) staat in het attribuut src. Je kan de width en height aangegeven, in pixels of in procenten (percentage van het venster). Je kan het plaatje omschrijven met alt. Die mag ook leeg zijn.
<img src=plaatje.jpg width=200px height=150px alt="" />
Let ook op de slash: de img-tag sluit zichzelf af, net als een <br />
Attributen worden ook gebruikt om CSS (vormgeving) aan te roepen:
<p class=rood> Deze paragraaf heeft de stijl die bij .rood in de css staat.
<div id=menu> Deze div (division) heeft de stijl die bij #menu in de css staat.
Als er .rood in de css staat, staat er class=rood in de HTML.
Als er #menu in de css staat, staat er id=menu in de HTML.
Een punt is dus een class, een hekje is een id.
Een class kan vaker voorkomen, zoals rode woorden.
Een id mag maar 1x voorkomen per pagina, zoals het menu.
Tip: je kan dus ook altijd alleen maar class gebruiken.
Een named anchor is een link die naar een bepaalde plek binnen een pagina verwijst. Bijvoorbeeld een knop die direct naar de bovenkant van de pagina springt. Zet een anker bovenaan en geef het attribuut id=top. Maak onderaan een link naar deze plek met href=#top.
<a id="top"></a> Zet dit op de plek waar je naartoe wil linken <a href="#top">top</a> Dit is een link naar die plek
Een mailto-link is een link die een mailtje aanmaakt, gericht aan het adres dat je opgeeft (er moet bij de bezoeker dan wel een mailprogramma in gebruik zijn). Je kan ook alvast het Onderwerp invullen in de code, en/of het bericht zelf:
<a href="mailto:jouwemailadres">Contact</a> <a href="mailto:jouwemailadres?SUBJECT=Reactie">Reageer</a>
Accenten, trema's en tekens die in code een speciale betekenis hebben, zoals (<) of (>), de ampersand (&) en aanhalingstekens (") kan je niet zomaar gebruiken. Voor deze tekens is er code, zoals:
é = é " = " © = ©
Google naar "special characters HTML". In programma's als Dreamweaver kan je in het preview-venster tekst intikken, Dreamweaver zet de juiste code dan neer. Een overzicht zie je via Insert > HTML > special characters > other.
<!-- Tussen deze code zet je commentaar. Je kan zo ook een stuk code uitzetten -->
Een voorbeeld van een eenvoudige basispagina staat op example.com. Bekijk daarvan de broncode, en knip en plak die in bijvoorbeeld in een leeg document. Noem dat index.html en je hebt al een compleet beginnetje. Even afgezien van het stukje <style> t/m </style>. Dat kun je weghalen, want de css kan je beter in een apart document zetten (in een externe css).
<!doctype html>
Op de allereerste regel staat een doctype declaration. Die geeft aan welk type html er wordt gebruikt, in dit geval html5 of nieuwer. Dit voorkomt eventuele problemen.
<html> Hierna begint de html-code.
Dit kan ook: <html lang=nl>, dan geef je meteen aan in welke taal de pagina is.
<head> Hier komt extra informatie die niet getoond wordt aan de bezoeker.
In de Head staat bijvoorbeeld waar de css staat, waar de scripts staan en wat de titel van het document is:
<link href=stijl.css rel=stylesheet />
<script src="jescript.js" type="text/javascript"></script>
<title> De titel is belangrijk voor Google, en zie je in de titelbalk van het venster. </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Deze meta-tag in de head kan je toevoegen om aan te geven dat de gebruikte karakterset UTF-8 is. Een andere karakterset is bijvoorbeeld Chinees of Arabisch. Een meta description is ook aan te raden, zodat je invloed hebt op hoe je site getoond wordt in zoekmachine-resultaten:
<meta name="description" content="Een wervende zin met belangrijke keywords erin"/>
</head> Hier eindigt de extra informatie en hierna begint de zichtbare pagina: <body> Alles wat hierna komt wordt getoond aan de bezoeker. --------------------------- </body></html> Hier eindigt de body en eindigt meteen ook de html
Een HTML-pagina werkt ook zonder alle bovenstaande code! Het is allemaal niet verplicht. De <title> is belangrijk voor Google, zodat je gevonden kan worden op de woorden die daar staan.
Kijk hier voor voorbeelden van HTML elementen voor een formulier. Bekijk de code daarvan voor extra uitleg (die staat in de comments).
Een tabel <table> wordt gebruikt voor allerlei data of tekst die je normaliter ook in een tabel zou plaatsen. In de tabel staan table rows (rijen) met <tr>, en elke row bestaat uit table data cells <td>. Bovenaan kun je beginnen met een header, met <th>. Een td of th kan meerdere kolommen omspannen met een colspan: <td colspan="2">.
<table>
<tr><th>Naam</th><th>Leeftijd</th><th>Lengte</th></tr>
<tr><td>Aart</td><td>42</td><td>1,90m</td></tr>
<tr><td>Barbara</td><td>44</td><td>1,75m</td></tr>
<tr><td>Boris</td><td>19</td><td>1,94m</td></tr>
</table>
| Naam | Leeftijd | Lengte |
|---|---|---|
| Aart | 42 | 1,90 m |
| Barbara | 44 | 1,75 m |
| Boris | 19 | 1,94 m |
De vormgeving in CSS-code van bovenstaande tabel is:
th {background:#ccc; color:white;}
th, td {text-align:center; width:60px}
td {border-bottom:1px solid #ccc;}
table {border-collapse:collapse;}
Met een <iframe> plaats je binnen een pagina een inline frame waarin een andere webpagina getoond wordt.
<iframe src="filmpje.html"></iframe>
Een veelgebruikt voorbeeld is de insluit-code van een Youtube-filmpje, Soundcloud-muziekje of Google Maps kaartje (Streetview kan ook).
<iframe width="560" height="315" src="http://www.youtube.com/embed/SmDW123" frameborder="0" allowfullscreen></iframe>
De code <pre> staat voor preformatted: als de tekst exact zo geformatteerd weergegeven moet worden, met spaties, returns en al. Dat gebruik je vaak voor code-voorbeelden. Blockquote kan je gebruiken voor citaten of inspringers. Met css kan je de standaard vormgeving veranderen.
Dit is een voorbeeld van <pre>
Dit is een voorbeeld van een <blockquote>. Springt standaard aan beide kanten een beetje in. Dit is een voorbeeld van een <blockquote>. Springt standaard aan beide kanten een beetje in.
Pak een tekst en maak er opgemaakte HTML van.
Voeg een <title> toe. Zet er weloverwogen tekst in (voor Google).
Voeg <head> en <body> toe. Maak een <h1> en een <h3> etc.
Maak een paar paragrafen. Probeer het verschil uit tussen <p> en <br />
Maak woorden vet, en ook cursief, <b> en <i>
Maak links, <a href="http://www.nu.nl" >Lees het nieuws</a>. Maak een mailto-link:
<a href="mailto:adres@domein.nl”>Stuur een email</a> of <a href="mailto:adres@domein%2Enl?SUBJECT=Reactie">Stuur een email</a>
Gebruik speciale tekens in de tekst. Maak plaatjes (via save for web in Photoshop), zet die in een map en plaats ze in je document. <img src="ima/klein.jpg">. Plaats ook plaatjes die op internet staan. Maak de plaatjes klikbaar, voeg attributen toe zoals border="0"
Laat een nieuw venster openen (voor links die naar buiten gaan of naar vergrotingen).
<a href="ima/groot.jpg" target="_blank" >
Save als index.html. Voeg alt en title attributen toe.
Maak een menu, maak er een lijst van, maak 4 documenten: contact.html enzovoorts.
Plak een Youtube-filmpje in. Plak een Google Maps-kaart in. Wijzig bij allebei afmetingen en bekijk wat je nog meer kan wijzigen. Maak <div>'s met id's, rondom het menu, rondom de footer, en 1 rondom alles, noem die bijvoorbeeld container.
Dreamweaver heeft een uitgebreide HTML-editor. Je krijgt veel hulp bij het intikken van code: auto-aanvullen, kleurcodering, auto-indent en spellcheck.
Maak een nieuw document. Kies linksboven in je document Split: je ziet zowel de Code als de Preview, naast elkaar.
View options: Word wrap aanzetten, highlight invalid html aan.
Zet het font eventueel groter: Preferences > fonts > code view
Het scherm bestaat onder andere uit:
Werkblad [ File > new ]
Object panel [ window > objects ]
Maak eenvoudig objecten aan zoals plaatjes, tabellen, speciale karakters, frames, formulierelementen etc. Bestaat uit verschillende onderdelen: characters, common, forms, frames en invisibles
Properties [ window > properties ]
Alles wat in het werkblad geselecteerd is kan met de properties worden aangepast.
Kun je een object niet zo maar selecteren (bijv bij tabellen) dan kun je linksonderin het werkblad (statusbar) klikken op <table> (tabel) of <tr> (rij van tabel) of <td> (tabelcel). De hele HTML-structuur staat hier aanklikbaar in, handig om zo elementen te selecteren.
HTML source [ window > HTML source ] of F10.
Laat de HTML broncode zien. Direct in de code werken is vaak sneller, makkelijker ofvaak ook noodzakelijk.
Maak een nieuwe map op je computer. Maak daarin een map “ima” voor de plaatjes.
Ga naar Dreamweaver en kies [Site > new site]. Geef een naam aan je site. Bij [local info / local root] selecteer je de zojuist gemaakte map. Vink “refresh” en “cache” allebei aan.
Als er nog geen leeg document staat maak dan een nieuw blanco html-document [file > new].
Bekijk (en edit) de HTML-code met F10 ofwel [window > html source].
Ga in de code werken om te kijken hoe de hulpjes zoals de auto-complete en kleurcodering van Dreamweaver werken: Wijzig allerlei dingen, bijv de title en de teksten.
Klik in het preview-venster. Preview in je browser (F12, kun je afstellen via File > Preview > edit).
Maak een <H1>, plak teksten in, maak er alinea’s van. Probeer ook de <br> uit. Maak koppen en subkoppen met <h1>, <h2> en <h3>.
Behalve zelf code intikken kan je ook dingen bewerken via de knoppen in de properties:
Maak een unordered list: <ul>, elk item komt dan tussen <li> en </li> staan.
Maak van een woordje een link in de properties. Bekijk de code.
Tip: Ctrl-1 is kop1, Ctrl-2 kop2 etcetera, dus bijna net als in Word (Ctrl-alt-1).
Via de properties kun je ook veel aanpassen: bijvoorbeeld bold, italic (bekijk de code).
In de HTML kan je de tekst structureren. De site zal dan in alle browsers gestructureerd en goed leesbaar zijn. Het maakt ook de vormgeving straks makkelijker.
Maak kopteksten en geef ze de juiste Heading level (sneltoets Ctrl-1 t/m 6, bijna net als in Word)
Verdeel de tekst in korte alinea’s.
Tik een menulijst, maak er een bulleted lijst van (via properties)
Maak van de menu-items klikbare links via rechtsklik > hyperlink of via de Properties.
Aan het element img voeg je minimaal de attributen src en alt toe. Het src-attribuut geeft aan waar de afbeelding staat. Met het alt-attribuut geef je een tekstueel alternatief op (ofwel de tooltip of hover). Het is beter om altijd de attributen width en height erbij te zetten, dan wordt de pagina sneller en beter getoond.
<img src="1.jpg" width="350" height="475" alt="Gezicht" />
Save en kijk rechtsonder naar filesize, downloadtijd en schermafmeting.
Je ziet dat plaatjes je site een stuk langzamer maken qua download-tijd.
Een hyperlink is een klikbare verbinding met een ander document. Je maakt een link met het a (anchor) element. Het href attribuut definieert waar de knop naar toe moet wijzen.
<a href="index.html">Ga terug naar home</a>
Een link naar een andere site kan ook:
Bezoek de <a href="http://www.handleidinghtml.nl"> handleiding </a>
Een plaatje kan ook een link zijn. De code van de link komt dan om het plaatje heen. Voeg dan eventueel toe als attribuut: border="0", dan komt er geen blauw randje omheen. Als je het attribuut target="_blank" toevoegt, wordt de link geopend in een nieuw browserwindow.
Een tabel bestaat altijd uit minstens 1 rij <tr> en minstens 1 <td> (cel). Wij maken 3 kolommen: 1 tr met 3 td’s , om extra marge links en rechts te maken.
(Eigenlijk mag je een tabel alleen gebruiken voor tabualaire data zoals een kalender, rapport of catalogus, en niet voor indeling van je pagina, want dat moet eigenlijk ook in het stylesheet)
Klik bovenin in het Insert-palet op het tabel-ikoon (hang er met je muis even op voor een omschrijving). In de buitenste twee td’s zetten we de Width op 10%.
Probeer ook de volgende attributen uit:
Cellpadding, cellspacing, border, bordercolor (deze laatste kan ook per td).
Tabel: de trans.gif truuk
Als de tabel niet doet wat je wil en de code toch echt klopt (dat gebeurt helaas vaak) dan kun je een tabel-cel forceren door er een transparant gifje in te zetten met de gewenste afmeting.
Je kan in veel programma’s je bestand exporteren naar HTML. Ook kun je bestanden exporteren naar het pdf-formaat. Bijvoorbeeld een bestaande bedrijfsfolder, handleiding of portfolio. Je kunt dan de pdf direct in je website als een link plaatsen. Afhankelijk van de instellingen van de gebruiker opent dit bestand in de browser of in de gratis Acrobat Reader die vrijwel iedereen heeft. Safari kan tegenwoordig ook direct pdf inline afbeelden.
Javascript kun je gebruiken om extra mogelijkheden aan HTML toe te voegen. Een voorbeeld is het openen van een nieuw browservenster met specifieke afmetingen (pop-up). In Dreamweaver kan dit via het Behaviours-window. Klik daar op het plusje om een behaviour aan het geselecteerde element toe te voegen. Kies daar ook een event, bijvoorbeeld onClick of onMouseup, dan wordt het behaviour uitgevoerd na dat event.
In de code zie je bovenaan (in de head) de javascripts staan. In de body, op de plek waar je het behaviour hebt ingevoegd, zie je dat het script daar wordt aangeroepen.
In een CMS (Content Management System) kan jij (of jouw klant) zonder kennis van HTML de inhoud van de website wijzigen of een nieuw artikel aanmaken. Na installatie log je in op de back end en zie je een formulier met invulvelden waarin je teksten kan intikken of plaatjes kan uploaden. Als het klaar is kun je het direct publiceren naar de front end. Er zijn meerdere rollen, zoals iemand die alleen mag schrijven, en iemand die artikelen kan publiceren. Bekende open source (gratis) CMS'en zijn: Wordpress, Joomla, Drupal, Typo3.
Hier een uitgebreide cursus Wordpress.
Dit gaat het makkelijkst en het best in Photoshop. Maar het kan ook in andere programma’s.
Open het plaatje in Photoshop. Maak een uitsnede (toets c, staat voor Crop). Kies Save for web. Bekijk het paneel en probeer alle opties. Bewaar foto's als medium jpg in de gewenste grootte, bijvoorbeeld 1200 pixels breed voor grote plaatjes en 200 px breed voor kleine plaatjes. Oefen dit met een aantal foto's.
Op het web zijn de belangrijkste bestandsformaten voor beeld: jpg, gif en png.
Jpg: miljoenen kleuren, lossy compressie.
Gif: max 256 kleuren, transparantie (op 1 kleur), lossless compressie, animatie mogelijk.
Png: Met alpha-kanaal, dus volledige transparantie, lossless compressie, miljoenen kleuren.
PDF is een vector-formaat, dat gebruik je om opgemaakt drukwerk zoals folders, boeken, manuals of zelfs word-documenten op het web aan te bieden. Je kunt er op inzoomen, je kunt het printen, het is zeer compact qua bestandsgrootte. Je kunt er ook via links snel in navigeren. Safari kan pdf inmiddels al inline (in de pagina) afbeelden.
Foto’s bevatten miljoenen kleuren en kun je daarom het best bewaren in het jpg-formaat. Kies in Photoshop “Bestand > Opslaan voor web”. Bekijk alle opties uitgebreid. Maak de bestandsgrootte zo klein mogelijk. Behoud je originele beeld ook, want elke keer bewaren verslechtert de kwaliteit bij jpg.
Als er niet veel kleuren nodig zijn, zoals bij veel logo’s, dan kies je gif. Voordeel hierbij is de losless compressie, en de transparante kleur (alhoewel dat maar 1 kleur kan zijn, en niet een heel alpha-kanaal). Kies in Photoshop “Bestand > Opslaan voor web”. Bekijk alle opties uitgebreid. Zet al je beelden in een map genaamd "ima" in je websitefolder.
Vergeet niet de alt-tag bij elk beeld in te vullen, desnoods leeg: alt=" ". Wil je dat de alt-tag ook als tooltip op de Mac werkt, dupliceer dan de hele alt-tag en hernoem alt= tot title=.
Met stylesheets heb je meer controle over hoe plaatjes eruit zien.
Bijvoorbeeld de borders voor alle plaatjes tegelijk:
img {border: 1px solid black;}
Zo kun je ook de border op 0 zetten als veel van je plaatjes links zijn (die krijgen namelijk in Explorer standaard een blauwe border)
Een favicon is dat mini-plaatje in de url-balk, naast de domeinnaam, en het ikoon dat je ziet als je er een Favoriet/Bladwijzer van maakt. Het bestandsformaat is .ico, maar .png kan ook en is handiger, want die kan je met Photoshop maken. Het plaatje wordt meestal als 16x16 pixels afgebeeld, maar je kan 'm beter meteen 192x192 pixels maken, dan is het meteen goed voor Retina schermen, en ook meteen als App-icon, op Android en IOS.
Upload je favicon.png naar je server, en zet dit in de <head> van al je pagina's:
(noot: veel browsers kunnen een favicon niet refreshen)
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="favicon.png">
Die tweede regel is het App icon: het (grote) ikoon op je mobile device (smartphone / tablet) als je een website toevoegt aan je homescreen (als Web App).
Float kan je gebruiken voor drijvende plaatjes of kolommen die naast elkaar moeten komen. In dit voorbeeld wordt de class .drijf gebruikt voor plaatjes waar een tekstblok naast moet komen:
.drijf {float:left; margin 0px 20px 5px 0px}
In de html roep je de stijl aan met class=:
<img class=drijf src=etc.jpg>
Je kan float ook gebruiken om knoppen naast elkaar te zetten als die display:block zijn. Je kan met inline-css in de HTML uitzonderingen maken. Die overrulen de stijl van de externe css, want ze worden later ingelezen (de browser leest van boven naar beneden):
<img src=etc.jpg style="float:right">
Je kan de float verderop in de code weer opheffen (clearen) met clear:all of clear:left, bijvoorbeeld met een <br>:
<br style="clear:both" />
Je kunt tekst OVER een plaatje zetten, door het plaatje in de achtergrond te zetten met de css-property background-image, of door gepositioneerde divs met een z-index.
Je kunt meerdere plaatjes gebruiken in de achtergrond en deze ook verschillend positioneren.
Als de achtergrond niet mee mag bewegen bij het scrollen dan kan dat met attachment:fixed.
Tip: bij een galerie kun je al je plaatjes in een DIV met een class zetten:
.galerie img {border: 1px solid black}
Zo krijgen alle plaatjes die in de <div class=galerie> staan automatisch die vormgeving.
Tip 2: Een list item met een plaatje in plaats van een bullet:
ul {list-style-image: url(plaatje.jpg)}
Aan elk HTML-element kun je via CSS een achtergrond en een achtergrondplaatje toevoegen. Sinds CSS3 zijn er belangrijke en handige nieuwe opties bijgekomen. De grootte afstellen kan bijvoorbeeld tegenwoordig ook in css. Kijk hier voor alle oude opties. Je kan positioneren:
- met woorden: left, top, bottom, right en center,
- met percentages vanaf left top: eerst horizontaal, dan verticaal: 30% 80%;
- of idem met getallen: 20px 40px.
- Een mix van percentage en getal: 50% 20px (horizontaal gecentreerd, van boven 20 px gezakt)
Repeteren kan ook. Nu dat er verlooptinten mogelijk zijn (Google naar gradient css of naar css gradient generator) hoef je dat niet meer met repeating images te doen. Ook nieuw zijn de multiple backgrounds om meerdere backgrounds te combineren.
Als je knoppen wilt maken in je menu kan je background-image gebruiken. Je kunt dat plaatje verschuiven bij een mouse-over (hover) zodat het lijkt of het plaatje wisselt. Zet de twee versies dan in Photoshop onder elkaar en bewaar het tesamen als één plaatje. Bij voorkeur als een .png, dan heb je de mogelijkheid voor transparantie, zodat het ook op verschillende achtergronden goed uitziet. Geef in de css aan dat bij de a:hover de background-image met bijvoorbeld top:-100px naar boven geschoven wordt.
Voordelen:
Als je een heading wil met een exclusief lettertype of logo, kun je er een plaatje van maken. Verberg dan de HTML-tekst met CSS, en vervang de tekst door een plaatje. Zo blijft in de code de tekst toch staan, zodat het toegankelijk is. Kan op veel manieren. Dit is de slimste:
In de HTML staat dan <h1 class='kop1'>. En in de css:
.kop1 {
width: 250px; height: 0;
background: url("kop1.jpg");
padding: 106px 0 0 0; /* de hoogte van het plaatje */
overflow: hidden;
}
Je kan in een plaatje hotspots aangeven: clickable area’s.
Zo kan je bijvoorbeeld in een site die ontworpen is in Photoshop verschillende onderdelen clickable maken. Let op: bij vergroten of inzoomen werkt dat dan niet meer goed.
Via ftp (file transfer protocol) kun je de files op de server zetten (uploaden). In een ftp-programma zoals Filezilla, Cyberduck, maar ook in Dreamweaver of Notepad++ zie je 2 vensters: de bestanden op jouw eigen computer, en de bestanden op de server. Bestanden die klaar zijn zet je op de server (uploaden). De website staat dan pas echt online.
Je hebt 3 gegevens nodig om in te kunnen loggen (kijk in je gegevens van je provider):
De naam van de server (bijvoorbeeld ftp.gameschool.nl),
je login en
je password.
Als het niet werkt, check dan al je firewalls. Je bestanden moet je uploaden naar de map die daarvoor bedoeld is, die heet vaak httpdocs of public_html of iets dergelijks.
In Dreamweaver moet je eerst een Site aanmaken via Site > Manage sites > New.
Kies “advanced” en vul bij Category > Local Info in:
De naam van het project (mag van alles zijn; dit is alleen voor jezelf)
De local root folder (het mapje waar de site op je harddisk staat)
Zet bij voorkeur de “refresh local files” en “enable cache” aan.
Dit was de lokale info, nu volgt bij Category > Remote Info de “remote” info, oftewel de gegevens van de webserver. Kies Access > FTP.
FTP Host: De naam van de server (bijvoorbeeld ftp.gameschool.nl)
Login en Password. De Host directory is meestal zoiets als “httpdocs" of "public_html". In het geval van gameschool.nl is het webspace/httpdocs/gameschool.nl/jenaam. Als je niets invult kom je in de hoogste map. De meeste mappen die hier staan heb je niet meteen nodig, je moet dus de map zoeken die bedoeld is voor de website zelf. Bij gameschool.nl heeft iedere leerling zijn eigen map.
“Use passive ftp” moet meestal aanstaan.
Als het niet werkt: check al je firewalls, meestal staan er wel twee aan. Een firewall regelt of een bepaald programma (Dreamweaver in dit geval) gegevens via internet mag verzenden.
Neem de site in gedachten die je zou willen maken. Bepaal hoeveel pagina's er komen, wat er op staat, en hoe ze linken naar elkaar.
Op een staand A-4 begin je bovenin met de homepage
Het hoofdmenu zet je verticaal helemaal aan de linkerkant.
Geef elke pagina een logische, korte naam.
Beschrijf de inhoud kort.
Komt er veel of weinig tekst op? Staan er plaatjes op?
Submenu: Als er heel veel tekst en/of plaatjes opkomen (bijvoorbeeld bij een galerie) moet je een hoofdmenu-item onderverdelen in meerdere submenu’s met elke een eigen logisch thema. Die zet je weer in een verticale rij, iets meer naar rechts.
Geef met lijnen aan hoe alles naar elkaar linkt. Kun je van de homepage direct naar een submenu-item? Of gaat dat via de pagina uit het hoofdmenu?
Vergeet niet een home-knop, of “terug”.
Je hebt normaliter verschillende soorten pagina, bijvoorbeeld een homepage, een gewone pagina en een foto-galerie. Maak voor deze drie typen pagina’s een eigen (maar samenhangend) visueel ontwerp. Deel de pagina’s op in kolommen, kijk welke elementen hetzelfde zijn op alle pagina's. Een kleurschema en een typografisch ontwerp kun je later maken.
Waar komt je menu? Waar het submenu? Waar de inhoud? Waar de titel, naam of logo? Is dit voor elke type pagina gelijk?
Is de site schaalbaar (bijv 90 % breed) of heeft het een vaste breedte
(bijvoorbeeld 780px, dan past het op 800x600 schermen)
Bij een vaste breedte: is het geheel links of gecentreerd?
Hoeveel kolommen ga je gebruiken, wat staat daarin, hoe breed zijn ze?
In de HTML kan je de tekst structureren. De site zal dan in alle browsers gestructureerd en goed leesbaar zijn. Zelfs op PDA’s, mobieltjes, in braille, op TV’s et cetera.
Maak kopteksten en geef ze de juiste Heading level (sneltoets Ctrl-1 t/m 6, bijna net als in Word)
Verdeel de tekst in korte alinea’s.
Tik een menulijst, maak er een bulleted lijst van (via menubalk)
Maak van de menu-items links via rechtsklik > hyperlink
Gestructureerde tekst kun je snel en eenvoudig via je stylesheet vormgeven.
Door een ander stylesheet te kiezen kun je dezelfde site met een druk op de knop volledig aanpassen. Denk hierbij aan:
Een knop voor grotere letters
Een knop “print” die een aangepaste vormgeving voor uitprinten gebruikt
Een andere indeling van de site indien die op een mobiel wordt getoond
Een versie zonder plaatjes
Een versie voor een bepaalde browser
Deze alternatieve versies van de site hoeven dus nooit gemaakt te worden. Ze worden automatisch uit de HTML opgebouwd met een andere vormgeving (een ander stylesheet). De investering in een gewijzigd stylesheet is eenmalig. Als de inhoud maar goed in HTML gestructureerd is!
Doe dit met Photoshop, maak alle plaatjes qua pixels precies 100%.
Tip: zoek met Google. Zo'n lijstje links als dit is nooit zo up-to-date als Google.
Kleurgebruik: zoek bijvoorbeeld op "CSS color codes", op rgba html, color names of op html color picker
Typografie:
Zoek op "web safe fonts" voor een lijst met de web-veilige fonts die iedereen heeft,
of zoek op "Google webfonts" voor een zeer uitgebreide lijst met beschikbare webfonts en een instructie hoe je die kan gebruiken.
Boeken: de boeken van sitepoint.com zijn de moeite waard, in het Engels.
HTML en CSS: www.handleidinghtml.nl is goed en in het Nederlands, maar wel verouderd. Je kan op veel plekken gratis online HTML en CSS leren en oefenen, bijvoorbeeld bij Codecademy.com. Kijk voor nieuwe tips op aartjan.nl/css