Bonus hoofdstukken - PHP EN MYSQL de basis Dit voorbeeld heeft verder weinig uitleg nodig. Merk op...

download Bonus hoofdstukken - PHP EN MYSQL de basis Dit voorbeeld heeft verder weinig uitleg nodig. Merk op dat

of 25

  • date post

    19-Mar-2020
  • Category

    Documents

  • view

    4
  • download

    0

Embed Size (px)

Transcript of Bonus hoofdstukken - PHP EN MYSQL de basis Dit voorbeeld heeft verder weinig uitleg nodig. Merk op...

  • Bonus hoofdstukken

    1 HTML, CSS en JavaScript

    2 Een website bouwen

  • De belangrijkste punten van bonushoofdstuk 1

    X HTML is een taal waarmee u de inhoud en structuur van een webpagina kunt maken.

    X Tags zijn codewoorden die de verschillende onderdelen, de elementen, van een HTML-document markeren.

    X Een HTML-document bestaat uit een head- en een bodysectie. In de sectie head vindt u bijvoor- beeld de titel en in de body komen zaken voor als koppen, paragrafen en tabellen.

    X Een dialoog met behulp van HTML-formulieren is een veelgebruikte manier van interactie met een gebruiker.

    X CSS staat voor Cascading Style Sheets. Deze stijlbladen bepalen het uiterlijk van een HTML- document.

    X JavaScript gebruikt u om uw pagina gebruikersvriendelijker te maken.

    X jQuery is een JavaScript-bibliotheek waarmee u gemakkelijk pagina’s dynamisch kunt stylen en Ajax-functies kunt uitvoeren.

    1 HTML, CSS en JavaScript

  • wat leert u in dit hoofdstuk?

    Met HTML kunnen we de structuur van een webpagina bepalen.

    Met CSS maken we er iets moois van.

    Een simpel HTML- document

    Hello world!

    body { background: #f7f7f9; font-family: trebuchet ms; color: navy; }

  • 4

    PHP EN MYSQL de basis

    1.1 HTML 101 Een 101, spreek uit: ‘one - oo - one’, is een Amerikaanse uitdrukking voor een supersnelle cursus waarin u alleen die dingen leert die nodig zijn voor het begrijpen van het vervolg. Nu denkt u misschien: ‘HTML? We gingen toch programmeren in PHP?’ Dat klopt, maar het resultaat van het uitvoeren van een PHP-script is vaak een HTML-tekst. Enige kennis van HTML is dan ook nodig om te begrijpen hoe PHP werkt.

    Terwijl HTML voor de structuur en inhoud van uw pagina zorgt, stelt CSS u in staat om de inhoud en de vormgeving van uw website uit elkaar te houden. Met JavaScript maakt u uw webpagina meer dynamisch en interactief. Mocht u na het lezen van dit hoofdstuk meer willen weten over HTML en CSS, dan verwijs ik u naar HTML en CSS de basis. Voor meer informatie over JavaScript is er JavaScript de basis.

    We zullen hier kort aandacht besteden aan: n Hoe ziet een HTML-document eruit? n De tags html, head, title, body. n Het maken van lijsten: de tags ul, ol, li, dl, dt, dd. n Het maken van tabellen met de tags table, thead, th, tbody, tr, td. n Het gebruik van CSS-stijlbladen en koppeling met een HTML-document met de tags

    script, div, span. n Het invoegen van JavaScript.

    1.2 De anatomie van een HTML-document We herhalen het nog maar eens: met HTML bepaalt u de inhoud en de structuur van een webpagina. U bepaalt de inhoud van een pagina en vervolgens verdeelt u het document in paragrafen, u brengt koppen aan of een tabelstructuur, u kunt plaatjes invoegen enzo- voorts, alles met behulp van HTML-tags.

    De meeste browsers zijn heel vergevingsgezind tegenover slordig HTML. Als u een brow- ser alleen het volgende aanbiedt als HTML-document:

    C Dit is de inhoud van een HTML-pagina, er staat geen enkele HTML tag in.

    Dan zal die browser dat keurig weergeven met een standaard vormgeving. Er zullen heel weinig pagina’s zijn waarin dit voldoende is. Als u een pagina mooier wilt maken met een speciale structuur, opmaak, lettertypen enzovoort, dan zult u HTML-tags moeten gebrui- ken, CSS-stijlbladen en eventueel JavaScript.

    1.2.1 Tags

    De inhoud van een document bestaat uit een aantal onderdelen, zoals titel, koptekst, paragraaf et cetera. In een HTML-document worden deze onderdelen gemarkeerd door

  • 5

    1 HTML, CSS en JavaScript

    paren tags, een begintag en een eindtag. Tags zijn codewoorden tussen hoekige haakjes: < en >. Dezelfde tag met een / achter de < geeft het einde van het bereik van een tag aan, dus alle tekst tussen en vormen de ‘body’ van een HTML-docu- ment. Een paragraaf en een titel zien er bijvoorbeeld zo uit:

    C

    Dit is de paragraaftekst

    Dit is een titel

    ELEMEN T EN

    Een onderdeel dat door tags gemarkeerd is zullen we een HTML-element noemen. Een HTML- document is dus eigenlijk niets anders dan een verzameling van HTML-elementen.

    In oudere versies van HTML zijn tags niet hoofdlettergevoelig; het maakt daar niet uit of u , , of schrijft. Wij zijn echter van plan zo veel moge- lijk alleen nette HTML te gebruiken, en dan maakt het wel degelijk uit. Vergeet dus alle hoofdletters!

    1.2.2 Attributen

    Tags kunnen attributen hebben, die het HTML-element van extra informatie voorzien. Attributen zien er altijd zo uit: naam=”waarde” of: naam= ‘waarde’.

    Voorbeeld: .

    In oudere versies van HTML kon u vaak de ‘ of de “ weglaten, dus . De meeste browsers zullen dit nog wel goed weergeven, maar als u dynamisch met uw HTML-code aan de slag wil, kan dit een bron zijn van onbegrijpelijke fouten. Bij voor- keur gebruikt u “ om attribuutwaarden. Attributen staan altijd in de begin-tag van een element.

    1.2.3 HTML-voorbeeld

    Het allersimpelste welgevormde HTML-document dat u kunt maken ziet er ongeveer zo uit:

    C

    Een Simpel HTML-document

  • 6

    PHP EN MYSQL de basis

    Hello world!

    U ziet dat het document begint met te vertellen wat het voor soort document is, de

  • 7

    1 HTML, CSS en JavaScript

    We gaan hier niet in detail in op de head-tags. Van belang is de title-tag, die u in ieder document zult willen gebruiken om aan te geven waar de pagina over gaat. Als u uw web- pagina vindbaar wilt maken voor zoekmachines, dan is het een goed idee om de meta- informatie zo goed mogelijk in te vullen.

    Kijk ook naar de link-tag, waarmee u kunt aangeven dat er een extern stijlblad gebruikt moet worden, zoals in het voorbeeld. Voor een intern stijlblad gebruikt u de tag style.

    JavaScript dient u te omhullen met script-begin- en eindtags. Het voorbeeld geeft aan dat de jQuery-bibliotheek uit een bestand geladen moet worden. Vaak worden scripttags aan het eind van de body van een HTML-document geplaatst in plaats van in de head, omdat dit het laden van de pagina sneller schijnt te maken en omdat u dan zeker weet dat het document geladen is voordat de JavaScript-code wordt uitgevoerd.

    1.2.5 HTML-body tags: headings, paragraphs, break

    Alle inhoud van een HTML-pagina is in de body van het HTML-document te vinden. We zien koppen, paragrafen, tabellen, lijsten, afbeeldingen, links naar andere pagina’s, video- inhoud, animaties enzovoorts.

    Als eerste voorbeeld van bodyinhoud laten we een overzicht zien van verschillende kop- regels, paragrafen en het begin van een nieuwe regel:

    C dit is een h1 kop dit is een h2 kop dit is een h3 kop

    ...

    dit is een h6 kop

    Hier start een nieuwe paragraaf

    en hier houdt hij op. En hier
    start een nieuwe regel.

    (We laten hier alleen de inhoud tussen de begin- en eindtag van zien, niet het complete HTML-document). Dan is dit wat de browser laat zien:

  • 8

    PHP EN MYSQL de basis

    Dit voorbeeld heeft verder weinig uitleg nodig. Merk op dat er geen tekst is die niet tus- sen tags staat, en dat alle begintags ook een eindtag hebben. De tag br, een line break, is een speciaal geval, en een voorbeeld van een gecombineerde begin- en eindtag.

    1.2.6 HTML-bodytags: lijsten

    Tabellen worden veel gebruikt om elementen van een document netjes op een pagina te plaatsen. Wij zullen dat ook regelmatig doen om bijvoorbeeld de velden van een formulier recht onder elkaar te krijgen. Eigenlijk zou u een HTML-tabel alleen moeten gebruiken als u ook tabelgegevens wilt laten zien, anders is het beter via een stijlblad de gegevens te formatteren. De andere structuurelementen die u tussen en kunt plaatsen zijn voor een puntenlijst en voor een genummerde lijst. Met een definitielijst, de tags dl, dt, dd, kunt u bijvoorbeeld een glossary (verklarende woorden- lijst) maken. We laten eerst een voorbeeld zien (we laten de head-sectie van het HTML- document ook hier weg) waarbij de verschillende soorten lijsten gebruikt worden:

    C item1 item2 item1

    Afbeelding 1.1 HTML-overzicht.

  • 9

    1 HTML, CSS en JavaScript

    item2 term1 definition1 term2 definition2

    De browser maakt er dit van:

    1.2.7 HTML-body tags: tabellen

    De definitie van een tabel ziet er zo uit (we hebben nu ook de body-tag weggelaten):

    C kop1 kop2 kop3 a1 a2 a3

    Afbeelding 1.2 Lijsten.

  • 10

    PHP EN MYSQL de basis

    We maken een paar opmerkingen over tabellen: n Het zal u opvallen dat ook tabellen over een hoofd en een lijf beschikken. n In de thead-sectie kunt u kolomkoppen kwijt, en in de tbody-sectie de inhoud van de

    tabel. In de praktijk zult u en weinig tegenkomen, want alle brow- sers laten een tabel zonder deze tags ook goed zien. Maar als u dynamisch met een tabel aan de slag wilt met behulp van JavaScript, dan is het belangrijk om deze tags wel te gebruiken, om er zeker van te zijn dat alle browsers, met name oudere versies van Internet Explorer, meedoen.

    n Verder zijn er nog een aantal variaties toe te voegen, zoals tabellen binnen tabellen, rijen die hier en daar over meer dan één kolom reiken, of kolomwaarden die over meer rijen heen gaan. Let op: lege tabelcellen kunnen problemen geven. We wijzen hier alleen op een aantal mogelijkheden, voor details