1

Übung 03 “Wintersport”

Ü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:

h1{
   font-family:Arial, Helvetica, sans-serif;
   font-size:36px;
   color:red;
}

h2{
  font-family:Arial, Helvetica, sans-serif;
  font-size:26px;
  color:green;
} 

p{
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  color:#000000; 
}
  • Wenn der Text eingetragen ist, speichern.
    Ab jetzt wird der Texte von index.html wie im Stylesheet festgelegt angezeigt.



Übung 01

Das sind die Schritte für Übung 01:
Als weitere Hilfe können die Artikel Adobe Dreamweaver und und Teile von Eine Website programmieren – Schritte heranzgehogen werden.

  • 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.

Vgl. https://www.ionos.at/digitalguide/online-marketing/social-media/die-wichtigsten-social-media-plattformen/




Datenschutzerklärung für Websites nach der DSGVO

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.

Einen Datenschutzgenerator als Hilfe gibt es auf https://www.firmenwebseiten.at/datenschutz-generator/

Man wählt die zutreffenden und somit notwendigen Erklärungen aus und der Generator stellt den Text zusammen.

Beispiele für Datenschutzerklärungen:

www.hlwhollabrunn.ac.at
https://unterricht.ertl.today




Adobe Dreamweaver

Adobe Dreamweaver Codeansicht
Adobe Dreamweaver in der Codeansicht

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.




HTML-Elemente (Tags)

HTML-Elemente zur Text-Strukturierung: Näheres siehe auf http://de.selfhtml.org/html/text/index.htm

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.
  • <em>
    zeichnet einen Text als betont aus
  • <strong>
    zeichnet einen Text als stark betont aus
  • <b>
    zeichnet einen Text als fett aus
  • <i>
    zeichnet einen Text als kursiv aus
  • <u>
    zeichnet einen Text als unterstrichen aus
  • <sup>
    zeichnet einen Text als hochgestellt aus
  • <sub>
    zeichnet einen Text als tiefergestellt aus
  • <div>
    damit wird ein Block (Box) erzeugt

Eine umfassende Liste aller HTML-Tags findest Du auf https://wiki.selfhtml.org/wiki/Referenz:HTML




Zusammenspiel von HTML und CSS

HTML

  • 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>

Häufig verwendete TAGs: Hier

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.

Grob- und Feinlayout einer Webseite

Groblayout: Boxen (kopf, navigation, inhalt, news, fuss)

Feinlayout: Titel “Die Bienen” (Myriad Pro, 58 pt, Blau), Zwischenüberschriften: Allgemein (Myriad Pro, 26 pt, Schwarz), Absatztext (Myriad Pro, 26 pt, Schwarz, normal) …

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
Prinzip CSS

Die Syntax von CSS ist immer die gleiche (hier: die Schriftfarbe für Überschrift 1 wird auf rot eingestellt):

Syntax CSS
Syntax

Selektor {Eigenschaft: Wert;}

h1 {
   color: #FF0000;}



Selektorenarten

Syntax von Selektoren || (1) Universal-Selektoren || (2) Typ-Selektoren || (3) Class-Selektoren (Klassen) || (4) ID-Selektoren

Syntax (Schreibweise)

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:

Selektor {Eigenschaft:Wert;}

Selektor{
   Eigenschaft1: Wert;
   Eigenschaft2: Wert;

   ...

}

1. Universal-Selektoren

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.

.gerahmt {
   border:1px solid #aaaaaa;
}

.einfachertext {
   font-size:14px;
}

Diese zwei Klassen in jedem Tag, weil vor dem Punkt (.) kein Tag angegeben ist.

4. ID-Selektoren

ID-Selektoren verknüpfen Elemente über das ID-Attribut mit einer Formatierung. ID-Selektoren beginnen mit einer # (Raute).

div#kopfbereich {
   position:absolute;
   top:100px; left:100px;
   width:120px; height:80px;
   background-color:#000;
}

div#inhaltsbereich {
   position:absolute;
   top:150px; left:300px;
   width:120px; height:80px;
   border: 6px red solid;
}

Damit werden zwei Bereiche (Boxen) erzeugt, die mit Inhalten gefüllt werden können. Ihre Eigenschaften sind:

  • position (die Art wie ihre Position am Bildschirm festgelegt wird)
  • top (Abstand vom oberen Bildschirmrand)
  • left (Abstand vom linken Bildschirmrand)
  • width (Breite der Box)
  • height (Höhe der Box)
  • background-color (Hintergrundfarbe)
  • border (Rahmen um die Box)