Drucken

grünes Logo der Universität Bielefeld

HTML; CSS und Co.


HTML - Hypertext Markup Language

Hypertext Markup Language (HTML) ist eine textbasierte Auszeichnungssprache zur Strukturierung von Dokumentinhalten wie Texte, Bilder und Hyperlinks. HTML ist die Sprache des World Wide Web und wird u.a. von Webbrowsern angezeigt. Sie beinhaltet darüber hinaus zusätzliche Informationen, so genannte Metaangaben, die beispielsweise über verwendete Sprachen oder den Autor Auskunft geben. Die Hypertext Markup Language wird vom World Wide Web Consortium (W3C) entwickelt und ständig aktualisiert.

Im Folgenden finden Sie einige Hilfen zur Texteingabe:

Überschriften

Um die Seiten grafisch und inhaltlich gut zu strukturieren, sollten folgende Überschriften verwendet werden:

 

H1-Überschrift

H2-Überschrift

H3-Überschrift

Interne und externe Links

Ein Link wie dieser Homepage wird in HTML folgendermaßen erzeugt:
<a href="http://www.uni-bielefeld.de/">Homepage der Universität Bielefeld</a>

Wenn die Zielseite des Links Homepage in einem neuen Fenster geöffnet werden soll:
<a href="http://www.uni-bielefeld.de/" target="_blank">Homepage der Universität Bielefeld</a>

Links können nicht nur auf HTML-Seiten verweisen, sondern auch auf andere Datei-Formate wie z.B. PDF oder Word-Dokumente!

Hinweistext zu externen Links einbinden

Sollten Sie externe Links auf Ihren Seiten haben, so können Sie den nachfolgenden Text mit dem Insert-Befehl in Ihre Seiten einbinden:

Code:
<insert file='/Universitaet/links_anmerkung.html'/>
Bilder, Grafiken

Alternativtext zum Bild Bilder können per image-Link in den Text eingebunden werden.
Beispiel: Das Uni-Logo.




<img src="/images/template_2009/logo.jpg" alt="Alternativtext zum Bild" border="0" height="16" width="25">
Neue Zeilen und Absätze

In HTML werden normale Absatzmarken (Return-Taste) als Leerzeichen interpretiert. Neue Zeilen und Absätze müssen normalerweise durch HTML-Tags eingeleitet werden.

Zeilenumbruch

Durch <br/> wird bei der HTML-Ausgabe ein Zeilenumbruch erzeugt. Das heißt, der nachfolgende Text beginnt in einer neuen Zeile, hat aber keinen vertikalen Abstand zum vorhergehenden Text.

Absatz oder mehrere leere Zeilen im Eingabetext

Durch <p> wird bei der HTML-Ausgabe zu einen neuen Absatz. Das heißt der nachfolgende Text beginnt in einer neuen Zeile mit sichbarem vertikalen Abstand zum vorhergehenden Text.

Textformatierung

Fett, Kursiv und Unterstreichen

Text Fett, Kursiv oder Unterstrichen darstellen
Text <b>Fett</b>, <i>Kursiv</i> oder <u>Unterstrichen</u> darstellen

Hoch- und tiefgestellter Text

Text hochgestellt oder tiefgestellt darstellen
Text <sup>hochgestellt</sup> oder <sub>tiefgestellt </sub>darstellen

Umlaute

Für die Ausgabe der HTML-Dokumente ist der Zeichensatz iso-8859-15 eingestellt. Deutsche Umlaute und andere Zeichen aus dem erweiterten Zeichensatz können ohne Umschreibung in Roxen eingegeben werden.
Wer will, kann jedoch auch die in HTML vorgesehenen Entities für die Umlaute verwenden. (z.B. &auml; für ä Aufzählungen und Listen.

Listen

Numerierte Listen (orderd List)

  1. Numerierte Listen enthalten einen Einleitungs-Tag
  2. Pro Listenpunkt einen List-Tag
  3. Einen Tag zum Schließen der Liste

Aufzählungslisten (unorderd List)

Übernahme von Text aus anderen Anwendungen

Kopieren und Einfügen

Öffnen Sie eine Textanwendung (z.B. Word) und kopieren Sie den Text (Strg + C). Anschließend gehen Sie in den Roxen-Editor ("Edit contents") und fügen den Text hier ein (Strg + V).

Jetzt müssen Sie nur noch eventuell Sonderzeichen entfernen bzw. ersetzen und die Strukturangaben des Textes einfügen (Absätze und Zeilenumbrüche werden nämlich nicht durch die sichtbaren Absätze erzeugt, sondern nur durch HTML-Steuerzeichen wie <p> oder <br>).



CSS - Cascading Style Sheets

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die für HTML-Dateien eingesetzt wird. Es besteht die Möglichkeit der Trennung von Webseiteninhalt und Webseitenlayout, wobei alle Darstellungsvorgaben in eine externe CSS-Datei ausgelagert werden können. Schriftarten, Farben, Abstände, Größen, Ausrichtungen von Elementen, alles das wird in Klassen angegeben. Das macht den eigentlichen HTML-Code wesentlich schlanker und erlaubt seitenübergreifende Layoutänderungen mittels einer einzigen Datei. CSS ermöglicht darüber hinaus unterschiedliche Ausgabeformen für Bildschirme, Drucker, Projektoren und mobile Endgeräte.

Corporate Design - Farben

Um Farben im Layout umzusetzen, verwendet man in HTML und CSS Farbangaben im Hexadezimalwert.

Hier finden Sie eine Übersicht über die Farben, die im Corporate Design der Universität Bielefeld erlaubt sind.

Style-Guide


JavaScript

Skripte dienen dazu, interaktive Elemente in Webseiten einzubetten. So wird die Interaktion mit Onlinenutzern umgesetzt, aber auch die Blickpunkte der Startseite oder Ausklappboxen. Die javascripte sollten in dem Unterordner /javascript abgelegt werden.

JavaScript auf den eigenen Seiten nutzen


Templates in Roxen

Die Templates in Roxen dienen dazu, das HTML der Internetseiten mit den CSS-Stylesheets und den interaktiven Elementen so zu verbinden, dass das vorgebene Layout im Rahmen des Corporate Designs eingehalten wird.

Einführung in Roxen
Anleitung zur Erstellung neuer Templates




Drucken