HTML-Tags zur Gestaltung von Informationen im Redaktionssystem SixCMS. Handbuch für Webredakteure

Transkript

1 s zur Gestaltung von Informationen im Redaktionssystem SixCMS Handbuch für Webredakteure V 0.1 Stand:

2 Ministerium des Innern Webredaktion Seite 2 von 14 Inhaltsübersicht s zur Gestaltung von Informationen im Redaktionssystem SixCMS Standard-Tags zur Textgestaltung Überschriften Horizontale Linie Sonderzeichen: festes Leerzeichen Umgang mit Grafiken Einfügen einer Grafik in die HTML-Seite Pflichtparameter Sonstige Parameter Beispiele Listen und Aufzählungen Einfache Listen Nummerierte Listen Definitionslisten Navigation mit Hilfe von Verknüpfungen und Ankern Darstellung von Informationen innerhalb des Dokumentes in Tabellenform Beispiel 1 Beispiel 2 HTML-Code wird hier nur zur besseren Übersicht in allen Beispielen schattiert und im Fettdruck dargestellt. Druckversion

3 Ministerium des Innern Webredaktion Seite 3 von 14 s zur Gestaltung von Informationen im Redaktionssystem SixCMS Informationen, die im Internet/Intranet angeboten werden sollen, können mit Hilfe von HTML-Befehlen (Tags) aufbereitet werden, z.b. Fettdruck, Erstellung von Tabellen oder Listen. Anders als in anderen Systemen werden zur Textgestaltung innerhalb unseres Redaktionssystems (SixCMS) nur einige wenige Tags benötigt bzw. ist die Verwendung einer Reihe weiterer Tags nicht zulässig. Die spitzen Klammern gehören zum Tag und dürfen nicht weggelassen werden. Grundsätzlich gilt, dass jedes Tag abgeschlossen werden muss. Dazu wird das jeweilige Tag mit einem zusätzlichen Schrägstrich als erstem Zeichen nach der Klammer wiederholt. Außerdem werden alle Tags kleingeschrieben. Kombinationen von Tags sind möglich, hierbei ist aber die Reihenfolge zu beachten. Werden Tags durch Parameter erweitert, sind die Werte in Anführungszeichen zu setzen.

4 Ministerium des Innern Webredaktion Seite 4 von 14 Standard-Tags zur Textgestaltung Beispiel mit HTML-Code <p> <p>informationen, die im...</p> <p> Die spitzen Klammern...</p> <br /> Absatzmarkierung Informationen, die im... Die spitzen Klammern... Einfacher Zeilenumbruch Achtung: kein Start- und Endetag, deshalb nach br Leertaste und / Informationen, die im... Die spitzen Klammern... Fettdruck Kursivschrift Informationen, die im...<br /> Die spitzen Klammern... <strong> <strong></strong> <em> <em></em> Kombinationen sind möglich in diesem Fall ist die Reihenfolge der Tags zu beachten! <strong><em></em></strong>

5 Ministerium des Innern Webredaktion Seite 5 von 14 Beispiel mit HTML-Code <h1> bis <h5> <h1>referat II/4</h1> <h5>referat II/4</h5> <hr /> <p>informationen, die im...</p> <hr /> <p>die spitzen Klammern...</p> Überschriften Referat II/4 (Überschrift Typ 1) Referat II/4 (Überschrift Typ 5) Horizontale Linie Achtung: kein Start- und Endetag, deshalb nach hr Leertaste und / Informationen, die im... Die spitzen Klammern... 77a Sonderzeichen: festes Leerzeichen 77a (das feste Leerzeichen sorgt dafür, dass so verbundene Zeichenketten immer in derselben Zeile angezeigt werden)

6 Ministerium des Innern Webredaktion Seite 6 von 14 Umgang mit Grafiken Beispiel mit HTML-Code <img src="pfad/dateiname" /> Dieses Tag muss durch Parameter ergänzt werden: alt="text" width="200" height="200" Es kann durch weitere Parameter ergänzt werden: align="left" align="right" border="0" border="1" Einfügen einer Grafik in die HTML-Seite Achtung: kein Start- und Endetag, deshalb mit Leertaste und / abschließen Pflichtparameter Kurze Erläuterung zur Grafik für barrierefreie Seiten zwingend erforderlich Breite der Grafik in Die Angabe dieser Pixel Werte verkürzt die Höhe der Grafik in Ladezeiten für Grafiken Pixel deutlich. Sonstige Parameter Ausrichtung der Grafik an der linken Seite mit nebenstehendem Text Ausrichtung der Grafik an der rechten Seite mit nebenstehendem Text Grafik ohne Rahmen anzeigen Grafik mit Rahmen anzeigen

7 Ministerium des Innern Webredaktion Seite 7 von 14 Beispiel mit HTML-Code Beispiele <img src="/sixcms/media.php/1279/logo00.gif" alt="word-bild-marke Land Brandenburg" border="1" width="416" height="330" /> <img src="/sixcms/media.php/1279/logo00.gif" alt="word-bild-marke Land Brandenburg" border="0" width="416" height="330" /> Als Fundstelle der Datei (Pfadangabe) wurde in beiden Fällen der Mediencontainer mit der ID 1279 eingetragen. <img src="/sixcms/media.php/1279/logo00.gif" alt="word-bild-marke Land Brandenburg" border="0" width="416" height="330" align="left" /> Neben der linksbündig ausgerichteten Grafik erscheint der zugehörige Text. Neben der linksbündig ausgerichteten Grafik erscheint der zugehörige Text.

8 Ministerium des Innern Webredaktion Seite 8 von 14 Listen und Aufzählungen Beispiel mit HTML-Code <ul> <li> <p> Tagesordnung: </p> <ul> <li>berichterstattung</li> <li>diskussion</li> <li>beschlussfassung</li> </ul> Listen können verschachtelt werden <ul> <li>berichterstattung</li> <ul> <li>bereich A</li> <li>bereich B</li> </ul> <li>diskussion</li> <li>beschlussfassung</li> </ul> Einfache Listen Liste beginnen Listeneintrag erzeugen, für jeden Punkt wiederholen Tagesordnung: Berichterstattung Diskussion Beschlussfassung Berichterstattung o Bereich A o Bereich B Diskussion Beschlussfassung

9 Ministerium des Innern Webredaktion Seite 9 von 14 Beispiel mit HTML-Code Nummerierte Listen <ol> Liste beginnen <li> Listeneintrag erzeugen, für jeden Punkt wiederholen <p> Tagesordnung: Tagesordnung: </p> <ol> 1. Berichterstattung <li>berichterstattung</li> 2. Diskussion <li>diskussion</li> 3. Beschlussfassung <li>beschlussfassung</li> </ol> Auch nummerierte Listen können verschachtelt werden, dabei kann es sinnvoll sein, einen Listentyp als Parameter vorzugeben, z.b.: <ol type="a"> Aufzählung mit Kleinbuchstaben <ol type="i"> Aufzählung mit römischen Zahlen <ol type="1"> 1. Berichterstattung <li>berichterstattung</li> <ol type="a"> a. Bereich X <li>bereich X</li> b. Bereich Y <li>bereich Y</li> </ol> 2. Diskussion <li>diskussion</li> 3. Beschlussfassung <li>beschlussfassung</li> </ol>

10 Ministerium des Innern Webredaktion Seite 10 von 14 <dl> <dt> <dd> <h1> Abteilung II</h1> <dl> <dt>referat II/1</dt> <dd>personalservice für den Geschäftsbereich (...) und Personalentwicklung,... </dd> <dt>referat II/2</dt> <dd>sonderaufgaben im Bereich der Personalverwaltung</dd> <dt>referat II/3</dt> <dd>haushalts-, Kassen- und Rechnungsprüfungswesen,...</dd> </dl> Definitionslisten Beginn der Liste definieren Listeneintrag erzeugen Erläuterungen zum vorangehenden Listeneintrag Abteilung II Referat II/1 Personalservice für den Geschäftsbereich (...) und Personalentwicklung,... Referat II/2 Sonderaufgaben im Bereich der Personalverwaltung Referat II/3 Haushalts-, Kassen- und Rechnungsprüfungswesen,...

11 Ministerium des Innern Webredaktion Seite 11 von 14 Navigation mit Hilfe von Verknüpfungen und Ankern <a name="top1"></a> Setzen eines Ankers (Anker sind Zielpunkte innerhalb von Dokumenten, die mit Hilfe von Verknüpfungen Links angesteuert werden. Mit zugehörigen Links erleichtern sie die Navigation insbesondere in längeren Dokumenten.) <a href="#top1">tagesordnungspunkt 1</a> Verknüpfung innerhalb des aktuellen Dokumentes Ziel ist der Anker "top1" Der Text zwischen Start- und Ende-Tag wird im Browser als Link dargestellt. <a href="/sixcms/detail.php?id=16129">referat II/4</a> Verknüpfung zu einem Artikel innerhalb des Redaktionssystems <a href="/sixcms/detail.php?id=10166#2">was ist Korruption?</a> Verknüpfung zu einem Anker in einem anderen Dokument innerhalb des Redaktionssystems <a href="/sixcms/media.php/1284/mi_organigramm_aktuell.doc">aktuelles Organigramm des MI</a> (.doc) Verknüpfung zu einem Dokument in einem Medien-Container des Systems (hier: Angebot eines Word- Dokumentes zum Download) <a href=" target="_blank">internetangebot des Bundes</a> Externe Verknüpfung zu einer Seite eines anderen Anbieters mit dem Parameter target="_blank" wird die Seite in einem neuen Fenster des Browsers geöffnet. <a Verknüpfung mit einer -adresse nach dem Anklicken wird ein Fenster zum Versenden einer an den entsprechenden Empfänger geöffnet

12 Ministerium des Innern Webredaktion Seite 12 von 14 Darstellung von Informationen innerhalb des Dokumentes in Tabellenform <table> Erstellen einer Tabelle <tr> Erzeugen einer Tabellenreihe <td> Erzeugen eines Tabellenfeldes innerhalb der Reihe Tabellen-Tags können durch Parameter ergänzt werden (auch Kombinationen sind möglich). <table border="0"> Tabelle ohne Linien <table border="2"> Tabelle mit Linien <table cellspacing ="2"> Abstand der Tabellenfelder voneinander (2 Punkte) <table cellpadding="2"> Abstand zwischen Feldinhalt der Tabelle und Rahmen (2 Punkte) valign="top" vertikale Ausrichtung: oben valign="center" vertikale Ausrichtung: Mitte valign="bottom" vertikale Ausrichtung: unten align="left" horizontale Ausrichtung: links align="center" horizontale Ausrichtung: Mitte align="right" horizontale Ausrichtung: rechts bgcolor="cccccc" grauer Hintergrund <td colspan="2"> (2) nebeneinander liegende Tabellenfelder werden zu einem verknüpft <td rowspan="2"> (2) untereinander liegende Tabelllenfelder werden zu einem verknüpft

13 Ministerium des Innern Webredaktion Seite 13 von 14 Beispiel 1 HTML-Code <table border="2" cellpadding="2"> <tr> <td>name</td> <td>ref.</td> <td>tel.</td> <tr> <td>schiersner</td> <td>sp/4</td> <td>2144</td> <tr> <td>böttche</td> <td>ii/4</td> <td>2247</td> </table> Name Ref. Tel. Schiersner SP/ Böttche II/4 2247

14 Ministerium des Innern Webredaktion Seite 14 von 14 Beispiel 2 HTML-Code <table border="1" cellpadding="1"> <tr> <td align="left">links</td> <td align="center">mitte</td> <td align="right">rechts</td> <tr> <td colspan="2">diese nebeneinander liegenden Felder wurden verknüpft.</td> <td>die Reihe hat nur 2 Felder.</td> <tr> <td valign="top">als vertikale Ausrichtung wurde hier "oben" vorgegeben.</td> <td valign="center">vertikale Ausrichtung: Mitte</td> <td valign="bottom">vertikale Ausrichtung: unten</td> <tr valign="top"> <td rowspan="2">die beiden untereinander liegenden Felder sind verknüpft.</td> <td>rechtsbündig ist gut für Dezimalzahlen</td> <td align="right">3,5<br /> 77,9<br /> 1,7<br /> 1.773,1</td> <tr valign="top"> <td>in dieser Reihe gibt es ebenfalls nur 2 Felder.</td> <td>vertikal = "oben" gilt für beide Reihen</td> <tr bgcolor="cccccc"> <td valign="top">grauer Hintergrund, vertikale Ausrichtung im Feld ist oben</td> <td align="center" valign="center">mitte / Mitte</td> <td align="right" valign="bottom">unten / rechts</td> </table> links Mitte rechts Die Reihe Diese nebeneinander liegenden Felder wurden verknüpft. hat nur 2 Felder. Als vertikale Ausrichtung wurde hier "oben" vorgegeben. Die beiden untereinander liegenden Felder sind verknüpft. Grauer Hintergrund, vertikale Ausrichtung im Feld ist oben vertikale Ausrichtung: Mitte vertikale Ausrichtung: unten Rechtsbündig ist gut für Dezimalzahlen In dieser Reihe gibt es ebenfalls nur 2 Felder. Mitte / Mitte 3,5 77,9 1, ,1 vertikal = "oben" gilt für beide Reihen unten / rechts