Technologia Internetowe - Ćwiczenia 2

Temat: Tworzenie stron: HTML, CSS, Java Script, API

1. Podstawy HTML i CSS

Cele:

Poznanie struktury dokumentu HTML.
Stylowanie elementów za pomocą CSS.
Utworzenie prostej strony projektu badawczego.

Plan:

Wprowadzenie :

Krótkie omówienie HTML (tagi, atrybuty) i CSS (selekcja elementów, podstawowe style).
Przykład:


<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projekt badawczy</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Projekt badawczy: Żółwie morskie</h1>
    <p>Badamy migracje żółwi w rejonach tropikalnych.</p>
</body>
</html>

Ćwiczenia praktyczne :

Utworzenie strony o tematyce biologicznej (np. "Projekt badawczy dotyczący ochrony żółwi morskich").
Wykorzystanie ChatGPT do generowania szkieletu strony:
„Wygeneruj prosty kod HTML dla strony projektu badawczego.”

CSS :

Dodanie prostego stylu CSS do strony.
Wykorzystanie ChatGPT do generowania szkieletu strony:
„Zmień podany kod HTML aby korzystał z pliku CSS i stwórz też ten plik CSS.”
Pokazanie przykładów responsywności (media queries).

Materiały dla studentów:

2. Podstawy JavaScript

Cele:

Zrozumienie roli JavaScript w stronach internetowych.
Tworzenie prostych interaktywnych funkcji.

Plan:

Wprowadzenie

Co to jest JavaScript? Jak działa w przeglądarce?
Przykłady: walidacja formularzy, interaktywne przyciski.
np. dla Chata GPT "Dodaj tutaj label i przycisk, którzy przy pomocy java Script wyświetli wpisaną treść na górze strony."

Ćwiczenia praktyczne :

Tworzenie formularza do wprowadzania danych biologicznych (np. "Dane o gatunku").
Dodanie funkcji walidacji (np. sprawdzenie poprawności wprowadzonych danych).
Wykorzystanie ChatGPT do debugowania kodu i generowania funkcji:
„Napisz skrypt JavaScript sprawdzający poprawność pola e-mail w formularzu.”

Podsumowanie :

Omówienie, jak JS integruje się z HTML i CSS.
Przykłady prostych bibliotek (np. Chart.js do tworzenia wykresów).

Materiały dla studentów:

JavaScript na MDN.