feat: Change and move content
- Add info to basics - Move table variants from basic to components
This commit is contained in:
parent
4cf279bee5
commit
b039c506a8
3 changed files with 133 additions and 100 deletions
|
|
@ -203,20 +203,24 @@ tags:
|
||||||
<div class="exp_pop">
|
<div class="exp_pop">
|
||||||
<code class="code_solo">figure>figcaption+{element}</code>
|
<code class="code_solo">figure>figcaption+{element}</code>
|
||||||
</div>
|
</div>
|
||||||
|
<hr class="hr_hidden">
|
||||||
<p>Eine sehr klar definierte Gruppierung stellt das Element
|
<p>Eine sehr klar definierte Gruppierung stellt das Element
|
||||||
<code><main></code>
|
<code><main></code>
|
||||||
dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
|
dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
|
||||||
<p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch
|
<p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch
|
||||||
<code><div></code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
|
<code><div></code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
|
||||||
<div class="div_info">
|
<div class="div_info js_pop">
|
||||||
<p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p>
|
<p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="exp_pop">
|
||||||
|
<code class="code_solo">div.div_info>p</code>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article>
|
<article>
|
||||||
<h1 id="textlevel">Textebene</h1>
|
<h1 id="textlevel">Textebene</h1>
|
||||||
{# // a // em // strong // small // s // cite // q // dfn // abbr // ruby // rb // rt // rtc // rp // data // time // code // var // samp // kbd // sub // sup // i // b // u // mark // bdi // bdo // span // br // wbr // -- Edits -- // ins // del #}
|
{# // a // em // strong // small // s // cite // q // dfn // abbr // ruby // rb // rt // rtc // rp // data // time // code // var // samp // kbd // sub // sup // i // b // u // mark // bdi // bdo // span // br // wbr // -- Edits -- // ins // del #}
|
||||||
<h2>Verweise</h2>
|
<h2>Verweise</h2>
|
||||||
<p>Ein wesentlicher Bestandteil von Hypertext sind Verweise
|
<p>Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
|
||||||
<code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden.
|
<code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden.
|
||||||
<a class="a_internal js_pop" href="#links">Interne Verweise</a>
|
<a class="a_internal js_pop" href="#links">Interne Verweise</a>
|
||||||
<span class="exp_pop">
|
<span class="exp_pop">
|
||||||
|
|
@ -590,8 +594,7 @@ tags:
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Tabelle</td>
|
<td>Tabelle</td>
|
||||||
<td></td>
|
<td colspan="2"></td>
|
||||||
<td></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>mit</td>
|
<td>mit</td>
|
||||||
|
|
@ -599,117 +602,27 @@ tags:
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<td rowspan="2"></td>
|
||||||
<td>Kopf-</td>
|
<td>Kopf-</td>
|
||||||
<td>und</td>
|
<td>und</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>Fußzeile</td>
|
<td>Fußzeile</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Fußzeile</td>
|
<th scope="row">Fußzeile</th>
|
||||||
<td>A</td>
|
<td>A</td>
|
||||||
<td>B</td>
|
<td>B</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
<div class="exp_pop">
|
<div class="exp_pop">
|
||||||
<code class="code_solo">table.width_full.table_fix>caption+thead>tr>th*3^^tbody>(tr>td*3)*3^^tfoot>tr>td*3</code>
|
<code class="code_solo">table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
|
||||||
</div>
|
</div>
|
||||||
<hr class="hr_hidden">
|
<p>Viele weitere Formate sind möglich.</p>
|
||||||
<p>Viele weitere Formate sind möglich. Hier nur einige typische Beispiele:</p>
|
|
||||||
<table class="width_full table_fix js_pop">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="cell_pre" scope="col"></th>
|
|
||||||
<th scope="col">Kopfzeile</th>
|
|
||||||
<th scope="col">A</th>
|
|
||||||
<th scope="col">B</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_pre">Vorspalte</td>
|
|
||||||
<td>Eine</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_pre">1</td>
|
|
||||||
<td></td>
|
|
||||||
<td>erweiterte</td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_pre">2</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td>Tabelle</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="exp_pop">
|
|
||||||
<code class="code_solo">table.width_full.table_stripe.table_free>tr>td*3</code>
|
|
||||||
</div>
|
|
||||||
<table class="width_full table_stripe table_fix table_free">
|
|
||||||
<tr>
|
|
||||||
<td>Tabelle</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ohne</td>
|
|
||||||
<td>Rahmen</td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td></td>
|
|
||||||
<td>jedoch</td>
|
|
||||||
<td>mit</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td>Streifen</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<table>
|
|
||||||
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">Bezeichnung</th>
|
|
||||||
<th scope="col">Menge</th>
|
|
||||||
<th scope="col">Wert</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Alpha</td>
|
|
||||||
<td>1</td>
|
|
||||||
<td class="txt_right">8990</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Bravo</td>
|
|
||||||
<td>10</td>
|
|
||||||
<td class="txt_right">1</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Charlie</td>
|
|
||||||
<td>1</td>
|
|
||||||
<td class="txt_right">1</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
|
||||||
<td class="txt_right" title=">9000">9001</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</article>
|
</article>
|
||||||
<article>
|
<article>
|
||||||
<h1>Formulare</h1>
|
<h1>Formulare</h1>
|
||||||
|
|
|
||||||
|
|
@ -46,8 +46,9 @@ tags:
|
||||||
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
|
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
|
||||||
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
|
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
|
||||||
</header>
|
</header>
|
||||||
|
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h4{Varianten}</code></pre>
|
||||||
<article>
|
<article>
|
||||||
<h1>Bereiche</h1>
|
<h1 id="sections">Bereiche</h1>
|
||||||
<p>Elemente:</p>
|
<p>Elemente:</p>
|
||||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||||
<h2><body></h2>
|
<h2><body></h2>
|
||||||
|
|
@ -62,6 +63,125 @@ tags:
|
||||||
<h2><h3></h2>
|
<h2><h3></h2>
|
||||||
<h2><h4></h2>
|
<h2><h4></h2>
|
||||||
</article>
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1 id="grouping">Gruppierung</h1>
|
||||||
|
<p>Elemente:</p>
|
||||||
|
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
|
||||||
|
<h2><p></h2>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>p.txt_center</code></pre>
|
||||||
|
<pre class="pre_code"><code>p.txt_right</code></pre>
|
||||||
|
<pre class="pre_code"><code>p.column_2</code></pre>
|
||||||
|
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
|
||||||
|
<h2><hr></h2>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>hr.hr_hidden</code></pre>
|
||||||
|
<pre class="pre_code"><code>hr.hr_dotted</code></pre>
|
||||||
|
<pre class="pre_code"><code>hr.space_even_half</code></pre>
|
||||||
|
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
|
||||||
|
<h2><blockquote></h2>
|
||||||
|
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
|
||||||
|
<h2><figure></h2>
|
||||||
|
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||||
|
<h2><div></h2>
|
||||||
|
<pre class="pre_code"><code>div.div_info>p</code></pre>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h1 id="tabularData">Tabellen</h1>
|
||||||
|
<p>Elemente:</p>
|
||||||
|
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
|
||||||
|
<h2><table></h2>
|
||||||
|
<h4>Varianten</h4>
|
||||||
|
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
|
||||||
|
<table class="width_full table_fix js_pop">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="cell_pre" scope="col"></th>
|
||||||
|
<th scope="col">Kopfzeile</th>
|
||||||
|
<th scope="col">A</th>
|
||||||
|
<th scope="col">B</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_pre">Vorspalte</td>
|
||||||
|
<td>Eine</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_pre">1</td>
|
||||||
|
<td></td>
|
||||||
|
<td>erweiterte</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_pre">2</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td>Tabelle</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
|
||||||
|
<table class="width_full table_stripe table_fix table_free">
|
||||||
|
<tr>
|
||||||
|
<td>Tabelle</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>ohne</td>
|
||||||
|
<td>Rahmen</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>jedoch</td>
|
||||||
|
<td>mit</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td>Streifen</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
|
||||||
|
<table>
|
||||||
|
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Bezeichnung</th>
|
||||||
|
<th scope="col">Menge</th>
|
||||||
|
<th scope="col">Wert</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Alpha</td>
|
||||||
|
<td>1</td>
|
||||||
|
<td class="txt_right">8990</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bravo</td>
|
||||||
|
<td>10</td>
|
||||||
|
<td class="txt_right">1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charlie</td>
|
||||||
|
<td>1</td>
|
||||||
|
<td class="txt_right">1</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
||||||
|
<td class="txt_right" title=">9000">9001</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -147,6 +147,6 @@ tags:
|
||||||
// Create a new NewDiv instance
|
// Create a new NewDiv instance
|
||||||
const newDiv = new NewDiv(100, 100, 800, 600, '#000');
|
const newDiv = new NewDiv(100, 100, 800, 600, '#000');
|
||||||
newDiv.createDiv();
|
newDiv.createDiv();
|
||||||
newDiv.appendToFrame(document.getElementById('space'));
|
newDiv.appendToFrame(space);
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue