zur Übersicht

nächste Seite


Programmfenster für Web-Seiten (Teil 1)

Die Ausführungen der vorherigen Seiten über Programmfenster werden hier weitergeführt.
Generell gilt bei den weißen Textstellen auf dieser Seite: Man fügt die Zeichenfolge aus dem weißen Feld bei dem blinkenden Cursor des Terminals ein - dann drückt man die Eingabetaste. 
Oder man fügt die Zeichenfolge aus dem weißen Feld bei dem blinkenden Cursor des Editors ein.  
Dann drückt man zum Abspeichern gleichzeitig Strg und O 
dann drückt man die Eingabetaste um den Dateinamen zu bestätigen 
dann drückt man zum Verlassen des Editors gleichzeitig Strg und X.


Es soll ein kleines Projekt gezeigt werden um Web-Seiten zu erstellen. Es bietet nur wenig Funktionalität - aber es gibt auch genügend Software in diesem Bereich. Man kann sich jedoch ein wenig ansehen wie man mit dem Terminal und Web-Seiten umgehen kann.
Zunächst erstellt man einen Ordner ~/Bla/Web in dem das Projekt abgelegt wird mit Unterordnern
seiten (in denen Einzelseiten abgelegt werden)
bilder (in denen Bild-Dateien abgelegt werden)

mkdir -p ~/Bla/Web/{seiten,bilder}


In der Regel wird in ~/Bla/Web eine Datei index.htm abgelegt, die als Startseite für das ganze Projekt dient (später). Jetzt wird eine erste Seite erzeugt.

echo "<html>
<head>
<title>
Projekt
</title>
</head>

<body>
Über mögliche Änderungen nachdenken.
<br>Dieser Text ist im Browser-Fenster zu sehen.
</body>
</html>" > ~/Bla/Web/seiten/page001.htm

Nun kann man diese erste Seite im firefox-Browser (oder einem anderen Browser) öffnen, entweder mit
firefox ~/Bla/Web/seiten/page001.htm
oder durch Doppelklick auf die Datei


Einfach ausgedrückt ist eine Web-Seite nur eine Text-Datei, die dem Browser Anweisungen gibt. Diese Anweisungen werden durch die Klammern-Objekte <...> erteilt, die man Tags nennt. In der Regel gibt es ein Anfangs-Tag <...> und ein End-Tag </...> und alles was dazwischen steht ist von der Anweisung dieses Tags betroffen.

Die Tatsache, daß es sich um eine Web-Seite handelt ist eine Anweisung, die durch die Tags <html> und </html> erteilt wird. Deshalb muß am Anfang der Textdatei <html> und am Ende der Textdatei </html> stehen.

Die Tags <head> und </head> schließen einen Bereich ein, der im Browser-Fenster nicht zu sehen ist. Die Anweisung <title> und </title> umschließt den Text der in der Titelzeile des Browsers zu sehen ist und der in der Liste der bereits besuchten Web-Seiten angezeigt wird.

Die Tags <body> und </body> schließen den Bereich ein, der im Browser-Fenster sichtbar ist.
Der Tag <br> erzeugt einen Zeilenumbruch und benötigt kein End-Tag.

Man sieht daß die Umlaute nicht so dargestellt werden wie man sich das wünscht. Umlaute (und ß) sollten auf Webseiten in folgender Form geschrieben werden
Ü   &Uuml;
Ä   &Auml;
Ö   &Ouml;
ü   &uuml;
ä   &auml;
ö   &ouml;
ß   &szlig;

Also muß man ein wenig über Zeichenänderungen im Terminal wissen. Hier einige wenige Infos zum Programm sed

Zeichenfolge bearbeiten

Es gibt das Programm   sed   das oft in der Form aufgerufen wird


Dabei steht das s für substitute und das g bewirkt daß jede Stelle mit 'alter Text' bearbeitet wird - ohne g  wird nur das erste Auftreten von 'alter Text' in jeder Zeile bearbeitet. Man definiert die Variable
sA=123456789AbC987654321

Möchte man ein spezielles Zeichen löschen, hier b 

echo $sA | sed 's/b//g'

123456789AC987654321

Jedes vorkommende b wird damit gelöscht. Möchte man ein spezielles Zeichen durch ein anderes ersetzen, hier b durch Z

echo $sA | sed 's/b/Z/g'

123456789AZC987654321

anderes Beispiel

echo $sA | sed 's/AbC/XYX/g'
123456789XYX987654321

Löschen aller Zahlen von 4 bis 9
echo $sA | sed 's/[4-9]//g'

123AbC321

Definiert man jetzt die Variable
gG=/Bla/Web/seiten/page001.htm

und man möchte / durch \ ersetzen, so muß man beide Zeichen maskieren (mit dem Funktionszeichen \ in ein normales Textzeichen verwandeln), also  \/ durch \\ ersetzen, was zu folgendem Ausdruck führt
echo $gG | sed 's/\//\\/g'
\Bla\Web\seiten\page001.htm

Der Ausdruck bei sed ist sehr unübersichtlich. Man kann die Trennzeichen bei sed anders wählen um eine bessere Lesbarkeit zu erreichen
echo $gG | sed 's:\/:\\:g'
echo $gG | sed 's|\/|\\|g'
echo $gG | sed 's#\/#\\#g'
führt zum gleichen Ergebnis

Die Tatsache daß bei den End-Tag-Elementen der html-Notation auch / als Zeichen auftritt (und es auch noch in den Pfadangaben vorkommt) legt es dringend nahe das Trennzeichen bei sed zu ändern - es wurde | gewählt, 
denn : kann im body-Text vorkommen 
und # erscheint bei Farb-Codes. 

Auch der Punkt hat eine Sonderbedeutung. Man muß ihn entweder maskieren oder als Zeichenklasse definieren
sed 's|\.||g' 
sed 's|[.]||g'

Nach dem Buchstaben A einen Zeilenumbruch machen

echo $sA | sed 's|A|&\n|g'

123456789A
bC987654321

Damit kann man nun Umlaute ersetzen. Das letzte Beispiel mit dem Zeilenumbruch hat gezeigt daß das Zeichen & eine Funktion hat. Daher muß man alle vorkommenden & im Terminal maskieren die Umlaute-Bezeichnungen für die Web-Seite betreffen. Es wird zum Verdeutlichen eine Variable definiert

szUMLAUTE=äüöÄÜÖß

echo $szUMLAUTE
äüöÄÜÖß

Nun führt man eine Ersetzung durch 

echo $szUMLAUTE | sed 's|ü|\&uuml;|g' | sed 's|ä|\&auml;|g' | sed 's|ö|\&ouml;|g' | sed 's|Ü|\&Uuml;|g' | sed 's|Ä|\&Auml;|g' | sed 's|Ö|\&Ouml;|g' | sed 's|ß|\&szlig;|g'

&auml;&uuml;&ouml;&Auml;&Uuml;&Ouml;&szlig;

Diese ''eigenartigen'' Zeichenfolgen werden durch den Browser dann wieder in die Umlaute übersetzt. Im Terminal kann man den Text von page001.htm wieder aufrufen durch

cat ~/Bla/Web/seiten/page001.htm
<html>
<head>
<title>
Projekt
</title>
</head>

<body>
Über mögliche Änderungen nachdenken.
<br>Dieser Text ist im Browser-Fenster zu sehen.
</body>
</html>

Nun definiert man eine Variable mit den Änderungen

nN=$(cat ~/Bla/Web/seiten/page001.htm | sed 's|ü|\&uuml;|g' | sed 's|ä|\&auml;|g' | sed 's|ö|\&ouml;|g' | sed 's|Ü|\&Uuml;|g' | sed 's|Ä|\&Auml;|g' | sed 's|Ö|\&Ouml;|g' | sed 's|ß|\&szlig;|g')

und überschreibt die page001

echo $nN > ~/Bla/Web/seiten/page001.htm

Wählt man jetzt im Browser bei der page001.htm 
Aktuelle Seite neu laden
so ist alles so wie es sein sollte.


Mit " statt ' bei sed kann man auch Variablen verwenden.
Weitere Variable 

N="<br>"

echo $sA | sed "s|AbC|$N|g"
123456789<br>987654321

Eine weitere besondere Funktion hat das Zeichen  &   noch in der Ersetzungszeichenkette. Die Zeichenkette   alter Text   wird nicht ersetzt, sondern ergänzt: nach & stehende Zeichen werden hinten angefügt, vor & stehende Zeichen werden davor gesetzt.

echo $gG | sed "s|seiten|$N&$sA|g"

/Bla/Web/<br>seiten123456789AbC987654321/page001.htm

Die Tags werden auf der Web-Seite nicht angezeigt, sie dienen nur als Anweisungen für den Browser. Möchte man diese auf der Web-Seite sichtbar machen (etwa für Erläuterungen) so muß man verwenden
<   &lt;
>   &gt;
&   &amp;

Will man den <body>-Bereich mit weiterem Text ergänzen so schreibt man diesen Text in eine Variable (allerdings darf der eingefügte Text das Zeichen | nicht enthalten, da es sonst mit dem gewählten Trennzeichen von sed in Konflikt geraten würde und im Text vorkommendes & muß maskiert werden). 

nT=$(echo "<br>üÄö<br>Man erreicht mit<br>\&lt;br\&gt;<br>einen Zeilenumbruch")

Dann bildet man eine weitere Variable die den alten Text aufnimmt und mit der Ergänzung kombiniert (Umlaut-Änderungen nicht vergessen)

nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|$nT&|g" | sed 's|ü|\&uuml;|g' | sed 's|ä|\&auml;|g' | sed 's|ö|\&ouml;|g' | sed 's|Ü|\&Uuml;|g' | sed 's|Ä|\&Auml;|g' | sed 's|Ö|\&Ouml;|g' | sed 's|ß|\&szlig;|g')

Dann wird page001.htm überschrieben

echo $nTT > ~/Bla/Web/seiten/page001.htm

Wählt man jetzt im Browser bei der page001.htm
Aktuelle Seite neu laden
so sieht man den ergänzten Text. 


Nun soll ein Bild auf page001 eingefügt werden. Da für Web-Seiten die Bildformate .gif und .jpg dringend zu empfehlen sind wurden nur diese beiden Formate zur Auswahl zugelassen. Rückgabewert für folgendes Fenster 

szB=$(zenity --file-selection --file-filter='*.gif *.jpg' 2> /dev/null); echo $szB

/home/abc/Bla/Nur/BlaBla/Oder/bsp55r.gif

Hier wurde ein Bild ausgewählt das auf der Seite
Debian Gnome ImageMagick GIF
erzeugt wurde. Sie haben wahrscheinlich ein anderes Bild gewählt.
Nun soll dieses Bild in den Ordner
~/Bla/Web/bilder
kopiert werden. 

cp "$szB" ~/Bla/Web/bilder

Die Verlinkung des Bildes auf der Seite page001.htm muß aber mit relativen Pfaden erfolgen, denn nach Übertragung des kompletten Inhaltes des Ordners ~/Bla/Web auf einen Server gibt es keine Ordner Bla oder Web mehr und schon gar keinen Persönlicher Ordner. Also braucht man zunächst den Namen der Bild-Datei. Dazu wird der Name vom Pfad getrennt

szBN=$(echo ${szB##*/}); echo $szBN

bsp55r.gif

und man braucht die Bildgröße. Dazu verwendet man ImageMagick

szBREIT=$(convert "$szB" -flatten -format '%w' info: ); echo $szBREIT
30

szHOCH=$(convert "$szB" -flatten -format '%h' info: ); echo $szHOCH
30

Dann schreibt man den html-code für ein Bild

nT=$(echo "<p align="left"><img border="0" src="../bilder/$szBN" width="$szBREIT" height="$szHOCH"></p>")

Dann bildet man eine weitere Variable die den alten Text aufnimmt und mit der Ergänzung kombiniert (Umlaut-Änderungen braucht man an dieser Stelle nicht)

nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|$nT&|g")

Dann wird page001.htm überschrieben

echo $nTT > ~/Bla/Web/seiten/page001.htm

Wählt man jetzt im Browser bei der page001.htm
Aktuelle Seite neu laden
so sieht man das eingefügte Bild. 



  


Nun kann man schon ein kleines Script schreiben: 

nano ~/Bla/scWEB.sh

Eingabe in den Editor: 

#!/bin/bash

szR=101

while [ $szR -ne 105 ]

do

xmessage -fn '-*-*-*-r-*--25-0-0-0-p-*-iso8859-1' -title "Web-Seiten-Projekt" -center -buttons "Text links,Text mittig,Bild links,Bild mittig,Fertig" "Text oder Bild in page001.htm einfuegen"
szR=$?

if [ $szR -eq 101 ]; then
szTR=$(zenity --entry --ok-label "Einfügen" --title "Texteingabe" --text " Das Zeichen | \n darf nicht vorkommen" --entry-text "gewünschter Text" 2> /dev/null)
nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|<p align="left">$szTR</p>&|g" | sed 's|ü|\&uuml;|g' | sed 's|ä|\&auml;|g' | sed 's|ö|\&ouml;|g' | sed 's|Ü|\&Uuml;|g' | sed 's|Ä|\&Auml;|g' | sed 's|Ö|\&Ouml;|g' | sed 's|ß|\&szlig;|g')
echo $nTT > ~/Bla/Web/seiten/page001.htm

elif [ $szR -eq 102 ]; then
szTR=$(zenity --entry --ok-label "Einfügen" --title "Texteingabe" --text " Das Zeichen | \n darf nicht vorkommen" --entry-text "gewünschter Text" 2> /dev/null)
nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|<p align="center">$szTR</p>&|g" | sed 's|ü|\&uuml;|g' | sed 's|ä|\&auml;|g' | sed 's|ö|\&ouml;|g' | sed 's|Ü|\&Uuml;|g' | sed 's|Ä|\&Auml;|g' | sed 's|Ö|\&Ouml;|g' | sed 's|ß|\&szlig;|g')
echo $nTT > ~/Bla/Web/seiten/page001.htm

elif [ $szR -eq 103 ]; then
szB=$(zenity --file-selection --file-filter='*.gif *.jpg' 2> /dev/null)
cp "$szB" ~/Bla/Web/bilder
szBN=$(echo ${szB##*/})
szBREIT=$(convert "$szB" -flatten -format '%w' info: )
szHOCH=$(convert "$szB" -flatten -format '%h' info: )
nT=$(echo "<p align="left"><img border="0" src="../bilder/$szBN" width="$szBREIT" height="$szHOCH"></p>")
nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|$nT&|g")
echo $nTT > ~/Bla/Web/seiten/page001.htm

elif [ $szR -eq 104 ]; then
szB=$(zenity --file-selection --file-filter='*.gif *.jpg' 2> /dev/null)
cp "$szB" ~/Bla/Web/bilder
szBN=$(echo ${szB##*/})
szBREIT=$(convert "$szB" -flatten -format '%w' info: )
szHOCH=$(convert "$szB" -flatten -format '%h' info: )
nT=$(echo "<p align="center"><img border="0" src="../bilder/$szBN" width="$szBREIT" height="$szHOCH"></p>")
nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|$nT&|g")
echo $nTT > ~/Bla/Web/seiten/page001.htm

else
exit

fi

done

Alle oben beschriebenen Kommandos wurden hier den Schaltflächen von xmessage zugeordnet und schließlich alles in eine while-Schleife gepackt, damit xmessage gleich wieder seine Schaltflächenauswahl präsentiert. -ne 105 bedeuted, daß die Schaltfläche  Fertig  NICHT gedrückt wurde (ungleich 105). Und damit die while-Schleife starten kann wurde irgendein Anfangswert ungleich 105 an den Anfang gesetzt.
Nun muß man das Programm ausführbar machen 

chmod +x ~/Bla/scWEB.sh

Aufruf des Programmes 

~/Bla/scWEB.sh

Die Zeichen | und & dürfen bei der Text-Einfügung nicht verwendet werden da es sonst zu einem Konflikt mit sed kommt. Man könnte nachträglich die Webseite mit einem Texteditor, z.B. gedit, öffnen und diese Zeichen einfügen.

Auf der nächsten Seite wird das Projekt zum Erstellen von Webseiten weitergeführt. 

zur Übersicht

nächste Seite