master
welle7 2020-02-11 10:05:43 +01:00
parent 117ddbc9e5
commit f684740623
4 changed files with 158 additions and 1 deletions

View File

@ -24,4 +24,5 @@
* [Browser Test](https://html5test.com/)
### Interne Links
* [Semantische Tags](html/semantic.html)
* [Semantische Tags](html/semantik.html)
* [Seitenstruktur](html/struktur.html)

52
html/semantik.html 100644
View File

@ -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>

76
html/struktur.html 100644
View File

@ -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>

28
img/logo.svg 100644
View File

@ -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>

After

Width:  |  Height:  |  Size: 5.3 KiB