Jeśli możesz, wyobraź sobie czas przed wynalezieniem Internetu. Strony internetowe nie istniały, a książki, drukowane na papierze i mocno oprawione, były Twoim podstawowym źródłem informacji. Wymagało to sporego wysiłku i czytania, aby znaleźć informację, o którą ci chodziło.
Dzisiaj możesz otworzyć przeglądarkę internetową, przejść do wybranej wyszukiwarki i szukać dalej. Każdy kawałek wyobrażalnej informacji spoczywa na wyciągnięcie ręki. I są szanse, że ktoś gdzieś zbudował stronę internetową z myślą o twoich poszukiwaniach.
W tej książce zamierzam pokazać ci, jak budować własne strony internetowe, używając dwóch najbardziej dominujących języków komputerowych – HTML i CSS.
Zanim rozpoczniemy naszą podróż w celu nauczenia się jak budować strony internetowe przy użyciu HTML i CSS, ważne jest aby zrozumieć różnice pomiędzy tymi dwoma językami, składnię każdego z nich i pewną wspólną terminologię.
Czym jest HTML & CSS?
HTML, HyperText Markup Language, nadaje treści strukturę i znaczenie poprzez definiowanie tej treści jako, na przykład, nagłówki, akapity lub obrazy. CSS, czyli Kaskadowe Arkusze Stylów, jest językiem prezentacji stworzonym do stylizacji wyglądu treści – używając, na przykład, czcionek lub kolorów.
Te dwa języki – HTML i CSS – są od siebie niezależne i tak powinno pozostać. CSS nie powinien być pisany wewnątrz dokumentu HTML i vice versa. Zasadą jest, że HTML zawsze będzie reprezentował treść, a CSS zawsze będzie reprezentował wygląd tej treści.
Zrozumiawszy różnicę pomiędzy HTML i CSS, zagłębmy się w HTML bardziej szczegółowo.
Zrozumienie powszechnych terminów HTML
Podczas rozpoczynania pracy z HTML, prawdopodobnie spotkasz się z nowymi – i często dziwnymi – terminami. Z czasem staniesz się coraz bardziej zaznajomiony z nimi wszystkimi, ale trzy powszechne terminy HTML, od których powinieneś zacząć to elementy, znaczniki i atrybuty.
Elementy
Elementy są identyfikowane przez użycie mniejszych i większych nawiasów kątowych, < >, otaczających nazwę elementu. Tak więc, element będzie wyglądał jak poniżej:
1 2
<a>
Tagi
Użycie mniejszego i większego nawiasu kątowego wokół elementu tworzy coś, co jest znane jako znacznik. Znaczniki najczęściej występują w parach znaczników otwierających i zamykających.
Znacznik otwierający oznacza początek elementu. Składa się on ze znaku mniej niż, po którym następuje nazwa elementu, a następnie kończy się znakiem większym niż; na przykład, <div>.
Znacznik zamykający oznacza koniec elementu. Składa się ze znaku less-than, po którym następuje ukośnik w przód i nazwa elementu, a następnie kończy się znakiem greater-than; na przykład </div>.
Treść, która znajduje się pomiędzy znacznikami otwierającymi i zamykającymi, jest treścią tego elementu. Na przykład link kotwicy będzie miał znacznik otwierający <a> i zamykający </a>. To, co znajdzie się pomiędzy tymi dwoma znacznikami, będzie treścią linku zakotwiczenia.
Zatem, znaczniki zakotwiczenia będą wyglądały trochę tak:
1 2
<a>...</a>
Atrybuty
Atrybuty są właściwościami używanymi do dostarczania dodatkowych informacji o elemencie. Do najczęściej spotykanych atrybutów należą atrybut id, który identyfikuje element; atrybut class, który klasyfikuje element; atrybut src, który określa źródło dla zawartości osadzalnej; oraz atrybut href, który zapewnia odniesienie hiperłącza do zasobu, do którego prowadzi link.
Atrybuty są definiowane wewnątrz znacznika otwierającego, po nazwie elementu. Ogólnie atrybuty zawierają nazwę i wartość. Format dla tych atrybutów składa się z nazwy atrybutu, po której następuje znak równości, a następnie cytowana wartość atrybutu. Na przykład, element <a> zawierający atrybut href wyglądałby następująco:
1 2
<a href="http://shayhowe.com/">Shay Howe</a>
Common HTML Terms Demo
Zobacz Pen Common HTML Terms by Shay Howe (@shayhowe) on CodePen.
Poprzedni kod wyświetli tekst „Shay Howe” na stronie internetowej i przeniesie użytkowników do http://shayhowe.com/ po kliknięciu na tekst „Shay Howe”. Element zakotwiczenia jest zadeklarowany za pomocą znaczników otwierających <a> i zamykających </a> obejmujących tekst, a atrybut referencyjny hiperłącza i wartość są zadeklarowane za pomocą href="http://shayhowe.com" w znaczniku otwierającym.
Fig 1
Zarys składniHTML zawierający element, atrybut, i znacznik
Gdy już wiesz, czym są elementy, znaczniki i atrybuty języka HTML, przyjrzyjmy się układaniu naszej pierwszej strony internetowej. Jeśli coś wygląda tu na nowe, nie martw się – rozszyfrujemy to w trakcie pracy.
Ustawianie struktury dokumentu HTML
Dokumenty HTML są zwykłymi dokumentami tekstowymi zapisanymi z rozszerzeniem pliku .html zamiast rozszerzenia pliku .txt. Aby rozpocząć pisanie HTML, potrzebujesz najpierw edytora tekstu, którego możesz swobodnie używać. Niestety nie dotyczy to Microsoft Word lub Pages, ponieważ są to edytory tekstu bogatego. Dwa z bardziej popularnych edytorów tekstu do pisania HTML i CSS to Dreamweaver i Sublime Text. Darmowe alternatywy obejmują również Notepad++ dla Windows i TextWrangler dla Mac.
Deklaracja typu dokumentu, czyli <!DOCTYPE html>, informuje przeglądarki internetowe, która wersja HTML jest używana i jest umieszczana na samym początku dokumentu HTML. Ponieważ będziemy używać najnowszej wersji HTML, nasza deklaracja typu dokumentu to po prostu <!DOCTYPE html>. Po deklaracji typu dokumentu, element <html> oznacza początek dokumentu.
Wewnątrz elementu <html>, element <head> identyfikuje górę dokumentu, włączając w to wszelkie metadane (towarzyszące informacje o stronie). Zawartość wewnątrz elementu <head> nie jest wyświetlana na samej stronie internetowej. Zamiast tego może zawierać tytuł dokumentu (który jest wyświetlany na pasku tytułowym w oknie przeglądarki), odnośniki do dowolnych plików zewnętrznych lub inne korzystne metadane.
Wszystkie widoczne treści w obrębie strony internetowej będą mieściły się w elemencie <body>. Struktura typowego dokumentu HTML wygląda następująco:
HTML Document Structure Demo
See the Pen HTML Document Structure by Shay Howe (@shayhowe) on CodePen.
Poprzedni kod pokazuje dokument zaczynający się od deklaracji typu dokumentu, <!DOCTYPE html>, po którym następuje bezpośrednio element <html>. Wewnątrz elementu <html> znajdują się elementy <head> oraz <body>. Element <head> zawiera kodowanie znaków strony poprzez znacznik <meta charset="utf-8"> oraz tytuł dokumentu poprzez element <title>. Element <body> zawiera nagłówek poprzez element <h1> oraz akapit poprzez element <p>. Ponieważ zarówno nagłówek, jak i akapit są zagnieżdżone w elemencie <body>, są one widoczne na stronie internetowej.
Gdy element jest umieszczony wewnątrz innego elementu, znanego również jako zagnieżdżony, dobrym pomysłem jest wcięcie tego elementu, aby utrzymać strukturę dokumentu dobrze zorganizowaną i czytelną. W poprzednim kodzie, oba elementy <head> i <body> zostały zagnieżdżone – i wcięte – wewnątrz elementu <html>. Wzorzec wcięć dla elementów jest kontynuowany, gdy nowe elementy są dodawane wewnątrz elementów <head> i <body>.
Elementy samozamykające
W poprzednim przykładzie, element <meta> miał tylko jeden znacznik i nie zawierał znacznika zamykającego. Nie obawiaj się, było to zamierzone. Nie wszystkie elementy składają się z tagów otwierających i zamykających. Niektóre elementy po prostu otrzymują swoją zawartość lub zachowanie z atrybutów wewnątrz pojedynczego znacznika. Element <meta> jest jednym z takich elementów. Zawartość poprzedniego elementu <meta> jest przypisywana za pomocą atrybutu charset i wartości. Inne często spotykane elementy samozamykające się to
<br>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>
Przedstawiona tutaj struktura, wykorzystująca typ dokumentu <!DOCTYPE html> oraz elementy <html><head> i <body>, jest dość powszechna. Będziemy chcieli zachować tę strukturę dokumentu pod ręką, ponieważ będziemy jej często używać podczas tworzenia nowych dokumentów HTML.
Weryfikacja kodu
Niezależnie od tego, jak ostrożni jesteśmy podczas pisania naszego kodu, nieuchronnie popełnimy błędy. Na szczęście, podczas pisania HTML i CSS mamy do dyspozycji walidatory, które sprawdzają naszą pracę. W3C zbudowało zarówno walidatory HTML jak i CSS, które skanują kod w poszukiwaniu błędów. Walidacja naszego kodu nie tylko pomaga w jego poprawnym renderowaniu we wszystkich przeglądarkach, ale także pomaga nam nauczyć się najlepszych praktyk pisania kodu.
W praktyce
Jako projektanci stron internetowych i front-end developerzy, mamy luksus uczestniczenia w wielu wspaniałych konferencjach poświęconych naszemu rzemiosłu. Zamierzamy stworzyć własną konferencję, Styles Conference, i zbudować dla niej stronę internetową w kolejnych lekcjach. Zaczynamy!
Fig 1
Nasze pierwsze kroki w budowaniu naszej strony internetowej Konferencji Stylów
Zmieńmy trochę biegi, odchodząc od HTML, i przyjrzyjmy się CSS. Pamiętaj, HTML zdefiniuje treść i strukturę naszych stron internetowych, podczas gdy CSS zdefiniuje styl wizualny i wygląd naszych stron internetowych.
Zrozumienie wspólnych terminów CSS
Oprócz terminów HTML, istnieje kilka wspólnych terminów CSS z którymi będziesz chciał się zapoznać. Terminy te obejmują selektory, właściwości i wartości. Tak jak w przypadku terminologii HTML, im więcej pracujesz z CSS, tym bardziej te terminy będą stawały się drugą naturą.
Selektory
Jak elementy są dodawane do strony internetowej, mogą być stylizowane przy użyciu CSS. Selektor wyznacza dokładnie, który element lub elementy w naszym HTML-u należy obrać za cel i zastosować do nich style (takie jak kolor, rozmiar i położenie). Selektory mogą zawierać kombinację różnych kwalifikatorów aby wybrać unikalne elementy, wszystko zależy od tego jak bardzo chcemy być szczegółowi. Na przykład, możemy chcieć wybrać każdy akapit na stronie, lub możemy chcieć wybrać tylko jeden konkretny akapit na stronie.
Selektory zazwyczaj kierują się na wartość atrybutu, jak na przykład id lub class, lub kierują się na typ elementu, jak na przykład <h1> lub <p>.
W CSS, po selektorach następują nawiasy klamrowe, {}, które obejmują style, które mają być zastosowane do wybranego elementu. Selektor tutaj jest skierowany do wszystkich elementów <p>.
1 2
p { ... }
Właściwości
Po wybraniu elementu, właściwość określa style, które zostaną zastosowane do tego elementu. Nazwy właściwości pojawiają się po selektorze, wewnątrz nawiasów klamrowych, {}, i bezpośrednio przed dwukropkiem, :. Istnieje wiele właściwości, z których możemy korzystać, takich jak backgroundcolorfont-sizeheight i width, a nowe właściwości są często dodawane. W poniższym kodzie definiujemy właściwości color i font-size, które mają być stosowane do wszystkich elementów <p>.
1 2 3 4 5
p { color: ...; font-size: ...; }
Wartości
Do tej pory wybraliśmy element za pomocą selektora i określiliśmy jaki styl chcemy zastosować za pomocą właściwości. Teraz możemy określić zachowanie tej właściwości za pomocą wartości. Wartości mogą być identyfikowane jako tekst pomiędzy dwukropkiem, :, a średnikiem, ;. Tutaj zaznaczamy wszystkie elementy <p> i ustawiamy wartość właściwości color na orange oraz wartość właściwości font-size na 16 pikseli.
1 2 3 4 5
p { color: orange; font-size: 16px; }
Przeglądając, w CSS nasz zestaw reguł zaczyna się od selektora, po którym następują nawiasy klamrowe. Wewnątrz tych nawiasów klamrowych znajdują się deklaracje składające się z par właściwości i wartości. Każda deklaracja zaczyna się od właściwości, po której następuje dwukropek, wartość właściwości, a na końcu średnik.
Powszechną praktyką jest wcięcie par właściwości i wartości wewnątrz nawiasów klamrowych. Podobnie jak w przypadku HTML, wcięcia te pomagają utrzymać nasz kod zorganizowany i czytelny.
Fig 1
Zarys składni CSS zawierający selektor, właściwości, i wartości
Znajomość kilku popularnych terminów i ogólnej składni CSS to świetny początek, ale mamy jeszcze kilka rzeczy do nauczenia się zanim wskoczymy zbyt głęboko. Konkretnie, musimy przyjrzeć się bliżej jak działają selektory w CSS.
Praca z selektorami
Selektory, jak wcześniej wspomniano, wskazują które elementy HTML są stylizowane. Ważne jest by w pełni zrozumieć jak używać selektorów i jak można je wykorzystać. Pierwszym krokiem jest zapoznanie się z różnymi typami selektorów. Zaczniemy od najbardziej powszechnych selektorów: selektorów typu, klasy i ID.
Selektory typu
Selektory typu kierują elementy do ich typu. Na przykład, jeśli chcemy kierować na wszystkie elementy podziału, <div>, użyjemy selektora typu div. Poniższy kod pokazuje selektor typu dla elementów podziału, jak również odpowiadający mu HTML, który jest wybierany.
CSS
1 2
div { ... }
HTML
1 2 3
<div>...</div> <div>...</div>
Selektory klas
Selektory klas pozwalają nam wybrać element na podstawie wartości atrybutu elementu class. Selektory klas są nieco bardziej specyficzne niż selektory typów, ponieważ wybierają one konkretną grupę elementów, a nie wszystkie elementy jednego typu.
Kolektory klas pozwalają nam na zastosowanie tych samych stylów do różnych elementów jednocześnie poprzez użycie tej samej wartości atrybutu class w wielu elementach.
Wewnątrz CSS, klasy są oznaczane przez wiodącą kropkę, ., po której następuje wartość atrybutu class. W tym przypadku selektor klasy wybierze dowolny element zawierający class wartość atrybutu awesome, w tym zarówno elementy podziału, jak i akapity.
SelektoryID są jeszcze bardziej precyzyjne niż selektory klas, ponieważ celują tylko w jeden unikalny element na raz. Tak jak selektory klas używają wartości atrybutu elementu class jako selektora, selektory ID używają wartości atrybutu elementu id jako selektora.
Niezależnie od typu elementu, na którym się pojawiają, wartości atrybutu id mogą być użyte tylko raz na stronie. Jeśli są używane, powinny być zarezerwowane dla znaczących elementów.
W CSS, selektory ID są oznaczane przez wiodący znak hash, #, po którym następuje wartość atrybutu id. W tym przypadku selektor ID wybierze tylko element zawierający id wartość atrybutu shayhowe.
CSS
1 2
#shayhowe { ... }
HTML
1 2
<div>...</div>
Dodatkowe selektory
Selektory są niezwykle potężne, a selektory przedstawione tutaj są najczęściej spotykanymi selektorami z jakimi się zetkniemy. Te selektory to również tylko początek. Istnieje wiele bardziej zaawansowanych selektorów i są one łatwo dostępne. Kiedy poczujesz się komfortowo z tymi selektorami, nie bój się spojrzeć na niektóre z bardziej zaawansowanych selektorów.
W porządku, wszystko zaczyna się układać w całość. Dodajemy elementy do strony wewnątrz naszego HTML, a następnie możemy wybrać te elementy i zastosować do nich style używając CSS. Teraz połączmy kropki pomiędzy naszym HTML i CSS, i sprawmy by te dwa języki pracowały razem.
Odniesienie CSS
Aby nasz CSS mógł rozmawiać z naszym HTML, musimy odwołać się do naszego pliku CSS w naszym HTML. Najlepszą praktyką odwoływania się do naszego CSS jest zawarcie wszystkich naszych stylów w pojedynczym zewnętrznym arkuszu stylów, do którego odwołujemy się z poziomu elementu <head> naszego dokumentu HTML. Użycie pojedynczego zewnętrznego arkusza stylów pozwala nam na użycie tych samych stylów na całej stronie i szybkie wprowadzanie zmian w całym serwisie.
Inne opcje dodawania CSS
Inne opcje odwołań do CSS to użycie stylów wewnętrznych i inline. Możesz natknąć się na te opcje w naturze, ale są one generalnie odrzucane, jako że czynią one aktualizację stron kłopotliwą i nieporęczną.
Aby stworzyć nasz zewnętrzny arkusz stylów CSS, będziemy chcieli użyć naszego edytora tekstu ponownie do stworzenia nowego pliku tekstowego z rozszerzeniem .css. Nasz plik CSS powinien być zapisany w tym samym folderze, lub podfolderze, w którym znajduje się nasz plik HTML.
Wewnątrz elementu <head> dokumentu HTML, element <link> jest używany do określenia relacji pomiędzy plikiem HTML a plikiem CSS. Ponieważ łączymy się z CSS, używamy atrybutu rel o wartości stylesheet, aby określić ich relację. Ponadto, atrybut href (lub odwołanie do hiperłącza) jest używany do określenia lokalizacji, lub ścieżki, pliku CSS.
Rozważmy następujący przykład dokumentu HTML <head> element, który odwołuje się do pojedynczego zewnętrznego arkusza stylów.
Aby CSS renderował się poprawnie, ścieżka wartości atrybutu href musi być bezpośrednio skorelowana z miejscem, w którym zapisany jest nasz plik CSS. W poprzednim przykładzie, plik main.css jest przechowywany w tej samej lokalizacji co plik HTML, znany również jako katalog główny.
Jeśli nasz plik CSS znajduje się w podkatalogu lub podfolderze, wartość atrybutu href musi być odpowiednio skorelowana z tą ścieżką. Na przykład, gdyby nasz plik main.css był przechowywany w podkatalogu o nazwie stylesheets, wartość atrybutu href byłaby stylesheets/main.css, używając ukośnika w przód, aby wskazać przejście do podkatalogu.
W tym momencie nasze strony zaczynają ożywać, powoli, ale pewnie. Nie zagłębialiśmy się zbytnio w CSS, ale być może zauważyłeś, że niektóre elementy mają domyślne style, których nie zadeklarowaliśmy w naszym CSS. Oznacza to, że przeglądarka narzuca swoje własne preferowane style CSS dla tych elementów. Na szczęście możemy nadpisać te style dość łatwo, co właśnie zrobimy używając resetowania CSS.
Używanie resetowania CSS
Każda przeglądarka ma swoje własne domyślne style dla różnych elementów. Sposób, w jaki Google Chrome renderuje nagłówki, akapity, listy i tak dalej może się różnić od tego, jak robi to Internet Explorer. Aby zapewnić kompatybilność między przeglądarkami, powszechnie stosuje się resetowanie CSS.
Resetowanie CSS bierze każdy wspólny element HTML z predefiniowanym stylem i zapewnia jeden zunifikowany styl dla wszystkich przeglądarek. Te resety zazwyczaj obejmują usunięcie wszelkich rozmiarów, marginesów, paddingów lub dodatkowych stylów i stonowanie tych wartości. Ponieważ CSS kaskaduje od góry do dołu – więcej na ten temat wkrótce – nasz reset musi być na samym szczycie naszego arkusza stylów. Zapewnia to, że te style są odczytywane jako pierwsze i że wszystkie przeglądarki internetowe pracują na wspólnym poziomie bazowym.
Istnieje kilka różnych sposobów resetowania, z których każdy ma swoje własne zalety. Jednym z najbardziej popularnych jest reset Erica Meyera, który został przystosowany do uwzględnienia stylów dla nowych elementów HTML5.
Jeśli czujesz się nieco bardziej odważny, istnieje również Normalize.css, stworzony przez Nicolasa Gallaghera. Normalize.css skupia się nie na użyciu twardego resetu dla wszystkich wspólnych elementów, ale zamiast tego na ustawieniu wspólnych stylów dla tych elementów. Wymaga to lepszego zrozumienia CSS, jak również świadomości tego, co chciałbyś, aby twoje style były.
Kompatybilność między przeglądarkami & Testowanie
Jak wcześniej wspomniano, różne przeglądarki renderują elementy w różny sposób. Ważne jest, aby rozpoznać wartość w kompatybilności między przeglądarkami i testowaniu. Strony nie muszą wyglądać dokładnie tak samo w każdej przeglądarce, ale powinny być do siebie zbliżone. To, które przeglądarki chcesz wspierać i w jakim stopniu, jest decyzją, którą musisz podjąć w oparciu o to, co jest najlepsze dla twojej strony.
W sumie jest kilka rzeczy, na które trzeba uważać przy pisaniu CSS. Dobrą wiadomością jest to, że wszystko jest możliwe, i z odrobiną cierpliwości wszystko to rozgryziemy.
W praktyce
Powracając do miejsca, w którym ostatnio skończyliśmy na naszej stronie konferencyjnej, zobaczmy czy możemy dodać trochę CSS.
Czas sprawdzić naszą pracę i zobaczyć czy nasz HTML i CSS się dogadują. Teraz otwarcie naszego pliku index.html (lub odświeżenie strony, jeśli jest już otwarta) w przeglądarce internetowej powinno pokazać nieco inne wyniki niż poprzednio.
Fig 1
Nasza strona konferencji Styles z zresetowanym CSS
Demo & Kod źródłowy
Poniżej możesz obejrzeć stronę Styles Conference w jej obecnym stanie, jak również pobrać kod źródłowy strony w jej obecnym stanie.
Zobacz stronę Konferencji Stylów lub pobierz kod źródłowy (plik Zip)
Podsumowanie
Do tej pory było dobrze! Zrobiliśmy kilka dużych kroków w tej lekcji.
Pomyśl tylko, że teraz znasz podstawy HTML i CSS. W miarę jak będziemy kontynuować i spędzisz więcej czasu na pisaniu HTML i CSS, staniesz się znacznie bardziej komfortowy w posługiwaniu się tymi dwoma językami.
Aby podsumować, do tej pory omówiliśmy następujące zagadnienia:
Różnica między HTML i CSS
Zapoznanie się z elementami, znacznikami i atrybutami HTML
Ustalenie struktury swojej pierwszej strony internetowej
Zapoznanie się z selektorami CSS, właściwościami i wartościami
Praca z selektorami CSS
Odwoływanie się do CSS w twoim HTML
Wartość resetowania CSS
Przyjrzyjrzyjmy się teraz bliżej HTML i nauczmy się trochę o semantyce.
