SlideShare uma empresa Scribd logo
1 de 19
HTML (Hypertext Markup Language)
Gliederung Am Anfang war HTML… Der Lebenslauf von HTML Das erste HTML-Dokument Grundwissen (Basis-Tags z.B. <title></title>) Eigenschaften von Tags Hierarchie von HTML-Tags Einschub: Doctype Textstrukturierung in HTML Tabellen in HTML Wir gestalten eine Website
Am Anfang war HTML… HTML ist keine Programmiersprache HTML = Hypertext Markup Language Eine Weiterentwicklung von SGML (Structured Generalized Markup Language) Baut auf dem HTTP-Protokoll auf Mit HTML lassen sich Strukturen, der Inhalt und das Verhalten eine Dokuments beschreiben Dieses Struktur wird durch Tags zugewiesen Der Browser (z.B. Firefox) setzt diese Struktur optisch um
Der Lebenslauf von HTML	 Seit der Entwicklung 1990 wurde an HTML stets immer weitergearbeitet HTML 1.0: Darstellung von Grafiken, Überschriften, Dokumenten und Verweisen (z.B. Links) HTML 2 (1995): Dazu kamen z.B. Sonderzeichen, jedoch keine großartigen Neuerungen HTML 3.2 (1997): Neuerungen wie Tabellen und Container (<table> & <div>)  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.
Das erste HTML-Dokument Windows-Editor genügt als Software Start -> Programme -> Zubehör -> Editor
Dateiendung: .html oder .htm (Bsp.: beispiel.html) Datei -> Speichern Unter -> beispiel.html
Grundwissen Grundgerüst: 	<html><head><title></title></head><body></body></html>
[object Object]
Tag: ,[object Object]
Funktion: Name des Browserfensters festlegen,[object Object]
Hierarchie von HTML-Tags Legt fest, wann welche Tags vorkommen dürfen <head> ist das 1. Stockwerk <body> ist das Erdgeschoss Da der Tag <title> nur im <head> stehen darf, hat es sozusagen ein Zimmer im 1. Stockwerk
Einschub: Doctype Steht ganz am Anfang des HTML-Codes Gibt Angaben über die HTML-Version in der die Website geschrieben wurde Außerdem über die Sprache, den Verwendungszweck der Website, das Erstellungsdatum und vieles mehr Schlichtes Doctype Bsp.:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  Nicht zwingend erforderlich
Textstrukturierung in HTML <p> kennzeichnet einen Textabschnitt <font> Textgestaltung (z.B. Schriftart, Schriftgröße…) <h1> eine Überschrift 1. Größenordnung <h2> 2. Größenordnung, <h3> 3. Größenordnung… <u> unterstreicht einen beliebigen Textabschnitt <b> druckt einen bestimmten Abschnitt fett <i> druckt die Schriftart in kursiv
Eigenschaften:
Tabellen in HTML Durch Tabellen können ganze Webseiten strukturiert und gestaltet werden Eigentlich nicht der beste Weg, da Tabellen nicht gemacht wurden um Webseite zu gliedern, aber es ist recht einfach und funktioniert wunderbar Grundgerüst von Tabellen:       <table>	<tr>	   <th></th>	</tr>	<tr>	   <td></td> 	</tr>      </table>
Hierarchie einer Tabelle
Tabelle Übersicht <tr><th></th></tr> <table> </table> <tr><td>Englisch</td><td>one</td><td>two</td><td>three</td><td>four</td></tr> <tr><td>Deutsch</td><td>Eins</td><td>Zwei</td><td>Drei</td><td>Vier</td></tr> Legende: <table> = Grundkasten einer Tabelle <tr> = „tablerow“ – Leitet eine Tabellenreihe ein <th> = „tableheader“ – Element zum definieren einer Kopfzeile <td> = „tabledata“ – Hier darf der Inhalt reingeschrieben werden

Mais conteúdo relacionado

Semelhante a Einführung HTML (Geschichte + Basics)

Hello World // MM 08-11
Hello World // MM 08-11Hello World // MM 08-11
Hello World // MM 08-11Noël Bossart
 
Grundlagen des World Wide Web
Grundlagen des World Wide WebGrundlagen des World Wide Web
Grundlagen des World Wide WebJakob .
 
Programmiertechniken
ProgrammiertechnikenProgrammiertechniken
ProgrammiertechnikenGianna-B
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Noël Bossart
 
XML-basierte Dokumenterstellung in Adobe FrameMaker
XML-basierte Dokumenterstellung in Adobe FrameMakerXML-basierte Dokumenterstellung in Adobe FrameMaker
XML-basierte Dokumenterstellung in Adobe FrameMakerDigicomp Academy AG
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Eric Eggert
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleGino Cremer
 
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...frankstaude
 
Werde Übersetzer! Werde Translation Editor!
Werde Übersetzer!  Werde Translation Editor!Werde Übersetzer!  Werde Translation Editor!
Werde Übersetzer! Werde Translation Editor!Torsten Landsiedel
 
Docbook: Textverarbeitung mit XML
Docbook: Textverarbeitung mit XMLDocbook: Textverarbeitung mit XML
Docbook: Textverarbeitung mit XMLPeter Eisentraut
 

Semelhante a Einführung HTML (Geschichte + Basics) (14)

Hello World // MM 08-11
Hello World // MM 08-11Hello World // MM 08-11
Hello World // MM 08-11
 
Grundlagen des World Wide Web
Grundlagen des World Wide WebGrundlagen des World Wide Web
Grundlagen des World Wide Web
 
Programmiertechniken
ProgrammiertechnikenProgrammiertechniken
Programmiertechniken
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Workshop Rss 2010
Workshop Rss 2010Workshop Rss 2010
Workshop Rss 2010
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
 
XML-basierte Dokumenterstellung in Adobe FrameMaker
XML-basierte Dokumenterstellung in Adobe FrameMakerXML-basierte Dokumenterstellung in Adobe FrameMaker
XML-basierte Dokumenterstellung in Adobe FrameMaker
 
Hbbtv
HbbtvHbbtv
Hbbtv
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum Style
 
Interaktives Web
Interaktives WebInteraktives Web
Interaktives Web
 
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
 
Werde Übersetzer! Werde Translation Editor!
Werde Übersetzer!  Werde Translation Editor!Werde Übersetzer!  Werde Translation Editor!
Werde Übersetzer! Werde Translation Editor!
 
Docbook: Textverarbeitung mit XML
Docbook: Textverarbeitung mit XMLDocbook: Textverarbeitung mit XML
Docbook: Textverarbeitung mit XML
 

Einführung HTML (Geschichte + Basics)

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