Tworzenie stron WWW w praktyce [2 ed.] [PDF]

Zitiervorschau

Bartosz

Danows ki

tlą\

H e lio n

m

Spis treści W s tę p ................................................................................................................. 9 Uwagi techniczne ...........................................................................................11 Rozdział 1.

Podstawowe informacje................................................................................ 13 Czym jest internet? .................................................................................................................. 13 Czym jest strona WWW, a czym witryna?............................................................................14 Dlaczego warto prowadzić własną stronę WWW? .............................................................. 15 Oprogramowanie potrzebne przy tworzeniu stron WWW a dołączona płyta CD ............17 Edytory tekstu ....................................................................................................................18 Edytory grafiki ...................................................................................................................19 Programy do przygotowywania grafiki sieciowej..........................................................19 Etykieta i prawo autorskie ...................................................................................................... 20 Wybór usługodawcy, u którego zamieścimy stronę W W W ................................................21 Własna domena........................................................................................................................ 23

Rozdział 2. Język XHTML i HTML sprawcą całego zamieszania ................................25 Znacznik i jego konstrukcja.................................................................................................... 28 Podstawowe różnice pomiędzy HTML i XHTML...............................................................29 Zasada 1. Nigdy nie krzyżuj znaczników....................................................................... 29 Zasada 2. Zawsze zamykaj wszystkie znaczniki............................................................30 Zasada 3. Wpisując znaczniki i atrybuty, zawsze używaj małych liter ......................30 Zasada 4. Używaj cudzysłowów dla wszystkich atrybutów ........................................ 30 Zasada 5. Przypisuj wartości dla pustych atrybutów ....................................................31 Zasada 6. Uważaj ze znakami specjalnymi w skryptach ............................................. 31 Struktura dokumentu ...............................................................................................................31 Określamy zgodność ze specyfikacją..............................................................................31 Ramy dokumentu XHTML ..............................................................................................32 Nagłówek strony ...............................................................................................................33 Ciało dokumentu ...............................................................................................................39 Komentarze ....................................................................................................................... 40 Tworzenie szkieletu strony za pomocą edytora kED ....................................................40 Tekst ......................................................................................................................................... 42 Nagłówki ............................................................................................................................42 Akapity...............................................................................................................................43 Cytaty .................................................................................................................................44 Indeks górny i dolny......................................................................................................... 46 Łamanie wierszy ...............................................................................................................46 Wyróżnianie tekstu............................................... 47

4

Tworzenie stron WWW w praktyce

Twarda spacja...................................................................................................................47 Znacznik D IV ...................................................................................................................48 Formatowanie tekstu za pomocą edytora kE D ............................................................. 48 L isty ......................................................................................................................................... 50 Lista wypunktowana .......................................................................................................50 Lista numerowana ........................................................................................................... 50 Lista definicji....................................................................................................................51 Listy zagnieżdżone.......................................................................................................... 51 Tworzenie list za pomocą edytora kED ........................................................................52 Grafika na stronie WWW ......................................................................................................53 Osadzanie grafiki za pomocą edytora kED ...................................................................56 Hiperłącza................................................................................................................................58 Hiperłącza tekstowe ........................................................................................................59 Hiperłącza graficzne........................................................................................................ 61 Mapy odsyłaczy................................................................................................................62 Kotwice ............................................................................................................................ 65 Adresy względne i bezwzględne ....................................................................................66 Tworzenie hiperłączy za pomocą edytora kED ............................................................ 67 Tabele ...................................................................................................................................... 69 Proste tabele ..................................................................................................................... 72 Wymiarowanie tabel ....................................................................................................... 73 Tabele niesymetryczne.................................................................................................... 76 Zagnieżdżanie tabel......................................................................................................... 77 Dodatkowe elementy tabeli ............................................................................................ 78 Tworzenie tabel za pomocą edytora kED ..................................................................... 79 Formularze...............................................................................................................................84 Pola typu input .................................................................................................................84 Pole typu select.................................................................................................................86 Pole typu textarea .............................................................................................................87 Przesyłanie treści formularza ......................................................................................... 87 Ramki....................................................................................................................................... 88

Rozdział 3.

Grafika sieciowa ........................................................................................... 93 Format...................................................................................................................................... 95 GIF .................................................................................................................................... 95 JPG ...................................................................................................................................110 P N G ..................................................................................................................................113 Inne metody redukcji rozmiaru zdjęć i grafiki ............................................................113 Pozostałe formaty publikacji grafiki na stronie WWW ........................................... 116 Wygładzanie krawędzi — antyaliasing........................................................................117 Tworzenie gotowych rozwiązań na potrzeby stron W W W .............................................. 120 Prostokątne i owalne przyciski......................................................................................120 Przyciski o nieregularnych kształtach ..........................................................................126 Cięcie grafiki na mniejsze elementy ............................................................................129 Mapa odsyłaczy.............................................................................. :.............................. 132

Rozdział 4.

Kaskadowe arkusze stylów .......................................................................133 Wprowadzenie .......................................................................................................................134 Różnice pomiędzy formatowaniem za pomocą XHTML, HTML i C S S ................. 134 Umieszczanie stylów w dokumencie ...........................................................................135 Jednostki miar i nazewnictwo kolorów stosowane w CSS ........................................137 Budowa stylu .................................................................................................................. 142 Dziedziczenie i kaskadowość to klucz do potęgi C S S ............................................... 157

Spis treści

5

Formatowanie wyglądu tekstu.............................................................................................. 160 Wyrównanie tekstu..........................................................................................................160 Pionowe wyrównanie ......................................................................................................161 Wcięcie pierwszego wiersza akapitu............................................................................. 162 Odstępy — wiersze, wyrazy, litery ............................................................................. 162 Dekoracja tekstu .............................................................................................................. 163 Przekształcanie — małe i duże litery ............................................................................164 Kontrola pustej przestrzeni............................................................................................. 165 Wnioski ............................................................................................................................ 166 Formatowanie wyglądu czcionki..........................................................................................166 Rodzaj czcionki ............................................................................................................... 167 Rozmiar ............................................................................................................................ 168 Waga czcionki ................................................................................................................. 170 Styl czcionki.....................................................................................................................171 Wariant czcionki ............................................................................................................. 172 Wnioski ............................................................................................................................ 172 Formatowanie wyglądu list .................................................................................................. 173 Typ listy ............................................................................................................................ 173 Własny punktor graficzny .............................................................................................. 175 Pozycjonowanie listy względem punktora.......................................:........................... 175 Wnioski ............................................................................................................................ 176 Kolor i tło poszczególnych elementów ............................................................................... 176 Kolor................................................................................................................................. 177 Tło .....................................................................................................................................178 Powielanie i zatrzymanie tła .......................................................................................... 179 Pozycjonowanie graficznego tła .....................................................................................181 Wnioski .......................................................................................................................... 183 Marginesy i dopełnienie ........................................................................................................184 Marginesy zewnętrzne.....................................................................................................184 Marginesy wewnętrzne — dopełnienie.......................................................................186 Wnioski ............................................................................................................................ 187 Obramowanie elementów ......................................................................................................189 Styl obramowania............................................................................................................ 190 Szerokość obramowania................................................................................................. 192 Kolor obramowania.........................................................................................................193 Wnioski ............................................................................................................................ 194 Pozycjonowanie elementów ................................................................................................. 196 Określanie pozycji...........................................................................................................198 Wymiarowanie elementów............................................................................................. 198 Pływanie i tamowanie elementów.................................................................................200 Kolejność nakładanych elementów...............................................................................202 Wnioski ............................................................................................................................203 Tworzenie arkusza stylów za pomocą edytora k E D .......................................................... 203

Rozdział 5.

Praktyczny projekt. Moja strona domowa .............................................. 207 Dlaczego jest mi potrzebna strona WWW?........................................................................ 207 Gromadzę materiały ..............................................................................................................209 Struktura witryny...................................................................................................................210 Przygotowuję poszczególne elementy witryny ..................................................................212 Strona główna..................................................................................................................213 Sekcja „Książki” .............................................................................................................228 Sekcja „Artykuły” .......................................................................................................... 235 Sekcja „O mnie” ..............................................................................................................236

6

Tworzenie stron WWW w praktyce

Sekcja „Przyjazne strony” ............................................................................................ 236 Sekcja „Sklep” ................................................................................................................238 Sekcja „Kontakt” ............................................................................................................240 Nazwy plików ....................................................................................................................... 242 Testowanie gotowego projektu........................................................................................... 243 Testy w różnych przeglądarkach..................................................................................243 Testy rozdzielczości ...................................................................................................... 244 Testy zgodności kodu ze specyfikacją ........................................................................ 247 Wnioski.................................................................................................................................. 253

Rozdział 6.

Praktyczny projekt. Strona firm ow a........................................................ 255 Po co i dla kogo ta strona?................................................................................................... 255 Zbieramy materiały...............................................................................................................256 Struktura strony .................................................................................................................... 257 Tworzymy poszczególne podstrony ...................................................................................257 Szablon strony................................................................................................................ 258 Strona głów na.................................................................................................................266 Strona pojedynczego w pisu.......................................................................................... 269 Strona artykułu lub testu ...............................................................................................269 Strona FAQ .................................................................................................................... 271 Strona „redakcja” ...........................................................................................................271 Strona „kontakt” .............................................................................................................274 Testowanie gotowego projektu............................................................................................274 Wnioski.................................................................................................................................. 274

Rozdział 7.

Praca z szablonami..................................................................................... 275 Czym są szablony? ............................................................................................................... 275 Zalety pracy z szablonami ................................................................................................... 276 Jak to działa? .........................................................................................................................276 Skąd można pobrać gotowe szablony?...............................................................................281 W nioski.................................................................................................................................. 282

Rozdział 8.

Darmowe usługi dostępne w sieci ...........................................................283 Statystyki ............................................................................................................................... 283 Instalacja darmowej wersji statystyk............................................................................285 Dostępne informacje ..................................................................................................... 288 Licznik................................................................................................................................... 295 Status usług Gadu-Gadu oraz Tlen na stronie W W W ...................................................... 296 Sonda ..................................................................................................................................... 298 Biuletyn informacyjny..........................................................................................................298 Wnioski.................................................................................................................................. 305

Rozdział 9.

Przydatne skrypty, których można użyć na stronie WWW .................. 307 Nowe okno.............................................................................................................................307 . Zamykanie otwartego okna ................................................................................................. 308 Rollover ................................................................................................................................. 308 Drukowanie zawartości strony ............................................................................................308 Zmiana zawartości paska statusu........................................................................................ 309 Dodawanie strony do „Ulubionych” ................................................................................... 309 Strona startowa ..................................................................................................................... 309 Zmiana tła całej komórki tabeli ...........................................................................................310 Wczytywanie arkusza w zależności od używanej przeglądarki ...................................... 311

Spis treści

7

Rozdział 10. Publikacja i utrzymanie strony ..................................................................313 Wybór serwera — hosting.................................................................................................... 313 Zakładanie konta.................................................................................................................... 316 Publikacja strony ................................................................................................................... 319 Rejestracja domeny................................................................................................................ 322

Rozdział 11. Promocja serwisu ........................................................................................ 327 Popularne sposoby promocji strony .................................................................................... 327 Podpis poczty elektronicznej......................................................................................... 327 Grupy dyskusyjne............................................................................................................328 Listy mailingowe.............................................................................................................328 Inne formy promocji....................................................................................................... 328 Pozycjonowanie stron w wyszukiwarkach......................................................................... 329 Podstawy ..........................................................................................................................329 Prawidłowa indeksacja strony....................................................................................... 331 Zdobywanie pozycji ....................................................................................................... 336 Wnioski................................................................................................................................... 341

Dodatek A ...........................................................................................................................343 Podsumowanie ......................................................................

367

Skorowidz ..................................................................................................... 369

Wstęp Internet na dobre zagościł w domach wielu Polaków. Dzisiaj nie jest niczym nadzwy­ czajnym robienie zakupów za jego pośrednictwem, rezerwacja biletów, korzystanie z usług bankowych, oglądanie telewizji i słuchanie radia czy też nawiązywanie połą­ czeń głosowych i wideo. Globalna sieć stała się czymś tak oczywistym i niezbędnym jak prawo jazdy czy telefon komórkowy. Każdy świadomy członek społeczeństwa może, a w niektórych przypadkach powinien mieć własną stronę WWW. Osoby prywatne dzięki intemetowi m ogą dzielić się swoimi zainteresowaniami, natomiast firmy powinny traktować globalną sieć jako miejsce, w któ­ rym obowiązkowo powinny się profesjonalnie prezentować i świadczyć za jej pomocą przynajmniej część swoich usług. Projektowanie stron WWW w ciągu ostatnich lat bardzo się zmieniło i ciągle ewoluuje. Kiedyś strony tworzyli naukowcy w celu prezentacji własnych osiągnięć pracowni­ kom innych uczelni. Ze względu na spore ograniczenia intemetu oraz ubogie możli­ wości języka HTML publikacje te były mało interesujące od strony wizualnej. Charak­ teryzowały się dość prostą konstrukcją— bloki tekstu rozdzielano za pomocą poziomych linii. Strony mogły zawierać listy wypunktowane lub numerowane oraz nagłówki. W miarę pojawiania się kolejnych wersji języka HTML i XHTML oraz rozwoju sieci strony wyglądały coraz lepiej. Obecnie witryny to w bardzo wielu przypadkach praw­ dziwe dzieła sztuki internetowej, tworzone z wykorzystaniem najnowszych rozwiązań, takich jak Ajax, Adobe Flash czy też bazy danych i języki skryptowe działające po stronie serwera. Przygotowanie strony WWW nie jest rzeczą skomplikowaną. Śmiem twierdzić, że stronę WWW może zrobić każdy, kto będzie miał odrobinę chęci. Niestety, strona stronie nierówna. Wielu początkujących adeptów popełnia koszmarne błędy i raczy świat mniej­ szymi lub większymi potworkami. Dlatego zdecydowałem się odświeżyć niniejszą książkę i przygotować jej drugie wydanie. Książka pozwoli Ci zdobyć solidne podstawy, dzięki którym będziesz mógł tworzyć własne witryny internetowe. Czytając kolejne rozdziały, poznasz najnowszą odsłonę języka XHTML 1 oraz CSS 2, które są niezbędne do tworzenia stron WWW.

10

Tworzenie stron WWW w praktyce

W kolejnych rozdziałach przedstawiam proces tworzenia dwóch kompletnych stron WWW — prywatnej i firmowej. Dowiesz się, jakimi kryteriami należy się kierować przy doborze konta — wirtualnego serwera, niezbędnego do publikacji gotowego pro­ jektu. Poznasz tajniki przygotowania grafiki na potrzeby intemetu i nauczysz się pra­ cować z gotowymi, darmowymi szablonami dostępnymi w sieci. Nie nauczę Cię jednak, jak pisać własne skrypty, ponieważ wiedzę tę znajdziesz w innych książkach — uważam, że do przygotowania dobrze wyglądającej strony nie jest potrzebna znajomość PHP, gdyż wszystko, co jest konieczne, możemy znaleźć w sieci. Nauczysz się zatem, w jaki sposób korzystać z dobrodziejstw intemetu. Wydaje mi się, że dzięki temu książka będzie bardziej przydatna dla szerszego grona Czytelników. Jeżeli po jej przeczytaniu wykonasz dobre strony i uznasz, że zawarte tutaj informacje to zbyt mało, by sprostać Twoim już sprecyzowanym wymaganiom, będziesz mógł świadomie sięgnąć po inne, bardziej szczegółowe opracowania dostępne na polskim rynku. Moim założeniem było praktyczne przedstawienie tworzenia stron WWW, dlatego w książce nie ma opisów o charakterze czysto teoretycznym — ich miejsce zajęły konkretne porady i rozwiązana. Uzupełnieniem całości jest płyta CD, na której umieściłem niezbędne narzędzia wy­ korzystywane przy tworzeniu stron WWW. Dobierając programy, starałem się wybierać narzędzia, które są bezpłatne i można legalnie używać ich w domu. Wiele z progra­ mów znajdujących się na płycie zostało wykorzystanych i omówionych w niniejszej książce. Jeżeli podczas lektury lub po jej zakończeniu będziesz miał jakieś pytania albo po prostu postanowisz podzielić się uwagami na temat książki, możesz to zrobić za po­ średnictwem mojej strony WWW lub poczty e-mail. Odpowiednie adresy znajdują się poniżej.

Bartosz Danowski [email protected] http://danowski.pl

Uwagi techniczne Zwartość płyty CD-ROM Płyta dołączona do tej książki zawiera komplet oprogramowania przydatnego do two­ rzenia stron WWW. Aplikacje w większości są wersjami darmowymi (freeware), choć znajdują się tam również narzędzia komercyjne (wersje trial). Pamiętaj, że w przypadku każdego programu autor sprecyzował warunki jego używania. Może to być zgoda na używanie programu w celach edukacyjnych lub zupełny brak ograniczeń. Zapoznaj się z warunkami i używaj programu zgodnie z licencją! Pragnę nadmienić, że internet jest pełny przeróżnych darmowych programów, które są odpowiednikami płatnych aplika­ cji, dlatego tworząc strony WWW, nie musisz pracować „na piratach” .

Uwaga

W książce Darmowe oprogramowanie. Leksykon (http://helion.pl/ksiazki/daropl.htm ) znajdziesz opis kilkuset darmowych programów. Wszystkie aplikacje zostały podzie­ lone na grupy tematyczne i uzupełnione o opis możliwości oraz informacje o tym, które z komercyjnych programów mogą zastąpić.

Płytę CD podzieliłem na następujące działy: ♦ Oprogramowanie — zbiór przydatnych programów (edytory XHTML, narzędzia graficzne, przeglądarki, serwery WWW i PHP) ♦ Specyfikacje — zbiór specyfikacji XHTML (1.0, 1.1), HTML (4.01) oraz CSS (1,2.1) ♦ Szablony — przykładowe szablony stron WWW ♦ Przykłady — kilka przykładów do zagadnień omawianych w książce

Tworzenie stron WWW w praktyce

12

Oznaczenia stosowane w książce Informacje zawarte w książce są odpowiednio sformatowane, dzięki czemu czytanie całości jest znacznie wygodniejsze. Oczywiście, na początku warto w skrócie przed­ stawić, jakie formy zapisu przyjąłem na następnych stronach. Jeżeli odwołuję się do nazwy pliku, to tekst będzie miał następującą postać: plik.html. W sytuacji, gdy pragnę zwrócić uwagę na pewne elementy, stosuję pogrubienie. Kolej­ ną form ą zapisu używ aną w tej książce jest tekst wyróżniony. Będę go używał wtedy, gdy uznam pewne elementy za szczególnie ważne lub będę odwoływał się do menu programów. W szystkie odnośniki do stron internetowych będą miały następującą postać: http:// www.helion.pl. W książce znajdziesz sporo listingów, przeróżnych przykładów kodu XHTML i HTML i taki tekst będzie wyglądał podobnie do następującego przykładu:



/>

/> 2.0.3"

/>

leave

< ! —

t his

for stats

—

>

/>

/>

content="5

days"

/>

/>

href="/wydruk.css"

type="text/css"

type="application/rss+xml"

rel="pingback"

/>

h r e f = " h t t p : / / d a n o w s k i .p i / w p - c o n t e n t / t h e m e s / d a n o w s k i / s t y l e . c s s "

href*"ht t p : / / d a n o wski.pl/feed/ " d i n k

Danowski"

content*"global"

content*"follow,

media="screen"

literatura

B a r c z e n t e w i c z ”

content*"WordPress

name*"language"

rel="Stylesheet"

,

ch a rset=UTF-8"

/>

c o n t e n t * "Bartosz

href="htt p : / / d a n o w s ki.pl / x m l r p c . p h p "

/>



Powyższy kod w prosty sposób możemy doprowadzić do postaci zgodnej z wymaga­ niami całego projektu strony. W ystarczy dla użytego nagłówka wyłączyć marginesy i dopełnienie. Następnie dla znacznika

0d te j chw ili Nero powinno prawidłowo działać w naszym rodzimym języku.

ABC sam optymalizuję komputer to przystępny poradnik dla osób, które chcą możliwie n a jle p ie j przygotować swojego peceta do wydajnej i komfortowej pracy. Dzięki te j książce nauczysz się skutecznie optymalizować działanie komputera, odpowiednio konfigurując ustawienia BIOS-u. systemu operacyjnego i używanych programów. Zobaczysz, jak podzielić dyski i rozplanować przechowywanie danych. Dowiesz się także, jak zwiększyć bezpieczeństwo systemu i które elementy komputera warto wymienić, je ś li zawiodą inne sposoby poprawy wydajności,

Czytaj całość



Jedyną zm ianą w arkuszu stylów jest dodanie poleceń określających oblewanie ob­ razka tekstem oraz utworzenie wokół niego ramki. Odpowiednie wpisy powinny wy­ glądać mniej więcej tak: div.wpis img { f l o a t:rig h t: border:sol id 2px s ilv e r: padding:2px; margin:5px;

Pierwsza z deklaracji określa sposób, w jaki obrazek zostanie oblany tekstem. W tym przypadku obrazek znajdzie się z prawej, a tekst z lewej strony. Kolejne wpisy defi­ niują wygląd ramki oraz margines i dopełnienia. Ostateczny efekt jest widoczny na rysunku 5.11. Rysunek 5.11. P rzykład wykazu książek — krótki opis p lus okładka książki

Bartosz Danowski lit e r a t u ru in f o r m a t y c z n a ! Strona glowo j j! Książki |j Artykalyi O ma ii

--------- 1

ABC sam optymalizuje komputer to przystępny poradnik aw«*in D«l»: i: .V200' Komiourr' 0 Dzięki książce Pozycjonowanie i optymalizacja stron WWW. Ja k to się robi zrozumiesz, jak działają wyszukiwarki, jak wpływa to na kolejność wyświetlania odnośników do znalezionych materiałów a przede wszystkim jak użyć tej wiedzy do tworzenia stron, które będą zajmowały wysokie pozycje w wynikach ; wyszukiwania Poznasz także techniki umoźiwiayące poprawę finkcjonaioości witryny oraz dodatkow e sposoby jej promowana, dzięki czemu liczba osób odwiedzających strony Twojej firm\ wzrośnie, podobnie jak generowane przez nią zyski

«mWW W

Czytaj cafość

Rnrlo-.r Danowski 5 Wszystkie prawa ustrzeżone

Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa

231

Z nieco bardziej skomplikowanym rozwiązaniem mamy do czynienia na podstronie konkretnej książki (rysunek 5.12). Również tym razem cały kod powinien znaleźć się w głównym kodzie strony, pomiędzy znacznikami Strona domowa książki
• Spis tre ści< /a > < /li> ISBN: 978-83-246-1037-2
• Format: B5. stron: 384
• Data wydania: 2007-07-12
• Fragment książki w PDF

Dodaj do koszyka

• Jak zapewnić stabilne funkcjonowanie komputera?
Jak przyspieszyć działanie programów?
• Jak poprawić komfort pracy w systemie operacyjnym?

W wielu przypadkach komputer po wymianie podzespołów i skonfigurowaniu nadal nie działa tak, jak użytkownik oczekiwał. Na pozór najprostszym wyjściem je s t wtedy zakup nowego sprzętu, jednak je s t to kosztowne rozwiązanie i . co gorsza, często nie gwarantuje spodziewanych efektów. Na szczęście is tn ie je lepszy i tańszy sposób. Współczesne komputery i systemy operacyjne dają wiele możliwości w zakresie samodzielnej poprawy szybkości oraz stabilności działania programów, a także zwiększania komfortu i efektywności pracy.

ABC sam optymalizuję komputer to przystępny poradnik dla osób, które chcą możliwie n a jle p ie j przygotować swojego peceta do wydajnej i komfortowej pracy. Dzięki te j książce nauczysz się skutecznie optymalizować działanie komputera, odpowiednio konfigurując ustawienia BIOS-u. systemu operacyjnego i używanych programów. Zobaczysz, jak podzielić dyski i rozplanować przechowywanie danych. Dowiesz się także, jak zwiększyć bezpieczeństwo systemu i które elementy komputera warto wymienić, je ś li zawiodą inne sposoby poprawy wydajności,

• Ustawianie opcji BI0S-u
• Dobór i konfigurowanie sterowników
• Efektywne zarządzanie systemem plików
• Optymalizowanie systemu operacyjnego Windows XP/Vista
• Zapewnianie bezpieczeństwa systemu
• Archiwizowanie danych w systemie Windows Windows XP/Vista
• Podkręcanie procesora, karty graficznej i pamięci
• Wymiana przestarzałego sprzętu
• Stosowanie przydatnych programów narzędziowych

• ABC tworzenia stron WWW. Wydanie drugie
• ABC sam naprawiam komputer
• Szuman - strona prywatna
Maja Kierzkowska
• TwojePC.pl - Twoje źródło informacji o Sprzęcie
• Grzegorz Harasimowicz
Portal CDRinfo.pl - źródło wiedzy o nagrywaniu p ły t CD/DVD Dziecko w sieci< /a>< /li>
• MONTER - Tłumaczenia programów
• SafeLock - program do zabezpieczeń CD


238

Tworzenie stron WWW w praktyce


• eppu - Informatyka i multimedia Przemysław Danowski. outsourcing IT
• Poradnik webmastera - Paweł Wimmer

• ISBN: 978-83-246-1037-2

  Format: B5. stron: 384

  Data wydania: 2007-07- 12

  Cena: 39.00 zł

  Dodaj do koszyka

  
  
  2 40
  
  Tworzenie stron WWW w praktyce
  
  Za pom ocą stylów w pierwszej kolejności ustalamy dla całości szerokość oraz wyso­ kość, kolor tła oraz rozmieszczenie poszczególnych elementów. W praktyce możemy do tego użyć kodu widocznego poniżej. div#sklep { border:sol id lpx s ilv e r: background-color:#D7D5D5: margin:10px: padding:10px;
  
  Dalej należy wymusić, aby tekst oblał obrazek z prawej strony. Przy okazji określimy odstęp tekstu od obrazka. Odpowiedni kod może wyglądać tak: di v#sklep i mg { flo a t : le f t : border:solid lpx s ilv e r: padding:5px: }
  
  W tej chwili pozostało już tylko zająć się odpowiednim formatowaniem tekstu. Roz­ myślnie skorzystałem z oddzielnych akapitów, aby uzmysłowić Ci, że w ten sposób też można budować stronę i formatować odpowiednie elementy. Poniższy fragment ar­ kusza stylów odpowiada za określenie dostępów pomiędzy akapitami, kolom tekstu i tła. di v#sklep p { margin:0: padding:0: } p#cena { font-size:25px; c o lo r:red; font-weight:bold: } p#koszyk { border: lpx solid s ilv e r: background-color:#D7D5D5; padding: 5px; padding-left:20px; padding-right:20px; te xt-a lig n :ce n te r: font-w eight:boi der;
  
  Sekcja „Kontakt” Ostatnim elementem mojej strony jest dział Kontakt. Nie muszę chyba nikomu mówić, jak ważny jest to element i że musi się on znajdować na każdej szanującej się stronie. Rysunek 5.19 przedstawia m oją stronę kontaktową.
  
  Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
  
  24 1
  
  Rysunek 5.19. Podstrona Kontakt
  
  B artosz D anowski l i t e r at u r a i nf o r m a t yczna _ S tro n a głó w n j
  
  Książki
  
  Artykuły
  
  O mtue
  
  ___________ P izy ja/r.e stro n y ji K o n ta k t
  
  D anowski.pl • K ontaktu
  
  Sklep ¡
  
  Siukaj
  
  K o n ta k t Uwaga, zanim do mnie nap iszesz uw ażnie p rze cz y taj informacje zam ieszczone poniżej. • Jeżeli c h c e sz sk o rzy stać z form ularza k o n tak to w eg o musisz bezw zględnie wypełnić w szystkie pola, P o d a n ie b łę d n e g o a d r e s u u n ie m o ż liw i m i o d p o w ie d ź n a T w o ją w ia d o m o ś ć . • Jeżeli c h ce sz b y ć informowany o no w o ściach n a te j stronie zamów mój biuletyn informacyjny. • U dostępniony form ularz służy w yłącznie d o korespondencji p ry w atnej z moimi czytelnikami. N ie ż y c z ę s o b ie o tr z y m y w a ć n ie z a m a w ia n y c h in fo rm a c ji h a n d lo w y c h o raz sp am u .
  
  formatmri kom*kłowy 1 Imię:
  
  O pinie czytelników Zdecydowałam się do Ciebie napisać, ponieważ bardzo spodobała m i się konwencja książki p t. 'Kom puter PC Ćwiczenia praktyczne"... naprawdę super. Wszystko je s t napisane jasno, zwięźle i klarownie...
  
  Błoci m a rcoos.techblog Tako rze c z e Shrew » n e t to
  
  T reść w iadom ości: - W eb Audit Błog Poradnik w ebm astera
  
  RSS ¿ 3 W szystkie wpisy Łj Książki Wyik,:
  
  ¿ 3 Artykuły
  
  N ew sletter Jeśk c h ce sz być pow iadam iany o now ościach n a stronie zaprenum eruj b iu le ty n in f o r m a c y jn y *•
  
  W dalszej części niniejszego podrozdziału opisałem tylko, w jaki sposób zbudować formularz i sformatować go za pomocą kaskadowych arkuszy stylów. M usisz jednak pamiętać, że formularz kontaktu musi być obsłużony przez odpowiedni skrypt. W prze­ ciwnym wypadku treści wysłane za jego pośrednictwem są nieczytelne. Więcej infor­ macji na temat obsługi formularza znajdziesz w dodatku do niniejszej książki. Zwróć uwagę na to, że zrezygnowałem z podawania adresu e-mail, a zamiast tego udo­ stępniłem formularz kontaktowy. Takie rozwiązanie pozwala wysłać do mnie wiado­ mość bez konieczności posiadania własnego konta. Poza tym formularz skutecznie chroni mój adres przed spamem. Uzupełnieniem formularza są krótkie zasady kontaktu, które m ają usprawnić cały proces. Kod XHTM L odpowiedzialny za przygotowanie strony kontaktowej znajduje się poniżej. Zwróć uwagę na ciekawe zastosowanie listy definicji do budowy formularza. Kontakt

  Uwaga, zanim do mnie napiszesz uważnie przeczytaj informacje zamieszczone poniżej,

  • Jeżeli chcesz skorzystać z formularza kontaktowego musisz bezwzględnie wypełnić wszystkie pola. Podanie błędnego adresu uniemożliwi mi odpowiedź na Twoją wi adomość.
  
  
  242
  
  Tworzenie stron WWW w praktyce
  
  
  • Jeżeli chcesz być informowany o nowościach na te j stronie zamów mój biuletyn inform acyjny.
  • Udostępniony formularz służy wyłącznie do korespondencji prywatnej z moimi czytelnikami. Nie życzę sobie otrzymywać niezamawianych informacji handlowych oraz spamu.
  
  
  Formularz kontaktowy
  
  Imi ę :
  
  E-mail:
  
  Treść wiadomości: «yj:«i.e strony { K ontakt
  
  Sklep
  
  Danowsla.pl
  
  ABC sam optymalizuję komputer 5 ! 12 07.2007 '•ÓNw ma kom entarzy » Edytuj ‘ABC s a m o p ty m a liz u ję k o m p u te r ’ to przystępny poradnik dla osób. które c h cą możliwie najtępiej przygotow ać swojego p e c e ta do w ydajnej i komfortowej pracy Dzięki tej książce nauczysz się sk u te cz n e optymalizować działanie komputera, odpowiednio konfigurując ustaw ienia BIOS-u. sy stem u operacyjnego i używanych programów. Z obaczysz, jak podzielić dyski i rozplanować przechow yw anie danych. Dowiesz się tak że, jak zwiększyć b ezpieczeństw o system u i które elem enty kom putera w arto wymienić, jeśli zaw iodą inne sposoby popraw y wydajności. Czytaj c ało ść *
  
  Noc pozycjonerów “ * 29.06.2007 /
  
  Nie ma kom entarzy » Edytuj
  
  Tym razem na szybko i typow o informacyjnie. W so b o tę i niedzielę (30.0 6 -0 1 .0 7 ) odbędzie się ! ogólnopolska Noc jjozycjonerów . O rganizatorzy przygotowali szereg niespodzianek i juz nie mogę się d oczekać spotkania... W śród patronów imprezy znajdują się O net.pl, Helion.pl, Home.pl, IAB, Netspnnt.pl. Osoby zainteresow ane nabyciem książki Pozycjonowanie i optymalizacja stro n WWW. Jak to się robi w promocyjnej cenie (jedyne [ ..]
  
  Opinie czytelników Ostatnio zakupiłem Pana fantastyczną książką o programie Przeczytałem ją całą.
  
  C zytaj c ało ść »
  
  Błogi
  
  Plagiat “ *28.0 6.2007
  
  Komentarzy: 7 » Edytuj
  
  » Poradnik w ebm astera )
  
  Rysunek 5 .2 7 . Widok strony w rozdzielczości 1280*1024
  
  C t Ł > a » | < t B II! /
  
  ™
  
  A A' x’ x . ! H
  
  Ü
  
  H 13 1
  
  0 mdex.html (ISO)Q 0 »Wep.htmł (ISO) Q i
  
  n
  
  8 9
  
  10 11
  
  
  
  
  
  />
  
  < t it le > L it e r a t u r a in f o r m a t y c z n a - B a r t o s z D a n o w s k i< /t1 tle >
  
  12
  
  13 14 15
  
  20
  
  21
  
  < lin k r e l« " s t y le s h e e t " h r e f « "d a n o w s k i. c s s " t y p e « 't e x t / c s s " />
  
  < d iv id « "n a g lo w e k "> k s i ą ż k i < l i x a h r e f « " a r t y k u ly . htm l " > A r t y k u ł y < / a x / l i>
  
  J j Kod Ukryj
  
  Zapisz..
  
  jj Sprawdź poprawność dokumentu... |j 3 $ ▼
  
  Infn- uncu—at m a u a t lnftk.Ł.3.Łk& B-JyTML
  
  1 .0
  
  T ra n s itio n a l
  
  No w a rn in g s o r e r r o r s w ere fo u n d
  
  To l e a r n more a b o u t HTML T id y s ee h t t p : / / t i d y . s o u r c e f o r g e . n e t P le a s e send bug r e p o r t s t o h t m l - t id y d w 3 .o r g HTML and CSS s p e c i f i c a t i o n s a r e a u a i l a b l e fro m h t t p : / / w w w . w 3 . o r g / Lobby y o u r company t o j o i n W3C, s ee h t t p : //w w w .w 3 .o r g /C o n s o r t iu m
  
  INS
  
  NUM Rozmiar 3873 B (3,78 KB)
  
  f c l,W : l
  
  Rysunek 5 .2 8 . Strona bez błędów
  
  Dla porównania rysunek 5.29 przedstawia sytuację, w której kod strony zawiera kilka błędów. Po przeanalizowaniu komunikatu możemy stwierdzić, że kod zawiera sześć błędów. W takiej sytuacji za pom ocą suwaka widocznego po prawej stornie dolnego okna mu­ simy całość przewinąć do góry, aby znaleźć dokładne informacje o błędach i ich lokali­ zacji. Poniżej zamieściłem fragment komunikatu.
  
  Tworzenie stron WWW w praktyce
  
  250
  
  H
  
  ( lc£D 21.4.0 - C:\Users\Bartek\Deslctop\Strona WWW\danow5ki.pl\5tciep.html Plik
  
  Edycja
  
  J * a
  
  Szukaj
  
  XHTML
  
  PHP
  
  * A * J i at ¡
  
  §t¡ a ( j psi a
  
  •
  
  S
  
  JavaScript
  
  Opcje
  
  
  
  < t it le > L it e r a tu r a
  
  in fo r m a ty c z n a - B a rto s z D a n o w s k i< / title >
  
  < l i n k r e l - " s t y l e s h e e t " h r e f - " d a n o w s k i. c s s " t y p e = " t e x t / c s s " / > < /head >
  
  < d iv id -" n a g lo w e k " >
  
  < u l> < l i x a h r e f - ' in d e x , h tm l " > s tro n a g łó w n a < /a > < /li> < lix a h r e f - ' k s i a z k i . h tm l " > K s ią ż k i < / li> < lix a h r e f » " a r t y k u l y . h tm l " > A r t y k u ł y < / a x / l i > < lix a h r e f« "o m n ie . h tm l ">o m n i e < / a x / l i > < lix a h r e f * " l i n k i . h tm l " > P rz y ja z n e s t r o n y < / a x / l i > < lix a h r e f - " k o n t a k t . h tm l " > K o n t a k t < / a x / li > < lix a h r e f = " s k le p . h t m l" > s k l e p < / a x / l i > | < / u l> i < / d iv >
  
  Ą Podgktd Zapisz..
  
  [
  
  R
  
  ~T
  
  j » 4 a jj ä i^
  
  B
  
  Pomoc
  
  13*
  
  Sprawdź popraw ność dokumentu
  
  I n f n - D n rn n p n t r n n t . p t In n k s l i k e XHTMI 6 w a r n in g s , 0 e r r o r s w ere foun d? I
  
  1 .0
  
  T r a n s itio n a l
  
  To l e a r n more a b o u t HTML T id y see h t t p : / / t i d y . s o u r c e f o r g e . n e t P le a s e send bug r e p o r t s t o h t m l - t id y d w 3 .o r g HTML and CSS s p e c i f i c a t i o n s a r e a o a i l a b l e fro m h t t p : / / w w w . w 3 . o r g / Lobby y o u r company t o j o i n W3C, s ee h t t p : //w w w .w 3 .o r g /C o n s o r t iu m
  
  INS
  
  NUM Rozmiar 3867 B (3,78 KB)
  
  K: 35, W: 20
  
  Rysunek 5 .2 9 . Strona z błędami lin e 17 column 13 - Warning: element not empty or not closed lin e 20 column 5 - Warning: missing before < /li> lin e
  
  21column 5 - Warning: inserting im p lic it
  
  lin e
  
  21column 5 - Warning: missing before
  
  lin e
  
  21column 5 - Warning: inserting im p lic it
  
  lin e
  
  21column 5 - Warning: missing before
  
  Pierwszy błąd pojawił się w siedemnastej linii i jest nim brak zamknięcia znacznika . W takiej sytuacji zerkamy do okna edytora, szukamy siedemnastej linii i spraw­
  
  dzamy, który znacznik nie jest zamknięty. Następnie poprawiamy odpowiedni błąd (rysunek 5.30). Po skorygowaniu błędu i zapisaniu pliku sprawdzamy dokument ponownie za pomocą opcji Plik/Sprawdź poprawność dokumentu. Działanie takie jest niezbędne, ponie­ waż bardzo często jeden drobny błąd wywołuje lawinę innych, zależnych od niego.
  
  Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
  
  25 1
  
  ,,P kED 2.1.4.0 - C:\Users\Bartelc\Desktop\Strona WWVWdarvowski.pl\slclep.html Plik
  
  Edycja
  
  Szukaj
  
  j * -
  
  a
  
  XHTML
  
  - *
  
  j
  
  PHP
  
  &
  
  fja a jrü tS M f:”
  
  JavaScript
  
  Opcje
  
  Pomoc
  
  x • « u . w ™ m «í. 1 1 « r a* x* i-iä g jn jia s-< > |& 3 S S |e i=
  
  0 index.hM (tSO)Q © »klep html (ISO) Q I in fo r m a ty c z n e j. B io g r a f Ta ~ pubYT&ac J e , o p in ie c z y t eT rnków . * / >
  
  •cmeta nam e*"A u th o r " c o n te n t= ” B a rto s z D a now ski" / > croeta n a m e *"G e n e ra to r" c o n te n t= "k E D " / >
  
  u
  
  Literatura informatyczna - Bartosz Danowski
  
  12
  
  < l in k r e l * " s t y l e s h e e t ” h r e f - " d a n o w s k i. c s s " t y p e - ” t e x t / c s s ” / >
  
  13 14
  
  15
  
  ■rtiiM Id«niuaiii
  
  19
  
  20
  
  21 22
  
  23 24
  
  25
  
  J
  
  h r e f " in d e x , h t m l” > s tro n a q łó w n a < / a x / H > h r e f " k s i a z k i. h t m l"> K s i ą z k i < / l i > h r e f " a r t y k u ły , h tm l " > A r t y k u ł y < / a x / l i > h r e f "o m n ie . h tm l" > o m n i e < / a x / l i > h r e f " l i n k i . h tm l "» P rz y ja z n e s t r o n y < / a x / H > h r e f " k o n t a k t , h tm l " > K o n t a k t < / a x / li > h r e f - '"s k le p . h tm l" > s k le p < /a x /li>
  
  Kod I Ù Po b e f o r e < / l i > 21 colum n 5 - W a rn in g : i n s e r t i n g i m p l i c i t 21 colum n 5 - W a rn in g : m is s in g < /a > b e fo r e 21 colum n 5 - W a rn in g : i n s e r t i n g i m p l i c i t 21 colum n 5 - W a rn in g : m is s in g < /a > b e f o r e D o c ty p e g iu e n i s " - //W 3 C //D T D XHTML 1 . 0 S t r i c t / / E N " Document c o n te n t lo o k s l i k e XHTML 1 . 0 T r a n s i t i o n a l INS
  
  NUM Rozmiar 3867 B (3,78 KB)
  
  K: 143, W: 17
  
  Rysunek 5 .3 0 . Odnajdywanie i poprawianie błędów
  
  Tak właśnie jest w moim przypadku. Zwróć uwagę na drugi z wytkniętych błędów — linia 20., brak zamkniętego znacznika . Jeden drobiazg pociąga za sobą szereg kolejnych błędów. Zgodnie z powyższą zasadą niezbędne jest usunięcie wszystkich błędów. To jednak nie wystarczy — po naprawieniu kodu za pom ocą edytora kED sugeruję skorzystanie z jeszcze jednego narzędzia. Mam tutaj na myśli walidator (narzędzie do analizy po­ prawności kodu) udostępniony przez konsorcjum W3C na stronie http://validator.w3.org. Zasada korzystania z tej strony jest stosunkowo prosta i ogranicza się do podania adresu strony, która ma zostać sprawdzona. Odpowiedni adres wklejamy w polu Address i kli­ kamy przycisk Check. Rysunek 5.31 przedstawia wynik analizy mojej strony głównej. Akurat na przykładowym rysunku widać, że strona nie zawiera błędów. Natomiast w sy­ tuacji gdy zostaną wykryte jakieś pomyłki, zostaniesz o nich powiadomiony w podobny sposób, jak w edytorze kED. Zasada usuwania usterek jest identyczna z tą, którą przed­ stawiłem w opisie korzystania z podobnego narzędzia wbudowanego w edytor kED.
  
  252
  
  Tworzenie stron WWW w praktyce
  
  V\ R
  
  p
  
  Q ^ u j . M a r k u p V a l i d a t i o n S e r v ic e y o ? 4 DUMB
  
  Home
  
  At>oul
  
  News
  
  Result: Address: Encoding: Doctype: Root Namespace:
  
  Revalidate ]:
  
  Docs
  
  Help & F A Q
  
  0
  
  ___
  
  ?
  
  m ? »
  
  ■
  
  m
  
  Feedback
  
  Jump To:
  
  Passed validation
  
  Results
  
  htip://danowski pi/
  
  utf-8
  
  (detect automatically)
  
  XHTML 1.0 Strict
  
  (detect automatically)
  
  0
  
  http://www w3.org/1999/xhtml
  
  ! Show Source Q Validate error pages
  
  03 Show Outline Verbose Output
  
  Help
  
  on
  
  th e
  
  options
  
  available
  
  Note The Validator XML support has some limitations
  
  This P ag e Is Valid XH TM L 1.0 Strict! Tip Of The Day
  
  Use headings to structure your document
  
  The document located at was checked and found to be valid XHTML 1 0 Strict This means that the resource in question identified itself as "XHTML 1 0 Strict" and that we successfully performed a formal validation using an SGML or XML Parser (depending on the markup language used) W3C ? 0 show your readers ,hat y°u have taken the to create an interoperable Web page, you may display — ------^ this icon on any page that validates Here is the HTML you could use to add this icon to your Web page

  
  
  < /p >
  
  ff you like, you can download a copy of this image (in PNG or GIF format) to keep in your local web directory, and change the HTML fragment above to reference your local image rather than the one on this server A full list of icons, with links to alternate formats and colors, is also available If you use CSS in your document, you should also check it for validity using the W3C CSS Validation Service If you would like to create a link to this page (i.e., this validation result) to make it easier to revalidate this page in the future or to allow others to validate your page, the URI is