Technologia Internetowe - Ćwiczenia 4

Temat: Witryny Internetowe - języki HTML i CSS.

Tematy na dziś

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

Materiały

Zadania do realizacji na zajęciach

Zadanie 1 - Przykładowa strona WWW

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>

W dowolnej przeglądarce WWW otwórz wcześniej utworzony plik. Co oznaczają poszczególne znaczniki?
Zmień znaczniki na dowolne inne i sprawdź jaki jest efekt ich działania (odświeżając stronę w przeglądarce).
Zakomentuj kod strony w taki sposób, aby wyświetlany był tylko napis “Hello!” oraz tytuł strony.
Jak podejrzeć kod strony w przeglądarce?

Zadanie 2 - Prosta strona domowa

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.
Sprawdźmy czy skonstruowana strona otwiera się i wygląda tak samo we wszystkich, dostępnych w systemie, przeglądarkach internetowych.
Czy strona domowa powinna zawierać tag(i) div?

Zadanie 3 - Złożona strona domowa

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?
Czy style są tak samo obsługiwane w każdej z dostępnych przeglądarek?
Jakie jest powiązanie styli CSS z tagami div?

Zadania zaliczeniowe

Strona www

Zadanie podstawowe jest również zadaniem dodatkowym.

Należy wykonać wierną kopię wyglądu następującej strony WWW: http://www.mwpz.poznan.pl/tutorial.php

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 rmiw@amu.edu.pl (UWAGA! inny adres niż zawsze) 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 będą przedstawione poniżej na tej stronie, po upłynięciu terminu na wykonanie tego zadania.

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.

Wyniki rozwiązania zadania

Nnumer Indeksu

Liczba punktów