Tematyka zajęć 5

Witryny Internetowe - języki HTML i CSS

  1. Strony WWW - co to jest? Historia.
  2. Język HTML - historia i nawiązanie do SGML.
  3. Język CSS - po co nam to?
  4. Walidacja poprawności elementów stron WWW - czy to jest potrzebne?
  5. Serwer HTTP - charakterystyka i ogólny opis działania.

Przebieg zajęć

  1. Wprowadzenie do tematyki zajęć, udostępnienie materiałów dydaktycznych.
  2. Krótkie omówienie historii powstania protokołu HTTP, języka HTML (i jego wersji) oraz języka CSS.
  3. Zapoznanie się z przykładową stroną WWW.
  4. Zaimplementowanie własnej strony w języku HTML.
  5. Wzbogacenie strony o elementy CSS.
  6. Walidacja zaimplementowanych dokumentów HTML oraz CSS.

Materiały do zajęć

Zadania do realizacji na zajęciach

Zadanie 1 - Przykładowa strona WWW

  1. Stwórz plik z rozszerzeniem .html o następującej treści:

    <!DOCTYPE html>
    <html>
      <head>
        <title>My example web page!</title>
      </head>
    
      <body>
        Hello!
        <div id="content">   
        <h1>Heading One</h1>
        <p>First paragraph.</p>
        <p>Second paragraph.</p>
        <ol>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ol>
        </div>
        <br/><br/><br/>
        <h3 style="text-align:center">To już koniec strony...</h3>
      </body>
    </html>
  2. W dowolnej przeglądarce WWW otwórz wcześniej utworzony plik. Co oznaczają poszczególne znaczniki?

  3. Zmień znaczniki na dowolne inne i sprawdź jaki jest efekt ich działania (odświeżając stronę w przeglądarce).

  4. Zakomentuj kod strony w taki sposób, aby wyświetlany był tylko napis “Hello!” oraz tytuł strony.

  5. Jak podejrzeć kod strony w przeglądarce?

Zadanie 2 - Prosta strona domowa (1pkt)

  1. W ramach zadania stworzymy naszą własną stronę domową, która będzie zawierać następujące informacje:
    • tytuł strony zawierający imię, nazwisko i numer indeksu Autora strony.
    • nienumerowaną listę przedmiotów na semestrze, na które uczęszcza Autor strony.
    • tabelę z miejscowościami, które Autor strony odwiedził w swoim życiu lub chce odwiedzić. Tabela musi zawierać co najmniej 5 elementów. Poszczególne kolumny oznaczają:

      Lp. | Miasto | Województwo (Rejon) | Kraj

      • Tabela powinna zawierać odpowiednie nagłówki (nazwy kolumn) wyszczególnione pogrubioną czcionką.
      • Każde miasto powinno być jednocześnie linkiem do strony Wikipedii (lub innej), która je opisuje.
    • dowolne zdjęcie krajobrazu, które po kliknięciu otwiera nową stronę tematycznie związaną ze zdjęciem. Strona musię się otworzyć w nowym oknie (zakładce).
    • na dole strony musi się znajdować element, który po kliknięciu będzie próbował wysłać maila (np. poprzez domyślny program pocztowy) do Autora strony.

  2. Sprawdźmy czy skonstruowana strona otwiera się i wygląda tak samo we wszystkich, dostępnych w systemie, przeglądarkach internetowych.

  3. Czy strona domowa powinna zawierać tag(i) div?

Zadanie 3 - Złożona strona domowa (1pkt)

  1. Autorską stronę domową rozszerzymy o następujące elementy wykorzystując język styli CSS:
    • spraw, aby czcionka będąca w pierwszym wierszu tabeli (czyli nagłówka) była pogrubiona.
    • kolor tła nagłówka niech będzie jednym z Twoich ulubionych (i nie biały) - pamiętaj, że należy zmienić również kolor czcionki
    • niech każdy co drugi wiersz będzie w innym kolorze - dzięki temu tabelka będzie bardziej wyrazista
    • niech kolor tła wierszy zmienia się po najechaniu na wiersz myszką
    • niech teksty w znacznikach h1 oraz p będą w innych czcionkach i kolorach
    • opracuj dwie wersje strony: z dołączanym plikiem css oraz ze stylami obecnymi w treści strony - jakie zauważasz różnice?
  2. Czy style są tak samo obsługiwane w każdej z dostępnych przeglądarek?

  3. Jakie jest powiązanie styli CSS z tagami div?

Zadania zaliczeniowe

Podstawowe i dodatkowe

Zadanie podstawowe jest również zadaniem dodatkowym.

Należy wykonać wierną kopię wyglądu następującej strony WWW: http://min.wmi.amu.edu.pl/en/

Zadanie polega na odtworzeniu wyglądu wspomnianej strony a nie jej funkcjonalności. Kopia wyglądu strony (czyli inna strona WWW) ma być zapisana jako jeden plik: page.htm.

Na adres należy wysłać wiadomość o tytule: “[DTIN] Z5.1 ######”, gdzie ###### to sześciocyfrowy numer indeksu. Do wiadomości musi być dołączony wcześniej skonstruowany plik page.htm. Aktualne wyniki (z 30 minutowym opóźnieniem) są przedstawione pod adresem http://kino.vm.wmi.amu.edu.pl/html.txt.

Jako ocena stopnia podobieństwa zostanie wykorzystany następujący mechanizm:

$ chromium-browser --headless --disable-gpu --screenshot --window-size=1280,700 http://min.wmi.amu.edu.pl/en/

W zależności od użytego systemu operacyjnego konieczne może być użycie google-chrome zamiast chromium-browser.

Oznacza to, że nadesłana strona zostanie otworzona w przeglądarce Chrome w rozdzielczości 1280x700, a następnie porównana z oryginałem w tej samej rozdzielczości (porównane zostaną obrazki). W miarę możliwości na nadesłanej stronie zostanie zablokowane wykonanie kodu JavaScript.

Po analizie wszystkich rozwiązań zostanie opracowana punktacja, gdzie najwyższą liczbą punktów (10) uzyskają najbardziej wierne kopie, natomiast najniższą liczbę punktów (1) uzyskają kopie, których podobieństwo do oryginału jest znikome.