diff --git a/src/components/atoms/SlideCodeHighlight.astro b/src/components/atoms/SlideCodeHighlight.astro new file mode 100644 index 0000000..6fd1e41 --- /dev/null +++ b/src/components/atoms/SlideCodeHighlight.astro @@ -0,0 +1,13 @@ +--- +interface Props { + language: 'html', + trim?: boolean + highlightLines?: Array +} + +const { language, trim, highlightLines } = Astro.props; +--- + +

+  
+
\ No newline at end of file diff --git a/src/components/slides/html-basics/index.astro b/src/components/slides/html-basics/index.astro new file mode 100644 index 0000000..2b7f82e --- /dev/null +++ b/src/components/slides/html-basics/index.astro @@ -0,0 +1,9 @@ +--- +import TitleSlide from './title.astro' +import TagBasics from './tags-basics/index.astro' +--- + +
+ + +
\ No newline at end of file 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 new file mode 100644 index 0000000..7c3ec99 --- /dev/null +++ b/src/components/slides/html-basics/tags-basics/html-basic-structure.astro @@ -0,0 +1,199 @@ +
+
+

Wie sieht das minimalste HTML-Dokument aus

+
+ +
+

HTML-Dokument

+ 

+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+      </head>
+      <body>
+        <!-- Content -->
+      </body>
+      </html>
+
+
+ +
+

!DOCTYPE

+ 

+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+      </head>
+      <body>
+        <!-- Content -->
+      </body>
+      </html>
+
+
+ +
+

Ein "altes" Artefakt aus alten HTML-Zeiten. Normalerweise wird mit diesem Code auf eine DTD verwiesen um valides HTML durchzusetzten.

+ 

+      <!DOCTYPE html PUBLIC
+        "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
+      >
+
+

Dies ist aber heute in der Form nicht mehr notwendig. Die Kurzform ist ausreichend für heutige Standards und bezieht sich dabei auf HTML in der Version 5!

+
+ +
+

Das HTML-Tag

+ 

+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+      </head>
+      <body>
+        <!-- Content -->
+      </body>
+      </html>
+
+
+ +
+

+ Das HTML-tag bildet den äußersten Rahmen. +
+ In manchen Fällen wird hier auch vom "root" Element geredet. +
+ Alle weiteren Tags befinden sich innerhalb des HTML-Tag +

+
+ +
+

Das head-Tag

+ 

+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+      </head>
+      <body>
+        <!-- Content -->
+      </body>
+      </html>
+
+
+ +
+

+ Inhalte innerhalb des head-Tag werden nicht im Browser angezeigt. +
+ Im head werden verschiedene Arten für Informationen bereit gestellt: +

+
    +
  • Titel, Beschreibung und Keywords
    • +
  • CSS-Styling
    • +
  • Einbindung von JavaScript-Dateien
    • +
  • Meta-Informationen
    • +
  • und weitere...
    • +
+
+ +
+

Innerhalb des head-Tag

+ 

+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+      </head>
+      <body>
+        <!-- Content -->
+      </body>
+      </html>
+
+
+ +
+

Meta: Charset

+ 

+      <meta charset="UTF-8">
+
+

+ Dieses Meta-Tag beschreibt das Character Encoding, die der Webbrowser verwenden soll +
+ Weit verbreitet, wie in diesem Beispiel, ist UTF-8. UTF-8 deckt den breitesten Bereich an Sprachen ab die abgebildet werden können. +
+ Dieses Meta Tag sollte unbedingt gesetzt werden um Text-Darstellungsprobleme zu vermeiden. +

+
+ +
+

Meta: name & content

+

+ Das meta-Tag kann auch generelle Informationen für den Browser beinhalten. +
+ Diese werden in der Kombination "name" und "content" überliefert. +

+ 

+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0"
+      >
+
+

+ Das Viewport-Meta Tag kontrolliert die Größe des Viewports im Browser-Fenster. +

+
+ +
+

+ Mit +
width=device-width
+ teilen wir dem Browser-Fenster mit, dass es die vollständige (Geräte) Breite verwenden soll. +
+ 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. +

+

+ Dieses Beispiel sollte auch in allen Websites angewandt werden, um eine korrekte Darstellung auf mobilen Geräten zu ermöglichen. +

+
+ +
+

title Tag

+

+ Das title Tag gibt den Titel der Website an. +
+ Der Titel ist im Tab des Browser-Fensters zu sehen. +
+ Außerdem verwendet Google (und andere Suchmaschinen) diesen Tag um dies als Ergebnis in den Suchen anzuzeigen. +

+
+ +
+

Das body-Tag

+

+ Innerhalb des body Tag befindet sich der sichtbare Inhalt der Website. +

+
+
+ diff --git a/src/components/slides/html-basics/tags-basics/index.astro b/src/components/slides/html-basics/tags-basics/index.astro new file mode 100644 index 0000000..5e349e4 --- /dev/null +++ b/src/components/slides/html-basics/tags-basics/index.astro @@ -0,0 +1,11 @@ +--- +import WhatIsHtml from "./what-is-html.astro"; +import WhatDoesATagLookLike from "./what-does-a-tag-look-like.astro"; +import HtmlBasicStructure from "./html-basic-structure.astro"; +--- + +<> + + + + \ No newline at end of file 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 new file mode 100644 index 0000000..e410132 --- /dev/null +++ b/src/components/slides/html-basics/tags-basics/what-does-a-tag-look-like.astro @@ -0,0 +1,67 @@ +
+ +
+

Aufbau eines HTML-Elements

+ 

+      

+        Das ist ein Beispiel
+      

+
+
+ +
+

Aufbau eines HTML-Elements

+ 

+      
  
+        Das ist ein Beispiel
+      
 
+
+
+ +
+

Aufbau eines HTML-Elements

+ 

+      

+        Das ist ein Beispiel 
+      

+
+
+ +
+

Attribute

+ 

+      

+        Das ist ein Beispiel
+      

+
+

+ In diesem Beispiel erhält das p-tag die attribute "id" und "class" mit den respektiven Werten "meine-id" und "klasse". +
+ Das id-Attribut wird in der Regel zur Identifikation im Dokument verwendet. Es kann zum Beispiel durch das a-Tag referenziert werden. +
+ Das class-Attribut wird im späteren Verlauf dazu verwendet um Styles auf das Element anzuwenden (hierzu später mehr). +

+
+ +
+

+ Weitere Attribute existieren und bestimmte Tags können mit weiteren spezielleren Attributen umgehen. +
+ In den folgenden Slides werden weitere Attribute gezeigt und deren (mögliche) Effekte erklärt. +

+
+ +
+

Custom Attribute

+

+ Neben den bereits definierten Attributen die in diesem Kurs angesprochen werden, kann der Entwickler jederzeit eigene Attribute einem Element zuweisen. +
+ Diese "Custom"-Attribute werden hierfür mit dem Präfix "data-" versehen: +

+ 

+      

+        Ein Beispiel zu Custom-Attributen
+      

+
+
+
\ No newline at end of file diff --git a/src/components/slides/html-basics/tags-basics/what-is-html.astro b/src/components/slides/html-basics/tags-basics/what-is-html.astro new file mode 100644 index 0000000..953591b --- /dev/null +++ b/src/components/slides/html-basics/tags-basics/what-is-html.astro @@ -0,0 +1,7 @@ +
+

Was genau ist HTML?

+

+ HTML ist eine Auszeichnungssprache die vorgibt wie eine Website strukturiert ist. + HTML besteht aus Tags die ineinander geschachtelt werden können. +

+
\ No newline at end of file diff --git a/src/components/slides/html-basics/title.astro b/src/components/slides/html-basics/title.astro new file mode 100644 index 0000000..c1ace42 --- /dev/null +++ b/src/components/slides/html-basics/title.astro @@ -0,0 +1,3 @@ +
+

HTML Basics

+
\ No newline at end of file diff --git a/src/pages/slides/basics-of-html.astro b/src/pages/slides/basics-of-html.astro new file mode 100644 index 0000000..3d3b9d0 --- /dev/null +++ b/src/pages/slides/basics-of-html.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