From e3ac8b6406dbab8b16297cf56eb25e6712eacdc8 Mon Sep 17 00:00:00 2001 From: Denis Ergin Date: Sat, 11 Jan 2025 10:07:47 +0100 Subject: [PATCH] fix(slides): fix basics-of-html moved index to slides/html/01-basics --- .../tags-basics/html-basic-structure.astro | 3 +++ .../what-does-a-tag-look-like.astro | 22 +++++++++---------- src/content/dhbw/de/web-engineering-i.mdx | 2 +- src/pages/slides/basics-of-html.astro | 8 ------- src/pages/slides/html/01-basics.astro | 8 +++++++ 5 files changed, 23 insertions(+), 20 deletions(-) delete mode 100644 src/pages/slides/basics-of-html.astro create mode 100644 src/pages/slides/html/01-basics.astro diff --git a/src/components/slides/html-basics/tags-basics/html-basic-structure.astro b/src/components/slides/html-basics/tags-basics/html-basic-structure.astro index 7c3ec99..ec6d21a 100644 --- a/src/components/slides/html-basics/tags-basics/html-basic-structure.astro +++ b/src/components/slides/html-basics/tags-basics/html-basic-structure.astro @@ -169,6 +169,9 @@
Auf dem Laptop entspricht dies der Fenster-Breite des Programms. Auf mobilen Geräten entspricht das die Gerätebreite (in Pixeln).

+ + +

initial-scale=1.0
definiert den Zoom den die Website zu beginn eingestellt haben soll. diff --git a/src/components/slides/html-basics/tags-basics/what-does-a-tag-look-like.astro b/src/components/slides/html-basics/tags-basics/what-does-a-tag-look-like.astro index e410132..8c04fb2 100644 --- a/src/components/slides/html-basics/tags-basics/what-does-a-tag-look-like.astro +++ b/src/components/slides/html-basics/tags-basics/what-does-a-tag-look-like.astro @@ -3,36 +3,36 @@

Aufbau eines HTML-Elements


-      

+      <p>
         Das ist ein Beispiel
-      

+      </p>

Aufbau eines HTML-Elements


-      
  
+      <p>  <!-- öffnendes Tag -->
         Das ist ein Beispiel
-      
 
+      </p> <!-- schließendes Tag -->

Aufbau eines HTML-Elements


-      

-        Das ist ein Beispiel 
-      

+      <p>
+        Das ist ein Beispiel <!-- Kind-Element -->
+      </p>

Attribute


-      

+      <p id="meine-id" class="klasse">
         Das ist ein Beispiel
-      

+      </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 data-custom-attribut="etwas">
         Ein Beispiel zu Custom-Attributen
-      

+      </p>
\ No newline at end of file diff --git a/src/content/dhbw/de/web-engineering-i.mdx b/src/content/dhbw/de/web-engineering-i.mdx index fe38281..76e4e26 100644 --- a/src/content/dhbw/de/web-engineering-i.mdx +++ b/src/content/dhbw/de/web-engineering-i.mdx @@ -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. -Zu den Slides +Zu den Slides ### # Die verschiedenen Arten von HTML-Elementen (Tags) diff --git a/src/pages/slides/basics-of-html.astro b/src/pages/slides/basics-of-html.astro deleted file mode 100644 index 3d3b9d0..0000000 --- a/src/pages/slides/basics-of-html.astro +++ /dev/null @@ -1,8 +0,0 @@ ---- -import Reveal from "../../layouts/Reveal.astro"; -import HtmlBasicSlides from '../../components/slides/html-basics/index.astro' ---- - - - - \ No newline at end of file diff --git a/src/pages/slides/html/01-basics.astro b/src/pages/slides/html/01-basics.astro new file mode 100644 index 0000000..d4f4fe9 --- /dev/null +++ b/src/pages/slides/html/01-basics.astro @@ -0,0 +1,8 @@ +--- +import Reveal from "../../../layouts/Reveal.astro"; +import HtmlBasicSlides from '../../../components/slides/html-basics/index.astro' +--- + + + + \ No newline at end of file