zur Übersicht nächste Seite

Programmfenster für Web-Seiten (Teil 3)

Die Ausführungen der vorherigen Seite über 
Programmfenster für Web-Seiten (Teil 2)
werden hier weitergeführt. Diese funktionieren bei Debian 10 Gnome 
und Devuan 2 Gnome und Debian 9 Gnome, 
nicht aber bei Debian 8 (da hier der Rückgabewert des Farbauswahlfensters anders ist).

Wenn man sich auf einfache html-Kenntnisse beschränkt, kann man nicht so viele Darstellungs-Vorgaben bei Webseiten machen. 
Ausrichtungen sind möglich mit align
left
center
right

Schriftgrößen sind in 7 Abstufungen möglich mit size (Standard 3) 
Schrift font size=7
Schrift font size=6 xx-large
Schrift font size=5 x-large
Schrift font size=4 large
Schrift font size=3 medium
Schrift font size=2 small
Schrift font size=1 x-small

Schriftarten kann man zwar benennen, aber jeder Browser kann seine eigene Schriftart dafür auf dem Bildschirm ausgeben. Also ist eine Standardschrift, die nicht genauer bezeichnet zu werden braucht, zunächst ausreichend. Will man umfangreiche Darstellungs-Vorgaben machen so sollte man css verwenden. In HTML5 werden sogar die einfachen html-Bezeichnungen align und size als überholt abgetan. Mobiltelefone mit Bildschirm und dazugehörige Apps drängen sich in den Vordergrund. Aber ein Browser wird auch weiterhin die einfachen html-Bezeichnungen verarbeiten und die Webseite richtig anzeigen. Hier wurden die style-Bezeichnungen benutzt die ganz ähnlich lauten wie align und size.

Jetzt wird das kleine Web-Projekt noch um eine Schriftgrößen-Auswahl erweitert und in einer verbesserten Form aufgeschrieben.
Öffnet man nämlich page001.htm mit gedit so sieht man daß alles in einer Zeile geschrieben wurde. Das macht die Übersicht schwierig. Und die Anführungszeichen sind auf der Strecke geblieben: 
eigentlich sollte
"text-align:center"
dastehen und nicht 
text-align:center

Am besten beginnt man wieder ganz neu indem man dem bestehenden Ordner Web einen anderen Namen gibt, vielleicht Web-Datum. Dann erstellt man die Ordnerstruktur von Ordner Web neu mit

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

Die index.htm wird jetzt in anderer Form erstellt. Zunächst
cat > ~/Bla/Web/index.htm <<_EOF_
<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>Startseite für das Projekt</title>
  </head>
  <body>
   <p style="text-align:center">Mein Name<br>Meine Straße<br>Mein Wohnort<br><br></p>
  </body>
</html>
_EOF_
Dann kann man eine Umlaut-Änderung durchführen
niD=$(cat ~/Bla/Web/index.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')
Dann wird index.htm überschrieben
cat > ~/Bla/Web/index.htm <<_EOF_
$niD
_EOF_
Öffnet man jetzt die index.htm mit gedit oder einem anderen Editor so zeigt sich eine übersichtliche Darstellung mit Anführungszeichen:

Den Browser kümmert diese Formatierung nicht - er richtet sich nach den Tags. 

Nun soll das bash-script in einer verbesserten Form aufgeschrieben werden.
Dabei werden auch Zeilenumbrüche des Textprogramms in Zeilenumbrüche für den Browser übersetzt - auch wenn diese Zeilenumbrüche im Texteingabefenster mit eigenartigen Zeichen angezeigt werden.

nano ~/Bla/scWEB.sh
Den alten Text löschen. Eingabe in den Editor:
#!/bin/bash

textEIN()
{
if [ $szANZ -eq 0 ]; then
continue
fi
szTRR=$(zenity --entry --ok-label "weiter zu Schriftgröße" --title "Texteingabe" --text " Das Zeichen | \n darf nicht vorkommen" --entry-text "gewünschter Text" 2> /dev/null | sed 's|$|<br>|g')
szTR=$(echo $szTRR | sed 's|<br> |<br>|g')
szSzz=$(zenity --scale --ok-label "Einfügen" --title="Schriftgröße" --text=" Einstellung der Schrifthöhe" --min-value=1 --max-value=7 --value=3 2> /dev/null)

if [ $szSzz -eq 1 ]; then
szSch=x-small
elif [ $szSzz -eq 2 ]; then
szSch=small
elif [ $szSzz -eq 3 ]; then
szSch=medium
elif [ $szSzz -eq 4 ]; then
szSch=large
elif [ $szSzz -eq 5 ]; then
szSch=x-large
elif [ $szSzz -eq 6 ]; then
szSch=xx-large
elif [ $szSzz -eq 7 ]; then
szSch=300%
else
exit
fi

nT=$(cat <<_EOF_
   <p style="text-align:$1;font-size:$szSch">$szTR</p>
_EOF_
)
nTT=$(cat ~/Bla/Web/seiten/page$aALT.htm | sed "s|</body>|$nT\n &|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')
cat > ~/Bla/Web/seiten/page$aALT.htm <<_EOF_
$nTT
_EOF_
}
bildEIN()
{
if [ $szANZ -eq 0 ]; then
continue
fi
szB=$(zenity --file-selection --file-filter='*.gif *.jpg' 2> /dev/null)
if [ $? -eq 1 ]; then
exit
else
cp "$szB" ~/Bla/Web/bilder
szBN=$(echo ${szB##*/})
szBREIT=$(convert "$szB" -flatten -format '%w' info: )
szHOCH=$(convert "$szB" -flatten -format '%h' info: )
nT=$(cat <<_EOF_
  <p style="text-align:$1"><img border="0" src="../bilder/$szBN" width="$szBREIT" height="$szHOCH"></p> 
_EOF_
)
nTT=$(cat ~/Bla/Web/seiten/page$aALT.htm | sed "s|</body>|$nT\n &|g")
cat > ~/Bla/Web/seiten/page$aALT.htm <<_EOF_
$nTT
_EOF_
fi
}

szR=101

while [ $szR -ne 106 ]

do

szANZ=$(find ~/Bla/Web/seiten/ -maxdepth 1 -type f -name "page*.htm" | wc -l)
aALT=$(echo "scale=3; $szANZ/1000" | bc -ql | sed 's|\.||g')
aNEU=$(echo "scale=3; ($szANZ+1)/1000" | bc -ql | sed 's|\.||g')
aNEUU=$(echo "scale=3; ($szANZ+2)/1000" | bc -ql | sed 's|\.||g')

if [ $szANZ -eq 0 ]; then
xMES=$(echo "Erst eine neue Seite erstellen")
else
xMES=$(echo "Text oder Bild in page$aALT.htm einfuegen")
fi

xmessage -fn '-*-*-*-r-*--25-0-0-0-p-*-iso8859-1' -title "Web-Seiten-Projekt" -center -buttons "Text links,Text mittig,Bild links,Bild mittig,neue Seite,Fertig" "$xMES"
szR=$?

if [ $szR -eq 105 ]; then
szCol=$(zenity --color-selection --show-palette 2> /dev/null)
if [ $? -eq 1 ]; then
exit
else
szFb=$( printf \#%02X%02X%02X $(echo $szCol | sed 's/rgb(//g' | sed 's/)//g' | sed 's/,/ /g') )
cat > ~/Bla/Web/seiten/page$aNEU.htm <<_EOF_
<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>Projekt page$aNEU </title>
  </head>
  <body style="background-color:$szFb">
   <p style="text-align:left">
    <a href="../index.htm"><b>Übersicht</b></a><br>
    <a href="page$aNEUU.htm"><b>Weiter zu page$aNEUU</b></a>
   </p><br>
  </body>
</html>
_EOF_
niD=$(cat <<_EOF_
   <p style="text-align:center"><a href="seiten/page$aNEU.htm"><b>Projekt page$aNEU</b></a></p> <br>
_EOF_
)
niDD=$(cat ~/Bla/Web/index.htm | sed "s|</body>|$niD\n&|g")
cat > ~/Bla/Web/index.htm <<_EOF_
$niDD
_EOF_
fi

elif [ $szR -eq 101 ]; then
textEIN left

elif [ $szR -eq 102 ]; then
textEIN center

elif [ $szR -eq 103 ]; then
bildEIN left

elif [ $szR -eq 104 ]; then
bildEIN center

else
exit

fi

done
Falls man die alte Datei ~/Bla/scWEB.sh komplett gelöscht hat und wieder neu erstellt hat, muß man diese Datei wieder ausführbar machen (hat man nur den alten Text durch den neuen ersetzt, braucht man das natürlich nicht). Aufrufen kann man das Programm durch
~/Bla/scWEB.sh
Oder über den Programmstarter der auf der vorhergehenden Seite gemacht wurde

zur Übersicht nächste Seite

Datenschutzerklärung
Impressum