Podstawy HTML i CSS

Odnośniki

Ćwiczenia

Zadanie 1. Pliki

  1. Pobierz archiwum.
  2. Umieszczone tam pliki wypakuj do katalogu Z:\public_html.
  3. W przeglądarce otwórz adres http://students.mimuw.edu.pl/~knoXXX, zamiast knoXXX wpisz swój identyfikator.
  4. Powinna wyświetlić się pusta strona z tytułem Prosta strona. Gdyby tak się nie stało, najprawdopodobniej jest problem z uprawnieniami, poproś prowadzącego o pomoc.
  5. Otwórz plik index.html w programie Notatnik. Pomiędzy znacznikami <body> a </body> wpisz jakiś tekst, zapisz plik, a w przeglądarce odśwież widok - napis powinien się pojawić.

Zadanie 2. Wizytówka

Otwórz plik index.html w programie Notepad++. W menu format zaznacz koduj w UTF-8 (zauważ, że taka informacja znajduje się w seksji head strony).

Używając znaczników HTML takich jak h1, h2, p, br, strong,... utwórz własną wizytówkę.

(Na razie) nie chodzi o wygląd, tylko o znaczniki!

Zadanie 3. Mickiewicz - struktura dokumentu

Otwórz plik mickiewicz.html w programie Notepad++, a plik mickiewicz-win.txt w Notatniku. Skopiuj tekst do pliku html między znacznikami <body> a </body>. Zapisz plik, zobacz stronę w przeglądarce.

Używając znaczników HTML poprawnie oznacz zawartość pliku. Nie chodzi o wygląd! Tylko o oznaczenie nagłówków, akapitów, cytatów i list.

Ustalmy, że h1 oznacza tytuł całego dokumentu, natomiast tytuły rozdziałów to h2, podrozdziałów h3 itd.

Pierwszą część listy utworów wykonaj jako listę definicji (dl), natomiast drugą część jako zwykłą listę nienumerowaną (ul). To niezbyt eleganckie, ale przećwiczymy dzięki temu oba rodzaj list.

Zadanie 4. Styl

Utwórz nowy plik CSS i powiedz w pliku HTML, że ma korzystać z tego stylu. Tak samo w wizytówce (ten sam styl).

Z pomocą prowadzącego sformatuj poszczególne elementy dokumentu.

Pierwszy akapit dokumentu (Adam Bernard Mickiewicz ur. 24 grudnia 1798 w Zaosiu koło Nowogródka...) oznacz jako klasę streszczenie (lub jakkolwiek), a w stylu nadaj tej klasie jakiś szczególny wygląd.

Zadanie 5. Odnośniki i obrazki

  1. Umieść w wizytówce odnośnik do Mickiewicza.
  2. Umieść w Mickiewiczu odnośnik do pełnej wersji artykułu na Wikipedii.
  3. Umieść w Mickiewiczu obrazek bezpośrednio z serwera Wikipedii.
  4. Umieść w wizytówce zdjęcie male.jpg tak, aby było jednocześnie odnośnikiem do duze.jpg.

Więcej chyba nie zdążymy...


Valid XHTML 1.1Valid CSS