Letzte Woche habe ich einen HTML- und CSS-Einstiegskurs besucht. Und ich finde: Das sollten Sie auch tun! Die sehr engagierten IT-Cracks von >Master21Academy und We Shape Tech haben mich begeistert. Sie zeigten mir die Grundsätze des Programmierens auf und vermittelten mir die Freude am Coden. Darum lässt sich auch schon nach nur drei (3) lehrreichen Stunden - nebst dem Zertifikat - ein gutes Resultat erzielen! Diese Landing Page habe ich programmiert. Und: Sie ist sogar Mobile Responsive. In diesem Post erfahren Sie, was ich alles gelernt habe, wieso jede/r lernen sollte zu programmieren und wie Sie mit HTML den Grundstein für Ihr SEO legen.
"Grundkenntnisse in der Programmiersprache sind wichtiger als Englisch"
Das behaupte nicht nur ich, sondern auch Apples CEO Tim Cook. Das sehen wohl auch viele Bildungsgremien auf dieser Welt so. Denn bereits an vielen Schulen lernen unsere Kinder zu programmieren. Nach dem Lehrplan 21 lernen bereits Schweizer Erstklässler und Erstklässlerinnen, wie man sich Programmier-Kenntnisse aneignet!
KEEP CALM AND START TO CODE
Also dachte ich, es sei nun höchste Zeit, dass auch ich lerne wie's geht! Nun ja, zumindest die Grundkenntnisse sollten geschärft werden. Schliesslich habe ich als Inbound Marketing Account Manager tagtäglich mit Webpages zu tun, die auf HTML und CSS basieren. Bis anhin blieb mir die Logik der nicht enden wollenden Source Codes im HubSpot verborgen. Ich habe zwar Bilddateien ausgewechselt und ab und zu etwas formatiert, aber ausschliesslich dank Hilfe von Mr. Google oder Mr. IT-Support.
Darum habe ich mich entschieden einen Einstiegskurs zu belegen. Und um eines vorweg zu nehmen: Ich habe es nicht bereut! Am vergangenen Mittwochabend habe ich an einem Event der EU Code Week teilgenommen. Der Workshop, der unter dem Stern "KEEP CALM AND LEARN TO CODE" stand, wurde von Master21 und We Shape Tech organisiert. An dieser Stelle ein grosses Lob an alle Instructors und Helfer. Denn sie haben es geschafft, mir nicht nur die Grundlagen des Programmierens, sondern auch den Spass daran, zu vermitteln. Nun versuche ich das auch und möchte Ihnen meine Learnings aus dem Kurs nicht vorenthalten. Let's dive in!
Programmier-Grundlagen von HTML und CSS
Um HTML und CSS in das Universum der Codier-Künste einzubetten, möchte ich auf den Programmier-Eisberg verweisen. Denn HTML und CSS (sowie JavaScript) sind nur die Spitze. All das, was man sieht. Also das Programmier-Frontend. Backend - oder Unterwasser - befindet sich aber noch so viel mehr. Die vielen Programmiersprachen wie Ruby, Python, Java oder .Net. In diesem Post werde ich nun zusammen mit Ihnen die Spitze des Eisberges erklimmen. Darum jetzt zu meinen wichtigsten Learnings über die Markup Languages HTML und CSS:
HTML = Struktur und Inhalt einer Webpage
Jede Webseite, die Sie besuchen, ist in einer eigenen Sprache geschrieben. HTML. Die "Hyper Text Markup Language". HTML gibt Ihrer Webseite eine Stuktur. Sie dient dazu, Ihre Texte, Titel, Bilder oder Links zu kategorisieren und auf Ihrer Webpage anzuzeigen.
Eine HTML-Struktur ist, etwas vereinfacht, wie folgt aufgebaut:
Quelle: Master21Academy
Wie Sie in dieser Grafik entnehmen können, bildet HTML einen Rahmen um die verschiedenen Inhalte. Um alles an Ort und Stelle zu behalten und eine Logik zu haben, gibt es, wie bei jeder Sprache, auch bei HTML eine eigene "Grammatik": den HTML Core Syntax.
HTML Core Syntax
Generell lässt sich der HTML Syntax also ganz einfach erklären. Er beinhaltet ein Opening Tag, der immer einen Tag Name zwischen den beiden spitzen Klammern <tag name> besitzt. In dieser Klammer kann sich auch ein ergänzendes Attribut befinden <tag name attribut>. Nachfolgend können Sie Ihren Content einfüllen. Damit Ihr Computer den Code lesen kann, müssen Sie nach dem Content immer einen Closing Tag einfügen. Dieser hat immer den selben Tag Name, wie Ihr Opening Tag, wird jedoch mit einem Querstrich ergänzt </tag name>. Hier verwendet man nie Attribute.
An diesem Beispiel möchte ich Ihnen gerne aufzeigen, wie HTML aufgebaut ist, und an welche "Rechtschreibung" Sie sich halten müssen.
Quelle: Master21Academy
In diesem Beispiel sehen wir im Opening und Closing Tag den Tag Name p. Dieser steht für Paragraph. Es wird also per HTML Syntax ein neuer Abschnitt definiert. Im Opening Tag befindet sich mit dem Wert id="intro" zusätzlich ein Attribut. Ein Attribut entspricht in der HTML-Sprache einer Ergänzung, oder Erklärung. Hier wird also Ihrem Computer mitgeteilt, dass es sich bei diesem Abschnitt um ein Intro handelt. Zwischen den beiden Tags befindet sich der effektive Content. Also den Text, den Sie dann in Ihrem Browser sehen.
2 SEO-Hacks, die Sie gleich beim HTML-Codieren anwenden können
Ich liefere Ihnen gleich noch einen weiteren guten Grund, warum Sie sich für die Programmiersprache interessieren sollten: Sie verstehen besser, wieso Sie bestimmte SEO-Hacks anwenden müssen. Und können diese gleich selbst anwenden! Einfache und sehr wichtige Komponente im HTML-Code sind zum Beispiel die Markierungen von Titeln.
Definieren Sie Ihre HTML Title Tags
Quelle: Master21Academy
Auch wenn Sie es bestimmt schon x-mal gehört haben: Ändern Sie Ihre Titel nicht nur über Ihre Standard Design-Palette. Es reicht nicht, wenn Sie die Schrift vergrössern und den Text fett markieren. Sie müssen den dazugehörigen HTML Titel hinterlegen, damit die Suchmaschinen auch erkennen, welche Textausschnitte besonders wichtig sind.
Um SEO gerecht zu werden, sollten Sie folgende Heading Tags verwenden:
- Setzen Sie unbedingt einen H1 Tag - aber nicht mehr!
- Optimieren Sie Ihre Title Tags mit relevanten Keywords.
z.B. 2 SEO-Hacks, die Sie gleich beim HTML codieren anwenden können - Halten Sie sich an eine klare Struktur.
Verwenden Sie z.B. nach H2-Titel nur H3 und nicht H4, H5 oder H6.
Psst...noch mehr SEO-Tipps finden Sie in diesem Blog Post.
Fügen Sie auf allen Website Pages Meta Descriptions ein
Damit Sie auch bei den Suchergebnissen von Google gut abschneiden, sollten Sie zwingend immer auch eine Meta Description in Ihr HTML File einbauen.
Da die Meta Description ja nirgends auf Ihrer Website Page oder Landing Page angezeigt werden soll, fügen Sie diese nicht beim "Body", sondern beim "Head" ein. Bei diesem Blog Post sieht das dann z.B. so aus:
1 <html>
2 <head>
3 <meta name="description" content="Erfahren Sie,
4 wieso Coding für alle wichtig ist,
5 und was Sie grundlegend wissen müssen,
6 um eine Website Page zu programmieren
7 und auf SEO zu optimieren.">
8 </head>
......
Damit Ihre Meta Description auch SEO-optimiert ist, sollte Ihr Text...
- ca. 10 Wörter umfassen - maximal 20 Wörter
- mindestens 70 Zeichen haben
- nicht mehr als 175 Zeichen umfassen
CSS = Design und Style der HTML Elemente
Für das Design und die Ästhetik ist CSS verantworlich. Das zeigt sich eigentlich schon im Namen. CSS steht für "Cascading Style Sheet". Um im Style Sheet verschiedene Werte für die Darstellung zu hinterlegen, müssen Sie (wie beim HTML) auch hier eine Grundregel beachten. Generell hat Ihr Befehl immer die gleiche Struktur. Sie sagen Ihrem Computer:
"An welcher STELLE soll welche EIGENSCHAFT welchen WERT haben."
CSS Syntax
Wie sie sehen, wird bei CSS auf eine andere Sprachregelung und Zeichen zurückgegriffen, als beim HTML-Code. Besonders wichtige Elemente sind hier also die geschwungenen Klammern und das Semikolon.
Quelle: Master21Academy
Beispiel CSS Style Body Text
Um diesen Style vom Text Body zu erhalten, müssen Sie im CSS folgende Werte wie folgt definieren:
1 body{
2 font-family: Arial;
3 font-size: 20px;
4 text-align: center;
5 color: blue;
6 background: rgb(255, 255, 255)
CSS einfach gemacht - mit diesen 3 Start-Tipps werden auch Sie zum Programmierer:
Tipp #1
Denken Sie immer daran, nach Ihrem Value das Semikolon (und nicht einen Doppelpunkt) zu verwenden. Denn sonst funktioniert der gesamte Abschnitt nicht mehr - wie ich aus leidiger Erfahrung weiss.
Tipp #2
Wenn Sie auf Ihrer Tastatur diese geschwungene Klammer nicht gleich finden, hier die Tastenkombination für Ihren Mac:
{ = Alt + 8
} = Alt + 9
Und natürlich auch für alle Windows-Nutzer:
{ = Alt Gr + 7
} = Alt Gr + 0
Tipp #3
Es gibt so viele Möglichkeiten, um Ihre Website schön zu gestalten. Sie kennen aber die Codes und notwendigen Values nicht? Nun, das ist kein Problem. Googeln Sie einfach! Suchen Sie z.B. nach "CSS properties & values" und Sie erhalten viele nützliche Infos geliefert.
Es ist noch kein Programmier-Meister vom Himmel gefallen... aber das Lernen lohnt sich!
Auch ich werde wohl in Zukunft noch Hilfe von Mr. Google und Mr. IT-Support in Anspruch nehmen. Trotzdem bin ich zuversichtlich, dass ich ab dem heutigen Tag einfache Korrekturen und Anpassungen selbst vornehmen kann. Denn endlich sehe ich die Logik hinter dem Code. Sozusagen das Licht am Ende des Tunnels.
Ich möchte auch Sie ermutigen. Trauen Sie sich. Programmieren Sie. HTML und CSS sind eigentlich ganz logisch. Für mich sogar viel einfacher zu lernen als Englisch. Und ganz sicher einfacher als Französisch!
Zudem bin ich mir ganz sicher, dass Sie eine Verwendung für Ihre neuen Programmier-Kenntnisse finden werden. In unserer digitalen Welt ist es einfach unumgänglich. Hinter praktisch jedem technischen Gerät steckt heutzutage eine Programmierung. Deswegen werden auch bestimmt Sie früher oder später mit HTML und Konsorte Bekanntschaft machen. Sei es bei Ihrem Marketing-Automationstool oder bei der Fehleranalyse Ihres BMW Board-Computers.
Lernen Sie programmieren, denn...
"Everybody in this country should learn how to program a computer... because it teaches you how to think."
- Steve Jobs -
5 praktische Tipps, wie auch Sie zum Programmier-Nerd werden:
Damit Sie auch schon bald loslegen und in die Programmiersprache eintauchen können, gebe ich Ihnen diese 5 Gratis-Tipps mit auf den Weg:
- Rom wurde nicht an einem Tag erbaut. Darum: Lernen Sie zuerst die Grundlagen, bevor Sie das ganze Universum des Codierens erkunden.
- Denken Sie daran: Für die Struktur Ihrer Website ist HTML zuständig - für das Design und gute Aussehen CSS.
- Halten Sie sich an Regeln und Strukturen. So stellen Sie sicher, dass Ihr Code funktioniert und Sie können gleich noch etwas für Ihr SEO bewirken.
- Sie müssen nicht alles selbst machen. Stützen Sie sich auf Coding-Toolkits und Datenbanken wie Bootstrap oder Fontawsome. Und wenn Sie nicht gleich eine Lösung finden: Mr. Google hilft immer und jederzeit.
- Denken Sie weiter. Überlegen Sie sich, wie Sie Ihre Programmier-Kenntnisse in Ihrem Alltag anwenden können. Ihr Wissen bereichert Sie nicht nur online, sondern auch offline.
Sie wollen eine neue Website bauen?
Dann müssen Sie nicht zwingend alles selber coden. Wir bei Storylead bauen mit Ihnen Websites mit der Marketing-Software HubSpot. Schauen Sie unser Video und erfahren Sie, wie Sie mit HubSpot Ihre neue Website erfolgreich aufsetzen können.
