Ein sehr einfach zu bedienender Editor für HTML-Dateien ist Kompozer
Download-Seite.
Das Erstellen eigener Internetseiten erfolgt ähnlich dem Erstellen eines Textdokumentes
Es gibt auch einen Kompozer-Kurs mit mehreren Lerneinheiten.
Es wurde daher für SenOtto ein Stylesheet "resize.css" und eine Javascript-Datei "resize.js" bereitgestellt, mit deren Hilfe es relativ einfach möglich ist, einen einheitlichen SenOtto-Seitenstil zu erreichen und das Seiten-Layout (Schrift-Größe, Bilder-Größe) an die Bildschirmgröße anzupassen.
Es wird die .html-Datei angezeigt wie diese in einem Texteditor erscheint.
Kommentiert werden nur jene Zeilen die evtl. geändert werden müssen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
Der im <title> angegebene Text wird im Browser-Kopf bzw. in den Tab-Reitern angezeigt,
<title>Treffpunkt Ottobrunner Senioren</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="de">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1, target-densitydpi=device-dpi" />
<meta name="description" lang="de" content="Senioren Ottobrunn">
<meta name="keywords" lang="de"
content="Senioren,Ottobrunn,Radgruppe,Radfahren,Theatergruppe,Wandergruppe,Wandern,Internet, ... usw, " />
<meta name="DC.Title" content="Senioren Ottobrunn">
<meta name="DC.Subject" content="Senioren Ottobrunn">
<meta name="DC.Description" content="Senioren Ottobrunn">
<meta name="DC.Date" content="2009-11-11">
<meta name="DC.Type" content="Text">
<meta name="DC.Format" content="text/html">
<meta name="DC.Identifier" content="https://www.senotto.de">
<meta name="DC.Source" content="Senioren Ottobrunn">
<meta name="DC.Language" content="de">
Hier wird eine Style-Datei eingefügt, wobei darauf zu achten ist daß die relative Adressierung stimmt.
<link rel="stylesheet" type="text/css" href="../Impressum/resize.css">
Hier werden 2 Javascript-Dateien eingefügt, wobei darauf zu achten ist daß die relative Adressierung stimmt.
<script type="text/javascript" src="../Impressum/browser.js"></script>
<script type="text/javascript" src="../Impressum/resize.js"></script>
Nun kann wahlweise noch ein Javascript-Block eingefügt werden, wenn man in der Seite das eMail-Formular
aufrufen will. Das ist nur sinnvoll, wenn die eMail-Adresse eine Senotto-Adresse ist, also: ????@senotto.de.
Andere eMail-Adressen werden nicht unterstützt, um den Mißbrauch dieser Funktionalität für
Spam-Mails zu verhindern. Beispiel:
<script type="text/javascript">
<!--
function mailForm () {
var Titel = "Nachricht an Peter"; // Formular Überschrift
var mailTo = "_peter_@senotto.de"; // Empfänger eMail-Adresse (erlaubt NUR @senotto.de !!!)
var subject = "Tipps => Senotto-Webseite: Nachricht an Peter"; // Subject
var antwSeite = "https://www.senotto.de/FormMailer/eMailWin.html"; // Antwort-Seite mit Fenster schließen
mailWin (Titel, mailTo, subject, antwSeite);
}
-->
</script>
Im <body>-Tag wird ein Onload-Eventhandler definiert der folgende Javascript-Funktionen startet:
<body onload="resize.ResizeFont(1);resize.ResizeClass('picSize',0.9,0.6);resize.ResizeId('picSize|800|460',0.9,0.6)">
.....
<img class="picSize" src="HausDerSenioren.jpg" alt="HausDerSenioren.jpg" width="800" height="460">
.....
<img id="picSize|800|460" src="anderesBild.jpg" alt="anderesBild.jpg" width="0" height="0">
Da die Beispiel-Seite alleinstehend ist und keine weiteren Links mit verschachtelten Hierarchien besitzt ist keine
<div class="navi">
<a href="Javascript:parent.location.replace(resize.getParentURL())">Tipps_Tricks</a> »
<a href="Javascript:location.replace('../Senotto.html')">Senotto</a> »
Senotto Webseite erstellen
<span class="bookmark"><a href="Javascript:location.replace(resize.getBookmark())">Lesezeichen</a></span>
</div>
Wenn eine Breadcrumb-Navigation angezeigt wurde muß die restliche Anzeige
in einen <div> Block wie folgt gepackt werden:
<div class="disp">
....
Rest der Seite
....
</div>
Der Seitentitel wird mit dem in style.css definierten Senotto-Stil angezeigt:
<h3 class="Seitentitel">
Treffpunkt Ottobrunner Senioren:
</h3>
Seit 1984 ist die ehemalige Villa des Komponisten Ermanno Wolf-Ferrari in der Mozartstraße 68
das Ottobrunner <b>Haus der Senioren</b>:
Der Untertitel wird mit dem in style.css definierten Senotto-Stil angezeigt:
<h3 class="Untertitel">
Unser Treffpunkt vor dem Haus . . .
</h3>
Das Bild wird durch die Angabe class="picSize" an die Bildschirmgröße angepaßt:
<img class="picSize" src="HausDerSenioren.jpg" alt="HausDerSenioren.jpg" width="800" height="460">
Wenn man Auswahlbuttons benötigt um weiter zu verlinken nimmt man folgendes Beispiel:
<a class="button" href="Senotto/Senotto.html"> Senotto Webseite erstellen </a>
<a class="button" href="GoogleMaps/GoogleMaps.html"> Senotto Tourenseite erstellen </a>
<br>
Wenn man die Möglichkeit für Rückfragen anbieten will, gibt es 2 Möglichkeiten:
Fragen an <a href="mailto:isidor@mnet.de"> Isidor </a>
Möglichkeit 2: eMail-Formular anbieten (nur für eMail-Adressen ????@senotto.de),
erfordert den Javascript-Codeblock wie oben beschrieben, Beispiel:
Fragen an <a href="" onclick="mailForm()"> Peter </a>
Als Muster für einen einfachen Tourenbericht eignet sich die Bergwanderung auf den
Hasentalkopf
Fragen an Peter