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++“ öff­nen. 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.