HTML/Tutorials/HTML-Einstieg

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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 lernen Sie die Grundlagen von HTML kennen. Und keine Sorge, diese vier Buchstaben dürfen Sie gerne deutsch aussprechen. Wofür diese Buchstaben im Einzelnen stehen, verraten wir Ihnen auf jeden Fall noch. Jedenfalls sind Sie herzlich eingeladen, mit uns eine Reise durch die Techniken des Internets zu wagen.

Dieses Tutorial gliedert sich in neun Kapitel:

  1. grundlegender Aufbau
    • Das Grundgerüst einer HTML-Seite
    • Grundprinzipien von HTML
    • Der Titel einer HTML-Seite
  2. Auszeichnung des sichtbaren Inhalts
    • Überschriften
    • Absätze
    • Listen
  3. Preistabelle
    • Tabellen
    • eine zweite Seite
  4. Organisatorisches
    • Organisation der Dateien
  5. Ein Menü
    • Auf Seiten verlinken
    • Das Menü
    • Pfadangaben
  6. Bilder
    • Bilder einfügen
    • Bilder verzerren
  7. Einführung: Seiten hübscher machen
    • Gestaltung mit CSS
    • Festlegung von Formatierungen
    • Einbindung von Stylesheets
  8. Verschiedene Möglichkeiten zur optischen Gestaltung
    • Schriftgröße
    • Schriftart
    • Hintergrundfarbe
    • Ausrichtung
  9. Gestaltung: Liste hervorheben
    • Elemente zusammenfassen
    • Ein Element optisch deutlich hervorheben
    • Nachwort




Vorüberlegungen

Was brauche ich, um loslegen zu können?

Zunächst: Sie brauchen keine Internetverbindung, um mit HTML Webseiten erstellen und testen zu können. Solche Webseiten bestehen nämlich, wie Sie feststellen werden, aus ganz normalen Dateien, die Sie einfach auf Ihrem Computer speichern können.

Um HTML-Dateien auf dem Bildschirm anzeigen zu können, benötigen Sie dann nur Ihren Browser, also das Programm, mit dem Sie gerade dieses Tutorial lesen. Die HTML-Dateien (und auch CSS-Stylesheets ab Kapitel 7), um die es im Folgenden hauptsächlich geht, sind reine Textdateien. Um diese Dateien bearbeiten zu können, reicht erstmal ein einfacher Texteditor, der bei Ihrem Betriebssystem bereits vorinstalliert ist.

Beispiele:

  • Linux: KWrite, gedit
  • (Mac) OS X: TextEdit
  • Windows: Editor/Notepad

Es gibt aber eine Vielzahl von oft auch kostenlosen Code-Editoren.

Was soll in mein Webangebot eigentlich rein?

Es kann nicht schaden, sich vor dem Schreiben von Webseiten zunächst zu fragen, was man eigentlich im Internet für Inhalte präsentieren will. Gibt es irgendwelche Texte, Bilder, Filme, Tonaufnahmen…, die ich der Welt zeigen will? Und gibt es jemanden, der diese Dinge sehen und/oder hören will? Oder, um es moderner auszudrücken: Wer ist meine Zielgruppe? Denken Sie beispielsweise an eine Firma, die ihre Produkte/Dienstleistungen anpreist.

Selbstverständlich können Sie HTML auch dann lernen, wenn Sie noch nie über eine Zielgruppe nachgedacht haben. Wir wollten Ihnen den Gedanken nur schon einmal nahebringen. Details zu diesem Thema können Sie unter HTML/Tutorials/Webprojekte planen erfahren.

Oder Sie folgen unserem praktischen Beispiel, das uns durch diesen Kurs begleitet:

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.

Zunächst macht er sich eine Liste dessen, was man im Internet so alles über ihn erfahren soll, und er schreibt Folgendes auf:

  • Leistungen:
    • Möbel nach Ihren Wünschen
      • Küchenmöbel
      • Regale und Schrankwände
      • Badezimmermöbel
    • Haustüren
    • Gartenzäune
    • Reparaturen
  • Bilder!
  • Preistabelle

Nun, das ist ein recht anspruchsvoller Plan. Wir ersparen uns jetzt mal den weiteren Überlegungsablauf und machen für Herrn Meier eine Zutatenliste. Er braucht:

  • Text, also Überschriften und Textabsätze
  • Eine Liste
  • Eine Tabelle
  • Bilder

Letzte Warnung: Wollen Sie wirklich weitermachen?

Ob Sie nun eine Schreinerei besitzen, ein Softwareprojekt managen wollen, einem begrenzten Kreis von Personen (z.B. Ihren Freunden und Ihrer Familie, die eventuell ein Zugangspasswort brauchen) private Fotos zeigen wollen, Ihre Gedanken und Ihr tägliches Tun als öffentliches Tagebuch (Weblog; kurz auch: Blog) mit Kommentarmöglichkeit für beliebige Besucher ins Internet stellen wollen, ein Diskussionsforum betreiben wollen, Ihren Besuchern ein Gästebuch zur Verfügung stellen wollen oder – wie SELFHTML oder die Wikipedia – etwas mehr oder weniger klar Umrissenes auf Einzelseiten dokumentieren wollen:

Vieles ist möglich, und mit diesem Kurs lernen Sie die Grundlagen, um diese und andere Ideen umzusetzen. Wir sind zwar überzeugt davon, dass Sie das Wissen um diese Grundlagen nie bereuen werden, aber wir sind auch ehrlich genug, um Folgendes zuzugeben:

Hinweis

Es gibt auch einfachere Wege. Wenn Sie sich gänzlich auf die Inhalte Ihrer Website konzentrieren möchten und Ihnen dabei vorgefertigte Präsentationslösungen genügen, dann kommen Sie mit einer Suche nach Homepage-Baukasten, Blog erstellen schneller zu akzeptablen Ergebnissen.

So, haben wir Sie nun genug abgeschreckt? Nein? Dann fangen wir auf der nächsten Seite endlich mit unserer ersten HTML-Datei an!