Übung 03 ist die erste Übung mit sinnvollem Inhalt, zum Thema Wintersport, und mit Fotos. Die Fotos und der Text können hier heruntergeladen werden: Materialien
Den lokalen Site-Ordner \uebung03 anlegen, ebenso den Foto-Ordner \fotos
Den Materialien_Ordner anlegen (uebung03_materialien) und die Materialien dowloaden und im Materialien-Ordner entpacken
Die Seite index.html erstellen
Die Seite alpin.html erstellen
Die Seite nordisch.thml erstellen
Bei allen drei Seiten passende Titel eintragen
Die Inhalte aus der Textdatei text_inhalt in die drei Seiten kopieren und die Formate zuweisen (sind in Klammern angegeben)
Unterhalb des Textes jeweils die Namen für die Links eintragen: Wintersport | Alpin | Nordisch
Die Verlinkung durchführen, Ziel ist jeweils _self
Die Fotos vorbereiten und einfügen
Die Fotos alpin.jpg, home.jpg und nordisch.jpg in Photoshop öffnen und ihre Größe reduzieren: Breite: 900 px
Die drei bearbeiteten Fotos im Ordner \fotos speichern
Zu DW wechseln und die index.html auswählen
Mauszeiger an den Anfang des ersten Absatzes stellen
Über Einfügen / Foto home.jpg einfügen, bei Alternativtext Wintersport eintragen
Speichern
Zu alpin.html wechseln und das Foto alpin.jpg einfügen
Zu nordisch.html wechseln und nordisch.jpg einfügen
Formatierungen
h1, h2 und p formatieren (nach eigenen Vorstellungen Schriftart, Größe und Farbe festlegen)
Die Hyperlinks formatieren: a a:visited a:hover
Übung 02
In der Übung 02 geht es um die Formatierung der Schriften (Feinlayout). Zum Verständnis der Methode ist der Artikel Zusammenspiel von HTML -und CSS heranzuziehen.
In Übersicht: Die Formatierung der Schriften (Feinlayout) geschieht in einer eigens anzulegenden Datei mit der Endung .css (z. B. kann sie style.css genannt werden). In diese werden die Formatierungen eingetragen, z. B. Überschrift 1 soll grün sein, Überschrift 2 soll rot sein usw.
An jede einzelne HTML-Seite muss das Stylesheet style.css angefügt werden.
Schritte zur Übung 02:
Anlegen der Seite index.html
Einfügen von Text: „Überschrift 1“ (als Überschrift 1 formatieren) Einige Sätze Dummy-Text einfügen „Überschrift 2“ einfügen (als Überschrift 2 formatieren)
Über Datei / Neu ein leeres Stylesheet anlegen
Mit dem Namen style.css speichern
Zur index.html wechseln
Rechts im Eigenschaftsfenster das Symbol für Stylesheet anfügen suchen und aktivieren
Durchsuchen wählen und style.css auwählen, OK und Speichern Die Seite und das Stylesheet sind jetzt verbunden, sobald im Stylesheet ein Format eingetragen wird, wirkt es auf der Seite.
Formatierungen für Überschrift 1 (h1), Absatztext (p) und Überschrift 2 (h2) vornehmen
Im Stylesheet folgenden Text eintragen, in dieser Formatierung mit den Zeilenschaltungen und Einzügen. Dabei unbedingt die Begriffe aus der Liste, die DW automatisch öffnet, mit Enter übernehmen:
Im Windows-Dateiexplorer den lokalen Stammordner für die Übung 01 anlegen: \uebung01
Im Ordner \uebung01 den Unterordner \fotos anlegen
Auf gleicher Ebene wie \uebung01 den Materialien-Ordner anlegen: \uebung01_materialien (Er dient dazu, Materialien für die Website zunächst zu sammeln, z. B. Fotos und Texte. Erst die vorbereiteten Fotos werden später im Ordner \fotos gespeichert.
Adobe Dreamweaver starten
Im Hauptmenü Site / Neue Site wählen
Unter Site-NameÜbung01 eintragen
Unter Lokaler Site-Ordner mit dem Symbol Ordner suchen den Ordner \uebung01 auswählen und bestätigen und Speichern. Jetzt speichert DW automatisch im Ordner \uebung01.
Im Startfenster von DW eine leere HTML-Seite erstellen
Mit Strg+S sofort speichern/Namen vergeben: index.html Es muss darauf geachtet werden, dass die Dateiendung .html auch dort steht.
Text eingeben bzw. kopieren: Willkommen! – Enter für neuen Absatz Ein paar Sätze Dummy-Text einfügen (von der Website blindtextgenerator.com kopieren) – Enter für neuen Absatz
Namen für die Hyperlinks eingeben: Home | Über mich | Kontakt
Willkommen! als Überschrift 1 formatieren: im Eigenschaftsfenster unten links unter Format Überschrift 1 auswählen
In der Symbolleiste unter Titel den Titel der Seite eintragen: Willkommen!
Speichern nicht vergessen.
Die Seite uebermich.html erstellen
Überschrift: eigener Name (als Überschrift 1 formatieren)
Einen Einleitungssatz zu den eigenen Hobbies schreiben
Eine Aufzählung mit einigen Hobbies machen: Im Eigenschaftsfenster unten Ungeordnete Liste wählen und schreiben
Am Ende der Liste mit zweimaligem Enter die Liste beenden und so zum nächsten Absatz gelangen
Ein paar Sätze Dummy-Text einfügen
Die Namen für die Navigation einfügen
Die Seite kontakt.html erstellen
Überschrift: Kontakt
Dann Kontaktdaten einfügen: Name, Strasse, PLZ Ort, Telefon, Email Zwischen Strasse und PLZ Ort kommt eine neue Zeile: Umschalt+Enter, ebenso zwischen Telefon und Email
Schließlich wieder die Namen für die Hyperlinks
Verlinkung der drei Seiten
Mit der Seite index.html beginnen
Das Wort Home exakt markieren
Im Eigenschaftsfenster mit dem Symbol Auf Datei zeigen (Spule) auf die Datei index.html rechts im Dateien-Fenster ziehen und loslassen
Im Eigenschaftsfenster bei Ziel _self einstellen
Über mich markieren und mit der Spule zu uebermich.html ziehen und als Ziel _self auswählen
Schließlich noch Kontakt
Speichern nicht vergessen
Das Gleiche ist mit den zwei weiteren Seiten uebermich.html und kontakt.html zu tun
Online-Publishing
Beim Desktop-Publishing handelt es sich um das Vorbereiten und Veröffentlichen von Inhalten in gedruckter Form. Beim Online-Publishing geht es um die Vorbereitung und Veröffentlichung von Inhalten im Internet (die nach der Veröffentlichung „online“ sind). Veröffentlichen im Internet geschieht beim Posten von Inhalten in sozialen Netzwerken, von Kommentaren zu Artikeln, von Filmen auf Videoplattformen, und beim Gestalten von Websites, wenn sie auf Webservern veröffentlicht (hochgeladen) werden.
Begriffe
WEBSITE
(alle Inhalte, die meist auf einzelne Seiten aufgeteilt sind)
Homepage
index.html (default.html)
eine spezielle HTML-Seite, die aufgrund ihres Namens automatisch ausgeliefert wird, wenn die Adresse einer Website im Webbrowser eingegeben wird; meist als „Begrüßungsseite“ gestaltet
HTML-Seite
schule.html
eine HTML-Seite (mit zusammengehörigem Inhalt)
HTML-Seite
freizeit.html
eine HTML-Seite (mit zusammengehörigem Inhalt)
(die einzelnen Seiten sind miteinander verlinkt)
Webserver
Ein Webserver ist ein Computer,
der ständig mit dem Internet verbunden ist (braucht eine leistungsfähig Anbindung, besonders auch eine hohe Uploadgeschwindigkeit),
der über das Internet erreichbar ist (öffentlich, durch öffentliche und statische (gleichbleibende) IP-Adresse; die IP-Adresse ist die eigentliche Adresse, mit der der Server gefunden wird; vgl. die Postadresse; jede IP-Adresse darf nur einmal weltweit verwendet werden),
der die Inhalte einer Website gespeichert hat (z. B. in Form von einzelnen HTML-Seiten)
und der diese auf Anforderung durch einen Benutzer/eine Benutzerin, auch Client genannt) ausliefert.
Der Client verwendet dafür einen Webbrowser, der die Anforderung nach der Website schickt und die ausgelieferten Inhalte am Bildschirm darstellt. Der Server braucht für dieses Handling auch spezielle Software (Apache-Webserver, MS Internet-Informatons-Server (IIS)).
Das Internet sehr vereinfacht
Der Client (z. B. du) startet auf seinem Laptop den Webbrowser Firefox und gibt in der Adresszeile ein: www.orf.at www.orf.at ist die Domain des ORF. Der Webserver des ORF wird aber mithilfe seiner IP-Adresse gefunden. (Die Domains wurden erfunden, weil man sie sich leichter merken kann als Nummern.)
Es wird als nächstes bei einem Dynamic-Name-Server (DNS-Server) angefragt, welche IP-Adresse der ORF-Server hat. Die DNS-Server kennen alle Domains mit den dazugehörigen IP-Adressen.
Erst jetzt kann die Anfrage nach www.orf.at zum Webserver des ORF geschickt werden. Mitgeschickt wird die eigene IP-Adresse.
Die angeforderte ORF-Seite wird zum Client (der aufgrund der IP-Adresse gefunden wird) geschickt und ist im Webbrowser zu sehen.
Soziale Netzwerke
Soziale Beziehungsnetzwerke
sprechen ein breites Spektrum an Usern an
sind nicht auf ein bestimmtes Thema oder eine bestimmte Zielgruppe festgelegt
Kommunikation, Liken, Teilen von Inhalten, die dem eigenen Interesse entsprechen
dadurch werden die Interessen von Usern nachvollziehbar und Werbung kann danach abgestimmt werden
Beispiel: Facebook
verdrängte das Ende 2005 erschienene deutschsprachige studiVZ (meinVZ, schülerVZ) in Deutschland/Österreich vom ersten Platz
ist nach wie vor die unangefochtene Nummer 1
wird von Firmen auch zum viralen Marketing eingesetzt und dieses funktioniert, sofern die Inhalte hochwertig und authentisch sind
Soziale Bildnetzwerke (Photo-Sharing-Plattformen)
im Fokus stehen Bilder und Videos
Kommentare nur als Beiwerk
Beispiel: Instagram
klar im Mittelpunkt ist das Bild (im Unterschied zu Facebook)
Bildbearbeitungsfunktionen der App
Kategorisierung der Bilder durch Hashtags (# mit folgender Bildbeschreibung)
Marketinginstrument für Unternehmen
Produktplatzierung durch Influencer als Werbemethode
seit 2016 Funktion „Instagram Stories“
2012 von Facebook aufgekauft
Beispiel: Pinterest
Nutzer sammeln auf eigenen Pinwänden Bilder und Beiträge anderer, Möglichkeit der thematischen Strukturierung
Funktion „Folgen“ mit der Möglichkeit, neue Pins im Newsfeed zu erhalten
stark in den Bereichen Mode, Wohnen, Lebensmittel oder Reisen/Tourismus
fungiert als virtuelle Pinwand und nicht sosehr als Kommunikationsmittel
für Firmen Mittel der Kundenbindung und zur Stärkung der eigenen Marke
Beispiel: Snapchat
Image-Messaging-App zum Versand von Fotos und kurzen Videos
die am Smartphone/Tablet gestaltet werden können und sich 10 Sekunden nach dem Abspielen automatisch löschen (mit Trick zu umgehen)
„My-Story-Funktion“ zur Bildung von Geschichten mit chronologisch gereihten Bildern, automatische Löschung nach 24 Stunden
Versenden von Textnachrichten, (Video-)Telefonie
für Marktetingzwecke schwer einsetzbar
Beispiel: Flickr
für Profi- und AmateurfotografInnen
Bilder und Kurzvideos, Verschlagwortung
Kommentierfunktion
Blogging-Netzwerke
Ursprung in der Blogging-Szene
Weiterentwicklung in Richtung sozialer Netzwerke mit der Möglichkeit, Inhalte (News, Links, Bilder, Videos) zu teilen und Folgend-Funktion mit Timeline
Einsehbarkeit aller Inhalte auch für nicht registrierte BenutzerInnen
Beispiel: Twitter
Mikro-Blogging-Dienst mit Texten von maximal 280 Zeichen (ursprünglich 140)
die eigenen Beiträge (Tweets) tauchen chronologisch im eigenen Profil auf, die der Abonnenten („Follower“) im News-Feed
durch das @ können NutzerInnen direkt angesprochen werden, durch # können Beiträge Themen zugeordnet werden
Unternehmer nutzen Twitter zu Marketingzwecken, indem sie durch angehängte Links zu Fotos, Videos oder Netzadressen leiten
Dominanz von Medien-Themen (TV, Internet, Musik)
Beispiel: Tumblr
Blogging-Plattform für Texte in voller Länge und Bilder
Tendenz zur Entwicklung in Richtig soziales Netzwerk, z. B. durch Einführung eines Messengers
Professionelle soziale Netzwerke
zum Austausch zwischen Geschäftspartnern, Mitarbeitern sowie zwischen Bewerbern und Unternehmen (Unternehmen verbieten für diese Zwecke oft die Nutzung von Facebook)
Beispiel: Xing
zum Ausbau des beruflichen Netzwerkes, der Jobsuche und Kontaktverwaltung
Anlaufstelle für Headhunter, AuftraggeberInnen und ArbeitgeberInnen auf der Suche nach MitarbeiterInnen
Beispiel: LinkedIn
zum Auf- und Ausbau des eigenen Netzwerkes
zur Unterstützung bei der Weiterbildung und beruflichen Neuorientierung
als interner Nachrichtendienst und zur Wissensvermittlung durch andere Mitglieder
Soziale Videonetzwerke
Beispiel: Youtube
große Reichweite (6 Milliarden Stunden Videomaterial pro Monat, 100 Stunden pro Minute)
Marketing
Influencer
Vimeo
professionellere und hochwertigere Filmproduktionen
Marketing
Soziale Medien als Marketing-Instrument haben nur Sinn, wenn die Netzwerke eingesetzt werden, die zur Zielgruppe passen.
Nach Inkrafttreten der Datenschutz-Grundverordnung (DSVGO) müssen auch Website-Betreiber auf die Einhaltung der Bestimmungen der DSVGO achten, besonders, wenn von den BesucherInnen personenbezogene Daten erfasst und verarbeitet werden. Die Betreiber müssen in einer Datenschutzerklärung anführen, wo und wie personenbezogene Daten von den BesucherInnen erfasst werden.
Diese sollte folgende Erklärungen enthalten:
Essentiell
Allgemeine Erklärung über das Anliegen des Datenschutzes
Automatische Datenspeicherung: wie und ob der Webserver Besucherdaten speichert (IP-Adresse der BesucherInnen, besuchte Seiten und Unterseiten, Uhrzeit, davor besuchte Website, ob die Site durch eine Suchmaschine gefunden wurde)
Speicherung persönlicher Daten: ob persönliche Daten erfasst werden, z. B. in Kontaktformularen, Kommentaren
Rechte der BesucherInnen: Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung, Datenübertragbarkeit, Widerruf und Widerspruch
TLS-Verschlüsselung mit https: dass die Daten verschlüsselt übertragen werden
Cookies: ob und wie Cookies verwendet werden
Google-Maps Datenschutzerklärung: ob Google-Maps verwendet wird und dass in diesem Fall Daten an Google übertragen werden
Google-Fonts Datenschutzerklärung: ob Google-Fonts verwendet werden und welche Daten in diesem Fall an Google übertragen werden (verwendete Fonts, CSS)
Website-Analyseprogramme
Google-Analytics Datenschutzerklärung: ob mit Google-Analytics Besucherdaten erfasst und verarbeitet werden
andere Analytik-Programme
Social Media
Facebook-Datenschutzerklärung: ob durch das Einbinden von Facebook-Funktionen (Plugins) Daten von BesucherInnen an Facebook übertragen und verarbeitet werden
Das Gleiche gilt für Youtube, Twitter, Instagram, Google+ usw.
Links oben gibt es Schaltflächen für Code, Teilen, Entwurf und Live-Ansicht. Für Standardaktionen ist es nicht notwendig, Code selber zu schreiben. Im Eigenschaftsfenster unten können z. B. die Schriftformate Absatz (p) und die Überschriften (h1, h2, h3, h4, h5, h6) unter Format eingestellt werden.
Dateienfenster
Rechts unten ist das Dateienfenster angedockt. Wenn die Sitedefinition (Site / Neue Site / Site-Namen vergeben, Site-Ordner einstellen) gemacht wurde, werden im Dateienfenster nur die zur Website gehörenden Dateien (HTML, CSS, Fotos) angezeigt. Die Dateien sollen auch hier durch Doppelklick geöffnet werden. Muss eine Datei gelöscht oder umbenannt werden, soll das auch hier gemacht werden. DW kann dann Links, die zu einer umbenannten Datei führen, automatisch korrigieren.
Normalerweise braucht nicht in der Code-Ansicht von Dreamweaver gearbeitet werden und man braucht die TAGs nicht selber schreiben. Die Überschriften (h1, h2, h3, h4, h5, h6) und der Absatz (p) werden z. B. im Eigenschaftsfenster unten unter Formate zugewiesen.
<h> (h1 – h6)
Überschriften auf 6 Ebenen
Jede Überschrift ist eine eigener Absatz, es braucht daher davor und danach kein eigener Absatz eingefügt werden.
<p>
Textabsatz
Ein Absatz ist ein Textabschnitt, der einen Abstand davor und danach hat.
<br>
erzwungener Zeilenumbruch
Ein bloßer Zeilenumbruch erzeugt keinen Abstand wie ein Absatz.
HTML bedeutet Hypertext Markup Language. Es handelt sich dabei um die im World Wide Web verwendete Seitenbeschreibungssprache.
HTML-Dokumente enthalten den Inhalt der Seiten.
HTML-Dokumente sind reine Textfiles (plain-text) und können daher mit jedem beliebigen Texteditor (z. B. der Editor von Windows) erzeugt werden.
Mit HTML kann der Inhalt strukturiert werden, z. B. durch Überschriften unterschiedlicher Ordnung (1-6), Aufzählungen …
Zum Betrachten der HTML-Seiten wird ein sogenannter Browser (=Client), wie z. B. MS Internetexplorer, Firefox, Maxthon benötigt.
Die HTML-Seite muss aber zuvor entweder von einem WWW-Server bereitgestellt werden (z.B. https://unterricht.leo-ertl.space) oder lokal auf einer Festplatte vorliegen (z. B. file:///E:/schule/ai/uebung01/index.html).
HTML-Dokumente bestehen aus einzelnen Elementen, die stets in spitzen Klammern (TAGs) <…> eingeschlossen sind und überwiegend paarweise auftreten. Die Wirkung eines Elementes erstreckt sich nur auf den Text oder die Grafik zwischen den Einzelelementen der paarweise auftretenden Elemente. <h1>Unsere Schule</h1>
Ein HTML-Dokument wird grundsätzlich mit dem Kommando <HTML> begonnen und mit dem Kommando </HTML> abgeschlossen. Im Prinzip besteht ein HTML-Dokument aus zwei Teilen. Im Header (umschlossen von <HEADER> … </HEADER>) wird das Dokument selbst beschrieben und im Body (umschlossen von <BODY> … </BODY>) sein Inhalt. Der HEADER enthält den Titel des Dokuments, der in der Titelleiste des Webbrowsers angezeigt wird, und einige Festlegungen, z. B. zur Zeichencodierung.
Seitenaufbau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HLW Hollabrunn</title>
</head>
<body>
<h1>Die fünfjährige Höhere Lehranstalt </h1>
<p/>Die fünfjährige Lehranstalt für wirtschaftliche Berufe führt zur Matura. … </p>
<h1>Die dreijährige Fachschule</h1>
<p>Die dreijährige Form mündet in die Abschlussprüfung. … </p>
</body>
</html>
Ergibt:
CSS (Cascading Stylesheet)
Mit HTML werden Inhalte strukturiert. Mit CSS wird der strukturierte Inhalt formatiert.
CSS ist eine Stilsprache, die das Aussehen von HTML-Dokumenten (Layout) definiert. Man kann zwei Bereiche unterscheiden:
Feinlayout: CSS kann man z. B. zum festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittener Positionierung und viele andere Sachen benutzen. Kurz: Mit CSS wird der Inhalt einer Seite formatiert.
Groblayout: Ferner wird mit CSS das Groblayout (Anordnung der einzelnen Elemente) einer Seite festgelegt.
Strukturierung: durch Zwischenüberschriften (in HTML)
CSS war eine Revolution im Webdesign. Es brachte viele Vorteile:
Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus; das Layout und die Formate werden in die Style-Sheet-Datei geschrieben; die einzelnen HTML-Seiten bekommen einen Verweis auf die Style-Sheet-Datei (<link rel=”stylesheet” type=”text/css” href=”style/style.css” />)
präzisere Kontrolle über das Layout;
verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck, Smartphone, IPad etc.);
eine Vielzahl von fortgeschrittenen und anspruchsvolle Techniken.
Prinzip CSS
Die Syntax von CSS ist immer die gleiche (hier: die Schriftfarbe für Überschrift 1 wird auf rot eingestellt):
Selektoren stellen die Verbindung zwischen den zentralen Formaten im Head-Bereich oder der externen Datei und den Elementen innerhalb der Seite dar, die formatiert werden sollen. Der Aufbau ist immer gleich: Selektor, geschweifte Klammer auf, Eigenschaft, Wert, geschweifte Klammer zu:
Universal-Selektoren verknüpfen jedes vorhandene Element mit Stylesheetangaben. Wird z. B. die Schrift durch einen Universal-Selektor auf 18 px festgelegt, so ist die Schrift jedes Elementes mit 18 px formatiert.
* {
font-size:14px;
color:#ff0000;
}
2. Typ-Selektoren
Typ-Selektoren verknüpfen einen Elementtyp, also ein HTML-Tag mit einer Formatierung.
h1 {
font-size:14px;
font-style:italic;
}
p {
color:#ff0000;
}
3. Class-Selektoren (Klassen)
Klassen sind Selektoren mit beliebigen Namen.
h1.gerahmt {
border:1px solid #aaaaaa;
}
In diesem Beispiel wir zunächst H1 definiert; dann wird die Klasse h1.gerahmt festgelegt (Rahmen). Wird Sie angewandt, bekommt H1 zusätzlich einen Rahmen: Diese Klasse funktioniert nur in einem H1-Tag.
