Co zawiera strona internetowa?

W poprzednim rozdziale wspomnieli艣my o edycji tekstu w Wordzie i formatowaniu. Jak pewnie zauwa偶yli艣cie, strony internetowe maj膮 troch臋 wsp贸lnego z tekstem zapisanym w RTF: mo偶na na nich wyr贸偶ni膰 nag艂贸wki, g艂贸wny tekst i ilustracje. Zwykle nie s膮 te偶 monochromatyczne 鈥 tekst mo偶e wyst臋powa膰 w r贸偶nych kolorach i krojach.

Skoro wyst臋puje tyle podobie艅stw 鈥 m贸g艂by艣 zapyta膰 鈥 czemu nie piszemy stron w programach typu Word? Sk膮d w og贸le potrzeba u偶ywania tych wszystkich edytor贸w tekstowych, o kt贸rych by艂a mowa w poprzednim rozdziale? Czemu tworzenie stron internetowych jest na tyle z艂o偶one, 偶eby zatrudnia膰 w tym celu specjalist贸w albo zapisywa膰 si臋 na klikunastogodzinne kursy?

Dokumenty HTML, czyli jaki j臋zyk rozumie przegl膮darka?

Zd膮偶yli艣my ju偶 wspomnie膰, 偶e dokumenty, kt贸re maj膮 by膰 otwierane przez przegl膮dark臋, powinny by膰 zapisywane w specjalnym formacie (*.html). Czym on si臋 r贸偶ni od zwyk艂ego tekstu? Przecie偶 zawarto艣膰 naszego pliku jak dot膮d by艂a tylko zwyk艂ym tekstem! Jak zatem "powiedzie膰" przegl膮darce, 偶eby zosta艂 sformatowany w okre艣lony przez nas spos贸b?

J臋zyk HTML

HTML jest to specjalny j臋zyk znacznik贸w, kt贸re umo偶liwiaj膮 nam okre艣lenie r贸l naszych element贸w na stronie. Mo偶emy za jego pomoc膮 przekaza膰, 偶e dany elemenent b臋dzie nag艂贸wkiem, akapitem b膮d藕 obrazkiem.

Jak pewnie ju偶 wiesz, strony internetowe nie sk艂adaj膮 si臋 tylko z blok贸w tekstu. Zwykle zawieraj膮 te偶 nawigacj臋, nag艂贸wek, stopk臋, odno艣niki do innych stron, itd. W tych przypadkach HTML tak偶e okazuje si臋 bardzo przydatny.

W艂a艣ciwie mo偶emy my艣le膰 o naszych elementach strony jak o klockach lego, z kt贸rych b臋dziemy budowa膰. Ka偶dy taki "klocek" musi by膰 zapisany w specjalny spos贸b. Nasze elementy opisywane s膮 przez tagi HTML. Jak wygl膮da przyk艂adowy tag?

Oto w艂a艣nie nasz pojedynczy tag. Jest on otoczony nawiasami tr贸jk膮tnymi: otwieraj膮cym < i zamykaj膮cym >. Umo偶liwia to przegl膮darce okre艣lenie, 偶e w艂a艣nie w tym miejscu znajduje si臋 nasz element i mo偶e ona okre艣li膰 jego przeznaczenie.

Co bardzo wa偶ne, wi臋kszo艣膰 element贸w musi by膰 zawarta mi臋dzy otwieraj膮cymi i zamykaj膮cymi tagami. Tagi zamykaj膮ce zawieraj膮 charakterystyczny /:

<element>Tutaj znajduje si臋 tre艣膰.element>

Poszczeg贸lne elementy HTML mog膮 by膰 zwykle zagnie偶d偶ane jeden wewn膮trz drugiego, na przyk艂ad:

<element>
Jestem rodzicem.
<element>
Jestem dzieckiem.
element>
element>

Warto ju偶 tutaj zaznaczy膰, 偶e nie wszystkie elementy wymagaj膮 tag贸w zamykaj膮cych. Nie mo偶na te偶 zagnie偶d偶a膰 wewn膮trz nich innych element贸w. S膮 to tak zwane puste elementy. Kt贸re to konkretnie, dowiecie si臋 ju偶 nied艂ugo w rozdziale zapoznaj膮cym z tajnikami HTML.

Elementy mog膮 r贸wnie偶 zawiera膰 atrybuty. Atrybuty element贸w zapisywane s膮 w ten spos贸b:

<element attribute="value">element>
<empty attribute="otherValue">

Separacja zawarto艣ci i prezentacji

Zanim zabierzesz si臋 do pisania swojego pierwszego kodu, warto wspomnie膰 o bardzo wa偶nej regule, kt贸ra obowi膮zuje programist贸w stron internetowych, a jest ni膮 separacja zawarto艣ci i prezentacji.

Dowiedzieli艣my si臋 ju偶, 偶e j臋zyk HTML s艂u偶y do opisu tre艣ci stron internetowych. Nie zawiera on 偶adnych informacji o tym, jak powinna wygl膮da膰 nasza strona. Aby nada膰 jej nasz wymarzony wygl膮d, musimy stworzy膰 "sk贸rk臋". W programowaniu WWW do tego celu s艂u偶膮 kaskadowe arkusze styl贸w, czyli CSS (ang. Cascading Style Sheets).

Important::Wa偶ne

Istnieje mo偶liwo艣膰 deklarowania styl贸w bezpo艣rednio w kodzie HTML (za pomoc膮 atrybutu style):

``` >Nie jest to jednak dobr膮 praktyk膮, poniewa偶 kod opisuj膮cy prezentacj臋 strony jest 艣ci艣le powi膮zany z kodem opisuj膮cym jej tre艣膰. Du偶o 艂atwiej wprowadza膰 zmiany w wygl膮dzie strony oraz utrzymywa膰 kod, kiedy te dwie warstwy s膮 logicznie od siebie oddzielone. To w艂a艣nie nazywamy **separacj膮 zawarto艣ci i prezentacji**. > >Style piszemy w osobnych plikach z rozszerzeniem `*.css` i do艂膮czamy do naszego dokumentu HTML w specjalny spos贸b. Jak? Dowiesz si臋 ju偶 nied艂ugo!

J臋zyk CSS

J臋zyk CSS r贸偶ni si臋 znacznie w zapisie od HTML. HTML pozwala nam stworzy膰 tre艣膰 (struktur臋) strony, natomiast CSS to lista regu艂 opisuj膮cych w jaki spos贸b jej elementy maj膮 zosta膰 wy艣wietlone przez przegl膮dark臋.

Sk艂adnia CSS operuje na selektorach. Za pomoc膮 selektor贸w wybieramy elementy strony, kt贸rym chcemy nada膰 okre艣lony wygl膮d. Kod zapisuje si臋 w spos贸b:

selektor {
w艂a艣ciwo艣膰: warto艣膰;
}

Przyk艂adowo:

Powy偶szy kod ustawia kolor fontu na niebieski dla wszystkich element贸w typu p (p to znacznik reprezentuj膮cy akapit, z angielskiego paragraph).