mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-06 13:18:49 +00:00
feat(slides): add "basics-of-html" slides
This commit is contained in:
Denis Ergin
parent
3ebeb6396d
commit
cc8682003e
8 changed files with 317 additions and 0 deletions
13
src/components/atoms/SlideCodeHighlight.astro
Normal file
13
src/components/atoms/SlideCodeHighlight.astro
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
language: 'html',
|
||||||
|
trim?: boolean
|
||||||
|
highlightLines?: Array<number | string>
|
||||||
|
}
|
||||||
|
|
||||||
|
const { language, trim, highlightLines } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<pre class={language}><code data-trim={trim ? "data-trim" : undefined} data-line-numbers={highlightLines?.join(',')}>
|
||||||
|
<slot />
|
||||||
|
</code></pre>
|
||||||
9
src/components/slides/html-basics/index.astro
Normal file
9
src/components/slides/html-basics/index.astro
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
import TitleSlide from './title.astro'
|
||||||
|
import TagBasics from './tags-basics/index.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="slides">
|
||||||
|
<TitleSlide />
|
||||||
|
<TagBasics />
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<h2>Wie sieht das minimalste HTML-Dokument aus</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>HTML-Dokument</h3>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers>
|
||||||
|
<!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>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>!DOCTYPE</h3>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers="1">
|
||||||
|
<!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>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Ein "altes" Artefakt aus alten HTML-Zeiten. Normalerweise wird mit diesem Code auf eine DTD verwiesen um valides HTML durchzusetzten.</p>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers>
|
||||||
|
<!DOCTYPE html PUBLIC
|
||||||
|
"-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
|
||||||
|
>
|
||||||
|
</code></pre>
|
||||||
|
<p>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!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Das HTML-Tag</h3>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers="2,12">
|
||||||
|
<!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>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>
|
||||||
|
Das HTML-tag bildet den äußersten Rahmen.
|
||||||
|
<br/>
|
||||||
|
In manchen Fällen wird hier auch vom "root" Element geredet.
|
||||||
|
<br/>
|
||||||
|
Alle weiteren Tags befinden sich innerhalb des HTML-Tag
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Das head-Tag</h3>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers="3,8">
|
||||||
|
<!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>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>
|
||||||
|
Inhalte innerhalb des head-Tag werden nicht im Browser angezeigt.
|
||||||
|
<br/>
|
||||||
|
Im head werden verschiedene Arten für Informationen bereit gestellt:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>Titel, Beschreibung und Keywords</li>
|
||||||
|
<li>CSS-Styling</li>
|
||||||
|
<li>Einbindung von JavaScript-Dateien</li>
|
||||||
|
<li>Meta-Informationen</li>
|
||||||
|
<li>und weitere...</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Innerhalb des head-Tag</h3>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers="4|5,6|7">
|
||||||
|
<!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>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4>Meta: Charset</h4>
|
||||||
|
<pre class="html"><code data-trim>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
</code></pre>
|
||||||
|
<p>
|
||||||
|
Dieses Meta-Tag beschreibt das Character Encoding, die der Webbrowser verwenden soll
|
||||||
|
<br/>
|
||||||
|
Weit verbreitet, wie in diesem Beispiel, ist UTF-8. UTF-8 deckt den breitesten Bereich an Sprachen ab die abgebildet werden können.
|
||||||
|
<br/>
|
||||||
|
Dieses Meta Tag sollte unbedingt gesetzt werden um Text-Darstellungsprobleme zu vermeiden.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4>Meta: name & content</h4>
|
||||||
|
<p>
|
||||||
|
Das meta-Tag kann auch generelle Informationen für den Browser beinhalten.
|
||||||
|
<br/>
|
||||||
|
Diese werden in der Kombination "name" und "content" überliefert.
|
||||||
|
</p>
|
||||||
|
<pre class="html"><code data-trim>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0"
|
||||||
|
>
|
||||||
|
</code></pre>
|
||||||
|
<p>
|
||||||
|
Das Viewport-Meta Tag kontrolliert die Größe des Viewports im Browser-Fenster.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>
|
||||||
|
Mit
|
||||||
|
<br/><code>width=device-width</code><br/>
|
||||||
|
teilen wir dem Browser-Fenster mit, dass es die vollständige (Geräte) Breite verwenden soll.
|
||||||
|
<br/>
|
||||||
|
Auf dem Laptop entspricht dies der Fenster-Breite des Programms. Auf mobilen Geräten entspricht das die Gerätebreite (in Pixeln).
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<code>initial-scale=1.0</code><br/>
|
||||||
|
definiert den Zoom den die Website zu beginn eingestellt haben soll.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Dieses Beispiel sollte auch in allen Websites angewandt werden, um eine korrekte Darstellung auf mobilen Geräten zu ermöglichen.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4><code>title</code> Tag</h4>
|
||||||
|
<p>
|
||||||
|
Das <code>title</code> Tag gibt den Titel der Website an.
|
||||||
|
<br>
|
||||||
|
Der Titel ist im Tab des Browser-Fensters zu sehen.
|
||||||
|
<br>
|
||||||
|
Außerdem verwendet Google (und andere Suchmaschinen) diesen Tag um dies als Ergebnis in den Suchen anzuzeigen.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Das <code>body</code>-Tag</h3>
|
||||||
|
<p>
|
||||||
|
Innerhalb des body Tag befindet sich der sichtbare Inhalt der Website.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
11
src/components/slides/html-basics/tags-basics/index.astro
Normal file
11
src/components/slides/html-basics/tags-basics/index.astro
Normal file
|
|
@ -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";
|
||||||
|
---
|
||||||
|
|
||||||
|
<>
|
||||||
|
<WhatIsHtml />
|
||||||
|
<WhatDoesATagLookLike />
|
||||||
|
<HtmlBasicStructure />
|
||||||
|
</>
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Aufbau eines HTML-Elements</h2>
|
||||||
|
<pre class="html"><code data-line-numbers data-trim>
|
||||||
|
<p>
|
||||||
|
Das ist ein Beispiel
|
||||||
|
</p>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Aufbau eines HTML-Elements</h2>
|
||||||
|
<pre><code data-line-numbers="1,3" data-trim>
|
||||||
|
<p> <!-- öffnendes Tag -->
|
||||||
|
Das ist ein Beispiel
|
||||||
|
</p> <!-- schließendes Tag -->
|
||||||
|
</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>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Attribute</h3>
|
||||||
|
<pre><code data-line-numbers="1" data-trim>
|
||||||
|
<p id="meine-id" class="klasse">
|
||||||
|
Das ist ein Beispiel
|
||||||
|
</p>
|
||||||
|
</code></pre>
|
||||||
|
<p>
|
||||||
|
In diesem Beispiel erhält das p-tag die attribute "id" und "class" mit den respektiven Werten "meine-id" und "klasse".
|
||||||
|
<br/>
|
||||||
|
Das id-Attribut wird in der Regel zur Identifikation im Dokument verwendet. Es kann zum Beispiel durch das a-Tag referenziert werden.
|
||||||
|
<br/>
|
||||||
|
Das class-Attribut wird im späteren Verlauf dazu verwendet um Styles auf das Element anzuwenden (hierzu später mehr).
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>
|
||||||
|
Weitere Attribute existieren und bestimmte Tags können mit weiteren spezielleren Attributen umgehen.
|
||||||
|
<br/>
|
||||||
|
In den folgenden Slides werden weitere Attribute gezeigt und deren (mögliche) Effekte erklärt.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4>Custom Attribute</h4>
|
||||||
|
<p>
|
||||||
|
Neben den bereits definierten Attributen die in diesem Kurs angesprochen werden, kann der Entwickler jederzeit eigene Attribute einem Element zuweisen.
|
||||||
|
<br/>
|
||||||
|
Diese "Custom"-Attribute werden hierfür mit dem Präfix "data-" versehen:
|
||||||
|
</p>
|
||||||
|
<pre class="html"><code data-trim>
|
||||||
|
<p data-custom-attribut="etwas">
|
||||||
|
Ein Beispiel zu Custom-Attributen
|
||||||
|
</p>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<section>
|
||||||
|
<h2>Was genau ist HTML?</h2>
|
||||||
|
<p>
|
||||||
|
HTML ist eine Auszeichnungssprache die vorgibt wie eine Website strukturiert ist.
|
||||||
|
HTML besteht aus <strong>Tags</strong> die ineinander geschachtelt werden können.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
3
src/components/slides/html-basics/title.astro
Normal file
3
src/components/slides/html-basics/title.astro
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<section>
|
||||||
|
<h2>HTML Basics</h2>
|
||||||
|
</section>
|
||||||
8
src/pages/slides/basics-of-html.astro
Normal file
8
src/pages/slides/basics-of-html.astro
Normal 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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue