HTML & CSS für Einsteiger

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

Alle Videos des Tutorials HTML & CSS für Einsteiger

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).

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

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.

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



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/.

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



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.

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



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.

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

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.

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

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.

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



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.

ICONS TEST

/sprites/ui.svg:

alert
apple-pay
apple
arrow-down
arrow-right
arrows
checkbox
checked
chevron-down-small
chevron-down
chevron-left
chevron-right-doble-primary
chevron-right
chevron-up-small
chevron-up
close-cross
close-small
close
cog
complete
copy
eye-lock
eye
facebook-logo
file
form-select-arrow-up
form-select-arrow
google-icon
icon-als-gast-fortfahren_b
icon-anmelden1_b
icon-anmelden2_b
icon-globe
icon-neues-konto-erstellen_b
icon-resize-out
information-icon-button
left-align
letters
like
link-arrow
link
list-icon
lock
mail
medal
moon
notification
open-small
picture
pinterest-2
play
plus-white
quizz
rate
refresh-211
refresh-282
reset
reward
search-thin
search
star
sun
user
warenkorb

/sprites/image-editor.svg:

align-center
align-left
align-right
alignment-center
alignment-left
alignment-right
alignment-vertical-bottom
alignment-vertical-center
alignment-vertical-top
background-test
background
bold
bring-forward
bring-to-front
capslock
change-size
check-point
constrain
copy
crop-image
delete
download
edit-file-name
editable
flip-horisontally
flip-vertically
group-layer
help
hide
italic
justified
layers
line-spacing
lock
not-editable
open-group
paste
redo
rotate
save
send-backward
send-to-back
shape-layer
shapes
show
strike
text-layer
text
translate
underline
undo
unlock
zoom-in
zoom-out

/sprites/paint.svg:

brush
clear
cursors
eraser
escape
full-screen
marker
navigate
pencil
print
refresh
save
spray
zoom-in
zoom-out

/sprites/theme.svg:

001-01
001-02
001-03
001-04
001-05a
001-05b
001-05c
002-05a
3d-square-software-icon-dark
architektur-software-icon-dark
arrows-down-active
arrows-up-active
assets-templates-download-icon-dark
butterfly-answer-icon-dark
category-icon-example
certificate_alternate
certificate_downloaded
certificate_grey
certificate_primary
edit-multiple
edit
facebook
folder
grey-pause
grey-play
grey-stop
icon-als-gast-fortfahren_c
icon-anmelden1_c
icon-anmelden2_c
icon-neues-konto-erstellen_c
icons-cookie
instagram
interests-1
lamp-idea-bulb-smart-icon-dark
linkedin
pinterest
plus
red-cross
reload
toggle-list-active
toggle-list
toggle-on-off-active
toggle-on-off
toggle-single-active
toggle-single
toggle-switch-active
toggle-switch
trash
trophy-inactive
urkunden-zertifikate-software-icon-dark
video-streaming-icon-dark
xing

/sprites/banners.svg:

bild
icons8-google
proven_expert_4eck-tutkit

/sprites/elements-of-design.svg:

annika-hillger
annika-hillger
annika-hillger
annika-hillger_100
annika-hillger_100
annika-hillger_100
blockquote-border-line
icons-svg-log-in
svg-log-in
svg-registration

/sprites/logotypes.svg:

logo-big-colored
logo-big-dark
logo-big-green
logo-big
logo-dark
logo-green
logo-light-grey
logo-light-white
logo-mini-dark
logo-mini-green
logo-mini
logo-payment
logo-small-dark
logo-small-green
logo-small
logo-tutkit
logo
tutkit_pirate-bay
tutkit_voucher_top

/sprites/payment-provider.svg:

apple-pay-2
apple-pay-white
apple-pay
card-bank
card-mastercard
card-paypal
creditcard
g-pay-2
g-pay
google-pay-2
invoice
mastercard
payment-google-pay
paypal-2
paypal
sepa
visa
[]