1 / 15

HTML

HTML. Silla Plump, 2009. Was ist HTML?. H yper T ext M arkup L anguage ursprünglich zur Auszeichnung wissenschaftlicher Texte „Brot- und Buttersprache“ selfhtml.org. Systematik. Besteht aus Tags in der Regel öffnendes und schließendes Tag Format: <öffnen> </schließen>

lindsay
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Silla Plump, 2009

  2. Was ist HTML? • HyperText Markup Language • ursprünglich zur Auszeichnung wissenschaftlicher Texte • „Brot- und Buttersprache“ • selfhtml.org

  3. Systematik • Besteht aus Tags • in der Regel öffnendes und schließendes Tag • Format: <öffnen> </schließen> • einzelne Befehle können nahezu beliebig ineinander verschachtelt werden • Klammersystem beachten: { [ ( ) ] } • Reintext = Sonderzeichen und Umlaute umwanden • Erweiterung einzelner "Grundbefehle" durch Attribute

  4. HTML-Editor: Phase 5

  5. Grundgerüst einer HTML-Seite • <html> • <head> • <title> | </title> • </head> • <body> • </body> • </html>

  6. Einfache Codierungen Eingabe Anzeige • <b>HTML</b> • ist <i>ganz</i> • <u>einfach</u>! • Zeilen<br>umbrechen • HTML • ist ganz • einfach! • Zeilenumbrechen

  7. Farben • Hexadezimal-Code (oder RGB-Farben) • Schrift einfärben:<font color="#FF0000">Mathe</font> • Weitere Verwendungen: • z. B. Hintergrund, Rahmen von Bildern und und Tabellen, etc.

  8. Tabellen - Grundgerüst • <table> • <tr> • <td>Zelle 1</td> • <td>Zelle 2</td> • <td>Zelle 3</td> • <td>Zelle 4</td> • </tr> • …. • </table>

  9. Attribute für <table> Erweiterung Sinn • bordercolor="#2F2F2F“ • border="1" • class="text“ • width=“1200" • Rahmenfarbe • Rahmenstärke • Textformatierung in der Tabelle bleibt identisch mit Text außerhalb der Tabelle • Tabellenbreite (1200 Pixel)

  10. Attribute für <td> Erweiterung Sinn • valign="top" • width=“200" • Text bleibt am oberen Rahmen „hängen“ • Zellenbreite (200 Pixel)

  11. Listen unsortiert <ul> <li>Thema 1</li> <li>Thema 2</li> <li>Thema 3</li> </ul> nummeriert <ol> <li>Thema 1</li> <li>Thema 2</li> <li>Thema 3</li> </ol> • Thema 1 • Thema 2 • Thema 3 • Thema 1 • Thema 2 • Thema 3

  12. Bilder • Dateiformate: .gif, .jpg, .jpeg oder .png • <img src="Datei-Pfad" alt="" border="0"> • Absoluter Link: verlinkt ein Bild von einer anderen Seite:Link-Pfad = vollständige URL angeben • Relativer Link: identische Datei-Pfad-Teile werden weggelassen • Ausrichtung und Textfluss durch Attribut:align="Ausrichtung"

  13. Bilder • Bildbearbeitungsprogram: Irfanview • einfache Grafiken mit Powerpoint erstellenz. B.: • Screenshot (Alt + Druck) machen und im Bildbearbeitungsprogramm freistellen Start-seite

  14. Links • einfacher Link:<a href="Link-Pfad">Text oder Bild</a> • Absoluter Link: verlinkt eine andere Seite:Link-Pfad = vollständige URL angeben • Relativer Link: identische Datei-Pfad-Teile werden weggelassen • Link soll in neuem Fenster öffnen mit Attribut:target="_blank" • eMail-Verlinkung:<a href="mailto:eMail-Adresse">Text oder Bild</a>

  15. Viel Spaß beim Basteln!

More Related