Folge uns Twitter RSS-Feed

Editor

Zum Bearbeiten deiner HTML- und CSS-Dateien wird ein spezieller Editor benötigt. Der Vorteil ist unter anderem die farbliche Hervorhebung von unterschiedlichem Code, was für mehr Übersicht sorgt und so die Arbeit erheblich erleichtert.

Notepad++ (Windows)

Jedes Template ent­hält im Download eine “index.html”. Das ist immer die Startseite des Templates. Bevor wir wei­tere Seiten erstel­len, pas­sen wir die Startseite mit dem Editor “note­pad++” an.

    Das Arbeiten mit notepad++

  • - note­pad++ hier herunterladen
  • - Editor “note­pad++” starten
  • - oben links auf “Datei” / “Öffnen”
  • - und wähle die “index.html” aus
  • - wir sehen nun den Quellcode des Templates

    Seitentitel ändern

  • - Seitenitiel steht zwi­schen <title> und </title>
  • - wird auch im Web-Browser angezeigt
  • - dient eini­gen Suchmaschinen auch als Input
  • - siehe auch Beispielgrafik 1

    Metatags ändern

  • - in Metags kön­nen wir diverse Angaben notieren
  • - z.B. Suchebgriffe, Autor, Datum ect.
  • - im Quellcode begin­nend mit <meta name=”….”
  • - siehe auch sinn­volle Meta-Angaben (selfhtml)

    Titel im Header/Logo ändern

  • - im Quellcode oft zwi­schen <h1> und </h1>
  • - oder in einem DIV z.B. <div id=”header”>
  • - schaue wel­cher Text sich im Design befindet
  • - suche die­sen Text/Titel im Quellcode

    Navigation ändern

  • - suche die Codezeilen die mit <li> beginnen
  • - Beispiel ver­link­ter Text: <a href=”#”>Text</a>
  • - siehe dazu auch die Beispielgrafik
  • - dort fügst du deine Seitentitel ein
  • - <a href=”seitentitel.html“>Linktext</a>
Beispielgrafik 1

Weitere Seiten erstellen

Die “index.html” ist nach dem Hochladen auto­ma­tisch die Startseite Deiner Homepage. Um wei­tere Seiten zu erstel­len, wie­der die “index.html” mit “Notepad++” öffnen. Im Quellcode den Titel der Seite, sowie die Über­schrif­ten / Texte im Seiteninhalt ändern. Oben links im Editor auf “Datei” kli­cken, wähle dort aus: “Speichern unter”. Speichere die Datei nun z.B. als “meine-Hobbies.html” und lade diese mit “Filezilla” hoch.

Beachte beim Hochladen mit Filezilla

Wenn eine Datei edi­tiert oder neue .html – Seite erstellt wurde, im “Filezilla” oben “aktua­li­sie­ren”. Sonst wird die alte Datei hoch­ge­la­den, bzw. die neu erstellte Datei unten links nicht ange­zeigt (siehe Grafik).

Filezilla Screen

Smultron (Mac)

Wer unter Mac OS X einen HTML-Editor sucht, wird mit Smultron sehr zufrie­den sein. Smultron gibt es in einer alten Version kos­ten­frei auf die­ser Seite oder für 3,99 Euro im Mac App Store.

Die Schritte sind gene­rell die sel­ben, auch der Upload mit Filezilla ist gleich.