1. HMTL 5
1.1. 6 neue Elemtente für den Inthalt
1.1.1. <header>...</header>
1.1.2. <nav> ...</nav>
1.1.3. <article>... </article>
1.1.3.1. <section>.. </section>
1.1.4. <aside>...</aside>
1.1.5. <footer>...</footer>
1.2. Automatische Anpassung
1.2.1. Section können in einer Verschachtelt werden, die Überschrift <h1> wird in jeder weiterer Verschachtelung verkleinert
1.2.1.1. Bsp: <section> <h1> lvl 1</h1> <section> <h1> lvl 2 </h1> <section> <h1> lvl 3 </h1> </section> </section> </sections>
1.3. SVG einbinden
1.3.1. SVG = skalierbare Grafiken
1.3.2. <svg width="200" height="200"> SVG-Code </svg>
1.3.2.1. Bsp SVG-Code für einen roten Kreis mit schwarzem Rahmen: <circle cx="100" cy="50" r="40" stroke="black" stroke.width="2" fill="red" />
1.3.3. SVG können mit JavaScript manipuliert werden
1.4. Canvas and JavaScript
1.4.1. <canvas = <img> without "alt"
1.4.2. <canvas id="myCanvas" witdh"150" height="150"> </canvas>
1.5. Video
1.5.1. einbinden
1.5.1.1. <video control> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4> Your browser does not support the video element </video>
1.5.1.1.1. Zugriff mit JavaScript: var v = document.getElementsByTagName("video")[0]; v.play();
1.6. Formular Elemente
1.6.1. Datum und Zeit
1.6.1.1. <input type="datetime" > <input type="date"> <input type="time">
1.6.2. Zahlen
1.6.2.1. <input type="number"> <input type="range">
1.6.3. E-Mail / URL
1.6.3.1. <input type="email"> <input type="url">
1.6.4. Combo Boxes
1.6.4.1. <input list="title-list"> <datalist id="title-list"> <option value="..."> </datalist>
1.7. Andere Tags
1.7.1. Using Meter / Rating
1.7.1.1. <meter> 60%</meter>
1.7.1.2. <meter> 3/5</meter>
1.7.1.3. <meter> 6 Blocks used (out of 10 total) </meter>
1.7.1.4. <meter value="0.6">Medium</meter>
1.7.2. Fortschritt
1.7.2.1. <progress> Step 3 of 6 <progress>
1.7.2.2. <progress> 50% Complete </progress>
1.7.2.3. <progess value="0.5"> Half way! </progress>
1.7.3. Markierung
1.7.3.1. <em>Wort</em>
1.8. Geolocation
1.9. Drag and Drop
1.9.1. z.B.: <img draggable="true">
2. Grundlagen
2.1. Tennung von Inhalt und Formatierung
2.2. Aufbau in einem logisch strukturiertem Dokument
2.3. plattformunabhängig
2.4. Endung Files: .html / .htm
2.5. HTML wird vom Browser interpretiert
2.6. 6 Grundtags
2.6.1. <html> ..</html>
2.6.2. <head> .. </head>
2.6.3. <body> .. </body>
3. Tags
3.1. Überschriften
3.1.1. <h[1-6]> Überschrift </h[1-6]
3.2. Textabsätze
3.2.1. <p> Text </p>
3.3. Zeilenumbruch
3.3.1. <br />
3.4. Aufzählung
3.4.1. type="
3.4.1.1. square"
3.4.1.2. disc"
3.4.1.3. circle"
3.4.1.4. Bsp: <ul type="disc"> <li>...
3.4.2. <ul> <li> Listeneintrag </li> <ul>
3.5. Nummerierung
3.5.1. type="
3.5.1.1. I" (Grosses i)
3.5.1.1.1. => römische Zahlen
3.5.1.2. i"
3.5.1.3. A"
3.5.1.4. a"
3.5.1.5. ohne type => Nummerierung 1, 2, 3....
3.5.1.6. Bsp: <ol type="A"><li>...
3.5.2. <ol> <li> Listeneintrag </li> </ol>
4. Formatierung
4.1. Schrift
4.1.1. <font color="farbe" size="[1-7] face="Schrifttyp"> Text </fontt>
4.2. Links
4.2.1. <a hrf="http://www.web.de"> Test </a>
4.3. Bilder
4.3.1. <img src="Pfad" heigth="20" width="90">
4.4. Tabellen
4.4.1. <table> ... </table>
4.4.2. <tr> ... </tr> = Zeile
4.4.3. <th> Text </th> = Kopf Spalte für Beschriftung
4.4.4. <td> .. </td> = Spalte
4.4.5. Bsp - Tabelle mit 2 Spalten und 2 Zeilen, eine Spalte = Überschrift
4.4.5.1. <table> <tr> <th> ü1 </th> <th> ü2</th> </tr> <tr> <td> t1 </td> <td> t2 <td> </tr> </table>
4.5. Formulare
4.5.1. <form action="..."> ... </form>
4.5.2. Textfeld
4.5.2.1. Vorname: <input type="text" name="vorname" size="30" maxlength="50">
4.5.3. Mehrzeiliges Textfeld
4.5.3.1. Ihr Kommentar: <textarea name="Kommentar" rows="10" cols="40"> </textarea>
4.5.4. Radiobuttons
4.5.4.1. <intput type="radio" name="essen" value="Pizza"> Pizza <br/> <intput type="radio" name="essen" value="Döner"> Döner <br/>
4.5.5. Ceckboxen
4.5.5.1. <input type="checkbox" name="zutaten" value="Pilz> Pilz <br/> <input type="checkbox" name="zutaten" value="Salami"> Salami <br/>
4.5.6. Aushwallisten
4.5.6.1. <select name=“wohnort“ size=“3“> <option> Olten </option> <option> Solothurn </option> <option> Basel </option> </select>
4.5.7. Button
4.5.7.1. <input type=“SUBMIT“ value=“Abschicken! “> <input type=“RESET“ value=“Zurücksetzen“>