Schlagwort: Tags

HTML lernen leicht gemacht: Einführung in HTML

In diesem Blogartikel gibt es eine Einführung in HTML.

HTML steht für HyperText Markup Language. Es ist die grundlegende Sprache, die zum Erstellen von Webseiten verwendet wird.

Grundlage des Webs

HTML ist die Sprache, die das Grundgerüst jeder Webseite bildet. Jede Webseite, die Sie im Internet sehen, wird mit HTML erstellt.

HTML-Datei in Visual Studio Code erstellen

Starten Sie Visual Studio Code, indem Sie das Programm aus deinem Startmenü oder der Taskleiste öffnen.

Neues Projekt oder Ordner erstellen

Falls Sie ein neues Projekt beginnen möchten, können entweder ein neues Verzeichnis erstellen oder ein bestehendes Projekt öffnen. Gehen Sie dazu zu Datei > Ordner öffnen… und wähle Sie den Ordner aus, in dem Sie arbeiten möchtest.

Neue HTML-Datei erstellen

Klicken Sie im Datei-Explorer von Visual Studio Code mit der rechten Maustaste (oder drücken von Strg + N), um ein neues Dokument zu erstellen.
Geben Sie einen Dateinamen ein, der mit der Erweiterung .html endet. Zum Beispiel: index.html.

Aufbau des Dateinamens einer HTML-Datei

  • Name der Datei:
    • Dies ist der eigentliche Name Ihrer Datei. Der Name kann nahezu beliebig gewählt werden, sollte aber aussagekräftig und leicht verständlich sein. Zum Beispiel: index, about, contact, etc.
    • Vermeiden Sie Leerzeichen und Sonderzeichen im Dateinamen. Stattdessen können Sie Bindestriche oder Unterstriche verwenden, z.B. meine-seite oder meine_seite.
  • Erweiterung .html:
    • Die Erweiterung .html zeigt an, dass es sich um eine HTML-Datei handelt. Diese Erweiterung ist notwendig, damit der Browser und andere Programme erkennen, dass es sich um eine Webseite handelt, die im HTML-Format geschrieben ist.

Beispiele:

    • index.html: Hier ist index der Dateiname und .html die Erweiterung. Dies ist eine typische Bezeichnung für die Startseite einer Webseite.
    • about.html: Hier ist about der Dateiname und .html die Erweiterung. Dies könnte eine Seite sein, die Informationen über Sie oder Ihr Unternehmen enthält.
    • contact.html: Hier ist contact der Dateiname und .html die Erweiterung. Dies könnte eine Seite sein, die Kontaktdaten oder ein Kontaktformular enthält.

Markup Language

Eine Markup-Sprache verwendet spezielle Codes, sogenannte „Tags“, um den Inhalt einer Webseite zu strukturieren und zu formatieren. Diese Tags geben an, wie Text, Bilder, Links und andere Elemente auf der Seite angezeigt werden sollen.

Tags und Elemente

HTML verwendet Tags, die in spitzen Klammern (< >) stehen. Ein einfaches Beispiel ist das <p>-Tag, das für einen Absatz steht. Der Text, der innerhalb dieser Tags steht, wird als Absatz formatiert.

Beispiel:

<p>Das ist ein Absatz.</p>

„HTML lernen leicht gemacht: Einführung in HTML“ weiterlesen

Was sind Meta-Tags und warum sind sie für die Suchmaschinenoptimierung wichtig?

In diesem Artikel erfahren Sie was Meta-Tags sind und warum diese für die Suchmaschinenoptimierung wichtig sind.
Meta-Tags sind Angaben die innerhalb eines bestimmten Bereichs einer Webseite gemacht werden können. Es gibt einige Meta-Tags die Angaben für Suchmaschinen beinhalten. Das bedeutet, Sie können mit Meta-Tags der Suchmaschine spezielle Informationen geben oder Ihr mitteilen ob Sie eine Webseite überhaupt analysieren soll oder nicht. (Mehr darüber im Artikel „Was ist ein Spider oder Crawler oder Robot?“  ).

Wo werden die Meta-Tags platziert?
Für ungeübte sage ich im Kopfbereich einer Seite. Für Geübte im Head-Bereich (<head> </head> schauen uns die wichtigsten Meta-Tags an:

Description:

Die Description ist die Beschreibung des Inhalts einer Seite. Diese Beschreibung wird auch im Ergebnis einer Suchanfrage in der Suchmaschine angezeigt. Deswegen sollten Sie eine aussagekräftige Description wählen bei der sofort erkennbar ist um was es in dieser Seite geht. Die Description der Startseite meiner Webseite sieht so aus:

<meta name=“Description“ content=“barrierefreies Webdesign, barrierefreie Softwareentwicklung, Suchmaschinenoptimierung, SEO, Accessibility, Software für Menschen mit Behinderung, Reutlingen“ />

Keywords:
Für viele Suchmaschinen sind die Keywords nicht mehr relevant, aber es gibt noch paar wenige Suchmaschinen die diese Angabe lesen. In den Keywords können Sie Suchbegriffen angeben unter denen Sie gerne gefunden werden möchten. Sie sollten allerdings keine Hoffnung haben, dass das dann auch funktioniert! So einfach geht es inzwischen nicht mehr bei der Suchmaschinenoptimierung. Die Keywords meiner Webseite sehen so aus:
<meta name=“KeyWords“ content=“accessibility,barrierefreies Webdesign,Barrierefreiheit,Java,Internetseite,Suchmaschinenoptimierung, SEO, Software, behindertengerechte Software, Behinderung“ />

Robots:
Mit dem Robots-Meta-Tag können Sie der Suchmaschine mitteilen ob sie eine Seite analysieren darf oder nicht. Wenn Sie zum Beispiel innerhalb Ihres Webauftritts eine Seite haben in der Sie nur Sachen ausprobieren möchten, dann macht es Sinn dass Sie der Suchmaschine verbieten diese Seite zu analysieren.
Hier die einzelnen Möglichkeiten:

 

<meta name=“robots“ content=“index“ />
Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen Seite an seine Suchdatenbank zu übermitteln (index = Indizierung).

 

<meta name=“robots“ content=“noindex“ />
Damit verbieten Sie dem Suchprogramm die Datei zu analysieren und in die Suchdatenbank einzutragen.

 

<meta name=“robots“ content=“nofollow“ />
Damit verbieten dem Suchprogramm, untergeordnete Seiten Ihres Projekts, zu denen Verweise führen, zu besuchen (nofollow = nicht folgen). Inhalte aus der aktuellen Seite darf es jedoch an seine Suchdatenbank übermitteln.

 

<meta name=“robots“ content=“all“ />
Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen Seite und aus untergeordneten Dateien Ihres Projekts, zu denen Verweise führen, zu besuchen und an seine Suchdatenbank zu übermitteln.

Dies sind die wichtigsten Meta-Tags die Sie für die Suchmaschinenoptimierung kennen sollten.