rrogacz.pl
ikony programów
STRONY INTERNETOWE

Polecana strona ćwiczeniowa:
https://www.w3schools.com/html/default.asp

zadanie 1 - podstawy

formatowanie tekstu

zaprojektuj dokumenty według podanych wzorów:

zadanie 2 - listy

listy

zaprojektuj dokumenty według podanych wzorów:
  • lista uporządkowana (numerowana) dokument zapisz pod nazwą: zadanie2_1.html
  • list numerowana numeracją rzymską (przerwanie i wznowienie numeracji)
    dokument zapisz pod nazwą: zadanie2_2.html
  • prosta lista wielopoziomowa
    dokument zapisz pod nazwą: zadanie2_3.html
  • lista wielopoziomowa złożona
    dokument zapisz pod nazwą: zadanie2_4.html
  • listy definicji
    dokument zapisz pod nazwą: zadanie2_5.html

zadanie 3 - tabele

tabele

zaprojektuj dokumenty według podanych wzorów:

zadanie 4 - grafika

grafika

pobierz grafiki do ćwiczenia

zaprojektuj dokumenty według podanych wzorów:
  • grafika w HTML
    wzór dokumentu
    zapisz pod nazwą: zadanie4_1.html
  • grupowanie
    wzór dokumentu
    zapisz pod nazwą: zadanie4_2.html
  • pozycjonowanie grafiki
    wzór dokumentu
    zapisz pod nazwą: zadanie4_3.html
  • galeria zdjęć
    Utwórz własną galerię zdjęc według wzoru: Jezioro Bełdany Miniatury utwórz w dowolnym programie graficznym.
    Bardzo dobrym programem jest IrfanView 64 Thumbnails
    Miniatury umieść w tabeli.
    Po kliknięciu zdjęcie otwiera się w nowym oknie.

zadanie 5 - odnośniki

odnośniki

  • podstawowe odnośniki
    Utwórz dokument według wzoru:
    wzór dokumentu
    Jako linków użyj informacji z wikipedii
    zapisz pod nazwą: zadanie5_1.html
  • "zakładki" w HTML - menu lokalne
    Do dokumentu zadanie4_3.html dodaj "menu".
    Po kliknięciu na elemencie przenosimy się do właściwej treści srony.
    Po prawej, dolnej stronie znajduje się przycisk powrotu do góry strony
    (stała pozycja przycisku) wzór dokumentu
    zapisz pod nazwą: zadanie5_2.html
  • mapa odsyłaczy


    wzór dokumentu
    pojekt zapisz pod nazwą: zadanie5_3.html

zadanie 6 - formularze

formularze

  1. formularz podstawowy
    • Utwórz dokument zawierający pole umożliwiające wysłanie imienia na serwer według wzoru:
    • Zapisz dokument pod nazwą: zadanie6_1.html
    • Utwórz dokument według wzoru:
    • Zapisz w tym samym katalogu pod nazwą: zadanie6_1.php
    • Działanie formularza: kliknij tu
  2. logowanie
    • Utwórz dokument wprowadzania nazwy i hasła:
    • Zapisz dokument pod nazwą: zadanie6_2.html
    • Utwórz dokument według wzoru:
    • Zapisz w tym samym katalogu pod nazwą: zadanie6_2.php
    • Działanie formularza: kliknij tu
  3. lista wyboru jednokrotnego [radio]
    • Do ćwiczenia 1 dodaj pola wyboru wykształcenia
    • Zapisz dokument pod nazwą: zadanie6_3.html
    • Dokument wynikowy zapisz pod nazwą: zadanie6_3.php
  4. lista wyboru wielokrotnego [checkbox]
    • Utwórz dokument wyboru zainteresowań
    • Zapisz dokument pod nazwą: zadanie6_4.html
    • Dokument wynikowy zapisz pod nazwą: zadanie6_4.php
    lista głosowania
    • Utwórz listę do głosowania
    • Pobierz dokument: zadanie6_5.html
    • Dodaj nazwy pól wyboru oraz przycisk wysyłania
    • Utwórz skrypt obsługi formularza wyświetlający numer listy oraz wybranych kandydatów. Zapisz pod nazwą: zadanie6_5.php
  5. pole tekstowe [textarea]
    • Utwórz dokument wysyłania poczty według wzoru:
    • Dodaj atrybuty pól sprawdzające poprawność wprowadzonych danych
    • Zapisz dokument pod nazwą: zadanie6_6.html
    • Skrypt obsługi zapisz pod nazwą: zadanie6_6.php
  6. formularz rejestracyjny
    • Utwórz dokument według wzoru: wzór dokumentu
    • Zapisz dokument pod nazwą: zadanie6_7.html
    • Skrypt obsługi zapisz pod nazwą: zadanie6_7.php
  7. wysyłanie plików
    • Utwórz dokument umożliwiający wysłanie pliku na serwer
    • Zapisz dokument pod nazwą: zadanie6_8.html
    • Skrypt obsługi zapisz pod nazwą: zadanie6_8.php
      UWAGA: Skrypt jest zadaniem dotatkowym.
      Szczegółowe informacje znajdują się pod adresem:
      https://www.w3schools.com/php/php_file_upload.asp
  8. pola html5

legendy motoryzacji

Zaprojektuj stronę według poniższego wzoru: Środkowa kolumna powinna zawierać logo dwóch, zananych firm motoryzacyjnych.
Grafikę należy przygotować samodzielnie w programie GIMP lub InkScape.
Projekt i wykonanie: Ryszard Rogacz© 1999−2026