mirrors/denis.ergin
1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-08 07:38:46 +00:00
Code Activity

fix(slides): fix basics-of-html

Browse source 
moved index to slides/html/01-basics
This commit is contained in:
Denis Ergin 2025-01-11 10:07:47 +01:00
parent 8b2be42ab9
commit e3ac8b6406
5 changed files with 23 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/slides/html-basics/tags-basics/html-basic-structure.astro
View file

@ -169,6 +169,9 @@
<br/>
Auf dem Laptop entspricht dies der Fenster-Breite des Programms. Auf mobilen Geräten entspricht das die Gerätebreite (in Pixeln).
</p>
</section>
<section>
<p>
<code>initial-scale=1.0</code><br/>
definiert den Zoom den die Website zu beginn eingestellt haben soll.

22
src/components/slides/html-basics/tags-basics/what-does-a-tag-look-like.astro
View file

@ -3,36 +3,36 @@
<section>
<h2>Aufbau eines HTML-Elements</h2>
<pre class="html"><code data-line-numbers data-trim>
<p>
&lt;p&gt;
Das ist ein Beispiel
</p>
&lt;/p&gt;
</code></pre>
</section>
<section>
<h2>Aufbau eines HTML-Elements</h2>
<pre><code data-line-numbers="1,3" data-trim>
<p> <!-- öffnendes Tag -->
&lt;p&gt; &lt;!-- öffnendes Tag --&gt;
Das ist ein Beispiel
</p> <!-- schließendes Tag -->
&lt;/p&gt; &lt;!-- schließendes Tag --&gt;
</code></pre>
</section>
<section>
<h2>Aufbau eines HTML-Elements</h2>
<pre><code data-line-numbers="2" data-trim>
<p>
Das ist ein Beispiel <!-- Kind-Element -->
</p>
&lt;p&gt;
Das ist ein Beispiel &lt;!-- Kind-Element --&gt;
&lt;/p&gt;
</code></pre>
</section>
<section>
<h3>Attribute</h3>
<pre><code data-line-numbers="1" data-trim>
<p id="meine-id" class="klasse">
&lt;p id="meine-id" class="klasse"&gt;
Das ist ein Beispiel
</p>
&lt;/p&gt;
</code></pre>
<p>
In diesem Beispiel erhält das p-tag die attribute "id" und "class" mit den respektiven Werten "meine-id" und "klasse".
@ -59,9 +59,9 @@
Diese "Custom"-Attribute werden hierfür mit dem Präfix "data-" versehen:
</p>
<pre class="html"><code data-trim>
<p data-custom-attribut="etwas">
&lt;p data-custom-attribut="etwas"&gt;
Ein Beispiel zu Custom-Attributen
</p>
&lt;/p&gt;
</code></pre>
</section>
</section>