HTML (Hypertext Markup Language)<br />
Gliederung<br />Am Anfang war HTML…<br />Der Lebenslauf von HTML<br />Das erste HTML-Dokument<br />Grundwissen (Basis-Tags...
Am Anfang war HTML…<br />HTML ist keine Programmiersprache<br />HTML = Hypertext Markup Language<br />Eine Weiterentwicklu...
Der Lebenslauf von HTML	<br />Seit der Entwicklung 1990 wurde an HTML stets immer weitergearbeitet<br />HTML 1.0: Darstell...
Das erste HTML-Dokument<br />Windows-Editor genügt als Software<br />Start -> Programme -> Zubehör -> Editor<br />
Dateiendung: .html oder .htm (Bsp.: beispiel.html)<br />Datei -> Speichern Unter -> beispiel.html<br />
Grundwissen<br />Grundgerüst:<br />	&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&...
<ul><li>Tags haben gewisse Funktionen und Eigenschaften
Tag: <title>schuelerVZ | Bist du schon drin?</title>
Funktion: Name des Browserfensters festlegen</li></li></ul><li>Eigenschaften von Tags<br />Jeder Tag kann Eigenschaften ha...
Hierarchie von HTML-Tags<br />Legt fest, wann welche Tags vorkommen dürfen<br />&lt;head&gt; ist das 1. Stockwerk<br />&lt...
Einschub: Doctype<br />Steht ganz am Anfang des HTML-Codes<br />Gibt Angaben über die HTML-Version in der die Website gesc...
Textstrukturierung in HTML<br />&lt;p&gt; kennzeichnet einen Textabschnitt<br />&lt;font&gt; Textgestaltung (z.B. Schrifta...
Eigenschaften:<br />
Tabellen in HTML<br />Durch Tabellen können ganze Webseiten strukturiert und gestaltet werden<br />Eigentlich nicht der be...
Hierarchie einer Tabelle<br />
Tabelle Übersicht<br />&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;<br />&lt;table&gt;<br />&lt;/table&gt;<br />&lt;tr&gt;&l...
Nächste SlideShare
Wird geladen in …5
×

Einführung HTML (Geschichte + Basics)

3.767 Aufrufe

Veröffentlicht am

Präsentation über HTML mit geschichtlichen Daten und Einführung der Basics.

Veröffentlicht in: Technologie, Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.767
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
31
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Einführung HTML (Geschichte + Basics)

  1. 1. HTML (Hypertext Markup Language)<br />
  2. 2. Gliederung<br />Am Anfang war HTML…<br />Der Lebenslauf von HTML<br />Das erste HTML-Dokument<br />Grundwissen (Basis-Tags z.B. &lt;title&gt;&lt;/title&gt;)<br />Eigenschaften von Tags<br />Hierarchie von HTML-Tags<br />Einschub: Doctype<br />Textstrukturierung in HTML<br />Tabellen in HTML<br />Wir gestalten eine Website<br />
  3. 3. Am Anfang war HTML…<br />HTML ist keine Programmiersprache<br />HTML = Hypertext Markup Language<br />Eine Weiterentwicklung von SGML (Structured Generalized Markup Language)<br />Baut auf dem HTTP-Protokoll auf<br />Mit HTML lassen sich Strukturen, der Inhalt und das Verhalten eine Dokuments beschreiben<br />Dieses Struktur wird durch Tags zugewiesen<br />Der Browser (z.B. Firefox) setzt diese Struktur optisch um<br />
  4. 4. Der Lebenslauf von HTML <br />Seit der Entwicklung 1990 wurde an HTML stets immer weitergearbeitet<br />HTML 1.0: Darstellung von Grafiken, Überschriften, Dokumenten und Verweisen (z.B. Links)<br />HTML 2 (1995): Dazu kamen z.B. Sonderzeichen, jedoch keine großartigen Neuerungen<br />HTML 3.2 (1997): Neuerungen wie Tabellen und Container (&lt;table&gt; & &lt;div&gt;) <br />HTML 4 & 4.01 ( Version 4 veröffentlich am 18.2.1998 und Version 4.01 am 24.12.1998):Optische Gestaltung wurde auf CSS verlegt. Dies ist die aktuelle Version von HTML.<br />
  5. 5. Das erste HTML-Dokument<br />Windows-Editor genügt als Software<br />Start -> Programme -> Zubehör -> Editor<br />
  6. 6. Dateiendung: .html oder .htm (Bsp.: beispiel.html)<br />Datei -> Speichern Unter -> beispiel.html<br />
  7. 7. Grundwissen<br />Grundgerüst:<br /> &lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;<br />
  8. 8.
  9. 9. <ul><li>Tags haben gewisse Funktionen und Eigenschaften
  10. 10. Tag: <title>schuelerVZ | Bist du schon drin?</title>
  11. 11. Funktion: Name des Browserfensters festlegen</li></li></ul><li>Eigenschaften von Tags<br />Jeder Tag kann Eigenschaften haben<br />Bsp.: &lt;imgsrc=„testbild.jpg“ height=„500“ widht=„300“&gt;<br />Das eingebunden Bild heißt „testbild.jpg“, soll im Browser 500Pixel hoch sein und 300Pixel breit.<br />
  12. 12. Hierarchie von HTML-Tags<br />Legt fest, wann welche Tags vorkommen dürfen<br />&lt;head&gt; ist das 1. Stockwerk<br />&lt;body&gt; ist das Erdgeschoss<br />Da der Tag &lt;title&gt; nur im &lt;head&gt; stehen darf, hat es sozusagen ein Zimmer im 1. Stockwerk<br />
  13. 13.
  14. 14. Einschub: Doctype<br />Steht ganz am Anfang des HTML-Codes<br />Gibt Angaben über die HTML-Version in der die Website geschrieben wurde<br />Außerdem über die Sprache, den Verwendungszweck der Website, das Erstellungsdatum und vieles mehr<br />Schlichtes Doctype Bsp.:&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt; <br />Nicht zwingend erforderlich<br />
  15. 15. Textstrukturierung in HTML<br />&lt;p&gt; kennzeichnet einen Textabschnitt<br />&lt;font&gt; Textgestaltung (z.B. Schriftart, Schriftgröße…)<br />&lt;h1&gt; eine Überschrift 1. Größenordnung<br />&lt;h2&gt; 2. Größenordnung, &lt;h3&gt; 3. Größenordnung…<br />&lt;u&gt; unterstreicht einen beliebigen Textabschnitt<br />&lt;b&gt; druckt einen bestimmten Abschnitt fett<br />&lt;i&gt; druckt die Schriftart in kursiv<br />
  16. 16. Eigenschaften:<br />
  17. 17. Tabellen in HTML<br />Durch Tabellen können ganze Webseiten strukturiert und gestaltet werden<br />Eigentlich nicht der beste Weg, da Tabellen nicht gemacht wurden um Webseite zu gliedern, aber es ist recht einfach und funktioniert wunderbar<br />Grundgerüst von Tabellen:<br /> &lt;table&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;<br />
  18. 18. Hierarchie einer Tabelle<br />
  19. 19. Tabelle Übersicht<br />&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;<br />&lt;table&gt;<br />&lt;/table&gt;<br />&lt;tr&gt;&lt;td&gt;Englisch&lt;/td&gt;&lt;td&gt;one&lt;/td&gt;&lt;td&gt;two&lt;/td&gt;&lt;td&gt;three&lt;/td&gt;&lt;td&gt;four&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Deutsch&lt;/td&gt;&lt;td&gt;Eins&lt;/td&gt;&lt;td&gt;Zwei&lt;/td&gt;&lt;td&gt;Drei&lt;/td&gt;&lt;td&gt;Vier&lt;/td&gt;&lt;/tr&gt;<br />Legende:<br />&lt;table&gt; = Grundkasten einer Tabelle<br />&lt;tr&gt; = „tablerow“ – Leitet eine Tabellenreihe ein<br />&lt;th&gt; = „tableheader“ – Element zum definieren einer Kopfzeile<br />&lt;td&gt; = „tabledata“ – Hier darf der Inhalt reingeschrieben werden<br />
  20. 20. Eigenschaften von Tabellen<br />Border: Dicke des Rahmen der Tabelle in Pixel<br />Width: Breite der Tabelle in Pixel<br />Height: Höhe der Tabelle in Pixel<br />Cellpadding („Zellpolster“): Abstand zw. Zellinhalt und Zellrand in Pixel<br />Cellspacing („Zellabstand“): Zellabstand in Pixel<br />Bsp.:&lt;tableheigt=„500“ width=„500“ border =„1“ cellpadding=„0“ cellspacing=„0“&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />

×