Na dobry początek… Godziny spotkań: Krótkie BHP Poniedziałek 18.10-19.40 Wtorek 18.10-19.40 Piątek 16:30-18.00 Krótkie BHP Materiały w formie papierkowej(jeśli się uda) marcin.wlodarz@gmail.com +48606900031 Pytać, pytać, pytać……
Co na kursie?? Dzisiaj wprowadzenie (raczej bez komputerów) Później: Zabawa z tekstem Grafika na stronie (w tym odsyłacze graficzne) Tabele Style CSS Ramki i ramki pływające Formularze i przyciski Umieszczanie stron w Sieci Wstęp do PHP JavaScript Dźwięk na stronie, publikacje elektroniczne w formacie PDF
Przykładowy dokument HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2"> <META NAME="Description" CONTENT="Strona przykladowa"> <META NAME="Keywords" CONTENT="przykład,strona przykladowa"> <META NAME="Author" CONTENT="Marcin Włodarz"> <META HTTP-EQUIV="Content-Language" CONTENT="pl"> <TITLE>Stronka przykladowa</TITLE> </HEAD> <BODY> <P><B><I><FONT COLOR="#FF33CC">Stronka przykladowa</FONT> </I></B></P> </BODY> </HTML>
Przykładowy dokument HTML
Co to jest właściwie HTML?(1) HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) to język programowania składający się ze znaczników (ang. tags) stosowany do pisania stron WWW. Powstał w 1981r. Ostatnią wersją HTML’a jest wersja 4.01, próbująca wydzielić zarządzanie wyglądem strony do kaskadowych arkuszy stylów CSS (będziemy omawiać później) Specyfikacja języka: http://www.w3.org/TR/html401/ Dokument HTML jest niczym innym jak plikiem tekstowym, w którym to co chcemy w jakiś sposób wyświetlić w przeglądarce oznaczamy tagami Tagi to nawiasy „trójkątne” Otwierający <> Zamykający </>
Co to jest właściwie HTML?(2) Pliki HTML mają rozszerzenie .html lub .htm Otwierane są automatycznie przez przeglądarki internetowe: Internet Explorer Mozilla Firefox Inne… Warto nazwać stronę główna index.html lub index.htm, ze względu na fakt, że będzie ona automatycznie wyświetlana przez przeglądarkę po wpisaniu adresu URL
Tagi Tagi mówią nam, jak ma być wyświetlany tekst zawarty między nimi <B>Marcin</B> - pogrubi tekst <B><I>Marcin</I></B> - pogrubi i pochyli tekst Kolejność otwierania i zamykania tagów: <B><I>…..</I></B> - poprawnie <B><I>……</B></I> - niepoprawnie, jednak rozumiane przez przeglądarkę, należy unikać <B><I>……</I> - niepoprawnie, niezamknięty tag Wielkość liter w tagach jest obojętna Tagów jest kilkadziesiąt … trzeba je znać na pamięć
Ogólna osnowa dokumentu(1) <HTML> <HEAD> informacje nagłówkowe </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>
Ogólna osnowa dokumentu(2) <HTML> </HTML> - otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce <HEAD> </HEAD> - umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa <BODY> </BODY> - znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu.
Ogólna osnowa dokumentu(3) Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE> </TITLE> TITLE nie oznacza tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie <TITLE>Stronka przykladowa</TITLE>
Ogólna osnowa dokumentu(4) STRONA KODOWA DOKUMENTU Zalecane stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2) <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> Czyli….
Ogólna osnowa dokumentu(2) <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> <TITLE> Tytuł strony </TITLE> </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> Pojawiło się nowe pojęcie… „Znacznik META”
Kodowanie i znaczniki META W dokumentach powinniśmy stosować standard kodowania polskich liter ISO-8859-2. Jest to międzynarodowy standard, przyjęty także w charakterze Polskiej Normy Umieszcza się ją w części nagłówkowej <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> Często stosuje się w dokumentach WWW specjalny prolog, który identyfikuje poziom używanego języka HTML Wstawiany PRZED otwarciem szkieletu strony, czyli znacznikiem <HTML> Jeśli dokument jest zgodny ze specyfikacją HTML 4.0, powinniśmy stosować prolog: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Prolog jest m.in. wykorzystywany jako oznaczenie poziomu w procesie weryfikacji poprawności składni za pomocą tzw. parserów.
Znaczniki META … (można zapomnieć) Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np. wyszukiwarki internetowe Zawiera 3 atrybuty: HTTP-EQIUV – definiuje zmienne systemowe NAME – definiuje zmienne użytkownika CONTENT W kombinacji pierwszy z trzecim lub drugi z trzecim Kilka przykładów… Znaczników META nie trzeba pamiętać. Edytory HTML po kliknięciu opcji „nowy dokument” wstawiają szablon znaczników (<HTML><HEAD><TITLE><META><BODY>…); należy jedynie wypełnić odpowiednie dane (dane tworzącego stronę i tym podobne) O edytorach troszkę później
Znaczniki META… cd <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2"> polecenie jest deklaracją strony kodowej dokumentu (czyli polskich ogonków) <META NAME ="Description" CONTENT="jakaś tam treść"> opis zawartości strony (150-200 znaków) <META NAME="Keywords" CONTENT="jakieś wyrazy kluczowe"> Informuje o wyrazach kluczowych dokumentu; wyrazy są oddzielane przecinkami; ułatwia to pracę wyszukiwarkom <META NAME="Language" CONTENT="pl"> Informacja o języku strony <META NAME="Author" CONTENT="imię i nazwisko"> Informacja o autorze strony Zobaczmy jak to wygląda w praktyce…
Przykład Kodowanie <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2"> <META NAME="Description" CONTENT="Strona o motocyklach"> <META NAME="Keywords" CONTENT="motocykle,motoryzacja"> <META NAME="Author" CONTENT="Marcin Włodarz"> <META HTTP-EQUIV="Content-Language" CONTENT="pl"> <TITLE> Wszystko o motocyklach</TITLE> </HEAD> <BODY> <B><I> To jest strona o motocyklach</I></B> </BODY> </HTML> Opis zawartości strony Słowa kluczowe Autor Język To się wyświetli w przeglądarce (pogrubione i przechylone)
Przykład
Stwórzmy pierwszą stronkę Start->ustawienia->panel sterowania Wybieramy opcje folderów zakładka widok Znajdujemy opcję ukryj rozszerzenia znanych typów plików i ją odznaczamy Na pulpicie klikamy prawym przyciskiem myszki i wybieramy nowy->dokument tekstowy Nadajemy mu nazwę idex.html Wciskamy enter Następnie klikamy prawym przyciskiem myszki na stworzony plik i wybieramy opcję edytuj Otworzy się nam w notatniku pusty dokument. Zaczynamy tworzyć naszą pierwszą stronę…
Pierwsza strona ciąg dalszy Wpisujemy ręcznie osnowę dokumentu HTML <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Pomiędzy znacznikami <BODY> wpisujemy dowolny tekst (można użyć znaczników <B><I></I></B>) Zapisujemy plik (skrót klawiszowy ctrl+s) lub
Pierwsza strona…ciąg dalszy Zamykamy plik Dwa razy klikamy na niego myszką Otworzy się nam przeglądarka internetowa a w niej ukaże się nasza stronka Aby zobaczyć kod strony można kliknąć na niej prawym przyciskiem myszki i wybrać opcję „Pokaż źródło strony”
Pierwsza strona…ciąg dalszy To co się nam pojawi to zawartość (cała) naszego pliku index.html
Edytory Pajączek (darmowy lub prawie darmowy) WebEdit HotDog MS FrontPage My wybierzemy pajączka, jest to polska dystrybucja, przez wielu uważana za jedną z najlepszych Pajączek 2000 proffesional v.4.8.1
Więcej o <BODY>(1) Definiując <BODY> możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony <BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif"> Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu co strona HTML) <BODY BGCOLOR="kolor"> Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Gdyby był to <BODY BGCOLOR="yellow">, zobaczymy żółte tło <BODY TEXT="kolor"> Parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także na uwadze kolor tła <BODY LEFTMARGIN="xx"> lub <BODY TOPMARGIN="xx"> Microsoft Internet Explorer pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo
Więcej o <BODY>(2) <BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3"> Możemy również określić kolory odsyłaczy. LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty ALINK="kolor" (active link) określa kolor aktywnego odsyłacza Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy powrócimy do tej samej strony, zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą VLINK="kolor", jako już co najmniej raz wizytowany Przykład: <BODY LINK="blue" VLINK="red" ALINK="yellow">
Kolory Pokolorujmy naszą stronę Black Olive Red Blue Yellow Green White <-white Aqua Silver Edytory takie jak Pajączek posiadają paletę kolorów i można wybrać kolor za pomocą myszki. Należy jednak znać podstawowe nazwy kolorów. Pokolorujmy naszą stronę
Przykład <HTML> <HEAD> </HEAD> <BODY BGCOLOR="blue" Text="white" LEFTMARGIN="200" TOPMARGIN="100"> <B><I>Elemeledutki</I></B> </BODY> </HTML>
Przykład cd.
Co to są podstrony? Czyli wstęp do odsyłaczy (hiperłączy) Wszystkie serwisy internetowe składają się z pewnej liczby podstron, a nie tylko z jednej, bardzo długiej, strony głównej. Każda podstrona to po prostu osobny plik (z rozszerzeniem *.html lub *.htm), który tworzy się w taki sam sposób, jak stronę główną (przy użyciu szablony przedstawionego wcześniej) Składnia odsyłacza do podstrony (w obrębie tego samego serwisu) jest następująca: <A HREF="względna ścieżka dostępu do podstrony">opis odsyłacza</A> Odsyłacz do adresu internetowego <A HREF="adres internetowy">opis odsyłacza</A> Odsyłacz pocztowy <A HREF="mailto:adres poczty e-mail">opis odsyłacza</A> Przykład
Przykład <HTML> <HEAD> </HEAD> <BODY BGCOLOR="green" Text="white" LEFTMARGIN="200" TOPMARGIN="100"> <B><I>Elemeledutki</I></B> <BR> <A HREF="http://www.onet.pl">Polacz z www.onet.pl</A> <A HREF="mailto:marcin.wlodarz@gmail.com">Napisz do mnie…</A> </BODY> </HTML>
Przykład Po najechaniu na odsyłacz kursor przyjmie postać rączki
Pajączek Podgląd strony Ciało dokumentu
Pajączek (2) Edytor sam dba o zamykanie tagów Zawiera „ściągę” znaczników Zawiera paletę kolorów Umożliwia tworzenie strony w trybie graficznym
Zabawa z tekstem (1) Przykład Akapit <P></P> Stosując akapity, możemy skorzystać z kilku metod wyrównywania tekstu na stronie (czyli jego ustawienia): <P align=„left”> … </P> <P align=„right”> … </P> <P align=„center”> … </P> <P align=„justify”> … </P> Tytuł <Hn></Hn>, gdzie n=1,…,6 Służy nadaniu części dokumentu (rozdziałowi) jakiegoś tytułu (nagłówka) H1 tytuł pierwszego rzędu H6 tytuł szóstego rzędu Przykład
Zabawa z tekstem (2) <HTML> <HEAD> </HEAD> <BODY BGCOLOR="blue" Text="white" LEFTMARGIN="200" TOPMARGIN="100"> <P ALIGN="CENTER"> To jest pierwszy akapit wysrodkowany</P> <P ALIGN="RIGHT"> To jest drugi akapit wyrownany do prawej</P> <H1>To jest tytuł pierwszego rzędu </H1> <H2>To jest tytuł drugiego rzędu </H2> <H6>To jest tytuł szostego rzędu </H6> </BODY> </HTML>
Zabawa z tekstem (3)
Zabawa z tekstem (4) Dymek narzędziowy Stosując polecenie: <Hn title="Tu opis">...</Hn>, możemy wprowadzić opis, który będzie się pojawiał, gdy przesuniemy wskaźnik myszki na dany tytuł. Atrybut ten (title="...") można stosować praktycznie w stosunku do wszystkich znaczników HTML Koniec linii (enter) <BR> Pogrubienie kursywa i podkreślenie <B><I><U> Aby wyświetlić tekst podkreślony linią innego koloru jak sam tekst <U style="color: red"><SPAN style="color: black">To jest czarne podkreślenie czerwoną linią</SPAN></U> Czcionka migająca (tylko mozilla firefox) <BLINK></BLINK> Czcionka przekreślona <STRIKE></STRIKE> Indeks górny <SUP></SUP>
Zabawa z tekstem (5) Indeks dolny <SUB></SUB> Duża czcionka +1 punkt <BIG></BIG> Mała czcionka -1 punkt <SMALL></SMALL> Czcionka mocno wyróżniona <STRONG></STRONG> Czcionka <FONT></FONT> Dzięki temu poleceniu, możesz określić wiele parametrów dotyczących pisanego tekstu (szerzej za chwilę)
Zabawa z tekstem (6) Dalekopis <TT></TT> Cytat Pozwala wprowadzić do dokumentu tekst, napisany czcionką monotypiczną, czyli o stałej szerokości znaku (efekt dalekopisu). Cytat Odniesienie do źródła: <CITE></CITE>; zwykle napisane kursywą. Można w nim umieścić imię i nazwisko autora, którego cytujemy lub tytuł książki do której się odwołujemy Krótki cytat <Q></Q>; Przeglądarki zwykle automatycznie ujmują tekst tego znacznika w znaki cudzysłowu dlatego nie należy wstawiać dodatkowych cudzysłowów ręcznie. Umieszcza się w nim treść krótkich cytatów, które nie zawierają żadnych akapitów. Jeśli chcemy zacytować dłuższy fragment tekstu z kilkoma paragrafami, powinniśmy wykorzystać znacznik <BLOCKQUOTE>.
Przykład <CITE>Albert Einstein</CITE> powiedział: <Q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.</Q>
Zabawa z tekstem (7) Blok cytowany <BLOCKQUOTE>...</BLOCKQUOTE> Wprowadza blok cytowany, którego możemy użyć np. gdy powołujemy się na jakieś źródła. Każdy wiersz w bloku cytowanym rozpoczyna się zwykle tabulatorem (wcięciem). Można go używać do zacytowania jakiegoś większego fragmentu, który ciągnie się przez wiele linijek. Adres <ADDRESS>…</ADDRESS> Wprowadza blok adresu, którego możemy użyć gdy podajemy na stronie swój własny lub jakiś inny adres. Blok taki nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. W przeglądarkach najczęściej jest automatycznie napisany czcionką. Treść wstawiona i usunięta <INS>…</INS><DEL>…</DEL> Pozwala podać informację o wprowadzonych na stronie zmianach. Jeśli ostatnio dodane zostały jakieś nowe rozdziały, aby o tym zakomunikować, opis tych zmian można wpisać do znacznika <ins> (taki tekst może zostać automatycznie podkreślony). Natomiast do znacznika <del> wpisujemy opis usuniętych rozdziałów, które nie są już dostępne (zwykle tekst przekreślony).
Zabawa z tekstem (8) Wykazy gdzie rodzaj Wypunktowanie <ul type = „rodzaj”> <li> Punkt pierwszy </li> <li> Punkt drugi </li> <li> Punkt trzeci </li> </ul> gdzie rodzaj disc – koło (domyślny) circle – okrąg square – wypełniony kwadrat
Zabawa z tekstem (9) Stosując pewną "sztuczkę", można uzyskać wykaz, którego wyróżniki (markery) będą miały inny kolor niż reszta tekstu: <ul style="color: red"> <li><span style="color: black">Punkt pierwszy</span></li> <li><span style="color: black">Punkt drugi</span></li> <li><span style="color: black">Punkt trzeci</span></li> </ul>
Zabawa z tekstem (10) Wykazy cd Numerowany <OL type = „rodzaj numeracji”> <LI> Punkt pierwszy </LI> <LI> Punkt drugi </LI> <LI> Punkt trzeci </LI> </OL> gdzie jako "rodzaj numeracji" należy podać: "1" (domyślny) - numeracja według liczb arabskich "I" - według dużych liczb rzymskich "i" - według małych liczb rzymskich "a" - według małych liter "A" - według dużych liter
Przykład
Pozioma linia <HR> Pozbawiona cienia - <HR NOSHADE> O ustalonym rozmiarze (grubości) <HR SIZE=5> O ustalonej długości w pikselach <HR WIDTH=300> O ustalonej długości w % szerokości strony <HR WIDTH=50%> Można ją pozycjonować <HR ALIGN=…> O ustalonym kolorze <HR COLOR=„nazwa koloru”>
Obramowanie <FIELDSET>… </FIELDSET> Wprowadza obramowanie wokół wybranego fragmentu tekstu Polecenie to często stosuje się wraz z: <LEGEND>...</LEGEND>, co pozwala podać tytuł ramki. Po wpisaniu: <FIELDSET> <LEGEND> OPIS </LEGEND> Jakiś tekst </FIELDSET>
Komentarz <!-- Treść komentarza--> Tekst ignorowany przez przeglądarkę. Zazwyczaj zapisuje się w komentarzach informację dla nas, jako tworzących stronę, np.: <!-- w tym miejscu, a właściwie poniżej jest obrazek -->
Czcionka (wielkość) Wielkość czcionki Czcionka bazowa (aktualna) (bezwzględna) <FONT SIZE=„n”>…</FONT>, gdzie n oznacza wielkość pisma (1-najmniejsza, 7-największa, 3-domyślna) (względna) <FONT SIZE=„+n”>…</FONT>, gdzie +n oznacza czcionkę o n większą od aktualnej. Analogicznie –n. Czcionka bazowa (aktualna) <BASEFONT SIZE=„x”> Oznacza ono, że od tego momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości. Gdy x=5, <BIG> wprowadzi czcionkę o wielkości 6, <SMALL> - o wielkości 4, <FONT SIZE=-3> zmniejszy czcionkę do 2 punktów itd. Polecenie niepożądane; zalecane niestosowanie;
Czcionka (kolor i rodzaj) <FONT color="kolor">...</FONT> Rodzaj <FONT face="rodzaj">...</FONT> lub <FONT face="rodzaj1, rodzaj2, rodzaj3...">...</FONT> gdzie zamiast "rodzaj, rodzaj1, rodzaj2..." należy wpisać rodzaj czcionki (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to w przypadku drugiego polecenia należy ją objąć w znaki apostrofu np.: <FONT face="Verdana, 'Times New Roman', Arial">...</FONT>
Znaki specjalne " = ” = ” ” (niełamliwa spacja) § = paragraf © = copyright
Podział znaczników Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to np.: CENTER (wyśrodkowanie), B (pogrubienie), I (pochylenie)… Użycie tych znaczników gwarantuje, że w każdej sytuacji tekst otrzyma określone formatowanie (wygląd), ale nic nie mówi o charakterze tego tekstu. Innymi słowy: nie wiemy, czy tekst jest pogrubiony dlatego, że zawiera ważny termin, który powinien się wyróżniać, czy może dlatego, że autor strony chciał w tym miejscu po prostu wprowadzić czcionkę pogrubioną, bo akurat dobrze komponuje się z innymi elementami strony. Znaczniki semantyczne - określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie, ale nie jest to wymagane. Są to np.: Hn (tytuł), STRONG (mocne wyróżnienie), Q (cytat). Są wykorzystywane przez syntezatory mowy Przez roboty wyszukiwarek sieciowych