Zdobądź praktyczne umiejętności w HTML dzięki ćwiczeniom dla początkujących. Krok po kroku naucz się tworzyć własne strony internetowe, pisząc i modyfikując kod HTML.

HTML dla zielonych

Teoria bez praktyki jest niczym. Dlatego zachęcam do stałego eksperymentowania z kodem HTML w trakcie czytania kursu. Dzięki temu poznane informacje na pewno zostaną lepiej utrwalone w Twojej pamięci. Ponadto często dopiero na etapie ćwiczeń praktycznych okazuje się, że tak naprawdę nie do końca właściwie zrozumieliśmy teorię. Jednak przede wszystkim to praktyka sprawia, że stajemy się coraz lepsi w danej dziedzinie. To z kolei pobudza i rozwija naszą pasję, dzięki której możemy stać się prawdziwymi mistrzami - praktyka czyni mistrza. Dlatego nie zaniedbuj tego etapu nauki. Zainstaluj edytor HTML i zacznij systematycznie ćwiczyć.

W ramach rozwoju umiejętności praktycznych zalecam wykonanie serii ćwiczeń. Będą one polegać na stworzeniu prostej strony internetowej bazującej na poznanych informacjach. W kolejnych rozdziałach będziemy ją stopniowo rozbudowywać, dlatego nie zapomnij zapisać jej sobie gdzieś na komputerze. Na tym etapie opublikowanie strony w internecie nie będzie jeszcze konieczne.

1. Znajdź temat, który szczególnie Cię interesuje. Może to być np. Twoja ulubiona książka, gra komputerowa, zespół muzyczny, dyscyplina sportu itp.

   Jeżeli do Twojej strony zamierzasz zaczerpnąć informacje z internetu, pamiętaj o poszanowaniu praw autorskich! Nie zawsze można sobie swobodnie skopiować na swoją stronę dowolny tekst, jeżeli autor nie wyraził na to zgody. Każdy cytat powinien być wyraźnie oznaczony z podaniem jego źródła.

   Możesz również stworzyć stronę o sobie, w której opiszesz krótko swoją biografię, zainteresowania, hobby itp.
2. Otwórz edytor HTML. Jeśli korzystasz z edytora graficznego, przełącz się do trybu bezpośredniej edycji kodu źródłowego HTML.
3. W edytorze utwórz nowy plik HTML i wklej w nim szkielet strony uzupełniając konieczne fragmenty.
4. Zacznij wpisywanie właściwej treści strony. Wyniki swojej pracy możesz na bieżąco oglądać w przeglądarce internetowej. W tym celu zapisz plik pod nazwą index.html, a następnie odszukaj go na dysku za pomocą dowolnego programu do przeglądania plików (w systemie Windows możesz użyć np. Eksploratora plików) i dwukrotnie kliknij ikonę stworzonego właśnie dokumentu. Dzięki temu Twoja strona otworzy się w przeglądarce. Za każdym razem kiedy coś na niej zmienisz, po prostu ponownie zapisz plik w edytorze, a następnie przełącz się do przeglądarki i odśwież stronę (klawisz F5), aby zobaczyć efekty.
5. Wróć do edytora HTML. Podziel tekst na akapity, tak aby był wygodniejszy w czytaniu.
6. Wybierz fragmenty tekstu, na które Twoim zdaniem czytelnik powinien zwrócić szczególną uwagę i umieść je w znacznikach pogrubienia.
7. Dodaj do strony ilustracje.

   W przypadku zdjęć i grafik należy szczególnie pamiętać o poszanowaniu praw autorskich! Nie każdy obrazek można sobie swobodnie skopiować na swoją stronę, jeżeli autor nie wyraził na to zgody.

   Jeśli tworzysz stronę o sobie, może to być po prostu Twoje zdjęcie.
8. Stwórz podstronę o nazwie linki.html (nowy plik HTML w edytorze) i umieść do niej odsyłacz na stronie głównej (czyli w pliku index.html). O tym co to są i jak się tworzy podstrony przeczytasz w podrozdziale: Ramy dokumentu.
9. Na podstronie linki.html wstaw odsyłacze do ciekawych stron w internecie, na których czytelnik będzie mógł znaleźć więcej informacji na opisywany przez Ciebie temat. Jeżeli tworzysz stronę o sobie, możesz tutaj umieścić odnośniki do Twojego profilu w serwisach społecznościowych: Facebook, Twitter, YouTube, LinkedIn itp.
10. Stwórz podstronę o nazwie kontakt.html (nowy plik HTML w edytorze) i umieść do niej odsyłacz na stronie głównej (czyli w pliku index.html). Wstaw na niej odsyłacz pocztowy z Twoim adresem e-mail.

Nagłówek i treść

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Dodaj informację o języku, w którym została wprowadzona treść na Twojej stronie.
3. Podaj autora strony.
4. Zdefiniuj ikonę strony. Jeżeli nie posiadasz wystarczających umiejętności graficznych, przykładową ikonę możesz wyszukać w internecie.

   Pamiętaj o poszanowaniu praw autorskich! Nie każdy obrazek można swobodnie skopiować sobie na swoją stronę, jeżeli autor nie wyraził na to zgody.

   Jednym z serwisów, który udostępnia m.in. darmowe ikony, jest Iconfinder - przy wyszukiwaniu użyj filtra "free". Zwróć również uwagę na pole "License type" - w niektórych przypadkach może być konieczne wstawienie na stronie linku do strony autora wybranej ikony. Może też być zabronione użycie grafiki do celów komercyjnych.
5. Otwórz Twoją stronę w przeglądarce internetowej i sprawdź, czy na karcie, w której się ona wyświetla, widoczna jest zdefiniowana przez Ciebie ikona.

Tekst

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Podziel tekst ze strony na sekcje tematyczne, z których każda będzie się rozpoczynać odpowiednim tytułem. Zwróć uwagę, że znacznik tytułu nie umieszcza się wewnątrz akapitu, ale przed nim.
3. Odszukaj fragmenty tekstu, które zasługują na szczególne podkreślenie ich znaczenia. Oznacz je w miarę potrzeb znacznikami EM lub STRONG. Sprawdź, czy podczas wcześniejszych ćwiczeń w prawidłowy sposób został przez Ciebie użyty znacznik pogrubienia.
4. Dodaj do swojej strony przynajmniej jeden cytat lub blok cytowany. Jeżeli Tworzysz stronę o sobie, może to być np. motto, którym kierujesz się w życiu albo wypowiedź jakiejś ważnej dla Ciebie osoby.
5. Jeżeli w treści swojej strony używasz skrótów bądź definicji, zadbaj o ich oznaczenie właściwymi znacznikami.
6. Na podstronie linki.html użyj wykazu (wypunktowanie) w taki sposób, aby każdy odnośnik wraz z jego krótkim opisem znajdował się w osobnym punkcie.
7. Na podstronie kontakt.html użyj znacznika ADDRESS, aby odpowiednio oznaczyć informacje kontaktowe z autorem strony - czyli z Tobą 🙂

Odsyłacze

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Utwórz spis treści dodając etykiety do tytułów poszczególnych sekcji tematycznych na stronie głównej, a następnie umieszczając na początku wykaz z listą odsyłaczy do tych etykiet.
3. Przygotuj po dwie wersje ilustracji z Twojej strony. Pierwsza powinna mieć rozmiary dokładnie takie jak widoczne bezpośrednio na stronie. Natomiast druga wersja może być zdjęciem w wysokiej rozdzielczości. W tym celu otwórz duże zdjęcie w dowolnym programie graficznym - może to być nawet aplikacja Paint, która jest dostępna w systemie Windows - i pomniejsz go (w prorgamie Paint należy użyć opcji "Zmień rozmiar"). Następnie zapisz małe zdjęcie na dysku pod inną nazwą, ale z tym samym rozszerzeniem nazwy pliku (na przykład: moje-zdjecie-mini.jpg).

   Aby zapewnić dobrą jakość zdjęcia, zawsze pomniejszaj pełnowymiarową ilustrację, a nigdy nie powiększaj miniaturki.

   Podmień ilustracje na stronie na ich wersje pomniejszone. Następnie przekształć je w odsyłacze obrazkowe i podlinkuj do pełnowymiarowych wersji zdjęć. Użyj przy tym atrybutu target="_blank", który otworzy zdjęcie w nowym oknie (nowej karcie przeglądarki). Nie musisz w tym celu tworzyć żadnych nowych podstron. Wystarczy że jako odnośnika użyjesz po prostu lokalizacji pliku z dużym zdjęciem.

   Otwórz stronę w przeglądarce internetowej i spróbuj kliknąć w dowolną tak przygotowaną ilustrację. Jeśli wszystko zostało wykonane prawidłowo, w nowej karcie przeglądarki powinno się otworzyć zdjęcie w wysokiej rozdzielczości.

4. Otwórz podstronę kontakt.html i zmodyfikuj odsyłacz pocztowy, tak aby po jego kliknięciu w programie pocztowym wyświetlił się określony tytuł wiadomości.

Tabele

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Umieść na stronie tabelę. Jeżeli tworzysz stronę o sobie, może to być np. lista Twoich ulubionych filmów. W tabeli możesz umieścić następujące kolumny:
   • Gatunek
   • Tytuł filmu
   • Rok produkcji
   • Ocena (w skali od 1 do 10)
3. Odpowiednio oznacz komórki nagłówkowe tabeli za pomocą znaczników TH.
4. Oddziel nagłówek tabeli od jej właściwej zawartości za pomocą znaczników THEAD i TBODY.
5. Postaraj się, aby przynajmniej jeden gatunek zawierał kilka różnych filmów. Umieść je w wierszach bezpośrednio jeden pod drugim. Następnie połącz pionowo wszystkie komórki zawierające ten sam gatunek.

Przykładowy efekt może wyglądać następująco:

Multimedia

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Utwórz dokument z licencją zawierającą informacje o prawach autorskich Twojej strony: kto jest jej autorem, jakie są zasady korzystania z niej (czy można kopiować treść i używać ją do celów komercyjnych) itp. W tym celu możesz skorzystać z programów takich jak:
   • WordPad - dostępny w systemie Windows
   • Open Office - darmowy pakiet biurowy
   • Microsoft Office - pakiet aplikacji biurowych dostępny za darmo dla uczniów i studentów
3. Użyj techniki zagnieżdżania plików multimedialnych, aby umieścić dokument licencji bezpośrednio w stronie.

Widżety

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Znajdź w serwisie YouTube przynajmniej jeden ciekawy film powiązany tematycznie z Twoją stroną.
3. Użyj funkcji "Udostępnij / Umieść", aby skopiować kod HTML widżetu z wybranym filmem.
4. Wstaw film bezpośrednio w treści swojej strony.
5. Otwórz Twoją stronę w przeglądarce i sprawdź, czy można uruchomić odtwarzanie filmu.

Formularze

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Na podstronie kontakt.html dodaj formularz kontaktowy kierujący na Twój adres e-mail.
3. W formularzu umieść następujące pola:
   • Temat - pole tekstowe o nazwie name="subject"
   • Wiadomość - obszar tekstowy o nazwie name="body"
   • Wyślij - przycisk wysłania formularza
   • Anuluj - przycisk wyczyszczenia danych
4. Jeżeli masz skonfigurowane na swoim komputerze konto w programie pocztowym, otwórz w przeglądarce internetowej Twoją stronę z utworzonym formularzem, wypełnij go przykładowymi danymi i spróbuj wysłać.