ForschungsToolkit

Was ist HTML?

HTML (Hypertext Markup Language) ist eigentlich keine Programmiersprache, sondern eine Seitenbeschreibungssprache.  Darüber hinaus ist HTML im Vergleich zu anderen Websprachen relativ einfach zu lernen. Aus diesem Grund wird HTML auch oft nicht erst genommen, zum Unrecht aber, weil HTML ein Gerüst für andere Websprechen wie Java Script, PHP ode CSS ist. Ohne HTML kann man keine Webseiten programmieren! Der Text, der auf der Webseite erscheinen soll, wird durch Auszeichnungen (englisch markup) von Textteilen eine Struktur gegeben.  Wenn man einzelne Webseiten programmiert, geschieht das so zu sagen per Hand, muss also der gesamte Text markiert werden, bzw.  mit Befehlen beschrieben werden.
Eine HTML-Datei beginnt mit dem Befehl „html“ an und hört mit „/html“ auf. Der eigentliche Inhalt einer Webseite befindet sich zwischen „body“ und „/body“. Die meisten dieser HTML-Elemente werden durch ein Tag-Paar markiert, das heißt durch einen Starttag und einen Endtag. Ein Starttag beginnt immer mit dem Zeichen <. Mit einem > wird der Starttag geschlossen. Ein Endtag besteht aus den Zeichen </, dem Elementnamen und dem abschließenden >

Typisches Gerüst einer HTML-Datei.

Wie bekomme ich aber schnell einen Einstieg in HTML?

Hello World! Überblick über HTML bekommen

Wenn du verstehen willst, wie HTML funktioniert, dann tippe einfach die oberen Befehlszeilen im Text-Editor ab. Du kannst den Quell-Text von Wikipedia einfach hier rauskopieren, aber nachhaltiger wäre es, wenn du den Text abtippst, weil man dadurch sich besser die Befehle merken kann.  Ersetze den Text „Inhalt der Webseite“ durch „Hello World!“ und speichere deine erste Webseite im Text-Editor als „hello-world.html“ ab. Mit der Endung „.html“ erhält der PC die Information, dass es sich nicht um eine einfache Text-Datei, sondern um eine html-Datei handelt. Wenn du nun in dem Zielordner auf die Datei klickst (Doppelklick), geht die Seite nicht im Text-Editor, sondern in deinem Standard-Browser auf. Dies ist nun deine erste Webseite – HTML ist einfach! Deine erste Webseite (HTML-Datei) ist nun aber nur lokal auf deinem Rechner und nur für dich alleine sichtbar. Damit aus deiner HTML-Seite eine echte www-Seite wird, dazu wird ein Server benötigt, der Tag und Nacht mit dem Internet verbunden sit.  möchtest du sicherlich nicht alle deine HTML-Seiten mit weißem Hintergrund, schwarzer Standard-Schrift unformatiert haben? Dazu ist die Seitenbeschreibungssprache HTML da um den Text zu formatieren und strukturieren und wie das geht, erfährst du im Folgendem.

HTML Einführung - HTML 1

HTML Struktur - HTML 2

Wie geht es jetzt weiter?

HTML-Editor: braucht man den?
Für die erste Übung oben (Hello World!) brauchtest du nur einen einfachen Text-Editor. Wenn du aber bald in die HTML-Welt eintauchen möchtest, brauchst du einen HTML-Editor. Warum? Weil die Arbeit mit einem speziellen Editor die Arbeit erleichtert, in dem der zu beschreibende Text farblich von den Befehlen getrennt wird. Zudem ist eine Fehlersuche mit diesem Editor viel einfacher und du dadurch sehr viel Zeit sparen kannst. Es gibt viele HTML-Editoren, die man installieren muss oder die Arbeit damit erfolgt online. Einige Editoren sind kostenfrei, oft aber auch in einer nur eingeschränkten Version. Eine Übersicht bekommst du z.B. hier. Zu diesem Zweck empfehlen wir einen kostenlosen Editor „Phase5“, der für Privatpersonen und Schulen völlig kostenlos ist. Du kannst Phase5 hier herunterladen: https://www.phase5.info/index.php und uneingeschränkt auf deinem PC nutzen. 

So lernst du Hypertext Markup Language:

Wenn du den Phase5-Editor installiert hast, dann kann es jetzt richtig losgehen.  Auf der Webseite SelfHTML bekommst du alles, was du zu Lernen von HTML brauchst (keine Grundkenntnisse nötig!):

  1. HTML/Tutorials/Einstieg/Erste Schritte (Überschriften, Absätze, Listen, HTML5-Grundgerüst). Zeitaufwand 30 Min. Keine Grundkenntnisse nötig!
  2. Hypertext und Multimedia (Verweise, ein Menü, Bilder + Videos, Referenzieren in HTML). Zeitaufwand 30 Min. Keine Grundkenntnisse nötig!
  3. HTML-Tabellen erstellen. Zeitaufwand 15 Min. Grundkenntnisse vorausgesetzt in:
    • Einstieg in HTML
    • Einstieg in CSS

CSS - Cascading Style Sheets

Bis jetzt hast du gelernt den Text mit HTML auszuzeichnen. Mit CSS kannst du endlich deine Inhalte von den Darstellungsvorgaben trennen und das Aussehen nicht nur einer einzigen Seite, sondern mehrerer Webseiten mit einem Befehl beeinflussen. Wie das geht, kannst du hier nachlesen.

Du willst gar nicht coden? Damit du nicht völlig frustriert, diese Webseite verlässt, haben wir für dich eine Möglichkeit herausgesucht, mit der du Webseiten (kostenlos) erstellen kannst, ohne codieren zu müssen. Eine gute Alternative dazu ist die Software „Mobirise“. Die kann hier heruntergeladen werden: https://mobirise.com/.
„Mobirise Website-Baukasten ist eine Freeware, die von Mobirise entwickelt wird. Die Anwendung ermöglicht Benutzern ohne entsprechende technische Kenntnisse die Erstellung und Veröffentlichung von Websites, die auf Bootstrap basieren. Die Erstellung von Webseiten basiert auf dem drag-and-drop Prinzip.“
(Wikipedia).