HTML

Solve your problems or get new ideas with basic brainstorming

Jetzt loslegen. Gratis!
oder registrieren mit Ihrer E-Mail-Adresse
Rocket clouds
HTML von Mind Map: HTML

1. Tags

1.1. Überschriften

1.1.1. <h[1-6]> Überschrift </h[1-6]

1.2. Textabsätze

1.2.1. <p> Text </p>

1.3. Zeilenumbruch

1.3.1. <br />

1.4. Aufzählung

1.4.1. type="

1.4.1.1. square"

1.4.1.2. disc"

1.4.1.3. circle"

1.4.1.4. Bsp: <ul type="disc"> <li>...

1.4.2. <ul> <li> Listeneintrag </li> <ul>

1.5. Nummerierung

1.5.1. type="

1.5.1.1. I" (Grosses i)

1.5.1.1.1. => römische Zahlen

1.5.1.2. i"

1.5.1.3. A"

1.5.1.4. a"

1.5.1.5. ohne type => Nummerierung 1, 2, 3....

1.5.1.6. Bsp: <ol type="A"><li>...

1.5.2. <ol> <li> Listeneintrag </li> </ol>

2. Formatierung

2.1. Schrift

2.1.1. <font color="farbe" size="[1-7] face="Schrifttyp"> Text </fontt>

2.2. Links

2.2.1. <a hrf="http://www.web.de"> Test </a>

2.3. Bilder

2.3.1. <img src="Pfad" heigth="20" width="90">

2.4. Tabellen

2.4.1. <table> ... </table>

2.4.2. <tr> ... </tr> = Zeile

2.4.3. <th> Text </th> = Kopf Spalte für Beschriftung

2.4.4. <td> .. </td> = Spalte

2.4.5. Bsp - Tabelle mit 2 Spalten und 2 Zeilen, eine Spalte = Überschrift

2.4.5.1. <table> <tr> <th> ü1 </th> <th> ü2</th> </tr> <tr> <td> t1 </td> <td> t2 <td> </tr> </table>

2.5. Formulare

2.5.1. <form action="..."> ... </form>

2.5.2. Textfeld

2.5.2.1. Vorname: <input type="text" name="vorname" size="30" maxlength="50">

2.5.3. Mehrzeiliges Textfeld

2.5.3.1. Ihr Kommentar: <textarea name="Kommentar" rows="10" cols="40"> </textarea>

2.5.4. Radiobuttons

2.5.4.1. <intput type="radio" name="essen" value="Pizza"> Pizza <br/> <intput type="radio" name="essen" value="Döner"> Döner <br/>

2.5.5. Ceckboxen

2.5.5.1. <input type="checkbox" name="zutaten" value="Pilz> Pilz <br/> <input type="checkbox" name="zutaten" value="Salami"> Salami <br/>

2.5.6. Aushwallisten

2.5.6.1. <select name=“wohnort“ size=“3“> <option> Olten </option> <option> Solothurn </option> <option> Basel </option> </select>

2.5.7. Button

2.5.7.1. <input type=“SUBMIT“ value=“Abschicken! “> <input type=“RESET“ value=“Zurücksetzen“>

3. HMTL 5

3.1. 6 neue Elemtente für den Inthalt

3.1.1. <header>...</header>

3.1.2. <nav> ...</nav>

3.1.3. <article>... </article>

3.1.3.1. <section>.. </section>

3.1.4. <aside>...</aside>

3.1.5. <footer>...</footer>

3.2. Automatische Anpassung

3.2.1. Section können in einer Verschachtelt werden, die Überschrift <h1> wird in jeder weiterer Verschachtelung verkleinert

3.2.1.1. Bsp: <section> <h1> lvl 1</h1> <section> <h1> lvl 2 </h1> <section> <h1> lvl 3 </h1> </section> </section> </sections>

3.3. SVG einbinden

3.3.1. SVG = skalierbare Grafiken

3.3.2. <svg width="200" height="200"> SVG-Code </svg>

3.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" />

3.3.3. SVG können mit JavaScript manipuliert werden

3.4. Canvas and JavaScript

3.4.1. <canvas = <img> without "alt"

3.4.2. <canvas id="myCanvas" witdh"150" height="150"> </canvas>

3.5. Video

3.5.1. einbinden

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

3.5.1.1.1. Zugriff mit JavaScript: var v = document.getElementsByTagName("video")[0]; v.play();

3.6. Formular Elemente

3.6.1. Datum und Zeit

3.6.1.1. <input type="datetime" > <input type="date"> <input type="time">

3.6.2. Zahlen

3.6.2.1. <input type="number"> <input type="range">

3.6.3. E-Mail / URL

3.6.3.1. <input type="email"> <input type="url">

3.6.4. Combo Boxes

3.6.4.1. <input list="title-list"> <datalist id="title-list"> <option value="..."> </datalist>

3.7. Andere Tags

3.7.1. Using Meter / Rating

3.7.1.1. <meter> 60%</meter>

3.7.1.2. <meter> 3/5</meter>

3.7.1.3. <meter> 6 Blocks used (out of 10 total) </meter>

3.7.1.4. <meter value="0.6">Medium</meter>

3.7.2. Fortschritt

3.7.2.1. <progress> Step 3 of 6 <progress>

3.7.2.2. <progress> 50% Complete </progress>

3.7.2.3. <progess value="0.5"> Half way! </progress>

3.7.3. Markierung

3.7.3.1. <em>Wort</em>

3.8. Geolocation

3.9. Drag and Drop

3.9.1. z.B.: <img draggable="true">

4. Grundlagen

4.1. Tennung von Inhalt und Formatierung

4.2. Aufbau in einem logisch strukturiertem Dokument

4.3. plattformunabhängig

4.4. Endung Files: .html / .htm

4.5. HTML wird vom Browser interpretiert

4.6. 6 Grundtags

4.6.1. <html> ..</html>

4.6.2. <head> .. </head>

4.6.3. <body> .. </body>