andy
/
webdev
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

forms

master
Andy 2020-02-11 15:43:55 +01:00
parent f3c71e298a
commit 92a1470fc9
7 changed files with 102 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -27,3 +27,5 @@
* [Semantische Tags](html/semantik.html) * [Semantische Tags](html/semantik.html)
* [Seitenstruktur](html/struktur.html) * [Seitenstruktur](html/struktur.html)
* [Kopfbereich](html/header.html) * [Kopfbereich](html/header.html)
* [Formulare](html/formular.html)

17
css/style.css
View File

@ -1,11 +1,20 @@
body { body {
font: normal 500 1.2em helvetica, sans-serif; font: normal 500 1rem helvetica, sans-serif;
height: 100%; height: 100%;
} }
main,header,footer{
max-width: 960px;
margin: 20px auto;
}
h1, h2{ h1, h2{
font-weight: 100; font-weight: 100;
} }
main{ p {
max-width: 960px; overflow: hidden;
margin: 20px auto; max-width: 75ch;
font-size: 1.4rem;
}
a{
color: #e01a4b;
text-decoration: none;
} }

48
html/formular.html 100644
View File

@ -0,0 +1,48 @@
<!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 -HEADER Struktur in Webseiten">
<title>Der HEADER in der 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">
</nav>
</header>
<main role="main">
<header>
<h1>HTML Formulare</h1>
</header>
<p>Ein Webformular ist ein Formular auf einer Webseite zur Erfassung von Daten, die zur Verarbeitung an einen
Webserver gesendet werden. Man findet sie beispielsweise in Webmail-Anwendungen,
Suchmaschineneingabefeldern, in Sozialen Netzwerken oder auf Login-Seiten. Das Absenden der Daten verläuft
über das Hypertext Transfer Protocol via HTTP-GET, HTTP-POST oder dem XMLHttpRequest (Ajax).</p>
<pre class="line-numbers language-html">
<code class=" language-html">&lt;form method=&quot;GET&quot; action=&quot;https://tag.schaufler.ch/search.php/all/&quot;&gt;
&lt;fieldset&gt;
&lt;legend&gt;Suchen&lt;/legend&gt;
&lt;input type=&quot;text&quot; name=&quot;search&quot; value=&quot;&quot; /&gt;
&lt;input type=&quot;submit&quot; name=&quot;go&quot; value=&quot;Artikel&quot;/&gt;
&lt;input type=&quot;submit&quot; name=&quot;fulltext&quot; value=&quot;Volltext&quot; /&gt;
&lt;/fieldset&gt;
&lt;/form&gt;</code>
</pre>
<h2><a href="https://www.mediaevent.de/html/input-attribute.html"> HTML5 Formular Attribute</a></h2>
<p>type, name, value sind die wichtigsten Attribute für HTML input. Daneben erleichtern weitere Attribute wie readonly und maxlength das Prüfen der Eingaben und verbessern die Benutzeroberfläche von Formularen.
multiple ermöglicht mehrere Eingaben, z.B. die Eingabe mehrerer Dateien beim Upload auf den Server.</p>
</main>
<footer>
<a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a>
</footer>
<script src="../js/code.js"></script>
</body>

2
html/header.html
View File

@ -52,7 +52,7 @@
</main> </main>
<footer> <footer>
<a href="https://git.perin.work/andy/webdev">Download</a> <a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a>
</footer> </footer>
<script src="../js/code.js"></script> <script src="../js/code.js"></script>
</body> </body>

18
html/semantik.html
View File

@ -4,19 +4,25 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Semantic Tags</title> <meta name="description" content="Die HTML -HEADER Struktur in Webseiten">
<title>Der HEADER in der HTML Struktur</title>
<link rel="stylesheet" href="../css/code.css"> <link rel="stylesheet" href="../css/code.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
</head> </head>
<body> <body>
<header>
<img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes">
<nav role="navigation">
</nav>
</header>
<main> <main>
<header> <header>
<h1>HTML Semantische Tags</h1> <h1>HTML Semantische Tags</h1>
</header> </header>
<pre class="line-numbers language-html"> <pre class="line-numbers language-html">
<code class=" language-html"> <code class=" language-html">&#60;abbr&#62; Abbreviation
&#60;abbr&#62; Abbreviation
&#60;acronym&#62; Acronym &#60;acronym&#62; Acronym
&#60;blockquote&#62; Long quotation &#60;blockquote&#62; Long quotation
&#60;dfn&#62; Definition &#60;dfn&#62; Definition
@ -40,11 +46,11 @@
&#60;kbd&#62; Text to be entered by the user &#60;kbd&#62; Text to be entered by the user
&#60;pre&#62; Pre-formatted text &#60;pre&#62; Pre-formatted text
&#60;q&#62; Short inline quotation &#60;q&#62; Short inline quotation
&#60;samp&#62; Sample output &#60;samp&#62; Sample output</code>
</pre></code> </pre>
</main> </main>
<footer> <footer>
<a href="https://git.perin.work/andy/webdev">Download</a> <a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a>
</footer> </footer>
<script src="../js/code.js"></script> <script src="../js/code.js"></script>
</body> </body>

32
html/struktur.html
View File

@ -14,20 +14,21 @@
<header> <header>
<img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"> <img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes">
<nav role="navigation"> <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> </nav>
</header> </header>
<main role="main"> <main role="main">
<h1>HTML5 Struktur einer Webseite</h1> <h1>HTML5 Struktur einer Webseite</h1>
<article> <article>
<h2>Artikel 1</h2> <h2>Bilder & Links</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>
</article>
<article>
<h2>Das Grundgerüst</h2>
<pre class="line-numbers language-html"> <pre class="line-numbers language-html">
<code class="language-html">&lt;!DOCTYPE html&gt; <code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;de&quot;&gt; &lt;html lang=&quot;de&quot;&gt;
@ -58,17 +59,18 @@
</pre> </pre>
</article> </article>
<aside> <article>
<h2>Artikel 2</h2> <h2><a href="https://www.mediaevent.de/html/kernattribute.html"> Globale HTML Attribute</a></h2>
<p>Diese Seite enthält zunächst die Struktur und wenig Inhalt.<br> <p>HTML-Tags können durch Attribute erweitert werden. Attribute sind immer ein Paar aus einem Namen und einem Wert name="value".</p>
Das <strong>Bild</strong> erhält ein <strong>title</strong> und ein <strong>alt Attribut</strong>. Die <p>
<strong>Links</strong> erhalten ein <strong>title Attribut</strong>. Neben den speziellen Attributen für bestimmte Tags (wie src="bild.jpg" für das img-Tag oder href="test.html" für das a-Tag ) gibt es die globalen oder universellen Attribute, die in nahezu jedem HTML-Tag eingesetzt werden können
</p> </p>
</aside> </article>
</main> </main>
<footer> <footer>
<a href="https://git.perin.work/andy/webdev">Download</a> <a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a>
</footer> </footer>
<script src="../js/code.js"></script> <script src="../js/code.js"></script>
</body> </body>

3
index.html
View File

@ -55,11 +55,12 @@
<li><a href="html/semantik.html">Semantische Tags</a></li> <li><a href="html/semantik.html">Semantische Tags</a></li>
<li><a href="html/struktur.html">Seitenstruktur</a></li> <li><a href="html/struktur.html">Seitenstruktur</a></li>
<li><a href="html/header.html">Kopfbereich</a></li> <li><a href="html/header.html">Kopfbereich</a></li>
<li><a href="html/formular.html">Formulare</a></li>
</ul> </ul>
</main> </main>
<footer> <footer>
<a href="https://git.perin.work/andy/webdev">Download</a> <a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a>
</footer> </footer>
<script src="../js/code.js"></script> <script src="../js/code.js"></script>
</body> </body>