Hyperlinks aan je website toevoegen

Een tutorial over het bouwen van je eerste website
Veel mensen vinden het knap als je zegt dat je een website hebt gemaakt, zonder
ontwerpprogramma's en die onzin, gewoon met code. Maar dat is helemaal toch niet zo lastig?

In deze tutorial bouw je je eerste website, daarvoor gebruiken we de talen HTML (HyperText Markup Language), CSS (Cascading StyleSheets) en een beetje JS (JavaScript). Ik ga het proberen makkelijk te houden, maar ik zal er ook blauwe vakken in zetten, daarin ga ik verder op in de code en theorie.

Ik verwacht dat je Brackets al hebt gedownload, en bestandnaamextensies aan staan. Is dat niet het geval, bekijk daar dan mijn tutorials over. Je vind ze hier: Een ontwikkelomgeving opzetten

Hyperlinks
In deel 1 van deze tutorial heb ik je laten zien hoe je de homepage van je website kan bouwen. (Heb je dat nog niet gedaan? Check dan eerst deze post uit: Websites bouwen, hoe moet dat?) Maar, een website bestaat niet uit 1 pagina. Ik wil ook nog een over-mij pagina, en een pagina waarop mijn projecten staan.
Afbeeldingsresultaat voor hyperlink"Dit is waar hyperlinks tevoorschijn komen.
Hyperlinks zijn die blauwe klikbare dingen, die je op websites ziet, die je van website naar website brengen. Hyperlinks zijn het hart van het internet. Zonder hyperlinks kun je er niks mee.

Maar ondertussen denk jij: 'Robin loopt maar wat te lullen, maar wanneer, en hoe gebruik je nou hyperlinks?

In dit geval gaan we hyperlinks gebruiken in de navigatie van de website, het menu.

Maak een nieuwe HTML pagina aan. Dit doe je door het bestand index.html in Brackets te openen, en dan bovenin op file / bestand te klikken. Klik daarna op Opslaan als / Save as. Typ in over-mij.html, en klik op Opslaan / Save. Als het goed is heb je nu 2 bestanden: index.html en over-mij.html. Open het index.html. En typ dit:


<!DOCTYPE html>
<html>

    <head>

        <title>Robin Boers | Web Design</title>

    </head>

    <body>

        <header>

            <h1>Robin Boers | Web Design</h1>

     <nav>
  <ul>
      <li>Home</li>
      <li><a href="over-mij.html">Over mij</a></li>
  </ul>
            </nav>

        </header>

        <h2>Welkom op mijn website!</h2>

        <p>Hallo, ik ben Robin Boers, ik ben bijna 13, en ik maak websites.<br>
        Wil je ook een website? Neem dan contact met me op via: robin@geheimesite.nl</p>

    </body>

</html>


Open hierna het bestand over-mij.html, en typ dit:

<!DOCTYPE html>

<html>

    <head>
        <title>Over mij - Robin Boers | Web Design</title>
    </head>

    <body>
        <header>
            <h1>Robin Boers | Web Design</h1>
    <nav>
<ul>
    <li><a href="index.html">Home</a></li>
    <li>Over mij</li>
</ul>
            </nav>
        </header>

        <h2>Over mij</h2>

        <p>Hallo, ik ben 13 jaar, en ik maak websites. Ik heet Robin en toen ik dit schreef zat ik in de brugklas.<br>
Ik heb een YouTube kanaal, dat Robin Boers heet, waar ik video's maak over mij intresses. En ik heb een blog, dat je nu leest</p>

    </body>

</html>


Open nu het bestand index.html in de browser, en bekijk het resultaat.
Als het goed is zou je dit moeten zien:
De homepagina

Klik je dan op het linkje "Over mij", dan zie je dit:

De over-mij pagina

Maar hoe werkt die code nou eigenlijk?
Het is best simpel: We maken een navigatievak met het element <nav>, daarna plaatsen we in dat vak een lijstje met <ul>. <ul> staat voor Unsorted List, een lijst zonder nummers. Daarna maken we List Items met <li>. In de List Items maken we hyperlinks met <a>.

De werking van het menu

Een hyperlink werkt zo:


Gefeliciteerd! Je hebt zojuist je eerste hyperlink gemaakt!
Wil je meer informatie over het bouwen van websites? Bekijk dan dit boek eens: Coderdojo Nano - Bouw je eigen website. Met dit boek heb ik de eerste versie van mijn website gemaakt. Ook is het nuttig om w3schools.com eens te raadplegen. Het is een enorme site, met veel informatie. Er zit alleen 1 nadeel aan: het is Engels...

Dit was het voor deze tutorial.
Ik hoop dat je hem nuttig vond.
Blijf creatief,

Robin

Websites bouwen, hoe moet dat?

Een tutorial over het bouwen van je eerste website
Veel mensen vinden het knap als je zegt dat je een website hebt gemaakt, zonder
ontwerpprogramma's en die onzin, gewoon met code. Maar dat is helemaal toch niet zo lastig?

In deze tutorial bouw je je eerste website, daarvoor gebruiken we de talen HTML (HyperText Markup Language), CSS (Cascading StyleSheets) en een beetje JS (JavaScript). Ik ga het proberen makkelijk te houden, maar ik zal er ook blauwe vakken in zetten, daarin ga ik verder op in de code en theorie.

Ik verwacht dat je Brackets al hebt gedownload, en bestandnaamextensies aan staan. Is dat niet het geval, bekijk daar dan mijn tutorials over. Je vind ze hier: Een ontwikkelomgeving opzetten

Laten we beginnen!
Ik zal dit onderwerp over meerdere blogposten verspreiden, we gaan hier leren hoe we een simpele homepage, en over-mij pagina gaan maken.

Open Brackets, en typ het volgende:


<!DOCTYPE html>
<html>
    <head>
        <title>Coole website!</title>
    </head>

    <body>
        <h1>Mijn eerste website!</h1>

    </body>
</html>

Sla dit bestand op als index.html, en navigeer naar het bestand.
Het bestand zou een chrome, firefox of IE/Edge logo moeten hebben:








Open het bestan door er dubbel op te klikken, en je zou dit moeten zien:


Dit is het begin, maar hoe werkt die code nou?
Kort gezegd werkt het zo:

1. De webpagina die je zojuist hebt gemaakt bestaat uit blokken met een duidelijk begin en einde, waarvan het einde is gemarkeerd met een /
2. De blokken staan onder elkaar, maar kunnen ook in elkaar staan. Als blokken in elkaar staan, heet dat nesten.
3. In geneste blokken kunnen ook blokken onder elkaar staan, neem bijvoorbeeld <head>:
Staat in <html> (genest), maar ook op <body> (gestapeld)
4. De blokken heten Elementen
5. De tekst die het begin en eind van een element weergeven heten tags. Zo is <head> een begintag en </head> een eindtag.

Hieronder zie je wat de elementen doen:























Laten we de webapgina eens invullen met wat nuttige informatie!
Ik maak in dit voorbeeld een website, voor een zogenaamd bedrijf, dat websites maakt.
Opeen Brackets weer, en typ het volgende: (Voel je vrij om je eigen inhoud toe te voegen)

<!DOCTYPE html>

<html>

    <head>
        <title>Robin Boers | Web Design</title>
    </head>

    <body>
        <header>
            <h1>Robin Boers | Web Design</h1>
        </header>

        <h2>Welkom op mijn website!</h2>

        <p>Hallo, ik ben Robin Boers, ik ben bijna 13, en ik maak websites.<br> 
        Wil je ook een website? Neem dan contact met me op via: robin@geheimesite.nl</p>

    </body>

</html>

Open het bestand weer, of (als je de webbrowser nog open hebt staan) klik op CTRL+R (dat staat voor refresh)
Dit zou het volgende resultaat moeten geven:

Allemaal wel leuk en aardig, maar hoe werkt dit nou weer??
Geen nood, hieronder staat weer een uitleg, met wat alle elementen doen.


Gefeliciteerd! Je hebt zojuist een webpagina gemaakt, en ingevuld met informatie!

Wil je meer informatie over het bouwen van websites? Bekijk dan dit boek eens: Coderdojo Nano - Bouw je eigen website. Met dit boek heb ik de eerste versie van mijn website gemaakt. Ook is het nuttig om w3schools.com eens te raadplegen. Het is een enorme site, met veel informatie. Er zit alleen 1 nadeel aan: het is Engels...

Dit was het voor deze tutorial.
Ik hoop dat je hem nuttig vond.
Blijf creatief,

Robin

Websites bouwen voor beginners.

Hallo, ik ben Robin. Ik ben 13 jaar, en toen ik 10 was, maakte ik mijn eerste website met dit boek: CoderDojo Nano - Bouw je eigen website. Ik ben inmiddels 13, en ik zit in de brugklas. In deze serie blogjes ga ik je (proberen) uit te leggen, hoe je een website kan bouwen. Ik heb veel ervaring opgedaan tijdens het maken van mijn eigen website, geheimesite.nl, en met die ervaring heb ik dit blog gemaakt. Ik hoop dat je het leuk gaat vinden, en ik wens je veel plezier bij het programmeren van je eerste website!

Blijf creatief,
Robin



Zo maak je een inlogsysteem met PHP en HTML



Hallo, ik ben Robin. In deze tutorial laat ik zien hoe je een simpel inlogsysteem maakt in PHP.
Voor deze video moet je wel de basisvaardigheden van PHP en HTML onder de knie hebben. Wil je leren hoe je je eerste HTML website maakt?
Houd dan dit blog in de gaten, want binnenkort plaats ik een beginners handleiding HTML.

Kijk voor de broncode van dit project op mijn GitHub profiel: https://github.com/RobinBoers/Inlogsysteem_PHP

Hier heb je nog een lijstje handige tools bij webdevelopment en PHP:
- xampp: https://www.apachefriends.org/index.html
- brackets: http://brackets.io/
- visual studio code: https://code.visualstudio.com/

Heb je nog vragen of tips? Plaats ze in de comments!

En wil je graag dat ik nog een tutorial maak over een inlogsysteem met een database? Zet het in de comments!

Jailbreak een oude iPad / iPhone / iPod Touch met iOS 9

Hallo allemaal,
Ik ben pas jarig geweest, en ik heb een oude iPad 2 gekregen, om te jailbreaken. Ik wilde dat al heel lang doen, en nu kan dat. In dit blogje ga ik jullie laten zien hoe ik dat doe.

Stap 1: Check of je apparaat ondersteund wordt
Alleen 32 bit apparaten zijn ondersteund. Dit houd in:


  • iPhone 4
  • iPhone 4S
  • iPhone 5
  • iPad 1
  • iPad 2
  • iPad 3
GEEN iPhone 5s
GEEN iPad 4

Je apparaat moet iOS 9.3.5 of 9.3.6 draaien


Stap 2: Maak een backup
Zorg er altijd voor dat je een backup hebt voor het geval er iets mis gaat. Dit zo:

Instellingen -> iCloud -> iCloud reservekopie -> Zet aan -> Maak nu een backup

Stap 3: De jailbreak downloaden
Je kan de jailbreak via de computer downloaden, en met cydia impactor naar je iDevice sturen, maar dat daar had ik problemen mee, dus gebruik ik een andere methode: direct op je apparaat installeren.

Hiervoor moet je de jailbreak uit 1 van de volgende bronnen downloaden:

  1. iOS Ninja (https://iosninja.io/)
  2. Panda helper (https://www.pandahelp.vip/)
Als je voor panda helper kiest, moet je eerst de panda helper app installeren. Daarna kun je in het zoekveld "Phoenix Jailbreak" intypen, en klik je op de Phoenix jailbreak. Installeer die app.

 Als je voor iOS Ninja kiest, klik je op de volgende link:

Klik op de "Tap to install" knop. Als je de tekst  Direct install disabled because certificates have been revoked by Apple. Follow us on Twitter to find out when it's fixed. 
ziet, moet je de andere methode gebruiken.

Als het goed is zie je bij beide methoden na het installeren dit icoontje op je homescherm staan:



Als je dit icoontje niet ziet, herhaal je de stappen hierboven

Stap 4: de app goedkeuren
Als je de app probeert te openen, krijg je als het goed is zo'n soort error:

















Om dit op te lossen, volg je deze tutorial: https://testersupport.usertesting.com/hc/en-us/articles/115003712912-How-to-Trust-an-Unreleased-iOS-App

Als het goed is kun je nu de app wel openen.

Stap 5: Jailbreak je apparaat

Klik op de knop: "Prepare for jailbreak"

Je zou nu een ronddraaiend rondje moeten zien, met techpraat eronder.
Na een tijdje wordt springboard herstart, en ben je officieel gejailbreakt.

Stap 6: Doe coole dingen!
Nu je apparaat is gejailbreakt, kun je er coole dingen mee doen. Hieronder zie je een lijstje met suggesties:

- Voeg coole tweaks toe
- Versnel iOS
- Voeg coole animaties to
- Dual boot je iDevice met CoolBooter

Dit was het alweer,

Robin