Code Beginner;hILFE?
So, ich habe vor kurzem angefangen zu "programmieren" mit HTML. Jedoch habe ich ein Problem. Aus irgendeinem Grund (den ich nicht verstehe) wird mein Code nicht richtig geused bzw. habe ich einen Fehler den ich nicht sehe, denn beim Anzeigen des Cods werden zwei anstatt ein Button angezeigt, ausserdem verstehe ich nicht wieso mein Link nicht funkioniert. Ich habe meinen Code hier rein kopiert und hoffe auf Hilfe.
-------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<h1><strong>Get FREE Brawl Stras Gems</strong><h1>
<img src="https://www.linkedin.com/pulse/stepbrawl-stars-gems-coins-generator-without-sq9rc">
</head>
<body>
<p><em>Click here to get FREE Brawl Stars Gems!</em><br>Or click on the Link if the Button doesntt work.</br></p1>
<button>FREE GEMS<button>
<a href= "https://www.linkedin.com/?trk=article-ssr-frontend-pulse_nav-header-logo">
<!-- Ja, ich habe es auf Englisch geschrieben. :)>
</body>
</html>
3 Antworten
Ein vernünftiger Editor würde dir schon einiges verdeutlichen. Mit dem HTML ist so einiges nicht in Ordnung.
1. Was soll die Überschrift <h1> innerhalb von <head>? Die hat da nichts verloren.
2. Ein HTML Element wird immer an einer Stelle geöffnet und an einer anderen wieder geschlossen (Ausnahme, selbst abschließende Elemente z. B. <br />)
Ein "normales" element wird so geöffnet: <h1> und so geschlossen: </h1>. D. h. das schließende Element besitzt einen Slash.
Dieser schließende Slash fehlt bei dir oben bei <h1>, dann nochmal bei <button> (Deshalb hast du 2 Buttons) und bei <a>.
3. Bei <p> hast du zum schließen </p1> geschrieben. Das ist falsch.
4. Kommt noch der Kommentar beginnend mit <!--, dieser Kommentar wird mit --> geschlossen. Du hast aber nur > geschrieben. Auch das ist falsch, wodurch das gesamte restliche Dokument auskommentiert ist.
Es ist ein Wunder, das der Browser bei dem Chaos überhaupt etwas anzeigt. :-D
Die Adresse von dem Bild ist auch falsch,
du brauchst eine URL direkt zu dem Bild nicht zu der Seite wo das Bild sich befindet.
Hier mal wie es aussehen müsste:
<!DOCTYPE html>
<html>
<body>
<h1>
<strong>Get FREE Brawl Stras Gems</strong>
</h1>
<img src="https://media.licdn.com/dms/image/D5612AQEZ6FwE778nvA/article-cover_image-shrink_720_1280/0/1699526692807?e=2147483647&v=beta&t=hgJXRW7wlgy8XEv6gWiJ2x-OGprjCzEU9c_V2qOlUbc" />
<p>
<em>Click here to get FREE Brawl Stars Gems!</em>
<br />
Or click on the Link if the Button doesntt work.
</p>
<button>FREE GEMS</button>
<a href= "https://www.linkedin.com/?trk=article-ssr-frontend-pulse_nav-header-logo">Link</a>
<!-- Ja, ich habe es auf Englisch geschrieben. :)-->
</body>
</html>
Auch dieser Code ist noch nicht richtig.
Zum einen braucht jedes HTML-Dokument einen Titel:
<!DOCTYPE html>
<html>
<head>
<title>Irgendein Titel</title>
</head>
<body>
<!-- etc. ... -->
und zum anderen fehlt dem img-Element ein alt-Attribut.
Naja normal hostest du das Bild ja selbst. D. h. du hast deine HTML Seite auf einem Webserver und das Bild auch. Du kannst nicht einfach so wahllos Bilder aus dem Netz per URL in deine Website einbauen.
D. h. du hast dann z. B. https://www.deinedomain.de/index.html
und wenn du im selben Verzeichen dann ein Bild hast kannst du einfach schreiben
<img src="bild1.jpg" /> mit einer relativen URL.
Oder in der Langform mit absoluter URL:
<img src="https://www.deinedomain.de/bild1.jpg" />
Naja den Browser interessiert das wenig aber du hast recht das alt Attribut ist required genau wie das title Tag.
OK.
Würde dieser code hier passen? Habe nch was beim Link verändert. Theoretisch funkioniert er, aber ist das auch richtig so?
<!DOCTYPE html>
<html>
<body>
<h1>
<strong>Get FREE Brawl Stras Gems</strong>
</h1>
<p>
<em>Click here to get FREE Brawl Stars Gems!</em>
<br />
Or click on the Link if the Button doesntt work.
</p>
<button>FREE GEMS</button>
<a href= "https://www.linkedin.com/?trk=article-ssr-frontend-pulse_nav-header-logo">FREE Gems
<!-- Ja, ich habe es auf Englisch geschrieben. :)-->
</body>
</html>
Nein, siehe mein Kommentar weiter oben.
In Abhängigkeit davon, ob dein Dokument valid ist, richtet der Browser seinen Rendermodus aus.
Ich muss sagen, ich benutze sololearn zum lernen und dort wird es deutlich anders erklärt, und gezeigt.
Die HTML-Spezifikation des W3C drückt sich deutlich aus:
The title element is a required child in most situations, but when a higher-level protocol provides title information, e.g. in the Subject line of an e-mail when HTML is used as an e-mail authoring format, the title element can be omitted.
Der Ausnahmefall trifft bei dir nicht zu.
Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image.
Bezüglich der Bestimmung des Werts sollte dieser W3C-Guide genutzt werden.
Wenn Sololearn dem explizit widerspricht, ist es wohl keine geeignete Lernquelle.
Es gibt einen großen Unterschied zwischen "Reicht aus und funktioniert" und "Ist W3C konform umgesetzt". Ich denke da hilft es jetzt auch nicht zu diskutieren denn natürlich hat regex9 recht. Allerdings muss man das auch grade in deinem Status nicht unbedingt alles so eng sehen. Am Anfang ist doch vor allem wichtig, dass die Sache auch Spaß macht. ;-)
Wichtig ist, dass du dir einen Editor besorgst der dir schonmal die ganzen Syntaxprobleme anzeigt, die du hattest.
Das was du da nochmal kommentiert hast sieht schon viel besser aus. Bei <a> fehlt noch das schließende </a> und dazwischen musst du den Anzeigetext für den Link platzieren.
<button>FREE GEMS<button>
Dir fehlt ein /
ausserdem verstehe ich nicht wieso mein Link nicht funkioniert.
Vermutlich weil der nicht Teil des Buttons ist.
Mehrere fehler sind in deinem code. H1 und img tags gehören in denn body nicht in denn head. Und der img link ist kein img. Also wird das auch nicht funktionieren
das ist ein link zu einer seite. ein img ist sowas: https://beispiel.de/beispiel.jpg oder https://beispiel.de/beispiel.png
Siehe meinen Kommentar, du musst auf ein Bild verweisen nicht auf eine HTML Seite die ein Bild enthält.
KA, das ist just for fun. So kann ich immer nachschauen was ich gelernt habe und immer neue Sachen einfügen
OK danke bro. Auch mit den Fehlern hat alles andere funkioniert im Editor, deswegen dachte ich funkioniert. Aber wieso hat eine Überschrift nichts im Head zu suchen?