mirrors/denis.ergin
1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-06 13:18:49 +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>

2
src/content/dhbw/de/web-engineering-i.mdx
View file

@ -55,7 +55,7 @@ Nun aber ans eingemachte! Was genau ist nun HTML? Was sind Tags / Elemente? Wie
Wir werden das Grundgerüst jeder HTML-Seite betrachten und wie wir zusätzliche Attribute setzten können und uns mit dem `head` Element auseinandersetzen.
<Card to="/slides/basics-of-html" color="blue">Zu den Slides</Card>
<Card to="/slides/html/01-basics" color="blue">Zu den Slides</Card>
<Spacer />
### # Die verschiedenen Arten von HTML-Elementen (Tags)

8
src/pages/slides/basics-of-html.astro
View file

@ -1,8 +0,0 @@
---
import Reveal from "../../layouts/Reveal.astro";
import HtmlBasicSlides from '../../components/slides/html-basics/index.astro'
---
<Reveal title="The Basics of HTML">
<HtmlBasicSlides />
</Reveal>

8
src/pages/slides/html/01-basics.astro Normal file
View file

@ -0,0 +1,8 @@
---
import Reveal from "../../../layouts/Reveal.astro";
import HtmlBasicSlides from '../../../components/slides/html-basics/index.astro'
---
<Reveal title="The Basics of HTML">
<HtmlBasicSlides />
</Reveal>