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

Contenu connexe

Similaire à 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
 

Similaire à 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)

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 9.
  • 10.
  • 11.
  • 12.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.