HTML-Tags zur Gestaltung von Texten im Redaktionssystem CMS

Transcrição

HTML-Tags
zur Gestaltung von Informationen
im Redaktionssystem SixCMS
Handbuch für Webredakteure
V 0.1
Stand: 17.12.2003
Ministerium des Innern Webredaktion
Seite 2 von 14
Inhaltsübersicht
HTML-Tags 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.
Hinweise/Fragen an die Webredaktion
Druckversion
Seite 3 von 14
HTML-Tags 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.
[zurück zum Inhalt]
Seite 4 von 14
Standard-Tags zur Textgestaltung
HTML-Tag
Beispiel mit HTML-Code
<p>
<p>Informationen, die im ...</p>
<p> Die spitzen Klammern ...</p>
Bedeutung
Ergebnis
Absatzmarkierung
Informationen, die im ...
Die spitzen Klammern ...
<br />
Einfacher Zeilenumbruch
Achtung: kein Start- und Endetag, deshalb nach br
Leertaste und /
Informationen, die im ...<br />
<strong>
Fettdruck
<strong>Ergebnis</strong>
Ergebnis
<em>
Kursivschrift
<em>Ergebnis</em>
Ergebnis
Kombinationen sind möglich – in diesem Fall ist die Reihenfolge der Tags zu beachten!
<strong><em>Ergebnis</em></strong>
Ergebnis
Seite 5 von 14
HTML-Tag
<h1> bis <h5>
<h1>Referat II/4</h1>
Bedeutung
Ergebnis
Überschriften
Referat II/4 (Überschrift Typ 1)
<h5>Referat II/4</h5>
<hr />
Referat II/4
(Überschrift Typ 5)
Horizontale Linie
Achtung: kein Start- und Endetag, deshalb nach hr
Leertaste und /
<p>Informationen, die im ...</p>
<hr />
<p>Die spitzen Klammern ...</p>
 
§ 77a
Sonderzeichen: festes Leerzeichen
§ 77a
(das feste Leerzeichen sorgt dafür, dass so
verbundene Zeichenketten immer in derselben
Zeile angezeigt werden)
Seite 6 von 14
Umgang mit Grafiken
HTML-Tag
<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"
Bedeutung
Ergebnis
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
Ladezeiten für Grafiken
Höhe der Grafik in
deutlich.
Pixel
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
Seite 7 von 14
HTML-Tag
Bedeutung
Ergebnis
Beispiele
<img src="/sixcms/media.php/1279/logo00.gif"
alt="Word-Bild-Marke Land Brandenburg"
border="1" width="416" height="330" />
border="0" width="416" height="330" />
Als Fundstelle der Datei (Pfadangabe) wurde in
beiden Fällen der Mediencontainer mit der ID
1279 eingetragen.
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.
Seite 8 von 14
Listen und Aufzählungen
HTML-Tag
<ul>
<li>
<p>
Tagesordnung:
</p>
<ul>
<li>Berichterstattung</li>
<li>Diskussion</li>
<li>Beschlussfassung</li>
</ul>
Listen können verschachtelt werden
<ul>
<ul>
<li>Bereich A</li>
<li>Bereich B</li>
</ul>
<li>Diskussion</li>
</ul>
Bedeutung
Ergebnis
Einfache Listen
Liste beginnen
Listeneintrag erzeugen, für jeden Punkt wiederholen
Tagesordnung:
·
·
·
Berichterstattung
Diskussion
Beschlussfassung
·
Berichterstattung
o
o
·
·
Bereich A
Bereich B
Diskussion
Beschlussfassung
HTML-Tag
<ol>
<li>
Seite 9 von 14
Bedeutung
Ergebnis
Nummerierte Listen
Liste beginnen
Listeneintrag erzeugen, für jeden Punkt wiederholen
<p>
Tagesordnung:
Tagesordnung:
</p>
1. Berichterstattung
<ol>
2. Diskussion
3. Beschlussfassung
<li>Diskussion</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
a. Bereich X
<ol type="a">
b. Bereich Y
<li>Bereich X</li>
<li>Bereich Y</li>
2. Diskussion
</ol>
3. Beschlussfassung
<li>Diskussion</li>
</ol>
Seite 10 von 14
HTML-Tag
Bedeutung
Definitionslisten
<dl>
Beginn der Liste definieren
<dt>
Listeneintrag erzeugen
<dd>
Erläuterungen zum vorangehenden Listeneintrag
<h1> Abteilung II</h1>
Abteilung II
<dl>
Referat II/1
<dt>Referat II/1</dt>
<dd>Personalservice für den Geschäftsbereich
Personalservice für den Geschäftsbereich
(...) und Personalentwicklung, ...
(...) und Personalentwicklung, ... </dd>
Referat II/2
Sonderaufgaben im Bereich der Personal<dd>Sonderaufgaben im Bereich der Personalverwaltung
verwaltung</dd>
Referat II/3
Haushalts-, Kassen- und Rechnungsprü<dd>Haushalts-, Kassen- und
fungswesen, ...
Rechnungsprüfungswesen, ...</dd>
</dl>
Seite 11 von 14
Navigation mit Hilfe von Verknüpfungen und Ankern
HTML-Tag
Bedeutung
<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 WordDokumentes zum Download)
<a href="http://www.bund.de" 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 href="mailto:[email protected]">Webredaktion</a>
Verknüpfung mit einer eMail-Adresse – nach dem Anklicken wird ein Fenster zum Versenden einer eMail
an den entsprechenden Empfänger geöffnet
Seite 12 von 14
Darstellung von Informationen innerhalb des Dokumentes in Tabellenform
HTML-Tag
Bedeutung
<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
Beispiel 1
HTML-Code
<table border="2" cellpadding="2">
<tr>
<td>Name</td>
<td>Ref.</td>
<td>Tel.</td>
</tr>
<tr>
<td>Schiersner</td>
<td>SP/4</td>
<td>2144</td>
</tr>
<tr>
<td>Böttche</td>
<td>II/4</td>
<td>2247</td>
</tr>
</table>
Seite 13 von 14
Ergebnis
Name
Ref.
Schiersner SP/4
Böttche
II/4
Tel.
2144
2247
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>
<tr>
<td colspan="2">Diese nebeneinander liegenden Felder wurden verknüpft.</td>
<td>Die Reihe hat nur 2 Felder.</td>
</tr>
<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>
<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>
<tr valign="top">
<td>In dieser Reihe gibt es ebenfalls nur 2 Felder.</td>
<td>vertikal = "oben" gilt für beide Reihen</td>
</tr>
<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>
</tr>
</table>
Seite 14 von 14
Ergebnis
links
Mitte
rechts
Die Reihe
Diese nebeneinander liegenhat nur 2
den Felder wurden verknüpft.
Felder.
Als vertikale
Ausrichtung
vertikale Auswurde hier
"oben" vor- richtung: Mitte vertikale
Ausrichgegeben.
tung: unten
Die beiden
Rechtsbündig
3,5
77,9
untereinander ist gut für De1,7
liegenden
zimalzahlen
1.773,1
Felder sind
verknüpft.
In dieser Rei- vertikal =
"oben" gilt
he gibt es
ebenfalls nur 2 für beide
Reihen
Felder.
Grauer Hintergrund,
vertikale Aus- Mitte / Mitte
richtung im
unten /
Feld ist oben
rechts

HTML-Tags zur Gestaltung von Texten im Redaktionssystem CMS

Transcrição

Documentos relacionados

2007 PSP FORUM Stand 27-02-2007

Ministerium des Innern und für Kommunales Brandenburg

Prüfung Nr. 6 Preis der Tierarztpraxis am Rössliplatz AG und den

Kombinierte Prüfung Prüfung Nr. 6 Preis der Tierarztpraxis am

D-Version - Euroregion Elbe/Labe

Brandschutzförderrichtlinie - Hessisches Ministerium des Innern und

weiterlesen

hessisches ministerium für soziales und integration 457

Usinger Anzeiger - Adolf Reichwein Schule

Einführung in HTML - Fakultät Elektrotechnik und Informationstechnik

Ein Berufspraktikum in Australien

Länderbeitrag Schleswig

- Baukultur in Hessen