From f68474062324c272042c694879687ba047f72e25 Mon Sep 17 00:00:00 2001
From: welle7 <andreas@perin.li>
Date: Tue, 11 Feb 2020 10:05:43 +0100
Subject: [PATCH] struktur

---
 README.md          |  3 +-
 html/semantik.html | 52 +++++++++++++++++++++++++++++++
 html/struktur.html | 76 ++++++++++++++++++++++++++++++++++++++++++++++
 img/logo.svg       | 28 +++++++++++++++++
 4 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 html/semantik.html
 create mode 100644 html/struktur.html
 create mode 100644 img/logo.svg
diff --git a/README.md b/README.md
index d1743be..fd2bcfd 100644
--- a/README.md
+++ b/README.md
@@ -24,4 +24,5 @@
  * [Browser Test](https://html5test.com/)
 
  ### Interne Links
- * [Semantische Tags](html/semantic.html)
\ No newline at end of file
+ * [Semantische Tags](html/semantik.html)
+ * [Seitenstruktur](html/struktur.html)
\ No newline at end of file
diff --git a/html/semantik.html b/html/semantik.html
new file mode 100644
index 0000000..c7ed5cf
--- /dev/null
+++ b/html/semantik.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML Semantic Tags</title>
+    <link rel="stylesheet" href="../css/code.css">
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+
+<body>
+    <main>
+        <header>
+            <h1>HTML Semantische Tags</h1>
+        </header>
+        <pre class=" language-html">
+        <code class=" language-html">
+            &#60;abbr&#62; Abbreviation
+            &#60;acronym&#62; Acronym
+            &#60;blockquote&#62; Long quotation
+            &#60;dfn&#62; Definition
+            &#60;address&#62; Address for author(s) of the document
+            &#60;cite&#62; Citation
+            &#60;code&#62; Code reference
+            &#60;tt&#62; Teletype text
+            &#60;div&#62; Logical division
+            &#60;span&#62; Generic inline style container
+            &#60;del&#62; Deleted text
+            &#60;ins&#62; Inserted text
+            &#60;em&#62; Emphasis
+            &#60;strong&#62; Strong emphasis
+            &#60;h1&#62; First-level headline
+            &#60;h2&#62; Second-level headline
+            &#60;h3&#62; Third-level headline
+            &#60;h4&#62; Fourth-level headline
+            &#60;h5&#62; Fifth-level headline
+            &#60;h6&#62; Sixth-level headline
+            &#60;hr&#62; Thematic break
+            &#60;kbd&#62; Text to be entered by the user
+            &#60;pre&#62; Pre-formatted text
+            &#60;q&#62; Short inline quotation
+            &#60;samp&#62; Sample output
+        </pre></code>
+    </main>
+    <footer>
+        <a href="https://git.perin.work/andy/webdev">Download</a>
+    </footer>
+    <script src="../js/code.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/html/struktur.html b/html/struktur.html
new file mode 100644
index 0000000..8388442
--- /dev/null
+++ b/html/struktur.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Die HTML Struktur in Webseiten">
+    <title>HTML Struktur</title>
+    <link rel="stylesheet" href="../css/code.css">
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+
+<body>
+    <header>
+        <img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes">
+        <nav role="navigation">
+            <ul>
+                <li><a title="Zur Startseite" href="#link1">Home</a></li>
+                <li><a title="Unsere News" href="#link2">Aktuell</a></li>
+                <li><a title="Alle Produkte auf einen Blick" href="link3">Produkte</a></li>
+                <li><a title="Dienstleistungen" href="#link4">Service</a></li>
+                <li><a title="Hier sind wir" href="#link5">Kontakt</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main role="main">
+        <h1>HTML5 Struktur einer Webseite</h1>
+        <article>
+            <h2>Artikel 1</h2>
+                <pre class="language-html">
+                    <code class="language-html">
+                        &lt;!DOCTYPE html&gt;
+                        &lt;html lang=&quot;de&quot;&gt;
+                        &lt;head&gt;
+                            &lt;meta charset=&quot;UTF-8&quot;&gt;
+                            &lt;title&gt;HTML Struktur&lt;/title&gt;
+                        &lt;/head&gt;
+                        &lt;body&gt;
+                            &lt;header&gt;
+                                &lt;nav&gt;
+                                    &lt;ul&gt;
+                                &lt;/nav&gt;
+                            &lt;/header&gt;
+                            &lt;main&gt;
+                                &lt;h1&gt;Html Struktur einer Webseite&lt;/h1&gt;
+                                &lt;article&gt;
+                                    &lt;h2&gt;Artikel 1&lt;/h1&gt; 
+                                &lt;/article&gt;
+                                &lt;aside&gt;
+                                    &lt;h2&gt;Artikel 2&lt;/h2&gt;
+                                &lt;/aside&gt;
+                            &lt;/main&gt;
+                            &lt;footer&gt;
+                            &lt;/footer&gt;
+                        &lt;/body&gt;
+                        &lt;/html&gt;
+                    </code>
+                </pre>
+        </article>
+
+        <aside>
+            <h2>Artikel 2</h2>
+            <p>Diese Seite enthält zunächst die Struktur und wenig Inhalt.<br>
+            Das <strong>Bild</strong> erhält ein <strong>title</strong> und ein <strong>alt Attribut</strong>. Die <strong>Links</strong> erhalten ein <strong>title Attribut</strong>.
+        </p>
+        </aside>
+    </main>
+
+    <footer>
+        <a href="https://git.perin.work/andy/webdev">Download</a>
+    </footer>
+    <script src="../js/code.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/img/logo.svg b/img/logo.svg
new file mode 100644
index 0000000..ed125b9
--- /dev/null
+++ b/img/logo.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="248.69" height="36.218" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g transform="translate(-225.65 -514.25)">
+  <path d="m248.22 549.91h-4.625l-0.501-0.278-11.423-22.4 0.279 22.121c0 0.39-0.167 0.557-0.557 0.557h-5.182c-0.39 0-0.557-0.167-0.557-0.557v-33.989c0-0.39 0.167-0.558 0.557-0.558h4.681l0.501 0.279 11.366 22.622-0.223-22.343c0-0.39 0.167-0.558 0.557-0.558h5.126c0.334 0 0.557 0.168 0.557 0.558v33.989c1e-3 0.39-0.166 0.557-0.556 0.557z"/>
+  <path d="m301.26 520.66h-6.073c-0.39 0-0.558 0.168-0.558 0.558v28.139c0 0.39-0.167 0.557-0.557 0.557h-5.238c-0.39 0-0.558-0.167-0.558-0.557v-28.139c0-0.39-0.167-0.558-0.557-0.558h-6.073c-0.39 0-0.557-0.167-0.557-0.557v-4.736c0-0.39 0.167-0.558 0.557-0.558h19.613c0.334 0 0.557 0.168 0.557 0.558v4.736c1e-3 0.39-0.166 0.557-0.556 0.557z"/>
+  <path d="m256.86 520.66c-0.39 0-0.557-0.167-0.557-0.557v-4.736c0-0.39 0.167-0.558 0.557-0.558h19.613c0.334 0 0.557 0.168 0.557 0.558v4.736c0 0.39-0.167 0.557-0.557 0.557h-19.613z"/>
+  <path d="m256.86 535.06c-0.39 0-0.557-0.167-0.557-0.558v-4.735c0-0.391 0.167-0.558 0.557-0.558h19.613c0.334 0 0.557 0.167 0.557 0.558v4.735c0 0.391-0.167 0.558-0.557 0.558h-19.613z"/>
+  <path d="m256.86 550.01c-0.39 0-0.557-0.167-0.557-0.558v-4.736c0-0.39 0.167-0.557 0.557-0.557h19.613c0.334 0 0.557 0.167 0.557 0.557v4.736c0 0.391-0.167 0.558-0.557 0.558h-19.613z"/>
+  <path d="m331.43 520.66c-0.39 0-0.557-0.167-0.557-0.557v-4.736c0-0.39 0.167-0.558 0.557-0.558h19.613c0.334 0 0.558 0.168 0.558 0.558v4.736c0 0.39-0.167 0.557-0.558 0.557h-19.613z"/>
+  <path d="m331.43 535.06c-0.39 0-0.557-0.167-0.557-0.558v-4.735c0-0.391 0.167-0.558 0.557-0.558h19.613c0.334 0 0.558 0.167 0.558 0.558v4.735c0 0.391-0.167 0.558-0.558 0.558h-19.613z"/>
+  <path d="m331.43 550.01c-0.39 0-0.557-0.167-0.557-0.558v-4.736c0-0.39 0.167-0.557 0.557-0.557h19.613c0.334 0 0.558 0.167 0.558 0.557v4.736c0 0.391-0.167 0.558-0.558 0.558h-19.613z"/>
+  <path d="m310.9 524.12c0 2.618 2.563 3.398 6.463 5.183 5.962 2.729 8.748 5.794 8.748 11.311 0 5.906-4.067 9.862-10.363 9.862h-2.229c-3.176 0-5.572-0.892-7.243-2.619-1.839-1.895-2.563-3.51-2.563-4.067 0-0.111 0.112-0.278 0.334-0.39l4.848-2.396c0.111-0.056 0.167-0.056 0.278-0.056 0.39 0 0.502 0.558 1.059 1.672 0.613 1.17 2.006 2.006 3.288 2.006h2.229c2.173 0 4.012-1.783 4.012-4.012 0-2.786-2.34-3.789-5.962-5.517-6.129-2.953-9.25-5.46-9.25-10.977 0-5.906 4.123-9.862 10.364-9.862h0.836c2.563 0 4.568 0.557 6.352 1.839 2.174 1.561 3.566 4.067 3.566 4.736 0 0.223-0.111 0.334-0.334 0.445l-4.848 2.396c-0.111 0.056-0.223 0.056-0.279 0.056-0.278 0-0.39-0.335-0.724-0.836-1.059-1.783-2.005-2.786-3.733-2.786h-0.836c-2.174 1e-3 -4.013 1.728-4.013 4.012z"/>
+  <path d="m362.93 524.12c0 2.618 2.562 3.398 6.463 5.183 5.962 2.729 8.748 5.794 8.748 11.311 0 5.906-4.067 9.862-10.363 9.862h-2.229c-3.176 0-5.571-0.892-7.243-2.619-1.839-1.895-2.563-3.51-2.563-4.067 0-0.111 0.111-0.278 0.335-0.39l4.848-2.396c0.11-0.056 0.166-0.056 0.278-0.056 0.39 0 0.501 0.558 1.059 1.672 0.613 1.17 2.006 2.006 3.287 2.006h2.229c2.173 0 4.011-1.783 4.011-4.012 0-2.786-2.34-3.789-5.961-5.517-6.13-2.953-9.25-5.46-9.25-10.977 0-5.906 4.123-9.862 10.363-9.862h0.837c2.562 0 4.568 0.557 6.352 1.839 2.173 1.561 3.566 4.067 3.566 4.736 0 0.223-0.112 0.334-0.335 0.445l-4.848 2.396c-0.111 0.056-0.223 0.056-0.278 0.056-0.278 0-0.39-0.335-0.725-0.836-1.059-1.783-2.006-2.786-3.732-2.786h-0.837c-2.174 1e-3 -4.012 1.728-4.012 4.012z"/>
+  <path d="m388.77 524.12c0 2.618 2.562 3.398 6.463 5.183 5.962 2.729 8.748 5.794 8.748 11.311 0 5.906-4.067 9.862-10.363 9.862h-2.229c-3.176 0-5.571-0.892-7.243-2.619-1.839-1.895-2.563-3.51-2.563-4.067 0-0.111 0.111-0.278 0.335-0.39l4.847-2.396c0.111-0.056 0.167-0.056 0.279-0.056 0.39 0 0.501 0.558 1.059 1.672 0.613 1.17 2.006 2.006 3.287 2.006h2.229c2.173 0 4.011-1.783 4.011-4.012 0-2.786-2.34-3.789-5.961-5.517-6.13-2.953-9.25-5.46-9.25-10.977 0-5.906 4.123-9.862 10.363-9.862h0.837c2.562 0 4.568 0.557 6.352 1.839 2.173 1.561 3.565 4.067 3.565 4.736 0 0.223-0.111 0.334-0.334 0.445l-4.848 2.396c-0.111 0.056-0.223 0.056-0.278 0.056-0.278 0-0.391-0.335-0.725-0.836-1.059-1.783-2.006-2.786-3.732-2.786h-0.837c-2.174 1e-3 -4.012 1.728-4.012 4.012z"/>
+  <path d="m414.62 549.91h-5.293c-0.39 0-0.558-0.167-0.558-0.557v-33.989c0-0.39 0.168-0.558 0.558-0.558h5.293c0.335 0 0.558 0.168 0.558 0.558v33.989c0 0.39-0.167 0.557-0.558 0.557z"/>
+  <path d="m434.57 550.47h-2.73c-6.296 0-10.363-3.956-10.363-9.862v-16.494c0-5.906 4.123-9.862 10.363-9.862h2.73c6.24 0 10.364 3.956 10.364 9.862v16.493c0 5.907-4.124 9.863-10.364 9.863zm3.956-26.356c0-2.284-1.728-4.012-3.956-4.012h-2.73c-2.229 0-4.012 1.783-4.012 4.012v16.493c0 2.229 1.783 4.012 4.012 4.012h2.73c2.229 0 3.956-1.728 3.956-4.012v-16.493z"/>
+  <path d="m473.79 549.91h-4.625l-0.502-0.278-11.422-22.399 0.278 22.121c0 0.39-0.167 0.557-0.557 0.557h-5.183c-0.39 0-0.558-0.167-0.558-0.557v-33.99c0-0.39 0.168-0.558 0.558-0.558h4.681l0.502 0.279 11.366 22.622-0.224-22.344c0-0.39 0.168-0.558 0.558-0.558h5.127c0.334 0 0.557 0.168 0.557 0.558v33.989c1e-3 0.391-0.166 0.558-0.556 0.558z"/>
+ </g>
+</svg>
