Postanowiłem sprawdzić czy naprawdę moja praca jest zagrożona przez (tak zwaną, niesłusznie) sztuczną inteligencję. Wykorzystałem do tego pierwszy popularny (bardzo!) model ChatGPT3.5.
Poniżej moje prośby i kod który wypluł bot w odpowiedzi (wycinam komentarze bota)
Polecenie: Napisz kod prostej strony www
Niestety, jako model językowy nie mam możliwości bezpośredniego pisania kodu, ale mogę zaproponować Ci podstawowy szablon HTML, który pozwoli na stworzenie prostej strony internetowej:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
<h1>Nagłówek</h1>
<p>Treść strony</p>
</body>
</html>Tak to wygląda:
—
Polecenie: Do powyższego szablonu dodaj artykuł o przykładowej treści
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
<h1>Nagłówek</h1>
<p>Treść strony</p>
<article>
<h2>Tytuł artykułu</h2>
<p>Przykładowy tekst artykułu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, neque sit amet dapibus aliquam, mauris magna faucibus urna, ac laoreet justo nunc a ipsum. In hac habitasse platea dictumst. Donec at bibendum magna. Vestibulum vel magna ut nibh venenatis malesuada eu vel eros. Nulla lacinia vestibulum augue. Nulla facilisi. Integer blandit bibendum libero, sed posuere sapien vestibulum id. </p>
</article>
</body>
</html>Tak to wygląda:
—
Polecenie: Do powyższego kodu dodaj style css
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
<style>
body {
background-color: #f8f8f8;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
line-height: 1.5;
}
h1, h2 {
margin-top: 0;
}
article {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<p>Treść strony</p>
<article>
<h2>Tytuł artykułu</h2>
<p>Przykładowy tekst artykułu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, neque sit amet dapibus aliquam, mauris magna faucibus urna, ac laoreet justo nunc a ipsum. In hac habitasse platea dictumst. Donec at bibendum magna. Vestibulum vel magna ut nibh venenatis malesuada eu vel eros. Nulla lacinia vestibulum augue. Nulla facilisi. Integer blandit bibendum libero, sed posuere sapien vestibulum id. </p>
</article>
</body>
</html>
Tak to wygląda:
—
Polecenie: Do powyższego kodu dodaj menu oraz stopkę strony.
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
<style>
body {
background-color: #f8f8f8;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
line-height: 1.5;
}
h1, h2 {
margin-top: 0;
}
article {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
footer {
background-color: #ccc;
color: #333;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Nagłówek</h1>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Tytuł artykułu</h2>
<p>Przykładowy tekst artykułu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, neque sit amet dapibus aliquam, mauris magna faucibus urna, ac laoreet justo nunc a ipsum. In hac habitasse platea dictumst. Donec at bibendum magna. Vestibulum vel magna ut nibh venenatis malesuada eu vel eros. Nulla lacinia vestibulum augue. Nulla facilisi. Integer blandit bibendum libero, sed posuere sapien vestibulum id. </p>
</article>
</main>
<footer>
© 2023 Przykładowa strona internetowa
</footer>
</body>
</html>
Tak to wygląda:
—
Polecenie: W powyższym kodzie rozbuduj style css aby strona była bardziej atrakcyjna wizualnie. Zastosuj zróżnicowane typy czcionek i zwiększ objętość artykułu.
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
<style>
/* resetowanie stylów dla elementów HTML */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* nawigacja */
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 36px;
font-family: "Roboto Slab", serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
font-size: 20px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav a:hover {
color: #f8f8f8;
}
/* treść strony */
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
article {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 1.6;
color: #333;
}
h2 {
font-size: 28px;
font-family: "Roboto Slab", serif;
font-weight: 700;
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
}
/* stopka strony */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
/* style linków */
a {
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: #f8f8f8;
}
/* style dla nagłówków */
h3 {
font-size: 24px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
/* style dla cytatu */
blockquote {
border-left: 5px solid #333;
padding: 10px 20px;
margin: 20px 0;
font-style: italic;
}
/* style dla listy punktowanej */
ul {
margin-bottom: 20px;
}
li {
margin-bottom: 10px;
line-height: 1.6;
}
/* style dla obrazków */
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px 0;
}
</style>
</head>
<body>
<header>
<h1>Nazwa Strony</h1>
<nav>
<ul>
<li><a href="#">Strona Główna</a></li>
<li><a href="#">O Nas</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Tytuł artykułu</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
lobortis dolor eu risus placerat, ut ultrices est interdum. Sed
gravida, justo ut hendrerit accumsan, tortor arcu sollicitudin nibh,
ut faucibus mauris tellus non velit. Nullam ut ante ex. Nam non enim
vel libero efficitur pretium. Proin ultricies quis velit eu auctor.
</p>
<h3>Nagłówek drugiego poziomu</h3>
<p>
Sed feugiat felis eu lorem pretium, quis convallis metus posuere. Sed
ac nulla sapien. Proin porta elit elit, nec ornare nisl pulvinar
vitae. Sed eget eleifend nisi. Duis pulvinar erat vel justo laoreet,
ac feugiat ipsum bibendum. Nam at justo ut velit mollis finibus.
</p>
<blockquote>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
lobortis dolor eu risus placerat."
</blockquote>
<p>
Aliquam id magna libero. Donec sollicitudin auctor velit, vel
pellentesque turpis vehicula vel. Duis malesuada libero sed ipsum
porttitor, at pellentesque ex finibus. Proin pulvinar malesuada nulla
ac tristique. Nam quis orci malesuada, acc
</p>
<h3>Nagłówek kolejnego poziomu</h3>
<p>
Sed quis quam at nisl venenatis cursus nec non ipsum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Nulla vestibulum elit massa, eu posuere elit congue id. Cras
bibendum, quam a euismod laoreet, mi augue lacinia ipsum, sed
tristique felis tortor sed velit. Curabitur aliquet, mauris eget
lacinia convallis, purus enim tristique enim, eu bibendum risus augue
sed urna. Vestibulum condimentum facilisis metus sit amet dignissim.
</p>
<img src="https://picsum.photos/500/300" alt="Przykładowy obrazek" />
<p>
Mauris eget dapibus nibh. Etiam aliquam, libero at congue
sollicitudin, sapien augue pharetra libero, a hendrerit lacus quam vel
felis. Pellentesque interdum, dolor in eleifend finibus, ante mi
consectetur nibh, ac bibendum leo magna at sapien. Duis vel ex a
massa tempor consectetur. Donec id dui id elit congue porttitor sed
sit amet odio. Fusce vel eleifend libero, eu aliquet velit. Donec vel
orci sed magna elementum suscipit. Etiam nec orci lorem. Sed rutrum
ligula euismod, eleifend quam id, malesuada nisi. Integer eu est in
libero laoreet tincidunt.
</p>
<ul>
<li>Lista punktowana - punkt 1</li>
<li>Lista punktowana - punkt 2</li>
<li>Lista punktowana - punkt 3</li>
</ul>
</article>
</main>
<footer>
<p>© 2023 Nazwa Strony. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>
Tak to wygląda:
—
[ Wow – to już zaczyna wyglądać dobrze! Bot nawet dodał ilustrację z Picsum.photos! Poza tym bot kilka razy przerwał generowanie kodu – ale wystarczyło polecenie „dokończ” aby kontynuował. ]
Polecenie: Napisz wygenerowany kod jeszcze raz. Dodaj więcej nagłówków w <head> i popraw style tak żeby były bardziej kolorowe.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Przykładowa strona internetowa</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Usługi</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Nagłówek pierwszego poziomu</h1>
<h2>Nagłówek drugiego poziomu</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
ultricies dolor. Nulla varius arcu vitae nisi tristique, vitae
vestibulum turpis malesuada. Fusce sit amet elit et enim auctor
sollicitudin. Nam porttitor nibh eget nisi sollicitudin, vel commodo
turpis bibendum. Morbi faucibus, mi at venenatis vestibulum, tortor
quam accumsan augue, sed viverra sapien diam ut nisi. Suspendisse
consectetur risus et leo bibendum dictum. Donec cursus neque ut
pharetra tincidunt. Integer vel fermentum odio. Pellentesque sit amet
ornare ipsum, sit amet rhoncus elit. Maecenas malesuada finibus
nulla, ac tempus sapien congue eu.
</p>
<h3>Nagłówek kolejnego poziomu</h3>
<p>
Sed quis quam at nisl venenatis cursus nec non ipsum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Nulla vestibulum elit massa, eu posuere elit congue id. Cras
bibendum, quam a euismod laoreet, mi augue lacinia ipsum, sed
tristique felis tortor sed velit. Curabitur aliquet, mauris eget
lacinia convallis, purus enim tristique enim, eu bibendum risus augue
sed urna. Vestibulum condimentum facilisis metus sit amet dignissim.
</p>
<img src="https://picsum.photos/500/300" alt="Przykładowy obrazek" />
<p>
Mauris eget dapibus nibh. Etiam aliquam, libero at congue
sollicitudin, sapien augue pharetra libero, a hendrerit lacus quam vel
felis. Pellentesque interdum, dolor in eleifend finibus, ante mi
consectetur nibh, ac
tincidunt nulla nisl eget turpis. Ut tincidunt semper elit, eu
aliquam leo tincidunt nec. Fusce hendrerit, arcu id congue tempus,
dolor est aliquam neque, a porta risus sapien sit amet nunc. Etiam eu
metus blandit, iaculis mauris ac, ullamcorper ipsum. Integer posuere
enim id mi consequat, a ultrices justo suscipit. Sed ultricies enim
sit amet est sagittis, euismod bibendum dolor auctor. Donec a arcu
tristique, malesuada enim ac, rhoncus libero. Proin finibus maximus
tortor a gravida. Curabitur non sapien ultricies, molestie magna sit
amet, blandit libero. Aliquam vitae congue ex, id consequat ante.
Morbi vehicula, lectus eu venenatis interdum, velit neque vestibulum
ipsum, eu hendrerit lorem ex ac libero.
</p>
<h3>Another subheading</h3>
<p>
Fusce tincidunt massa vitae ipsum venenatis malesuada. Nunc imperdiet
lorem eu purus rhoncus, eu ullamcorper turpis sagittis. Nullam at
blandit nulla. Aenean sed libero a mauris feugiat tempor. Suspendisse
hendrerit neque eget sapien porttitor, ac bibendum enim fermentum.
Maecenas euismod augue vel quam iaculis, a bibendum leo bibendum.
Morbi ultrices tellus eget semper malesuada. Sed et sem vitae tellus
posuere sodales ac non massa. Integer eu nisi sed lectus mattis
lobortis. Maecenas sit amet ex metus. Donec sit amet dui vel dolor
iaculis feugiat non vitae lacus. Aenean varius tincidunt velit a
tincidunt. Sed tristique nulla ac felis vehicula, vel convallis ex
consequat. Suspendisse tincidunt congue sem, a suscipit libero.
</p>
</article>
</main>
<footer>
<p>© 2023 Przykładowa Strona Internetowa</p>
</footer>
</body>
</html>Tak to wygląda:
—
[ Dodał czcionki z Google Fonts, ale style wyeksportował do zewnętrznego pliku ]
Polecenie: W powyższym kodzie zamieść style w tagu <style> zamiast odnosić się do zewnętrznego pliku. A strona nie będzie o czymś. Sam wymyśl temat i dopasuj tytuły, nagłówki i artykuł do tego tematu. Wygeneruj cały kod jeszcze raz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zdrowy styl życia</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.5;
background-color: #f2f2f2;
}
header {
background-color: #ffffff;
border-bottom: 1px solid #cccccc;
padding: 10px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: #333333;
font-weight: bold;
margin-right: 10px;
padding: 5px;
border-radius: 5px;
}
nav a:hover {
background-color: #333333;
color: #ffffff;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1,
h2,
h3 {
margin-bottom: 10px;
color: #333333;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
article {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
font-size: 18px;
color: #666666;
}
footer {
background-color: #333333;
color: #ffffff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<nav>
<a href="#">Strona główna</a>
<a href="#">O nas</a>
<a href="#">Poradniki</a>
<a href="#">Kontakt</a>
</nav>
<h1>Zdrowy styl życia</h1>
</header>
<main>
<article>
<h2>Jak dbać o zdrowie?</h2>
<p>
Zdrowie to podstawa dobrego samopoczucia i szczęścia. Aby zachować
dobre zdrowie, należy przede wszystkim zadbać o swoją dietę. Powinniśmy
unikać przetworzonej żywności, cukru i tłuszczów nasyconych. W naszej
diecie powinny przeważać warzywa, owoce, pełnoziarniste produkty
zbożowe oraz chude białka, takie jak ryby czy drób.
</p>
<p>
Ważne jest także regularne wykonywanie ćwiczeń fizycznych. Nie musimy od razu zapisywać się na siłownię - już 30 minut
codziennych spacerów może zrobić wiele dla naszego zdrowia. Dobre
samopoczucie zapewni nam także regularny sen - powinniśmy starać się
spać około 7-8 godzin dziennie.
</p>
</article>
<article>
<h2>Co jeść, aby mieć więcej energii?</h2>
<p>
Aby mieć więcej energii i lepiej funkcjonować w ciągu dnia, warto
zwrócić uwagę na skład swojej diety. Dobrym źródłem energii są
węglowodany, jednak powinniśmy wybierać te złożone, takie jak
pełnoziarniste produkty zbożowe czy warzywa. Ważne są także białka,
które budują mięśnie i zapewniają uczucie sytości na dłużej. W diecie
warto zawrzeć także zdrowe tłuszcze, takie jak te znajdujące się w
oleju lnianym czy awokado.
</p>
<p>
Nie zapominajmy także o regularnym spożywaniu posiłków - najlepiej
jadać 3-4 małe, ale wartościowe posiłki dziennie. Dzięki temu
utrzymamy stały poziom cukru we krwi i unikniemy spadków energii.
</p>
</article>
<article>
<h2>Jak radzić sobie ze stresem?</h2>
<p>
W dzisiejszych czasach wiele osób zmaga się ze stresem, który negatywnie
wpływa na nasze zdrowie psychiczne i fizyczne. Aby radzić sobie ze
stresem, warto zadbać o regularną aktywność fizyczną - ruch uwalnia
endorfiny, czyli hormony szczęścia, które pomagają nam się zrelaksować
i odprężyć.
</p>
<p>
Inną skuteczną metodą na redukcję stresu jest medytacja - już kilka
minut dziennie pozwoli nam uspokoić się i skoncentrować na swoim
wewnętrznym spokoju. Warto także starać się pozytywnie myśleć i
unikać negatywnych myśli oraz sytuacji stresowych, na które nie mamy
wpływu.
</p>
</article>
</main>
<footer>
© 2023 Zdrowy styl życia - wszelkie prawa zastrzeżone
</footer>
</body>
</html>
Tak to wygląda:
—
[ Jest temat (wybrał zdrowy styl życia – ciekawe), ale strona nie bardzo. Jest to krok wstecz. Strona wcale nie jest kolorowa, ilustracja zniknęła…]
Polecenie: Powyższy kod zmodyfikuj tak, żeby strona była bardziej kolorowa. Dodaj gradienty kolorów. Dodaj tematyczne ilustracje i zróżnicuj czcionki. Rozwiń artykuł, podziel go na sekcje. Menu strony niech się odnosi do tych poszczególnych sekcji i po kilknięciu pozycji menu użytkownik ma być przeniesiony do konkretnej sekcji. Cały kod CSS niech będzie umieszczony w pliku HTML.
Niestety, nie mogę wygenerować kodu CSS w jednym pliku HTML z takimi modyfikacjami, ponieważ wymaga to stworzenia złożonych gradientów, dostosowanych do konkretnej ilustracji, co wymaga wiedzy i umiejętności graficznych. Ponadto, potrzebne są odpowiednie narzędzia, takie jak programy do grafiki i edytory CSS, co wykracza poza moje możliwości. […]
Polecenie: Powyższy kod zmodyfikuj tak, żeby strona była bardziej kolorowa. Dodaj tematyczne ilustracje i zróżnicuj czcionki. Rozwiń artykuł, podziel go na sekcje. Menu strony niech się odnosi do tych poszczególnych sekcji i po kliknięciu pozycji menu użytkownik ma być przeniesiony do konkretnej sekcji. Cały kod CSS niech będzie umieszczony w pliku HTML.
[ Tu ChatGPT się pogubił. Wygenerował kawałek kodu, po czym przerwał. Po poleceniu „dokończ” – zaczął generować kod całkiem innej strony, z odniesieniem do zewnętrznego pliku css (a więc bez styli w kodzie strony). Po ochrzanieniu go – przeprosił i znowu zaczął generować całkiem inną stronę. Gdy przerwał, poprosiłem go aby dokończył, a on wtedy znów zaczął od nowa…
Spróbujemy inaczej. Założyłem nowy czat i:]
Polecenie: Jesteś programistą stron internetowych.
Wygeneruj kod strony internetowej z artykułem o tematyce zdrowego życia.
Ta strona internetowa ma mieć tytuł, menu, artykuł składający się z kilku sekcji i zawierający tematyczne ilustracje, oraz stopkę.
Kod HTML który wygenerujesz ma zawierać kod CSS. Strona ma być kolorowa i mieć zróżnicowane kroje czcionek.
Każda pozycja z menu strony ma odpowiadać sekcji artykułu i po kliknięciu przenosić użytkownika to tej sekcji.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zdrowy styl życia</title>
<style>
/* Style dla całej strony */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
color: #333;
margin: 0;
padding: 0;
}
/* Style dla nagłówka */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
/* Style dla menu */
nav {
background-color: #ccc;
padding: 10px;
display: flex;
justify-content: space-between;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
nav li {
margin: 0 10px;
}
nav a {
color: #333;
text-decoration: none;
font-size: 18px;
}
/* Style dla sekcji */
section {
padding: 50px;
}
section h2 {
font-size: 32px;
margin-bottom: 20px;
}
section p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
/* Style dla stopki */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Zdrowy styl życia</h1>
</header>
<nav>
<ul>
<li><a href="#sec1">Czym jest zdrowy styl życia?</a></li>
<li><a href="#sec2">Zdrowe odżywianie</a></li>
<li><a href="#sec3">Regularna aktywność fizyczna</a></li>
<li><a href="#sec4">Zdrowy sen</a></li>
<li><a href="#sec5">Odpoczynek i relaks</a></li>
</ul>
</nav>
<section id="sec1">
<h2>Czym jest zdrowy styl życia?</h2>
<p>Zdrowy styl życia to sposób postępowania, który pozwala na zachowanie dobrego stanu zdrowia i samopoczucia. W skład zdrowego stylu życia wchodzi wiele czynników, takich jak:</p>
<ul>
<li>zdrowe odżywianie</li>
<li>regularna aktywność fizyczna</li>
<li>zdrowy sen</li>
<li>odpoczynek i relaks</li>
</ul>
<img src="zdrowy-styl-zywienia.jpg" alt="Zdrowe jedzenie">
</section>
<section id="sec2">
<h2>Zdrowe odżywianie</h2>
<p>Zdrowe odżywianie to podrozdział artykułu:</p>
<p>Zdrowe odżywianie to podstawa zdrowego stylu życia. Ważne jest, aby spożywać produkty bogate w składniki odżywcze, takie jak witaminy, minerały i białka, a jednocześnie unikać przetworzonych i wysoko przetworzonych produktów spożywczych.</p>
<p>Warto zwrócić uwagę na ilość spożywanych kalorii, ponieważ nadmierne spożywanie żywności może prowadzić do nadwagi i otyłości. Dobrym rozwiązaniem jest zwiększenie spożycia warzyw i owoców, a także zrezygnowanie z jedzenia fast foodów i słodyczy.</p>
<img src="zdrowe-odzywianie.jpg" alt="Zdrowe jedzenie">
</section>
<section id="sec3">
<h2>Regularna aktywność fizyczna</h2>
<p>Regularna aktywność fizyczna to kolejny ważny element zdrowego stylu życia. Dzięki regularnym ćwiczeniom można poprawić wydolność organizmu, wzmocnić mięśnie i kości, a także zwiększyć odporność na choroby.</p>
<p>Najlepiej wybierać aktywności, które sprawiają przyjemność i są odpowiednie dla swojego stanu zdrowia. Można zdecydować się na jogging, jazdę na rowerze, pływanie, fitness czy jogę. Ważne, aby regularnie wykonywać wybrane aktywności fizyczne i dostosować ich intensywność do swoich możliwości.</p>
<img src="aktywnosc-fizyczna.jpg" alt="Aktywność fizyczna">
</section>
<section id="sec4">
<h2>Zdrowy sen</h2>
<p>Dobry sen jest niezbędny do utrzymania dobrego stanu zdrowia i samopoczucia. Podczas snu organizm regeneruje się i odpoczywa po całym dniu. Aby zapewnić sobie dobry sen, warto dbać o regularność godzin snu i stworzyć przyjemne warunki do spania.</p>
<p>Warto unikać przed snem spożywania ciężkich posiłków, alkoholu oraz kofeiny. Przed snem warto również zrelaksować się i odprężyć, np. poprzez medytację lub czytanie książki.</p>
<img src="zdrowy-sen.jpg" alt="Zdrowy sen">
</section>
<section id="sec5">
<h2>Odpoczynek i relaks</h2>
<p>Odpoczynek i relaks są niezbędne dla zachowania równowagi psychicznej i fizycznej. Warto znaleźć czas na hobby, które sprawia przyjemność i pozwala oderwać się od codziennych obowzwojeń. Można również spróbować technik relaksacyjnych, takich jak joga, medytacja, czy aromaterapia.</p>
<p>Ważne jest również zapewnienie sobie czasu wolnego od pracy i obowiązków. Dzięki temu organizm ma szansę na regenerację i odnowę sił.</p>
<img src="relaks.jpg" alt="Relaks">
</section>
</main>
<footer>
<p>Copyright ©
<script>
document.write(new Date().getFullYear())
</script>
Zdrowy styl życia</p>
</footer>
</body>
</html>
<style>
/* Style dla całej strony */
body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f2f2f2;
line-height: 1.6;
}
/* Style dla nagłówka */
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
/* Style dla menu */
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ddd;
color: black;
}
/* Style dla sekcji artykułu */
section {
margin: 20px;
padding: 20px;
background-color: white;
}
/* Style dla nagłówków sekcji */
h2 {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
/* Style dla obrazków */
img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
/* Style dla stopki */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
/* Style dla linków */
a {
color: #4CAF50;
}
/* Style dla akapitów */
p {
margin-bottom: 20px;
font-size: 18px;
line-height: 1.6;
}
</style>
/* Style dla aktywnego elementu menu */
.active {
background-color: #ddd;
color: black;
}
</style>
<script>
// Funkcja zmieniająca aktywny element menu po kliknięciu
function setActive(element) {
// Usunięcie klasy "active" ze wszystkich elementów menu
var navItems = document.querySelectorAll("nav a");
for (var i = 0; i < navItems.length; i++) {
navItems[i].classList.remove("active");
}
// Dodanie klasy "active" do klikniętego elementu menu
element.classList.add("active");
}
// Funkcja przewijająca do wybranej sekcji artykułu
function scrollToSection(section) {
var target = document.querySelector(section);
target.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
</script>
</head>
<body>
<header>
<h1>Zdrowy styl życia</h1>
</header>
<nav>
<a href="#" class="active" onclick="setActive(this); scrollToSection('#wprowadzenie')">Wprowadzenie</a>
<a href="#" onclick="setActive(this); scrollToSection('#aktywnosc-fizyczna')">Aktywność fizyczna</a>
<a href="#" onclick="setActive(this); scrollToSection('#zdrowa-dieta')">Zdrowa dieta</a>
<a href="#" onclick="setActive(this); scrollToSection('#relaks')">Relaks</a>
</nav>
<main>
<section id="wprowadzenie">
<h2>Wprowadzenie</h2>
<img src="wprowadzenie.jpg" alt="Wprowadzenie">
<p>Zdrowy styl życia to nie tylko moda, ale przede wszystkim sposób na poprawę swojego zdrowia i samopoczucia. Regularna aktywność fizyczna, zdrowa dieta oraz techniki relaksacyjne to kluczowe elementy takiego trybu życia.</p>
</section><section id="aktywnosc-fizyczna">
<h2>Aktywność fizyczna</h2>
<img src="aktywnosc.jpg" alt="Aktywność fizyczna">
<p>Regularna aktywność fizyczna przynosi wiele korzyści dla zdrowia. Poprawia kondycję i wydolność organizmu, wpływa na poprawę nastroju i samopoczucia oraz korzystnie wpływa na układ sercowo-naczyniowy. Można wybierać spośród wielu form aktywności, od biegania i jazdy na rowerze po zajęcia fitness czy basen.</p>
</section>
<section id="zdrowa-dieta">
<h2>Zdrowa dieta</h2>
<img src="dieta.jpg" alt="Zdrowa dieta">
<p>Zdrowa dieta to kluczowy element zdrowego stylu życia. Polega na zbilansowanym spożyciu składników odżywczych, takich jak białka, węglowodany, tłuszcze, witaminy i minerały. Dzięki temu organizm otrzymuje wszystkie niezbędne składniki, które pomagają utrzymać odpowiedni poziom energii i zapewniają prawidłowe funkcjonowanie ciała. Zdrowa dieta powinna składać się z różnorodnych produktów, takich jak warzywa, owoce, pełnoziarniste produkty zbożowe, chude mięso, ryby, orzechy i nasiona.</p>
</section>
<section id="relaks">
<h2>Relaks</h2>
<img src="relaks.jpg" alt="Relaks">
<p>Techniki relaksacyjne pomagają zwalczyć stres i poprawić samopoczucie. Można wybierać spośród wielu metod, takich jak medytacja, joga, czy masaże. Ważne jest regularne stosowanie tych technik, aby efekty były długotrwałe.</p>
</section>
</main>
<footer>
<p>© 2023 Zdrowy styl życia. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>
Tak to wygląda:
—
[ Kod został wygenerowany dwukrotnie, ale strona wygląda całkiem nieźle (chociaż jest prosta). Jest też kod JS (całkowicie niepotrzebny). Ilustracje odnoszą się do nieistniejących plików.
Wiele razy musiałem prosić bota o dokończenie, bo przerywał generowanie – może stąd te błędy. Poprawiłem ten kod usuwając duplikujące się elementy. ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zdrowy styl życia</title>
<style>
/* Style dla całej strony */
body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f2f2f2;
line-height: 1.6;
}
/* Style dla nagłówka */
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
/* Style dla menu */
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ddd;
color: black;
}
/* Style dla sekcji artykułu */
section {
margin: 20px;
padding: 20px;
background-color: white;
}
/* Style dla nagłówków sekcji */
h2 {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
/* Style dla obrazków */
img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
/* Style dla stopki */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
/* Style dla linków */
a {
color: #4CAF50;
}
/* Style dla akapitów */
p {
margin-bottom: 20px;
font-size: 18px;
line-height: 1.6;
}
/* Style dla aktywnego elementu menu */
.active {
background-color: #ddd;
color: black;
}
</style>
<script>
// Funkcja zmieniająca aktywny element menu po kliknięciu
function setActive(element) {
// Usunięcie klasy "active" ze wszystkich elementów menu
var navItems = document.querySelectorAll("nav a");
for (var i = 0; i < navItems.length; i++) {
navItems[i].classList.remove("active");
}
// Dodanie klasy "active" do klikniętego elementu menu
element.classList.add("active");
}
// Funkcja przewijająca do wybranej sekcji artykułu
function scrollToSection(section) {
var target = document.querySelector(section);
target.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
</script>
</head>
<body>
<header>
<h1>Zdrowy styl życia</h1>
</header>
<nav>
<a href="#" class="active" onclick="setActive(this); scrollToSection('#wprowadzenie')">Wprowadzenie</a>
<a href="#" onclick="setActive(this); scrollToSection('#aktywnosc-fizyczna')">Aktywność fizyczna</a>
<a href="#" onclick="setActive(this); scrollToSection('#zdrowa-dieta')">Zdrowa dieta</a>
<a href="#" onclick="setActive(this); scrollToSection('#relaks')">Relaks</a>
</nav>
<main>
<section id="wprowadzenie">
<h2>Wprowadzenie</h2>
<img src="wprowadzenie.jpg" alt="Wprowadzenie">
<p>Zdrowy styl życia to nie tylko moda, ale przede wszystkim sposób na poprawę swojego zdrowia i samopoczucia. Regularna aktywność fizyczna, zdrowa dieta oraz techniki relaksacyjne to kluczowe elementy takiego trybu życia.</p>
</section><section id="aktywnosc-fizyczna">
<h2>Aktywność fizyczna</h2>
<img src="aktywnosc.jpg" alt="Aktywność fizyczna">
<p>Regularna aktywność fizyczna przynosi wiele korzyści dla zdrowia. Poprawia kondycję i wydolność organizmu, wpływa na poprawę nastroju i samopoczucia oraz korzystnie wpływa na układ sercowo-naczyniowy. Można wybierać spośród wielu form aktywności, od biegania i jazdy na rowerze po zajęcia fitness czy basen.</p>
</section>
<section id="zdrowa-dieta">
<h2>Zdrowa dieta</h2>
<img src="dieta.jpg" alt="Zdrowa dieta">
<p>Zdrowa dieta to kluczowy element zdrowego stylu życia. Polega na zbilansowanym spożyciu składników odżywczych, takich jak białka, węglowodany, tłuszcze, witaminy i minerały. Dzięki temu organizm otrzymuje wszystkie niezbędne składniki, które pomagają utrzymać odpowiedni poziom energii i zapewniają prawidłowe funkcjonowanie ciała. Zdrowa dieta powinna składać się z różnorodnych produktów, takich jak warzywa, owoce, pełnoziarniste produkty zbożowe, chude mięso, ryby, orzechy i nasiona.</p>
</section>
<section id="relaks">
<h2>Relaks</h2>
<img src="relaks.jpg" alt="Relaks">
<p>Techniki relaksacyjne pomagają zwalczyć stres i poprawić samopoczucie. Można wybierać spośród wielu metod, takich jak medytacja, joga, czy masaże. Ważne jest regularne stosowanie tych technik, aby efekty były długotrwałe.</p>
</section>
</main>
<footer>
<p>© 2023 Zdrowy styl życia. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>Tak to wygląda:
—
[ Poddaję się. Koniec zabawy na dziś. ]
Wnioski z eksperymentu:
ChatGPT w wersji 3.5 nie zabierze mi pracy. Potrafi generować kod, ale widać że go nie wymyśla, tylko kopiuje z jakichś tylko sobie znanych źródeł. Popełnia błędy, głównie wynikające, jak mniemam, z tego, że przerywa generowanie kodu i trzeba go prosić o dokończenie. Gubi się w bardziej zaawansowanym kodzie. Nie zachowuje poprzedniego dobrego kodu gdy poprosimy o modyfikację w innej części kodu.
ChatGPT 3.5 nie nadaje się do tego. Może następny – ChatGPT4? Niebawem sprawdzę.
Podobno 4 radzi sobie znacznie lepiej z tego typu zadaniami. Jeszcze nie sprawdzałem, czekam na Twoje testy. Trochę z innej beczki: ktoś pisał, że generuje w chatGPT4 (AI) prompty do Midjourney’a (AI) i robi upscale grafik (za pomocą AI) :). Konkluzja tego i kilku innych eksperymentów na innych polach była taka, że AI na ten moment nie zabierze pracy grafikom, programistom, redaktorom, ale może zabrać pracę tym, którzy nie będą umieli/chcieli jej twórczo do przyspieszenia pracy wykorzystywać. Ogólnie AI na razie sprawdza się jako inspiracja, materiał wyjściowy, rozwiązywanie problemów cząstkowych, coś w rodzaju bardziej rozbudowanej Wikipedii itp. Jak to będzie wyglądać za jakiś czas, trudno powiedzieć, ale dość szybko się to zmienia.