WebP at Technische Hochschule Mittelhessen

- möglich Benutzereingaben zu erfassen

- in vielen Variationen möglich

  -> Texteingabe

  -> Auswahlen

  -> Buttons

- alle Felder werden in einem form-Element gruppiert

<form>

Vorname:<br>

<input type="text" name="vorname"><br>

Nachname:<br>

<input type="text" name="nachname"><br><br>

<button type="submit">Submit</button>

</form>

- Bestehen aus den Elementen table, tr und td

- können mit caption, th, thead, tbody und tfooter erweitert werden

- Tabellen dienen niemals zum Layouting von Webseiten 

<table>

<caption>Stundenplan</caption>

<tr>

<th>Block</th>

<th>Mo</th>

<th>Di</th>

<th>Mi</th>

<th>Do</th>

<th>Fr</th>

</tr>

<tr>

<td>1</td>

<td>SMS Tutorium</td>

<td></td>

<td>webP-V</td>

<td></td>

<td>BWLIS-P</td>

</tr>

<tr>

<td>2</td>

<td>webP-P</td>

<td></td>

<td>webP-V</td>

<td>SM-V</td>

<td>BWLIS-P</td>

</tr>

</table>

- Ungeordnet (Bulletpoint)

<ul>

<li> Notiz </li>

</ul>

- Geordnet (Nummeriert)

<ol>

<li> Notiz </li>

</ol>

- Definiert

<dl>

<dt> Notiz </dt>

<dd> Lernen </dd>

</dl>

- können beliebig verschachtelt werden

- dienen abgewandelt auch z.B. als Navigationsleiste 

- CSS-Regeln bestehen aus Selektor-Regeln-Pärchen

- Selectoren sind Muster, die auf HTML-Elemente passen können

- Regeln sind Eigenschafts-Wert-Pärchen

- HTML strukturiert nur, beeinflusst das Aussehen nur rudimentär

- Cascading Stylesheets ergänzt und verändert die Standarddarstellung

- durch Trennung von HTML und CSS wird Struktur von Stil getrennt

- dient der Vereinheitlichung von Textlayout, Abständen, Größen und Positionen

- Stilvorlagen sind wiederverwendbar

 -> mehrere HTML-Dokumente können die selbe Vorlage nutzen

- Benötigt um Webseiten zu strukturieren und in Bereiche zu gliedern

- fassen andere wichtige Elemente zu gemeinsamen Gruppen zusammen

- für die wichtigsten Teilbereiche stehen Elemente wie header, nav, section oder footer zur Verfügung

- für weitere Gliederungen nutz man das div-Element

- Versionsangabe (!DOCTYPE)

- Dokumentenanfang und -ende (html)

- Metadaten (head)

   -> Zeichencodierung (UTF-8)

   -> Seitentitel

   -> Sprache des Inhalts

   -> Zusätzliche Dokumente (Styles         und Scripts)

- Inhalt (body)

- auch Anker genannt

- referenzierten auf externe oder interne Seiten, sowie Bereiche auf der aktuellen Seite oder Programme

- Das Ziel wird als href-Attribut angegeben

<a href="www.thm.de">Zur THM-Seite</a>

<a href="/ueber-mich">

<img src="profil.jpeg" alt="Mein Profilbild"/>

</a>

- über Tags direkt eingebunden

- Includieren ein source-Tag mit src- und type-Attribut

- blenden mit dem controls-Attribut Steuerungselemente ein

<video controls >

<source src="was-ist-it.mp4" type="video/mp4"/>

</video>

<audio controls >

<source src="toms-diner.mp3" type="audio/mpeg"/>

</audio>

- Die "Hypertext Markup Language" ist eine Sprache die, von Texte auf Texte  verweist (Hypertext) und als Text anders Texte auszeichnet und strukturiert (Markup)

EVA-Prinzip 

= Eingabe -> Verarbeitung -> Ausgabe

- Von-Neumann-Architektur

-> Eingabeeinheiten lesen Programme und Daten ein

-> Das Bussystem transportiert die Daten in den Speicher und die CPU

-> Der Arbeitsspeicher hält alle Informationen bereit

-> Die CPU steuert die Abläufe im Computer und berechnet neue Werte 

-> Ergebnisse werden über Ausgabegeräte dargestellt oder gesichert

- eines der meist verbreiteten Web-Frameworks im Netz

- Original entwickelt von Twitter 

bietet viele eigene Komponenten

- Vereinfacht Verwendung von Grids und Flexboxen

- nutzt für manche Features zusätzlich JavaScript

- ist sehr gut dokumentiert

- zum benutzen muss die externe CSS-Datei eingebunden werden