Wie kann ich ein CodePen (HTML, CSS und JavaScript) auf einer Seite einbetten?
Hallo,
ich habe dieses Widget für HTML auf CodePen gefunden:
https://codepen.io/eehayman/pen/jVPKpN
Nun möchte ich das auf einer Seite einbetten. Könnte mir da jemand helfen?
2 Antworten
Als Orientierung eine Lösung mit drei Dateien:
clock.html
<!doctype html>
<head>
<title>Clock</title>
<meta charset="utf-8">
<link href="clock.css" rel="stylesheet">
</head>
<body>
<!-- CODEPEN HTML -->
<script src="clock.js"></script>
</body>
In dein HTML-Dokument kommt an der Stelle meines Platzhalters der HTML-Code aus dem Pen. Er gehört also in den body-Bereich.
Im selben Verzeichnis, in dem diese HTML-Datei liegt, werden noch zwei weitere Dateien angelegt: clock.css und clock.js.
In Letztere fügst du den JavaScript-Code ein. In deinem HTML-Dokument verweist ein script-Tag am Ende des body-Bereichs auf die JS-Datei.
Für die erstgenannte Datei benötigst du den CSS-Code. Klicke im mittleren Tab des Pen (CSS-Reiter) auf den Pfeilbuttons rechts neben dem Zahnradsymbol. Im sich aufklappenden Menü gibt es den Eintrag View Compiled CSS. Wähle den aus, danach kannst du den erscheinenden Code in die CSS-Datei kopieren. In deinem HTML-Dokument verweist ein link-Tag auf die CSS-Datei.
Du musst einfach nur den Code kopieren und bei dir einfügen.