diff --git a/README.md b/README.md index fcc8433..2f8a4b2 100644 --- a/README.md +++ b/README.md @@ -26,4 +26,6 @@ ### Interne Links * [Semantische Tags](html/semantik.html) * [Seitenstruktur](html/struktur.html) - * [Kopfbereich](html/header.html) \ No newline at end of file + * [Kopfbereich](html/header.html) + * [Formulare](html/formular.html) + diff --git a/css/style.css b/css/style.css index b2a3475..0a0b7f4 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } \ No newline at end of file diff --git a/html/formular.html b/html/formular.html new file mode 100644 index 0000000..0c3e7d5 --- /dev/null +++ b/html/formular.html @@ -0,0 +1,48 @@ + + + + + + + + Der HEADER in der HTML Struktur + + + + + +
+ Mein logo + +
+ +
+
+

HTML Formulare

+
+

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).

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

HTML5 Formular Attribute

+

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.

+
+ + + + \ No newline at end of file diff --git a/html/header.html b/html/header.html index 8e6e6da..36198de 100644 --- a/html/header.html +++ b/html/header.html @@ -52,7 +52,7 @@ diff --git a/html/semantik.html b/html/semantik.html index fce2380..889acb7 100644 --- a/html/semantik.html +++ b/html/semantik.html @@ -1,22 +1,28 @@ - - - - HTML Semantic Tags - - - + + + + + Der HEADER in der HTML Struktur + + + +
+ Mein logo + +
+

HTML Semantische Tags

-
-<abbr> Abbreviation
+<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
-
+<samp> Sample output +
diff --git a/html/struktur.html b/html/struktur.html index c4ab16b..be38edd 100644 --- a/html/struktur.html +++ b/html/struktur.html @@ -14,20 +14,21 @@
Mein logo

HTML5 Struktur einer Webseite

-

Artikel 1

+

Bilder & Links

+

Diese Seite enthält zunächst die Struktur und wenig Inhalt.
+ Das Bild erhält ein title und ein alt Attribut. Die + Links erhalten ein title Attribut. +

+
+
+

Das Grundgerüst

 <!DOCTYPE html>
 <html lang="de">
@@ -58,17 +59,18 @@
- + +
diff --git a/index.html b/index.html index d375d3e..af3d19f 100644 --- a/index.html +++ b/index.html @@ -55,11 +55,12 @@
  • Semantische Tags
  • Seitenstruktur
  • Kopfbereich
    • +
  • Formulare
    • \ No newline at end of file