Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00241 009230 10485051 na godz. na dobę w sumie
Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po HTML5, CSS3 i grafice. Wydanie IV - książka
Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po HTML5, CSS3 i grafice. Wydanie IV - książka
Autor: Liczba stron: 600
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-6667-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Ty też możesz mieć swoją stronę WWW!

Marzy Ci się własna strona internetowa lub profesjonalna witryna dla Twojej firmy? Jeżeli brak Ci odpowiednich umiejętności, to zadanie może być poza Twoim zasięgiem. Ale do czasu! Ta książka zawiera dawkę wiedzy, która nawet kompletnemu laikowi pozwoli zaprojektować i zbudować witrynę WWW. Dzięki licznym przykładom przebrniesz przez kolejne etapy tworzenia strony internetowej oraz odkryjesz w sobie pasję webmastera!

Kolejne wydanie tej cenionej książki zostało gruntownie przeredagowane i uzupełnione o nowe informacje tak, aby prezentowało obecnie wykorzystywane narzędzia i panujące trendy w projektowaniu stron internetowych. W trakcie lektury poznasz składnię języka HTML, wykorzystywane znaczniki oraz nowości zawarte w HTML5. Ponadto zaznajomisz się z kaskadowymi arkuszami stylów (CSS) oraz przekonasz się, jaki potencjał kryje język JavaScript. Nauczysz się także przygotowywać odpowiednią grafikę na potrzeby strony WWW. Książka ta jest doskonałym przewodnikiem wprowadzającym w świat projektowania!

Dowiedz się:

Przewodnik dla początkujących projektantów WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics Tłumaczenie: Aleksander Lamża (wstęp, rozdz. 1 – 11), Wojciech Moch (rozdz. 12 – 22, dodatki), z wykorzystaniem fragmentów książki „Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po (X)HTML, CSS i grafice” w tłumaczeniu Anny Trojan ISBN: 978-83-246-6667-6 © 2014 Helion S.A. Authorized Polish translation of the English edition Learning Web Design, 4E, ISBN 9781449319274 © 2012 Littlechair, Inc. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/prsti2.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/prsti2 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści Przedmowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi Część I Podstawy Rozdział 1 Od czego zacząć? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 4 4 11 14 19 20 Od czego zacząć? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Czym się zajmuje projektant stron internetowych? . . . . . . . . . . . . . . . . . Jakich języków muszę się nauczyć? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Co muszę kupić? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Czego się nauczyłeś? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rozdział 2 Jak działa internet? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 21 21 23 24 26 30 32 Internet a Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dostarczanie informacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Kilka słów o przeglądarkach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Adres strony internetowej (URL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Anatomia strony internetowej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Składanie wszystkiego w całość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rozdział 3 Kilka ważnych spraw, o których musisz wiedzieć . . . . 33 34 36 36 38 Od przybytku głowa boli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Trzymanie się standardów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Stopniowe ulepszanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Technika Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii Kup książkęPoleć książkę iv Spis treści Web dla wszystkich, czyli dostępność . . . . . . . . . . . . . . . . . . . . . . . . . . . Need for Speed — liczy się szybkość . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 43 45 Część II Znaczniki HTML i struktura dokumentu Rozdział 4 Tworzenie prostej strony (przegląd języka HTML) . . . 49 49 50 53 55 58 61 64 65 66 67 68 Strona internetowa krok po kroku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Przed rozpoczęciem należy uruchomić edytor tekstu . . . . . . . . . . . . . . . Krok 1 . Zaczynamy od zawartości . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Krok 2 . Nadajemy dokumentowi strukturę . . . . . . . . . . . . . . . . . . . . . . . . Krok 3 . Oznaczamy elementy tekstowe . . . . . . . . . . . . . . . . . . . . . . . . . . Krok 4 . Wstawiamy obrazek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Krok 5 . Zmieniamy wygląd za pomocą arkusza stylów . . . . . . . . . . . . . . Kiedy dobre strony nie działają dobrze . . . . . . . . . . . . . . . . . . . . . . . . . . Walidacja dokumentów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Przegląd elementów HTML tworzących strukturę dokumentu . . . . . . . . Rozdział 5 Znaczniki tekstowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 70 Akapity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Nagłówki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Listy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Inne elementy stosowane do treści . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Struktura zawartości strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Przegląd elementów liniowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Ogólne elementy div oraz span . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Niektóre znaki specjalne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Zestawienie wszystkiego razem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Przegląd elementów tekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Rozdział 6 Hiperłącza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Atrybut href . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Tworzenie odsyłaczy do stron internetowych . . . . . . . . . . . . . . . . . . . . . 107 Tworzenie odsyłaczy do stron z własnej witryny . . . . . . . . . . . . . . . . . . . 108 Otwieranie stron docelowych w nowym oknie przeglądarki . . . . . . . . . 118 Odsyłacze „pocztowe” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Kup książkęPoleć książkę Odsyłacze „telefoniczne” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Przegląd elementów — odsyłacze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Rozdział 7 Grafika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Kilka słów o formatach obrazków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Element img . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Okno w oknie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Przegląd elementów — obrazki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Rozdział 8 Tabele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Jak używać tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Podstawowa struktura tabeli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Nagłówki tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Tworzenie zakresów komórek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Dostępność tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Podsumowanie zagadnień związanych z tabelami . . . . . . . . . . . . . . . . . 144 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Przegląd elementów HTML — tabele . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Rozdział 9 Formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Jak działają formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Element form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Zmienne oraz zawartość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Wielkie podsumowanie kontrolek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Dostępność formularzy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Projekt i układ formularza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Formularze — przegląd elementów . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Rozdział 10 Co nowego w HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Co się przydarzyło w drodze do XHTML 2? . . . . . . . . . . . . . . . . . . . . . . . 182 W świecie znaczników . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Interfejsy API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Elementy video i audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Element canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Spis treści v Kup książkęPoleć książkę vi Spis treści Podsumowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Część III CSS i prezentacja dokumentu Rozdział 11 Kaskadowe arkusze stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Zalety CSS-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Jak działają arkusze stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Najważniejsze koncepcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Dalsza nauka CSS-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Rozdział 12 Formatowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Właściwości czcionek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Zmiana koloru tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Więcej typów selektorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Zmiana stylu wiersza tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Podkreślenia oraz inne „dekoracje” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Zmiana wielkości liter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Odstępy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Cienie pod tekstem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Zmiany wypunktowania i numeracji list . . . . . . . . . . . . . . . . . . . . . . . . . 259 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Przegląd CSS-a — właściwości dotyczące czcionki oraz tekstu . . . . . . . . 263 Rozdział 13 Kolory i tła . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Określanie wartości koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Kolor pierwszego planu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Kolor tła . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Zabawy z przezroczystością . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Wprowadzenie do selektorów pseudoklas . . . . . . . . . . . . . . . . . . . . . . . 276 Selektory pseudoelementów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Selektory atrybutów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 Obrazki tła . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Skrótowa właściwość background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Prawie tęcza (gradienty) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 I wreszcie — zewnętrzne arkusze stylów . . . . . . . . . . . . . . . . . . . . . . . . . 300 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Przegląd CSS-a — właściwości dotyczące koloru oraz tła . . . . . . . . . . . . 304 Kup książkęPoleć książkę Rozdział 14 Model pojemnika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 Pojemnik elementu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 Określanie wymiarów zawartości elementu . . . . . . . . . . . . . . . . . . . . . . 306 Dopełnienie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 Obramowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Marginesy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Przypisywanie ról wyświetlania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 Dodawanie cienia do elementów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 Przegląd CSS-a — podstawowe właściwości modelu pojemnika . . . . . . 338 Rozdział 15 Pływanie oraz pozycjonowanie . . . . . . . . . . . . . . . . . . . . . . 341 Normalny układ dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 Pływanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 Podstawy pozycjonowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 Pozycjonowanie względne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Pozycjonowanie bezwzględne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Pozycjonowanie sztywne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 Przegląd CSS-a — właściwości dotyczące pływania i pozycjonowania . . 371 Rozdział 16 Układ strony i CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 Strategie związane z układem strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 Szablony stron internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 Wielokolumnowe układy strony z wykorzystaniem elementów pływających . . . . . . . . . . . . . . . . . . . . 381 Układ pozycjonowany . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 Tła wypełniające kolumny od góry do dołu . . . . . . . . . . . . . . . . . . . . . . . 395 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Rozdział 17 Przekształcenia, transformacje i animacje . . . . . . . . . . . 399 Przejścia CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Transformacje CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 Animacja klatkowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 Przegląd właściwości CSS-a — przejścia, transformacje i animacje . . . . . 426 Spis treści vii Kup książkęPoleć książkę viii Spis treści Rozdział 18 Techniki CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Czysta strona (zerowanie stylów CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Techniki zastępowania tekstu obrazkiem . . . . . . . . . . . . . . . . . . . . . . . . . 429 Technika CSS Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 Nadawanie stylów formularzom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 Nadawanie stylów tabelom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 Podstawy techniki Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . 444 Podsumowanie arkuszy stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 Przegląd CSS-a — właściwości dotyczące tabel oraz list . . . . . . . . . . . . . 456 Część IV JavaScript Rozdział 19 Wprowadzenie do JavaScriptu . . . . . . . . . . . . . . . . . . . . . . . 459 Czym jest JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Dodawanie skryptów na stronę . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 Anatomia skryptu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 Obiekt przeglądarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478 Zdarzenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478 Podsumowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Rozdział 20 Korzystanie z JavaScriptu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 Poznaj model DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 Wypełniacze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493 Javascriptowe biblioteki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497 Wielkie zakończenie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502 Część V Tworzenie grafiki stron internetowych Rozdział 21 Podstawy grafiki stron internetowych . . . . . . . . . . . . . . . 507 Źródła obrazków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507 Poznaj formaty grafiki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510 Rozmiar oraz rozdzielczość obrazka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522 Praca z przezroczystością . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 Kup książkęPoleć książkę Wprowadzenie do formatu SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533 Podsumowanie informacji dotyczących grafiki stron internetowych . . . 538 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Rozdział 22 Optymalizacja grafiki stron internetowych . . . . . . . . . . 541 Uniwersalne strategie optymalizacyjne . . . . . . . . . . . . . . . . . . . . . . . . . . 542 Optymalizacja plików GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543 Optymalizacja plików JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 Optymalizacja plików PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 Optymalizacja pod kątem docelowego rozmiaru . . . . . . . . . . . . . . . . . . 553 Przegląd optymalizacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555 Dodatek A Odpowiedzi do ćwiczeń . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557 Dodatek B Selektory CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583 Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587 Spis treści ix Kup książkęPoleć książkę Kup książkęPoleć książkę ROZDZIAŁ 4 W TYM ROZDZIALE: Wprowadzenie do elementów oraz atrybutów Wstawianie znaczników w prostym dokumencie Elementy tworzące strukturę dokumentu Prosty arkusz stylów Rozwiązywanie problemów z niedziałającymi stronami internetowymi Tworzenie prostej strony (przegląd języka HTML) W pierwszej części książki został przedstawiony ogólny przegląd środowiska pracy pro- jektantów stron internetowych. Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej. Będzie ona prosta, jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach. W tym rozdziale utworzymy prostą stronę internetową, byś mógł się przekonać, jak w praktyce stosuje się znaczniki HTML. Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę. Dzięki lekturze tego rozdziału: • zrozumiesz, jak działają znaczniki HTML, w tym elementy oraz atrybuty, • zobaczysz, w jaki sposób przeglądarki interpretują dokumenty HTML, • poznasz podstawową strukturę dokumentu HTML, • przyjrzysz się arkuszom stylów. Na razie nie musisz się przejmować nauką poszczególnych elementów czy reguł arkuszy stylów, będzie na to czas w kolejnych rozdziałach. Na razie przyjrzyj się samemu procesowi, ogólnej strukturze dokumentu oraz nowej terminologii. Strona internetowa krok po kroku Już w rozdziale 2., „Jak działa internet?”, mogłeś się przyjrzeć dokumentowi HTML. Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą- darce. Cały proces został podzielony na pięć etapów ilustrujących podstawy tworzenia strony internetowej. Krok 1. Zaczynamy od zawartości. Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy, co z nim zrobi przeglądarka. Krok 2. Nadajemy dokumentowi strukturę. Zapoznamy się ze składnią elementów HTML oraz sposobem nadawania dokumentowi struktury. Krok 3. Oznaczamy elementy tekstowe. Treść strony zostanie opisana za pomocą od- powiednich elementów tekstowych. Przy okazji dowiesz się, jak poprawnie używać HTML -a. Krok 4. Wstawiamy obrazki. Dodając obrazek do strony, poznasz atrybuty oraz puste elementy. 49 Kup książkęPoleć książkę Przed rozpoczęciem należy uruchomić edytor tekstu Praktyczna nauka języka HTML Zdecydowanie najlepiej uczyć się języka HTML w staroświecki sposób — poprzez ręczne pisanie kodu. Dzięki wpisywaniu znaczników jeden po dru‑ gim i obserwowaniu efektów tych zmian w prze‑ glądarce masz największe szanse na zrozumienie zasad rządzących językiem. Wbrew pozorom nauczenie się poprawnego tworzenia dokumentów w HTML ‑u nie zabiera zbyt wiele czasu. Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych. Poza tym pomyśl o satysfakcji, którą odczujesz, gdy spojrzysz na plik źródłowy i będziesz wiedzieć, o co w nim chodzi. Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemów z niedziałającymi stro‑ nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez różne narzędzia. Musisz też wziąć pod uwagę fakt, że profesjonaliści w zdecydowanej większości przypadków wpisują ręcznie kod, ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementów, z których korzystają. Krok 5. Zmieniamy wygląd strony za pomocą arkusza stylów. Dzięki temu ćwiczeniu dowiesz się, jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy stylów (CSS). Pod koniec rozdziału będziesz miał gotowy dokument źródłowy strony przed- stawionej na rysunku 4.1. Nie jest ona jakoś szczególnie rozbudowana, ale od czegoś trzeba zacząć. W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian — prawdopodobnie częściej, niż robi się to zazwyczaj — ale ponieważ jest to wprowadzenie do HTML -a, dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źródłowego. Przed rozpoczęciem należy uruchomić edytor tekstu Zarówno w tym rozdziale, jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie, dlatego musisz zacząć od uruchomienia edytora tekstu. Edytor tekstu dostarcza- ny z systemem operacyjnym, taki jak Notatnik (Windows) czy TextEdit (Mac OS X), powinien w zupełności wystarczyć1. Do naszych celów nadaje się każdy edytor tekstu, w którym można zapisywać zwykłe pliki tekstowe z rozszerzeniem .html. Jeśli do two- rzenia stron internetowych używasz narzędzia typu WYSIWYG, takiego jak Dream- weaver, na razie zostaw je w spokoju. Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentów HTML (patrz ramka „Praktyczna nauka języka HTML”). Z tego podrozdziału dowiesz się, jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit. Nawet jeśli korzystałeś z nich wcześniej, warto rzucić okiem na ten tekst pod kątem specjalnych ustawień, które sprawią, że ćwiczenia pójdą gładko. Rozpoczynamy od Notatnika; posiadacze komputerów Macintosh powinni przejść dalej. 1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu, ale na tym jego funkcjonalność się kończy, więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna. Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistów. Jedną z ważniej- szych zalet takiego rozwiązania — zwłaszcza podczas nauki języka — jest funkcja kolorowania kodu, dzięki której dużo łatwiej wychwycić przypadkowe błędy. Dostępnych jest wiele bezpłatnych edytorów tego typu, z czego najbardziej popularne dla systemu Windows to: Notepad2, Notepad++, Bluefish czy PSPad. W systemie Mac OS jednym z lepszych edytorów jest TextMate — przyp. tłum. Rysunek 4.1. W tym rozdziale krok po kroku napiszemy dokument źródłowy dla powyższej strony internetowej 50 Część II . Znaczniki HTML i struktura dokumentu Kup książkęPoleć książkę Przed rozpoczęciem należy uruchomić edytor tekstu Tworzenie nowego dokumentu w Notatniku (Windows) Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 4.2). 1. Otwórz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 . 2. Zostanie otwarte okno nowego dokumentu, w którym można rozpocząć wpisywanie 3. Teraz zmienimy ustawienia, by były widoczne rozszerzenia nazw plików. Nie musisz tego robić, by tworzyć dokumenty HTML, jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć, z jakim plikiem masz do czynienia. W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderów, a następnie przejdź na kartę Widok 4 . Odszukaj opcję Ukryj rozszerzenia znanych typów plików i ją wyłącz 5 . Kliknij przycisk OK, aby zapisać ustawienia. Rozszerzenia nazw plików będą już widoczne. tekstu 2 . UWAGA Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia, wciśnij klawisz Alt. W systemie Windows Vista odpo- wiednikiem pozycji Opcje folderów jest Opcje folderów i opcje wyszukiwania.  Aby włączyć wyświetlanie rozszerzeń nazw plików, musisz w oknie eksploratora przejść do menu Narzędzia/Opcje folderów  Kliknięcie pozycji Notatnik spowoduje otwarcie nowego dokumentu  Przejdź na kartę Widok .  Odszukaj opcję Ukryj rozszerzenia znanych typów plików i ją wyłącz, a następnie kliknij przycisk OK, aby zapisać zmiany ustawień  Otwórz menu Start i przejdź do Notatnika (Wszystkie programy/Akcesoria/Notatnik) Rysunek 4.2. Tworzenie nowego dokumentu w Notatniku Rozdział 4 . Tworzenie prostej strony 51 Kup książkęPoleć książkę Przed rozpoczęciem należy uruchomić edytor tekstu Tworzenie nowego dokumentu w programie TextEdit (Mac OS X) Domyślnie program TextEdit tworzy dokumenty w formacie tzw. bogatego tekstu (ang. rich text), czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po- zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki. Łatwo poznać, kiedy TextEdit jest w tym trybie, ponieważ na górze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu). Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi, dlatego należy zmienić format, jak to zostało przedstawione na rysunku 4.3. 1. Skorzystaj z Findera, by w folderze Programy znaleźć program TextEdit. Następnie dwukrotnie kliknij jego nazwę lub ikonę, aby go uruchomić. 2. TextEdit otwiera nowy dokument. Na górze ekranu znajduje się pasek narzędzi formatujących, więc TextEdit jest w trybie bogatego tekstu. Poniżej znajdują się instrukcje zmiany trybu. 3. Otwórz okno Preferencje z menu TextEdit. 4. Musisz zmienić trzy ustawienia: Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text). Na karcie Otwórz/Zachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma- towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie „.txt” do nazwy pliku tekstowego (Append ‚.txt’ extensions to plain text files). 5. Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym górnym rogu. 6. Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących, więc będziesz mógł zapisać dokument jako plik .html. Jeśli w przyszłości będziesz chciał przywrócić poprzedni tryb pracy edytora, wykonaj podobne czynności. Widoczny pasek narzędzi formatujących wskazuje na tryb bogatego tekstu W edytorze w trybie zwykłego tekstu ten pasek nie jest wyświetlany Rysunek 4.3. Program TextEdit i okno ustawień z menu Preferencje 52 Część II . Znaczniki HTML i struktura dokumentu Kup książkęPoleć książkę Krok 1. Zaczynamy od zawartości Kiedy już mamy nowy dokument, czas umieścić w nim jakąś treść. Tworzenie stron internetowych zawsze zaczynamy od ich zawartości, dlatego w naszym projekcie po- stąpimy tak samo. W ćwiczeniu 4.1 pokazano, w jaki sposób wpisuje się zwykły tekst i zapisuje dokument w nowym folderze. Ćwiczenie 4.1. Wprowadzanie treści strony 1. W nowym dokumencie otwartym w edytorze wpisz poniższą treść. Wprowadź ją w dokładnie takiej samej postaci, zachowując podział wierszy. Tekst ten jest dostępny w materiałach towarzyszących książce, które można pobrać ze strony ftp://ftp.helion.pl/przyklady/prsti2.zip. Bistro Pod Czarną Gąską Restauracja Bistro Pod Czarną Gąską oferuje wybór popularnych dań obiadowych, którymi możesz się delektować w przyjaznej atmosferze. Menu jest często zmieniane, by zawsze serwować dania ze świeżych produktów. Usługi cateringowe Kiedy Ty będziesz się świetnie bawić, my będziemy dla Ciebie gotować. Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom: czy będą to przekąski, spotkania klubowe, czy wystawne bankiety. Lokalizacja i godziny otwarcia Kuchary, ul. Smaczna 13 Od poniedziałku do czwartku w godzinach od 11 do 21, w piątki i soboty od 11 do 24 2. W menu Plik wybierz polecenie Zapisz lub Zapisz jako, aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 4.4). Zanim zapiszesz plik, musisz utworzyć nowy folder, który będzie zawierał wszystkie pliki tej strony (innymi słowy, lokalny folder główny). Windows: kliknij przycisk Nowy folder znajdujący się na górze okna. Macintosh: kliknij przycisk Nowy katalog. Windows 7 Mac OSX Krok 1 . Zaczynamy od zawartości Konwencje dotyczące nazewnictwa Przy nazywaniu plików należy przestrzegać poniższych reguł oraz konwencji: Należy używać właściwych rozszerzeń nazw plików . Pliki HTML i XHTML muszą mieć roz‑ szerzenie .html. Pliki graficzne należy oznaczać zgodnie z ich formatem — .gif, .png lub .jpg (dopuszczalne jest również .jpeg). W nazwach plików nie należy używać spacji. Często w celu wizualnego oddzielenia słów w nazwach plików używa się znaków podkre‑ ślenia (_) lub łącznika ( ‑), jak w robbins_bio. html czy robbins ‑bio.html. Należy unikać znaków specjalnych, takich jak ?, , #, /, :, ;, • i tym podobnych. Nazwy plików powinny zawierać litery, cyfry, znaki podkreślenia, łączniki oraz kropki. Wielkość liter w nazwach plików może mieć znaczenie w zależności od konfiguracji serwera. Konsekwentne używanie w nazwach plików tylko małych liter — choć nie jest to ko‑ nieczne — pozwala na łatwiejsze zarządzanie plikami i ich nazwami. Nazwy plików powinny być krótkie . Dzięki krótkim nazwom łatwiej zapanować nad plikami. Jeśli plik naprawdę musi mieć długą, składającą się z kilku słów nazwę, poszczególne słowa można oddzielać za pomocą łączników, jak w długi ‑tytuł ‑pliku.html, dzięki czemu takie nazwy będą czytelne. Własne konwencje . W dużych projektach warto wypracować własny, spójny system nazywania plików. Możesz na przykład założyć, że będziesz stosować tylko małe litery, a słowa będziesz oddzielać łącznikami. Eliminujesz w ten sposób sytuacje, w których musisz zgadywać, jak kiedyś nazwałeś jakiś plik, do którego chcesz teraz utworzyć odsyłacz. Rysunek 4.4. Zapisywanie pliku index.html w nowym folderze o nazwie bistro  Rozdział 4 . Tworzenie prostej strony 53 Kup książkęPoleć książkę Krok 1 . Zaczynamy od zawartości Co ignorują przeglądarki? Niektóre informacje zawarte w kodzie źródłowym dokumentu są ignorowane podczas wyświetlania strony. Powtarzające się spacje. Kiedy przeglądarka napotka więcej niż jedną spację pod rząd, wy‑ świetla pojedynczą spację. Jeśli zatem dokument zawiera tekst: dawno, dawno temu przeglądarka wyświetli: dawno, dawno temu. Podziały wierszy (powroty karetki). Przeglą‑ darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje. Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źródłowym nie mają wpływu na sposób wyświetlania w prze‑ glądarce. Tekst oraz inne elementy będą zawijane, dopóki w tekście dokumentu nie zostanie napotka‑ ny nowy element blokowy, taki jak nagłówek (h1), akapit (p) lub podział wiersza (br). Tabulatory. Znaki tabulacji również są zamieniane na spacje. Jaki stąd wniosek? Są bezużyteczne. Nierozpoznawane znaczniki. Przeglądarka po prostu ignoruje wszystkie znaczniki, których nie rozumie lub które zostały zapisane niepoprawnie. W zależności od elementu oraz przeglądarki może to mieć różne skutki. Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak, jakby była ona normalnym tekstem. Tekst znajdujący się w komentarzach. Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami ! ‑ ‑ oraz ‑ ‑ , służącymi do oznaczania komentarzy. Więcej informacji na ten temat znajduje się w ramce „Wstawianie komentarzy” w dalszej części rozdziału. Nadaj folderowi nazwę bistro, a następnie zapisz w nim plik tekstowy index.html. Użytkownicy systemu Win‑ dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ, żeby Notatnik nie dodał rozszerzenia .txt do wybranej przez nas nazwy pliku. Nazwa pliku musi się kończyć rozszerzeniem .html, by przeglądarka rozpoznała ten plik jako dokument HTML. Więcej informacji na temat nazw plików znajduje się w ramce „Konwencje dotyczące nazewnictwa”. Uwaga! Jako sposób kodowania wszystkich plików w książce przyjęto standard UTF ‑8, dlatego przy zapisywaniu plików należy również zamiast domyślnego ANSI wybrać z listy UTF ‑8. 3. Spróbuj obejrzeć plik index.html w przeglądarce. Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwórz lub Otwórz plik. Odszukaj plik index.html i go otwórz. Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 4.5. Rysunek 4.5. Wygląd pierwszej wersji strony internetowej w przeglądarce Zrozumienie pierwszego kroku Treść strony nie prezentuje się zbyt ciekawie (rysunek 4.5). Tekst napisany jest jednym ciągiem — nie tak to wyglądało w oryginalnym dokumencie. Można z tego wyciągnąć kilka wniosków. Pierwszy z nich — co jest widoczne na pierwszy rzut oka — jest taki, że przeglądarka ignoruje podział wierszy w dokumencie źródłowym (w ramce „Co ignorują przeglądarki?” wymieniono inne informacje zawarte w kodzie źródłowym, które nie są wyświetlane w oknie przeglądarki). Po drugie, widać, że samo wpisanie treści strony i nazwanie dokumentu .html nie wystarczy. Choć przeglądarka może wyświetlić tekst z takiego pliku, nie oznaczyliśmy w żaden sposób struktury jego treści, a właśnie do tego służy HTML. Dodamy więc znaczniki, które zdefiniują strukturę dokumentu — najpierw w samym dokumencie HTML (krok 2.), a później do zawartości strony (krok 3.). Kiedy przeglądarka będzie znała strukturę zawartości, będzie w stanie wyświetlić stronę w pożądany sposób. 54 Część II . Znaczniki HTML i struktura dokumentu Kup książkęPoleć książkę Krok 2 . Nadajemy dokumentowi strukturę Element składa się zarówno z zawartości, jak i obejmującego ją znacznika. Krok 2. Nadajemy dokumentowi strukturę Zawartość strony zapisana jest w dokumencie .html — teraz czas dodać do niego znaczniki. Wprowadzenie do elementów HTML W rozdziale 2., „Jak działa internet?”, zostały pokazane przykłady elementów HTML ze znacznikami otwierającymi (jak na przykład p dla akapitu) oraz zamykającymi (jak /p ). Przed rozpoczęciem wstawiania znaczników do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia. Ogólna budowa znacznika została przedstawiona na rysunku 4.6. Znacznik otwierający Zawartość elementu (może to być tekst lub inne elementy HTML) Znacznik zamykający (rozpoczyna się od znaku /) nazwa_elementu Zawartość elementu /nazwa_elementu Element Przykład: h1 Bistro Pod Czarną Gąską /h1 Rysunek 4.6. Elementy znacznika HTML Poszczególne elementy strony są opisywane znacznikami znajdującymi się w kodzie źródłowym. Znacznik składa się z nazwy elementu (zazwyczaj będącej skrótem dłuż- szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych ( ). Przeglądarka wie, że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki. Nazwa elementu pojawia się w znaczniku otwierającym (ang. opening tag, nazy- wanym również znacznikiem początkowym, ang. start tag) i ponownie w znaczniku zamykającym (ang. closing tag, nazywanym też znacznikiem końcowym, ang. end tag) poprzedzonym znakiem prawego ukośnika (ang. slash, /). Znacznik zamykający działa trochę jak „wyłącznik” dla elementu. Należy uważać, by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang. backslash, \). Więcej na ten temat znajduje się w ramce „Ukośnik prawy a lewy”. Znaczniki umieszczane wokół zawartości nazywa się w języku angielskim markup (stąd HTML — HyperText Markup Language). Należy zapamiętać, że element składa się zarówno ze swojej zawartości, jak i znaczników początkowych oraz końcowych. Nie wszystkie elementy posiadają jednak jakąś zawartość. Niektóre są z definicji puste, jak na przykład element img wykorzystywany do dodawania obrazków do strony. Elementy puste zostaną omówione w dalszej części rozdziału. I jeszcze jedna sprawa — wielkość liter. W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia, więc img , Img i IMG są poprawne i oznaczają to samo. Z kolei w języku XHTML (który pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami. Wielu twórców stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest). WSKAZÓWKA Ukośnik prawy a lewy W znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika (/). Znak ten można znaleźć pod znakiem zapytania (?) na standardowej klawiaturze QWERTY. Łatwo jest pomylić ten znak z lewym ukośnikiem (\), który na klawiaturze znajduje się pod znakiem |. Ukośnik lewy nie działa w znacznikach oraz adresach URL, dlatego należy pamiętać, by go tam nie używać. Rozdział 4 . Tworzenie prostej strony 55 Kup książkęPoleć książkę Krok 2 . Nadajemy dokumentowi strukturę UWAGA Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znaków był trochę bardziej skomplikowany. Jeśli tworzysz dokumenty w standardzie HTML 4.01 lub XHTML 1.0, element meta powinien wyglądać tak: meta http ‑equiv= contenttype content= text/html; charset=UTF ‑8 Podstawowa struktura dokumentu Na rysunku 4.7 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5. Dlaczego „sugerowana”? Ponieważ jedynym wymaganym elementem jest ti‑ tle. Lepiej jednak od samego początku tworzyć dokumenty, które są w pełni poprawne. Gdybyś pisał w języku XHTML, wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane. Przyjrzyj się dokładniej rysunkowi 4.7. 1 Tak się akurat składa, że w pierwszym wierszu kodu nie ma żadnego elementu. Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE), która wskazuje, że jest to dokument HTML5. Temat ten jest szerzej omówiony w rozdziale 10., „Co nowego w HTML5?”. W tej chwili wystarczy zapamiętać, że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć, że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5. 2 Cały dokument znajduje się wewnątrz elementu html. Jest on nazywany głównym elementem, ponieważ zawiera wszystkie inne elementy, a poza tym nie można go umieścić w innym elemencie. Zasady te dotyczą zarówno języka HTML, jak i XHTML. 3 W elemencie html dokument jest podzielony na dwie sekcje: head i body. W ele- mencie head (nagłówek) są umieszczone informacje opisujące dokument, takie jak tytuł, stosowane arkusze stylów, skrypty i inne metadane. 4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie. Istnieje wiele zastosowań tych elementów, ale my korzystamy tylko z jednego — określenia typu kodowania znaków (czyli standardu kodowania liter, cyfr i symboli) stoso- wanego w dokumencie. Nie ma sensu wdawać się teraz w szczegóły, ale musisz wiedzieć, że z wielu względów dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich „ogonków”). 5 Ważnym elementem sekcji head jest title, ponieważ — zgodnie ze specyfikacją HTML — wszystkie dokumenty muszą posiadać tytuł. 6 W sekcji body umieszcza się wszystko to, co ma zostać wyświetlone przez przeglądarkę. Jesteś gotowy na utworzenie struktury strony restauracji „Pod Czarną Gąską”? Otwórz dokument index.html i przejdź do ćwiczenia 4.2.     !DOCTYPE html html head meta charset= utf-8 title Tytuł /title /head   body Treść strony /body /html Rysunek 4.7. Podstawowa struktura dokumentu HTML 56 Część II . Znaczniki HTML i struktura dokumentu Kup książkęPoleć książkę Ćwiczenie 4.2. Defi niowanie podstawowej struktury 1. Otwórz dokument index.html, o ile nie zrobiłeś tego wcześniej. 2. Rozpocznij od dodania na samej górze deklaracji typu dokumentu HTML5: !DOCTYPE html 3. W kolejnym wierszu wstaw znacznik otwierający html , a na samym końcu — po całej zawartości pliku — znacznik zamykający /html . 4. Teraz utwórz nagłówek dokumentu, w którym ma się znaleźć tytuł strony. W tym celu przed treścią umieść znaczniki head i /head . Wewnątrz sekcji nagłówka wstaw znacznik meta charset= ut‑ f ‑8 ustalający kodowanie znaków oraz wpisz tytuł Bistro Pod Czarną Gąską , umiesz‑ czając go między otwierającym i zamykającym znacznikiem title . Można również powiedzieć, że element title jest zagnieżdżony w elemencie head. Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach. 5. Na koniec musisz zdefi niować ciało dokumentu. W tym celu całą treść dokumentu umieść między znacz‑ nikami body i /body . Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyróżnione pogrubieniem): !DOCTYPE html html head meta charset= utf ‑8 title Bistro Pod Czarną Gąską /title /head body Bistro Pod Czarną Gąską Restauracja Bistro Pod Czarną Gąską oferuje wybór popularnych dań obiadowych, którymi możesz się delektować w przyjaznej atmosferze. Menu jest często zmieniane, by zawsze serwować dania ze świeżych produktów. Usługi cateringowe Kiedy Ty będziesz się świetnie bawić, my będziemy dla Ciebie gotować. Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom: czy będą to przekąski, spotkania klubowe, czy wystawne bankiety. Lokalizacja i godziny otwarcia Kuchary, ul. Smaczna 13 Od poniedziałku do czwartku w godzinach od 11 do 21, w piątki i soboty od 11 do 24 /body /html 6. Zapisz zmiany w pliku, tak by została nadpisana starsza wersja. Otwórz dokument w przeglądarce lub — jeśli jest on już otwarty — odśwież stronę. Na rysunku 4.8 został zaprezentowany aktualny wygląd dokumentu. Krok 2 . Nadajemy dokumentowi strukturę Rysunek 4.8. Wygląd strony w przeglądar‑ ce po zdefi niowaniu elementów struktury dokumentu Rozdział 4 . Tworzenie prostej strony 57 Kup książkęPoleć książkę Krok 3 . Oznaczamy elementy tekstowe Pamiętaj o dobrym tytule Element title jest nie tylko wymagany w każ‑ dym dokumencie, ale także bardzo przydatny. Tytuł dokumentu jest tym, co jest wyświetlane na liście w Zakładkach bądź Ulubionych. Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony, ponieważ są pierwszą rzeczą, jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu. Również wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentów. Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑ we tytuły i unikać tytułów niejasnych typu „Witam” czy „Moja strona”. Należy się również zatroszczyć o odpowiednią długość tytułu, by mieścił się on w pasku tytułu przeglądarki. Dobrym rozwiąza‑ niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu, tak by była ona widoczna nawet w sytuacji, gdy w przeglądarce jest otwartych wiele zakładek. Wygląda na to, że po zdefiniowaniu struktury dokumentu niewiele się zmieniło — możemy tylko zauważyć, że przeglądarka wyświetla teraz tytuł strony. Gdybyś dodał tę stronę do Zakładek lub Ulubionych, tytuł pojawiłby się na liście (więcej informacji w ramce „Pamiętaj o dobrym tytule”). Treść strony nadal jest wyświetlana jako jeden blok tekstu, ponieważ nie wskazaliśmy przeglądarce, jak miałaby zostać podzielona. Zajmiemy się tym już niebawem. Krok 3. Oznaczamy elementy tekstowe Nawet mając tak niewielkie doświadczenie z kodem HTML, nietrudno się domyślić, że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłówki (h1 i h2), akapity (p), a także tekst zaakcentowany (em). Zajmiemy się tym w ćwiczeniu 4.3, jednak przed jego rozpoczęciem warto poświęcić chwilę na omówienie tego, co można, a czego nie można robić ze znacznikami HTML. Wprowadzenie do znaczników semantycznych Podstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury. Zapamiętaj, że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji). Naszym zadaniem jest wybranie tych elementów HTML, które najlepiej oddają znaczenie poszczególnych fragmentów treści. Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znaczników semantycznych (ang. semantic markup). Na przykład najistotniejszy nagłówek znajdujący się na początku treści powinien zostać oznaczony jako h1. Nie należy się przejmować tym, jak będzie wyglądał w przeglądarce — można to z łatwością zmienić za pomocą arkusza stylów. Ważne jest natomiast to, by wybrać element na podstawie tego, co ma w danym przypadku największy sens. Poza dodawaniem znaczenia do treści strony znaczniki nadają jej również strukturę. Sposób następowania elementów po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje. Strukturę traktuj jak konspekt dokumentu (którego technicznym odpowiednikiem jest obiektowy model dokumentu, czyli DOM — ang. Document Object Model). Dzięki ustaleniu hierarchii elementów przeglądarki wiedzą, jak traktować zawartość dokumentu. Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy stylów oraz zachowań — z wykorzystaniem JavaScriptu. Struktura dokumentu jest omówiona bardziej szczegółowo w trzeciej części książki, przy okazji omawiania kaskadowych arkuszy stylów, oraz w czwartej części, poświęconej językowi JavaScript. Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury, ta misja w początkowych latach istnienia internetu została nieco wypaczo- na. Ponieważ nie był dostępny mechanizm arkuszy stylów, rozszerzano HTML w taki sposób, by autorzy stron mogli zmieniać wygląd czcionek, kolory czy rozmieszczenie tekstu za pomocą znaczników i ich atrybutów. Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentów utworzonych za pomocą starszych narzędzi. W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po- prawny sposób, zgodny z obecnymi standardami. Dość już tego wykładu — czas na ćwiczenie 4.3, w którym popracujemy nad treścią dokumentu. 58 Część II . Znaczniki HTML i struktura dokumentu Kup książkęPoleć książkę Ćwiczenie 4.3. Definiowanie elementów tekstowych 1. Otwórz dokument index.html w edytorze, o ile jeszcze tego nie zrobiłeś. 2. Pierwszy wiersz tekstu: Bistro „Pod Czarną Gąską” jest głównym nagłówkiem strony, dlatego zostanie oznaczony jako element nagłówka poziomu pierwszego (h1). Na początku tego wiersza wstaw znacznik otwierający h1 , a na jego końcu — zamykający /h1 : h1 Bistro Pod Czarną Gąską /h1 3. Dokument zawiera również trzy pomniejsze nagłówki. Oznacz je w podobny sposób, ale zastosuj elementy nagłówków poziomu drugiego (h2). Pierwszy został przedstawiony poniżej, a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam: h2 Restauracja /h2 4. Po każdym z elementów h2 następują krótkie fragmenty tekstu, które należy oznaczyć jako akapity (czyli elementy p). Poniżej znajduje się przykład pierwsze‑ go akapitu, a kolejnymi musisz się zająć sam: p Restauracja Bistro Pod Czarną Gąską oferuje wybór popularnych dań obiadowych, którymi możesz się delektować w przyjaznej atmosferze. Menu jest często zmieniane, by zawsze serwować dania ze świeżych produktów. /p 5. Na koniec w sekcji Usługi cateringowe należy jakoś wyróżnić to, że odwiedzający restaurację powinni pozostawić gotowanie nam. Żeby zaakcentować tekst, należy umieścić go w elemencie em, jak poniżej: Krok 3 . Oznaczamy elementy tekstowe p Kiedy Ty będziesz się świetnie bawić, em my będziemy dla Ciebie gotować /em . Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom: czy będą to przekąski, spotkania klubowe, czy wystawne bankiety. /p 6. Po wstawieniu wszystkich znaczników należy, tak jak poprzednio, zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce. Powinna wyglądać mniej więcej tak jak na rysunku 4.9. Jeśli tak nie jest, sprawdź znaczniki pod kątem brakujących nawiasów lub ukośników w znacznikach zamykających. Rysunek 4.9. Strona po oznaczeniu tekstu za pomocą elementów HTML Powoli zaczynamy do czegoś dochodzić. Po oznaczeniu elementów przeglądarka może teraz wyświetlić tekst w poprawny sposób. Warto jednak poświęcić jeszcze chwilę na bardziej szczegółowe omówienie tego, co widzimy na rysunku 4.9. Elementy blokowe oraz liniowe Choć może się to wydawać oczywiste, warto podkreślić, że nagłówki oraz akapity roz- poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim, jak było wcześniej. Jest tak, ponieważ są one przykładami elementów blokowych (ang. block ele- ment). Przeglądarki traktują elementy blokowe tak, jakby znajdowały się w małych pro- stokątnych pojemnikach, ułożone jeden na drugim. Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do- dawany jest jakiś odstęp. Na rysunku 4.10 elementy blokowe są oznaczone na czerwono. Rozdział 4 . Tworzenie prostej strony 59 Kup książkęPoleć książkę Krok 3 . Oznaczamy elementy tekstowe Wstawianie komentarzy W dokumencie źródłowym można umieścić notatki dla siebie oraz innych osób, oznaczając je jako komentarze. Wszystko, co umieści się pomiędzy znacznikami komentarzy ( ! ‑ ‑ oraz ‑ ‑ ), nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źródła dokumentu. ! ‑ ‑ To jest komentarz. ‑ ‑ ! ‑ ‑ To jest komentarz rozciągający się na kilka wierszy. Kończy się tutaj. ‑ ‑ Komentarze przydają się do opisywania oraz organizowania długich dokumentów, zwłaszcza jeśli pracuje nad nimi wieloosobowy zespół. W poniższym przykładzie komentarze są wykorzy‑ stywane do oznaczenia części strony zawierającej blok nawigacji. ! ‑ ‑ początek nawigacji ‑ ‑ ul ... /ul ! ‑ ‑ koniec nawigacji ‑ ‑ Należy pamiętać, że choć w oknie przeglądarki nie pojawią się komentarze, są one widoczne w źródle dokumentu, które każdy użytkownik może wyświetlić, dlatego trzeba pozostawiać jedynie
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po HTML5, CSS3 i grafice. Wydanie IV
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: