Head_First_HTML_with_CSS_XHTML_Edycja_polska_Rusz_glowa_hfhtcs.pdf

(2201 KB) Pobierz
IDZ DO
PRZYK£ADOWY ROZDZIA£
SPIS TREœCI
Head First HTML with CSS
& XHTML. Edycja polska
Autorzy: Eric Freeman, Elisabeth Freeman
T³umaczenie: Piotr Rajca
ISBN: 83-246-0427-8
Tytu³ orygina³u:
Head First HTML with CSS & XHTML
Format: 200×234, stron: 684
KATALOG KSI¥¯EK
KATALOG ONLINE
ZAMÓW DRUKOWANY KATALOG
TWÓJ KOSZYK
DODAJ DO KOSZYKA
Poznaj w niekonwencjonalny sposób zasady tworzenia stron WWW
• Wykorzystaj najnowsze standardy jêzyka HTML
• Zastosuj style do zdefiniowania wygl¹du strony
• Opracuj formularze i mechanizmy nawigacyjne
Jêzyk HTML stale ewoluuje. Od momentu swojego powstania przeszed³ d³ug¹ drogê.
Pocz¹tkowo by³ to zestaw kilku znaczników s³u¿¹cych do formatowania tekstów
naukowych, publikowanych w sieci bêd¹cej zal¹¿kiem internetu. Obecnie technologia ta
pozwala na niemal dowolne uk³adanie elementów tekstowych i graficznych na stronach
WWW wyœwietlanych w przegl¹darkach internetowych. Wspó³czesny HTML to nie tylko
znaczniki, ale tak¿e style — uniwersalne rozwi¹zanie umo¿liwiaj¹ce kontrolowanie
wygl¹du strony. Zbudowanie nowoczesnej i szybko ³aduj¹cej siê witryny WWW
wymaga opanowania tych elementów. Przera¿a Ciê to? Widzisz ju¿ w myœlach setki linii
przyk³adowego kodu, dziesi¹tki definicji i diagramów? Niepotrzebnie.
Dziêki ksi¹¿ce „Head First HTML with CSS & XHTML. Edycja polska” poznasz
najnowsze standardy tworzenia witryn WWW w sposób gwarantuj¹cy szybkie
i bezstresowe przyswojenie wiedzy. Jej autorzy, wykorzystuj¹c najnowsze osi¹gniêcia
teorii uczenia, przedstawiaj¹ wszystkie zagadnienia niezbêdne do rozpoczêcia
projektowania i tworzenia serwisów WWW z wykorzystaniem jêzyka HTML oraz
kaskadowych arkuszy stylów CSS. Poznasz znaczniki HTML, zasady umieszczania
na stronach WWW elementów graficznych oraz sposoby formatowania tekstów za
pomoc¹ stylów. Jednak, co najwa¿niejsze, nauczysz siê stosowaæ tê wiedzê w praktyce.
• Struktura dokumentu HTML
• Znaczniki formatuj¹ce
• £¹cza do innych stron WWW
• Wstawianie elementów graficznych
• Zgodnoœæ ze standardami
• Formatowanie za pomoc¹ stylów CSS
• Tworzenie formularzy
Przekonaj siê, ¿e nawet przy poznawaniu skomplikowanych technologii mo¿na siê
œwietnie bawiæ.
CENNIK I INFORMACJE
ZAMÓW INFORMACJE
O NOWOœCIACH
ZAMÓW CENNIK
CZYTELNIA
FRAGMENTY KSI¥¯EK ONLINE
Wydawnictwo Helion
ul. Koœciuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Spis treści (skrócony)
Wprowadzenie
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Język Sieci.
Poznajemy HTML
Poznajemy „HT” z nazwy języka HTML.
Dokładniejsze poznanie hipertekstu
Konstrukcja stron WWW.
Elementy konstrukcyjne
Wycieczka do Webowic.
Nawiązujemy połączenie
Poznajemy media.
Umieszczanie obrazów na stronach WWW
Poważny HTML.
Standardy, zgodność z nimi i cały ten kram
Dodanie „X” do HTML.
Zaczynamy stosować XHTML
Delikatna stylizacja.
Poznajemy CSS
Poszerzamy swoje słownictwo.
Style czcionek i kolorów
Bliskie kontakty z elementami.
Model blokowy
Zaawansowane sposoby konstruowania stron WWW.
Elementy
div
i
span
Rozmieszczanie elementów.
Układ i pozycjonowanie
Mania tabel.
Tabele i listy
W stronę interaktywności.
Formularze XHTML
21
33
73
107
153
193
249
291
311
365
407
449
507
567
607
655
Dodatek. Dziesięć najważniejszych zagadnień (których nie opisaliśmy)
Spis treści (na serio)
Wprowadzenie
Twój mózg koncentruje się na kodzie HTML i CSS.
Podczas gdy
Ty
starasz się czegoś
nauczyć,
Twój mózg robi Ci przysługę i dba o to, abyś przez przypadek
nie zapamiętał
zdobywanych informacji. Twój
mózg myśli sobie: „Lepiej zostawić trochę miejsca na bardziej istotne informacje, na przykład: jakich zwierząt
unikać albo czy jeżdżenie na snowboardzie nago jest dobrym pomysłem”. A zatem, w jaki sposób możesz
oszukać swój mózg i przekonać go, że Twoje życie zależy od znajomości HTML-a i CSS?
Dla kogo jest ta książka?
Wiemy, co sobie myśli Twój mózg
Metapoznanie
Zmuś swój mózg do posłuszeństwa
Zespół recenzentów
Podziękowania
22
23
25
27
30
31
5
Spis
treści
Poznajemy HTML
1
Język Sieci
Jedyną przeszkodą na drodze do zaznaczenia Twojej obecności w Sieci jest
konieczność poznania nowego żargonu:
HTML-a (to skrót od słów:
HyperText Markup
Language
— język znaczników hipertekstu). A zatem przygotuj się na kilka lekcji nowego języka.
Po przeczytaniu tego rozdziału nie tylko będziesz rozróżniać niektóre proste
elementy
HTML,
lecz także nabędziesz odpowiedniego
stylu.
W końcu, po przeczytaniu całej książki, będziesz
posługiwać się tym językiem w taki sposób, jakbyś całe życie spędził w Webowicach.
WWW zabiła radio
Co robi serwer?
Oto co piszesz (kod HTML)…
Co tworzy przeglądarka
34
35
36
37
41
43
44
47
49
50
55
59
60
62
64
66
69
Bez stresu, ale kiedy
skończysz, naszą stronę
będą odwiedzać tysiące osób.
Dlatego nie tylko musi ona
być poprawna, lecz także
koniecznie musi świetnie
wyglądać!
Twoja długa przerwa w kafeterii Świat Kaw
Tworzenie strony kafeterii
Tworzenie plików HTML (Widnows)
W międzyczasie w kafeterii Świat Kaw
Otwieranie strony w przeglądarce
Testowanie strony WWW
Znaczniki bez tajemnic
Poznajemy element style
Nadawanie stylu stronie kafeterii
Kto co robi?
Pogawędki przy kominku
Kluczowe zagadnienia
Rozwiązania ćwiczeń
<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...
<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...
<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...
„P
ze
b
otr
uję
plik
»salon.html«”
<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kick’n Tunes
</h1>
<p>BT - Satellite: nice downbeat tune.
</p>
<p>
...
„Znalazłem go, trzymaj”
Serwer WWW
6
Dokładniejsze poznanie hipertekstu
2
Poznajemy „HT” z nazwy języka HTML
Czy ktoś powiedział „hipertekst”?
A co to takiego? Ech… to jedynie
podstawa całej
WWW. W rozdziale 1. przyjrzeliśmy się nieco językowi HTML i przekonaliśmy się, że jest to język
wykorzystujący znaczniki („ML” z nazwy HTML) do opisywania struktury stron WWW.
Teraz zajmiemy się możliwościami związanymi z pierwszą częścią nazwy „HTML” — „HT”,
czyli
hipertekstem,
który pozwoli nam uwolnić się od ograniczeń jednej strony i tworzyć
połączenia z innymi stronami WWW. Jednocześnie poznamy nowy, bardzo potężny element
<a>
— i dowiemy się, że bycie „względnym” jest całkiem fajne. A zatem zapnij pasy
— właśnie zaczynamy poznawać hipertekst.
Salon Head First — nowy i poprawiony
Tworzenie nowej strony salonu
Co zrobiliśmy?
Co robi przeglądarka?
Atrybuty
Problemy techniczne
Planowanie ścieżek
Poprawianie błędnych adresów obrazów…
Rozwiązania ćwiczeń
74
76
78
79
83
88
90
96
102
7
Spis
treści
Elementy konstrukcyjne
3
h1
p
h2
img
Konstrukcja stron WWW
Czy powiedziano mi, że ta książka dotyczy tworzenia stron WWW?
Bez wątpienia nauczyłeś się już całkiem sporo; poznałeś: znaczniki, elementy, łącza, ścieżki.
Niemniej jednak cała ta wiedza będzie całkowicie nieprzydatna, jeśli nie wykorzystasz jej do
tworzenia jakichś oszałamiających stron WWW. W tym rozdziale mamy zamiar przedstawić Ci
proces tworzenia stron WWW: od pomysłu, poprzez projekt, stworzenie podstaw, wpisanie
zawartości strony, aż do ostatecznych, drobnych modyfikacji związanych z dopracowywaniem
jej wyglądu. Będzie Ci przy tym potrzebny jedynie kask oraz pas na narzędzia, gdyż pokażemy
Ci nowe narzędzia, które bez wątpienia stałyby się chlubą każdego majsterkowicza.
Z dziennika na stronę WWW z prędkością 20 km na godzinę
Orientacyjny szkic projektu
Od szkicu do układu
Od układu do strony WWW
Testowanie strony WWW Antka
Poznajemy element
<q>
Dłuuuuugie cytaty
Dodawanie elementu
<blockquote>
Prawdziwe znaczenie zagadki związanej z elementami
<blockquote>
i
<q>
Oczywiście można utworzyć listę, posługując się elementami
<p>…
p
109
110
111
112
114
116
120
121
124
133
134
139
140
141
143
149
Tworzenie list HTML w dwóch prostych krokach
Umieszczanie jednego elementu wewnątrz innego nazywamy
„zagnieżdżaniem”
Aby zrozumieć związki wynikające z zagnieżdżania elementów,
narysuj odpowiedni szkic
Wykorzystanie zagnieżdżania dla zapewnienia poprawności
znaczników elementu
h2
p
h2
Wewnątrzwierszowy czy blokowy?
Rozwiązania ćwiczeń
img
p
8
Zgłoś jeśli naruszono regulamin