Tworzenie stron WWW. Kurs. Wydanie III

Transkrypt

1

2 Idź do Sps treśc Przykładowy rozdzał Katalog ksążek Katalog onlne Zamów drukowany katalog Twój koszyk Dodaj do koszyka Cennk nformacje Zamów nformacje o nowoścach Zamów cennk Czytelna Fragmenty ksążek onlne Kontakt Tworzene stron WWW. Kurs. Wydane III Autor: Radosław Sokół ISBN: Format: , stron: 300 Śmało wkrocz w śwat technolog nternetowych Poznaj podstawy tworzena stron WWW Naucz sę praktycznego stosowana języka HTML Dowedz sę, jak udostępnć swoją stronę w sec Internet wdarł sę przebojem w nasze codzenne życe. Trudno dzś znaleźć poważną frmę, która ne dysponowałaby choć prostą stroną WWW. Rzadko też można spotkać osobę, która ne korzystałaby z poczty elektroncznej lub któregoś z popularnych serwsów społecznoścowych. Wększość użytkownków ograncza sę jednak do konsumpcj treśc nternetowych, a tylko nelczn dzelą sę nm z nnym ludźm. Przeszkodą okazuje sę tu zwykle brak znajomośc odpowednch technolog, a przede wszystkm najbardzej podstawowego budulca stron WWW, którym jest język HTML. Jeśl chcesz dołączyć do osób aktywne korzystających z sec stać sę jednym z twórców atrakcyjnych treśc nternetowych, powneneś zacząć od sęgnęca po odpowedną lekturę. Doskonałym wyborem będze ksążka Tworzene stron WWW. Kurs. Wydane III. To podręcznk, z którego dowesz sę, jak stawać perwsze krok w języku HTML, czego potrzebujesz, aby tworzyć własne strony WWW, a także jak opublkować stronę w nternece. Krok po kroku poznasz strukturę dokumentów HTML, sposoby tworzena treśc tekstowych, odnośnków, tabel ramek, metody zameszczana grafk kodu JavaScrpt. Odkryjesz równeż tajnk posługwana sę arkuszam stylów oraz podstawy technolog AJAX. Struktura stron WWW podstawy ch tworzena Przegląd nezbędnych narzędz pracy Kodowane tekstu w języku HTML Defnowane odnośnków osadzane grafk Zastosowane tabel ramek Korzystane z języka JavaScrpt technolog AJAX Używane kaskadowych arkuszy stylów Publkowane stron w nternece Spraw, aby tworzene stron WWW ne mało przed Tobą tajemnc! Helon SA ul. Koścuszk 1c Glwce tel e-mal: helon@helon.pl Helon

3 Sps treśc Wstęp...7 Czym są HTML XHTML?...8 Jak wygląda znacznk HTML Wymagane oprogramowane sprzęt Przykłady Rozdzał 1. Nowa strona Uruchomene programu Notatnk Wprowadzane podstawowego kodu strony Ustalane tytułu strony 17 Zapsywane kodu strony na dysku twardym Otwerane zapsanej wcześnej strony 20 Wyśwetlane strony w przeglądarce Aktualzowane strony w przeglądarce Kopowane fragmentu kodu HTML Wklejane uprzedno skopowanego fragmentu kodu HTML Wycnane fragmentu kodu HTML Podsumowane Rozdzał 2. Treść strony WWW jej struktura logczna...25 Wprowadzane tekstu Deklarowane sposobu kodowana polskch znaków dakrytycznych Zapsane fragmentu tekstu czconką pogruboną Zapsane fragmentu tekstu kursywą Podkreślene fragmentu tekstu Twarde spacje Indeksy górne dolne Zapsywane fragmentu tekstu czconką neproporcjonalną Zapsywane wększego fragmentu tekstu czconką neproporcjonalną Nadawane znaczena fragmentom treśc strony Łamane tekstu wewnątrz akaptu Zmana rozmaru czconk Nagłówk rozdzałów sekcj tekstu Wstawane pozomej ln Lsta wypunktowana... 44

4 Zagneżdżane lsty Lsta numerowana Wstawane znaków specjalnych Podzał dokumentu na sekcje Podsumowane Rozdzał 3. Odnośnk...53 Tworzene odnośnka Tworzene odnośnka pocztowego Defnowane domyślnego tematu wadomośc pocztowej Defnowane etykety Tworzene odnośnka prowadzącego do etykety Tworzene odnośnka prowadzącego do etykety zadeklarowanej na nnej strone 60 Tworzene obszaru nawgacyjnego Podsumowane Rozdzał 4. Obrazy...65 Format GIF Format JPEG Poberane nstalowane programu IrfanVew Umeszczane obrazu na strone 80 Przekształcane obrazu w odnośnk Zameszczane mnatur zdjęć Obrazy w HTML Mapy odnośnków Usuwane obrazu Podsumowane Rozdzał 5. Tabele Jak w języku HTML opsuje sę tabelę? Tworzene tabel Zmana treśc komórk tabel Wstawane nowego wersza tabel Wstawane nowej kolumny tabel Scalane komórek tabel Dzelene scalonej komórk tabel Określane struktury logcznej tabel Podsumowane Rozdzał 6. Kaskadowe arkusze stylu Atrybuty stylu Styl wpsany Styl osadzony Styl dołączony Dlaczego kaskadowe? Jednostk CSS Kolory w CSS

5 Wstawane defncj stylu wpsanego Atrybuty tekstu Model pudełkowy CSS Kolor treśc tło elementu Obramowane elementu Margnesy Wyrównywane tekstu w akapce Elementy wpsane blokowe Pozycjonowane elementów strony Defnowane wyglądu elementu języka HTML Defnowane klas wyglądu elementu języka HTML Defnowane nezależnych klas stylu Zmana wyglądu odnośnków Indywdualne defnowane stylu elementu Uzależnane stylu elementu od mejsca jego występowana Tworzene zewnętrznego arkusza stylu Podsumowane Rozdzał 7. JavaScrpt Quz nternetowy Dynamczne menu Podsumowane Rozdzał 8. Serws nternetowy Strona główna serwsu Dynamczne tworzene stron Informacje o strone Weryfkowane poprawnośc kodu Podsumowane Zakończene Dodatek A Elementy języków HTML XHTML...211

6 Tworzene odnośnka Tworzene odnośnka pocztowego Defnowane domyślnego tematu wadomośc pocztowej Defnowane etykety Tworzene odnośnka prowadzącego do etykety Tworzene odnośnka prowadzącego do etykety zadeklarowanej na nnej strone WWW Tworzene obszaru nawgacyjnego Podsumowane 3 Odnośnk Odnośnk jeszcze do nedawna odróżnały strony WWW od wszystkch nnych dokumentów elektroncznych. Dzsaj możlwość deklarowana w prawe każdym type dokumentu odnośnków do dowolnych nnych materałów nezależne od ch umejscowena w globalnej sec zrewolucjonzowała śwat nformacj. Czy klkając odnośnk przenoszący Cę z jednego artykułu do drugego, możesz sobe wyobrazć, że kedyś korzystano z globalnej sec komputerowej bez ch pomocy? Odnośnk, nazywane czasem połączenam (lub lnkam od angelskego słowa lnk), są nesamowce użytecznym wygodnym narzędzem. Co cekawe, tworzy sę je wyjątkowo łatwo. Adresy nternetowe dzelą sę na: bezwzględne (np. podany adres od początku do końca (bezwzględne) defnuje położene strony WWW może być stosowany w takej samej postac, nezależne od strony WWW, na której go użyjemy, względne (np.../teksty/ops.html lub też nowy.html) podany adres defnuje położene strony WWW wyłączne względem aktualnej strony; użyce go na nnej strone WWW (umeszczonej w nnym katalogu tego samego serwera lub na nnym serwerze) unemożlw odszukane wskazywanego przez odnośnk dokumentu.

7 54 Tworzene odnośnka Adresów bezwzględnych należy używać wyłączne w przypadku odwoływana sę do nnego serwsu WWW, nepowązanego z tworzoną stroną. W ramach jednego serwsu zawsze należy używać adresów względnych. Dzęk temu adresy są krótsze, łatwej jest dokonywać reorganzacj serwsu (np. przenoszena poszczególnych jego częśc do folderów podrzędnych), a przede wszystkm unka sę zależnośc strony WWW od konkretnego serwera, zaś w raze zmany frmy obsługującej serwer (lub tylko nazwy serwera) konecznośc dokonywana zman w kodze. Adresy nternetowe często nazywane są też adresam URL lub URI od angelskch nazw Unform Resource Locator oraz Unform Resource Identfer (jednolty lokalzator zasobu). Tworzene odnośnka Odnośnk reprezentuje obekt o nazwe <a>. Będze sę on pojawał we wszystkch przykładach w tym rozdzale. 1. Umeść kursor w tym mejscu kodu, w którym ma sę pojawć odnośnk. Najczęścej odnośnk umeszcza sę wewnątrz akaptu tekstu, czyl wewnątrz elementu <p>. Mogą pojawać sę jednak w nnych elementach tekstowych byle ne bezpośredno na pozome dokumentu. 2. Wprowadź kod elementu <a>. 3. Rozbuduj element <a> o atrybut href zawerający zapsany w cudzysłowe docelowy adres URL odnośnka: <a href= adres-docelowy > Wprowadzając bezwzględny adres strony WWW, ne zapomnaj o jego poprawnym zapsanu. Adres bezwzględny mus zaczynać sę od nazwy protokołu nternetowego (w przypadku stron WWW: Jeżel adres zawera tylko nazwę serwera, mus kończyć sę znakem /. Pomnęce tych elementów a w szczególnośc prefksu określającego protokół dostępu do danych unemożlw funkcjonowane odnośnków w nektórych przeglądarkach WWW. 4. Wprowadź tekst, który ma być wyśwetlany jako odnośnk.

8 Tworzene odnośnka 55 Staraj sę unkać defnowana jako odnośnków sformułowań typu klknj tutaj ne należy to do dobrego stylu Zamknj element, wpsując </a> Zapsz wprowadzone zmany Uaktywnj okno przeglądark. 8. Zaktualzuj wyśwetlaną stronę. 9. Umeść wskaźnk myszy na utworzonym odnośnku klknj go. 10. Jeżel odnośnk został poprawne utworzony, w okne przeglądark pojaw sę po chwl docelowa strona WWW. 10

9 56 Tworzene odnośnka pocztowego Tworzene odnośnka pocztowego Najprawdopodobnej na stronach WWW neraz wdzałeś odnośnk, których klknęce natychmast otwerało okno Twojego programu pocztowego z nową, automatyczne zaadresowaną wadomoścą. Wbrew pozorom przygotowane takego odnośnka jest równe łatwe jak zbudowane zwykłego odnośnka prowadzącego do strony nternetowej. Umeszczene na strone odnośnka prowadzącego do Twojej skrzynk pocztowej zdecydowane podnese jakość tworzonej strony, gdyż umożlw jej czytelnkom zgłaszane pod Twom adresem uwag jej dotyczących. Ne zapomnaj zatem o tym szczególe najlepej zaś przygotuj sobe szablon pustej strony (na podstawe którego będzesz tworzył kolejne strony podrzędne serwsu) z utworzonym w jej stopce odnośnkem pocztowym. Użytkowncy Internetu coraz rzadzej korzystają z programów-klentów poczty elektroncznej zanstalowanych na komputerze uruchamanych w momence klknęca odnośnka pocztowego. Dla użytkownka systemu pocztowego dostępnego za pośrednctwem strony WWW odnośnk pocztowy ne ma prawe żadnej wartośc: co najwyżej może go skopować do schowka wkleć w pole adresu docelowego. 1. Umeść kursor w mejscu kodu, w którym ma sę pojawć odnośnk pocztowy. 2. Wprowadź kod elementu <a>. 3. Rozbuduj element <a> o atrybut href zawerający zapsane w cudzysłowe wyrażene malto: oraz docelowy adres pocztowy: <a href= malto:adres-pocztowy > 4. Wprowadź tekst, który ma być wyśwetlany jako odnośnk. Może to być np. Twoje mę nazwsko Zamknj element, wpsując </a>. 6. Zapsz wprowadzone zmany

10 Defnowane domyślnego tematu wadomośc pocztowej Uaktywnj okno przeglądark. 8. Zaktualzuj wyśwetlaną stronę. 9. Klknj utworzony odnośnk, aby przetestować jego dzałane sprawdzć, czy program pocztowy otworzy do edycj prawdłowo zaadresowaną wadomość pocztową. Pamętaj, że zameszczene adresu pocztowego na strone WWW dostępnej w Internece jest równoznaczne z ujawnenem go wszystkm osobom rozsyłającym hurtowo nechcane wadomośc elektronczne (tzw. spam). Jeśl zdecydujesz sę dać czytelnkom Twojej strony możlwość kontaktowana sę z Tobą, zadbaj o zabezpeczene swojej skrzynk pocztowej przed napływem spamu. To, w jak sposób zachowa sę system operacyjny po klknęcu odnośnka, zależy od zanstalowanego programu pocztowego. Jeżel na danym komputerze ne został skonfgurowany (lub wręcz zanstalowany) program pocztowy, użytkownk ujrzy po klknęcu jedyne okno dalogowe z komunkatem błędu. Defnowane domyślnego tematu wadomośc pocztowej Jeśl chcesz jeszcze bardzej zautomatyzować proces wysyłana wadomośc pocztowej, możesz bezpośredno w kodze odnośnka podać domyślny temat tworzonej wadomośc. 1. Umeść kursor wewnątrz wartośc atrybutu href znacznka <a>, zaraz za wprowadzonym docelowym adresem pocztowym. 2. Wprowadź tekst?subject= oraz domyślną treść tematu wadomośc pocztowej: <a href= malto:adres-pocztowy?subject=temat wadomosc pocztowej > 3 3. Zapsz wprowadzone zmany. 3 2

11 58 Defnowane etykety Staraj sę zapsywać domyślne tematy wadomośc pocztowych wyłączne z wykorzystanem znaków alfabetu łacńskego, bez stosowana polskch znaków dakrytycznych. Pozwol C to unknąć problemów zwązanych z różnorodnoścą standardów kodowana znaków. Defnowane etykety Ne zawsze nformacja, do której należy zapewnć szybk dostęp za pomocą odnośnka, znajduje sę na nnej strone WWW. Często przydaje sę możlwość zdefnowana odnośnka przenoszącego czytelnka do nnego mejsca tej samej strony WWW. Perwszym krokem przy tworzenu takego odnośnka jest zdefnowane etykety (zwanej też czasem zakotwczenem od jej angelskej nazwy anchor), czyl punktu docelowego dla odnośnków. Najczęstszym zastosowanem etyket prowadzących do nch odnośnków są odnośnk umożlwające czytelnkow powrót na początek strony. Stosuje sę równeż czasem spsy treśc, umożlwające przejśce z początku strony od razu do właścwej sekcj dłuższego dokumentu. Najbardzej logcznym przydatnym zastosowanem zakotwczeń jest przenoszene czytelnka od razu do właścwego fragmentu długego artykułu, wyjaśnającego kwestę, do której odnośnk został klknęty Umeść kursor wewnątrz kodu znacznka otwerającego element, do którego ma prowadzć etyketa. 2. Dodaj do znacznka atrybut d jako jego wartość wprowadź unkatową nazwę etykety: d= nazwa-etykety Nazwa etykety pownna składać sę wyłączne z lter alfabetu łacńskego ne może zawerać znaków spacj. Zastosowane nnych znaków może spowodować, że odnośnk prowadzące do etykety ne będą funkcjonować.

12 Tworzene odnośnka prowadzącego do etykety 59 6 Tworzene odnośnka prowadzącego do etykety 1. Umeść kursor w tym mejscu kodu, w którym ma sę pojawć odnośnk. 2. Wprowadź kod elementu <a>. 3. Rozbuduj element <a> o atrybut href zawerający znak # oraz zapsaną w cudzysłowe nazwę utworzonej wcześnej docelowej etykety: <a href= #etyketa-docelowa > Wprowadź tekst, który ma być wyśwetlany jako odnośnk. 5. Zamknj element, wpsując </a>. 6. Zapsz wprowadzone zmany Uaktywnj okno przeglądark. 8. Zaktualzuj wyśwetlaną stronę. 9. Klknj utworzony odnośnk, by przetestować jego dzałane.

13 60 Tworzene odnośnka prowadzącego do etykety zadeklarowanej na nnej strone WWW Do adresu strony dopsana została nazwa etykety 11. a zawartość okna przeglądark przesunęła sę tak, by wdoczny stał sę fragment strony oznaczony w kodze etyketą. 11 Pamętaj, że odnośnk prowadzące do etyket będą dzałać tylko wtedy, gdy etyketa, do której prowadz odnośnk, umeszczona jest w mejscu strony newdocznym w danym momence w okne przeglądark. Ne zdzw sę węc, jeśl po utworzenu bardzo krótkej strony testowej, zawerającej etyketę prowadzący do nej odnośnk, skorzystane z odnośnka ne da żadnego efektu mechanzm ten został przystosowany do nawgowana po wyjątkowo obszernych stronach WWW. Tworzene odnośnka prowadzącego do etykety zadeklarowanej na nnej strone WWW Etykety prowadzące do nch odnośnk najłatwej wykorzystać do uproszczena nawgacj w ramach jednej strony WWW. Jednak odnośnk może równeż prowadzć do etykety znajdującej sę na zupełne nnej strone! Wykorzystując tę możlwość języka HTML, umożlwsz czytelnkow Twojego serwsu WWW przechodzene do określonego fragmentu dowolnej strony za pomocą jednego tylko klknęca odnośnka. 1. Umeść kursor w tym mejscu kodu, w którym na strone WWW ma sę pojawć odnośnk. Pamętaj odnośnk mus znajdować sę w nnym plku nż etyketa. Krótko mówąc, mussz przygotować dwe strony WWW (dwa plk.html): jedną z etyketą (jak w poprzednm ćwczenu), a drugą z odnośnkem (przygotowywana tutaj).

14 Tworzene odnośnka prowadzącego do etykety zadeklarowanej na nnej strone WWW Wprowadź kod elementu <a>. 3. Rozbuduj element <a> o atrybut href. 4. Wprowadź wewnątrz wartośc atrybutu adres strony WWW, do której ma prowadzć odnośnk. Adresem docelowym może być po prostu nazwa drugego plku.html oba plk muszą sę w takm przypadku znajdować w tym samym folderze na dysku. To najprostsza postać odnośnka o adrese względnym. 5. Wpsz znak #, oddzelający adres strony od nazwy etykety, wprowadź nazwę etykety docelowej Wprowadź tekst, który ma być wyśwetlany jako odnośnk. 7. Zamknj element, wpsując </a>. 8. Zapsz wprowadzone zmany. 9. Uaktywnj okno przeglądark. 10. Zaktualzuj wyśwetlaną stronę lub otwórz plk strony WWW zawerającej utworzony przed chwlą odnośnk Klknj utworzony odnośnk, by przetestować jego dzałane. 11

15 62 Tworzene obszaru nawgacyjnego W polu adresu pojaw sę adres docelowej strony wraz z nazwą wybranej etykety 13. a zawartość okna przeglądark zostane przesunęta tak, by wdoczny stał sę fragment strony oznaczony w kodze etyketą. Tworzene obszaru nawgacyjnego Język HTML5 wprowadza nowy element nawgacyjny, służący grupowanu odnośnków o podobnej funkcjonalnośc. Jeżel masz zamar stworzyć na swojej strone WWW blok odnośnków służących nawgacj mędzy kolejnym stronam serwsu lub dzałam portalu albo prowadzących do polecanych przez Cebe nnych stron WWW, warto zawrzeć go w bloku nawgacyjnym. 1. Umeść kursor w mejscu kodu, w którym ma sę pojawć na strone blok nawgacyjny łączący odnośnk o podobnym celu. 2. Otwórz element bloku nawgacyjnego, wpsując znacznk <nav>. 3. Wprowadź kolejne odnośnk należące do tego bloku Zamknj element bloku nawgacyjnego, wpsując znacznk </nav>. 5. Zapsz wprowadzone zmany.

16 Podsumowane Uaktywnj okno przeglądark. 7. Zaktualzuj wyśwetlaną stronę. 8. Blok nawgacyjny prezentuje stworzone odnośnk. Ne przejmuj sę zbytno mało estetyczną formą grafczną bloku nawgacyjnego: w momence opanowana mechanzmu kaskadowych arkuszy stylu nadane mu dowolnej formy będze zdecydowane łatwejsze nż bez wykorzystana elementu <nav>. Podsumowane Prawdłowo skonstruowany system odnośnków może znaczne poprawć jakość Twojego serwsu nternetowego. Jeśl dłuższe strony WWW wyposażysz w prosty sps treśc utworzony z odnośnków prowadzących do fragmentów tekstu, a na końcu każdego fragmentu umeścsz dyskretny odnośnk umożlwający powrót do początku strony oraz do głównej strony serwsu, nawgacja będze znaczne przyjemnejsza efektywnejsza. Ne zapomnaj przy tym o korzystanu z bloków nawgacyjnych <nav>, wprowadzonych w języku HTML5, gdyż ch obecność zauważalne uprośc późnejsze formatowane dokumentu z wykorzystanem kaskadowych arkuszy stylu. Postaraj sę przećwczyć najważnejsze zagadnena dotyczące odnośnków: Utwórz długą stronę WWW (możesz ją wypełnć bezsensownym zborem znaków), podzel ją na fragmenty opatrzone tytułam, a następne wykorzystując etykety odnośnk opracuj na początku strony menu prowadzące do poszczególnych częśc tekstu. Przygotuj stronę zawerającą odnośnk prowadzące do serwsów nternetowych najczęścej przez Cebe odwedzanych. Jeśl dobrze ją przygotujesz, możesz nawet pokusć sę o wykorzystane jej jako Twojej strony domowej rozpoczynane surfowana po Sec właśne od nej.

17