HTML & CSS Übung zur Textauszeichnung

So knifflig* mein Beitrag im ersten Moment erscheint, so lehrreich ist die Wirkung. Es ist ein Einstieg in die Welt der HTML Auszeichnung. – Im Mittelpunkt steht, die "Überschrift bei vorgegebenen Design Großschreibung (bspw. Theme Twenty Fourteen) in konkreter Schreibweise, farbig, mittig usw."

* do not follow me!


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. Zum Beispiel fĂŒr die Titelauszeichnung hat sich meistens  <span style= bewĂ€hrt. 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.

Hausgebrauchs zum Einlernen html Textauszeichnung fĂŒr Betitelung und des Weiteren. Und es folgen Absatzweise ein paar lustige ZusammenhĂ€nge!

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. 


 Und wie ist Dein Erfolg des Beitrags?