Textformate:

Kennenlernen HTML

Materialien:

• Handreichung HTML.pdf
• https://wiki.selfhtml.org/wiki/HTML
• https://www.w3schools.com/html/

1. Benutzt jetzt Notepad++, um das gleiche Dokument in reinem HTML nachzubauen. Ihr braucht dafür:

   • Das HTML-Grundgerüst (siehe "Handreichung HTML")
   • das <h1>-Tag
   • die <ul>- und <li>-Tags
   • das <strong>- und <em>-Tag

   Das Dokument kann im Webbrowser angezeigt werden

2. Fügt in dieses HTML-Dokument außerdem einen Hyperlink auf die Wikipedia-Seite zu HTML ein

3. Benutzt im Webbrower den Webinspector / Dev-Tools um neben der gerenderten Seite auch den Quellcode anzuzeigen.

   Der Inspector lässt sich idR. über die F12-Taste erreichen und steht in allen großen Browsern zur Verfügung. Die Dev-Tools von Chromium, Firefox und Edge unterscheiden sich dabei kaum voneinander.

   Schickt mir einen Screenshot des gerenderten Dokuments mit dem Quellcode im Webinspector. Zeigt dabei unbeding die Rohansicht des Quellcodes, nicht die aufklappbare Elementen-Ansicht.

4. Recherchiert in den Element-Referenzen bei Selfhtml, oder w3schools:

   • Was ist der Unterschied zwischen <b> und <strong>
   • Was ist der Unterschied zwischen <i> und <em>

   Schreibt mir als Antwort eine kurze Vermutung im Privatchat

Aufgabe (Webserver)

Installiert per wsl ein Debian GNU Linux in eurem Windows.

:> wsl --install -d debian
:> wsl
 -> Huch, da ist ein bash

Installiert via wsl einen Apache-Webserver

~$ apt-get install apache2

Lasst die HTML-Seite via apache ausliefern. → Recherche ;-)

Aufgabe Webserver-Config / HTTP

• Macht das Webserver-Verzeichnis über den Windows-Explorer schreibbar

  • ~# chmod a+w /var/www/html/
• legt eine HTML-Datei unter einem anderen Namen im Verzeichnis mit ab (z.B. die html-Datei aus MS-Office)

• greift auf die URL im Webbrowser zu

  • http://IPADRESSE/Dateiname.html
• versucht die HTML-Seite via telnet abzurufen (siehe Linux-Kurs)

~$ ncat -C localhost 80
GET / HTTP/1.1
Host: schnabbeldiwauwau
(leerzeile)
-> Antwort vom Server
STRG + d

~$ ncat -C localhost 80
GET /Text.txt HTTP/1.1
Host: isegal
(leerzeile)
-> Antwort vom Server
STRG + d

Aufgaben HTTP

1. Beobachtet im Webinspector / Dev-Tools das Tab "Netzwerk". Zu jedem Request lassen sich dort Request- und Response-Header einsehen.

   • vergleicht mit den Requests, bzw. der Ausgabe in ncat

2. betrachtet die Dateien in /var/log/apache2/, nutzt tail -f ... um die Dateien zu sehen während im Browser Seiten abgerufen werden

   • versucht auch eine Seite aufzurufen, die es nicht gibt, z.B. http://IPADRESSE/gibtsnicht.pdf

3. Vergleicht die Log-Einträge, die entstehen, wenn ihr mit verschiedenen Browsern (Chromium, Edge, Firefox) auf die selbe Seite zugreift.

   • wenn ihr via "localhost" oder über die IP-Adresse zugreift

4. Vergleicht auch, wie sich die Request-Header unterscheiden, die nicht im Log eingetragen werden.

   • Hierbei helfen die jeweiligen Dev-Tools.

   • Alternativ: ~# ncat -Cl 1024

     Zugriff via http://IPADRESSE:1024/

   • Schafft ihr es, von Hand eine Antwort an den Browser zu senden?

Weiterer Lese-Stoff: https://coveryourtracks.eff.org/learn

Aufgaben CGI

CGI = Common Gateway Interface

CGI ist eine Spezifikation, nach der ein Webserver mit beliebigen Backend-Programmen kommunizieren kann.

1. Aktiviert das CGI-Modul in apache: ~# a2enmod cgi

2. Schaut in die Config-Datei /etc/apache2/sites-enabled/000-default.conf.

   Fügt innerhalb des VirtualHost folgenden Absatz ein, um die Ausführung von CGI-Scripten zu aktivieren:

   <Directory /var/www/html/>
    Options       +ExecCGI
    AddHandler    cgi-script      .sh
   </Directory>

3. Legt im Webserver-Root folgendes Script an:

   #!/bin/sh
   
   echo "Content-Type: text/plain; charset=utf-8"
   echo ""
   
   date

   Ruft das Script im Browser auf. Was fehlt noch, um die Ausführung möglich zu machen?

4. Lasst über das Kommando env die Umgebungsvariablen des Scripts ausgeben. Was unterscheidet sich, wenn das Script auf der Kommandozeile ausgeführt wird.

5. Modifiziert das Script, um einen unterschiedlichen Text auszugeben, je nachdem, ob der Browser via localhost oder die 172.-er IP-Adresse auf das Script zugreift.

6. Lasst als Dokumenteninhalt vom Script einen HTML-Text ausgeben

   • Für mehrzeilige Ausgabe könnt ihr mehrere echo-Befehle nutzen
   • oder bequemer, ein echo mit mehrzeiligem Parameter
   • oder noch besser: ein "heredoc"

   cat <<-SCHNABBELDIWAUWAU
   <html><head>
    <title></title>
   </head><body>
    Foobar
   </body></html>
   SCHNABBELDIWAUWAU

   • warum wird im Browser der HTML-Text angezeigt, statt das gerenderte Dokument?

7. Im Shellscript kann man die Ausgabe eines Kommandos in einen String einfügen: z.B. via echo "foo $(date) bar", das geht auch in Heredocs.

   • fügt die Ausgabe von env in den HTML-Text ein
   • findet eine Möglichkeit, die Umgebungsvariablen im HTML-Dokument auch mehrzeilig darstellen zu lassen.

Aufgabe Formulare

1. Entwerft eine HTML-Datei mit einem Formular bestehend aus:

   • einem Texteingabefeld für "Benutzername"
   • einem "Absenden"-Button

   Das Formular soll per GET-Request an den Server gesendet werden.

2. Wie verändert sich die URL im Browser, wenn das Formular abgeschickt wird?

3. Lasst den HTML-Code durch ein Shell-Script ausgeben.

4. Wie kann das Shell-Script die Eingaben lesen, um sie zu verarbeiten?

   • Denkt daran, wie ein Programm in der CGI-Spezifikation Daten vom Server erhält

5. Gebt den eingegebenen Namen im HTML-Code in einer Begrüßung zurück: z.B. "Sei gegrüßt Schnabbeldiwauwau82"

   • der Name muss dafür als Variable aus den Request-Parametern herausgepopelt werden. Hierbei hilft z.B. das grep-Programm, oder cut, oder expr substr

     # Variable "un" setzen (für username)
     un="$( echo "${QUERY_STRING}" |cut -d= -f2)"

6. Teilt das Namensfeld in Vor- und Nachname auf

   • Passt die Grußzeile entsprechend an, hierfür müssen jetzt zwei Parameter verarbeitet werden

     # 2-Stufiges rauspopeln
     vn="$(echo "${QUERY_STRING}" | grep -oE "vn=[^&]+")"
     vn="$(echo "${vn}" |cut -d= -f2)"
     
     # 1-Stufiges rauspopeln mit 2-Stufiger Pipelinie
     nn="$(echo "${QUERY_STRING}" | grep -oE "nn=[^&]+" |cut -d= -f2)"

   • Was passiert wenn ein Name Umlaute, kyrillische Buchstaben oder sonstige Sonderzeichen enthält?

   Beachtet in der Praxis auch: https://www.w3.org/International/questions/qa-personal-names