was ist html? - sa2ee7d05f9ec0a7e.jimcontent.com filedateiname man muss groß/kleinschreibung...
TRANSCRIPT
![Page 1: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/1.jpg)
Was ist HTML?Was ist HTML?
![Page 2: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/2.jpg)
Die Programmiersprache des Webs
HTML – HyperText Markup Language
Hypertext - Auszeichnungssprache
![Page 3: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/3.jpg)
Dateiname
Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden
werden Gewöhnliche HTML- Dateierweiterung
*.html oder *.htm.
![Page 4: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/4.jpg)
Wie nennt man die HTML-Wie nennt man die HTML-Befehle?Befehle?
AlsAls TagTag wird ein einzelner HTML-"Befehl" bezeichnet
![Page 5: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/5.jpg)
Schreibweise
Die TAGs sitzen immer zwischen Kleiner- und Größerzeichen < .. >
BeispielBeispiel::
<p>HTML - die Sprache des Web </p>
![Page 6: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/6.jpg)
Grundgerüst einer HTML-DateiGrundgerüst einer HTML-Datei
<html> Wurzelelement einer HTML-Datei - Anfang
<head> Kopfdaten der Datei
<title> Titel der HTML-Datei
… Befehle
</title> Ende von Titel
</head> Ende von Kopfdaten
<body> Anfang von Textkörper
… Befehle
</body> Ende von Textkörper
</html> Ende der HTML-Datei
![Page 7: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/7.jpg)
KommentarKommentar
<! -- <! -- ….…. -- > -- > - Kommentare werden bei der Präsentation nicht angezeigt.
BeispielBeispiel::<h1>Willkommen!</h1><!-- Kommentar: das obendrüber ist eine Überschrift -->
![Page 8: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/8.jpg)
Beispiel der Internet-SeiteBeispiel der Internet-Seite
<html><head>
<title>Meine erste Internet-Seite!</title> </head> <body>
Das ist meine erste Internet-Seite. </body>
</html>
![Page 9: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/9.jpg)
Überschriften
HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden
<h1> Überschrift 1. Ordnung </h1>
….
<h6> Überschrift 6. Ordnung </h6>
![Page 10: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/10.jpg)
Textabsätze
<p> …. </p> TAGs leiten einen Textabsatz ein.
![Page 11: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/11.jpg)
Überschriften und Absätze ausrichten
Überschriften und Textabsätze kann man linksbündig, zentriert, rechtsbündig oder als Blocksatz ausrichten.
<h1 align= "center"> Dies ist ein zentrierter Überschrift </h1>
<p align= "links">…</p><p align= "rechts"> ... </p><p align= " justify"> … </p>
![Page 12: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/12.jpg)
Zeilenumbruch
<br> fügt an der gewünschten Stelle einen Zeilenumbruch ein.
Beispiel:<p> Der Absatz geht <br>
hier weiter. </p>
![Page 13: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/13.jpg)
Farbe für den Hintergrund
<body bgcolor=„red">
Farbname oder Farbbezeichnung
<body bgcolor="#CCFFFF">
![Page 14: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/14.jpg)
Schriftgröße und Schriftfarbe
<font color="#FF0000" size=" 7"> Knallroter und ziemlich riesiger Text</font>
![Page 15: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/15.jpg)
Physische Auszeichnungen im Text
Element Bedeutung
<b>...</b> fett
<i>...</i> kursiv
<u>...</u> unterstrichen
<s>...</s> durchgestrichen
![Page 16: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/16.jpg)
Aufzählungslisten
Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.
Beispiel:
![Page 17: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/17.jpg)
Definieren von Aufzählungsliste
<ul> leitet eine nummerierte Liste ein
<li> … </li> beginnt ein neuer Punkt innerhalb der Liste
…
<li>… </li>
</ul> beendet die Liste
![Page 18: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/18.jpg)
Eigenschaften für Listen
Für Aufzählungslisten lässt sich der Typ des Bullet-Zeichens festlegen.
<ul type="circle">
<ul type="disc">
<ul type="square">
![Page 19: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/19.jpg)
Nummerierte Liste
Bei einer nummerierten Liste werden alle Listeneinträge automatisch durchnummeriert.
Beispiel:
![Page 20: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/20.jpg)
Definieren von Aufzählungsliste
<ol> leitet eine Aufzählungsliste ein
<li> … </li> beginnt ein neuer Punkt innerhalb der Liste
…
<li>… </li>
</ol> beendet die Liste
![Page 21: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/21.jpg)
Eigenschaften für Listen
Die nummerierte Listen lassen sich beispielsweise alphabetisch und römisch nummerieren.
<ol> mit 1, 2, 3, 4 usw.
<ol type="I"> mit I., II., III., IV. usw
<ol type="i"> mit i., ii., iii., iv. usw.
<ol type="A"> mit A., B., C. usw.
<ol type="a"> mit a., b., c. usw. nummeriert.
![Page 22: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/22.jpg)
Grafiken einbinden
Man kann Grafikdateien an gewünschten Stellen in der HTML-Datei einbinden. Geeignete Dateiformate sind *.gif, *.jpg und *.png
Für Animation eignet sich *.gif Grafikformat.
![Page 23: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/23.jpg)
<img>-Tag
<img src=“tigr.jpg” >
Mit dem Attribut src bestimmst du die gewünschte Grafikdatei.
![Page 24: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/24.jpg)
Breite und Höhe von Grafiken
<img src=“tiger.jpg” height=“200” width=“100”>
Höhe und Breiteder Grafik kann man fest legen
![Page 25: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/25.jpg)
Ausrichtung der Grafik
<img src=“tiger.jpg” align=“right”>
align=“left” oder align=“center”
![Page 26: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/26.jpg)
Rahmen um Grafiken
<img src=“tigr.jpg” height=“200” width=“100” align=“right” border=“3”>
Mit borderwird ein Rahmen um die Grafik definiert Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke.
![Page 27: Was ist HTML? - sa2ee7d05f9ec0a7e.jimcontent.com fileDateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie ä, ö, ü und ß sollen vermeiden](https://reader030.vdokument.com/reader030/viewer/2022040623/5d49ce6a88c993af078ba64d/html5/thumbnails/27.jpg)
Abstand zwischen Grafik und Text
<img src=“igr.jpg”
height=“200” width=“200” align=“left”
border=“3” hspace=“10” vspace=“10”>
Der Tiger (Panthera tigris) ist eine in Asien verbreitete Großkatze. Heute ist er aus großen Teilen seines ehemaligen Verbreitungsgebietes verschwunden und mehrere Unterarten sind bereits völlig ausgestorben.