ChatGPT baut eine Website
Hinweis: Kauflinks verweisen auf Ebay- oder Amazon-Angebote, die mir eine kleine Provision bezahlen, um meinen Kanal/Website zu unterstützen.
Ich lasse ChatGPT eine Website bauen. In HTML mit CSS Farbgestaltung mit Bild. Im Video kannst du alles ganz genau mitverfolgen, was ich eingebe und was heraus kommt.
Video
HTML Code
Und hier ist der HTML Code, den ChatGPT erzeugt hat. Du kannst die Demoseite auch online anschauen ► ChatGPT Website
Die Bilderseite von mir heißt bilderkreislauf.de. Dort gibt es unter anderem kostenlose Bilder von Funkempfängern. Ihr könnt sie gerne nutzen, auch kommerziell aber bitte setzt dann einen Link auf bilderkreislauf.de wie hier:
Tipp: verwende für deine Website keinen Text, der von einer KI wie ChatGPT erzeugt wurde. Die Google KI merkt das sehr schnell und verschlechtert dein Ranking in der Suchmaschine.
<a href="https://www.bilderkreislauf.de" target="_blank" title="Kostenlose lizenzfreie Bilder">bilderkreislauf.de</a><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Roger Ratlos - Kurzwellenhörer (SWL) </title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
color: white;
}
.header {
text-align: center;
margin-top: 50px;
font-size: 36px;
font-weight: bold;
}
.nav {
display: flex;
justify-content: space-around;
margin-top: 50px;
padding: 20px;
background-color: navy;
}
.nav a {
color: white;
text-decoration: none;
font-size: 24px;
}
.nav a:hover {
color: lightblue;
}
.content {
padding: 50px;
background-color: white;
color: navy;
}
.footer {
text-align: center;
padding: 20px;
background-color: navy;
color: lightblue;
font-size: 18px;
}
.image {
max-width: 800px;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
Roger Ratlos - Kurzwellenhörer (SWL)
</div>
<div class="nav">
<a href="#emfaenger">Empfänger</a>
<a href="#frequenzen">Frequenzen</a>
<a href="#uebermich">Über mich</a>
<a href="#kontakt">Kontakt</a>
</div>
<div class="content">
<p>Dies ist eine Demoseite für einen HTML-Code, den ChatGPT geschrieben hat. www.richy-schley.de</p>
<h2 id="emfaenger">Empfänger</h2>
<p>In dieser Kategorie geht es um die verschiedenen Empfänger, die zur Hörung von Kurzwellensendungen genutzt werden können. Hier erfahren Sie mehr über die Vor- und Nachteile der unterschiedlichen Modelle und wie Sie den passenden Empfänger für Ihre Bedürfnisse finden.</p>
<img src="swl.jpg" alt="Kurzwellenhörer" class="image">
<h2 id="frequenzen">Frequenzen</h2>
<p>In dieser Kategorie geht es um die verschiedenen Frequenzbereiche, die für die Hörung von Kurzwellensendungen genutzt werden. Hier erfahren Sie mehr über die gängigen Frequenzbereiche und welche Art von Sendungen Sie auf welchem Bereich finden können.</p><h2 id="uebermich">Über mich</h2>
<p>Mein Name ist Roger Ratlos und ich bin ein begeisterter Kurzwellenhörer (SWL). Ich beschäftige mich schon seit vielen Jahren mit dem Empfang von Kurzwellensendungen und teile hier meine Erfahrungen und Wissen mit anderen Interessierten. Ich bin begeistert von der Vielzahl an Möglichkeiten, die uns die Kurzwelle bietet und freue mich, meine Leidenschaft mit anderen zu teilen.</p>
<h2 id="kontakt">Kontakt</h2>
<p>Sie haben Fragen oder Anregungen? Dann zögern Sie nicht, mich zu kontaktieren! Schreiben Sie mir eine E-Mail an roger@ratlos.de und ich werde mich schnellstmöglich bei Ihnen zurückmelden.</p>
</div>
<div class="footer">
© 2021 Roger Ratlos
</div>
</body>
</html>