Tutorial: Create with me the sexiest website from scratch- your own!

Tutorial

Website erstellen wollen viele. Meist beginnt dann die Suche nach den besten Tools. Kaum mag man aber auch nur die Überschrift in einer anderen Farbe haben, fehlt der Über- und Durchblick.

Hier beim 1. Artikel gibt es einiges an Grundinformation, daher vorerst mehr zu lesen. Dies ändert sich, doch manches ist nötig für den Durchblick und damit Du weißt was Dich erwartet.

Es gibt viele Bücher zum Thema, doch die meisten wollen einfach „Tun“ und während des Tuns lernen. Ob Du Anfänger bist oder bereits Erfahrung hast, völlig egal – ich lade Dich ein mit mir und „Miss Website“ ein dreispaltiges Layout, mit unterschiedlich breiten Spalten zu erstellen. Zur Sexiest Website.

Außerdem gibt es:

  1. Wie gestalte ich Links?
  2. Wie gebe ich Listen kleine Bildchen.
  3. Wie funktioniert dies mit Suchfeldern und Formularen. uvm
  4. Soweit als möglich alles unter Berücksichtigung von Webstandards und sog. Barrierefreiheit.

Für die Ungeduldigen:
1. Diesen Artikel bei allen Social Bookmark Diensten abonnieren die Du kennst.
2. Neue Artikel per Email abonnieren.
3. Am Schluss des Tutorials das fertige HTML Gerüst und die style.css downloaden.

Dieses Layout wird in XHTML sein und ein externes CSS nutzen.

Meta Information zu der Artikelserie:

1. Es gibt sehr viele Möglichkeiten so ein dreispaltiges Layout zu erstellen. Ich stelle hier die meine vor. Dazu gibt es jede Menge an Tipps&Tricks gewürzt mit Humor. Dafür sorgt schon meine Miss Website.

2. Ich verzichte bewusst auf irr viele und ausgeklügelte theoretische Abhandlungen. Meine Vergleiche oder Erklärungen kommen aus der Ecke des „Hausverstands“.

3. Am Ende jedes Artikels gibt es eine Linksammlung zum Nachlesen für die, die mehr Theorie wollen oder einfach Zusatzinformation, die ich als wichtig erachte.

3.a Am Ende jedes Artikels gibt es alle Links zur Artikelserie.

4. Fragen sind ausdrücklichst erwünscht. Ich erkläre gerne, aber ich muss wissen „was“. 😉

Was Du brauchst für dieses Tutorial Website erstellen.

Texteditor – grundlegende PC Kenntnisse

  1. Kaffee 😕 – kann sein, dass es mit Tee auch geht, aber da bin ich mir nie so sicher.
  2. einen Texteditor – WordPad ist so etwas.
  3. Kenntnisse wie Du einen Ordner erstellst, wie Du den benennen kannst. Wie man speichert.
  4. Geduld.
  5. Humor
  6. Ich empfehle die Kategorie „CSS“ zu abonnieren:Der Button dazu ist am Ende jedes Artikels zu finden.

Website erstellen hat immer was mit „Überblick“ zu tun

XHTML und CSS sind streng hierarchische Auszeichnungssprachen.

Wer die beiden Auszeichnungssprachen beherrscht ist kein Coder!. Mit Programmierung hat dies nichts zu tun.

Dennoch braucht man Ordnung in all dem Geschehen.

1. Deine Website braucht eine Heimat:

alles kleinschreiben, keine Leerzeichen,
keine Sonderzeichen in Dateinamen

Erstelle auf Deinem Desktop folgendes:

Hauptordner mit dem Namen:sexy-website.
»» 1.Unterordner heißt: images
»» 2.Unterordner heißt: css.

2. Deine Website erblickt das Licht der Welt:

Öffne den Texteditor und speichere die leere Seite mit dem Namen „index.html“ in den Hauptordner „sexy-website“.

Es ist gut sich gleich von Beginn an eine konsequente Kleinschreibung anzueignen. Vor allem Anfänger tun sich da einfach wirklich leichter. Umlaute haben weder in Dateiendungen, noch in irgend einer .html Datei oder .css Datei was verloren. Leerzeichen, Sonderzeichen zwischen zwei Worte versteht nur ein Betriebssystem – vielleicht hat es auch deswegen so oft den „blue screen“ 😉 .

3. Deine Website beginnt zu atmen:

Tippe folgendes in die eben gespeicherte index.html und speichere anschließend nochmals.


<html>
  <head>
    </head>
  <body>
      <p> Hi, ich bin die Deine. </p>
   </body>
</html>

Öffne den Ordner „sexy-website“ klicke dort mit der rechten Maustaste auf die index.html.

Wähle dort aus: Öffnen mit ==> (Browser Deiner Wahl). Bei mir war es der Firefox.

tut-hi

Nun so berauschend auch das Empfinden ist das erste eigene HTML Dokument geschaffen zu haben. So sieht es noch nicht wirklich sexy aus 😉 .

Erklärung:

html, head, body, p und alle anderen benötigten Angaben nennt man „html tag„. Kommt wie fast alles aus dem Englischen: to tag= auszeichnen. So ein html tag sagt dem Browser was er tun muss.

Diese html tags sind immer zwischen < … > also spitzen Klammern. Der Schrägstrich beendet so einen html tag.

Man kann sich diese tags wie Schachteln (box) vorstellen oder wie eine russische Puppe. Man muss die innerste zumachen, bevor man den Deckel auf die größere Box /Puppe gibt.

Das da wäre daher falsch:

......

&amp;amp;lt;/html&amp;amp;gt;
   &amp;amp;lt;/body&amp;amp;gt;

Hier sind body und html falsch geschlossen. Um dies zu verhindern ist das Einrücken beim Tippen sehr hilfreich. So sieht man welcher tag noch nicht zu ist.

head is invisble body shows it all
head is invisble body shows it all

Beim Screenshot Deiner index.html sieht man ganz oben neben dem Browser Icon nur den Namen des Browsers. Hier bei WebDesign-in.de steht da mehr dabei, nämlich der Titel der jeweiligen Webseite. Also der Titel der jeweiligen .html Seite.

Ein Titel ist wie ein Name. Da .html Dokumente eine strenge Hierarchie haben vergibt die Kommandozentrale den Namen/ den Titel. Die befindet sich immer zwischen head und /head. Das sichtbare einer Website ist immer zwischen dem body tag.

3. Deine Website bekommt einen Namen:

Tippe zwischen head und /head den Titel Deiner Website, dann speichere wieder die index.html und erneuere /refreshe die Ansicht im Browser. (strg+F5)


      &amp;amp;lt;title&amp;amp;gt;Sexiest Website of the World&amp;amp;lt;/title&amp;amp;gt;

Jetzt ist neben dem Browsericon der Titel Deiner Website sichtbar. Dann erst der Browsername.

head ist die Kommandozentrale

body zeigt alles her

Zwischen head und /head gibt man u.a. an:

  • Die verwendete Sprache.
  • Ob CSS verwendet wird oder nicht. + den Link zur Quelle
  • Ob man JavaScripts verwendet oder nicht. + den Link zur Quelle
  • Das kleine Bildchen Favicon.
  • Den Titel der einzelnen Seite
  • Meta Daten zur Seite: jugendfrei oder nicht. Wer hat sie gemacht. Versionen der Software. Keywords, Kurzbeschreibungen,..
  • Einfach alles, was man in einer Kommandozentrale eben bestimmt.

Bei Deinem Browser oben gibt es „Ansicht==>Quelltext anzeigen“ da kannst Du nachsehen was sich hier auf WebDesign-in.de zwischen head und /head alles verbirgt. Wie man richtige mata tags schreibt kommt noch. Auch Rom entstand nicht an einem Tag 😉 .

1. Ordnerstruktur erstellt.
1. html Dokument erstellt,
html tags kennen gelernt,
head ist die Kommandozentrale, body zeigt alles her, kleinschreiben,

Das nächste Mal sagen wir dem Browser welches html wir verwenden wollen. Erstellen die Grundstruktur,erstellen das CSS, verlinken das CSS, und erkennen den Unterschied zwischen id und class und wann was sinnvoll ist. Lernen wir den Unterschied zwischen *website- Webseite und Homepage“.

weiterführende Links

  1. Definition XHTML /HTML
  2. SELFHTML DIE Website zum Nachschlagen
Ich freue mich auf Kommentare – Rückmeldungen jeder Art.
Wenn dies hilfreich ist für Dich, dann erzähle es bei einem Social Bookmark Dienst weiter und abonniere den Beitrag.

Ebenfalls informativ und lesenswert

6 Kommentare zu “Tutorial: Create with me the sexiest website from scratch- your own!

  1. Pingback: Website erstellen

  2. Ralph

    Genial einfach. Es gibt nichts besseres für Einsteiger um die Grundlagen überhaupt erstmal zu verstehen.

  3. Daniel

    Sehr schöne Erklärung auch für Typen wie mich, die mit Drehmomentschlüssel und Schraubendreher besser klarkommen. =)

    Leider scheitere ich schon am ersten Punkt. Will ich meinen ersten Versuch (index.html)per Browser öffnen, erscheint dort nur das, was ich grad geschrieben habe, also der ganze Code.

    Grüsse
    Daniel

  4. Karsten Beratz

    Hallo – sorry, kenne deinen Namen leidern icht.

    Ich bin noch recht neu was die htmlProgrammierung anbetrifft und habe folgendes Problem:

    Karstens Webseite

    Mein erster tabel überhaupt

    1. Der Titel wird bei mir nicht angezeigt und Umlaute sehen ganz komisch aus. Was mache ich falsch? Muss ist der Fehler in meinem CSS?

    Ich danke vielmals für die Hilfe!

  5. mts

    utf-8 du musst utf-8 nutzen,
    such das bei Google, dann erkennst du
    und Umlaute müssen im Quelltext als entities stehen,

    welcher Titel wird wo nicht angezeigt?