HTML & CSS Übung zur Textauszeichnung

So knifflig mein Beitrag im ersten Moment erscheint,  so lehrreich ist die Wirkung für Anfänger. Es ist sozusagen (m)ein Einstieg in die Welt der HTML Auszeichnung.

Im Mittelpunkt des Beispieles steht: „Überschrift bei vorgegebenen Design Großschreibung (bspw. Theme Twenty Fourteen) in konkreter Schreibweise, farbig, mittig usw.“


Anmerkung: Die Elemente, also die Start-Tag, die Attribute (Selektoren), die Deklarationen („Eigenschaft-Wert“-Kombination), also der Aufbau* sind im Textverlauf Tag <code>.

* Syntax und Vokabular (ff.)


Elemente, Tags und Attribute

Element-  und Attributname <p style= für entsprechende Auszeichnungen.

Element-  und Attributname <span style= und <div style= für entsprechende Auszeichnungen. <span style= ist meist für definitive Titelauszeichnung bildhaft ↓.

HTML-seminar.de
DIV und SPAN

 

(2016-06-15)  Im diesen Beitrag sind für den Titel zuerst die <p style= und <div style= Auszeichnungen angeführt (des ähnlich Thema im Beitrag More-Tag …). Grundlegend ist die Schrift ohnehin mit CSS auszuzeichnen, aber für einzelne Hervorhebungen von Titel ist der Tag <span style=  geeignet.

Folgendes ist, wie es mir derzeit zur Auffassung gereichte – Hausgebrauchs zum Einlernen html Textauszeichnung für Betitelung und weiteren Auszeichnungen, und in praxi brauchbar!

Element- und Attributname <p style=

Den Titel anstatt der vorgegebenen Großschreibung entsprechend der konkreten Schreibweise anzuzeigen, gehen visuell im WP-Editor der Überschriftszeile folgende über Text (Hypertext) darstellende Buchstabenfolge:

Konkrete Schreibweise
Start-Tag (Elemntname, Attributname, Attribut und Attributwert):

<p style="text-transform: none;">

<p style="text-transform: none;">Den Titel in konkreter Schreibweise darstellen</p style>

Dargestellt:

Den Titel in konkreter Schreibweise darstellen

Und bspw. wenn der Titel ausschließlich in Kleinbuchstaben dargestellt sein soll:

Kleinbuchstaben

<p style="text-transform: lowercase;">

<p style="text-transform: lowercase;">Den Titel in Kleinschreibung darstellen</p style>

Dargestellt:

den titel in kleinschreibung darstellen

Link auf CSS 4 You
text-transform: Großschreibung

Allerdings zeichnet sich der Variationen im Inhaltsverzeichnis (durch Start-Tag <p> Absatzformatierung) vergrößerter Platzbedarf ab.

Daher ist möglich, wenn kein Absatz gewünscht:

Konkrete Schreibweise, kein Absatz

<p style="text-transform: none; margin: 0px; ">

<p style="text-transform: none; margin: 0px;">Titel in konkreter Schreibweise und Inhaltsverzeichnis normal</p>

Dargestellt:

Titel in konkreter Schreibweise und Inhaltsverzeichnis normal

… wenn kein Absatz und wie ohne Zeilenumbruch gewünscht, z. B. im Titel die Wortfolge „TWENTY FOURTEEN (Theme)“:

Schrift vom Theme und anschl. konkrete Schreibweise, kein Absatz und wie ohne Zeilenumbruch

<p style="text-transform:none; margin: 0px; display: inline;">

Twenty Fourteen <p style="text-transform: none; margin: 0px; display: inline;">(Theme)</p>

Dargestellt:

TWENTY FOURTEEN (Theme)

… wenn des Titels Wortfolge w. o. ohne Absatz und wie ohne Zeilenumbruch, aber umgekehrt, also in konkreter Schreibweise (gegenläufig des Theme Design von Großschreibung) und Großschreibung danach dargestellt sein möchte, z. B. „Konkrete Schreibweise (UND GROßSCHREIBUNG)“:

Konkrete Schreibweise und Großschreibung, kein Absatz und wie ohne Zeilenumbruch

<p style="display: inline; margin: 0px; text-transform: none;">Konkrete Schreibweise</p> <p style="display: inline; text-transform: uppercase;">(und Großschreibung)</p>

Dargestellt:

Konkrete Schreibweise (UND GROSSSCHREIBUNG)

Bitte zur Beachtung:  Es geht nicht das erste Element für „Konkrete Schreibweise“ allein – wie es im Beispiel „TWENTY FOURTEEN (Theme)“ in umgekehrter Reihenfolge funktionell ist – und die „Großschreibung“ dem Theme Design zu überlassen, weil dadurch im Inhaltsverzeichnis „Letzte Beiträge“, das wie durch Zeilenumbruch nicht konform dargestellt wird.

Merke: Mit den Attribut margin: 0px; wird kein Absatz (größerer Abstand zu den Zeilen) und mit display: inline; wird kein Zeilenumbruch dargestellt.

Einsetzbar ist auch w. o., im entweder oder, das Attribut mit dem Attributwert margin: 0px; im Element für Großschreibung:

<p style="display: inline; text-transform: none;">Konkrete Schreibweise</p> <p style="display: inline; margin: 0px; text-transform: uppercase;">(und Großschreibung)</p>

Dargestellt:

Konkrete Schreibweise (UND GROSSSCHREIBUNG)

Link zu kineo.de
Bildschirmfoto, kineo.de. Dieser Hinweis war z. Zt. durch diese Website zu finden.

↑ Inhaltsverz. 

Obige Beschreibungen sind gezielten Gebrauchs zur Übung – im Zusammenhang Titel ist aber bildhaft:

Element- und Attributname <span style=

Den Titel anstatt der vorgegebenen Großschreibung entsprechend der konkreten Schreibweise anzuzeigen, gehen visuell im WP-Editor der Überschriftszeile (Titel) folgender Elementname und Selektor <span style= mit Deklaration:

Konkrete Schreibweise, kein Absatz, daher ist Inhaltsverzeichnis normal

<span style="text-transform: none;">Titel in konkreter Schreibweise und Inhaltsverzeichnis normal</span>

Dargestellt:

Titel in konkreter Schreibweise und Inhaltsverzeichnis normal

Titel ausschließlich in Kleinbuchstaben:

Kleinbuchstaben

<span style="text-transform: lowercase;">Den Titel in Kleinschreibung darstellen</span>

Dargestellt:

den titel in kleinschreibung darstellen 

… wenn kein Absatz und wie ohne Zeilenumbruch gewünscht, z. B. im Titel die Wortfolge „TWENTY FOURTEEN (Theme)“:

Schrift vom Theme und konkrete Schreibweise, kein Absatz und wie ohne Zeilenumbruch

Twenty Fourteen <span style="text-transform: none;">(Theme)</span>

Dargestellt:

TWENTY FOURTEEN (Theme)

… wenn des Titels Wortfolge w. o. ohne Absatz und wie ohne Zeilenumbruch, aber umgekehrt, also in konkreter Schreibweise (gegenläufig des Theme Design von Großschreibung) und Großschreibung danach dargestellt sein möchte, z. B. „Konkrete Schreibweise (UND GROßSCHREIBUNG)“:

Konkrete Schreibweise und Großschreibung, kein Absatz und wie ohne Zeilenumbruch

<span style="text-transform: none;">Konkrete Schreibweise</span> <span style="text-transform: uppercase;">(und Großschreibung)</span>

Dargestellt:

Konkrete Schreibweise (UND GROSSSCHREIBUNG)

Anmerkung:  Die „Großschreibung“ kann auch dem Theme Design überlassen sein, wenn aber im Inhaltsverzeichnis (Vorheriger/Nächster Beitrag) die Großschreibung dargestellt sein soll ist das zweite Element konform.

Kleinere Schrift

Beispiel: Schrift vom Theme, und konkrete Schreibweise, kein Absatz (größerer Abstand im Inhaltsverzeichnis) aber kleinere Schrift mit Zeilenumbruch und der konforme Darstellung im Inhaltsverzeichnis/nächster Beitrag, allerdings mit Start-Tag <p> .

Eintrag – <p style="display: inline; margin: 0px; text-transform: none;">privat!</p><p style="margin: 0px; text-transform: none; font-size: small;">(Kennwort erforderlich)</p>

Zur Beachtung: Im zweiten Element ist der Zeilenumbruch im Titel und Inhaltsverzeichnis gewollt, daher der Tag mit Attribut <p style=… ohne Deklaration display: innline; eidetisch.

Wird dargestellt:

Eintrag – privat!
(Kennwort erforderlich)

Anmerkung: Darstellung der Überschrift im Menü (Design/Menü). Also im Menü evtl. „kleinere Schrift“ zur konformen Darstellung extra definieren, bspw. Eigenschaft mit Wert font-size: smaller;

Obigen Beispiels von Hinweis (Kennwort erforderlich) ebendort im Menü allein dieser Eintrag genügt, weil dies dann auf entsprechender Seite ohnehin angefordert wird.

font-size * Schriftgröße in HTML-Seiten
CSS, HTML und Javascript mit {stil}

Relative Schriftgrößen

larger
smaller

Die effektive Schriftgröße wird durch die Kombination von Monitor, Benutzervorlieben und Browser bestimmt.

Absolute Schriftgrößen

xx-small
x-small
small

(Voreinstellung – beim Fließtext in p-Tags sind das 1em oder 16 Pixel)

large
x-large
xx-large

Gegenläufig des Themes den Titel farbig:

<span style="color: #273288;">Schriftfarbe.</span>

(Der konkrete Attributwert/Farbnummer #273288 ist bspw.)

Dargestellt:

SCHRIFTFARBE.

Theme Vorgabe Großschreibung und gegenläufig in Color, anschließend konkrete Schreibweise dto. in Color:

<span style="color: #a17e4f">Theme, Schrift Color: <span style="text-transform: none;">Beachte: Schreibe span, nicht spam</span></span>

(Attributwert/Farbnummer #a17e4f ist bspw.)

Dargestellt:

THEME, SCHRIFT COLOR: Beachte: Schreibe span, nicht spam.

↑ Inhaltsverz. 

Den Text der erwählten Ansicht ausrichten – left, right, center

html/css CSS, HTML und Javascript mit {stil}

Element- und Attributname div style=

Beispiels Text Theme Titels in Großschreibung, mittig (Deklaration, text-align: center;) sodann Zeilenumbruch ohne Absatz, desselben mittig, aber gegenläufig von Theme in konkrete Schreibweise und kursiven Schrift durch Start-Tag <em> darunter wieder Text nach Vorgabe Theme und mittig hinstellen.

<div style="text-align: center;">Text mittig</div><p style="margin: 0px; text-transform: none; text-align: center;"><em>mit Zeilenumbruch und Kursiv</em></p><div style="text-align: center;">wie gewünscht.</div>

Dargestellt:

TEXT MITTIG

mit Zeilenumbruch und kursiv

WIE GEWÜNSCHT.

Fettschrift

Fettschrift, im Start- und End-Tag eingefügt, also Element:

<b>Text hervor gehoben</b>

Dargestellt:

TEXT HERVOR GEHOBEN

HTML-Seminar.de

image       image       image       image

Selbstredend geht es weiter mit
Schrift über CSS anpassen

Hinweis, Titel im Browser-Fenster bzw. Browser-Tab

Der Überschrift mit Zeilenumbruch im Leeren-Element-Tag <br /> ist darauf zu achten, davor ein Leerzeichen einzufügen, weil ansonsten der Stelle des Titels die Anzeige im Browser-Tab zusammengefügt ist.

↑ Inhaltsverz. 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. – und nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.