html

HTML5

1. Het maken van een quiz in HTML

Het doel van dit deel is het maken van een quiz zoals je misschien ook ooit in Powerpoint of Google Presentatie hebt gemaakt toen je in de brugklas zat. Je maakt hem nu echter in html. Een voorbeeld van zo'n quiz vind je hier.

In dit voorbeeld kun je jezelf de volgende zaken afvragen:

  1. Hoe is deze quiz gemaakt?
  2. Waarmee is deze quiz gemaakt?
  3. Hoe kan ik een pagina linken naar een andere pagina?
  4. Hoe plaats ik een plaatje in een pagina?
  5. Hoe kan ik knopjes maken om naar een andere pagina te gaan?
  6. Hoe kan ik een project maken en hoe krijg ik daar structuur in?
  7. Hoe kan ik een pagina en tekst opmaken?

Al deze zaken leer je in deze cursus waarbij deel 1 zich richt op bovenstaande quiz.

Het is heel belangrijk dat je deze zaken min of meer autodidakt tot je gaat nemen. Op sommige vragen staan in de lessen geen antwoorden. Je kunt echter op internet heel veel vinden over HTML. Belangrijke websites zijn:

2. Wat is HTML

Wat is HTML? HTML is een taal waarmee je webpagina's. kunt maken.

Een voorbeeld van een eenvoudige webpagina vind je hieronder.

HTML example

Let op de structuur van de webpagina. Deze webpagina heeft drie niveau's.

https://images.computational.nl/galleries/html/2019-05-07_11-21-19.png

Je kunt zeggen dat het element <html> de moeder is van alle onderliggende elementen. Het element <title> heeft als moeder het element <head>. Merk op dat de structuur ook te zien is doordat de elementen telkens dieper zijn uitgelijnd. Dus het element <html> heeft geen spaties, het html <head> heeft vier spaties en het element <title> heeft acht spaties.

Als we met de editor Netbeans zullen gaan werken dan kun je de code automatisch laten uitlijnen.

3. Je eerste project in Netbeans

NetBeans is een programma om software te ontwikkelen. Wij gebruiken Netbeans versie 11. Wij gaan er onze webpagina's mee maken. Je zult Netbeans in de loop van de tijd erg gaan waarderen. Op het Hoeksch Lyceum kun je netbeans openen door te gaan naar:

c:\program files\netbeans\netbeans11\bin en dan netbeans64(.exe)

Als je op een andere pc Netbeans wilt installeren. De instructie hiervoor staat in de laatste les van deel 1.

Je zult nu zien dat er een startpagina wordt geopend. Klik deze weg en hou als gewoonte deze altijd weg te klikken. Er is ook een vinkje om deze niet meer op te starten als Netbeans start.

https://images.computational.nl/galleries/html/2019-08-19_19-08-58.png

We gaan nu een nieuw project aanmaken. Hiervoor klik je op "nieuw project knop".

https://images.computational.nl/galleries/html/2019-08-19_19-18-19.png

Kies hierna voor een Java Web applicatie binnen Java with Maven. Een fout die door sommige leerlingen wordt gemaakt is om een html5-project te kiezen. Dit is niet fout maar hiermee kun je niet de navolgende lessen volgen. Maven is softwaregereedschap. Hiermee kun je meer geautomatiseerd software bouwen. Wij gaan ons eigen gereedschap maken in deel 3.

https://images.computational.nl/galleries/html/2019-08-19_19-21-40.png

De naam van je project wordt voornaam+web. Hieronder heet de cursist Piet dus dan wordt zijn webapplicatie pietweb. Zorg ervoor dat je geen hoofdletters gebruikt. De naam van je applicatie schrijf je altijd met kleine letters en zonder een spatie in je naam.

Vervolgens kies je bij de Project Location voor Google Drive. Maak op Google drive een mapje NetBeansProjects (let op de hoofdletters) en kies deze map als Project Location.

https://images.computational.nl/galleries/html/2019-08-19_19-23-37.png

Zodra je het project een naam hebt gegeven zul je in de volgende stap de glassfishserver moeten installeren. Hoe dat moet vind je in onderstaande film. Tevens zie je ook een herhaling van stap 1 en 2.

 

Door op Finish te klikken is je project nu verder gereed om te bewerken.

 

4. Het project tonen in de browser

Als je een webapplicatie wilt zien dan doe je dat in de browser. We gebruiken hiervoor altijd de browser Firefox. Dit is een van de best ontwikkelde browsers van dit moment. Dit komt ook mede omdat browsers zoals Chrome en Edge achterdeurtjes bevatten om (privacy gevoelige) informatie door te geven. De browser Firefox wordt veelal gebruikt voor ontwikkeldoeleinden. In Netbeans kun je dat op de volgende manier instellen:

https://images.computational.nl/galleries/html/2019-09-06_15-54-42.png

Vervolgens kun je klikken op de groene pijl.

https://images.computational.nl/galleries/html/2019-09-06_15-57-24.png

De browser Firefox zal nu (de eerste keer kan het even duren) gaan open met de URL localhost/naamvanjeapplicatie.

https://images.computational.nl/galleries/html/2019-09-06_15-59-17.png

Merk op dat de applicatie draait onder de Glassfish server.

Als een applicatie niet wil starten

Soms wil, om allerlei redenen, een applicatie niet starten. Het kan helpen om de applicatie op te schonen. Dat doe je door de bezemknop te gebruiken.

https://images.computational.nl/galleries/html/2019-09-06_16-01-08.png

Als dit niet helpt gaan we de glassfish server opschonen door deze te verwijderen. Tevens verwijderen we het profiel wat staat in je tijdelijk profiel (op het Hoeksch Lyceum). Hieronder in Netbeans 8 maar dat maakt weinig uit.

5. De structuur van een Netbeans project.

Voordat je daadwerkelijk gaat beginnen met het ontwikkelen van een HTML-project, eerst wat uitleg over de structuur van je project. Zonder dat je je er misschien van bewust was heb je een Java applicatie aangemaakt. Met Java zelf doen we nog niet zoveel (dit komt terug als we gaan programmeren) en daarom heb je in het project alleen maar te maken met het mapje Web Pages.

https://images.computational.nl/galleries/html/2015-09-16_09-19-32.png

Het mapje WEB-INF wordt gebruikt voor configuratieinstellingen. Je kunt er het bestand web.xml tegenkomen en hierin staan allerlei instellingen van het project. In een van de navogende lessen gaan we dit ook gebruiken.

In de root van Web Pages vind je het bestand index.html. Bij een statische webapplicatie is dit het enige bestand wat daar mag staan. De overige bestanden staan bijvoorbeeld in de mapjes images (of img), html en css. Hierover in het volgend lesonderdeel meer.

Veel gemaakte fout.

Je start je project en je krijgt een zogenaamde 404 pagina.

404

Netbeans zoekt bij het opstarten van je project naar het bestand index.html en dit staat niet in de root maar bijvoorbeeld in een ander mapje. Of je hebt je bestand zoiets als home.html genoemd. Je kunt afwijken van de standaard. De startpagina kan apart worden ingesteld. Dit valt echter buiten het bestek van deze lessen. De index.html is in deze lessen altijd je startpagina.

De overige mapjes zoals Source Packages of Project Files gaan een rol spelen zodra je een interactieve applicatie gaat maken. We laten dat in deze cursus verder voor wat het is.

6. Een nieuwe pagina index.xhtml

In deze cursus maken we in plaats van html-files, xhtml-files. XHTML is een samentrekking tussen XML en HTML en wordt door nagenoeg alle browsers ondersteund. Het voordeel van xhtml is dat het strikter is en in staat is om foutmeldingen van verkeerde html te geven. Dat is precies wat we nodig hebben.

Om een nieuwe xhtml-pagina in Netbeans te maken gaan we eerst de index.html verwijderen. Dit kun je doen met de rechtermuisknop.

https://images.computational.nl/galleries/html/2019-07-26_16-09-13.png

Vervolgens gaan we deze vervangen door een xhtm-file genaamd index.xhtml. Klik hiervoor op New File en type xhtml.

https://images.computational.nl/galleries/html/2017-08-24_13-59-41.png

Noem de file index.xhtml en zorg dat deze wordt aangemaakt in de root van je project,

https://images.computational.nl/galleries/html/2019-07-26_16-31-26.png

Uiteindelijk zie je dit:

https://images.computational.nl/galleries/html/2019-07-26_16-40-48.png

Het commentaar verwijderen we. Hiervoor gebruiken we de sneltoets Ctrl-E wat maakt dat zowel de hele regel als de enter wordt verwijderd. Wordt handig met sneltoetsen! Het scheelt veel werk!

De code is nu als volgt:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TODO supply a title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

De welcome-file veranderen

Als we nu het project starten gaat de Glassfish server zoeken naar index.html in plaats van index.xhtml. In een Maven project kunnen we dit altijd veranderen. In het mapje WEB-INF vind je de file web.xml. Als dit mapje er niet is mag je het zelf aanmaken door met de rechtermuisknop te klikken op Web Pages -> New -> Folder.

https://images.computational.nl/galleries/html/2019-09-06_16-09-28.png

Noem de folder Web-INF en klik op Finish. Vervolgens klik je met de rechtermuisknop op de net aangemaakte folder WEB-INF en klik je weer op new en hierna op other. In het filter type je xml waarna vanzelf de Standard Deploy Descripter web.xml wordt geselecteerd. Klik op Next en daarna op Finish.

https://images.computational.nl/galleries/html/2019-09-06_16-12-49.png

Nu moet je de code aanpassen door een welcome welcome-file-list toe te voegen. Voeg hier de instelling <welcome-file-list> aan toe precies onder </session-config> . Als het goed is ziet je web.xml er dan als volgt uit (er is extra witruimte om de welcome-file-list toegevoegd, in jouw file is dat niet nodig):

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    
    <welcome-file-list>  
        <welcome-file>index.xhtml</welcome-file>  
    </welcome-file-list>  

</web-app>

 Nu zal Glassfish zoeken naar index.xhtml.

Veel gemaakte fout

Het kan zijn dat je nog steeds een 404 krijgt. In dat geval staat index.xhtml niet op de juiste plaats maar heb je die bijvoorbeeld staan in de WEB-INF. Kijk goed waar het stippellijntje naartoe wijst!

7. Basiselementen van html

Stel dat we de volgende tekst in HTML willen opmaken.

HTML
HTML wordt meestal bekeken met een webbrowser, een programma dat HTML-documenten opvraagt bij een webserver en als opgemaakte tekst (een webpagina) aan de gebruiker toont. Het document kan ook 'lokaal' staan: als bestand op de eigen computer van de gebruiker, in plaats van op een webserver. Naast browsers kunnen ook sommige andere programma's zoals tekstverwerkingsprogramma's HTML-documenten tonen. E-mails kunnen eveneens HTML-codes bevatten.

Hypertext en hyperlinks
De wezenlijke eigenschap van HTML is dat deze hypertekst ondersteunt: documenten en bestanden die verbonden zijn door direct volgbare verwijzingen, de zogenaamde hyperlinks (in het Nederlands ook wel koppelingen genoemd).

Opmaaktaal
Daarnaast is HTML een opmaaktaal zoals vele andere, met notaties voor het aangeven van een indeling in alinea's, van kopjes, nadruk in de tekst en tabellen. Afbeeldingen en multimedia kunnen via HTML-codes op de webpagina worden opgenomen (maar staan niet in het HTML-bestand zelf).

Een HTML-document bestaat uit platte tekst waarin met markeringstekens is aangegeven hoe de tekst moet worden geïnterpreteerd, bijvoorbeeld als lijst of als opschrift. Zo'n markering wordt (naar het Engels) een tag genoemd.

Wat je ziet zijn kopjes en alinea's (paragraven).

Een kop kun je aangeven met een markeringsteken zoals bijvoorbeeld <h2>. Dit wordt ook wel een tag genoemd. Een alinea of paragraaf wordt aangegeven met een <p>. Dit gaat als volgt:

<h2>HTML</h2>
<p>HTML wordt meestal bekeken met een webbrowser, een programma dat HTML-documenten opvraagt bij een webserver en als opgemaakte tekst (een webpagina) aan de gebruiker toont. Het document kan ook 'lokaal' staan: als bestand op de eigen computer van de gebruiker, in plaats van op een webserver. Naast browsers kunnen ook sommige andere programma's zoals tekstverwerkingsprogramma's HTML-documenten tonen. E-mails kunnen eveneens HTML-codes bevatten.</p>

De <p> geeft een paragraaf aan en een <h1> een kop op niveau 1 (vergelijkbaar met Kop 1 in een tekstverwerker). Een kop kan worden ingesteld van level 1 t/m level 6 dus van <h1> t/m <h6>. Vrijwel iedere markering eindigt ook met afsluitende markering zoals </h2>.

8. Het toevoegen van een afbeelding

In pagina van de vorige les zullen we nu afbeeldingen toevoegen. Alle afbeeldingen plaatsen we in aparte folder. Maak deze aan door met de rechtermuisknop op Web Pages > New > Folder te klkken.

https://images.computational.nl/galleries/html/2019-07-28_16-31-03.png

Geef de folder de naam img en klik daarna op Finish.

https://images.computational.nl/galleries/html/2019-07-28_16-33-53.png

Uiteindelijk heb je een nieuwe folder.

https://images.computational.nl/galleries/html/2019-07-28_16-41-56.png

Een veelgemaakte fout is dat de folder wordt aangemaakt onder de folder WEB-INF.

https://images.computational.nl/galleries/html/2019-07-30_12-20-09.png

Download nu deze en deze afbeelding door met Firefox met de rechtermuisknop te klikken op Afbeelding opslaan als ...

https://images.computational.nl/galleries/html/2019-07-28_16-55-06.png

De afbeeldingen worden opgeslagen in de map downloads. Deze is te vinden door in Firefox rechtsboven op de pijl te klikken.

https://images.computational.nl/galleries/html/2019-07-28_16-58-41.png

Vanuit deze map kun je de afbeeldingen in Netbeans in de folder img slepen.

https://images.computational.nl/galleries/html/2019-07-28_17-01-27.png

Het invoegen van een afbeelding is met behulp van Netbeans niet meer zo moeilijk. Je kunt deze eenvoudig in de webpagina slepen. Plaats de afbeelding onder de kop Inleiding.

https://images.computational.nl/galleries/html/2019-07-28_17-59-53.png

Wellicht vallen je een paar dingen op:

  • Het element bevat attributen zoals src="..".
  • Het element sluit zichzelf af. Dat hoeft niet persé op deze manier maar is wel gebruikelijk. Zo mag het ook: <img src="img/HTML5_Logo_256.png" alt="">
  • Er is een alt attribuut. Dit is bedoeld voor o.a. slecht zienden. Het is de beschrijving van de afbeelding. De correcte code is bijvoorbeeld <img src="img/HTML5_Logo_256.png" alt="html 5 logo">

9. Nieuwe pagina's maken

Een van de basisprincipes waarvoor HTML is ontwikkeld. is het linken van pagina's en/of tekst. We zullen dit ook gaan leren met behulp van een hyperlink. Eerst maken we hiervoor een nieuwe pagina aan. Nieuwe xhtml-pagina's plaatsen we, net als afbeeldingen, in een aparte folder.

Maak op dezelfde manier als je de folder img hebt aangemaakt ook de xhtml folder en maak daarin vier nieuwe pagina's te weten history.xhtml, markup.xhtml, semantic.xhtml  en delivery.xhtml. Voordat je dit doet is het handig om de xhtml-template van Netbeans aan te passen zodat je niet telkens overbodig commentaar in je document moet wissen. Ga hiervoor naar naar Tools > Templates. Vervolgens vind je onder het kopje Other de xhtml-template.

https://images.computational.nl/galleries/html/2019-07-31_11-20-45.png

Klik Open in Editor en pas de template als volgt aan. Verwijder alles binnen het rood omlijnde kader. Doe dit met Ctrl-E zodat de witruimte ook meteen wordt verwijderd. Leer te werken met sneltoetsen!

https://images.computational.nl/galleries/html/2019-07-31_11-13-38.png

Uiteindelijk hou je onderstaande code over.

https://images.computational.nl/galleries/html/2019-07-31_11-15-26.png

Bewaar de template met Ctrl-S. Je krijgt nu nog de volgende vraag.

https://images.computational.nl/galleries/html/2019-07-31_11-17-36.png

Beantwoord de vraag met Yes en sla de template op. Maak nu vervolgens de al genoemde pagina's. Het resultaat is hieronder te zien.

https://images.computational.nl/galleries/html/2019-07-31_11-05-26.png

10. De pagina's linken

Hoe kunnen we nu surfen naar een andere pagina? Dat doen we door een hyperlink te maken. Met behulp van Netbeans is dat niet meer zo moeilijk. Laten we beginnen bij de index.xhtml. Op deze pagina willen we graag wat meer gedetailleerdere informatie verkrijgen over de geschiedenis van html. Hiervoor moeten we een link maken naar history.xhtml. Dat kunnen we doen door deze file te slepen in de index.xhtml. Netbeans maakt dan automatisch een link.

https://images.computational.nl/galleries/html/2019-07-31_17-29-08.pngWe moeten hierbij de link zelf nog wel vullen met tekst. De code wordt dan uiteindelijk.

<p>
   <a href="xhtml/history.xhtml">De geschiedenis van HTML</a>
</p>

Je ziet dat we de link voor nu even binnen een <p> hebben geplaatst. De volgende les zullen we hiervoor een andere element gaan gebruiken. Merk verder op eerst het mapje xhtml in de link staat en vervolgens de file. We volgen vanuit index.xhtml dus de route xhtml (folder) > history.xhtml (bestand).

11. De unsorted list voor het menu

Bij het maken van de opdracht uit de vorige les is een menu gemaakt met behulp van de <a>. Hierbij kwamen deze linkjes naast elkaar te staan. In veel gevallen wil je dat niet maar wil je bijvoorbeeld dat het menu onder elkaar staat. Dit kun je bereiken met het <ul> element waarbinnen het <li> element wordt gebruikt. Dit ziet er zo uit:

<h2>menu</h2>
<ul>
    <li><a href="history.xhtml">De geschiedenis van HTML</a></li>
    <li><a href="delivery.xhtml">Aanleveren van html</a></li>
    <li><a href="markup.xhtml">Opmaak</a></li>
    <li><a href="semantic.xhtml">Semantische taal</a></li>
    <li><a href="../index.xhtml">Inleiding HTML</a></li>
</ul>

We kunnen dit ook opmaken met behulp van CSS. Wat dat is leer je in de volgende les maar hieronder staat alvast een voorproefje:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Het gebruik van html</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style>
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 200px;
                background-color: #f1f1f1;
            }

            li a {
                display: block;
                color: #000;
                padding: 8px 16px;
                text-decoration: none;
            }

            li a.active {
                background-color: #4CAF50;
                color: white;
            }

            li a:hover:not(.active) {
                background-color: #555;
                color: white;
            }
        </style>
    </head>
    <body>
        <h1>Het gebruik van html</h1>
        <p>
            Een HTML-document kan op dezelfde manier worden gebruikt als een file op 
            een computer. De meeste keren wordt het echter benaderd via het HTTP-protocol 
            of via email.
        </p>
        <h2>HTTP</h2>
        <p>
            Het World Wide Web bestaat hoofdzakelijk uit HTML-documenten
            van webservers tot webbrowsers met behulp van het Hypertext Transfer Protocol (HTTP).
            HTTP wordt ook gebruikt om afbeeldingen, geluid en andere inhoud weer te geven. 
            Om de webbrowser te laten weten hoe elk document moet worden weergegeven, 
            wordt andere informatie samen met het document verzonden. Deze meta
            gegevens bevatten meestal het MIME-type (Multipurpose Internet Mail Extensions). 
        </p>
        <h2>HTML e-mail</h2>
        <p>
            HTML wordt ook in email berichten gebruik. Dit is niet altijd even handig i.v.m. het
            makkelijk kunnen verbergen van phising-aanvallen.
            tekst.
        </p>
        <h2>Naam conventies</h2>
        <p>
            De meest voorkomende bestandsnaamextensie voor bestanden die HTML bevatten, is .html.
            Een veel voorkomende afkorting hiervan is .htm, omdat een oud besturingssysteem zoals 
            DOS maar drie letters toestond. De extensie is .xhtml is een strictere vorm van html.
        </p>
        <h2>menu</h2>
        <ul>
            <li><a href="history.xhtml">De geschiedenis van HTML</a></li>
            <li><a href="markup.xhtml">Opmaak</a></li>
            <li><a href="semantic.xhtml">Semantische taal</a></li>
            <li><a href="../index.xhtml">Inleiding HTML</a></li>
        </ul>
    </body>
</html>

De bovenstaande code is ook op w3schools te vinden. Deze vorm van CSS heet een embedded style, code die op de pagina zelf staat.

12. CSS

 CSS is een aparte taal waar je in de vorige les al een beetje kennis mee hebt gemaakt. In feite maak je bij HTML-pagina's een onderscheid tussen opmaak en content:

  1. Voor de content gebruik je HTML.
  2. Voor de opmaak gebruik je CSS.

CSS gaat verder dan de opmaak. Kijk eens op deze pagina. Hier wordt telkens dezelfde content getoond in een heel andere opmaak.

Er zijn drie vormen van CSS:

  1. Een inline style. Dat ziet er zo uit: 
    <a href="xhtml/history.xhtml" style="text-decoration: none;">De geschiedenis van HTML</a>?
    Hiermee wordt opgemaakt dat de <a> zich niet mag onderscheiden van andere tekst zoals een onderlijnde tekst. Standaard is een <a> onderlijnd.
  2. Een interne stylesheet. Dit heb je al gezien in de vorige les. De sheet staat meestal in de <head> en begin met het element <style> . De css-code bevindt zich dan binnen dit element. Deze code geldt alleen voor die pagina.
     <style> 
                ul {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                    width: 200px;
                    background-color: #f1f1f1;
                }
             
    
                /* meer code */
    
    </style>
    <body>
       ....
            
  3. Een externe stylesheet. Deze gaan we nu maken.

Maak in je project eerst een folder genaamd css

https://images.computational.nl/galleries/html/2019-08-02_14-47-39.png

Binnen deze folder maak je een Cascading Style Sheet. Deze vind je onder de rechtermuisknop onder Other en daarna in het filter casc te typen.

https://images.computational.nl/galleries/html/2019-08-02_14-50-03.png

Noem deze nieuwe file style. Een veelgemaakte fout is dat dit nieuwe bestand newcss.css of css.css wordt genoemd. Hier krijg je aftrekpunten voor.

https://images.computational.nl/galleries/html/2019-08-02_14-52-28.png

De file is nu gemaakt. Verwijder hier ook het overbodige commentaar. Hieronder is dit rood omlijnd aangegeven. En niet vergeten: doe het met Ctrl-E.

https://images.computational.nl/galleries/html/2019-08-02_17-18-37.png

Als de file eenmaal in het mapje staat kun je deze koppelen aan een xhtml-bestand op dezelfde manier als je een afbeeldingen sleept.

https://images.computational.nl/galleries/html/2019-08-02_17-22-55.png

De index.xhtml is nu gekoppeld aan een stylesheet. We zullen nu een beetje CSS gaan toepassen. Eerst doen we dit rechtstreeks op het <h2> element. Voer de volgende code in, in style.css en probeer uit wat het effect is in je document.

h2 {
    color: red;
}

Je hebt nu met behulp van h2 alle h2 elementen geselecteerd en deze worden inderdaad allemaal rood.

13. CSS combinatoren in een blokelement

Je kunt een element specifieker aanduiden met een combinator. Een combinator verbind twee HTML-elementen binnen de CSS en selecteert op een bepaalde manier. De eenvoudigste is de spatie. Hieronder zie je een embedded style waarbinnen de p binnen de div wordt geselecteerd (div p)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            div p {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Dit is paragraaf nummer 1</p>
            <p>Dit is paragraaf nummer 2</p>
            <section><p>Dit paragraaf nummer 3 binnen een sectie binnen een div</p></section>
        </div>

        <p>Dit is een los staande paragraaf nummer 4</p>
        <p>Dit is een los staande paragraaf nummer 5</p>

    </body>
</html>

Je ziet hierboven het element <div>. We noemen dit een blokelement. Het wordt vaak gebruikt om elementen in te plaatsen en het geheel dan een CSS stijl te geven.  Een blokelement laat geen elementen naast zich toe en is in feite een leeg element waarbinnen je gevulde elementen kunt plaatsen zoals een <p>. Het is wel mogelijk om met CSS deze eigenschap te veranderen (zie opdracht).

Een andere mogelijkheid van selecter is een groter-dan-teken gebruiken. Het verschil met een spatie is dat het alleen de directe kinderen van div selecteert. In ons geval dus alleen paragraaf nummer 1 en nummer 2. Bij een spatie zou het ook nummer 3 selecteren zoals we ook in de opdracht zullen zien.

div > p {
    background-color: yellow;
}

Een plusje selecteert de directopvolgende p na de div.

div + p {
    background-color: yellow;
}

14. Een id en een class

Elementen kunnen ook worden gevangen met behulp van een class of een id. Stel dat we bijvoorbeeld bepaalde <p> elementen schuin willen afdrukken. De code in HTML is als volgt:

<p class="italic">

In CSS vangen we deze klas met een punt aan het begin.

.italic {
    font-style:italic;
}

Een klas mag je zo vaak als je wilt op dezelfde pagina gebruiken. Dat is anders met een id. Deze mag je maar voor één element gebruiken. Een id stel je zo in:

<p id="bold">

Met de bijbehorende CSS-code

#bold {
    font-weight:600;
}

Een id geef je binnen de CSS dus aan met een hekje. Een class en een id combineren mag ook:

<p id="bold" class="italic">

De tekst zal nu vet en schuin worden afgedrukt.

Dat kunnen we natuurlijk beter op een andere manier doen

<p class="paragrahpLayout">
.paragrahpLayout {
   font-weight: 600;
   font-style: italic;
}

Onthoud: als je met een class het gewenste effect kunt gebruiken dan heeft dit de voorkeur. Een id gebruik je alleen voor specifieke situatie.

15. Een quiz maken

In les 1 hebben we een voorbeeld gegeven van een quiz. Op dezelfde manier ga je in xhtml een soortgelijke quiz maken met drie multiple choice vragen. De quiz heeft ook een begin- en eindepagina. Als een gebruiker de vraag fout heeft wordt deze naar een foutpagina verwezen en daarna terug naar de vraag. Als de gebruiker de vraag goed heeft mag deze door naar de volgende vraag. Aan de quiz zitten verder de volgende eisen:

  • De antwoorden worden weergegeven met een (un)ordered list zoals is uitgelegd in de lessen. De antwoorden van de vragen zijn dus telkens een soort menu.
  • Je gebruikt een aparte stylesheet. Stijlen die niet voor alle pagina's gelden mag je in een embedded of inline style plaatsen.
  • Maak de quiz zo creatief mogelijk. Het mag over van alles gaan. Je hobby, sport, hoe maak ik soep etc. zolang het maar een beschaafd, maatschappelijk geaccepteerd, onderwerp is. Onderwerpen die bijvoorbeeld niet zijn toegestaan zijn alcohol, geweld (wapens) of drugs.
  • De quiz moet worden gemaakt met Netbeans.

De paginabron bekijken

Het is handig om in de broncode van de bovenstaande voorbeeldquiz te kijken. Met Firefox kan dat als volgt. Klik met de rechtermuisknop op Paginabron bekijken en je krijgt toegang tot de HTML-code.

https://images.computational.nl/galleries/html/2019-08-05_09-47-06.png

De inspector

De inspectortool is een belangrijke tool in Firefox. Het helpt je om HTML- en CSS-code te analyseren of uit te proberen. In onderstaand filmpje kun je zien hoe dit werkt. Let wel, de code die je in de inspector aanpast wordt niet bewaard in je file. Het is alleen om uit te proberen.

Verder: er zijn in de inspector nog veel meer opties. Op de pagina's voor ontwikkelaars van Mozilla staat veel informatie. Je kunt de taal ook op Nederlands zetten.

16. De belangrijkste Netbeans sneltoetsen

  • Ctrl-c = kopiëren, Ctrl-v=plakken en Ctrl-x=knippen.
  • Alt-Shift-f: automatisch uitlijnen van de code.
  • Ctrl-e: het deleten van een regel inclusief de witruimte.
  • Ctrl-f: zoeken in zowel het hele project als in een enkel bestand, afhankelijk wat je hebt geselecteerd.
  • Ctrl-h: zoeken en vervangen.
  • Ctrl-r: een element of variabele een andere naam geven. De afsluiter gaat meteen mee.
  • Ctrl-spatie: automatisch code genereren.
  • Alt-Shift-pijltje: een element of een selectie verplaatsen.
  • Ctrl-Shift-pijltje omlaag: een regel of selectie naar beneden kopiëren.

17. Het project zippen

Het inleveren van een project is eenvoudig. Hieronder een filmpje hoe je het project kunt inleveren in Classroom.

___

18. Netbeans installeren

Download en installeer eerst de JDK. Op een moderne windows computer neem je de 64-bit versie. Accepteer ook de Licencese Agreement. Hieronder wordt versie 13 geïnstalleerd terwijl op het moment van schrijven versie 14 al beschikbaar is. Er zit echter een bug in de installatieprocedure van Netbeans in combinatie met de JDK 14.

https://images.computational.nl/galleries/html/2020-06-07_16-51-15.png

Accepteer de voorwaarden.

https://images.computational.nl/galleries/html/2020-06-07_16-54-35.png

Start na de download de installatieprocedure door dubbel op het bestand te klikken. Laat alle instellingen zoveel mogelijk standaard staan. Dus het wordt in principe geïnstalleerd in het mapje C:\Program Files\Java\jdk-13.0.1\ (of latere versie).

https://images.computational.nl/galleries/html/2020-06-07_16-57-19.png

Aan het einde van de installatieprocedure klik je op close.

https://images.computational.nl/galleries/html/2020-06-07_17-03-45.png

Je hebt nu de JDK 13 geïnstalleerd. We gaan nu Netbeans installeren. Ga voor Netbeans 11.3 naar deze pagina. Neem de bovenste link.

https://images.computational.nl/galleries/html/2020-06-07_17-42-12.png

Start na downloaden de installatieprocedure. In principe laat je alles standaard staan.

https://images.computational.nl/galleries/html/2020-06-07_17-43-58.png

Na enkele klikken kun je zien welke JDK er wordt gebruikt.

https://images.computational.nl/galleries/html/2020-06-07_17-44-25.png

Netbeans wordt nu geïnstalleerd.

https://images.computational.nl/galleries/html/2020-06-07_17-47-25.png

Als er nog een oude versie van Netbeans op je computer staat is het beter om op deze vraag No te antwoorden.

https://images.computational.nl/galleries/html/2020-06-07_17-51-36.png