HTML-Richtlinien

6

Dieses ist der (optional) letzte Schritt im Formatierungsprozess –SCHRITT 6!Sieh dir diese Seite an, um hilfreiche Tipps zur Nutzung des HTML zu finden, die deine Inhalte aufpeppen und ergänzende Besonderheiten verfügbar machen.

Lesepläne haben mehrere Tage mit verschiedenen Inhalten, jeder dieser Tage hat zumindest einen Andachtsinhalt. Dieser Andachtsinhalt kann eine Übersicht sein, eine erzählende Komplettlösung, ein zusammenfassendes Gebet — oder all das auf einmal.

Diese Vielfalt an Möglichkeiten kann es schwierig machen, den besten Weg zu finden, um den Andachtsinhalt so darzustellen, dass der Nutzer ihn verstehen kann, wie der Autor es sich gedacht hat. Den unterstehenden Richtlinien und Empfehlungen zu folgen, wird dir helfen, den Andachtsinhalt so gut wie möglich, für möglichst viele YouVersion-Nutzer (iOS, Android, Web, Mobile Web, etc.) und einen möglichst langen Zeitraum, zu vermitteln,


Empfehlungen

Titel der Andacht

Verwende das h2-Tag, falls notwendig. <h2>, </h2>

Hinweis:Wir raten dringend von der Verwendung des h1-Tags im Inhalt ab.

Überschriften

Benutze das h3-Tag für Hauptüberschriften. <h3>, </h3>

Unterüberschriften

Benutze das h4-Tag für Unterüberschriften. <h4>, </h4>

Hinweis: Wir empfehlen keine Überschriften kleiner als das h4-Tag, da es keine visuellen Unterschiede zwischen den kleineren Überschriften gibt.

Absatzabstände

Schließe den Text jedes Absatzes in das p-Tag ein. <p>, </p>

Hinweis:Wir empfehlen dringend, nicht das br-Tag für Absatzabstände zu verwenden, da dies kein einheitliches Bild ergibt und nicht in allen Apps unterstützt wird.

Kapitel Abstände

Wenn der Inhalt, insbesondere bei längerem Text, eine klare Strukturierung erfordert, die nicht befriedigend mit Absätzen abgebildet werden kann, dann benutze das section-Tag.

Hinweis:Wir empfehlen dringend, nicht das br-Tag für Absatzabstände zu verwenden, da dies kein einheitliches Bild ergibt und nicht in allen Apps unterstützt wird.

Texthervorhebung (fett)

Benutze das strong-Tag für jeden Text innerhalb eines Absatzes, der mit fetter Schrift dargestellt werden soll. <strong>, </strong> OR <b>, </b>

Hinweis:Wir empfehlen, das b-Tag nicht zu verwenden, da es veraltet ist und zukünftig nicht mehr in Browsern und unseren Apps unterstützt wird.

Texthervorhebung (kursiv)

Benutze das em-Tag für jeden Text innerhalb des Absatzes, der kursiv hervorgehoben werden soll. <em>, </em>

Hinweis:Wir empfehlen, das i-Tag nicht zu verwenden, da es veraltet ist und zukünftig nicht mehr in Browsern und unseren Apps unterstützt wird.

Aufzählungen (Listen)

Benutze das ul-Tag für ungeordnete Listen(<ul>, </ul>) und das ol-Tag für geordnete (nummerierte) Listen (<ol>, </ol>) in Verbindung mit dem li-Tag für die einzelnen Listenelemente (<li>, </li>). Wir empfehlen den Einsatz der ungeordneten Listen, außer es gibt einen guten Grund zur Benutzung von geordneten Listen, da die Darstellung von ungeordneten Listen in den meisten Apps ein klareres visuelles Ergebnis bietet.

Hinweis:Wir empfehlen, list-style-type-Attribute nicht zu verwenden.

Hyperlinks nach außen

Diese Angaben sind nützlich, wenn du einen Nutzer aus der App auf eine Webseite weiterleiten möchtest. Der Standardbefehl (<a href=“http://(website)“>[gewünschte Hyperlink-Beschreibung]</a>) zum Verlinken bietet die Möglichkeit eine von dir gewünschte Beschreibung zu übernehmen. Du kannst die URL des Hyperlink, ein Wort oder eine Phrase anzeigen lassen, je nachdem, was im Kontext besser passt.

Hinweis: Wir sind eine kostenlose App, und hoffen, dass die Webseiten, auf die unsere Nutzer zu weiterführenden Inhalten geleitet werden, ebenfalls kostenlos sind. 

Bilder

Benutze das img-Tag um Bilder im Text einzubinden. Bilder benutzen immer die gesamte Textfeldbreite, das heißt, dass der Text in keiner der Apps um das Bild herumfließt. Aus diesem Grund wird eine Minimalbreite von 480 Pixel empfohlen, schmalere Bilder könnten gestreckt werden.

Hinweis:Benutze bitte keine zusätzlichen Attribute im img-Tag (wie width, height, border,align, etc), da sie eine korrekte Anzeige des Bildes verhindern.

Videos

Füge den regulären Youtube-Video iframe code in einem umschließenden div klassifizierten video-container ein.

<div class=“video-container“>
<iframe class=“youtube-player“ src=“http://www.youtube.com/embed/VIDEO_ID“ frameborder=“0″ allowfullscreen></iframe>
</div>

Hinweis:Benutze bitte keine zusätzlichen Attribute im iframe-Tag (width, height, border, align, etc), da sie eine korrekte Anzeige des Videos verhindern.

Dieser Beitrag ist auch verfügbar in: Afrikaans Spanisch Französisch Portugiesisch Rumänisch Chinesisch (vereinfacht) Chinesisch (traditionell)