(Einbindung von Hintergrundbildern mittels veralteter HTML-Technik.)
Erweiterte Möglichkeiten mittels moderner CSS-Formatierung.
Erstellen Sie den Ordner 3_hintergruende (Achtung: alle Dateinamen klein geschrieben; ohne Leerräume und ohne Sonderzeichen)
Verlinkungen in HTML
Tipp: Code-Prüfungen über http://validator.w3.org/ oder http://jigsaw.w3.org/css-validator/
Programmierung in HTML5 !!
(alternativ teilweise auch über Dreamweaver: Datei - überprüfen - W3C
Firefox: Extras - Webentwickler)
a) auf eine zB Webseite: <a href="/http://xy.com">
b) auf eine Datei: <a href="/x.doc">
c) auf einen Anker <a href="/#ankername>
TAG: a (verwendet für Hyperlinks und Anker)
Parameter:
href (Ziel des Hyperlinks): kann eine datei.endung eine URL oder ein #ankername sein
download (die Datei wird nicht angezeigt, sondern downgeloadet)
target (gibt an, in welchem Fenster ein Link geöffnet wird)
Verlinken innerhalb des Dokument (zB zu Überschriften springen) über ANKER:
Anker setzen mit: <a id="ankername">
Anker als Ziel im Hyperlink: <a href="#ankername">
Tipp: Nützen Sie Dreamweaver (Einfügen - benannter Ankerpunkt) und schauen Sie sich den erzeugten HTML-Code an!
https://www.w3schools.com/html/html_links.asp
1. Erstellen Sie den Ordner 2_hyperlinks
2. Erstellen Sie hyperlink_extern.html: durch anklicken der Grafik wird der hinterlegte Link entweder im selben oder in einem neuen Fenster geöffnet. Tipp: target=
3. Speichern Sie folgende Dateien im Verzeichnis 2_hyperlinks (re. Maus - Ziel speichern unter):
Textdatei ZIP-Datei Grafik
4. Erstellen Sie einen Unterordner images in 2_hyperlinks. Speichern Sie dort das Bild der Sonne unter dem Namen sonne.jpg ab.
5. Erstellen Sie hyperlinks.html:
In diesem Dokument ua soll das Verlinken im selben Dokument geübt werden (Stichwort "Anker" bzw. "Textmarke").
Das Testen der Programmierung funktioniert natürlich nur, wenn das Browserfenster so weit verkleinert wird, das man das Springen zum Anker und zurück auch erkennen kann; bei einer Größe wie im Bild links wird nichts passieren.
Ein Blindtext kann über einen Lorem-ipsum-Generator (einfach "googeln") erzeugt und in das Vorschaufenster von Dreamweaver kopiert werden (Achtung: nicht in den Codebereich kopieren, da dann zB p-Tags fehlen). So hat man einen ausreichend langen Text, um an verschiedenen Stellen Anker zu setzen.
Der zweite Teil der Übung besteht darin, zu anderen Dokumenten zu verlinken (siehe vorhergehende Übung).
Ev. müssen fehlende Dateien vorab erstellt werden.
Man beachte dabei die Pfadangabe zu sonne.jpg!
Liegen die Dateien im selben Verzeichnis, so kann über "dateiname.jpg" oder "./dateiname.jpg" darauf zugegriffen werden. Dateien in einem Unterverzeichnis verlinkt man mit "(/)unterverzeichnis/dateiname.jpg" oder "./unterverzeichnis/dateiname.jpg";
Dateien aus einem übergeordneten Verzeichnis werden mit "../dateiname.jpg" verlinkt.
Bedeutung der Abkürzungen:
. = aktuelles Verzeichnis (Ordner)
.. = Verzeichnis oberhalb
damit bedeutet "../../dateiname.jpg" ...?
Wenn Sie ein Mail im Quelltext aufrufen, dann werden Sie erkennen, dass Empfänger, Kopieempfänger (cc), unsichtbarer Kopieempfänger (bcc), Betreff (subject) usw. in einer einzigen Textzeile stehen, jeweils durch Trennzeichen getrennt - Infos dazu. Dies kann in HTML als Link programmiert werden.
Wenn auf "Mail versenden" geclickt wird, soll ein email an einen Empfänger versendet werden. Unter "Carbon Copy versenden" soll das Mail zusätzlich an einen Kopienempfänger verschickt werden und unter "Betreff aufnehmen" soll zusätzlich ein Betreff integriert werden - näheres dazu auf selfhtml.org.
Achtung: das Versenden von Email per mailto funktioniert nur, wenn ein Mailclient (Thunderbird, Outlook ...) eingerichtet ist - nicht über Webmail.
Damit die Mailadresse nicht ausgelesen und für SPAM verwendet wird, sollte in der Praxis NIE ein reines mailto: angegeben, sondern die Adresse getarnt werden, zB: Anzeige einer Grafik mit der Mailadresse, Text: empfaenger AT irgendwo.at, Tarnung der mailto-Adresse mittels Javascript.
Apache vs. IIS, PHP vs. ASP, MYSQL vs. MS-SQL vs. Oracle DB, statische vs. dynamische Seiten,
LAMP, WAMP, XAMPP
Was sind Portable Apps - Sinn?
Welche Browser sind weit verbreitet - für welche gibt es portable-Versions?
Was macht der Browser?
"Installation von XAMPP" um USB-Stick
HTML als Seitenbeschreibungssprache mit Hilfe des Text-Editors;
Verwendung von HTML-Editoren.
ein persönlicher USB-Stick soll für jeden zur Verfügung stehen
Exkurs Webserver: möglich mit Mini-Webserver 2010 (http://www.aidex.de) mit eigenem Favicon oder auf dem Raspberry - der Ablauf einer Anfrage des Browsers an den Webserver wird simuliert. Der Ablauf einer Anfrage an den Webserver, IP und Port soll so ersichtlich werden.
Tipp: eigene IP über die Konsole (command oder cmd) ermittelbar: ipconfig
Neben kostenpflichtigen Produkten (zB Adobe Dreamweaver) kann Gratissoftware genutzt werden, zB:
- Notepad++ (portable Installation möglich) mit folgenden Plugins (unter Menü - PluginAdmin installierbar): HTML Tag, Preview HTML (portable Installation möglich)
- MS Visual Studio Code (nur fixe Installation möglich) mit Plugin: HTML-Preview
- Netbeans (portable Installation möglich)
