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.

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
Schrift font size=5
Schrift font size=4
Schrift font size=3
Schrift font size=2
Schrift font size=1

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. 

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
align="center"
dastehen und nicht 
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_
<html>
  <head>
   <meta charset="utf-8">
   <title>Startseite für das Projekt</title>
  </head>
  <body>
   <p align="center">Mein Name<br>Meine Straße<br>Mein Wohnort<br><br>
  </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

nano ~/Bla/scWEB.sh

Den alten Text löschen. Eingabe in den Editor: 

#!/bin/bash

textEIN()
{
if [ $szANZ -eq 0 ]; then
continue
fi
szTR=$(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)
szSch=$(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)
nT=$(cat <<_EOF_
   <p align="$1"><font size="$szSch">$szTR</font></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 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 "*.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=${szCol:: -10}${szCol:5: -6}${szCol:9: -2}
cat > ~/Bla/Web/seiten/page$aNEU.htm <<_EOF_
<html>
  <head>
   <meta charset="utf-8">
   <title>Projekt page$aNEU </title>
  </head>
  <body bgcolor="$szFb">
   <p 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 align="center"><a href="seiten/page$aNEU.htm"><b>Projekt page$aNEU</b></a> <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