SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

Einstieg in HTML

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Vorschau auf unsere Beispielwebseite

Was muss man eigentlich können oder wissen, um nicht nur im Internet zu surfen, sondern auch eigene Inhalte im Internet zu präsentieren?


In diesem Tutorial lernst du die Grundlagen von HTML kennen. Und keine Sorge, diese vier Buchstaben darfst du gerne deutsch aussprechen. Wofür diese Buchstaben im Einzelnen stehen, verraten wir dir auf jeden Fall noch. Jedenfalls bist du herzlich eingeladen, mit uns eine Reise durch die Techniken des Internets zu wagen.


Dieser Kurs gliedert sich in vier Kapitel:

  • Erste Schritte
    • Überschriften
    • Absätze
    • Listen
    • HTML5-Grundgerüst
  • Hypertext und Multimedia
    • Verweise
    • Ein Menü
    • Bilder + Videos
    • Referenzieren in HTML
  • Gestaltung mit CSS
    • Festlegung von Formatierungen
      • Schriftgröße
      • Schriftart
      • Ausrichtung
    • Einbindung von Stylesheets
  • Layout mit CSS
    • Seitenstrukturierung
    • Elemente nebeneinander platzieren
    • Wie geht es weiter? (Nachwort)


Vorüberlegungen

Was brauche ich, um loslegen zu können?

Um HTML-Dateien auf dem Bildschirm anzeigen zu können, benötigst du dann nur deinen Browser, also das Programm, mit dem du gerade dieses Tutorial liest.

Die HTML-Dateien (und auch CSS-Stylesheets ab Kapitel 3), um die es im Folgenden hauptsächlich geht, sind reine Textdateien. Um diese Dateien bearbeiten zu können, reicht erstmal ein einfacher Code-Editor, der bei deinem Betriebssystem bereits vorinstalliert ist.

Website-Planung – die Schreinerei Meier

Um die Überlegungen zu verdeutlichen, die vor der Veröffentlichung einer Website stehen, begeben wir uns jetzt in die Werkstatt des Schreinermeisters Meier in Dingenskirchen. Meier arbeitet in der Hauptsache als Möbelschreiner, daneben bietet er noch einen Reparaturdienst an – wenn beispielsweise an einer Tür ein Beschlag auszuwechseln oder ein Tisch abzubeizen sei. Er ist ein Mann mit Ambitionen und möchte gern auch über die Grenzen Dingenskirchens hinaus bekannt werden. Nachdem er schon gesehen hat, dass sein schärfster Konkurrent in seiner Werbung eine Internet-Adresse angibt, unter der man sich informieren kann, möchte er so etwas auch.

Html-einstieg-vorschau.png

Auf den folgenden Seiten kannst du seine ersten Schritte bis zur mehrseitigen Homepage verfolgen!

Klick auf das Bild, um die Seiten in einem neuen Tab zu öffnen.

Du kannst alle Dateien herunterladen:

src.selfhtml.org/kurse/html-einstieg.zip (ZIP, 8.9MB)