Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.

HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.

Wer Webseiten erstellen will, kommt früher oder später mit HTML in Berührung. Daher werden wir in den kommenden Video-Trainings gemeinsam die schöne HTML-Welt erobern. Ihr werdet Schritt für Schritt sehen, was es mit dieser Sprache auf sich hat und wie man mit ihr in Kombination mit Stylesheets Webseiten erstellen kann. Am Anfang steht allerdings eine Frage: Was hat es eigentlich mit HTML und den Stylesheets auf sich? Am Ende dieses Video-Trainings erfahrt ihr dann außerdem, welche Software ihr benötigt, um Webseiten zu erstellen und zu testen.


Die Hypertext Markup Language ist die Haus- und Hofsprache des WWW. Die erste Version dieser Sprache wurde im Jahr 1992 veröffentlicht. Seither hat HTML zahlreiche Modifikationen er- und durchlebt und ist mittlerweile bei Version 5 angelangt. (Wobei Version 5 tatsächlich immer noch nicht offiziell als Standard verabschiedet wurde, in aktuellen Browsern aber durchaus schon recht gut unterstützt wird).

HTML ist eine sogenannte Auszeichnungssprache, mit der sich Inhalte strukturieren lassen. Für die Formatierung der Inhalte sind Stylesheets verantwortlich. Mehr zu denen dann im Anschluss.

Verantwortlich für die Weiterentwicklung von HTML ist das World Wide Web Consortium (kurz W3C).

Bilder


 

 
Auf die Webseite des W3C solltet ihr regelmäßig ein Auge werfen, um euch so über die aktuellen Entwicklungen im Web-Bereich auf dem Laufenden zu halten.

Wenn man sich mit HTML beschäftigt, ist eine Frage ganz entscheidend: Welche Version soll ich verwenden? Ihr könnt euch natürlich denken, dass eine Sprache wie HTML fortlaufend aktualisiert wird. Neue Elemente kommen hinzu, alte werden entfernt.

Hier die wichtigsten Sprachversionen bzw. Meilensteine von HTML:

• HTML (November 1992): Das war die erste Version. Der Fokus lag hier ausschließlich auf Textdokumenten.
• HTML 2.0 (November 1995): Es gibt nun auch Elemente für Bilder und Formulare.
• HTML 4.0 (Dezember 1997): Stylesheets, Frames und Skripte werden eingeführt.
• XHTML 1.0 (Januar 2000): Dabei handelt es sich um eine Neuformulierung von HTML 4.0 mittels XML.
• HTML5 (April 2009): Das ist immer noch ein Arbeitsentwurf, also noch kein verabschiedeter Standard.

Der Fokus wird in den folgenden Tutorials auf HTML5 liegen. Denn mit HTML5 soll endlich wieder ein Ruck durch die HTML-Welt gehen. Und in der Tat hat die neue Spezifikation zahlreiche interessante Neuerungen zu bieten. Dazu gehören beispielsweise deutlich komfortablere Formulare, Fortschrittsanzeigen, Zeichenelemente und eine verbesserte Dokumentstruktur. Zudem lassen sich mit dem neuen Standard Videos Plug-In-frei in Webseiten einbetten und es gibt eine Drag-&-Drop-Schnittstelle.
 
 
Der erste Vorschlag zu HTML5 wurde bereits im Jahr 2004 von der Web Hypertext Application Technology Working Group (WHATWG) unter dem Namen Web Applications 1.0 veröffentlicht.

Bilder



Bis heute wurde HTML5 zwar nicht als offizieller Standard veröffentlicht, dennoch haben die Browserhersteller bereits jetzt zahlreiche HTML5-Funktionen in ihre Produkte aufgenommen. Das verwundert nicht, schließlich handelt es sich bei der WHATWG u.a. um eine Allianz der Browserhersteller Apple, Mozilla und Opera. Die Gründung der WHATWG geschah als direkte Reaktion auf die schleppende Entwicklung von Webstandards seitens des World Wide Web Consortiums (W3C).
 
 
An dieser Stelle kann man sich fragen, was die Browserhersteller dazu bewog, einen eigenen HTML-Standard zu entwickeln. Denn schließlich lag bislang die Entwicklung von HTML fest in den Händen des W3C. Aus Sicht der Browserhersteller begannen die Probleme damit, dass das W3C HTML 4.01 ohne besondere inhaltliche Korrekturen in XHTML 1 umgewandelt hat. Ursprünglich wollte das W3C XHTML 1 als einen ersten Schritt in Richtung XML-basiertes Web etablieren. Am Ende der Entwicklung sollte dann XHTML 2 stehen. Eben diese Konzentration des W3C auf XML ist es gewesen, die die Browserhersteller störte. Aus deren Augen ist der XML-Ansatz nämlich praxisfern und spiegelt nicht die tatsächlichen Wünsche der Anwender wieder. (Was das W3C freilich anders sieht).

Seit dem Jahr 2007 entwickeln das W3C und die WHATWG gemeinsam eine HTML5-Spezifikation bzw. arbeiten an ihr. Die aktuellen Entwicklungen zum Thema HTML5 gibt es unter http://www.w3.org/TR/html5/.

Bilder



Der Fokus wird in den kommenden Tutorials auf eben jenem HTML5 liegen.

 
 

CSS für die Formatierung

Ihr habt sicherlich schon einmal mit Dokumentvorlagen in Word oder anderen Textverarbeitungsprogrammen gearbeitet. Wenn ihr also beispielsweise eine Zeile markiert, könnt ihr eine Formatvorlage auswählen.

Bilder



Je nachdem, welche Formatierung in der Dokumentvorlage für diese Formatvorlage gewählt wurde, wird dann die Überschrift angezeigt. Beim Wechsel der Dokumentvorlage ändert sich auch das Aussehen der Überschrift.

Was hat nun Word mit HTML zu tun? Auch für HTML-Dokumente gibt es Formatvorlagen. Definieren lassen sich diese Vorlagen mittels CSS (Cascading Stylesheets). Dank CSS kann man also beispielsweise festlegen, dass Hauptüberschriften (h1) 22 Pixel groß und in grüner Arial-Schrift angezeigt werden sollen.

Stylesheets ermöglichen die strikte Trennung von Struktur und Layout. Für die Strukturierung der Dokumente wird auf HTML gesetzt. Wie die Elemente letztendlich aussehen, bestimmt man hingegen mit CSS.

 
 

Was ihr braucht

In den folgenden Tutorials werdet ihr schrittweise HTML und CSS kennenlernen. Damit ihr selbst Webseiten auf Basis von HTML und CSS umsetzen könnt, braucht ihr übrigens keine aufwendige Software. Im einfachsten Fall verwendet ihr – wenn ihr unter Windows arbeitet – den Standardeditor.

Bilder


 
 
Der ist zwar nicht sonderlich komfortabel, genügt aber für den Anfang. Wer es etwas komfortabler mag, sollte sich aber eher nach einem "echten" HTML-Editor umsehen. Einer der Klassiker ist hier natürlich Dreamweaver.

Dieser Editor ist allerdings nicht kostenlos.

Bilder


 
 
Für Privatanwender kostenlos ist hingegen phase5 (http://www.phase5.info/). Wenn ihr den Editor also für private Zwecke einsetzen wollt, bekommt ihr hiermit ein gutes und kostenloses Tool an die Hand.

Bilder



Neben einem Editor solltet ihr zudem die wichtigsten Browser zum Testen der Webseite installiert haben. Tatsächlich interpretieren die Browser nämlich HTML und CSS hin und wieder durchaus eigenwillig. Vor diesem Hintergrund ist ein ausführliches Testen der Seiten in verschiedenen Browsern Pflicht. Installiert haben solltet ihr wenigstens den Internet Explorer, Google Chrome und Mozilla Firefox. Idealerweise testet ihr die Seite aber auch im Opera-Browser und am Tablet/Smartphone.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 15:59

Herzlichen Dank für das Video.

Portrait von pysyx
  • 28.05.2016 - 14:06

Danke für das video :)

Portrait von KingKusco
  • 10.05.2015 - 19:30

Ich habe gewartet bis fast alle Teile Online sind, damit ich alles am Stück lernen kann. Der Anfang klingt schon mal vielversprechend.

Portrait von BeBa
  • 18.04.2015 - 19:35

Informativ und gut verständlich. Sehr guter Einstieg in das Themengebiet.

Portrait von Real3D
  • 30.03.2015 - 21:37

Vielen Dank, kurz und knackig. Gefällt mir,

Portrait von ZainaPhoto
  • 28.03.2015 - 20:34

Großen Dank für das Video.

LG Zaina

Portrait von Candra15
  • 15.03.2015 - 20:17

Herzlichen Dank für das Video.

Portrait von Hans Ulrich
  • 05.03.2015 - 19:13

Tolles Tutorial, das einen guten Überblick gibt.

Portrait von GabiD7
  • 03.03.2015 - 15:16

Vielen Dank für die Reihe HTML/CSS.
Ich fange gerade mit ihr an, es ist sehr gut aufbereitet!

Portrait von TangoKilo
  • 05.01.2015 - 07:52

Vielen Dank für das Video!

Portrait von MaitreGrosch
  • 19.11.2014 - 12:21

Vielen Dank für das Video, es hilft ein wenig Einblick zu bekommen, für jemanden der so absolut null Ahnung hat...

Portrait von oshannon
  • 03.09.2014 - 10:41

Vielen Dank, ich freu mich schon auf die nächsten Ausgaben.

Portrait von tajama
  • 28.08.2014 - 13:15

Super, wollte es endlich mal lernen und ist ein guter Anfang zum Einstieg

Portrait von 19Smilie90
  • 18.08.2014 - 08:46

hm. Ein Tutorial schön und gut ... der Titel könnte aber auch Geschichte des HTML heißen, dann hätte ich mir die 10Minuten gespart und nach etwas hilfreicherem weitergesucht.

Portrait von skyhy
  • 18.08.2014 - 07:39

Danke für das Tutorial, aber eine etwas zeitnähere Weiterführung wäre, m.M.n., angebracht, da man sich ja sonst ständig alle vorausgegangenen Teile wieder durchlesen muss, um wieder reinzukommen... ;)

Portrait von AnneRick
  • 17.08.2014 - 21:10

Vielen dank fur das Tutorial

Anne

Portrait von AnneRick
  • 17.08.2014 - 21:09

Vielen dank fur das Tutorial

Anne

Portrait von wernie2
  • 17.08.2014 - 13:16

Hallo,

ist gerade auch für Neueinsteiger eine sehr hilfreich.

Vielen Dank

Portrait von Domingo
  • 16.08.2014 - 12:33

Vielen Dank für das Video.

Portrait von Caesarion2004
  • 16.08.2014 - 10:52

Danke für das informative Video mit den grundlegenden Hinweisen.

x
×
×
teststefan