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.
Wenn man CASE-Abfragen in SQL erstellen möchte, steht oft vor dem Problem, dass er ein Feld darauf überprüfen muss, ob dieses keinen Wert hat, also NULL ist.
Der erste Ansatz dazu wäre folgender:
SELECT zustand, CASE geld WHEN NOT NULL THEN 'Geld da !' ELSE 'Kein Geld da !' END 'Guthaben', FROM kasse;
Nur leider kommen wir damit zu keiner Lösung ! Warum ?
Weil NULL niemals gleich NULL oder nicht gleich NULL ist oder so ähnlich, ist halt ein bisschen kompliziert mit NULL.
Die Lösung:
SELECT zustand, CASE WHEN geld IS NOT NULL THEN 'Geld da !' ELSE 'Kein Geld da !' END 'Guthaben', FROM kasse;read more
Viele Webdesigner werden die Google-Font-API bereits kennen. Aber für alle anderen hier ein Tipp. Nutzt für die neue Möglichkeit von @font-face in CSS3 stattdessen einfach die Google. Web-Fonts. Warum ?
Es ist eine riesige Bibliothek mit guten Schriftarten und leicht einzubinden !
Schaut euch einfach Mal die Fonts auf der Seite http://www.google.com/webfonts an und macht euch ein Bild davon. Integrieren kann man Sie dann zum Beispiel mit:
<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
Als Nächstes definiert Ihr dann die neue Schriftart im Stylesheet, zum Beispiel:
h1 { font-family: 'Bangers', arial, serif; }
Das sieht dann so aus:
BANGERS
read more
Bei vielen Projekten, bei denen es um User-Generated-Content geht, benötigt man einen starken und vor allem stabilen WYSIWYG-Editor.
In der engeren Auswahl eines Editors stehen für mich nur die drei Folgenden:
- TinyMce
- CKEditor
- FCKEditor1 (frühere Version des CKEditors)
Alle Editoren haben so ihre Vor- und Nachteile. Früher war es eigentlich nur ein Kampf zwischen dem TinyMCE und dem FCKEditor. Dabei hat bei den meisten Anwendern der FCKEditor den Vorzug bekommen. Weil Dieser bereits einen Image-Uploader bereit hielt. In der neuen Version, den CKEditor, ist dieser theoretisch vorhanden. Aber leider muss der FileManager dazu gekauft werden, was natürlich für die Meisten von vorn herein rausfällt. Auch für die neueste Version des TinyMCE-Editors gibt es eine kommerzielle Variante eines File-Uploaders.
Der CKEditor wirkt für Mich heute insgesamt zu unprofessionell, man kann fast sagen zu kindisch. Insgesamt ist der Editor auch nicht stabil genug.
Der TinyMCE ist dagegen stabil und lässt sich leichter konfigurieren, wenn man zum Beispiel verschiedenen Nutzer-Rollen verschiedene Ansichten des Editors anbieten will. Auch Plug-In's und Erweiterungen sind leichter zu erstellen. Kauft man sich den passenden File-Uploader dazu, eigentlich ein perfekter Editor.
Aber mein persönlicher Favorit ist der FCKEditor, leicht zu installieren, leicht anzuwenden und leicht zu konfigurieren. Und der integrierte File-Uploader ist leicht anzuwenden. Leider kann man die Bilder nicht in der WYSIWYG-Ansicht skalieren, der einzige negative Punkt. Aber der FCKEditor ist der insgesamt stabilste und schnellste Editor, den es gibt. Es gibt zwar keinen aktuellen Support mehr, allerdings sollte man Ihn durchaus verwenden, weil man in Google genug Antworten auf Fragen findet.
Vielleicht findet das CK-Team ja doch noch den richtigen Weg zurück und die Leute von TinyMCE integrieren endlich einen File-Uploader.
P.S.: Für WordPress würde ich übrigens den CK-Editor empfehlen im V2-Design, also dem alten FCK-Design. Hier kann man Ihn gut einsetzen, weil es in WordPress schon einen perfekten File-Uploader gibt.
1. Wurde in CKEditor umbenannt, weil das FCK angeblich einem bestimmten angloamerikanischen Ausdruck für, sagen wir, Liebe zu ähnlich war.
read more
Wie vielleicht einige bemerkt haben, habe Ich ein neues Feature von https://www.apture.com/ in den Blog integriert. Wenn Ihr ein Wort markiert, öffnet sich ein “Learn More”-Button, der euch Übersetzungen, Bilder und Video zum markierten Wort oder Satz liefert. Probiert es einfach Mal aus und wenn Ihr möchtet, könnt Ihr euch das Ganze auch selber einbinden. Ganz einfach unter https://www.apture.com/ !
read more
