Werbung für Ferienimmobilien
Webdesign, HTML und Ich: Eine Einführung
Ihr wollt also anfangen eure eigenen Internetseiten zu erstellen ? Na dann kommt mal mit, ich geb euch etwas Starthilfe dabei.
Grundlegender Aufbau einer Internetseite
Der grundlegende Aufbau einer Internetseite sollte folgende Informationen enthalten:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <title>Meine erste Internetseite</title> </head> <body> </body> </html> |
Das Ergebnis daraus ist verblüffend. Eine weiße Seite und die Worte “Meine erste Internetseite” in der Titelleiste eures Browsers. Findet ihr nicht spannend. Ist es aber, denn ihr habt soeben eine voll funktionsfähige Internetseite auf die Beine gestellt. Nur eines fehlt: Inhalt.
Denn der Inhalt ist der entscheidende Faktor an einer Internetseite. Design und Funktionalität können noch so wunderbar sein, doch eine Internetseite ohne Inhalt bringt euch einfach nichts.
Was ist guter Inhalt ?
Weil Webdesigner coole Leute sind, sprechen sie natürlich nicht von Inhalt, sondern von “Content“. Sie sind auch keine Webdesigner, weil sie so vieles machen, sind sie “Webworker“.
So wie Ich.
Diese beiden Begriffe solltet ihr euch also merken: Content und Webworker. Denn ihr wollt ja Webworker werden, die guten Content erstellen wollen. Nur stellt sich dabei die Frage: Wie komme ich an den Content ? Entweder wird er euch geliefert von euren Kunden oder ihr müsst ihn selber erstellen. Das heißt ein guter Webworker sollte nicht nur Designer sondern auch oft Texter sein oder die Mittel dazu haben, die Erstellung von Texten an externe Dienstleister weiterzugeben. Doch oft ist es sinnvoller sich einfach mal selber damit zu beschäftigen.
Wodurch zeichnet sich nun also guter Content aus? Nun, zuerst sollte das Thema ansprechend für das eigene Projekt sein und thematisch passen. Dann sollte dieser Text möglichst gut strukturiert sein. Um eine gute Struktur zu erreichen, könnt ihr euch an folgender Liste orientieren.
- Nicht zu kleine und vor allem nicht zu große Absätze (ca. 50 Wörter)
- Mehrere Unter-Überschriften (ca. 3)
- Wichtige Zitate, Definitionen etc. aus dem Kontext nehmen und hervorheben
- Eine kurze Einleitung vor dem Text mit maximal 3 Sätzen
Außerdem solltet ihr euren Bildern, die ihr verwendet, immer passende Dateinamen geben und ansprechende Bildbeschreibungen.
Der Effekt den ihr daraus erzielt ist nicht nur, dass ihr gut lesbare Texte entwerft, sondern damit auch automatisch SEO betreibt (Und nein, SEO hat nix mit der Matrix-Triologie zu tun). SEO steht für Search-Engine-Optimation, also Optimierung der Seiten für Suchmaschinen. Früher hat man so versucht die Arbeitsweisen der Suchmaschinen zu überlisten. Heute geht das nicht mehr so einfach und wenn ihr Pech habt, fliegt ihr komplett aus den Suchmaschinen.
Daher mein Tipp: Lasst die Finger von diesen ganzen tollen SEO-Machenschaften á la so-werden-sie-reich-mit-google-und-geklautem-inhalt, sondern schafft einfach guten Inhalt, dann klappt es auch mit Google und dem Nachbarn.
Guter Inhalt in guter Form
Okay, nun genug darüber geredet, jetzt zeig ich euch, wie ihr das Ganze auch praktisch umsetzen könnt. Wir nehmen uns dazu das Konstrukt von oben und bauen es aus.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <title>Mein erster Artikel</title> </head> <body> <article> <h1>Hauptüberschrift</h1> <p>Dies ist der erste Text</p> <h2>Dies ist eine erste Teilüberschrift</h2> <p>Dies ist weiterer guter Text</p> <blockquote>Ich bin ein so tolles Zitat</blockquote> <img src="gutername.jpg" alt="Dies ist ein Bild mit guten Namen" /> </article> </body> </html> |
Böhmische Wälder? Kein Problem, ich gehe gerne mit euch die einzelnen Sachen zusammen durch.
Beginnen wir mit dem Grundgerüst. Zuerst müssen wir dem Browser mitteilen, was er jetzt von uns zu erwarten hat. Es gibt nämlich verschiedene Versionen von HTML und daher muss der Browser wissen, wie er das interpretieren soll, was nun folgt.
Die Zeile
<!DOCTYPE html>
sagt aus, dass wir ein HTML5-Dokument erstellen wollen. Früher gab es da ganz wilde Komplexe, seid einfach froh, dass ihr die nicht mehr lernen müsst. Daher will ich die auch nicht weiter erwähnen.
Als nächstes eröffnen wir den Beginn der Seite mit <html>. Wenn ihr nun ans Ende des Codes schaut, seht ihr da etwas ähnliches: </html> . Warum das so sein muss, ist ziemlich wichtig, wenn ihr Webseiten entworfen wollt, die den Standards entsprechen. Denn jeder Teil im HTML-Code, der selber kein Inhalt ist, sondern weiteren Inhalt enthält muss nicht nur einen Anfang, sondern auch ein Ende haben.
Innerhalb der HTML-Tags (Tag = neuer toller Begriff zum merken) erstellen wir nun den <head>-Teil. Dorthin kommen später viele tolle Sachen hin wie CSS oder JavaScript. Heute und hier legen wir nur den Titel unserer Seite fest. Der Titel ist wichtig für die Suchmaschinen und für die Anzeige des Titels oben am Browserfenster. Ihr solltet stets einen kurzen und eindeutigen Titel wählen, damit euch eure Besucher im Tab-Gewusel des Browsers hoffentlich schnell wiederfinden.
Als Nächstes folgt der <body>-Tag, indem ihr den eigentlichen Inhalt wiederfindet. Dieser sollte immer nach dem <head>-Tag kommen.
Im <body>-Tag findet ihr dann den ersten Inhalt. Dieser wird mit dem neuen Standard “HTML5” mit <article>-Tag eingeleitet. Damit weiß der Browser und auch die Suchmaschine, dass dort Inhalte wie Forenbeiträge oder Blogeinträge stehen. Früher hat man das auf anderen Wegen gemacht, doch der neue Weg ist dank HTML5 um einiges besser. Achja, HTML5 wird bald der neue Standard und ist ungefähr 2022 fertig. Ihr habt als noch Zeit euch damit zu beschäftigen.
Zum Artikel gehören Überschriften. Diese kann man in verschiedene Stufen unterteilen, nach Wichtigkeit und Zugehörigkeit.
Ein Beispiel kommt sofort. Ihr könnt zum Beispiel nach Wichtigkeit einteilen:
1 2 3 | <h1>Die wichtigste Überschrift</h1> <h2>Immer noch wichtig</h2> <h3>Weniger wichtig</h3> |
Das Ergebnis sieht dann folgendermaßen aus:
Die wichtigste Überschrift
Immer noch wichtig
Weniger wichtig
Theoretisch könnt ihr Überschriften unendlich weit einteilen. Empfohlen ist aber eine maximale Verschachtelung bis <h6>.
Ihr könnt damit aber Überschriften einzelnen Teilen zuordnen. Im Beispiel:
Ein Beispiel kommt sofort. Ihr könnt zum Beispiel nach Wichtigkeit einteilen:
1 2 3 4 | <h1>Bananen sind grün</h1> <h2>Warum Bananen gelb sind</h2> <h1>Kiwis sind fliederfarben</h1> <h2>Warum Flieder keine Farbe ist</h2> |
Das Ergebnis sieht dann folgendermaßen aus:
Bananen sind grün
Warum Bananen gelb sind
Kiwis sind fliederfarben
Warum Flieder keine Farbe ist
Ihr solltet Überschriften ruhig einsetzen, aber wie immer gilt: Immer nur in Maßen. Den eigentlichen Text leitet ihr mit <p> ein. Damit habt ihr einen Absatz erstellt. In diesem Absatz können jetzt Text oder Bilder vorkommen. Absätze haben die selbe Funktion wie im wahren Leben: Sie lassen Frauen größer aussehen Sie unterteilen und erhöhen damit die Übersichtlichkeit.
Als nächstes erstellen wir ein Zitat mit <blockquote. Zitate kann und sollte man mit der Herkunft betiteln und sie sollten sich hervorheben vom Rest der Seite. Wie wir das umsetzen zeige ich euch später.
Als Letztes für heute erstellen wir ein Bild. Mit src=”" geben wir an, woher das Bild geladen werden soll. Dieser Pfad kann absolut oder relativ sein. Absolute Pfade sind zum Beispiel “http://www.google.de”. Relative Pfade gehen immer durch die Ordnerstruktur vom aktuellen Dokument aus. Zum Beispiel: “/unterordner/bild.jpg”. Mit alt=”" verpasst ihr dem Bild eine Beschreibung, die dann nützlich ist, wenn Browser keine Bilder anzeigen können, wenn das Bild nicht verfügbar ist oder die Seite von Personen geöffnet wird, die eine Sehbeeinträchtigung haben. Außerdem ist das Ganze auch gut für Google&Co, ihr seht also, wenn ihr das Richtige macht, wird euch Google schon finden.
Das war es für das Erste, wenn ihr mehr wollt, schreibt mich an. Einfach an sven@schannak.com, eine E-Mail wäre dabei angebracht.
Ausblick
Im nächsten Teil geht es um Verweise auf andere Seiten und Dokumente und wie ihr eure Seite gestalten könnt. Endlich !
Viel Spaß und viel Erfolg bis dahin.
