In diesem Lab lernen Sie, wie Sie HTML <span>-Tags verwenden können, um inline-Textformatierungen zu erstellen und die visuelle Präsentation von Webinhalten zu verbessern. Das Lab konzentriert sich auf das Verständnis des Zwecks von Span-Tags, das Erstellen einer grundlegenden HTML-Dokumentstruktur und das Anwenden benutzerdefinierter inline-Styles auf bestimmte Textsegmente.
Durch ein praktisches, sich entwickelndes Beispiel werden Sie untersuchen, wie Span-Tags verwendet werden können, um kleine Textteile anzusteuern und zu formatieren, ohne den Fluss des Dokuments zu stören. Am Ende dieses Labs können Sie benutzerdefinierte Textfarben, Hintergrunde und andere inline-Formatierungstechniken mit HTML-Span-Elementen anwenden, um dynamischere und optisch ansprechendere Textformatierungen auf Ihren Webseiten zu erzielen. Wir werden in diesem Lab auf einer einzigen HTML-Datei aufbauen und schrittweise mehr Funktionen und Stile hinzufügen.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"])
html/BasicStructureGroup -.-> html/basic_elems("Basic Elements")
html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings")
html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction")
html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding")
html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements")
subgraph Lab Skills
html/basic_elems -.-> lab-451038{{"Erstellen Sie inline-Textformatierungen mit span-Tags in HTML"}}
html/text_head -.-> lab-451038{{"Erstellen Sie inline-Textformatierungen mit span-Tags in HTML"}}
html/text_dir -.-> lab-451038{{"Erstellen Sie inline-Textformatierungen mit span-Tags in HTML"}}
html/doc_flow -.-> lab-451038{{"Erstellen Sie inline-Textformatierungen mit span-Tags in HTML"}}
html/inter_elems -.-> lab-451038{{"Erstellen Sie inline-Textformatierungen mit span-Tags in HTML"}}
end
Verständnis des Zwecks von Span-Tags
In diesem Schritt lernen Sie über den Zweck und die Funktionalität von <span>-Tags in HTML. <span>-Tags sind inline-Elemente. Das bedeutet, dass sie dazu gedacht sind, innerhalb des Textflusses zu funktionieren, im Gegensatz zu block-Elementen wie <p> oder <div>, die vor und nach sich Zeilenumbrüche einfügen. <span>-Tags ermöglichen es Ihnen, spezifische Stile anzuwenden oder semantische Bedeutung einem kleinen Textabschnitt innerhalb eines größeren Inhaltsblocks hinzuzufügen.
Stellen Sie sich vor, Sie markieren ein bestimmtes Wort in einem Satz mit einem Marker. Das <span>-Tag verhält sich wie dieser Marker und ermöglicht es Ihnen, dieses spezifische Wort für die Formatierung anzusteuern.
Sie sind besonders nützlich für:
Anwendung von inline-Styles: Ändern des Aussehens bestimmter Wörter oder Phrasen.
Hinzufügen von benutzerdefinierter Formatierung: Machen von Textteilen fett, kursiv, farbig usw.
Hervorheben bestimmter Texte: Lenken der Aufmerksamkeit auf wichtige Teile Ihres Inhalts.
Ansteuern kleiner Textsegmente für JavaScript- oder CSS-Manipulationen: Gewähren Sie Ihnen präzisen Kontroll über einzelne Textteile.
Lassen Sie uns eine einfache HTML-Datei erstellen, um die Verwendung von <span>-Tags zu demonstrieren. Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens styling-example.html im Verzeichnis ~/project. Diese Datei wird unser Arbeitsbereich für den Rest des Labs sein.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>This line contains a <span>special</span> word.</p>
</body>
</html>
In diesem Beispiel umschließt das <span>-Tag das Wort "special". Im Moment ändert es das Aussehen nicht, aber es markiert dieses Wort als etwas, das wir später formatieren können.
Anmerkungen: Erfahren Sie mehr über Wie man HTML-Dateien in der WebIDE vorschaut. Nehmen Sie sich einen Moment Zeit, um styling-example.html in der WebIDE anzusehen. Sie werden sehen, dass beide Absätze normal angezeigt werden. Das <span>-Tag allein ändert nicht, wie der Text aussieht.
Anwenden von grundlegenden inline-Styles
Jetzt lassen Sie uns das Wort "special" hervorheben. In diesem Schritt lernen Sie, wie Sie direkt auf das <span>-Element inline-Styles mithilfe des style-Attributs anwenden können. Inline-Styling bedeutet, dass Sie CSS-Eigenschaften direkt innerhalb des HTML-Tags hinzufügen.
Öffnen Sie die Datei styling-example.html in der WebIDE und ändern Sie das <span>-Tag wie folgt:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a <span style="font-weight: bold;">special</span> word.
</p>
</body>
</html>
Wir haben das style-Attribut zum <span>-Tag hinzugefügt. Innerhalb des style-Attributs haben wir font-weight: bold; geschrieben. Dies ist eine grundlegende CSS-Eigenschaft, die den Text fett macht.
Hier ist eine Aufschlüsselung:
style="... ": Dies ist das HTML-Attribut, das es Ihnen ermöglicht, CSS-Regeln direkt auf dieses Element anzuwenden.
font-weight: bold;: Dies ist eine CSS-Deklaration.
font-weight: Dies ist die CSS-Eigenschaft, die steuert, wie fett der Text ist.
bold: Dies ist der Wert, den wir der font-weight-Eigenschaft zuweisen.
;: Das Semikolon ist wichtig! Es trennt verschiedene CSS-Deklarationen innerhalb des style-Attributs. Wenn Sie später mehr Stile hinzufügen möchten, müssen Sie sie mit Semikolons trennen.
Vorschauen Sie erneut styling-example.html in der WebIDE. Sie sollten jetzt das Wort "special" fett gedruckt sehen. Dies zeigt, wie <span>-Tags es Ihnen ermöglichen, bestimmten Text für die Formatierung anzusteuern.
Hinzufügen weiterer inline-Styles
Lassen Sie uns die Formatierung interessanter gestalten. Sie können mehrere inline-Styles auf ein einzelnes <span>-Tag anwenden. In diesem Schritt fügen wir Kursivschrift und Unterstreichung zu unserem Wort "special" hinzu.
Öffnen Sie styling-example.html in der WebIDE und ändern Sie das <span>-Tag, um weitere Stile hinzuzufügen:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline;"
>special</span
>
word.
</p>
</body>
</html>
Wir haben zwei weitere CSS-Deklarationen innerhalb des style-Attributs hinzugefügt, getrennt durch Semikolons:
font-style: italic;: Dies macht den Text kursiv.
text-decoration: underline;: Dies fügt dem Text eine Unterstreichung hinzu.
Denken Sie an das Semikolon nach jeder Deklaration! Es ist entscheidend, damit der Browser versteht, wo ein Stil endet und der nächste beginnt.
Vorschauen Sie styling-example.html. Das Wort "special" sollte jetzt fett, kursiv und unterstrichen sein. Dies zeigt die Macht der Kombination mehrerer inline-Styles mit dem <span>-Tag.
Anpassen von Textfarbe und Hintergrund
Jetzt ändern wir die Farben des Textes und seines Hintergrunds. In diesem Schritt lernen Sie, wie Sie die CSS-Eigenschaften color und background-color innerhalb des style-Attributs des <span>-Tags verwenden können.
Öffnen Sie styling-example.html und ändern Sie erneut das <span>-Tag:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline; color: blue; background-color: lightyellow;"
>special</span
>
word.
</p>
</body>
</html>
Wir haben zwei neue CSS-Deklarationen hinzugefügt:
color: blue;: Dies setzt die Textfarbe auf blau. Sie können verschiedene Farbnamen (wie red, green, black usw.) oder hexadezimale Farbcodes (wie #FF0000 für rot) verwenden.
background-color: lightyellow;: Dies setzt die Hintergrundfarbe des Spans auf hellgelb. Ähnlich wie bei color können Sie benannte Farben oder hexadezimale Codes verwenden.
Vorschauen Sie styling-example.html. Das Wort "special" sollte jetzt fett, kursiv, unterstrichen, blau sein und einen hellgelben Hintergrund haben. Dies zeigt, wie Sie das Aussehen von bestimmten Textteilen erheblich ändern können, indem Sie <span>-Tags und inline-Styles verwenden.
Ein praktischeres Beispiel
Schauen wir uns an, wie Sie <span>-Tags in einem realistischeren Szenario verwenden könnten. Stellen Sie sich vor, Sie erstellen eine Produktbeschreibung. Möglicherweise möchten Sie bestimmte Merkmale oder den Preis hervorheben.
Öffnen Sie styling-example.html und ersetzen Sie seinen Inhalt durch Folgendes:
Wir haben <span> verwendet, um den Produktnamen fett zu gestalten.
Wir haben <span> verwendet, um die wichtigen Merkmale farblich zu kodieren.
Wir haben <span> verwendet, um den Preis größer und rot zu machen. Beachten Sie die font-size-Eigenschaft hier, die zeigt, dass Sie auch die Textgröße steuern können! Die em-Einheit ist eine relative Einheit, die die Textgröße relativ zur Schriftgröße des übergeordneten Elements festlegt.
Wir haben <span> verwendet, um ein Sonderangebot mit einer Hintergrundfarbe und einem Innenabstand (Padding) hervorzuheben. padding fügt Platz um den Text innerhalb der Hintergrundfarbe hinzu.
Vorschauen Sie styling-example.html. Sie werden sehen, wie <span>-Tags verwendet werden können, um visuelles Gewicht und Struktur Ihrem Inhalt hinzuzufügen, wodurch er ansprechender und leichter lesbar wird.
Zusammenfassung
In diesem Lab haben Sie über den Zweck und die Implementierung von HTML-<span>-Tags gelernt, wobei der Schwerpunkt auf ihrer Rolle bei der Anwendung von inline-Textformatierungen lag. Sie haben gesehen, wie <span>-Tags als inline-Elemente es Ihnen ermöglichen, bestimmte Textteile anzusteuern und zu formatieren, ohne den Gesamtfluss Ihres Dokuments zu stören.
Sie haben gelernt, wie man ein einfaches HTML-Dokument erstellt und schrittweise inline-Styles mithilfe des style-Attributs innerhalb von <span>-Tags hinzufügt. Sie haben verschiedene CSS-Eigenschaften wie font-weight, font-style, text-decoration, color und background-color untersucht und gelernt, wie man sie kombiniert, um verschiedene visuelle Effekte zu erzielen. Schließlich haben Sie Ihr Wissen angewandt, um ein praktischeres Beispiel für eine Produktbeschreibung zu erstellen, das zeigt, wie <span>-Tags die Präsentation und Lesbarkeit Ihres Webinhalts verbessern können. Sie sind nun in der Lage, <span>-Tags effektiv zu nutzen, um dynamische und optisch ansprechende Textformatierungen auf Ihren Webseiten hinzuzufügen.
