16. HTML, czyli przeglądarka interpretuje język programowania stron

IV. PRO G RA MO W A NIE STRON INTER NE TOWYC H

16. HTML, czyli przeglądarka interpretuje język programowania stron

N A T E J L E K C J I :

• dowiesz się, czym jest H TM L i CSS;

• poznasz podstawowe znaczniki i budowę dokum entu HTML;

• dowiesz się, jakie znaczenie dla wyglądu strony m a CSS.

H TM L i CSS. Każdy o nich słyszał, ale czy w iesz, czym tak napraw dę są? Czy to języki program ow ania, a jeśli tak, to jak urucham ia się program y? A może jest inaczej, niż ci się w ydaje? Ten rozdział rozwieje twoje w ątpliw ości.

16.1. Co interpretuje przeglądarka, czyli czym jest dokument HTM L

Nasze rozw ażan ia zacznijm y od definicji.

HTML (ang. hypertext m arkup language) to hipertekstowy język znaczników.

Nie jest językiem programowania, poniew aż nie układa się w nim program ów kom puterowych. Służy do opisu stron internetowych za pom ocą znaczników i tekstu. Przeglądarka interpretuje język znaczników i na tej podstawie w yśw ie­

tla strony.

P ierw sza w ątp liw ość rozwiana. HTM L nie jest językiem program ow ania, ch o ­ ciaż często w języku potocznym tak się o nim mówi. W uproszczeniu m ożna pow iedzieć, że o pisuje on za pom ocą tekstu w ygląd i zaw arto ść stron interne­

tow ych. Często mówi się także, że ten tekst to program stron. Stąd nieporozu­

m ienia zw iązan e z interpretacją nazwy.

Skoro jest to język znaczników, w arto w iedzieć, czym one są. W te kście łatw o je odnaleźć, bo w pisuje się je pom iędzy znaki < >. Rozróżniam y dw a ich rodzaje: znaczniki otwarcia < > i znaczniki zam knięcia </ >. Je ś li posta­

now isz użyć któregoś z nich, np. w o dn iesieniu do tekstu, to przed nim u m ie­

ścisz odpow iedni znacznik w < >, a na jego końcu w </ >. Dzięki znacznikom m ożna o k re śla ć sposób w yśw ietlan ia obiektów na stronie.

Przykład:

Tekst kilka stów na stronie ma się pojawić pogrubiony. Należy w ięc go um ieścić pom iędzy znacznikami: < b > k ilk a słó w < /b> . Inne znaczniki poznasz w dal­

szej części podręcznika.

W nazwie HTM L w ystępuje też słowo hipertekstowy. Dlaczego? Zapew ne wiesz, czym są linki (odsyłacze) na stronach internetowych. To, że działają,

16. HT M L , CZYLI P R Z EG L Ą D AR KA IN TER PR ETU JE JĘZ YK .

w ynika z działania hipertekstu. Dzięki temu sieć stron internetowych może funkcjonować, a użytkow nik - odnaleźć żądaną stronę.

J e śli opis strony w HTM L jest praw idłowy, to w ynik jego działania m ożna zo b a ­ czyć w przeglądarce. To ona interpretuje tekst HTM L i zgodnie z nim w yśw ietla stronę w sw oim oknie.

W inform atyce następuje ciągły postęp. Nic dziwnego, że i HTM L się rozwija.

Najnow sze inform acje na tem at szczegółow ych zagadnień zw iązan ych z HTM L znajdziesz na stronie World Wide Web Consortium lub Web Hypertext A pp li­

cation Technology Working Group. Są to organizacje odp ow ied zialn e za roz­

wój języka znaczników.

W naszych rozw ażaniach będziem y używ ać składni języka HTML5.

Gdy program strony jest już ułożony, należy go za p isa ć w odpow iednim fo rm a­

cie (rozszerzenie .HTML). Je śli u m ieścisz go na se rw erze W W W pod pewnym adresem , powinien on otrzym ać nazw ę index.html. Przeglądarka od niego w łaśn ie zaczn ie w czytyw an ie i w yśw ietlan ie strony. O czy w iście inne pliki z program em HTM L składające się na stronę, np. w yśw ietlające podstronę, m ożesz nazw ać dow olnie, zachow ując rozszerzenie.

16.2. Kaskadowe arkusze stylów, czyli określamy wygląd strony

HTM L opisuje głów nie tre ść strony. Gdyby w nim opisyw ać także form ę pre­

zentacji, np. kolory, tła itp., teksty program u stałyby się bardzo obszerne.

Z każdym nowym sposobem w yśw ietlan ia, anim acji itp. trzeba by dodaw ać do HTM L nowe znaczniki. W ym u szałoby to także częste zm iany w przeglądar­

kach, by u jednolicić w yśw ietlan ie stron. Dlatego postanow iono, żeby o d d zie lić w arstw ę treści od formy, i opracow ano CSS.

CSS (Cascading Style Sheets) to język opisujący reguły, w edług których p rze ­ glądarka w yśw ie tla strony WWW.

A rku sz stylów składa się z reguł. Każda z nich o kre śla styl dla danych fra g ­ m entów dokum entu HTML. Tej sam ej reguły m ożna używ ać dla wielu fra g ­ mentów. Reguła składa się z se lektora oraz deklaracji i ma formę:

se lektor {w łaściw ość: wartość}

Pom ocne są także biblioteki zw ane CSS Frameworks ułatw iające de fin io w a­

nie stylów d la tw orzonych stron.

16.3. Jaki edytor, czyli wybieramy program do edycji HTML

Ponieważ HTML to tekst, do jego utworzenia jest wymagany edytor. Można użyć notatnika lub innego prostego programu. Warto jednak znaleźć edytor, który oprócz m ożliwości pisania ma dodatkowe funkcje, np. zaznaczanie kolo­

rem znaczników, liczb itp. W sieci znajdziecie ich wiele. W naszych przykładach

CSS

IV. PRO G RA MO W A NIE STRON INT ER NE TOWYC H

będziem y używać darmowego Notepad++. Możesz go pobrać z internetu. Dla ułatwienia skonfiguruj go tak, by menu było opisane w języku polskim (rys. 16.1.).

Q f new 1 - Notepad++

File Edit Search View En codin g Language Settings M a cro Run Plu g in s W in d o w ?

PCD

. new 1

,3 1 * ac« łfe | p c Preferences...

Style Configurator..T®

Shortcut Mapper...

Import >

Edit P op up ContextM enu

Preferencje

Edycja Nowy dokument Folder domyślny Historia ostatnich plików Powiązania plików Menu języków Ustawienia tabulacji Druk Kopia zapasowa Autouzupełnianie Wieloinstancyjność Ogranicznik Chmura Search Engine Inne

n e w 1 - N otep ad + ^

P lik Edycja Szukaj

o l9 M l i © ^

Język

Polski KblpTbl3 TM/HI latvieśu valoda Zeneize L ie t iiń j Letzebuergesch

MaKeaoHCKii ja3MK

Bahasa Melayu (i MOHTO/1 X3il

Norsk Nynorsk Ocatan

Romana PyCCKMM ] Żemaitiu ruoda

Sardu Srpski CpncKii

80GO3

Slovenćna Slovenśana Espanol Espańol argentina Svenska Tagalog

T041K

W id o k Fo rm at

>&l 4 %il

S kładnia U staw ienia

l i * cr| a ^

Pasek zakładek

□ ukryj

□ wieteSni

n Pionowo 0 M a ł y

□ Blokowanie (bez przeciągania) 0 Zaznacz nieaktywne zakładki 0 Zaznacz górę na pomarańczowo 0 Przycisk zamykania na każdej zakładce

□ Podwójne kłiknięae zamyka dokument

□ Exit on dose the last tab

□ Ukryj (klawisz Alt lub F 10 przełącza widoczność)

U ru c h o m W ty c z k i O k n o ?

CB a I 5j n □ (2 E L i < S 1 I E I I gnew 1 □

struktura dokum entu HTML

Rys. 16.1. P o lskie m enu w edytorze Notepad++

16.4. Używamy znaczników, czyli pierwsze kroki w HTML

Zanim zabierzesz się do pracy, musisz poznać strukturę dokumentu HTML (rys.

16.2.). Każdy dokum ent HTML musi zaw ierać znaczniki i treści pom iędzy nimi.

Dokument HTML

112

Rys. 16.2. Struktura dokum en tu HTML

16. HT M L , CZYLI PRZ EG L Ą DARKA INTER PR ETU JE JĘZ YK .

Otw órz edytor i w pisz do niego tre ść dokum entu HTM L (rys. 16.3.).

< ! D O C T Y P E h t m l >

< h t m l >

< h e a d >

< m e t a c h a r s e t = " U T F - 8 " >

< / h e a d >

< b o d y >

T e n t e k s t w y ś w i e t l i p r z e g l ą d a r k a

< / b o d y >

< / h t m l >

Rys. 16.3. Tekst H TM L5 przykładow ej strony

<! d o c t y p e h tm l> inform uje przeglądarkę, że strona jest zap isan a zgodnie ze standardem HTML. Je śli pom in iesz ten znacznik, niektóre przeglądarki mogą niepopraw nie w yśw ie tla ć stronę.

C a ło ść tekstu musi się znajdow ać pom iędzy znacznikam i < h tm l> a < /h tm l> . W nagłówku um ieszczono znacznik ustawiający stronę kodową strony na UTF-8.

Zapewni to prawidłowe w yśw ietlanie polskich znaków.

Zn acznik <body> </body> zaw ie ra tekst, który zostanie w yśw ietlon y w p rze ­ glądarce jako treść strony (rys. 16.4.).

g f n«w 1 - rictepłd* • Wfc Edycja S:ukaj

fi* e •

Widok Fomut SfcUdnw Ustawienia Ntcedzw Maku Uruchom Wtyczki Okno

,3 ! 4 | a » i

ail

Aby zapewnić prawidłowe kolorowanie i wyświetlanie HTML, wybierz HTML z menu Składnia.

Sf new 1 - Notepad+ +

t Edycja Szukaj W id o k Form at Składnia Ustawienia N arzędzia M akra K oduj w ANSI

• K od uj w UTF-8

K oduj w U T F-8 -B O M ^ K oduj w UC S-2 BE B O M K oduj w UC S-2 LE B O M Z estaw znaków

Konw e rtuj na fo rm a t ANSI Konw ertuj na fo rm a t UTF-8 Konw ertuj na fo rm a t U T F-8 -B O M Konw ertuj na fo rm a t U C S-2 BE B O M Konw ertuj na fo rm a t U C S-2 LE B O M

PPH!

Prawidłowe wyświetlanie przez przeglądarką polskich znaków zapewni kodowanie w UTF-8.

Zapisując plik, wybierz odpowiedni typ i zadbaj o nadanie rozszerzenia HTML.

[^ f *new 1 - N ctepad* ♦

P lik Edycja Szukaj W ido k Form at Składnia Ustawienia Narzędzia

a i i & i * p

c\*

< ! D O C T Y &

□ <html>

[—j <head>

<meta charset*"DTF-8">

</head>

| <body>

Ten tefcst wyświetli przeglądarka

</body>

</html>

Nazwa pliku:

Zapisz jako typ: Hyper Text M arkup Language file (*.html;*.htm;ł .shtmł;*.shtm;*j(Html;*Jcht;*.hta)

Rys. 16.4. Edycja tekstu HTM L5 w Notepad++

IV. PRO G RA MO W A NIE STRON INTER NE TOWYC H

P lik z tw oją stroną po podwójnym kliknięciu powinien o tw orzyć się w przeg lą­

darce dom yślnej dla system u (rys. 16.5.).

E3

X

O tał ^© file:///G;/index.HTML

Ten tekst wyświetli przeglądarka

Rys. 16.5. Efekt interpretacji pliku HTM L z przykładu przez przeglądarkę

P ełn ą listę znaczników HTM L oraz opis ich stosow ania i efekty, jakie przyn o ­ szą na stronie, zn ajd zie sz w internecie. N iektóre z nich poznasz w przykładach z następnych rozdziałów. W arto jednak zw ró cić uwagę na najczęściej używ ane znaczniki, które za czę ły funkcjonow ać w wersji języka H TM L5 (tab. 16.1.).

Znacznik Efekt działania

<section> </section>

<header> </header>

<article> </article>

<aside> </aside>

<nav> </nav>

<footer> </footer>

<main> </main>

< figu re> < / fig u re >

<figcaption>

<hl>, <h2>, <h3>, <h4>, <h5>,

<h5>

T w orzy now ą sekcję tre ści w yśw ietlanej na stronie. M ożna ją porów nać do p o ­ działu dokum en tu w W ordzie za pom ocą Ctrl+Enter.

T w orzy nagłów ek strony lub sekcji.

U m ieszcza na stronie niezm ienną część pew nej treści, np. tem at dyskusji przed kom entarzam i w prow adzanym i przez czytelników .

P ozw ala na w yśw ie tlan ie treści do d atko ­ w ych, np. jako sid e bar (boczny, w ysuw any pasek na stronie internetowej).

P ozw ala utw orzyć głów ne m enu strony do nawigacji po najw ażniejszych jej treściach.

Tw orzy stopkę strony, np. zaw ierającą in­

form acje o w ła ścicie lu strony i jej twórcy.

W skazuje głów ną tre ść strony. Dzięki tem u strona w te lefo n ie w yśw ietli naj­

pierw to, co jest na niej najw ażniejsze, bez kon ieczn ości sięgania do menu.

W yśw ie tla ilustracje itp.

Um ieszczony w ew nątrz < figure>

< /figu re> w staw ia na stronę podpis obiektu.

Zn a czn iki nagłów ków znane z w cześn ie j­

szych w ersji HTML. W HTM L5 m ożna je d ­ nak używ ać w ięcej niż jednego nagłów ka na stronie.

Tab. 16.1. N ajczęściej używ ane znaczn iki dodane w w ersji HTM L5

17. B U D U JE M Y STRONĘ, CZYLI TABELE, LIST Y I INNE ELEMENTY..

ZAD ANIA DO ROZW IĄZANIA

1. Z ainstaluj w sw oim k o m p u te rze N o tep ad + + i skonfiguruj do p isan ia p ro g ra m ó w w H TM L.

2. W yszukaj w sieci informacje na tem at darm ow ych edytorów H TM L. Zbierz w iarygodne opinie na ich tem at i porów naj je z N otepad++. Sformułuj w nioski z porów nania.

3. Za p om ocą dow olnego edytora w ykonaj tablicę, n a której opiszesz znaczniki H TM L5. Załóż, że zo­

stanie ona pow ieszona w sali kom puterow ej i w zmniejszonej form ie w klejona do zeszytu.

4. Z najdź w sieci opis podstaw ow ych znaczników H T M L 5 lub skorzystaj z tablicy z zadania 3. i zre­

daguj tekst H T M L , k tó ry w yśw ietli w oknie przeglądarki tek st o różnej wielkości.

PODSUM OW AN IE LEKCJI

• H T M L (ang. hypertext m arkup language) to h ip ertek s to w y język z naczników . N ie jest językiem p r o ­ g ram o w an ia, p o n iew aż nie układa się w nim p ro g ra m ó w k o m p u tero w y c h .

• R o zró żn iam y dw a rodzaje znaczników : z n a czn ik i o tw a rcia < > i zn a czn ik i zam k n ięcia < / >.

• CSS (Cascading Style Sheets) to język opisujący reguły, w edług k tó ry c h przeglądarka w yśw ietla s tro ­ ny W W W .

17. Budujemy stronę, czyli tabele, listy i inne elementy dobrej strony

N A T E J L E K C J I :

• użyjesz list w dokumencie H TM L i dowiesz się, w jakich przypadkach je stosować;

• ustanowisz odnos'niki i poznasz różnice pom iędzy ich rodzajami.

W iesz już, jak wygląda struktura dokumentu HTML. Twój pierw szy tekst w yśw ie­

tlił napis w przeglądarce. Znasz już m echanizm prezentujący strony - hipertekst interpretowany przez przeglądarkę. W konstrukcji strony internetowej można użyć jeszcze kilku konstrukcji, np. tabeli, list.

17.1. Grupujemy treści na stronie, czyli listy w HTML

Listy mogą służyć do uporządkowania informacji na stronie lub tworzenia menu strony.

s. 110

s. 110 s. 111

115