forms
Andy
parent
f3c71e298a
commit
92a1470fc9
|
|
@ -26,4 +26,6 @@
|
|||
### Interne Links
|
||||
* [Semantische Tags](html/semantik.html)
|
||||
* [Seitenstruktur](html/struktur.html)
|
||||
* [Kopfbereich](html/header.html)
|
||||
* [Kopfbereich](html/header.html)
|
||||
* [Formulare](html/formular.html)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
body {
|
||||
font: normal 500 1.2em helvetica, sans-serif;
|
||||
font: normal 500 1rem helvetica, sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
main,header,footer{
|
||||
max-width: 960px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
h1, h2{
|
||||
font-weight: 100;
|
||||
}
|
||||
main{
|
||||
max-width: 960px;
|
||||
margin: 20px auto;
|
||||
p {
|
||||
overflow: hidden;
|
||||
max-width: 75ch;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
a{
|
||||
color: #e01a4b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -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"><form method="GET" action="https://tag.schaufler.ch/search.php/all/">
|
||||
<fieldset>
|
||||
<legend>Suchen</legend>
|
||||
<input type="text" name="search" value="" />
|
||||
<input type="submit" name="go" value="Artikel"/>
|
||||
<input type="submit" name="fulltext" value="Volltext" />
|
||||
</fieldset>
|
||||
</form></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>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</main>
|
||||
|
||||
<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>
|
||||
<script src="../js/code.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,28 @@
|
|||
<!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>
|
||||
<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>
|
||||
<header>
|
||||
<h1>HTML Semantische Tags</h1>
|
||||
</header>
|
||||
<pre class="line-numbers language-html">
|
||||
<code class=" language-html">
|
||||
<abbr> Abbreviation
|
||||
<code class=" language-html"><abbr> Abbreviation
|
||||
<acronym> Acronym
|
||||
<blockquote> Long quotation
|
||||
<dfn> Definition
|
||||
|
|
@ -40,11 +46,11 @@
|
|||
<kbd> Text to be entered by the user
|
||||
<pre> Pre-formatted text
|
||||
<q> Short inline quotation
|
||||
<samp> Sample output
|
||||
</pre></code>
|
||||
<samp> Sample output</code>
|
||||
</pre>
|
||||
</main>
|
||||
<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>
|
||||
<script src="../js/code.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -14,20 +14,21 @@
|
|||
<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>
|
||||
<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">
|
||||
<code class="language-html"><!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
|
@ -58,17 +59,18 @@
|
|||
</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>.
|
||||
<article>
|
||||
<h2><a href="https://www.mediaevent.de/html/kernattribute.html"> Globale HTML Attribute</a></h2>
|
||||
<p>HTML-Tags können durch Attribute erweitert werden. Attribute sind immer ein Paar aus einem Namen und einem Wert name="value".</p>
|
||||
<p>
|
||||
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>
|
||||
</aside>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
<script src="../js/code.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -55,11 +55,12 @@
|
|||
<li><a href="html/semantik.html">Semantische Tags</a></li>
|
||||
<li><a href="html/struktur.html">Seitenstruktur</a></li>
|
||||
<li><a href="html/header.html">Kopfbereich</a></li>
|
||||
<li><a href="html/formular.html">Formulare</a></li>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
<script src="../js/code.js"></script>
|
||||
</body>
|
||||
Loading…
Reference in New Issue