Mit HTML fett gedruckten Text erzeugen

PDF herunterladen
PDF herunterladen

HTML macht es einfach, Text fett zu drucken, und es gibt mehrere Tags, mit denen du das machen kannst. Noch besser, in ein paar Minuten kannst du einfaches CSS erlernen und es direkt in deinem HTML-Dokument einfügen. Dies ist schneller als ein CSS Stylesheet einzufügen und du hast mehr Kontrolle darüber, wie dick genau der fetteste Text angezeigt wird.

Methode 1
Methode 1 von 2:

Fetten Text mit HTML erzeugen

PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    In HTML5, dem bevorzugten Standard, wird der strong Tag für wichtigen Text empfohlen. Dieser wird in Browsern fast immer als fetter Text dargestellt.
    • Setze den Text, den du fett haben möchtest, zwischen diese Tags: <strong> fetter Text </strong>.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    "Überschriften" werden normalerweise oben auf einer Webseite oder am Anfang eines neuen Abschnitts gesetzt. Normalerweise werden Überschriften fett und größer als die normale Schriftart angezeigt, aber dies kann abweichen. Es gibt 6 verschiedene Tags für Überschriften, von <h1> bis <h6>. Befolge diese Hinweise, wenn du sie nutzt:
    • Der h1 Tag, geschrieben <h1> Deine Überschrift </h1>, ist die wichtigste Überschrift, üblicherweise der größte Text oben auf der Seite.
    • <h2> Der h2 Tag </h2> ist die zweitwichtigste Überschrift und so weiter bis zu <h6> h6, der kleinsten </h6>.
    • Verwende diese selten, nur um deine Seite zu strukturieren. [1] Benutzer sollten die Überschriften schnell querlesen und das gesuchte Thema finden können.
    • Wenn du Unter-Überschriften erstellst, gehe immer nur eine Stufe nach unten. Dies heißt, springe nicht von <h1> auf <h3>. Dies hilft, dass die HTML-Seite ihre Formatierung behält, wenn sie in ein anderes Format übertragen wird. [2]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das <b> Tag wird in HTML5 noch unterstützt, aber <strong> wird in den meisten Situationen vorgezogen. Verwende das <b> Tag nur, wenn der Text aus stilistischen Gründen fett dargestellt werden soll und nicht nur betont. Beispiele enthalten Schlüsselbegriffe oder Vokabular in einer Textstelle oder Produktnamen in einem Bericht. [3]
    • Wie bei den meisten Tags: <b>setze den jeweiligen Text zwischen einen öffnenden und einen schließenden Tag</b>.
    Werbeanzeige
Methode 2
Methode 2 von 2:

Fetten Text mit Inline CSS erstellen

PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    CSS ist eine leistungsfähigere und konsistentere Möglichkeit, deine Webseite zu stylen. Dies macht es zur idealen Art für die Bestimmung, wie deine Seite aussieht , während HTML dafür vorgesehen ist festzulegen, was deine Seite bedeutet . Es ist vollkommen ok, HTML Tags zu nutzen, wenn du wichtigen Text betonen willst, aber CSS gibt dir eine bessere Kontrolle über das visuelle Erscheinungsbild deines fetten Texts.
    • Versuche eine einfache HTML-Seite mit verschiedenen Browsern zu öffnen und du könntest Unterschiede in der Anzeige feststellen. CSS sagt dem Browser genau, wie der durch ein bestimmtes Tag veränderte Text angezeigt werden soll, um den Grad der Abweichung zu verringern.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Wenn du CSS noch nicht kennst, ist "inline CSS" eine gute Möglichkeit für den Anfang. Während du damit Tags wie <p> oder <h1> verändern kannst, wirst du manchmal Text ändern wollen, der noch nicht zwischen Tags steht. [4] Setze in diesem Fall den Text zwischen <span></span> Tags. Diese haben keine Auswirkungen, geben uns aber eine Möglichkeit, um damit zu arbeiten. Hier ist das Beispiel, das wir nutzen:
    • <span>Ich habe gelernt, wie ich diesen Text mit inline CSS fett mache.</span>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML Attribute werden direkt in den Tag in die < > Klammern geschrieben. Das style Attribut ist notwendig, um CSS in den HTML Tag einzufügen, daher werden wir style= in den span Tag einfügen:
    • <span style=> Ich habe gelernt, wie ich diesen Text mit inline CSS fett mache.</span>
    • Es gibt keinen Grund, das style Attribut einzufügen, ohne irgendwelche Styles zu definieren. Wir machen dies nur Schritt für Schritt, damit du leicht folgen kannst.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    CSS-Eigenschaften werden als Teil des style Attributs hinzugefügt. In unserem Fall werden wir die Eigenschaft font-weight nutzen, die festlegt, wie dick die Schrift gedruckt werden soll. Diese einzelne Eigenschaft kann genutzt werden, um fetten (extra-thick) Text oder dünnen Text anzuzeigen oder sogar anzugeben, dass der Text in normaler Dicke ausgegeben werden soll. Füge nach dem = Zeichen "font-weight: " hinzu, etwa so:
    • <span style="font-weight: ">Ich habe gelernt, wie ich diesen Text mit inline CSS fett mache.</span>
    • Noch einmal, dies ist noch nicht fertig und bewirkt noch gar nichts.
    • Vergiss nicht die Anführungszeichen vor und nach font-weight: .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Was wir jetzt noch tun müssen, ist einen Wert für font-weight zwischen font-weight: und dem abschließenden Anführungszeichen anzugeben. Es gibt ein paar Alternativen für verschiedene Grade der "Fettheit", aber der Wert bold ist am einfachsten zu nutzen: [5]
    • <span style="font-weight:bold"> Ich habe gelernt, wie ich diesen Text mit inline CSS fett mache. </span>
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    CSS gibt dir viel mehr Möglichkeiten als HTML, du musst dich also nicht eingeschränkt fühlen. Hier sind die verschiedenen Alternativen für den "bold" Wert: [6]
    • <span style="font-weight:bolder"> "Bolder" Text ist immer dicker als das Eltern-Element. </span> Wenn du z.B. einen ganzen Absatz "bold" machst, dann nutze "bolder" für einen einzelnen Satz in diesem Absatz - dieser wird dann noch dicker.
    • <span style="font-weight:normal"> "Normal" Text wird normal angezeigt, selbst wenn der span in einem bold Tag ist. </span>
    • <span style="font-weight:900"> Du kannst stattdessen eine Zahl von 100 bis 900 angeben, um die Dicke zu bestimmen. 400 ist normaler Text, während fetter Text standardmäßig eine Dicke von 700 hat. </span> [7]
    Werbeanzeige

Tipps

  • Wenn du in CSS die Eigenschaft font-weight nutzt, verwende nur numerische Werte, die Vielfache von 100 sind. Werte dazwischen werden aufgerundet. [8]
  • Ein eingebettetes oder externes CSS Sheet ist eine noch bessere Möglichkeit Text zu fetten, da du damit leicht ein gesamtes Dokument auf einmal ändern und bearbeiten kannst.
  • Jede Schriftart hat nur bestimmte "font weights" zur Verfügung. Wenn du CSS verwendest, wird die nächst mögliche Schriftstärke für das angegebene font weight verwendet. Dies heißt, dass du nicht immer einen Unterscheid zwischen zwei Schriftstärken siehst, die dicker als normal sind.
Werbeanzeige

Verwandte wikiHows

Pseudocode schreiben
Hat ChatGPT ein Wortlimit? Was es ist und wie man es behebt.
Aus Eclipse eine ausführbare Datei erzeugen
Java Home festlegen
Die Version von PHP überprüfen
VBA Code schützen
Anfangen Computer zu programmieren
Den Hexadezimalcode einer Farbe auf deinem Computerbildschirm bekommen
Werbeanzeige

Referenzen

  1. ↑ http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
  2. ↑ http://www.hobo-web.co.uk/headers/
  3. ↑ http://www.quackit.com/html/codes/bold/
  4. ↑ http://reference.sitepoint.com/html/core-attributes/style
  5. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
  6. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
  7. ↑ http://www.w3schools.com/cssref/pr_font_weight.asp
  8. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 16.877 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige