My personal Wiki

My personal Wiki

Site Tools

You are here: Wiki » Kurse » HTML-Kurs

Table of Contents

HTML-Kurs

Einleitung

Kursbeschreibung

Ziel

  • praktisch: Erstellung eigener HTML-Seiten
  • theoretisch: Grundverständnis für die Hyper Text Markup Language (HTML) und Cascading Style Sheets (CSS)

Voraussetzung:

Interesse, sich (ohne Führung durch einen - grafischen - HTML-Editor) mit der Syntax auseinander zu setzen, die ein Webbrowser zur korrekten Wiedergabe eines gewünschten Inhalts und zur Erfüllung von web-spezifischen Funktionen braucht.

Programm

  • HTML: Grundlagen, Syntax, Struktur, Sonderzeichen, Kommentare
  • HTML: Grundlegende Elemente: Absätze, Links, div-Tag
  • HTML: Bilder einfügen
  • CSS-Grundlagen: Syntax, span-Tag, style-Parameter, Selektoren, style-Tag
  • HTML-Attribute: IDs und Klassen
  • CSS: Selektoren Teil 2, Farbangaben, Hintergrundfarben, -bilder und -verläufe
  • CSS: Links stylen, Pseudoklassen
  • CSS: Schriftgestaltung, Größeneinheiten, Selektoren Teil 3, Webfonts
  • HTML: Listen, Tabellen
  • CSS: Box-Modell, Rahmen, Innen- und Außenabstände, Positionierung, Floats
  • HTML: Semantische Blockelemente
  • CSS: Sichtbarkeit, Transformationen, Transitionen, Animationen
  • Javascript: Kurze Einführung bei Bedarf

Was ist HTML

HTML ist die Abkürzung für HyperTextMarkupLanguage. Sie beschreibt die logischen Elemente eines Dokuments. Darunter sind sowohl sichtbare Elemente wie Überschriften, Textabsätze, Listen, Tabellen oder eingebundene Grafik zu verstehen als auch solche zur Herstellung bestimmter Funktionalitäten wie Titelanzeige durch Browser oder unsichtbare Elemente für Durchsuchbarkeit, Programmierbarkeit etc.

Die Funktionalität der Elemente wird durch Attribute erweitert, mit denen der Autor eines HTML-Dokuments insbesondere das Aussehen einer Seite bzw. das der verwendeten Elemente beeinflussen kann.

Die Sprache beinhaltet eine bestimmte Syntax = Sprachregeln, die zur korrekten Interpretation durch den Browser genau eingehalten werden muss.

HTML-Seiten schreiben

  • das geht mit jedem Texteditor; Datei muss als *.html abgespeichert werden;
  • anders als bei Textverarbeitungsprogrammen gibt es für HTML einheitliche Formatierungselemente, sogenannte Tags, die jeder beliebige Browser versteht, auch unabhängig davon, welches Betriebssystem (Windows, MacOS, Linux) läuft;
  • jedes Tag steht in < spitzen > Klammern; Tags bestehen aus <, dem Tag-Namen, optionalen Attributen und dem schließenden > und haben fast immer ein Ende-Tag, das besteht aus <, /, dem Tag-Namen und >.
    Beispiele: <p>…</p> oder <div class="bla" onmouseover="blubb()">…</div>

grundlegende Elemente einer Html-Seite

Struktur einer HTML-Datei

<!DOCTYPE html>
<html>
  <head>
    <title>Struktur einer HTML-Datei</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Eine Überschrift</h1>
    <p>Ein Absatz als noch ein Beispiel für ein Strukturelement!</p>
    <!-- Ein Kommentar, der nicht angezeigt wird -->
  </body>
</html>

Syntax für Sonderzeichen

HTML-Sonderzeichen beginnen mit einem & und enden mit ;

Notwendig sind nur noch

  • spitze Klammern < &lt; und > &gt;
  • kaufmännisches Und & &amp;

Für XML-Kompatibilität müssen auch diese Zeichen im Text durch Entitäten ersetzt werden:

  • einfache Anführungszeichen ' &apos;
  • doppelte Anführungszeichen " &quot;

Nützlich sind außerdem noch:

  • geschütztes Leerzeichen &nbsp;
  • bedingter Trennstrich &shy;

Viele andere Zeichen kann man per Tastatur eingeben oder sie werden sehr selten gebraucht.

Blockelemente

Absätze und Verwandte

Allgemein

  • Paragraph <p>
  • Division <div>

Speziell

  • Article <article>
  • Aside <aside>
  • Footer <footer>
  • Header <header>
  • Navigation <nav>
  • Section <section>
  • Preformatted <pre>
  • Blockquote <blockquote>
  • Address <address>

Helfer-Tags

  • Line Break <br>
  • Horizontal Ruler <hr>

Listen

Ungeordnete Liste: 

      <ul>
        <li>Inhalt</li>
      </ul>

Ungeordnete Liste geschachtelt:

  • Erster Listenpunkt obere Ebene:
    • Listenpunkt zweite Ebene
    • noch einer
    • und noch einer
  • wieder obere Ebene

Sortierte Liste: 

      <ol>
        <li>Inhalt</li>
      </ol>

Tabellen

<table>
<caption>Hier steht die optionale Tabellenbeschriftung (Caption)</caption>
<tr><th>Spaltenüberschrift Spalte 1</th><th>Spaltenüberschrift Spalte 1</th></tr>
<tr>
<td>Reihe 1, Zelle 1</td>
<td>Reihe 1, Zelle 2</td>
</tr>
<tr>
<td>Reihe 2, Zelle 1</td>
<td>Reihe 2, Zelle 2</td>
</tr>
</table>
<br>
 
<br>
<table>
<tr>
<td></td>
<td>Reihe 1, Zelle 2</td>
</tr>
<tr>
<td>Reihe 1, Zelle 1</td>
<td>&nbsp;</td>
</tr>
</table>

In-Line-Elemente (alles, was keinen Block generiert)

Einfache Zeichenformatierung

Unterschieden wird zwischen:

  • Physischer Textauszeichnung wie hochgestellt (sup), tiefgestellt (sub)
  • Logischer Textauszeichnung wie betont (em), stark betont (strong), Quellcode (code), Akronym (abbr)

Zeichenformatierung mit "span"-Tag

(siehe Style-Sheet-Syntax)

Bilder einbinden

<img src="1_09a.jpg" border="0" alt="Wolkenwasserfall">

Verweise: verknüpft zum WWW

Die 'Hyperlinks', sind anklickbare Bereiche (Text oder Bild) in HTML-Seiten, die andere Dateien aufrufen. Sie realisieren also über Textstelle, Dokument, Rechner und Ländergrenzen hinaus gehende Verbindungen zu den verschiedenster Dateitypen (*.html, *.txt, *.gif o.ä.). Sie machen aus einen Haufen Dateien auf den entferntesten Rechnern erst ein Netz, ein WWW und ermöglichen die Auswahl, was man sich anschauen will.

Sie sind die Basis jeglicher 'Navigation' im Web. Und sie sind Ursache des schönen 'Chaos', wo man sich nach Gusto der Web-Autoren von einer Web-Seite zur nächsten, von hier nach dort und anderswo hangeln kann, ohne das zu finden, was man sucht.

Diese Verweise werden mit dem Anker-Tag in eine Seite eingebunden. Andere Tags (siehe Multimedia), das IMG-Tag für Bildern, außerdem AUDIO-, VIDEO- und OBJECT-Tag zum Einbinden von anderen Multimedia-Dateien stellen weitere Möglichkeiten zur Verknüpfung von verschiedenen Dateien dar. Sie dienen zum Anzeigen von Dateien innerhalb einer Web-Seite.

All diesen Tags ist gemeinsam, das sie eine "Adresse" für eine Datei enthalten müssen, damit diese im Web lokalisiert werden kann; außerdem ist die Information wichtig, wie die Daten der Datei übertragen werden, d.h. welches Übertragungsprotokoll verwendet wird.

Deshalb wird an dieser Stelle zuerst das Thema Adressierungen behandelt, das für alle oben genannten Tags relevant ist.

Im Folgenden geht es dann um die zwei Arten von Hyperlinks, d.h. Verweisen, die beide mit dem Anker-Tag <a></a> in eine HTML-Seite eingebunden werden, um:

  • Verweise zu anderen Dokumenten, die ich im folgenden Links nenne
  • Verweise innerhalb eines Dokuments, die ich im folgenden Sprünge nenne

Adressierung

Die im folgenden erläuterten Regeln werden nicht nur beim Einbinden von Links für das Attribut href (Hyper Reference) gebraucht, sondern auch zum Einbinden von Bildern, Sounds und anderen Multimedia-Dateien.

Webadresse oder URL im WWW

Beispiel: http://members.xoom.com/bachmidi/bachmidi.html

Eine Webadresse oder URL (Uniform Resource Locator) setzt sich aus folgenden Bestandteilen zusammen:

  1. Protokoll z.B. http://, ftp://
  2. Servername z.B. www.tuhh.de oder www.google.de oder www.yahoo.com
  3. Wurzelverzeichnis des Servers, gekennzeichnet durch Schrägstrich '/' nach dem Servernamen
  4. Pfadname von beliebiger Tiefe Verzeichnis1/Verzeichnis2/
  5. Datei *.* im Verzeichnis, z.B. *.html, *.php, …
  6. Parameter zum Dateinamen (optional):
    Sprungmarke zu Stelle im Html-Dokument, z.B. info.htm#Wetter oder info.htm#News
    Werte für serverseitiges Programm, z.B. Verzeichnis.php?match="Schmidt+Hans"&query="adress+tel"
Unterschiede

Eine Webadresse entspricht in etwa Dateiangabe mit Angabe des gesamten Pfades mit folgenden Unterschieden:

  • bei Web-Adressen steht Protokoll und Servername an Stelle der lokalen Laufwerksbezeichnung
  • bei Adressen in HTML ist der Schrägstrich '/' das Trennzeichen
    bei Windows in der Dateistruktur und damit bei Betriebssystembefehlen ist der Gegenschrägstrich '\' das Trennzeichen
  • bei Web-Adressen ist der Punkt Trennzeichen innerhalb des Servernamens und vor der Dateiendung,
    in der Dateistruktur und damit bei Betriebssystembefehlen gilt nur der letzte Punkt als Trennzeichen vor der Dateiendung
  • bei Web-Adressen ist je nach Art des Parameters das Trennzeichen verschieden:
    • Fragezeichen '?' bei einem Parameter für serverseitiges Programm, weitere Parameter werden mit '&' getrennt
    • Nummernzeichen '#' bei Parameter für Sprungangabe;
absolute und relative Adressierung

Benutzt man die volle Webadresse http://servername/ … Pfadangabe … /Dateiname.htm spricht man von einer absoluten Adresse. Diese muss man für Links zu Seiten auf anderen Servern benutzen. Bei der Herstellung von Web-Seiten ergibt sich aber ein Problem.

Die Referenz eines Links heißt auf dem Arbeitsplatzrechner z.B. href="c:/Eigene Dateien/homepage/author/aboutme.htm", auf einem WWW-Server dagegen z.B. http://www.Neuland.de/Privatleute/ChristelsHome/author/aboutme.htm Bevor man die Seiten ins Web stellt, müssten alle diese absoluten Adressen geändert werden. Das vermeidet man durch sogenannte relative Adressen.

Bei der relativen Adressierung gelten folgende Regeln:

  • Dateiname.* ohne Pfadangabe oder ./Dateiname.* heisst, die Datei wird im aktuellen Verzeichnis gesucht
  • Verzeichnisname/Dateiname.* heißt, die Datei wird in dem dem aktuellen Verzeichnis untergeordneten Verzeichnis mit dem angegeben Namen gesucht
  • Pfadangabe ersetzt durch ../ heißt, die Datei wird im nächst höheren Verzeichnis gesucht
  • Kombinationen sind zulässig z.B. die Angaben ../../x-ordner/y-ordner/any.*
  • nachfolgendes Nummernzeichen # wie z.B aboutme.htm#Photo heißt, es wird die Datei gesucht und in ihr ein bestimmtes Sprungziel;
  • vorausstehendes Nummernzeichen # (ohne Dateiname) wie z.B #Photo heißt, das Ziel ist ein Sprungziel und wird innerhalb der aktuellen HTML-Seite gesucht;

Beispiel: Verzeichnisstruktur c:\Eigene Dateien\homepage\index.htm c:\Eigene Dateien\homepage\author\aboutme.htm c:\Eigene Dateien\homepage\author\hobby.htm c:\Eigene Dateien\homepage\bild\logo.gif Steht die gesuchte Seite hobby.htm wie im Beispiel im gleichen Verzeichnis wie die Seite aboutme.htm mit dem Link, genügt href="hobby.htm" ohne Pfadangabe, weil der Server wie der Pc standardmäßig im aktuellen Verzeichnis nach einer Datei suchen. Steht die gesuchte Datei index.htm wie im Beispiel im nächst höherem Verzeichnis über aboutme.htm und hobby.htm, genügt href="../index.htm" ohne Pfadangabe in Links, die zum Index zurückverweisende, weil mit Punkt Punkt Schrägstrich die Anweisung gegeben wird, im nächst höherem Verzeichnis zu suchen.

Steht die gesuchte Datei aboutme.htm wie im Beispiel im nächst tieferen Verzeichnis, genügt in der Seite index.htm href="author/aboutme.htm" im Link, weil der Server wie der PC standardmäßig ausgehend vom aktuellen Verzeichnis nach einer Datei mit Pfadangabe suchen.

Ein Sonderfall sind solche Adressen mit voranstehendem ein Schrägstrich :
es wird ausgehend vom aktuellen Wurzelverzeichnis gesucht; also entweder auf dem Speichermedium des PCs (c: oder a: usw.) oder auf dem WWW-Server, je nach dem, wo die Html-Seite mit einem solchen Link steht. Solche Links müssen also auch angepaßt werden, wenn die Html-Datei verlegt wird.
vorausstehender Schrägstrich /ordner1/ordner2/dateiname.* heißt, es wird vom Wurzelverzeichnis aus gesucht (und ist damit eine absolute Adresse)

Empfehlung für Benennung von HTML-Dateien
  • Groß-und Kleinschreibung:
    viele WWW-Server berücksichtigen Groß-und Kleinschreibung von Dateinamen (anders als Windows-Rechner); deshalb ist penibel auf Übereinstimmung von Groß-und Kleinschreibung im Dateinamen und in der Adressierung (href, src etc) in Html-Tags zu achten; Bei der Benennung eigener Html-Dateien, Bilddateien etc. nach festem Schema wie durchgehende Kleinschreibung vorzugehen (unsere Empfehlung), sichert plattformunabhängiges Funktionieren und hilft Flüchtigkeitsfehler zu vermeiden;
  • Sonderzeichen:
    Da Umlaute, Leer- und andere Sonderzeichen im Dateinamen vom Übertragungsprotokoll in andere Ausdrücke umgesetzt werden, was zu Problemen führen kann, sollte man diese in Dateinamen besser vermeiden;

Kennt man die Regeln der Adressierung auf Rechnern, ist der Rest einfach: Die Adresse steht im Anker-Tag im Attribut href=" … ", der Text (oder ein Bild) zum Anklicken zwischen Anfangs- und Ende-Tag

Beispiele: Link mit absoluter Adresse auf das Wurzelverzeichnis des TU-Servers: <a href="http://www.tuhh.de/">TUHH-Homepage</a> Link mit relativer Adresse <a href="../index.htm">Startseite</a> Link mit Bild im anklickbarer Bereich <a href="grafik.htm"><img src="link.gif" alt="Link auf die Grafikbeschreibung"></a>

Verwendung: Bei mehrseitigen Projekten kann man:

  • von jeder Seite auf die Startseite zurüchverweisen
    <a href="index.htm">Zurück zur Startseite</a>
  • Blättern ermöglichen durch Verweis auf die vorhergehende bzw. folgende Seite
    <a href="Seite3.htm">vorherige Seite</a> <a href="Seite4.htm">nächste Seite</a>
  • in jede Seite ein kleines Menü mit Links zu den verschiedenen Seite einbinden
  • eine Index-Seite mit Links zu den verschiedenen Seiten des Projekts anlegen

Sprünge

Für Sprünge innerhalb eines Dokuments wird im Anker-Tag eine Sprungmarke als Referenz angegeben, im obigen Beispiel href="#Sprungmarke". Man kann auch eine bestimmte Stelle in einer anderen Seite anspringen. Dann lautet die Referenz href="Dateiname.htm#Anderswo".

Beispiele:
Sprungziel innerhalb der gleichen Datei
<a href="#Sprungmarke">Ende der Seite</a>

Sprungziel in anderer Datei
<a href="xyz.htm#Lenz">Quelle S.Lenz</a>

Das Nummernzeichen # leitet die frei wählbare Bezeichnung des Sprungziels ein. Groß- und Kleinschreibung wird unterschieden.

Als Ziel bzw. Ansprungmarke setzt man an die gewünschte Stelle in einer Seite ein weiteres Anker-Tag, lässt das Attribut href leer und setzt das Attribut Name, z.B Attribut Name="Sprungmarke" oder Name="Anderswo". Den Textbereich des Anker-Tags kann man nutzen oder leer lassen.

Beispiel: Sprungmarke bzw. Sprungziel

<a id="Sprungmarke">Hallo</a>

oder

<a id="Lenz"></a>Siegfried Lenz, Deutschstunde, S. 84

Memo:
Die Unterscheidung von Groß- und Kleinschreibung bedeutet, daß "DLRG" und "Dlrg" und "dlrg" als href auf verschieden Sprungziele verweisen und "dLRg" als Name der Sprungmarke nicht gefunden wird.

Verwendungsmöglichkeiten:
Sprünge kann man zu Querverweisen, z.B auf ein Glossar, auf eine Literaturliste bzw. zu Quellentexten nutzen, in längeren Dokumenten hervorragend in einer vorangestellten Gliederung verwenden.

Image Map

verweis-sensitive Graphik als Navigations-Instrument FIXME

Cascading Style Sheets

CSS Grundlagen

CSS-Elemente werden mit folgender Syntax notiert:

Selektor { Eigenschaft: Wert; … }

Inline-Definitionen nutzen den style-Parameter:

style="Eigenschaft: Wert; …"

Viele Eigenschaften vererben sich von Vater-HTML-Element zu Kind-HTML-Element (Kaskade!), so dass es sinnvoll ist, dateiweite Einstellungen am html- oder body-Tag festzumachen.

CSS-Elemente können mehrfach definiert werden, gültig ist bei gleichrangigen Definitionen das jeweils zuletzt definierte Element, ansonsten das mit der größeren Spezifität.

Selektoren können zu einen HTML-Tags sein: das bedeutet, die Standardeigenschaften von HTML-Tags, die der Browser festlegt, werden redefiniert.

Zweitens können das Identifikatoren (id) sein, die durch eine vorangestelltes '#' gekennzeichnet sind. Diese können über den Parameter id="idname" beliebigen HTML-Tags zugewiesen werden. IDs dürfen nur einmal in einem Dokument vorkommen.

Drittens können das Klassen (class) sein, die durch einen vorangestellten '.' gekennzeichnet werden. Klassen haben ähnliche Eigenschaften wie IDs, dürfen aber mehrfach vorkommen.

Viertens sind (fast) beliebige Kombinationen der drei Basis-Selektoren möglich, wie z.B. 'alle a-Tags, die innerhalb der ID 'head' verwandt werden' oder 'alle ul-Tags, die Kind-Elemente eines p_tags sind' etc. pp.

Eigenschaften sind die Angaben, die manipuliert werden sollen - festgelegt durch die CSS-Syntax - kommt im Weiteren.

Wertangaben können sein: Farben, Größen und feste Namen.

Prinzipiell können CSS-Angaben groß oder klein geschrieben werden, wenn Sie XHTML-Kompatibilität wahren wollen, muss alles klein geschrieben werden.

Größenangaben brauchen zwingend eine Einheit, ausgenommen die '0'.

Einbindung von Stylesheets

Einbindung von CSS-Angaben kann erstens inline erfolgen mit dem style-Parameter zu jedem beliebigen HTML-Tag.

Zweitens kann man die CSS-Style im Header einer HTML-Datei notieren mithilfe des style-Tags: 

<style>
Selektor1 { Eigenschaft: Wert; ... }
Selektor2 { Eigenschaft: Wert; ... }
</style>

Drittens kann man die CSS-Definitionen in einer oder mehr externen Datei/en ablegen, die über den link-Parameter im Kopf einer HTML-Datei oder die @import-Anweisung innerhalb eines style-Abschnitts eingebunden werden.

Styling von Inline Elementen - Zeichenformatierung

Schriftarten, -größen und -auszeichnungen lassen sich jedem Element zuordnen, werden aber häufig mit dem span-tag in den Text eingestreut. Das span-Tag macht für sich nichts, dient nur als Träger von Style-Sheet-Informationen.

Die Möglichkeiten der Formatierung beschränken sich mit CSS nicht nur auf die gängigen Funktionen, sondern man kann auch ausgefallene Stylings realisieren wie z.B. hochgestellt (font-size:75%; vertical-align:super;)

Die Parameter zur Schriftmanipulation im einzelnen:

  • font-family (Schriftart)
  • font-style (Schriftstil)
  • font-variant (Schriftvariante -Kapitälchen)
  • font-size (Schriftgröße)
  • font-weight (Schriftgewicht - fett)
  • word-spacing (Wortabstand)
  • letter-spacing (Zeichenabstand)
  • line-height (Zeilenabstand)
  • text-decoration (Textdekoration - Unterstreichung)
  • text-transform (Text-Transformation - Groß/Kleinschreibung)
  • color (Vordergrundfarbe)

Die Angabe von line-height macht idR. nur bei Blockelementen Sinn

Die CSS-Angabe "font" (Schrift allgemein) fasst folgende Parameter zur Schriftformatierung in einer Angabe zusammen:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

Bei der Angabe der Schriftarten sollte man immer Alternativen mit angeben (komma-getrennt), so dass auch 'nicht-Windows'-Nutzer eine ähnliche Darstellung genießen könne, wie von Ihnen beabsichtigt, z.B.: font-family:Arial,Helvetica,sans-serif. Beachten Sie bei Schriftnamen die Groß- und Kleinschreibung. Bestehen Schriftname aus mehreren Worten, müssen Sie sie in Anführungszeichen einschließen ("Times New Roman").

Schriftgrößen können entweder absolut (Punkt, Pixel) oder relativ (Em, Prozent) angegeben werden. Dabei sind mehrere Dinge zu beachten:

  • Die Angabe der Schriftgröße in Pixel oder Punkt erlaubt dem Autor eine genaue Kontrolle über die Schriftdarstellung. Leider verweigert der Internet Explorer seinen Nutzern, die Schriftgröße zu verändern, wenn die Schriftgröße absolut angegeben wurde. Ein Ausweg aus diesem Problem bieten die Schlüsselworte für die Schriftgröße, die eigentlich absolut sind, aber vom IE als relativ behandelt werden.
  • Bei Schriftgrößen unter 9px können nicht mehr alle Buchstaben trennscharf dargestellt werden.
  • Relative Schriftgrößen beziehen sich immer auf die Größe der Schrift im Elternelement, d.h. wenn Sie die Schriftgröße des ul-Tags auf 75% einstellen und unsortierte Listen schachteln, wird die Schriftgröße immer kleiner.

Styling von Links ist ein beliebtes Thema bei CSS-Anwendern, da viele gerne das Standardaussehen von Links (blau, unterstrichen) an ihr Design anpassen und zusätzlich "Rollover"-Effekte einbauen wollen. Für den ersten Fall kann man ganz einfach das a-Tag umdefinieren und die Unterstreichung entfernen: a {text-decoration:none; color:#006; font-weight:bold} sorgt für nicht unterstrichene, fette, dunkelblaue Links.

Rollovereffekte erreicht man am über sogenannte Pseudoklassen, die man zusammen mit dem a-Selektor verwendet. Pseudoklassen werden mit einem Doppelpunkt vom tag-Namen getrennt und können sein:

  • link (normal, unbesucht)
  • visited (besucht),
  • hover, (Mauszeiger steht drüber),
  • focus (mit Tab-Taste ausgewählt),
  • active (gerade angeklickt).

Diese identifizieren die verschiedenen Zustände, die ein Link annehmen kann. Und so schaltet a:visited {color:#060;} besuchte Links auf dunkelgrün und a:hover {color:#600;} Links unter dem Mauszeiger auf dunkelrot.

Außerdem kann man auf alle Inline-Elemente auch Formatierungen wie Hintergrundfarben und Rahmen anwenden, siehe nächsten Abschnitt.

Formatierung von Blockelementen

Hintergrundgestaltung

Die erste Variante der Gestaltung von Blockelementen ist die Gestaltung des Hintergrunds des Elements. Besonderheit hierbei ist, dass der Hintergrund nicht an Kindelemente vererbt wird, hier kommt immer die Grundeinstellung 'transparent' zum Tragen. Das ist Standard um merkwürdige Effekte besonders bei gekachelten Hintergründen zu vermeiden.

Im Unterschied zu den Hintergrundgestaltungsmöglichkeiten von HTML kann man mit CSS fast alle Elemente stylen, nicht nur Blockelemente, sondern auch Inlineelemente (deshalb gehört dieser Abschnitt eigentlich auch auf eine Seite vorher). Ausserdem eröffnet CSS mehr Gestaltungsmöglichkeiten, z.B. die Positionierung von Bildern.

Die Einstellmöglichkeiten im einzelnen:

  • background-color (Hintergrundfarbe): Farbwert
  • background-image (Hintergrundbild): url()
  • background-repeat (Wiederholungs-Effekt): repeat, repeat-x, repeat-y oder no-repeat
  • background-attachment (Wasserzeichen-Effekt): scroll oder fixed
  • background-position (Hintergrundposition): Horizontale Koordinate Vertikale Koordinate (Maßangaben)
    (macht nur Sinn mit background-image und background-repeat:no-repeat)
  • background (Hintergrund allgemein): Farbe Hintergrundbild Wiederholung Wasserzeichen Position
    Angaben mit Leerzeichen getrennt, es können Angaben weggelassen werden.

Seit CSS3 kann man auch mehrere Hintergrunddefinitionen stapeln, durch mehrere, Komma-getrennte Angaben bei der background-Eigenschaft

Rahmen

Für Rahmen gilt in etwa das gleiche, was oben zur Hintergrundgestaltung ausgeführt wurde: CSS erlaubt es, fast alle HTML-Elemente mit einem Rahmen zu versehen, nicht nur Tabellen. Dabei können alle Seiten eines Elements unabhängig voneinander gestylt werden.

  • border[-top, -right, -bottom, -left]-width (Rahmendicke): Maßangabe
  • border[-top, -right, -bottom, -left]-color (Rahmenfarbe): Farbangabe
  • border[-top, -right, -bottom, -left]-style (Rahmentyp): Schlüsselwort (Achtung: nicht alle Typen funktionieren in allen Browsern)
  • border[-top, -right, -bottom, -left] (Rahmen allgemein): Angaben zu Dicke Typ Farbe mit Leerzeichen getrennt.
  • border[-top, -right, -bottom, -left]-radius (abgerundete Ecken): Radius der runden Ecke

Ausrichtung und Abstände

Die CSS-Eigenschaften in diesem Abschnitt sind im Wesentlichen für Blockelemente gedacht und machen auch nur dafür Sinn, gleichwohl kann man zb. margin und padding auch auf In-Line-Elemente anwenden.

  • margin[-top, -right, -bottom, -left] (Außenrand/Abstand)
  • padding[-top, -right, -bottom, -left] (Innenabstand)
  • text-align (Horizontale Ausrichtung): left center right
  • text-indent (Texteinrückung - erste Zeile): Maßangabe
  • line-height (Zeilenhöhe: Wert - hier ist als einzige Angabe im ganzen CSS ein Wert ohne Einheit erlaubt.)
  • vertical-align (Vertikale Ausrichtung): top middle bottom (sinnvoll nur in Tabellen)
  • white-space (Textumbruch): normal pre nowrap

Javascript

Grundlagen

/* Variablen */
// Zahlen
var laenge = 5.2;
laenge = 5 * 7.562456874378347623147832146723642398073447832147893242314;
console.log(laenge);
// Boolean
var c = true;
// String
var d = "Eine ganz lange Zeichenkette";
// Array
var e = ['a','b','c','d'];
// Objekt
var f = {marke: 'VW', tueren: 4, raeder: 6, sitze: 23};
 
// Funktion
function rechne(a, b) {
  return a * b;
}
laenge = rechne(5, 3.14159);
console.log(laenge);

Links

Allgemein:

Editoren (Freeware/Open Source)

User Tools

kurse/htmlkurs.txt · Last modified: 10.07.2020 21:07 by klaus
CC Attribution-Noncommercial-Share Alike 4.0 International Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International