Jouw eigen webpagina

Een eigen webpagina

Facilitator

Het is misschien een goed idee om even samen te kijken naar wat we hebben gedaan: de server is live, maar we openen het webpagina-bestand gewoon lokaal vanuit de nginx-map. Daarom heet het “localhost”.

Nu onze server live is, gaan we eens kijken wat we zien. Wanneer we een website openen in de browser, halen we eigenlijk een bestand op uit de map van de webserver op die computer.

In wezen is een website gewoon een map met verschillende bestandstypen op een externe computer.

Meestal heet het hoofdbestand van een webpagina index.html. index omdat het een lijst is van alle inhoud van de pagina, maar ook van alle externe bronnen die nodig zijn om de pagina weer te geven, zoals afbeeldingen, video’s, lettertypen, enz. HTML (Hypertext Mark-up Language) is de programmeertaal die wordt gebruikt voor webpagina’s en het belangrijkste bestandsformaat. Er zijn ook andere talen:

HTML is bedoeld om inhoud te structureren en een hiërarchie aan te brengen.
CSS is voor stijlen: de lay-out van onze webpagina (kleur, grootte, kolommen maken, enz.).
Javascript (.js) is voor interactiviteit: knoppen animeren en omschakelen, dropdown, externe inhoud ophalen, enz.

Facilitator

De bovenstaande uitleg kan worden geïllustreerd door aantekeningen te maken op een whiteboard of een laptop aan te sluiten op een beamer en de ontwikkelaarstools van een website te openen: rechtsklikken > bron (van pagina) bekijken. Er wordt een ander tabblad geopend met het HTML-bestand van die pagina.

Onze aangepaste webpagina

Onze webpagina vinden

Laten we onze webpagina op onze telefoon zoeken. We navigeren door mappen met behulp van Termux. We gebruiken het commando cd pad/naar/map/ om naar onze websitemap te gaan, die door onze webserver is aangemaakt. cd staat voor “change directory” (directory is een ander woord voor map).

Typ + enter

cd $PREFIX/share/nginx/html

Nu wil je weergeven wat er in deze map staat, met behulp van ls, wat staat voor “list”.

ls

Figure 1: Naar de nginx-bestands-/mapstructuur gaan

Je zou 2 bestanden moeten zien: index.html en 50x.html. index.html is de hoofdpagina, terwijl 50x.html wordt weergegeven als er een specifieke fout is.

Note

Dat betekent dat ons index.html-bestand zich in de map html bevindt, die zich in de map nginx bevindt, die zich in share bevindt, enz.

map locatie

$PREFIX/share/nginx/html is een aliasnaam voor het pad, een snelkoppeling. Het volledige pad naar onze webpagina is –> /data/data/com.termux/files/usr/share/nginx/html/

Onze webpagina bekijken.

index.html is de webpagina die we in de browser van onze telefoon zien. Laten we deze openen.

We gebruiken het commando nano bestandsnaam.extensie. “nano” is een zeer eenvoudige teksteditor in de terminal.

nano index.html

We hebben het html-bestand in de terminal geopend. Dit is vergelijkbaar met het openen van een .docx-bestand in Office.

   <!DOCTYPE html>
   <html>
   <head>
   <title>Welkom bij nginx!</title>
   <style>
   html { color: dark; }
   body { width: 35em; margin: 0 auto;
   font-family: Tahoma, Verdana, Arial, sans-serif; }
   </style>
   </head>
   <body>
      <h1>Welkom bij nginx!</h1>
      <p>Als je deze pagina ziet, is de nginx-webserver succesvol geïnstalleerd en
      werkt deze. Verdere configuratie is vereist.</p>

      <p>Raadpleeg voor online documentatie en ondersteuning
          <a href="http://nginx.org/">nginx.org</a>.<br/>
      Commerciële ondersteuning is beschikbaar op
          <a href="http://nginx.com/">nginx.com</a>.</p>
   </body>
   </html>

Facilitator

De onderstaande informatie moet worden uitgelegd terwijl het html-fragment op een beamer wordt getoond of op een whiteboard wordt getekend. Meer informatie over HTML hier.

HTML structureert informatie met verschillende waarden binnen “elementen” die worden omgeven door <tags>: de openingstag <p> en de sluitingstag </p>. Hier zien we verschillende elementen die we terugvinden op de weergegeven browserpagina. Binnen het <body>-element bevindt zich een <h1>-tag met een koptekst, enkele <p>-alinea’s en enkele <a>-links.

Binnen de <head> vinden we informatie over de pagina, maar dat is niet de inhoud:

<title>...de titel hier...</title>: is de titel die in het browsertabblad wordt weergegeven.
<style>color: blue;<style> is waar we CSS-code plaatsen om informatie te geven over de lay-out, kleur, enz.

Lazy typing

We kunnen de tab-knop (met 2 pijltjes) gebruiken om een bestands- of mapnaam automatisch aan te vullen. Begin met het typen van “inde” en druk op de tab-knop, dan wordt het einde van je bestandsnaam “index.html” automatisch ingevuld.

Onze webpagina bewerken.

Laten we wat tekst op de pagina veranderen.

Facilitator

Dit is een creatief moment, laat elke deelnemer binnen een paar minuten zijn eigen tekst en kleur kiezen (zie CSS-kleuren).

Gebruik de pijltjes < > in nano om te navigeren en wat tekst te veranderen.

<h1>Deze webpagina staat op de telefoon van mijn oude vader</h1>
   <p>Als je deze pagina ziet, ben je OP MIJN TELEFOON!</p>

Zet me tussen die tags

Zorg ervoor dat je de HTML-syntaxis respecteert. Elementen moeten tussen tags staan <h1>Je tekst hier</h1>

Wijzig de tekstkleur in <style>

<style>
html { color: orange; 
background: limegreen;
}
</style>

Styling met stijl

Zorg ervoor dat je de CSS-syntaxis respecteert. De stijlinformatie moet tussen <style> Styling komt hier en ALLEEN hier<style> staan. Elke declaratie volgt deze structuur: property : value;, bijvoorbeeld: font-size: 20px;

Figure 2: De webpagina openen op de telefoon

HTML-handleidingen

Meer informatie over HTML vindt je op de officiële W3. Maak je eigen website gids, HTML-sectie hier, HTML-webzine hier

CSS-handleidingen

Deze geweldige CSS-bronnen van kunstenaar Doriane Timmermans: declarations.style of deze video

Opslaan, afsluiten en opnieuw laden

Laten we nu opslaan en onze update bekijken:

Druk op CTRL en typ x op het toetsenbord van Termux.
Je krijgt de vraag “Save modified buffer? [Y/n]” (Gewijzigde buffer opslaan? [J/n])
Typ y voor ja en druk op enter. (Typ no om af te sluiten zonder op te slaan).
Ga naar je browser en vernieuw de pagina [http://localhost:8080/index.html].

Figure 3: HTML bewerken in de terminal met het nano-commando

Opslaan door op CTRL + x te drukken — Figure 3: HTML bewerken in de terminal met het nano-commando

Zie je geen veranderingen?

Als het niet werkt, probeer dan het volgende: 1. Sluit de browser-app, open deze opnieuw en probeer het nogmaals. 2. Start nginx opnieuw, in Termux nginx -s stop, vervolgens nginx. 3. Controleer of je daadwerkelijk wijzigingen hebt aangebracht en opgeslagen in de index html-pagina: nano index.html.

Nginx-fout

Voeg hier het nginx-padrouteringsprobleem van Samsung toe (@ibo of Rein).

Oké, geweldig! Maar dat is niet zo spannend, toch? Ik kan mijn webpagina bekijken op mijn eigen webserver. Ik zou dat bestand ook gewoon in de bestandsbeheerder kunnen openen, daar heb ik geen internet voor nodig. Eigenlijk is je webpagina al toegankelijk voor andere clients (andere computers), je hoeft hen alleen je IP-adres te geven.