HTML-Hervorhebung: Fett, kursiv und farbig. So erstellen Sie eine schöne Schriftart in HTML: Größen, Farben, HTML-Schriftarten-Tags Mit dem i-Tag können Sie

Etikett In HTML wird es verwendet, um einen Text kursiv zu machen.

HTML-Tag bezieht sich auf physische Formatierungs-Tags. Ändern Sie den Schriftstil mithilfe eines Tags ist stilistisch in der Natur.

Sie können HTML-Text mithilfe des Tags auch kursiv schreiben. In diesem Fall wird der Text als logisch hervorgehoben (durch Bedeutung) "unterstrichen" betrachtet.

In der HTML5-Spezifikation wird empfohlen, logischen Formatierungs-Tags Vorrang einzuräumen: wichtige Textfragmente - ein Tag, eine Betonung - ein Tag, Unterüberschriften - Tags, Texthervorhebung - ein Tag. Schreiben Sie Text mit einem Tag kursiv folgt nur, wenn das Auswahlzeichen keinen logischen Formatierungs-Tags entspricht.

Alle Arten der Textauswahl werden im Artikel beschrieben:

Syntax

kursiver Text

Browser-Anzeige

Anwendungsbeispiel im HTML-Code




Kursives Tag in HTML


Einfacher Text, der sich auf jeder Site befinden kann. Und hier ist der Text in Kursivschrift (

Jeder kennt diese Tags , , , Präsentationen sind und daher, basierend auf dem Paradigma "Struktur, Präsentation, Verhalten", ihre Verwendung nicht gefördert wird. Die Elemente scheinen viel vertrauter zu sein , , ... Dies ist seit vielen Jahren in der Entwicklungspraxis der Fall. Mit der Einführung von HTML5 hat sich jedoch viel an der Semantik dieser Elemente geändert. Jetzt haben wir 4 neue Tags mit Bedeutung und einem Durcheinander im Kopf.

vs.

Wenn früher alle Lehrbücher im Layout voller Sätze wie „Verwenden stattdessen ”, Und das war halb wahr, dann kann heute eine solche Gewohnheit einen bösen semantischen Witz spielen. Und die Sache ist, dass HTML5-Autoren die Verwendung vorschlagen Textpassagen hervorzuheben, um die Aufmerksamkeit des Lesers auf sich zu ziehen, ohne jedoch die Bedeutung des Textes oder der Intonation zu erhöhen. Die Spezifikation enthält Beispiele für die Verwendung zum Markieren von Schlüsselwörtern in einem Dokument

Das frobonitor und barbinator Komponenten werden gebraten.

Und führt (erster Absatz eines Artikels im Journalismus)


Kätzchen von Haustierkaninchen "adoptiert"


Sechs verlassene Kätzchen haben eine unerwartete neue Mutterfigur gefunden - ein Haustierkaninchen.


Die Tierärztin Melanie Humble brachte die drei Wochen alten Kätzchen zu ihrem Haus in Aberdeen.


Wiederum bedeutet nach wie vor den erhöhten Wert seines Inhalts.

vs.

Von nun an enthält Text, der sich von der allgemeinen Umgebung abhebt, aber keine emotionale Konnotation hat. Meiner Meinung nach, Es ist logisch, es dort zu verwenden, wo die typografische Tradition Kursivschrift vorschlägt (z. B. Wörter in einer Fremdsprache, Begriffe usw.).

Per aspera ad Astra - übersetzt aus dem Lateinischen bedeutet das Sprichwort "Durch Schwierigkeiten zu den Sternen".

das gleiche bedeutet nachdrücklichen Stress, emotionale Betonung auf eine bestimmte Passage des Textes. Dies ist der Fall, wenn wir in der Sprache Wörter mit einer Stimme hervorheben (Intonation, Lautstärke usw.).

Ausführen kippen, erbarme dich.

Lesen Sie den Vertrag sorgfältig durch!

Bei „Text in Kleingedruckten“ (Informationen, die eine rechtliche Formalität darstellen, z. B. eine Unternehmenslizenz oder eine rechtliche Adresse usw.) haben wir in der Regel ein Element mit einer Klasse markiert, die in visuellen Benutzeragenten eine kleinere Schriftart festlegt. Jetzt ist ein neues altes in unserem Arsenal erschienen semantisch Element - .

Holyvar über

Vorhin war nichts weiter als durchgestrichener Text. Jetzt präsentiert Informationen, die ihre Relevanz verloren haben.
Wir haben auch einen Artikel , was in visuellen Benutzeragenten standardmäßig zu durchgestrichenem Text führt. Dies bedeutet Änderungen im Dokument, und auf den ersten Blick scheint ihr Zweck derselbe zu sein. Hier gibt es jedoch einen subtilen Punkt. Betrachten Sie ein Beispiel für eine Produktseite in einem Online-Shop.
Es können zwei Preise angezeigt werden, von denen einer durchgestrichen ist. Wir markieren es mit einem Element ... Dies bedeutet, dass der alte Preis seine Relevanz verloren hat (egal wann er war, die Tatsache selbst ist wichtig). So überprüfen Sie, was nicht ? impliziert Änderungen am Dokument(Was zählt, ist das irgendwann wurde das Dokument geändert). In unserem Fall enthält das neue Dokument bereits irrelevante Informationen.

Neue Semantik und alter Doktyp

Wenn Sie den Doctype aus einem unbekannten Grund nicht durch einen neuen ersetzen und formal in HTML 4.01 setzen können, verzweifeln Sie nicht. Verwenden Sie alte neue Elemente mit neuer Bedeutung und im Laufe der Zeit werden Sie sich bedanken. Vielleicht wird jemand sagen, dass dies falsch ist, aber schließlich diese Elemente, außer sind nicht einmal ungültig. Darüber hinaus wurde HTML5 unter Berücksichtigung der Abwärtskompatibilität entwickelt. Gleiches gilt für die neue Semantik der alten Elemente. Nichts hat sich radikal geändert und nur ein semantisches Pfefferkorn wurde hinzugefügt.

In diesem Artikel werden wir über die Auswahl von Text sprechen. kursiv HTML. Wie bei fettem Text kann kursiver Text auf drei Arten erstellt werden:

  • Etikett ich HTML;
  • Etikett em HTML;
  • CSS-Eigenschaft schriftstil.

Betrachten wir alle drei Optionen, wie Sie Kursivschrift in HTML erstellen können, diskutieren Sie die Feinheiten dieses Problems und welche Methoden in bestimmten Situationen bequemer und korrekter zu verwenden sind.

Kursiver Text: Tag

Etikett ich (kursiv), ähnlich dem Tag b Bei fettem Text wird kursiver Text physisch hervorgehoben (dies bedeutet, dass sich nur der Stil des Textes ändert). Tag-Anwendung ich:

Website Builder "Nubex"

Somit wird der erforderliche Teil des Textes zwischen den Tags platziert .

Kursiver Text: Tag

Obwohl das Tag ich bleibt gültig, aus Sicht der Site-Optimierung ist es besser, das Tag zu verwenden em um logisch wichtige Textabschnitte hervorzuheben. Dies bedeutet, dass Suchroboter die Wichtigkeit des zwischen Tags platzierten Textes berücksichtigen. :

Webseitenersteller "Nubex"

Ergebnis:

Webseitenersteller "Nubex"

Vergessen Sie jedoch nicht, dass der Text in Tags eingeschlossen ist ich und emObwohl sie (in allen modernen Browsern) fast gleich angezeigt werden, sind sie im Wesentlichen nicht ganz identisch, wie oben erwähnt. Daher müssen Sie Tags nach Bedarf verwenden: Tag em HTML, um wichtige Textabschnitte zu rahmen und visuelles Kursivdesign mithilfe eines Tags anzuwenden ich oder CSS-Stile. Schauen wir uns nun die Verwendung von CSS-Stilen für die Auswahl von kursivem Text an.

Kursiver Text mit CSS

Verwenden Sie die Eigenschaft, um Stile für die Anzeige von Schriftarten in CSS festzulegen schriftstil, die folgende Werte annehmen kann: schräg (kursiver Text), kursiv (kursiv) und normal (normale Schrift).

Es lohnt sich, sich daran zu erinnern kursiv Schriftart und geneigtsind in ihrem Wesen nicht dasselbe. Kursivschrift ist eine spezielle Schriftart, die analog zu handgeschriebenem Text ist, und geneigt gebildet durch Neigen der regulären Schriftart nach rechts.

Attributanwendung schriftstil in der Praxis:

Kursiv mit CSS - "Nubex"

Unsere Websites sind in der Tat riesenschritt in der Webentwicklung.

Wir machen das wirklich qualität Websites.

Es muss jedoch beachtet werden, dass einige Browser Text mit der Eigenschaft enthalten schriftstil: schräg; darf nicht als kursiver Text interpretiert werden, sondern als kursiv.

Jetzt werden wir die Haupt-Tags untersuchen. Beginnen wir mit den Tags, die auf der Seite benötigt werden, und bilden deren Struktur.

Block. Die Struktur der einfachsten Seite

Eine Site-Seite ist eine Nur-Text-Datei mit der Erweiterung .html... Diese Datei enthält den Text der HTML-Seite zusammen mit den Tags. Diese Datei muss die folgenden Tags haben: tag , der den Text der gesamten Site enthalten sollte (alles, was außerhalb dieses Tags geschrieben wird, wird vom Browser ignoriert), und darin sollten sich zwei weitere Tags befinden: tag für den Serviceinhalt der Seite und des Tags - für den Haupttext, der auf dem Browserbildschirm angezeigt wird.

Zum Bereitstellen von Inhalten, die sich innerhalb des Tags befinden Es kommen viele verschiedene Dinge herein, aber im Moment brauchen wir nur zwei davon. Dies ist ein Tag Hiermit wird der Name der Seite, die auf der Registerkarte des Browsers angezeigt wird, und das Tag festgelegt <meta> Hiermit wird die Seitencodierung festgelegt (sie wird im Attribut festgelegt <b>zeichensatz</b> und in der Regel zählt <b>utf-8</b>, mehr dazu im Video, das ein paar Absätze weiter unten sein wird).</p> <p>Auch vor dem Tag <html> Die Konstruktion wird normalerweise geschrieben <b>doctype</b>, gibt die Version der HTML-Sprache an, in der die Site erstellt wurde. Die aktuelle Version der Sprache ist Nummer fünf und der Doctype dafür sollte so aussehen -<!DOCTYPE html> .</p> <p>Schauen wir uns also die Grundstruktur der Seite an (um dieses Beispiel in einem Browser auszuführen, kopieren Sie es in eine Textdatei mit der Erweiterung <b>.html</b> und öffnen Sie in einem Browser, wenn Sie Probleme damit haben - sehen Sie sich das Video unter dem Beispiel an):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dies ist der Titel Dies ist der Hauptinhalt der Seite.

Unter diesem Link erfahren Sie, wie dieses Beispiel in einem Browser aussieht.

Ich denke, nachdem Sie die Grundstruktur der Seite gelesen haben, haben Sie immer noch einige Verwirrung darüber, wie alles in der Praxis aussieht. Aus diesem Grund habe ich ein spezielles Video erstellt, in dem ich Ihnen zeigen werde, wie Sie Ihre erste HTML-Seite erstellen und im Browser ausführen (darin werde ich Ihnen auch den Seitentitel, Codierungen und das Code-Design erläutern). Schauen Sie es sich an und lesen Sie erst weiter:

Nun, da wir gelernt haben, wie man die einfachsten Seiten erstellt, werden wir nützliche Tags untersuchen, die in einem Tag verwendet werden sollten ... Dies sind Tags für Absätze, Überschriften, Listen, Links und andere nützliche Dinge. Also lasst uns anfangen.

Block. Absätze

Eines der Hauptelemente der Seite sind absätze... Sie können mit Absätzen in einem Buch verglichen werden - jeder Absatz beginnt in einer neuen Zeile und hat eine sogenannte rote Zeile (wenn die erste Zeile des Textes des Absatzes leicht nach rechts eingerückt ist). Standardmäßig gibt es keine rote Linie, aber es ist einfach (dazu später mehr).

Mit dem Tag wird ein Absatz erstellt

Auf diese Weise:

Dies ist der Titel

Dies ist ein Absatz.

Dies ist ein weiterer Absatz.

Und noch ein Absatz.

Dies ist ein Absatz.

Dies ist ein weiterer Absatz.

Und noch ein Absatz.

Block. Überschriften h1, h2, h3, h4, h5, h6

Neben Absätzen sind auf der Seite wichtige schlagzeilen... Sie können auch mit Titeln aus einem Buch verglichen werden - jedes Kapitel hat seinen eigenen Titel (den Titel dieses Kapitels) und ist in Absätze unterteilt, die auch ihre eigenen Titel haben. Nun, und der Haupttext der Seite ist in Absätzen.

Überschriften werden erstellt Tags verwenden

,

,

,

,

,
... Sie haben unterschiedliche Bedeutungsgrade. Im Titel h1 sollte haben der Titel der gesamten HTML-Seite, im h2 - Name blöcke Seiten in h3 - der Name der Unterblöcke und so weiter.

Alle Überschriften sind standardmäßig fett gedruckt und haben unterschiedliche Größen (dies kann über CSS geändert werden, dazu später mehr). Siehe Beispiel:

Dies ist der Titel

H1 Überschrift

H2 Überschrift

H3 Überschrift

H4 Überschrift

H5 Überschrift
H6 Überschrift

Dies ist der erste Absatz.

Dies ist der zweite Absatz.

Dies ist der dritte Absatz.

So sieht der Code im Browser aus:

H1 Überschrift

H2 Überschrift

H3 Überschrift

H4 Überschrift

H5 Überschrift
H6 Überschrift

Dies ist der erste Absatz.

Dies ist der zweite Absatz.

Dies ist der dritte Absatz.

Block. Fett

Sie wissen bereits, dass die Standardheader sind fettig... Sie können jedoch auch einfachen Text fett formatieren - nehmen Sie ihn einfach in das Tag auf ... Siehe Beispiel:

Dies ist der Titel

Dies ist normaler Text, und das ist fettig Text.

So sieht der Code im Browser aus:

Dies ist normaler Text, und das ist fettig Text.

sollte in einem anderen Tag verwendet werden, z. B. in einem Absatz. In diesem Fall erstellen Absätze die Gesamtstruktur der Seite (Absätze und Überschriften) und des Tags b macht einzelne Textstücke fett.

Block. Kursivschrift

Neben Fett können Sie auch machen kursivschrift mit dem Tag :

Dies ist der Titel

Dies ist normaler Text, und das ist kursiv Text.

So sieht der Code im Browser aus:

Block. Listen

Neben Absätzen und Überschriften gibt es ein weiteres wichtiges Element der Seite - dies ist die Listen... Solche Elemente sind wahrscheinlich allen Internetnutzern bekannt. Sie sind eine Auflistung von etwas (einer Liste) Punkt für Punkt. Normalerweise befindet sich neben jedem Element in der Liste ein ausgefüllter Kreis (dieser wird aufgerufen) marker aufführen).

Listen werden mit dem Tag erstellt

© 2020 Mobil- und Computer-Gadgets