10 HTML & CSS Befehle die Du kennen solltest

Roman Perich, geändert am 8 Januar 2024 , Lesezeit ca. 6 Min.


HTML- und CSS-Befehle sind nicht nur dazu da, Webseiten zu erstellen – sie haben das Potenzial, dein Leben zu verändern!

Das mag vielleicht etwas übertrieben klingen, aber es ist wahr: HTML und CSS sind äußerst leistungsstarke Werkzeuge! Wahrscheinlich hast du bereits von ihnen gehört.

Ich habe kürzlich damit begonnen, ein Buch zu schreiben, und werde sogar CSS- und HTML-Formatierungen darin verwenden. Warte also nicht länger und lerne sie! Es handelt sich um technische Sprachen, die genauso wichtig sind wie Englisch.

Daher habe ich hier 10 der wichtigsten HTML- und CSS-Befehle für dich aufgelistet. Nimm dir die Zeit, sie anzuschauen und selbst auszuprobieren. Du wirst sehen, dass es gar nicht so schwierig ist!

Du kannst html immer dann nutzen wenn es nicht mehr geht , so wie

  • Sonderformatierung einfügen
  • Schrift ändern oder Schriftart ändern
  • Tabelle direkt einfügen
  • mit CSS direkt formatieren, was der Standard-Editor nicht unterstützt

Was ist HTML ?

HTML steht für Hyper Text Markup Language. Das ist die Sprache, um die Webseite für den Browser zu erstellen.

HTML dient als Grundgerüst für die meisten Webseiten im World Wide Web.

Es ermöglicht Webentwicklern, den Inhalt einer Webseite zu strukturieren und zu formatieren, indem sie verschiedene HTML-Elemente verwenden, um Text, Bilder, Links, Multimedia-Inhalte und mehr darzustellen.

Es gibt viele HTML-Tags, die in HTML-Dokumenten verwendet werden können, um verschiedene Arten von Inhalten zu strukturieren und darzustellen.

Die Anzahl der verfügbaren Tags hat sich im Laufe der Zeit weiterentwickelt und erweitert, da neue Versionen von HTML eingeführt wurden.

Zum Beispiel:

<b></b> – steht für Fettschrift

<p></p> – steht für Paragraph

Tags können Attribute enthalten, mit denen Sie weitere Informationen wie die Quell-URL eines Bildes und den ALT-Text für einen Link angeben können.

Was ist CSS ?

CSS ist standard für Cascading Style Sheet und wird benutzt um HTML zu formatieren. Damit kannst schon inzwischen alles möglich machen.

CSS Dateien werden in einer CSS Datei gespeichert und geladen, können aber genau so direkt in HTML eingebunden werden.

Wie kann ich HTML editieren?

Dafür gibt es fertige Editoren, die direkt im Browser laufen und dich bei der Formatierung unterstützen.

Die Editoren nennt man WYSIWYG – What You See Is What You Get . Übersetzt heisst es „Was du siehst ist was du bekommst“.

Um wirklich alle HTML Tags auszuschöpfen brauchst du moderne Programme wie Adobe Dreamweaver.

Alternativ nimmst du Bootstrap Studio und erstellst sehr gute und ansprechende Seite. Es ist schon aufwendiger als Webeditoren, dafür hast du auch mehr Möglichkeiten.

Und jetzt kommen wir zu dem wichtigsten. Hier sind 10 Befehle, die du kennen solltest.

1.<h1>-<h6>

Überschriften werden verwendet, um den Inhalt einer Webseite zu strukturieren und zu organisieren. HTML bietet sechs Ebenen von Überschriften, von

(die höchste) bis (die niedrigste). Suchmaschinen betrachten Überschriften als wichtige Elemente, um den Kontext und die Relevanz des Inhalts zu bestimmen.
Die korrekte Verwendung von Überschriften verbessert nicht nur die Suchmaschinenoptimierung, sondern auch den Gesamteindruck des Nutzers.

HTML CODE

<h1>Ich bin die wichtigste Überschrift</h1>

2. <p>

Der-Tag stellt einen Absatz in HTML dar. Er wird verwendet, um Textblöcke einzuschließen und zu formatieren. Suchmaschinen und Benutzer verlassen sich auf gut strukturierte Absätze, um den Inhalt zu verstehen und durch die Webseite zu navigieren.

Stellen Sie sicher, dass Ihre Absätze prägnant, informativ und richtig formatiert sind, um die Lesbarkeit und die Suchmaschinenoptimierung zu verbessern.

HTML CODE

<p>Stelle dir vor , du hast eine Million gewonnen</p>

3. <a>

Der <a>-Tag wird verwendet, um Hyperlinks in HTML zu erstellen. Durch Hinzufügen des href-Attributs können Sie die URL angeben, zu der der Link navigieren soll.

Gut platzierte und relevante Links tragen zu einer besseren Benutzerfreundlichkeit bei und können die Platzierung Ihrer Website in den Suchmaschinen verbessern.

Außerdem hilft das Hinzufügen von beschreibendem Ankertext den Suchmaschinen, den verlinkten Inhalt zu verstehen.

HTML CODE

<a href=“www.perich.de/seite/“>weiter lesen</a>

4. <img>

Das <img>-Tag wird zum Einfügen von Bildern in ein HTML-Dokument verwendet. Es erfordert das src-Attribut, das den Speicherort der Bilddatei angibt.

Das Hinzufügen von beschreibendem Alternativtext zum -Tag hilft Suchmaschinen, den Bildinhalt zu verstehen, wodurch er zugänglicher und SEO-freundlicher wird.

Optional kannst du auch die Attribute (alt,width,heigh) einfügen, um den Browser beim Rendern zu unterstützen. Das kann dazu beitragen, die Ladezeit zu verbessern und die Geschwindigkeit der Website zu erhöhen

HTML CODE

<img src=“www.perich.de./log.jpg“ alt=“Logo“ width=“128″ height=“128″>

5. <div>

Das <div>-Element ist ein vielseitiger Container, mit dem Sie andere HTML-Elemente gruppieren und formatieren können.

Es wird häufig verwendet, um das Layout einer Webseite zu strukturieren und zu organisieren.

Durch die Zuweisung geeigneter Klassen oder IDs zu -Elementen können Sie CSS-Stile anwenden und optisch ansprechende Designs erstellen, die die Aufmerksamkeit des Benutzers erregen.

Zudem kann man auch die Blöcke per Javascript ersetzen oder formatieren. Es ist wie ein Container.

HTML CODE

<div id=“mein-element“>Hier kommt dein Text</div>

6. <ul> und <li>

Ungeordnete Listen (<ul> ) und Listenelemente (<li>) werden zum Erstellen von Aufzählungslisten in HTML verwendet.

Sie bieten eine einfache und effektive Möglichkeit, Informationen strukturiert darzustellen. Suchmaschinen schätzen gut organisierte Inhalte, daher kann sich die richtige Verwendung von und positiv auf Ihre SEO-Bemühungen auswirken.

Bonus: kennst du „ID“ in html ?

z.B „mein-element“ ist der Name. Es ist ein Schlüssel und wird für die Referenzen verwendet

HTML CODE

<ul>
<li>Überschrift A</li>
<li>Überschrift B</li>
</ul>

Fazit

Wenn Du diese 10 HTML- und CSS-Befehle beherrschst, kannst Du herausragende Websites mit verbesserter Sichtbarkeit in Suchmaschinen erstellen.

Denke daran, Überschriften effektiv zu verwenden, dein Inhalte mit Absätzen zu strukturieren und Bilder und Links zu optimieren.

Durch die Kombination dieser Techniken mit Ihrer Kreativität und Ihrem Verständnis für Webentwicklung kannst du dein Websites an die Spitze der Suchmaschinenrankings bringen.

Bleibe neugierig, lerne weiter und erkunde weiterhin die enormen Möglichkeiten von HTML und CSS, um bemerkenswerte Online-Erlebnisse zu schaffen.

Es war am Anfang des Internets und wird auch weiter Bestand des Browsers sein