Lekcja1 : Elementy i znaczniki w notatniku Jesteś teraz gotowy, aby nauczyć się sedna języka HTML: elementów. Elementy tworzą strukturę w kodzie dokumentu HTML i informują przeglądarkę w jaki sposób strona internetowa ma prezentować informacje. Generalnie element składa sie ze znacznika otwierającego, treści, i znacznika zamykającego. "Znaczniki"? Znaczniki to etykiety uŝywane do zaznaczania początku i końca elementu. Wszystkie znaczniki maja ten sam format: zaczynają się znakiem mniejszości "<" i kończą znakiem większości ">". Generalnie mówiąc, są dwa rodzaje znaczników - otwierajace: <html> i zamykające: </html>. Jedyna róŝnica jest znak ukośnik "/" dodawany przy znacznikach zamykających. Zawartość elementu umieszczasz miedzy znacznikiem zamykającym i otwierającym. Wszystko w kodzie HTML opiera sie na elementach. Nauczyć się języka HTML to nauczyć się i korzystać z róŝnych znaczników. KaŜdy dokument html zaczyna się znacznikiem <html>, który informuje przeglądarkę, Ŝe właśnie zaczęliśmy uŝywać języka HLML. Znacznik </html> informuje znowu przeglądarkę, iŝ właśnie przestaliśmy uŝywać języka, HTML. Wszystkie znaki, które nie są określone znacznikami będą wyświetlane, jako zwykły tekst. Czy moŝemy zrobić z tego juŝ dokument HTML?? Tak. Dokument, którego składnia będzie wyglądała następująco <html> coś tam</html> będzie juŝ interpretowany przez przeglądarkę. Niestety daleko jest jemu do doskonałości. Po pierwsze zapis. Dokument taki powinien być zapisany w postaci html. Dlatego najlepiej do edycji jego uŝyć notatnika. Znajdziemy go w zakładce windowsa folderze akcesoria, albo w pasku windowsa.
I co teraz??? Spróbujmy zrobić dokument html. Wpiszmy w dokumencie naszą składnie <html> coś tam</html> I teraz zapiszemy go pod postacią html. W tym celu wybieramy zakładkę w notatniku PLIK i przycisk ZAPISZ JAKO nasz dokument musimy nazwać albo index.html albo index.htm albo default.htm albo default.html Typ dokumentu nie moŝe być *.txt tylko, jako wszystkie pliki, bo chcemy stworzyć dokument html a nie dokument tekstowy. Ale gdzie zapisujemy???? I to jest bardzo waŝne. Nie moŝemy sobie zapisać gdzie chcemy. Dokumenty html muszą być zapisywane wspólnie z plikami, do których prowadzą odnośniki z dokumentu html. PrzecieŜ strony internetowe mogą zawierać takie rzeczy jak zdjęcia, muzykę, czy filmy. To wszystko musi być gdzieś obok naszego dokumentu. Z html-em nie jest tak jak z dokumentem Worda, gdzie moŝemy wstawić zdjęcia, filmy i one w nim są. Dokument html wyświetla te zdjęcia i filmy, ale one mogą się znajdować gdzieś zupełnie indziej. Jedna strona moŝe wyświetlać zdjęcia, których część jest na tym samym serwerze, co nasz plik html a część zupełnie gdzieś indziej. ( np. na serwerach w Ameryce) Plik html jedynie pokazuje drogę do takiego zdjęcia. Mówi przeglądarce tutaj wyświetl zdjęcie, które jest obok mnie. A tutaj droga przeglądarko wyświetl zawartość serwera http://79.189.224.123/ssm/ Skopiujcie ten adres powyŝej i wklejcie go w okno adresu waszej przeglądarki internetowej.
Co Wam się pojawiło??? Nasz szkolny serwer do zdawania testów. Odwiedzicie go niebawem, jak będziecie zdawać test. Do naszego dokumentu html musicie stworzyć folder, w którym umieścicie wszystkie pliki, które będzie wyświetlał ten dokument. Stwórzcie go w folderze moje witryny pod nazwą waszego nazwiska zwracając uwagę, iŝ nazwa ta nie moŝe zawierać polskich znaków, duŝych liter, enterów oraz spacji. W nim zamieście wasz plik początkowy index.html Dlaczego właśnie plik ten musi się nazywać tak a nie inaczej.??? Wyobraźmy sobie, Ŝe mamy stronę, która mieści się pod adresem http://www.123.pl Ona wcale nie musie się nazywać 123. MoŜe to być strona muzeum głazów narzutowych i być zatytułowana Muzeum 123 kamieni Jednak jak ktoś będzie chciał odwiedzić nasze muzeum wbije np. w wyszukiwarkę google słowa muzeum głazów narzutowych a Google będzie wiedziało, Ŝe strona ta występuje pod adresem np. http://000.000.000.000/muzeum/ i wyświetli naszą stronę w pierwszej 10 znalezionych synonimów. Klikając w te łącze nasza przeglądarka automatycznie się połączy z sewerem stron, który moŝe być w dowolnym miejscu na ziemi i otworzy w nim folder /muzeum/ I co dalej??? Nasza przeglądarka znajdzie tam np: 123 zdjęcia dziesięć stron internetowych pięćdziesiąt filmów krem mydło i powidło. Co ma otworzyć??? Przeglądarka zawsze otworzy, jako pierwszy plik index.html a w nim zawarte będą łącza ( drogi ) do innych stron i dokumentów, które mogą się juŝ inaczej nazywać. Dlatego nasz plik musi się nazywać index.html Dobrze. Czyli wpisujemy <html> coś tam</html>, tworzymy folder, w nim zapisujemy nasz plik. Jak moŝemy wyświetlić ten plik??? Edytujemy go w notatniku a wyświetlamy w oknie przeglądarki wskazując jej lokalizacje pliku. (Przeglądarki tej nie zamykajcie juŝ do końca zajęć) o tak: zakładka plik/ przycisk otwórz/ przeglądaj/ tutaj musimy znaleźć lokalizacje naszego folderu i pliku np: moje witryny/ kowalski/index.html i mamy to, co zrobiliśmy.
Trochę mało??? Myślicie, Ŝe, na dopuszczającą nie starczy?? I macie rację. Nie dość, Ŝe mało to jeszcze w ogóle to nie przypomina dokumentu html. Mimo tego, Ŝe przeglądarka jakoś to nam zdołała wyświetlić. Czyli jak powinien wyglądać dokument html?? Odwołując się do pierwszych części, <html> jest znacznikiem otwierającym wiec powinien być takŝe znacznik zamykający, który umieścimy na samym końcu dokumentu HTML. Wiec, aby nie zapomnieć o umieszczeniu znacznika zamykającego, HTML wpisz teraz "</html>" kilka linii niŝej i umieść resztę dokumentu miedzy znacznikami <html> i </html>. Następną rzeczą potrzebna w twoim dokumencie jest "główka", która dostarcza informacji o dokumencie, oraz "ciało", które jest zawartością dokumentu. Odkąd HTML jest niczym, jeŝeli nie jest logiczny, główka (<head> i </head>) jest nad ciałem (<body> i </body>). Twój dokument powinien teraz wyglądać następująco: <html> <head> </head> <body> coś tam </body> </html> ZauwaŜ_ jak znaczniki zostały ułoŝone w strukturę przy wykorzystaniu nowych linii oraz spacji. W zasadzie, nie ma znaczenia jak ułoŝysz swój dokument HTML. Ale by ci pomóc, oraz innym czytajacym twój kod, jest wysoce rekomendowane abyś układał w strukturę swój kod HTML w schludny sposób poprzez wcięcia i nowe linie, jak w powyŝszym przykładzie.
Ale po co ten head i body?? W sekcji nagłówkowej umieszczasz waŝne informacje dotyczące twojej strony, podczas gdy ciało dokumentu zawiera informacje składającą się na stronę. Na przykład, jeŝeli chcesz nadać swojej stronie tytuł, który pojawi się sie w górnej części przeglądarki, powinieneś zrobić to w sekcji nagłówkowej. Element uŝyty do określenia tytułu to title. tzn. zapisz tytuł strony pomiędzy znacznikami <title> i</title> np. biorąc pod uwagę iŝ tworzymy dokument który ma być stroną muzeum głazów narzutowych nasz tytuł strony będzie zapisany następująco. <title> Muzeum 123 kamieni </title> a całość naszej strony będzie wyglądała następująco. <html> <head> <title> Muzeum 123 kamieni. </title> </head> <body> coś tam </body> </html> Zapiszcie plik skrótem klawiaturowym ctrl+s OdświeŜcie przeglądarkę przyciskiem F5. ZauwaŜcie, iŝ w nazwie strony pojawiło się Muzeum 123 kamieni. Co jeszcze moŝemy wpisać w HEAD?? W head musicie zastosować takie znaczniki jak: <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> - ustawia styl wyświetlania zawartości strony na CSS. <META HTTP-EQUIV="Content-Language" CONTENT="pl"> - określa język dokumentu. <META NAME=KEYWORDS CONTENT="słowa kluczowe"> - lista słów kluczowych oraz fraz charakterystycznych dla dokumentu. <META NAME=DESCRIPTION CONTENT="opis strony WWW"> - krótka charakterystyka dokumentu. <META NAME=ROBOTS CONTENT="index,follow,all"> - informacja dla robotów wyszukiwarek, czy mają indeksować strony, katalogi serwisu. <META NAME= "author" CONTENT= "autor"> - informacja o autorze strony. <META NAME= "reply-to" CONTENT= "adres e-mail"> - adres e-mail autora. Wpiszcie w odpowiednie znaczniki ich uzupełnienie. Słowa kluczowe to słowa po których wyszukiwarka Google lub inna indeksuje Waszą stronę.
A co wpisujemy w body??? W body wpisujemy to, co dokładnie dokument czy strona wyświetla. Musimy oczywiście stosować znaczniki, które są odpowiedzialne za wyświetlanie tego dokumentu. Parę przykładów. Element b uŝywamy, aby pogrubić litery. Cały tekst pomiędzy znacznikiem otwierającym <b> i znacznikiem zamykającym </b> zostanie pogrubiony w oknie Przeglądarki. ("b" jest skrótem od "bold" czyli wyraźny.) Przykład <b>witamy na stronie muzeum głazów narzutowych. </b> Bedzie tak wygladał w przeglądarce: Witamy na stronie muzeum głazów narzutowych Elementy h1, h2, h3, h4, h5 i h6 są uŝywane do robienia nagłówków (h oznaczana "heading, czyli nagłówek), gdzie, h1 jest pierwszym poziomem tak wiec wynikiem jest tekst największy, h2 jest drugim poziomem i wynikiem będzie trochę mniejszy tekst, a h6 jest szóstym poziomem i jednocześnie ostatnim w hierarchii nagłówków - tekst będzie najmniejszy. Przykład 2: <h1>głaz największy</h1> <h2>głaz trochę mniejszy </h2> <h3>kamień </h3> <h4>kamyczek </h4> Bedzie tak wyglądał w przeglądarce: Głaz największy Głaz trochę mniejszy Kamień Kamyczek Wiec, zawsze musze otwierać i zamykać znaczniki? Tak jak mówią, są wyjątki w regułach i w HTML wyjątkiem jest to, Ŝe istnieje kilka elementów, dla których znacznik zamykajacy i otwierajacy ma to samo znaczenie. Te tak zwane puste elementy nie są połączone w Ŝaden sposób z tekstem, a jedynie
tworzą oddzielne etykiety, na przykład, znacznik nowej linii wygląda tak: <br/> a znacznik przedzielającej linii poziomej <hr/> Musisz je wykorzystać w swoim dokumencie. Znaczniki lepiej pisać z duŝej czy małej litery? Większość przeglądarek nie patrzy na wielkość liter znaczników. <HTML>, <html> lub <HtMl> normalnie da ten sam rezultat. Jednak, poprawnie znaczniki pisze sie mała litera. Wiec wejdź w nawyk pisania znaczników mała litera.. HTML jest prosty i logiczny. Przeglądarką czyta HTML tak jak ty czytasz: od góry do dołu z lewej do prawej. Tak wiec, dokument HTML zaczyna sie tym, co powinno być najpierw na stronie i kończy tym, co powinno zostać wyświetlone na stronie, jako ostatnie. A oto inne znaczniki, które dzisiaj musisz wykorzystać. <b> tekst pogrubiony </b> <i> tekst pochylony </i> W ten sam sposób moŝesz pogrubić swój tekst umieszczając go miedzy znacznikiem otwierającym <b> a zamykającym </b>, moŝesz pochylić tekst uŝywając znacznika otwierającego <i> i zamykającego </i>. Tak, "i" jest skrótem od "italic, czyli styl liter pochylonych. Przykład 1: Dodaj do dotychczas stworzonej strony następujący wiersz. <i>to powinno być pochylone. Uczę się w klasie...(tutaj wpisz klasę)</i> Będzie tak wyglądał w przeglądarce: To powinno być pochylone. Uczę się w klasie... Podobnie, moŝesz uczynić tekst mniejszym uŝywając znacznika small: Przykład 2: <small>to powinno być małe. Małe jest piękne.</small> Będzie tak wyglądał w przeglądarce: To powinno być małe. Małe jest piękne. Czy mogę uŝywać wielu elementów jednocześnie? MoŜesz z łatwością korzystać z wielu elementów jednocześnie o ile unikasz nakładania sie elementów. Najlepiej zilustrujmy na przykładzie: Przykład : JeŜeli chcesz wyświetlić pogrubiony i wytłuszczony tekst, musisz zrobić tak: <b><i>tekst jest pogrubiony i wytłuszczony</i></b> Ale NIE tak: <b><i>tekst jest pogrubiony i wytłuszczony</b></i> Równica jest taka, _e w pierwszym przykładzie pierwszy znacznik został zamknięty
jako ostatni. W ten sposób unikniemy nieporozumień ze samym sobą i przeglądarką. Więcej elementów! Co to jest atrybut? Pewnie pamiętasz, Ŝe elementy tworzą strukturę w dokumentach HTML i informują przeglądarkę jak ma wyglądać strona internetowa (na przykład, <br /> informuje przeglądarkę o utworzeniu nowej linii). Niektóre elementy mogą zawierać więcej informacji. Te dodatkowe informacje nazywane są atrybutami. Przykład 1: <h2 style="background-color:#ff0000;">moja kariera kustosza muzeum głazów narzutowych</h2> Atrybuty są zawsze umieszczane w znaczniku otwierającym a wartość atrybutu umieszczana jest w cudzysłowu. Średnik uŝywamy do oddzielenia wartości dla atrybutu style. Wrócimy do tego później. Jaki jest haczyk? Jest wiele róŝnych atrybutów. Pierwszy, którego się nauczysz to atrybut stylu. Za pomocą atrybutu stylu moŝesz dodać układ graficzny do swojej strony internetowej. Dla przykładu kolor tła: Przykład: <html> <head> </head> <body style="background-color:#ff0000;"> </body> </html> PokaŜe czerwoną stronę w przeglądarce - sprawdź i się przekonasz. ZauwaŜ, Ŝe pewne znaczniki i atrybuty uŝywają pisowni amerykańskiej np.. color zamiast colour. WaŜne jest abyś był ostroŝny korzystając z tej samej pisowni, jaką mamy w przykładach kursie - inaczej, przeglądarka nie zrozumie kodu. TakŜe, nie zapominaj umieszczać cudzysłowie na końcu wartości atrybutu. Jak strona zmieniła kolor na czerwony?
W powyŝszym przykładzie, prosiliśmy o kolor tła o kodzie "#ff0000". To jest kod koloru czerwonego zapisany za pomocą numerów szesnastkowych, (HEX). KaŜdy kolor ma swój własny numer w kodzie szesnastkowym. Oto parę przykładów: Biały: #ffffff Czarny: #000000 (zeros) Czerwony: #ff0000 Niebieski: #0000ff Zielony: #00ff00 śółty: #ffff00 Przykłady elementów wymagających otwierającego i zamykającego znacznika - tak jak większość elementów - to ul, ol i li. Te elementy są uŝywane do tworzenia listy. ul jest skrótem od "unordered list, czyli lista nieuporządkowana i wstawia kule przed kaŝda pozycja w liście. ol jest skrótem od "ordered list, czyli lista uporządkowana i numeruje kaŝda pozycje w liście. Aby umieszczać elementy w liście uŝywaj znacznika li("list item" - element listy). Zdziwiony? Patrz na Przykład: <ul> <li>element 1 listy</li> <li>element 2 listy</li> </ul> Bedzie tak wyglądał w przeglądarce: Element 1 listy Element 2 listy Przykład: <ol> <li>pierwszy element listy</li> <li>drugi element listy</li> </ol> Będzie tak wyglądał w przeglądarce: 1. Pierwszy element listy 2. Drugi element listy