diff --git a/basic/_sections.scss b/basic/_sections.scss index eb1f9b7..0075b21 100644 --- a/basic/_sections.scss +++ b/basic/_sections.scss @@ -33,12 +33,25 @@ section { } +aside.left + section { + margin-left: calc(#{$basic_aside_width} + #{$basic_space}); +} + nav { } aside { - + width: $basic_aside_width; + &.left { + float: left; + } + &.right { + float: right; + } + *:first-child { + margin-top: 0; + } } header { @@ -52,7 +65,7 @@ footer { // Headings // ----------------------------------------------------------------------------- -h1, h2, h3, h4, h5. h6 { +h1, h2, h3, h4, h5, h6 { } diff --git a/example.css b/example.css new file mode 100644 index 0000000..28ecb92 --- /dev/null +++ b/example.css @@ -0,0 +1,728 @@ +@charset "UTF-8"; +/* + * # TABLE OF CONTENTS + * + * - Reset + * - Configuration + * - Special modules + * - Basic styles + * - Common + * - Typography + * + * - Sections + * - Grouping + * - Textlevel + * - Embedded + * - Tables + * - Interactive + * - Modules + * + */ +@import url(other/normalize.css); +/** + * @description + * Generates flexbox properties for a given element + * + * @author romamatusevich + * + * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes + * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/ + * @link spec http://www.w3.org/TR/css3-flexbox/ + */ +/** + * @returns + * display: -webkit-box; + * display: -moz-box; + * display: -ms-flexbox; + * display: -webkit-flex; + * display: flex; + * + * @example + * .selector { + * @include x-display-flex; + * } + */ +/** + * @param values + * @returns + * -webkit-box-flex: ; + * -moz-box-flex: ; + * -webkit-flex: ; + * -ms-flex: ; + * flex: ; + * + * @example + * .selector { + * @include x-flex(1 1 auto); + * } + */ +/** + * @param value + * @returns + * -webkit-box-ordinal-group: ; + * -moz-box-ordinal-group: ; + * -ms-flex-order: ; + * -webkit-order: ; + * order: ; + * + * @example + * .selector { + * @include x-order(1); + * } + */ +/** + * @param value + * @returns + * -webkit-flex-wrap: ; + * -ms-flex-wrap: ; + * flex-wrap: ; + * + * @example + * .selector { + * @include x-flex-wrap(wrap); + * } + */ +/** + * @param value + * @returns + * -webkit-align-content: ; + * -moz-align-content: ; + * -ms-flex-line-pack: ; + * align-content: ; + * @example + * .selector { + * @include x-align-content(center); + * } + */ +/** + * @param value + * @returns + * -webkit-box-direction: ; + * -moz-box-direction: ; + * -webkit-box-orient: ; + * -moz-box-orient: ; + * -webkit-flex-direction: ; + * -moz-flex-direction: ; + * -ms-flex-direction: ; + * flex-direction: ; + * @example + * .selector { + * @include x-flex-direction(row-reverse); + * } + */ +/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */ +/** + * @description + * Generates cross-browser-compatible output for a given element with its value. + * + * @author sthag + * + * @param values + * @returns + * -webkit-: + * ...-: + * + * @example + * .selector + * @include vendor-prefix(hyphens, auto) + */ +.clear { + clear: both; } + .clear::before, .clear::after { + clear: both; } + +.float_left { + float: left; + margin-right: 32px; } + +.overflow { + overflow: auto; } + +.center_50 { + margin-right: 25%; + margin-left: 25%; } + +.center_25 { + margin-right: 37.5%; + margin-left: 37.5%; } + +.width_full { + width: 100%; + margin-right: 0; + margin-left: 0; } + +.div_body { + width: 96%; + margin: 0 auto; + border-top-width: 8px; + border-top-style: solid; + border-color: black; + padding-top: 32px; } +@media screen and (orientation: landscape) and (min-width: 1024px) { + .div_body { + width: 80%; } } +@media screen and (orientation: landscape) and (min-width: 1280px) { + .div_body { + width: 60%; } } +@media screen and (orientation: landscape) and (min-width: 1920px) { + .div_body { + width: 48%; } } + +@media screen and (orientation: portrait) and (min-width: 1024px) { + .div_body { + width: 80%; } } + +.relative { + position: relative; } + +.div_fix { + position: fixed; } + +.bottom { + bottom: 0; } + +.space_box { + float: left; + display: table; + width: 64px; + text-align: center; + vertical-align: middle; } + .space_box span { + display: table-cell; } + +.div_placeholder { + width: 100%; + height: 64px; + border: 4px solid rgba(0, 0, 0, 0.1); + border-radius: 4px; + padding: 8px; + background-color: rgba(0, 0, 0, 0.1); } + .div_placeholder svg { + vertical-align: top; } + +.div_placeholder_bkg { + width: 100%; + height: 64px; + border: 4px solid rgba(0, 0, 0, 0.1); + border-radius: 4px; + padding: 8px; + /*data:[][;charset=][;base64],*/ + background: url("data:image/svg+xml;utf8,") no-repeat; + background-color: rgba(0, 0, 0, 0.1); } + +.div_info { + padding: 16px 2em; + border-right: 8px solid rgba(82, 190, 209, 0.6); + background-color: rgba(82, 190, 209, 0.1) !important; } + +h6, p, .p_col_2, .p_col_3, caption, li, dt, dd, figcaption, .span_solo, th, td, legend, label { + font-family: Roboto, sans-serif; + font-size: 1em; + line-height: 1.5; } + +pre, code, .code_solo { + font-family: Courier New, monospace; + font-size: 1em; + line-height: 1.5; } + +h1, .exp_help_btn .span_solo { + font-family: Roboto, sans-serif; + font-size: 3.1em; + font-weight: 300; + line-height: 1.5; } + +h2 { + font-family: Roboto, sans-serif; + font-size: 2.5em; + font-weight: 300; + line-height: 1.5; } + +h3, h4 { + font-family: Roboto, sans-serif; + font-size: 1.8em; + font-weight: 300; + line-height: 1.5; } + +h5 { + font-family: Roboto, sans-serif; + font-size: 1.35em; + font-weight: 300; + line-height: 1.5; } + +.table_link .cell_text .shorten { + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; } + +.txt_center { + text-align: center; } + +.txt_right { + text-align: right; } + +html { + height: 100%; + box-sizing: border-box; } + +*, +::before, +::after { + box-sizing: inherit; } + +body { + font-family: Roboto, sans-serif; + font-size: 15px; + line-height: 1; + color: black; + background-color: gray; } + +aside.left + section { + margin-left: calc(20% + 8px); } + +aside { + width: 20%; } + aside.left { + float: left; } + aside.right { + float: right; } + aside *:first-child { + margin-top: 0; } + +h1 { + margin: 128px 0 32px; } + +h2 { + margin: 64px 0 32px; } + +h3 { + margin: 16px 0 16px; + text-transform: uppercase; } + +h4 { + margin: 16px 0 16px; + text-transform: none; } + +h5 { + margin: 16px 0 8px; + text-transform: none; } + +h6 { + margin: 8px 0; + text-transform: none; + font-weight: bold; } + +p, .p_col_2, .p_col_3, caption { + margin: 8px 0; + color: black; } + p code, .p_col_2 code, .p_col_3 code, caption code { + padding: 1px 4px; + font-size: 1em; + line-height: 1; } + +.p_col_line { + column-rule: 1px solid black; } + +.p_col_2 { + column-count: 2; + column-gap: 32px; } + +.p_col_3 { + column-count: 3; + column-gap: 64px; } + +hr, .hr_hidden, .hr_dotted { + margin: 32px auto; + border-width: 1px 0 0; + border-style: solid; + border-color: black; } + +.hr_hidden { + border-color: transparent; } + +.hr_dotted { + border-style: dotted; } + +.pre_code { + border-color: rgba(255, 255, 255, 0.1); + border-style: dotted; + border-width: 0 0 0 4px; + border-radius: 4px; + padding: 8px; + background-color: rgba(255, 255, 255, 0.1); } + .pre_code code { + background-color: transparent; } + +blockquote { + margin: 8px 2em; } + +.quote_mark p::before, .quote_mark .p_col_2::before, .quote_mark .p_col_3::before, .quote_mark caption::before { + content: "\201E \0020"; } +.quote_mark p::after, .quote_mark .p_col_2::after, .quote_mark .p_col_3::after, .quote_mark caption::after { + content: "\201C \0020"; } +.quote_mark .quote_source::before, .quote_mark .quote_source::after { + content: ""; } + +dl, ul, ol { + margin: 16px 0 8px; } + +ul, ol { + padding-left: 2em; } + +li, dt, dd { + color: black; } + +dd { + margin-left: 2em; } + +ul li { + list-style: none; + position: relative; } + ul li:before { + content: "_"; + position: absolute; + left: -1em; } + +figure { + margin: 16px 2em; } + +a { + color: #52bed1; + text-decoration: none; } + a:active, a:focus, a:hover { + color: white; } + +.link_line { + border-bottom-width: 1px; + border-bottom-style: dotted; + border-color: black; + background-color: transparent; + color: black; + transition: color 150ms ease; } + .link_line:active, .link_line:focus, .link_line:hover { + background-color: #0c85ff; + color: white; } + +i, em { + font-style: italic; } + +b, strong { + font-weight: 500; } + +cite { + font-style: italic; } + +code { + color: #1f1f1f; + background-color: rgba(255, 255, 255, 0.1); } + +.code_solo { + padding: 1px 4px; + color: black; } + +mark { + background-color: #fad803; } + +.mark_cursor { + color: white; + background-color: black; } + +::-moz-selection { + color: white; + background-color: black; } + +::selection { + color: white; + background-color: black; } + +.span_solo { + color: black; } + +img { + vertical-align: top; } + +table { + margin-top: 16px; + margin-bottom: 16px; + border: 1px solid black; + border-collapse: collapse; } + +th, td { + padding: 4px; } + +th { + border: 1px solid black; + text-align: left; } + +.precol { + border-right: 1px solid black; } + +td { + border-right: 1px solid #666666; + border-bottom: 1px solid #666666; } + +td:last-child { + border-right: 0; } + +tr:last-child td { + border-bottom: 0; } + +tfoot tr:first-child td { + border-top: 1px solid black; } + +.table_blank { + border: 1px solid transparent; } + .table_blank th, .table_blank td { + border: 1px solid transparent; } + +.table_free { + border: 1px solid transparent; } + +.table_stripe td { + border-top: 0; + border-bottom: 0; } +.table_stripe tr:nth-child(even) td { + background-color: #8c8c8c; } + +.table_fix { + table-layout: fixed; } + +caption { + padding: 4px 0; + border: 1px dotted black; + text-align: center; } + +.table_link { + width: 100%; + border: 0; + table-layout: auto; } + .table_link tbody { + border-bottom: 1px solid #666666; } + .table_link tbody:hover { + background-color: #8c8c8c; } + .table_link th, .table_link td { + border: 0; } + .table_link .cell_icon { + width: 48px; + text-align: center; } + .table_link .cell_icon img { + vertical-align: text-top; } + .table_link .cell_link { + padding-right: 8px; + padding-left: 8px; } + .table_link .cell_link:hover { + background-color: #0c85ff; } + .table_link .cell_link a { + display: block; } + .table_link .cell_link .link_url { + display: none; } + .table_link .cell_link:hover .link_url { + display: block; + color: white; } + .table_link .cell_link:hover .link_text { + display: none; } + .table_link .cell_date { + width: 12%; + text-align: center; } + .table_link .cell_text { + padding-right: 8px; + padding-left: 8px; } + .table_link .cell_text div { + width: 100%; } + .table_link .cell_text .shorten { + max-height: 44px; } + +fieldset { + margin: 8px 0; + border: 1px solid black; } + +legend { + padding: 0 4px; } + +label { + display: table; + margin: 4px 0; } + label input { + display: table-cell; + margin-left: 8px; + padding: 4px 5px; + border-style: solid; + border-color: transparent; + background-color: #404040; + color: #e6e6e6; } + label input:hover { + background-color: black; + color: white; } + +.card_body .bkg_box { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + +.card_body { + height: 100%; + /* .full { + position: absolute; + width: 128px; + height: 128px; + top: 16px; + left: 16px; + background-color: #fff; + } + + .mark { + float: left; + width: 32px; + height: 32px; + margin-top: 16px; + } + */ } + .card_body .bkg_box { + transition-duration: 800ms; + overflow: hidden; + vertical-align: top; + z-index: -1; } + .card_body .bkg_box > svg { + position: relative; } + .card_body .flex_wrap_center { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + height: 100%; } + .card_body .flex_content { + position: relative; + padding: 64px 64px 24px 64px; + border: 1px solid #FFF; + background-color: #F5F5F5; + z-index: 40; } + .card_body h1 { + margin: 16px 0; + color: #1E1E1E; + font-size: 24px; + line-height: 1.4em; + font-weight: normal; } + .card_body p, .card_body .p_col_2, .card_body .p_col_3, .card_body caption { + margin-top: 0; + margin-bottom: 16px; + font-size: 12px; + line-height: 1.4em; } + .card_body .marked { + padding-left: 1em; + text-indent: -1em; + text-align: center; } + .card_body .marked:before { + content: "* "; } + .card_body .decent { + color: #666; } + .card_body a { + color: #000; + text-decoration: none; } + .card_body a:hover { + color: #F4F9FA; + background-color: #0C85FF; + text-decoration: none; } + +.wip, .wip_txt { + border-right: 8px solid rgba(220, 20, 60, 0.8); + background-color: rgba(220, 20, 60, 0.1) !important; } + +.wip:before, .wip:after { + content: ""; + display: block; + height: 48px; } + +.exp_expose_pre:after { + content: ""; + display: block; + height: 48px; + background-color: rgba(183, 224, 240, 0.1) !important; } + +.exp_expose_post:before { + content: ""; + display: block; + height: 48px; + background-color: rgba(183, 224, 240, 0.1) !important; } + +.exp_expose:before, .exp_expose:after { + content: ""; + display: block; + height: 48px; + background-color: rgba(183, 224, 240, 0.1) !important; } + +.exp_pop { + display: none; } + +.exp_wrap { + position: relative; } + +.exp_pop { + position: absolute; + z-index: 100; + top: 128px; + left: 128px; + padding: 4px; + border: 4px solid gray; + border-radius: 4px; + background-color: gray; + pointer-events: none; } + +.exp_marker_pop { + position: absolute; + top: -11.25px; + right: -7.5px; + width: 15px; + height: 15px; + border: 1px solid white; + border-radius: 15px; + color: white; + background-color: black; } + +.exp_overlay_btn { + position: fixed; + width: 60px; + height: 60px; + cursor: pointer; } + +.exp_help_btn { + display: table; + right: 16px; + bottom: 16px; + background-color: rgba(0, 0, 0, 0.4); } + .exp_help_btn:hover { + background-color: white; } + .exp_help_btn:hover > .span_solo { + color: #52bed1; } + .exp_help_btn .span_solo { + display: table-cell; + color: rgba(82, 190, 209, 0.6); + font-weight: bold; + text-align: center; + vertical-align: middle; } + +.expose_height { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(183, 224, 240, 0.1) !important; + -webkit-transition: height 0.5s ease; + -ms-transition: height 0.5s ease; + -moz-transition: height 0.5s ease; + -o-transition: height 0.5s ease; + transition: height 0.5s ease; } + +/*# sourceMappingURL=example.css.map */ diff --git a/example.html b/example.html new file mode 100644 index 0000000..cb23b89 --- /dev/null +++ b/example.html @@ -0,0 +1,478 @@ + + + + + + Dummy + + + + + + + + + + + + +
+
?
+
+ +
+ Dies ist einfach nur Text.
Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen. +

Es wirken nur die Eigenschaften des <body> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.

+

Bereiche

+
+
+

Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <article>. Solch ein Element wird oft detailliert gestaltet kommt aber auch ohne jegliche Gestaltung aus.

+

Noch allgemeiner ist das <section> Element. Es schafft Bereiche um Inhalte zu strukturieren.

+

Bestimmte Bereiche haben einen vorgegebene Zweck.
Folgende Bereiche sind vorgegeben:

+
+ + +
+
+

Um einleitenden Inhalt festzuhalten, wird das <header> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.

+ +
+
+

Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <footer> eingesetzt.

+
+
+ +
+

Zur feineren Strukturierung und Gliederung von Texten sind einige weitere Elemente verfügbar. Diese werden nun der Reihe nach aufgeführt. Zu Beginn die Überschriften, da sie noch zu den Abschnitten gehören. Das kommt vermutlich daher, da Abschnitte häufig eine kennzeichnende Überschrift beinhalten.

+

Überschrift 1

+

Eine Überschrift erster Ordnung <h1> ist sehr groß und steht daher oft außerhalb eines Textflusses. Sie schafft eine deutliche Trennung sowohl inhaltlich wie auch optisch. Sie erzeugt einen Abstand gleich der horizontalen Linie über sich.

+

Überschrift 2

+

Die weiteren Überschriften <h2> bis <h6> gliedern Text und werden auch als Titel für andere Elemente eingesetzt.

+

Überschrift 3 ist in Großbuchstaben gesetzt

+

Überschrift 4 verwendet normale Buchstaben und gleicht ansonsten Überschrift 3

+
Überschrift 5 ist Überschrift 5
+
Überschrift 6
+

Schließlich eine Überschrift in der Größe des Fließtextes. Allerdings in fett.

+

Gruppierung

+

Ein Absatz <p>. Zugegeben ein kurzer.

+

Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.
Einfache Zeilenumbrüche werden darin mit <br> erreicht.

+

Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:

+

Text sitzt gerne auch mal zentriert.

p.txt_center
+

Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.

p.txt_right
+

Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte <hr> Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.

+
+

Es ist auch eine unsichtbare Unterteilung möglich:

+
hr.hr_hidden
+

Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:

+
hr.hr_dotted
+
hr.center_50
+
hr.hr_dotted.center_25
+

Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.

p.p_col_2
+

Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.

p.p_col_3.p_col_line
+

Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.
Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.

+

Es gibt die Möglichkeit vorformatierten Text darzustellen <pre>.

+ 
Dadurch
	bleiben
		Einrückungen
			durch
				Tabulatoren
					erhalten.
+

Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <ul> und geordnete Listen <ol> sowie Beschreibungslisten <dl>. Die beiden ersten Varianten beinhalten das Listenelement <li>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <dt> und Beschreibung <dd>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:

+
    +
  • Ungeordnete
    • +
  • Liste
    • +
+
    +
  1. Geordnete
    2. +
  2. Liste
    3. +
+
+
Beschreibungsliste
+
Auch Definitionslisten genannt
+
Ausdruck
+
Beschreibung
+
+

Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat <blockquote> zur Anwendung. Es besteht aus der Aussage und der Quelle.

+
+

Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen, vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text oder ein Hinweis auf eine bestimmte Textstelle.

+

Wikipedia

+
+
blockquote>p+p.quote_source
+

Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <figure> umschlossen und tragen eine Bezeichnung.

+
+
Fahne
+ + + + + + + + + + + +
+
figure>figcaption+{element}
+

Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch <div>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.

+

Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.

+

Eine sehr klar definierte Gruppierung stellt das Element <main> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.

+

Textebene

+

Verweise

+

Ein wesentlicher Bestandteil von Hypertext sind Verweise <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. Interne Verweisetable>tbody>tr>td*2^tr>td[colspan=2] können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. Externe Verweise verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.

+

Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. Farbige oder unterstrichene Varianten sind möglich.

+

Wird der Verweis innerhalb eines <nav> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen ...

+

Formatierungen

+

Texte, Wörter oder Zeichen können vielfältig formatiert werden. Sie können fett <b> oder kursiv <i> geschrieben sein. Auch beides ist möglich!?! Sollen sie nicht nur anders aussehen, sondern auch eine besondere inhaltliche Bedeutung bekommen, werden sie mit <strong> und <em> ausgezeichnet.

+

Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.

+
+

Das kannst du schon so machen aber dann isses halt Kacke.

+

o. V.

+
+
blockquote.quote_mark>p+p.quote_source
+

Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <cite> ausgezeichnet werden. Pulp Fiction, super Film - zum Beispiel.

+

Auch die Auszeichnung <code> wurde bis hier hin schon verwendet. Sie markiert Maschinensprache. Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <pre> verwendet:

+ 
<html>
  <head>
    <title>Hyper Text Markup Language</title>
  </head>
  <body id="root">
    <!-- Content goes here -->
    <p class="example">Just like this.</p>
  </body>
</html>
+

Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.

+

Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:

+

Beispiel zum markieren ^^.

+

Eine Markierung kann, mittels <mark>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: Diese Worte sind markiert.

+ +

Änderungen

+ +

Eingebundene Inhalte

+ + + +

Tabellen

+

Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt. Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im folgenden aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert oder richten sich nach ihrem Inhalt. Das gilt auch für die einzelnen Zellen....

+ + + + + + + + + + +
Eineeinfache
Tabelle
+
table.width_full>tbody>tr>td*2^tr>td[colspan=2]
+
+ + + + + + + + + + +
Einefließende
Tabelle
+
table>tbody>tr>td*2^tr>td[colspan=2]
+ + + + + + + + + + +
Mitohne
Linien
+
table.table_blank>tbody>tr>td*2^tr>td[colspan=2]
+
+

Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Beschreibung bzw. Zusammenhang der Tabelle
KopfzeileAB
FußzeileAB
Tabelle
mitTitel
Kopf-und
Fußzeile
+
table.width_full.table_fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3
+
+

Viele weitere Formate sind möglich ...

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KopfzeileAB
VorspalteEine
1erweiterte
2Tabelle
+
table.width_full>thead>tr>th.precol+th[colspan=2]^^tbody>tr>td.precol+td*2^tr>td.precol+td[colspan=2]
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KopfzeileAB
Tabelle
ohneRahmen
jedochmit
Streifen
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Ab / Zy Neu / Alt
NameURLYYYY-MM-DD
+
Beschreibung
+
NameURLYYYY-MM-DD
+
Beschreibung
+
+ +
table.table_link>thead>tr>th*3^^(tbody>tr>td.cell_icon[rowspan=2]>img[width=16 height=16]^+td.cell_link>a.link_text[target=_blank]+a.link_url[target=_blank]^+td.cell_date[rowspan=2]{YYYY-MM-DD}^tr>td.cell_text>div.shorten)*2
+ +

Formulare

+

Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Sie sind in ihrer unveränderten Gestalt, System- bzw. Browser-Abhängig. (Vielleicht ist das auch scheiße, hier darauf einzugehen) ...

+ +
+ Einfache Eingabefelder + + +
+
+ Weitere Zeicheneingabefelder +

Diese Eingabefelder sind zusätzlich aneinander ausgerichtet und gruppiert.

+ + +
+ + + + + + + + + + + + +

Interaktive Elemente

+ + + +

Struktur

+
+ + + + +
+
+
+

Medien

+
+ + + + \ No newline at end of file