====== HTML ====== Hypertext Markup Language (HTML) ist eine Auszeichnungssprache zur Strukturierung elektronischer Dokumente. HTML-Dokumente werden von Webbrowsern dargestellt und bilden die Grundlage für Webseiten. HTML ist zusammen mit [[css|CSS]] und [[javascript|JavaScript]] eine der Kernsprachen des World Wide Webs (WWW). * [[https://google.github.io/styleguide/htmlcssguide.html|Google HTML/CSS Style Guide]] ====== Informationen ====== * **[[https://wiki.selfhtml.org/wiki/Schnell-Index/HTML]]** * [[http://wiki.selfhtml.org/wiki/HTML]] * [[http://wiki.selfhtml.org/wiki/HTML/Formulare]] * **[[https://www.html-seminar.de/einsteiger.htm]]** * [[https://www.html-seminar.de/tabellenzellen-verbinden.htm]] * **[[https://www.w3schools.com/html/]]** * [[https://www.w3schools.com/tags/]] ====== HTML 5 Template ====== Hello World!

Hello World!

Dieses Template berücksichtig keine IE eigenarten, da dieser Browser nicht mehr supported wird! ====== Das wichtigste zum HTML-Dokument ====== **[[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Neu_und_obsolet_in_HTML5|Neu und obsolet in HTML5]]** FIXME veraltet, muss aktualisiert werden Ein einfaches HTML-Dokument kann wie folgt aussehen: Hallo Hallo Welt! [[https://wiki.selfhtml.org/wiki/HTML/Regeln/Kommentar|Kommentare]] ... ... ... Ein CGI-Script (in Bourne SHell) sollte als allererstes die Zeile echo '' enthalten und erst dann seine eigentliche Arbeit tun! Sonst bekommt man den Fehler: malformed header from script. Bad header= ' Will man eine Weiterleitung im HTML-Dokument bewirken, setzt man unter der vorhandenen META-Zeile noch eine zweite drunter, die wie folgt aussehen könnte: ===== Zeichensätze und URL-Kodierung im HTML-Dokument ===== In einzelnen Fällen (unter Verwendung anderer Betriebssysteme oder älterer Software) kann es sein, dass der //UTF-8//-Zeichensatz nicht zur Verfügung steht, dann verwendet man in der Regel //ISO-8859-15//. Zu beachten ist, dass der Zeichensatz //ISO-8859-1// der alte US-Zeichensatz ist und deshalb keine Umlaute und kein Eurosymbol enthält. charset=iso-8859-15 Um mit Umlauten in einem HTML-Dokument keine Probleme zu bekommen, sollte man die [[https://www.freeformatter.com/html-entities.html|HTML-Kodierung für Sonderzeichen]] verwenden (Nicht zu verwechseln mit URI-Kodierung: [[https://www.urlencoder.io/]]): ^ lfd. Nr. ^ Zeichen ^ HTML-Kodierung ^ ^ Zeichen ^ HTML-Kodierung ^ ^ Zeichen ^ HTML-Kodierung ^ ^ 1 | ¡ | ¡ ^ | À | À ^ | à | à | ^ 2 | ¢ | ¢ ^ | Á | Á ^ | á | á | ^ 3 | £ | £ ^ | Â | Â ^ | â | â | ^ 4 | ¤ | ¤ ^ | Ã | Ã ^ | ã | ã | ^ 5 | ¥ | ¥ ^ | Ä | Ä ^ | ä | ä | ^ 6 | ¦ | ¦ ^ | Å | Å ^ | å | å | ^ 7 | § | § ^ | Æ | Æ ^ | æ | æ | ^ 8 | ¨ | ¨ ^ | Ç | Ç ^ | ç | ç | ^ 9 | © | © ^ | È | È ^ | è | è | ^ 10 | ª | ª ^ | É | É ^ | é | é | ^ 11 | « | « ^ | Ê | Ê ^ | ê | ê | ^ 12 | ¬ | ¬ ^ | Ë | Ë ^ | ë | ë | ^ 13 | ® | ® ^ | Ì | Ì ^ | ì | ì | ^ 14 | ¯ | ¯ ^ | Í | Í ^ | í | í | ^ 15 | ° | ° ^ | Î | Î ^ | î | î | ^ 16 | ± | ± ^ | Ï | Ï ^ | ï | ï | ^ 17 | ² | ² ^ | Ð | Ð ^ | ð | ð | ^ 18 | ³ | ³ ^ | Ñ | Ñ ^ | ñ | ñ | ^ 19 | ´ | ´ ^ | Ò | Ò ^ | ò | ò | ^ 20 | µ | µ ^ | Ó | Ó ^ | ó | ó | ^ 21 | ¶ | ¶ ^ | Ô | Ô ^ | ô | ô | ^ 22 | · | · ^ | Õ | Õ ^ | õ | õ | ^ 23 | ¸ | ¸ ^ | Ö | Ö ^ | ö | ö | ^ 24 | ¹ | ¹ ^ | × | × ^ | ÷ | ÷ | ^ 25 | º | º ^ | Ø | Ø ^ | ø | ø | ^ 26 | » | » ^ | Ù | Ù ^ | ù | ù | ^ 27 | ¼ | ¼ ^ | Ú | Ú ^ | ú | ú | ^ 28 | ½ | ½ ^ | Û | Û ^ | û | û | ^ 29 | ¾ | ¾ ^ | Ü | Ü ^ | ü | ü | ^ 30 | ¿ | ¿ ^ | Ý | Ý ^ | ý | ý | ^ 31 | | ^ | Þ | Þ ^ | þ | þ | ^ 32 | | ^ | ß | ß ^ | ÿ | ÿ | ==== URL-Encode auf der CLI ==== Für die Nicht-Linux-Gemeinde (z.B.: FreeBSD) gibt hier ein wunderschönes Rust-Programm, mit dem sich auf der CLI die meisten Zeichen in HTML-Kode umwandeln lassen. **[[https://github.com/dead10ck/urlencode|dead10ck/urlencode]]** [root@webserver ~]# cd /usr/ports/lang/rust/ [root@erde /usr/ports/lang/rust]# make clean [root@erde /usr/ports/lang/rust]# make [root@erde /usr/ports/lang/rust]# make install [root@erde /usr/ports/lang/rust]# make clean > cargo install urlencode > ls -lha /benutzer/.cargo/bin/ > cp /benutzer/.cargo/bin/urlencode /usr/local/bin/ > echo Test\'s\ 1/Best\'s\ of\ \"Cap\".mp4 | urlencode Test's%201%2FBest's%20of%20%22Cap%22.mp4 > echo Test\'s\ 1/Best\'s\ of\ \"Cap\".mp4 | urlencode | sed "s/[']/%27/g")" Test%27s%201%2FBest%27s%20of%20%22Cap%22.mp4 ===== Weiterleitung im HTML-Dokument ===== www.quelle.de
Weiterleitung von "www.quelle.de" auf "www.ziel.de/page/"

dies ist nur eine Weiterleitung!
===== Beispiel-Formular ===== > vi /usr/lib/cgi-bin/webtest.cgi #!/bin/bash #==============================================================================# ### Variablen VERSION="v2013090500" ZEICHENSATZ="UTF-8" #ZEICHENSATZ="ISO-8859-15" HINTERGRUNDFARBE="#E0E0FF" GRAU="#222222" ROT="#EE0000" STARTZEIT="$(date +'%F %T')" #------------------------------------------------------------------------------# ### Beispiele für wichtige Umgebungsvariablen # # HTTP_HOST=192.168.0.10 # SCRIPT_FILENAME=/usr/lib/cgi-bin/webtest.cgi # REQUEST_URI=/cgi-bin/webtest.cgi?GET-VARIABLE=Wert01 # SCRIPT_NAME=/cgi-bin/webtest.cgi # HTTP_REFERER=http://192.168.0.10/cgi-bin/webtest.cgi # REMOTE_ADDR=192.168.0.10 # SERVER_NAME=192.168.0.10 # CONTENT_LENGTH=22 # QUERY_STRING=GET-VARIABLE=Wert01 # SERVER_ADDR=192.168.0.10 # #==============================================================================# ### Kopf / ANFANG echo "Content-Type: text/html; charset=${ZEICHENSATZ} HTML-Testseite Version ${VERSION} " #==============================================================================# ### Datenstrom aus dem POST-Kanal in eine Variable schreiben POSTDATEN=$(cat | tr -d '\r') #==============================================================================# ### SEITENINHALT if [ -z "${POSTDATEN}" ] ; then ### wenn keine Daten per POST gekommen sind, dann wird dieser Teil angezeigt if [ -z "${QUERY_STRING}" ] ; then echo "

unterstrichene Überschrift

      Diese Text wird in Courier mit allen normalen Zeilenumbrüchen
      und allen Leerzeichen angezeigt.
    
Diese Zeile ist FETT gedruckt.

Wert01
Wert02

" else ### wenn keine Daten per POST gekommen sind, dann wird dieser Teil angezeigt echo "
http://${SERVER_NAME}${SCRIPT_NAME}

übertragene Daten per GET

${QUERY_STRING}
      
" fi #------------------------------------------------------------------------------# else ### wenn Daten per POST gekommen sind, dann werden hier die POST-Daten angezeigt echo "
http://${SERVER_NAME}${SCRIPT_NAME}

übertragene Daten per POST

${POSTDATEN}
    
" fi #==============================================================================# ### Fuss / ENDE echo " " #==============================================================================#
HTML-Code beim ersten Aufruf (ohne POST-Daten): HTML-Testseite Version v2013090500

unterstrichene Überschrift

      Diese Text wird in Courier mit allen normalen Zeilenumbrüchen
      und allen Leerzeichen angezeigt.
    
Diese Zeile ist FETT gedruckt.

Wert01
Wert02

HTML-Code nach dem der Knopf "Absenden" gedrückt wurde (mit POST-Daten): HTML-Testseite Version v2013090500
http://192.168.0.10/cgi-bin/webtest.cgi

übertragene Daten per POST

POST-VARIABLE=Wert02
    
HTML-Code nach dem der Link "Wert01" gedrückt wurde (mit GET-Daten): HTML-Testseite Version v2013090500
http://192.168.0.10/cgi-bin/webtest.cgi

übertragene Daten per GET

GET-VARIABLE=Wert01
      
===== Beispiel-Tabelle ===== Der Kode wurde hauptsächlich in //HTML Version 4// mit ein paar CSS-Elementen verfasst. Klausur

Klausur

Informatik

E-Phase

Raum 033

Freitag
7. - 8. Stunde

Frau Lehrerin



links mitte rechts
links-oben zentriert-oben rechts-oben
links-mitte zentriert-mitte rechts-mitte
links-unten zentriert-unten rechts-unten
====== Knöpfe und Schalte im HTML-Dokument ====== * [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen|Radio-Buttons und Checkboxen]] * [[https://www.w3schools.com/tags/tag_input.asp|HTML Tag]] * [[https://www.edv-lehrgang.de/kontrollkaestchen-checkbox-in-html/|Kontrollkästchen (Checkboxen) in HTML-Formularen]] FIXME Hello World!

Hello World!






* siehe auch: * [[https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC|]] * [[https://www.edv-lehrgang.de/auswahlmenue-dropdownliste-in-html/|Auswahlmenü (Dropdown-Liste) in HTML-Formularen]] ====== GET- und POST-Test in einer Tabelle ====== #!/usr/bin/env bash #==============================================================================# # Hiermit kann man Datenübertraun per GET und per POST testen. #==============================================================================# #------------------------------------------------------------------------------# # in FreeBSD: # chown www:www cgi-bin/test.cgi ; chmod 0770 cgi-bin/test.cgi #------------------------------------------------------------------------------# BS="$(uname -s)" if [ "${BS}" = FreeBSD ] ; then UMDREHEN="tail -r" elif [ "${BS}" = Linux ] ; then UMDREHEN="tac" fi ### damit awk ein einheitliches Dezimalzeichen verwendet LANG="C.UTF-8" LC_NUMERIC="de_DE.UTF-8" KOMMAzuPUNKT="tr -s ',' '.'" AWK='awk' STARTZEIT="$(date +'%FT%T')" BASE64ZEICHEN='+/0123456789=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz' #==============================================================================# POSTDATEN=$(cat | tr -d '\r') echo "Content-Type: text/html; charset=utf-8 Test

GET- und POST-Test in einer Tabelle

HTTP_REFERER ${HTTP_REFERER}
REQUEST_URI ${REQUEST_URI}
QUERY_STRING ${QUERY_STRING}
POSTDATEN ${POSTDATEN}
" #==============================================================================#
{{ :bilder:1_-_get-_und_post-test_in_einer_tabelle.png?399 |frisch nach dem Start oder wenn man auf die Überschrift "GET- und POST-Test in einer Tabelle" gedrückt hat}} {{ :bilder:2_-_get-_und_post-test_in_einer_tabelle.png?768 |GET: auf den oberen Knopf gedrückt}} {{ :bilder:3_-_get-_und_post-test_in_einer_tabelle.png?618 |POST: auf den unteren Knopf gedrückt}} //Nur bei der Übertragungsmethode "POST" werden keine Zeichen ("''+''", "''/''", "''=''") ins HTML-Format konvertiert! Da diese Zeichen aber Teil des Base64-Zeichensatzes sind, wird deutlich, dass man per GET keinen Base64-Code übertragen kann!// ===== POST-Test mit versteckten Daten ===== //Mit dem untersten Knopf werden versteckte POST-Daten übertragen. In dem oberen Beispiel sind die POST-Daten als Knopfbeschriftung zu sehen, was bei einer größeren Datenmenge unschön ist.// #!/usr/bin/env bash #==============================================================================# # Hiermit kann man Datenübertraun per POST testen. #==============================================================================# # +/0123456789=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz #------------------------------------------------------------------------------# # chown www:www /home/http/cgi-bin/test-post.cgi ; chmod 0770 /home/http/cgi-bin/test-post.cgi #------------------------------------------------------------------------------# BS="$(uname -s)" if [ "${BS}" = FreeBSD ] ; then UMDREHEN="tail -r" elif [ "${BS}" = Linux ] ; then UMDREHEN="tac" fi ### damit awk ein einheitliches Dezimalzeichen verwendet LANG="C.UTF-8" LC_NUMERIC="de_DE.UTF-8" KOMMAzuPUNKT="tr -s ',' '.'" AWK='awk' STARTZEIT="$(date +'%FT%T')" BASE64ZEICHEN='+/0123456789=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz' #==============================================================================# POSTDATEN=$(cat | tr -d '\r') echo "Content-Type: text/html; charset=utf-8 Test

POST-Test mit versteckten Daten

POSTDATEN (Std) ${POSTDATEN}
POSTDATEN (pre)
${POSTDATEN}
" #==============================================================================#
{{ :bilder:1_-_post-test_mit_versteckten_daten.png?366 |Die POST-Daten sind nicht zu sehen...}} {{ :bilder:2_-_post-test_mit_versteckten_daten.png?902 |...und doch werden hier POST-Daten übertragen, die vorher nicht sichtbar waren.}} {{ :bilder:3_-_post-test_mit_versteckten_daten.png?863 |Wenn es mehrere Input-Hidden-Sektionen gibt, dann werden die Schlüssel-Wert-Paare von allen übertragen.}} ==== Hinweise zu POST ====