kiwicube




Tutorials 10. Oktober 2016

Websites mit HTML - Tutorial #000
Du wolltest immer schon deine eigene Website besitzen oder ein Online-Magazin wie kiwicube erstellen. Dann bist du hier richtig, wo du HTML5 von Grund auf lernen wirst.


Was ist HTML?

Bei HTML (Hyper Text Markup Language) handelt es sich um eine textbasierte Sprache zur Beschreibung von Hyperlinks, die vom W3C (World Wide Web Consortium) weiterentwickelt wird. Ein Grundkonzept einer Markup Sprache sind Tags.

In HTML kennt man bis auf wenige Ausnahmen sogenannte “Opening Tags” und “Closing Tags”. Einen ersten Hinweis auf dessen Sinn geben uns die Namen. Zum besseren Verständnis hier ein Beispiel: <kiwicube>Inhalt</kiwicube> Hierbei handelt es sich zwar nicht um einen validen (gültigen) HTML-Tag, aber man sollte trotzdem den Aufbau gut erkennen.

Um ein HTML-Dokument zu erstellen, benötigst du lediglich einen Texteditor. Beispiele hierfür wären das Wordpad in Windows, TextEdit in MacOSX, oder vi in der Linux bash Konsole. Auch gibt es eine Vielzahl anderer Editoren, mit einem viel größeren Funktionsumfang die heruntergeladen oder gekauft werden können, jedoch ist es anfangs von Vorteil auf diesen zu verzichten. Alle in diesen Tutorials verwendeten Beispiele sind kostenlos.

Arbeitsweise

Zuerst öffnen wir ein neues Dokument, dass wir hello.html nennen. In der ersten Zeile sagen wir dem Browser, dass es sich um eine HTML-Datei handelt. Danach benötigen wir noch einen html tag <html></html>, um den Bereich, in dem sich der Inhalt der Website befinden wird zu definieren. Danach gliedern wir diesen noch auf <head> und <body> auf. Auch hier sind die Namen selbsterklärend; Im Kopf befindet sich das Gehirn unseres Dokuments und im Körper, der Inhalt von diesem, aber dazu später mehr. Des Weiteren möchten wir endlich ein Ergebnis sehen. Wir schreiben also zwischen den <body> Tag “Hello World” oder sonstigen Text. Danach speichern wir unser Dokument und öffnen es in einem Browser.
<!DOCTYPE html>
<html>
  <head>
  </head>
  </body>
  Hello World
  </body>
</html>
In diesem Tutorial wird das erstmal das letzte Gerüst sein, dass du gesehen hast. Ich halte das nicht für weiter wichtig und wir werden vorwiegend mit codepen.io arbeiten, wo du arbeiten kannst, als würdest du dich direkt im Tag befinden.

See the Pen Hello World by Christoph Schnabl (@chris2top) on CodePen.


So sieht das Ganze also auf codepen aus, schon nett oder? Du kannst also entweder direkt auf codepen arbeiten, oder, falls du dich noch nicht so sicher fühlst erstmal mit einem Text-Editor und deinem Browser arbeiten. Dies bringt außerdem den Vorteil mit sich, dass du auch ohne Internet arbeiten kannst.

Übungsbeispiel

Versuche nun selbst deine erste eigene Homepage zu erstellen. Bei Fragen kannst du dich gerne bei uns melden oder unserem Slack-Channel beitreten.


Chris Schnabl | Founder 436 Wörter


noname Websites mit HTML - Tutorial #0