Wprowadzenie do HTML Informatyka Cele lekcji: Wiadomości: Uczeń potrafi: omówić możliwości wykorzystania tabel do prezentacji danych oraz do zarządzania zawartością strony; wyjaśnić konstrukcję znaczników składających się na tabelę; wymienić znaczniki pozwalające tworzyć proste tabele; wymienić znaczniki pozwalające formatować tabele. Umiejętności: utworzyć tabelę na stronie za pomocą znaczników HTML; modyfikować atrybuty tabel (obramowanie, szerokość, kolor obramowania); modyfikować atrybuty komórek; zagnieżdżać tabele za pomocą kodu HTML; dodawać do tabel komórki nagłówkowe, nagłówki stopki oraz tytuły; rozmieszczać obiekty na stronie HTML za pomocą odpowiednio spreparowanych tabel.

Cele lekcji Podczas tej lekcji nauczysz się: tworzyć prawidłową strukturę dokumentu HTML; formatować tekst przy pomocy znaczników; rozróżniać adresy względne i bezwzględne; tworzyć hiperłącza.

Przegląd zagadnień HTML – co to takiego? Rodzaje edytorów HTML. Podstawowa struktura dokumentu HTML. Tworzymy pierwszy dokument HTML. Linki, sznurki, łącza, odnośniki – czyli hiperłącza. Przedstawienie zagadnień, które zostaną omówione na lekcji, zaciekawienie uczniów jej treścią. Zapytanie uczniów do czego można wykorzystać tabele na stronach WWW.

HTML – co to takiego? Internet a pliki. HTML. HTML a przeglądarka. Specyfikacja języka HTML. XHTML. Strony dynamiczne. Flash. CSS. XML. Internet a pliki. Internet to ogólnoświatowa sieć komputerowa. Zasoby internetowe to nic innego jak pliki umieszczone na udostępniających je komputerach. Oczywiście Internet oferuje także wiele usług, takich jak poczta czy czat – jednak kiedy pobierasz coś z Internetu w większości jest to plik (film, muzyka, program) zamieszczony na jakimś komputerze. Strona internetowa zawiera określone teksty i ilustracje. Ilustracje te możesz zapisać jako pliki. Podobnie można zapisać samą stronę. To co widzisz w przeglądarce jako stronę internetową może być utworzone na wiele sposobów. Jeden z najstarszych i nadal używanych to tworzenie stron za pomocą języka HTML. HTML. HTML (HyperText Markup Language) jest językiem opisującym dokumenty tekstowe na potrzeby Internetu. Dokument utworzony w tym języku zawiera wyłącznie tekst. Specjalnie zdefiniowane znaczniki tego języka (dawniej często nazywane tagami) wymuszają odpowiednie wyświetlanie przygotowanego tekstu w przeglądarce internetowej. Pomimo tego, iż plik zawiera wyłącznie tekst, odpowiednie znaczniki nakazują przeglądarce wyświetlenie w odpowiednim miejscu dokumentu ilustracji lub innych obiektów umieszczonych w osobnych plikach – czasami nawet w zupełnie innych miejscach Internetu. HTML a przeglądarka. Przeglądarka internetowa jest programem, który potrafi przetworzyć znaczniki dokumentu HTML i wyświetlić je w odpowiedni sposób. I tu napotykamy na przeszkody. Powstało wiele przeglądarek, czy kolejnych ich wersji np. Internet Explorer, Firefox czy Opera i wiele innych. Interpretacja kodu HTML w poszczególnych przeglądarkach może dawać nieco inne wyniki. Czasami znaczniki obsługiwane są tylko w wybranych przeglądarkach. Potrzeba standaryzacji spowodowała powstanie specyfikacji języka HTML. Specyfikacja języka HTML. Od końca 1997 roku standardem jest HTML 4.01. Wszystkie znaczniki nie zamieszczone w tej specyfikacji mogą powodować problemy w interpretacji wyglądu strony. Specyfikacja ta jak i język nie jest już rozwijana. I dlatego kolejnym etapem po poznaniu języka HTML jest jego następca XHTML. XHTML. Aby wyjaśnić czym jest XHTML, należało by powiedzieć czym jest XML :-). Na potrzeby lekcji przyjmij że XHTML jest następcą języka HTML, który wymusza znacznie większą dbałość o prawidłowość wprowadzania znaczników w dokumencie. Ciekawostka – Strony dynamiczne. Dokument HTML – musi zostać utworzony i zapisany by można było go wyświetlić. Wyobraź sobie stronę wyświetlającą informację o każdym uczniu w szkole wraz z jego ocenami. W przypadku dokumentu HTML, dla każdego ucznia należało by przygotować odpowiedni plik. Zamiast tego często tworzony jest tylko jeden plik – szablon. Informacja o każdym uczniu odczytywana jest z przygotowanej bazy danych (czyli zbioru informacji) i wyświetlana w szablonie. Efekt widoczny w przeglądarce nie jest przechowywany w formie pliku, tylko tworzony jest dynamicznie. Oczywiście wymaga to odpowiedniego przygotowania strony i może być wykonane np. za pomocą technologii ASP lub PHP – umożliwiającej tworzenie służy do tworzenia dynamicznych aplikacji internetowych. Flash. Flash jest technologią firmy Macromedia. Dość często gotowe obiekty utworzone w tej Technologii są osadzane w dokumentach HTML. Cechą charakterystyczną obiektów tego typu jest atrakcyjna animacja, połączona z dźwiękiem przy zachowaniu niewielkich rozmiarów pliku. Dość często można spotkać gry lub testy stworzone w tej technologii. Czasami w tej technologii wykonywane są całe witryny. CSS. Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) są obecnie nierozerwalnie związane z językiem HTML. W chwili obecnej za pomocą kodu HTML tworzona jest struktura dokumentu a za efekt wizualny odpowiedzialne są właśnie style. XML. XML (eXtensible Markup Language (rozszerzalny język znaczników) – jest to język służący do definiowania formatu i struktury dokumentów. Oznacza to np. możliwość tworzenia własnych znaczników. Istnieją gotowe zestawy takich znaczników. Kiedy poznasz podstawy HTML – spróbuj zapisać w kodzie jakiś skomplikowany wzór matematyczny – zrozumiesz dlaczego powstał opracowany na podstawie XML - MathML (Mathematical Markup Language) – umożliwiający przedstawianie wzorów matematycznych. Języki utworzone w oparciu o XML nazywane są aplikacjami XML. Aplikacją XML jest także język XHTML.

Rodzaje edytorów HTML Edytor. Pojęcie: „edytor tekstowy” jest Ci już prawdopodobnie znane. Do edycji dokumentów tekstowych używałeś na lekcjach edytora Microsoft Word. Dokument HTML jest także plikiem tekstowym, do którego tworzenia wymagany jest odpowiedni edytor. Podział edytorów kodu HTML. Tekstowe. Graficzne. Jedne i drugie mogą być bezpłatne lub komercyjne. Aplikacje często dysponują możliwością pracy w obu trybach, czasami też posiadają rozbudowane możliwości zarządzania tworzoną witryną. Edytor graficzny - Nie wymaga znajomości kodu. To co widać w projekcie odpowiada w przybliżeniu temu co będzie widoczne w przeglądarce. Tworzony kod funkcjonalny, czasami jednak zawiera zbędne elementy. Edytor tekstowy - Wymaga doskonałej znajomości kodu. W większości jest to aplikacja działająca dość szybko. Ciekawostka – Aplikacje pakietu Microsoft Office. Większość aplikacji tego pakietu pozwala na zapisywanie ciekawych interakcyjnych stron HTML. Niestety nie są one poprawnie wyświetlane w różnych przeglądarkach i często podlegają różnym ograniczeniom. Ciekawostka – Notatnik. Notatnik pozwala na edycję strony HTML nie posiada jednak dodatkowych narzędzi umożliwiających tworzenie kodu. Wstawienie tabeli o stu wierszach i stu kolumnach wymaga wprowadzenia ręcznie pierwszego wiersza znaczników i skopiowania go odpowiednią ilość razy. Większość edytorów ma po prostu polecenie – wstaw tabelę – z możliwością określenia jej właściwości. Ale notatnik jest w systemie, uruchamia się szybko i wiele osób używa go do edycji różnorodnych plików tekstowych.

Edytory HTML dostępne w pracowni. Notatnik. Microsoft Word. Microsoft FrontPage. Inne edytory.

Notatnik

Microsoft Word

Microsoft FrontPage

Inne edytory

<pogrubienie>tekst</pogrubienie> Znaczniki Znacznik to w kodzie HTML tekst ujęty pomiędzy znaki <>. Np. <znacznik> Zamiast słowa znacznik należy wstawić odpowiednie słowo z kodu HTML. Znaczniki informują jak wyświetlać określony fragment w przeglądarce i w większości występują parami. Oznaczają początek i koniec danego efektu. Np. <pogrubienie>tekst</pogrubienie> Znacznik końca różni się tylko dodatkowym znakiem „/”.Choć w wielu przeglądarkach nie jest to istotne, zaleca się przestrzeganie kolejności znaczników podobnej do zamykania nawiasów w matematyce: Prawidłowo: ([]) – czyli <a><b></b></a> Nieprawidłowo: ([)] – czyli <a><b></a></b>

Podstawowa struktura dokumentu HTML <head> <title>Tytuł strony</title> </head> <body> Tekst na stronę. </body> </html> Ciekawostka - Strona kodowa. W nagłówku dokumentu warto zamieścić informację w formie meta tagu (ISO-8859-2) <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> - Jest to informacja dla przeglądarki o stronie kodowej dokumentu.

Tworzymy pierwszy dokument HTML Przygotowany dokument musi zostać zapisany jako plik z rozszerzeniem htm lub html. W nazwie zakazane są spacje i polskie znaki, dopuszczalny jest znak podkreślenia. nazwapliku.htm nazwa_pliku.htm Ważne: Plik domyślny. Polskie znaki w nazwach plików. Nazwa pliku – plik domyślny. Zauważ że często wpisując adres strony www, nie podajesz nazwy pliku jaki chcesz wyświetlić – zawsze jednak wyświetlany jest plik domyślny. Zaleca się nadawanie głównej stronie witryny nazwy index.htm; index.html; default.htm lub default.html. W rzeczywistości jest to zależne od konfiguracji serwera – można np. ustawić jako stronę główną plik o nazwie misiek.htm – trzeba jednak poinformować o tym wszystkich autorów stron na danym portalu, by uniknąć błędów. Polskie znaki w nazwach plików. Często zapominamy o zakazie wprowadzania polskich znaków w nazwach stron WWW. W niektórych sytuacjach strony takie uruchamiane lokalnie wyświetlają się prawidłowo. Jednak po przeniesieniu na serwer większość użytkowników będzie miała problem z ich wyświetleniem.

Zapisywanie dokumentu HTML w Notatniku Wpisujemy nazwę pliku z rozszerzeniem i klikamy przycisk Zapisz.

Nazwy plików HTML nazwa pliku.htm - (zła); mojastrona.htm - (dobra); mOjAStrona.html - (dobra); moja_strona.html - (dobra); moja_strona1.htm - (dobra); moja_strona_01.html - (dobra); strona_o_edytorze_tekstów.htm - (zła)

Wybrane znaczniki HTML Akapit. Załamanie akapitu. Pogrubienie tekstu. Pochylenie tekstu. Podkreślenie tekstu. Linia pozioma.

Akapit

Załamanie akapitu

Pogrubienie tekstu

Pochylenie tekstu

Podkreślenie tekstu

Linia pozioma

Linki, sznurki, łącza, odnośniki – czyli hiperłącza Hiperłącza nazywane są odnośnikami, linkami, łączami czy nawet sznurkami. Najbardziej popularna nazwa to jednak hiperłącza i łącza. Aby oznaczyć w kodzie fragment tekstu jako hiperłącze należy wprowadzić znacznik <a> - znacznik ten może posiadać dodatkowe atrybuty – jednym z nich jest atrybut href – wskazujący adres do jakiego ma prowadzić łącze. <a href=”http://www.nazwaserwera/folder/plik.htm”>kliknij tu</a> Przedstawiony adres jest adresem bezwzględnym – to znaczy że wskazuje na dokładnie jeden dokument w Internecie. W adresie względnym nie wskazuje się adresu pliku w Internecie a tylko położenie jednego dokumentu względem drugiego. Jeśli dokumenty są w tym samym folderze adres łącza pomiędzy nimi może wyglądać tak: <a href=”plik2.htm”>kliknij tu</a> To zdanie jest hiperłączem do portalu Onet. – jaki to adres? Istotą stron WWW jest sposób przechodzenia pomiędzy dokumentami. Kliknięcie fragmentu tekstu lub rysunku będącego hiperłączem otwiera w przeglądarce kolejny dokument.

Hiperłącza Wskaż adresy względne i bezwzgledne: <a href=”nazwapliku.htm”>link1</a> <a href=”http://www.nazwa.pl/nazwapliku.htm”>link2</a> (ok) <a href=” http://www.nazwa.pl”>link1</a> <a href=”fotki/apel/nazwapliku.htm”>link1</a> Wzgledne 1 i 4

Podsumowanie HTML – co to takiego? Rodzaje edytorów HTML. Podstawowa struktura dokumentu HTML. Tworzymy pierwszy dokument HTML. Linki, sznurki, łącza, odnośniki – czyli hiperłącza.