2 - HTML (25.02.2008)

Polecenie startowe: wstawić do pliku umieszczonego na poprzednich zajęciach
<a href="www.osemka.pl"></a>

Wprowadzenie

HTML = Hyper Text Markup Language
- plik tekstowy zawierający znaczniki/tagi
- znaczniki - elementy informujące przeglądarkę internetową w jaki sposób ma wyświetlać stronę
- rozszerzenie - htm lub html
- tworzenie plików - dowolny edytor tekstu
- oglądanie plików - przeglądarka internetowa
(uwaga: istnieją różnice między interpretacją HTML'a przez różne przeglądarki - najbardziej zgodny ze standardem jest Firefox)

Znaczniki HTML
- służą do określania elementów HTML
- składnia: <nazwa_znacznika> poprawne są małe litery
- występują w parach: <nazwa_znacznika> - znacznik otwierający </nazwa_znacznika> - znacznik zamykający (należy pamiętać o zamykaniu znaczników!)
- tekst między znacznikiem otwierającym, a zamykającym to zawartość elementu HTML

przykład prostej strony złożonej z 3 obowiązkowych elementów:

   <html>
       <head></head>
       <body>Treść!!</body>
</html>

<html> - mówi przeglądarce z czym ma do czynienia
<head> - nagłówek - zawiera informacje, ktore nie są wyświetlane przez przglądarkę
<body> - właściwa treść strony

Prolog

- umieszcza się go przed znacznikiem <html>
- umożliwia sprawdzanie poprawności tworzonych stron w walidatorze
- zalecana postać:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

- walidacja on-line: http://validator.w3.org/

Nagłowek

- tytuł strony - wyświetlany w pasku tytułowym przeglądarki:

<title>Tytuł strony</title>

- znaczniki <meta … > - bardziej szczegółowe informacje o zawartości dokumentu
http-equiv - zmienna systemowa
name - zmienna użytkownika
content - wartość zmiennej
- kodowanie polskich znaków:
<meta http-equiv="content-type" content="text/html; charset=utf-8">

- charakterystyka zawartości strony:
<meta name="keywords" content="słowa kluczowe">
<meta name="description" content="opis strony">

- język strony:
<meta http-equiv="content-language" content="pl">

- autor strony:
<meta name="author" content="imię i nazwisko">

- data utworzenia strony:
<meta http-equiv="creation-date" content="Tue, 04 Dec 1993 21:29:02 GMT">

Podstawowe znaczniki

- nagłówki*:

<h1>nagłówek</h1>
   ...
<h6>nagłówek</h6>

- paragrafy*:
<p>tekst tekst...</p>

*przed i po tekście nagłówka lub paragrafu automatycznie wstawiana jest przerwa
- znak końca linii:
<br >
należy pamiętać o spacji!
- pozioma linia oddzielająca:
<hr >

- komentarze:
<!-- ..... -->
- zawarty w komentarzu tekst jest ignorowany przez przeglądarkę

Linki

- do strony lub pliku:

<a href="adres_strony_lub_pliku">Tekst, na którym należy kliknąć</a>

target="_blank" - wyświetlenie dokumentu docelowego w nowym oknie/karcie przeglądarki
- pozwalający wysłać e-mail na określony adres:
<a href="mailto:mejl@adres">Klikniej, aby wysłać wiadomość</a>

- wstawienie etykiety w określonym miejscu dokumentu
<a name="nazwa_etykiety"> </a>

- link do etykiety w innym dokumencie
<a href="strona.htm#nazwa_etykiety">Tekst, na którym należy kliknąć</a>

- link do etykiety w tym samym dokumencie
<a href="#nazwa_etykiety">Tekst, na którym należy kliknąć</a>

! należy zwracać uwagę na wielkość liter w nazwach stron, plików i etykiet- jest istotna

Zadanie 02

polecenie: stworzyć prostą stronę internetową złożoną z 3 podstron połączonych za pomocą linków, które powinny zawierać:

  • tekst ujęty w paragrafy
  • nagłówki (co najmniej 2 różnych stopni)
  • link umożliwiający wysłanie wiadomości do autora strony
  • link odnoszący się do etykiety

! poprawność strony należy sprawdzić za pomocą walidatora

! wszystkie pliki strony należy umieścić na swoim koncie ftp

deadline: 01.03.2008
punkty:

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy