{"id":1109,"date":"2024-10-25T09:43:35","date_gmt":"2024-10-25T08:43:35","guid":{"rendered":"https:\/\/ghanim-solution.de\/?p=1109"},"modified":"2024-10-27T09:49:03","modified_gmt":"2024-10-27T09:49:03","slug":"latex-logo-mit-html-und-css-erstellen-schritt-fur-schritt-anleitung","status":"publish","type":"post","link":"https:\/\/ghanim-solution.de\/index.php\/2024\/10\/25\/latex-logo-mit-html-und-css-erstellen-schritt-fur-schritt-anleitung\/","title":{"rendered":"LaTeX-Logo mit HTML und CSS erstellen: Schritt-f\u00fcr-Schritt-Anleitung"},"content":{"rendered":"\n<p>In dieser Anleitung zeige ich dir, wie du das <span class=\"latex\">L<sup>a<\/sup>T<sub>e<\/sub>X<\/span>-Logo  mit HTML und CSS erstellen kannst. Das <span class=\"latex\">L<sup>a<\/sup>T<sub>e<\/sub>X<\/span>-Logo besteht aus speziellen hoch- und tiefgestellten Zeichen, die es unverwechselbar machen. Mithilfe von HTML und CSS l\u00e4sst sich das Logo einfach und ohne Bilder in Webseiten einf\u00fcgen, wodurch es flexibel an verschiedene Schriftgr\u00f6\u00dfen und -stile angepasst werden kann.<\/p>\n\n\n\n<p>Folge den nachstehenden Schritten, um das LaTeX-Logo f\u00fcr dein Projekt pr\u00e4zise und stilgerecht zu gestalten.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTML-Struktur erstellen<\/strong>:<\/h3>\n\n\n\n<p>Verwende ein <code>span<\/code>-Element mit der Klasse <code>latex<\/code>, um das Logo zu gestalten. Innerhalb des <code>span<\/code>-Elements wird das &#8220;a&#8221; als hochgestelltes Zeichen (sup) und das &#8220;e&#8221; als tiefgestelltes Zeichen (sub) angezeigt. F\u00fcge den folgenden HTML-Code ein:<\/p>\n\n\n\n<pre><code class=\"language-html\">&lt;span class=\"latex\"&gt;L&lt;sup&gt;a&lt;\/sup&gt;T&lt;sub&gt;e&lt;\/sub&gt;X&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>CSS zur Gestaltung des Logos<\/strong>:<\/h3>\n\n\n\n<p>Um das LaTeX-Logo korrekt zu formatieren, f\u00fcge die folgenden CSS-Regeln hinzu. Sie sorgen daf\u00fcr, dass das \u201ea\u201c und \u201ee\u201c in der richtigen Position und Gr\u00f6\u00dfe angezeigt werden.<\/p>\n\n\n\n<pre><code class=\"language-css\">\n\/* Grundformatierung f\u00fcr das LaTeX-Logo *\/\n.tex sub, .latex sub, .latex sup {\n    text-transform: uppercase;\n}\n\n\/* Anpassung f\u00fcr tiefgestellte Zeichen (sub) *\/\n.tex sub, .latex sub {\n    vertical-align: -0.5ex;\n    margin-left: -0.1667em;\n    margin-right: -0.125em;\n}\n\n\/* Anpassung der Schriftgr\u00f6\u00dfe f\u00fcr das Logo *\/\n.tex, .latex, .tex sub, .latex sub {\n    font-size: 1em;\n}\n\n\/* Anpassung f\u00fcr hochgestellte Zeichen (sup) *\/\n.latex sup {\n    font-size: 0.85em;\n    vertical-align: 0.15em;\n    margin-left: -0.36em;\n    margin-right: -0.15em;\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Das Logo testen<\/strong>:<\/h3>\n\n\n\n<p>F\u00fcge HTML und CSS in dein Projekt ein und \u00f6ffne die HTML-Seite im Browser, um zu sehen, wie das LaTeX-Logo aussieht. Das Logo sollte korrekt gestylt sein, mit dem hochgestellten &#8220;a&#8221; und tiefgestellten &#8220;e&#8221;.<\/p>\n\n\n\n<p>Durch diese Schritte wird das LaTeX-Logo genau wie im Original dargestellt und bleibt unabh\u00e4ngig von der Schriftart erkennbar.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In dieser Anleitung zeige ich dir, wie du das LaTeX-Logo mit HTML und CSS erstellen kannst. Das LaTeX-Logo besteht aus speziellen hoch- und tiefgestellten Zeichen, die es unverwechselbar machen. Mithilfe von HTML und CSS l\u00e4sst sich das Logo einfach und ohne Bilder in Webseiten einf\u00fcgen, wodurch es flexibel an verschiedene Schriftgr\u00f6\u00dfen und -stile angepasst werden [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1109","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/comments?post=1109"}],"version-history":[{"count":5,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1109\/revisions"}],"predecessor-version":[{"id":1115,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1109\/revisions\/1115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media\/1119"}],"wp:attachment":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media?parent=1109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/categories?post=1109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/tags?post=1109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}