1.10.1. Projektowanie i tworzenie stron WWW

Nauczysz się: 

  • zgodnego z zasadami projektowania stron WWW,
  • korzystać z tekstowych i graficznych edytorów stron WWW,
  • tworzyć strony WWW z wykorzystaniem języka HTML
Proces projektowania i budowy stron WWW wymaga zaplanowania ich struktury, tekstowej i graficznej zawartości oraz połączeń między nimi. Do tego celu stosowane są różne edytory graficzne, ale najlepszy efekt uzyskasz, korzystając z hipertekstowego języka znaczników HTML (ang. HyperText Markup Language). Umożliwia on oznaczanie na stronie internetowej rozdziałów, sekcji, tytułów, oddzielanie akapitów, załączanie tabel i grafiki oraz łączenie tego wszystkiego za pomocą odnośników. Sposób wyświetlania przez przeglądarkę internetową zawartości strony opisuje się z wykorzystaniem języka CSS (ang. Cascading Style Sheets), który poznasz na następnym etapie kształcenia. Efektem zajęć będzie wykonana przez ciebie atrakcyjna wizualnie strona internetowa, zawierająca łącza do innych stron, grafikę oraz multimedia.

Zadanie 1.10.1.1.

Dokonaj analizy popularnych stron internetowych. Jakie elementy znajdujące się na nich planujesz wykorzystać na swojej stronie WWW?

Rodzaje stron internetowych

Przeglądając zasoby Internetu, oglądasz w wybranej przeglądarce strony statyczne lub dynamiczne.
Strony statyczne mają stałą zawartość i wygląd. Zazwyczaj składają się z niewielkiej ilości podstron. Wszelkie zmiany muszą być wprowadzone w kodzie strony przez jej autora, więc ostateczny wygląd takich stron musi już być znany na etapie ich projektowania.
Strony dynamiczne generowane są na bieżąco. Mogą one zmieniać swoją zawartość i wygląd poprzez wprowadzanie zmian na komputerze użytkownika.

Zasady projektowania stron WWW

W celu zapewnienia prawidłowego wyświetlania się projektowanych stron WWW w różnych przeglądarkach, opracowane zostały zbiory reguł, które mówią, jak powinny być budowane strony i przeglądarki, aby bez problemów ze sobą współpracowały. Takie zbiory zasad nazywamy standardami. Najnowszym, obsługiwanym przez większość przeglądarek, jest standard nazwany HTML5 (wersja HTML 5). Jest to dokładna specyfikacja techniczna opisująca wszystkie elementy dostępne w HTML. Kiedy przeglądarki wprowadzają nowe funkcje, w niedługim czasie dodawane są one do standardu, tak żeby wszystkie pozostałe przeglądarki uzupełniły braki i żeby strony wyświetlały się wszędzie w jednakowy sposób.

Zapamiętaj

Standard HTML5 to dokładna specyfikacja techniczna, która szczegółowo opisuje wszystkie elementy dostępne w HTML. Możesz go zobaczyć pod adresem http://whatwg.org/html.

Tworzenie stron WWW za pomocą edytorów graficznych i tekstowych

Dla osób początkujących w procesie tworzenia stron internetowych, bardzo zachęcająco wygląda możliwość tworzenia ich za pomocą edytorów graficznych. Autor tworzy stronę WWW z gotowych elementów, umieszczanych na stronie za pomocą myszki i opcji menu danego edytora. Niestety, prostota tworzenia nie zawsze pozwala na spełnienie oczekiwań twórcy strony.
Możesz przekonać się o tym fakcie, nadając utworzonej prezentacji multimedialnej postać strony internetowej. Wystarczy zapisać ją w formacie strony Web, wybierając odpowiednią opcję z menu programu, w którym powstała. Np. z menu Plik grafiki prezentacyjnej pakietu Office wybierz Zapisz jako… i opcję Strona sieci Web. W podobny sposób możesz utworzyć stronę WWW w edytorze tekstu czy arkusza kalkulacyjnego wspomnianego pakietu. Jednak uzyskany efekt nie spełni twoich oczekiwań i nie będzie idealny pod względem informatycznym.

Zadanie 1.10.1.2.

Spróbuj zapoznać się z kodem źródłowym strony utworzonej w powyższy sposób. W tym celu otwórz ją w przeglądarce i wybierz z menu kontekstowego (widocznego po naciśnięciu prawego klawisza myszy) opcję Pokaż źródło strony (Firefox) lub Pokaż źródło (Internet Explorer). Zapewne zdziwi cię długość i stopień skomplikowania kodu.

Wskazówka

Jednym z popularnych edytorów graficznych jest edytor WiX (pl.wix.com).

Zadanie 1.10.1.3.

Za pomocą graficznego edytora stron WWW wykonaj stronę internetową na temat zlecony przez nauczyciela. Po wykonaniu strony zapoznaj się z jej kodem źródłowym.

Zapamiętaj

Edytory graficzne stosowane są przez osoby rzadko zajmujące się tworzeniem stron WWW. Pojawiające się problemy przy tworzeniu strony pomoże ci rozwiązać znajomość kodowania w języku HTML.
Podstawy języka HTML możesz poznać podczas korzystania z edytorów tekstowych. Do edytorów tego rodzaju zaliczamy:
  • Pajączek (edytor płatny)
    Zawiera gotowe szablony i poradniki dla początkujących.
  • Notepad++ (edytor darmowy)
    Możesz go zainstalować i korzystać, pracując w różnych systemach operacyjnych.
    Dzięki kolorowym znacznikom i wcięciom ułatwia on proces tworzenia kodu strony internetowej.

Tworzenie stron WWW z wykorzystaniem języka HTML

Strony internetowe tworzymy, korzystając z języka HTML. Do pisania kodu w tym języku nie będzie ci potrzebny dostawca usług internetowych ani nawet podłączenie do Internetu. Aktualnie powszechnie stosowanym standardem jest HTML5.
Dokument HTML to zwykły plik tekstowy, który możesz tworzyć i modyfikować praktycznie w każdym edytorze tekstu. Dla systemów Windows i Linux może to być wspomniany przed chwilą - Notepad++, dla systemu MacOS – Text Edit czy Sublime Text, dla systemu Android – DroidEdit.
Po utworzeniu pliku HTML zachowaj go na dysku w formacie pliku tekstowego z rozszerzeniem .html lub .htm. Przy zapisywaniu pliku opcją Zapisz jako ustaw sposób kodowania na UTF 8. Do obejrzenia efektów pracy konieczna będzie dowolna przeglądarka, która odczytuje plik HTML z dysku lokalnego, a następnie przetwarza go i wyświetla tak samo, jak pliki z sieci WWW.
Utworzony plik zawiera opis strony w języku HTML. Do tego celu używane są odpowiednie polecenia języka, które określają sposób zamieszczania na stronie tekstu, elementów graficznych oraz wstawiana odnośników do innych stron WWW. Polecenia (znaczniki) języka HTML opisujące stronę rozpoczynają się znakiem mniejszości <, zaś kończą znakiem większości >.
Większość poleceń HTML występuje w parach, istnieją jednak również takie, które występują pojedynczo. W przypadku poleceń występujących w parze, początkowe polecenie nazywane jest otwierającym, zaś końcowe poprzedzone jest znakiem slash / zamykającym.
Składnia poleceń jest więc następująca:
<znacznik> fragment dokumentu </znacznik>
lub w przypadku polecenia pojedynczego
<znacznik/>

Zapamiętaj

W pliku HTML znajdują się znaczniki, natomiast po otworzeniu strony, przeglądarka zamienia je na elementy HTML. Element HTML to obiekt, który powstaje w wyniku interpretacji tekstowych znaczników.

Struktura dokumentu HTML

Na początku dokumentu powinien znajdować się znacznik <!doctype html>. Nazywany jest definicją typu i może być użyty tylko raz, na samym początku pliku. Mówi on przeglądarce, ze nie jest to zwykły plik tekstowy, ale dokument HTML. Z kolei znacznik <html> występujący zaraz za definicją typu wskazuje początek właściwego dokumentu i jednocześnie deklaruje język, w którym dokument zostanie napisany. Na samym końcu znajduje się znacznik </html>, który wskazuje jego koniec. Pomiędzy tymi znacznikami znajduje się treść dokumentu, która podzielona jest na dwie części: nagłówek <head> i część główną, tzw. ciało <body>.
Podstawowa struktura dokumentu, która odpowiada pustej stronie jest następująca:
<!doctype html>
<html>
<head>…</head>
<body>…</body>
</html>

Zadanie 1.10.1.4.

Utwórz katalog nazwany twoim nazwiskiem. Uruchom edytor tekstu i utwórz plik tekstowy, zawierający podstawową strukturę dokumentu HTML, odpowiadającą pustej stronie. Zapisz plik w swoim katalogu jako plik tekstowy, nadając mu nazwę index z rozszerzeniem .html. Pamiętaj o zmianie sposobu kodowania na UTF-8. Obejrzyj wynik swojej pracy w przeglądarce.
Odpowiedź
  1. A.
    Widok strony:
  2. B.
    Kod źródłowy:
<!doctype html>
<html>
<head>…</head>
<body>…</body>
</html>

Nagłówek strony <head>

Nagłówek wyznacza początek strony i zawiera informacje o tytule dokumentu i jego autorze, rodzaju języka, którym będzie się posługiwał oraz odwołania, do innych powiązanych z nim tym dokumentem, stron i zasobów.
Jedynym jego widocznym elementem na stronie jest tytuł wyświetlany na górnym pasku okna przeglądarki. Zawartość tytułu jest ponadto wykorzystywana przez wyszukiwarki przy poszukiwaniu dokumentów w sieci. Umieszcza się go w nagłówku, posługując się znacznikiem <title>:
<title>Tytuł dokumentu</title>
Zmodyfikowany nagłówek będzie wyglądał następująco:
<head>
<title>Moja pierwsza strona</title>
</head>

Zadanie 1.10.1.5.

Dodaj do kodu źródłowego utworzonego pliku tekstowego index.html, tytuł dokumentu, który będzie widoczny na górnym pasku okna przeglądarki.

Wskazówka

Oprócz tytułu w nagłówku strony znajdują się wspomniane informacje, umieszczane w pojedynczym znaczniku <meta>. Jego możliwości są rozszerzane za pomocą tzw. atrybutów oraz ich wartości, podawanych w cudzysłowach, np.
<meta name=”nazwa” content=”treść”>
gdzie name to nazwa atrybutu, a name jest wartościa tego atrybutu
Najbardziej rozpoznawalne rodzaje atrybutów znacznika <meta> to:
author – autor strony;
<meta name=”author” content=”dane autora”>
description – opis strony do wykorzystania przez katalogi lub wyszukiwarki;
<meta name=”description” content=”opis strony”>
generator – nazwa programu, przy pomocy którego powstała strona;
<meta name=”Generator” content=”nazwa edytora”>
keywords– lista słów kluczowych (informujących wyszukiwarki o treściach strony) oddzielonych przecinkami;
<meta name=”keywords” content=”wyraz1, wyraz2, wyraz3”>
charset – określa kodowanie dokumentu HTML. W HTML5 używając polskich znaków korzystamy z kodowania domyślnego UTF-8, będącego kodowaniem uniwersalnym pozwalającym na zapisanie niemal dowolnych symboli.
<meta charset=”UTF-8”>
Odpowiedź
  1. A.
    Widok strony:
  2. B.
    Kod źródłowy:
<!doctype html>
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>…</body>
</html>
Oprócz tytułu w nagłówku strony znajdują się wspomniane informacje, umieszczane w pojedynczym znaczniku <meta>, z wykorzystaniem tzw. atrybutów oraz ich wartości, podawanych w cudzysłowach, np.
<meta name="nazwa" content="treść" />
gdzie name to nazwa atrybutu, a nazwa jest wartością tego atrybutu
Najbardziej rozpoznawalne rodzaje atrybutów znacznika <meta> to:
  • author – autor strony;
<meta name=”author” content=”dane autora" />
  • description – opis strony do wykorzystania przez katalogi lub wyszukiwarki;
<meta name=”description” content="opis strony" />
  • generator – nazwa programu, przy pomocy którego powstała strona;
<meta name="Generator" content="nazwa edytora" />
  • keywords – lista słów kluczowych (informujących wyszukiwarki o treściach strony) oddzielonych przecinkami;
<meta name="keywords" content="wyraz1, wyraz2, wyraz3" />
  • charset – określa kodowanie dokumentu HTML. W html5 używając polskich znaków korzystamy z kodowania domyślnego UTF-8, będącego kodowaniem uniwersalnym pozwalającym na zapisanie niemal dowolnych symboli.
<meta charset=”UTF-8” />
Przykładowy kod źródłowy
<!doctype html>
<html>
<head>
<title>Moja pierwsza strona</title>
<meta charset=”utf-8”/>
<meta name=”author” content=”Kowalski”/>
<meta name=”keywords” content=”sztuka, malarstwo”/>
</head>
<body>…</body>
</html>

Część główna strony <body>

Zaraz po sekcji nagłówka występuje sekcja <body>…</body>, w której znajduje się właściwa zawartość dokumentu. W niej umieścisz treści, zdjęcia i multimedia, wykorzystując znaczniki, ich atrybuty i wartości.

Podstawowe znaczniki HTML i ich zastosowanie

Nagłówki
Żeby dodać tytuł i podtytuły w treści tworzonej strony, możesz skorzystać ze znaczników <h1>, <h2>, <h3>, <h4>, <h5> oraz <h6>. Nagłówek największy to <h1>, a najmniejszy to <h6>. Jeśli wiec tworzysz stronę WWW zawierającą artykuł, to do nadania mu tytułu możesz użyć znacznika <h1>. Nagłówki <h2> mogą wskazywać rozdziały, a <h3> podrozdziały. Tekst nagłówków jest pogrubiony.
Rozpoczynając pracę, zacznij od nagłówka pierwszego poziomu, umieszczając pomiędzy znacznikami <body>…</body> tytuł opisujący treść, którą chcesz zamieścić na stronie, np.
<h1>Historia Internetu</h1>,
a następnie wstaw nagłówki poziomu drugiego i trzeciego.
Zauważ, że nagłówki oddzielone są od siebie pustą linią.

Zadanie 1.10.1.6.

Dodaj nagłówek głównej sekcji swojego dokumentu oraz nagłówki sygnalizujące treści przedstawiane w dalszej części tworzonej strony WWW.
Odpowiedź
  1. A.
    Widok strony:
    B.Kod źródłowy:<!doctype html><html><head><title>Moja pierwsza strona</title><meta charset=”utf-8”/><meta name=”author” content=”Kowalski”/><meta name=”keywords” content=”sztuka, malarstwo”/></head><body><h1>Światowe dzieła sztuki</h1><h2>Dzieła sztuki antycznej</h2><h2>Dzieła sztuki renesansu</h2><h2>Dzieła sztuki współczesnej</h2><h2>Dzieła sztuki literackiej</h2><h2>Dzieła sztuki malarskiej</h2><h2>Dzieła sztuki muzycznej</h2></body></html>
Akapity
Tekst w dokumencie pisany jest w akapitach pomiędzy znacznikami <p>…</p>. Akapity są domyślnie rozdzielane, podobnie jak nagłówki, pustą linią. Przeglądarki ignorują białe znaki (spacja, tabulacja, nowa linia), łącząc je w pojedynczą spację.
Tekst umieszczony między znacznikami <p> będzie przenoszony do następnej linii, kiedy na jej końcu zabraknie miejsca. Gdy zajdzie potrzeba przejścia do nowej linii wewnątrz akapitu, wykorzystuje się znacznik złamania linii <br/>. Na przykład powyższe zdania można przedstawić w sposób następujący:
<p>Tekst na stronie internetowej będzie przenoszony do następnej linii,<br/>
Kiedy na jej końcu zabraknie miejsca.<br/>
Gdy zajdzie potrzeba przejścia do nowej linii wewnątrz akapitu,<br/>
Wykorzystuje się znacznik złamania linii</p>
A oto efekt na stronie internetowej:
Czasami tekst, który chcesz umieścić na stronie zawiera wcięcia, akapity oddzielone pustymi liniami i ten układ pragniesz przenieść na stronę WWW. Możesz wówczas skorzystać ze znaczników <pre>…</pre>.
Np. powyższy przykład możesz teraz przedstawić na stronie, umieszczając go w kodzie w taki sposób:
<pre>
Tekst na stronie internetowej będzie przenoszony do następnej linii,
Kiedy na jej końcu zabraknie miejsca.
Gdy zajdzie potrzeba przejścia do nowej linii wewnątrz akapitu,
Wykorzystuje się znacznik złamania linii.
</pre>
A oto efekt:
Zauważ, że w bloku tekstu preformatowanego stosowana jest czcionka o stałej szerokości.
Znaki specjalne
W celu wstawiania w dokumencie różnych symboli możesz skorzystać z tzw. encji HTML. Encja HTML to specjalny zestaw znaków określających nazwę encji, poprzedzonych znakiem & (ampersand), np.: "&lt;" - mniejszy niż (ang.less than), "&gt;" - większy od (ang. greather than).
Np. gdy zamierzasz na stronie umieścić informację: „Każda informacja tekstowa znajdująca się wewnątrz znaczników <pre>…</pre> uznawana jest za sformatowaną za pomocą „białych znaków”, to pożądany efekt uzyskasz, umieszczając w kodzie źródłowym zapis:
<p>Każda informacja tekstowa znajdująca się wewnątrz znaczników &ltpre&gt…&lt/pre&gt uznawana jest za sformatowaną za pomocą białych znaków.</p>
A oto rezultat na stronie internetowej.

Zapamiętaj

Jeżeli chcesz zaprezentować znacznik, musisz odpowiednio zakodować znaki < i >.
Tekst poprawnie rozmieszczony na stronie powinien być również pozbawiony pojedynczych liter na końcach linii. W tym celu możesz pomiędzy spójnik, a słowo występujące bezpośrednio po nim, wprowadź tzw. niedzielącą spację, którą uzyskasz wprowadzając znacznik specjalny &nbsp;. Wyrazy połączone ze sobą tą spacją nie zostaną rozdzielone. Wprowadza on także dodatkową spację w dokumencie, a przez to umożliwia, po kilkakrotnym wpisaniu, zwiększanie odstępu między poszczególnymi wyrazami.

Uwaga

Encji, np. &nbsp; nie wpisujemy pomiędzy znakami większości.
Więcej encji znajdziesz na stronie:
http://dev.w3.org/html5/html-author/charref
Do rozdzielenia wprowadzanych na stronie treści możesz wykorzystywać znacznik <hr>, który podobnie jak znacznik <br>, nie posiada znaczników zamykających.

Zadanie 1.10.1.7.

Utwórz pierwszy i drugi akapit dokumentu (znaczniki <p> i </p>. W pierwszym akapicie, fragment tekstu w nim zawarty przenieś wcześniej do następnego wiersza (znacznik <br/>). Wykorzystaj odpowiednią encję do utworzenia wcięcia drugiego z akapitów oraz rozdziel linią dwa ostatnie podrozdziały znajdujące się na realizowanej stronie.
Odpowiedź
  1. A.
    Widok strony:
  2. B.
    Kod źródłowy:
Formatowanie tekstu
Tekst umieszczany na stronie pisany jest standardową czcionką. Możemy jednak to zmienić, formatując wygląd i wielkość czcionki. Znaczniki stosowane do tego celu można podzielić na dwie grupy: fizyczne i logiczne. Pierwsze wpływają bezpośrednio na czcionkę, np. pogrubiają ją, a drugie wpływają na wygląd tekstu, np. wyróżniają cytat lub fragment tekstu.
Znaczniki z grupy fizycznej to m. in. znaczniki <b>, <i>, <u>. Jeśli umieścisz tekst pomiędzy znacznikami <i>…</i>, to przeglądarka odwzoruje go jako pisany kursywą. Podobny efekt otrzymasz, gdy znacznik będzie miał postać <b> (styl pogrubiony) i <u> (styl podkreślony). Również tekst zawarty pomiędzy znacznikami <sup> i </sup> oraz <sub> i </sub> będzie zmodyfikowany, odpowiednio jako indeks górny i dolny,
np.
<b>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></b>
pozwoli na przedstawienie na stronie zapisu: a2+b2=c2
Należy zwrócić uwagę na prawidłowe zagnieżdżanie znaczników. Znaczniki otwierane jako powinny być zamykane ostatnie, np.
<b><u><i>Formatowanie tekstu</i></u></b>
Aby wyróżnić niewielką ilość tekstu, należy użyć znaczników z grupy znaczników logicznych opisujących rolę, jaką pełni tekst na stronie internetowej (czy jest np. adresem), takich jak: <strong> lub <em>. Pierwszy z nich pogrubi czcionkę we fragmencie tekstu, a drugi spowoduje, że fragment tekstu będzie napisany czcionką pochyłą. Znaczniki te są nowym standardem w HTML5 i mają zastąpić stosowane we wcześniejszych standardach znaczniki <b> oraz <i> (ale na razie można ich zamiennie używać).
W wersji HTML5 masz także możliwość zaznaczenia fragmentu tekstu żółtym tłem, stosując znacznik <mark>, np:
<mark>klasycyzm oświeceniowy</mark>
Z kolei, chcąc zacytować czyjąś wypowiedź, możesz skorzystać ze znacznika <blockquote>… </blockquote> oznaczającego cytat. Jego zawartością są całe akapity, oznaczone dodatkowym wcięciem tekstu, np.
<blockquote>
Nie zrozumiecie sztuki, póki nie zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z wyjątkiem 2. </blockquote>
Informację o autorze możesz przedstawić w postaci tekstu wyświetlonego po nakierowaniu kursora na cytat. Efekt ten uzyskasz, jeżeli dodasz do znacznika <blockquote> atrybut title, np: w powyższym przypadku umieszczając w znaczniku początkowym kodu zapis:
<blockquote title=”Autor: Pablo Picasso”>

Zadanie 1.10.1.8.

Korzystając ze znacznika <blockquote>, umieść na swojej stronie dowolny cytat. Ciekawe cytaty możesz znaleźć na stronie http://pl.wikiquote.org.
Odpowiedź
  1. A.
    Widok strony:
  2. B.
    Kod źródłowy:
Listy
Język HTML5 pozwala grupować treści, wykorzystując do tego celu trzy rodzaje list:
nieuporządkowaną (punktową),
uporządkowaną (numerowaną),
definiowaną.
Listę punktową utworzysz używając znacznika <ul>, a listę numerowaną - używając znacznika <ol>. Wewnątrz list jedynym dopuszczalnym znacznikiem jest <li>. Tylko wewnątrz niego zawarte mogą być kolejne elementy listy. Zawartością znacznika <li> może być zarówno tekst, jak i kolejne listy, tzw. zagnieżdżone.
<h1>Ranking wartościowych filmów dokumentalnych</h1>
<ul>
<li>Dramaty</li>
<ol>
<li>Człowiek ringu</li>
<li>Pianista</li>
<li>Piękny umysł</li>
</ol>
<li>Dokumentalne</li>
<ol>
<li>Wielka cisza</li>
<li>Duśka</li>
</ol>
<li>Biograficzne</li>
<ol>
<li>Generał Nil</li>
<li>Bogowie</li>
<li>Świadectwo</li>
</ol>
</ul>
Aby uzyskać inny rodzaj wyróżnienia listy punktowej (standardowo kółko), należy użyć Kaskadowych Arkuszy Stylów (o nich dowiesz się później). Natomiast w listach uporządkowanych można zmienić sposób oznaczania elementów listy, korzystając z atrybutów type oraz start. Atrybut start pozwala na rozpoczęcie numeracji od dowolnej liczby. Istnieje możliwość zastosowania jednego z pięciu sposobów numerowania elementów listy:
  • type=”A” - wielkie litery alfabetu (A, B, C, D),
  • type=”a” - małe litery alfabetu (a, b, c d),
  • type=”I” - wielkie cyfry rzymskie (I, II, III, IV),
  • type=”i” - małe cyfry rzymskie (i, ii, iii, iv),
  • type=”1” - cyfry arabskie.
Przykładowo, lista numerowana wielkimi cyframi rzymskimi, rozpoczynająca się od IV ma postać:
<ol type=”I” start=”4”>

Uwaga

Listy są wprowadzane w większej odległości od marginesu niż akapit.
Trzecim rodzajem listy jest lista definicyjna, służąca do definicji różnych pojęć. Rozpoczyna się ona znacznikiem <dl>, a jej elementy znacznikami <dt>. Wyjaśnienie pojęcia zawarte jest pomiędzy znacznikami <dd>. Znaczniki te są sparowane.

Zadanie 1.10.1.9.

Wykorzystując znaczniki <ul> oraz <li>, utwórz na swojej stronie ćwiczeniowej listę wyliczeniową, w której elementy oznaczone są małymi literami (atrybut type=”a”).
Odpowiedź
  1. A.
    Kod źródłowy:
<h1>Filmy, które warto zobaczyć</h1>
<ul type=”a”>
<li>Człowiek ringu</li>
<li>Pianista</li>
<li>Piękny umysł</li>
<li>Wielka cisza</li>
<li>Duśka</li>
<li>Generał Nil</li>
<li>Bogowie</li>
<li>Świadectwo</li>
</ul>
  1. A.
    Widok strony:
Tabele
Do wstawiania tabel w dokumentach HTML służą trzy podstawowe polecenia: <table>, <tr>, oraz <td>. Tworzenie tabeli rozpoczyna się od wpisania znacznika <table>, a następnie należy określić liczbę kolumn i wierszy. Wiersze tabeli zdefiniuj za pomocą znacznika <tr>, natomiast jej kolumny – za pomocą znacznika <td>.
Każda tabela powinna mieć obramowanie. W HTML5 atrybut border pozwala zadecydować, czy obramowanie ma być włączone (border=”1”) czy wyłączone (border=””).
Styl obramowania reguluje się za pomocą Kaskadowych Arkuszy Stylów (ang. Cascading Style Sheets, w skrócie CSS) .
<table border=”1”>
<tr>
<td>Pierwszy wiersz, pierwsza komórka</td>
<td>druga komórka</td>
</tr>
<tr>
<td>Drugi wiersz, pierwsza komórka</td>
<td>druga komórka</td>
</tr>
</table>
Nagłówek tabeli możesz utworzyć, stosując zamiast znacznika <td>, znacznik <th>, pogrubiający informacje zawarte w danej komórce.
<table border=”1”>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
</tr>
<tr>
<td>Bilbo</td>
<td>Baggins</td>
</tr>
<tr>
<td>Peregrin</td>
<td>Tuk</td>
</tr>
</table>
Można wykorzystać go także do nazywania wierszy:
<table border=”1”>
<tr>
<th>Imię</th>
<td>Bilbo</td>
<td>Peregrin</td>
</tr>
<tr>
<th>Nazwisko</th>
<td>Baggins</td>
<td>Tuk</td>
</tr>
</table>
Do tabeli możesz dodać również tytuł. Wystarczy, jeśli wewnątrz znacznika <table> umieścisz znacznik <caption>.
<table border=”1”>
<caption>Ważne informacje z giełdy</caption>
<tr>
<th>Pierwszy wiersz, pierwsza komórka</th>
<th>druga komórka</th>
</tr>
<tr>
<td>Drugi wiersz, pierwsza komórka</td>
<td>druga komorka</td>
</tr>
</table>
Prezentacja danych w tabelach wymaga często łączenia komórek w obrębie tego samego wiersza, bądź też wewnątrz pojedynczej kolumny. Służą do tego atrybuty colspan i rowspan, które można stosować w znaczniku <td>. Atrybut colspan powoduje, ze komórka powiększa się przez połączenie wskazanych kolumn z prawej strony. Wartością tego atrybutu jest liczba określająca, z ilu kolumn ma zostać złożona komórka. Atrybut rowspan powoduje, że komórka powiększa się przez połączenie wskazanych wierszy poniżej tej komórki. Wartością tego atrybutu jest liczba określająca, z ilu wierszy ma zostać złożona komórka.
<table border=”1”>
<tr>
<td rowspan=”2” colspan=”2”>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Przeglądarki określają domyślnie szerokość tabeli w taki sposób, aby zmieściła się w niej zawartość wszystkich komórek.

Zadanie 1.10.1.10.

Utwórz nową stronę i wstaw na nią tabelę zawierającą informacje dotyczące tematyki twojej strony internetowej.
Odpowiedź
  1. A.
    Kod źródłowy
Obrazy
Poza tekstem, na strony WWW możesz wstawić grafikę. Służy do tego znacznik <img> z atrybutem src, określającym nazwę pliku. Znacznik ten nie potrzebuje znacznika zamykającego. Wstawiana grafika powinna być zapisana w formacie GIF, JPG, PNG lub SVG (format stworzony do wykorzystania na stronach internetowych).
Przykładowo:
<img src=”nazwa.png”>
Grafika zostanie wyświetlona po lewej stronie względem otaczającego tekstu.
Istotne jest, aby znacznik <img> uzupełnić o atrybut alt, którego wartością jest tekst opisujący wstawioną grafikę. Będzie on przydatny wówczas, gdy przeglądarka nie będzie mogła odnaleźć źródła grafiki, np.
<img src=”kot.png” alt=”Kot”>
Warto dodać także atrybut title, który będzie wyświetlany w momencie, gdy najedziemy kursorem myszy na grafikę, np.
<img src=”kot.png” alt=”Kot” title=”Kot domowy”>
Kolejne atrybuty pozwalają na określenie wysokości (height) i szerokości (width) wczytywanej grafiki, np.
<img src="kot.png" alt="Kot" title="Kot domowy" width="188" height="220">
Nie należy używać tej możliwości jako podstawowego sposobu zmiany rozmiaru grafiki. Na stronie powinna być umieszczana grafika wcześniej przygotowana (skalowana) w programie graficznym.
Ponieważ znacznik <img> tworzy element wierszowy (liniowy), można umieścić kilka grafik obok siebie, w jednym wierszu. Ponadto w HTML5 pojawił się nowy znacznik <figure>, umożliwiający utworzenie kontenera (pojemnika) dla grupy grafik, które mogą otrzymać wspólny podpis definiowany za pomocą znacznika <figcaption>. Powinien on znajdować się wewnątrz znacznika <figure>, np.
<figure>
<img src=”zdjecie1.jpg” alt=”Dalia”/>
<img src=”zdjecie2.jpg” alt=”Owoce”/>
<img src=”zdjecie3.jpg” alt=”Aster kremowy”/>
<img src=”zdjecie4.jpg” alt=”Astry niebieskie”/>
<figcaption>Zdjęcia – Kwiaty jesienne</figcaption>
</figure>

Zapamiętaj

Przy kilku plikach graficznych na stronie utwórz na nie osobny podfolder (nazwany ilustracje) i twórz odwołania do pliku, poprzedzając w kodzie jego nazwę ścieżką dostępu, np.
<img src=”ilustracje/nazwa.gif”/>

Zadanie 1.10.1.11.

Korzystając ze znacznika <img> oraz jego atrybutów, umieść w tworzonej drugiej stronie zdjęcie (JPG) lub rysunek (GIF). Pamiętaj, aby plik z grafiką znajdował się w twoim folderze, a jego nazwa nie zawierała polskich znaków oraz dużych liter.
Odpowiedź
  1. A.
    Zrzut ekranu
  2. B.
    Kod źródłowy
Odnośniki
Jak już zapewne wiesz, odnośniki (hiperpołączenia) to odsyłacze do innych stron internetowych. Połączenia definiowane są za pomocą znacznika rozpoczynającego <a> oraz kończącego </a>, wewnątrz których zawarte są informacje określające hiperpołączenia.
Etykieta określająca połączenie do dowolnego adresu w Internecie ma postać
<a href=”http://www.epodreczniki.pl”>Treści e-podręcznika</a>,
gdzie:
  • <a> - etykieta otwierająca,
  • href=”http://www.epodreczniki.pl” - docelowy adres hiperpołączenia, czyli miejsce gdzie zostaniesz przeniesiony po kliknięciu w jego nazwę,
  • Treści e-podręcznika - nazwa połączenia (odnośnika),
  • </a> - etykieta zamykająca.
Odnośniki <a> mogą posiadać atrybut target, którego wartość _blank mówi, że odnośnik otworzy się w nowym oknie, a wartość _self, że odnośnik otworzy się w tym samym oknie.
Istnieją dwa rodzaje hiperpołączeń:
relatywne, opisujące połączenie z plikiem znajdującym się w tym samym folderze, co dokument zawierający hiperpołączenie, np.
<a href=”inform.html”>Wiadomości</a>,
gdzie:
inform.html jest połączeniem z plikiem o podanej nazwie, znajdującym się w tym samym katalogu co plik index.html. Połączeń relatywnych powinno się używać łącząc dokumenty, które zostały stworzone własnoręcznie, gdyż to twórca określa miejsce, gdzie są one przechowywane.
absolutne, zawierające pełny adres miejsca docelowego, np.
<a href=”http://www.infoteam.com.pl”>Laboratorium</a>
Hiperpołączenia do innych miejsc w sieci można również tworzyć z wykorzystaniem grafik. Polega to na umieszczeniu znacznika <img> wewnątrz znacznika hiperpołączenia <a>, np.
<a href=”koty.html”><img src=”kot.gif” alt=”Kot”></a>
Po naciśnięciu obrazka przeniesiesz się na stronę koty.html.
Możesz również umieścić na stronie WWW ikonę grafiki po wybraniu której ukaże się jej pełnowymiarowa wersja. Za pomocą omówionego już parametru target – możesz określić okno przeglądarki, w którym ma się pojawić większa ilustracja.
Przykładowo, jeżeli chcesz otworzyć grafikę z podfolderu ilustracje w nowym oknie, przypisz atrybutowi target wartość _blank.
<a href=”ilustracje/duża-grafika.gif” target=”_blank”><img src=”ilustracje/mala-grafika.gif” alt=”Mała grafika”/></a>

Uwaga

Grafiki – mała i duża – powinny znajdować się w tym samym folderze.

Zadanie 1.10.1.12.

Utwórz drugą nową stronę i zapisz ją pod dowolną nazwą z rozszerzeniem .html, w tym samym katalogu co plik index.html. Umieść na tej stronie zdjęcie, po kliknięciu w które, ukaże się ono w większym formacie w osobnym oknie przeglądarki.
Odpowiedź
  1. A.
    Zrzut ekranu:
  2. B.
    Kod źródłowy:
Mapy odnośników na obrazach
W kodzie HTML istnieje także możliwość utworzenia mapy odnośników, dzięki której różne obszary jednej grafiki mogą prowadzić do wielu miejsc w sieci. W celu przekazania przeglądarce informacji na temat wybranego obszaru grafiki, niezbędna będzie znajomość współrzędnych punktów, ograniczających go. W tym celu możesz skorzystać z programu umożliwiającego czytanie tego typu danych, na przykład z programu Paint.
Jeżeli wiesz, w którym miejscu chcesz wstawić odsyłacz oraz jaki ma on posiadać kształt, musisz zdefiniować następujące polecenie:
<img src=”adres_obrazu.gif” usemap=”#nazwa mapy” alt=”opis_alternatywny”/>
Polecenie img src=”adres_obrazu.gif” przywołuje wskazaną grafikę.
Umieszczając atrybut usemap z wartością #nazwa mapy, podasz przeglądarce informację, że elementy grafiki obraz.gif są przygotowywane do pełnienia roli odnośników, a przygotowywana do tego celu mapa nosi nazwę #nazwa_mapy.
Potem poleceniem <map> rozszerzonym o atrybut name zdefiniuj mapę. Wartość tego atrybutu musi być taka sama, jak wartość parametru usemap, z pominięciem znaku #, np.
<map name=”nazwa_mapy”>.
Kolejnym krokiem będzie wprowadzenie fragmentów mapy, odpowiadających poszczególnym aktywnym jej obszarom. W tym celu wprowadź nieparzysty znacznik <area>, zawierający następujące atrybuty:
shape (kształt) - zawiera informacje o kształcie danego obszaru przyjmujące jedną z następujących wartości: rect – prostokąt, circle – okrąg, poly – wielokąt;
coords (współrzędne) - określa oddzielane przecinkami współrzędne punktów ograniczających obszar aktywny. W przypadku prostokąta dwie pierwsze liczby podają współrzędne lewego górnego rogu, a następne dwie – prawego dolnego, np.
<area shape=”rect” coords=”15,5,70,60”/>
W przypadku okręgu pierwsze dwie liczby informują o położeniu środka okręgu, a ostatnia o długości promienia. W przypadku obszaru nieregularnego musisz zdefiniować wszystkie jego wierzchołki.
href (odsyłacz) - określa adres URL, do którego odsyła dany fragment mapy.
Przykładowo:

Zadanie 1.10.1.13.

1.Umieść na drugiej stronie tworzonego serwisu, stosowne do znajdujących się na niej treści zdjęcie i uaktywnij niektóre jego miejsca, tworząc połączenia hipertekstowe do stron istniejących w sieci.
2.Połącz utworzone przez ciebie strony internetowe, wykorzystując relatywne połączenie hipertekstowe <a href=”nazwa_pliku.html”>nazwa hiperpołączenia</a>.
3.Umożliw powrót ze strony drugiej do strony głównej index.html, tworząc w tym celu odpowiednie połączenie.
4.Utwórz hiperłącze z obrazka znajdującego się na stronie głównej (index.html) i spraw, aby prowadziło ono do strony internetowej z informacjami wzbogacającymi tematykę twojej strony.
Multimedia
Jedną z przyczyn popularności sieci Internet jest możliwość publikowania na stronach WWW dźwięków i klipów video. Aby przeglądaniu zawartości stron towarzyszył podkład muzyczny, należy użyć, wprowadzonego w HTML5, znacznika <audio> wraz z atrybutami:
<audio atrybuty>
Np.
<audio src=”audio.mp3” type=”audio/mpeg” controls autoplay></audio>
  • src – URL wskazuje źródło (plik multimedialny);
  • type – typ MIME (Multipurpose Internet Mail Extensions), mówi o rodzaju danych przesyłanych drogą elektroniczną, przykładowo audio/mpeg dla MP3 lub audio/x ms wma dla WMA;
  • controls – umożliwia sterowanie odtwarzanym utworem,
  • autoplay – informuje, że odtwarzanie rozpocznie się automatycznie.
Pliki audio mogą być również wykorzystywane jako uzupełnienie informacji tekstowych prezentowanych na stronie. Za pomocą polecenia <a> i atrybutu href możesz utworzyć połączenie pomiędzy fragmentem tekstu (grafiki) i plikiem audio, np.
<a href=”plik_audio.mp3”><img src=”nutka.gif" alt=”Wesołe nutki”/>Przeboje minionego roku</a>.
W podobny sposób można utworzyć połączenie tekstu (grafiki) z plikiem video.

Zadanie 1.10.1.14.

Wybierz spokojną muzykę (być może z gatunków takich jak ambient lub downtempo) oraz dodaj ją na swojej stronie, tak aby odtwarzała się automatycznie.

Wskazówka

Ciekawe źródła z muzyką znajdziesz na http://otwartezasoby.pl/category/muzyka/.
Ramki zagnieżdżone
W HTML5 zostały wprowadzone, tzw. ramki zagnieżdżone. Strony HTML mogą zawierać nie tylko odnośniki do innych stron, ale także zagnieżdżać inne, co oznacza, że jakaś strona pojawi się jako fragment strony zewnętrznej. Żeby zagnieździć stronę, należy skorzystać ze znacznika <iframe>:
<iframe src=”plik.html”></iframe>.
Trzy najważniejsze atrybuty, jakie mogą wystąpić w elemencie iframe to:
  • src – wartość adresu URL dokumentu do wstawienia,
  • width – szerokość iframe w pikselach,
  • height – wysokość iframe w pikselach.
Mechanizm ten jest wykorzystywany przez różne serwisy do udostępniania dodatków do stron. Przykładowo, aby wstawić na stronę film z serwisu YouTube przedstawiający informacje o e-podręczniku, trzeba napisać:
<iframe width=”560” height=”315” src=”http://www.youtube.com/embed/yIf5l-xwk8E”>
</iframe>
Znacznik <iframe> umożliwia między innymi:
•dodawanie filmów z zewnętrznych serwisów,
•zagnieżdżanie gotowych komentarzy,
•umieszczanie reklam,
•cytowanie innych stron,
•dodawanie przycisków sieci społecznościowych.
Znacznik <iframe> możesz jeszcze wykorzystać do otwierania się wewnątrz ramki zagnieżdżonej odnośników. Aby to zrobić znacznikowi początkowemu dodaj nazwę, korzystając z atrybutu name
<iframe name=”okienko”></iframe>,
a następnie odnośnik, który otwiera stronę zmodyfikuj dodając mu w atrybucie target nazwę ramki, w której powinien się otworzyć.
Przykładowo:
<p>
<a href=”http://www.epodreczniki.pl” target=”okienko”>Epodręcznik dla młodzieży</a>
</p>
Przypomnij sobie, że wcześniej element, do którego kierował odnośnik, mógł się otwierać w tym samym lub nowym oknie. Obecnie może otworzyć się wewnątrz ramki, a taka strona będzie w pełni funkcjonalna - działają na niej odnośniki i skrypty.
Przykładowo:

Zadanie 1.10.1.15.

Wykorzystując podane informacje, umieść na jednej ze stron ramkę pływającą, zawierającą inną ze stron twojego serwisu.
Odpowiedź
  1. A.
    Widok strony
  2. B.
    Kod źródłowy
Formularze
Formularze umożliwiają przekształcenie stron WWW ze stron statycznych, biernie przeglądanych, w strony interaktywne.
Aby utworzyć formularz, zastosuj znacznik <form>. Otwierający znacznik zazwyczaj zawiera dwa atrybuty – method i action.
•Atrybut method określa metodę przesyłania danych do skryptu, który je obrabia. Stosowane są dwie metody – get i post. Druga z nich jest stosowana wówczas, gdy formularz wysyła niewielką ilość danych na adres e-mail.
•Atrybut action jest pełnym adresem URL, pod który należy przesłać zawartość pól formularza, by otrzymać odpowiedź, np.
<form method=”post” action=”mailto:nazwa_uzytkownika@outlook.com”>…</form>
Linię do wczytywania tekstu tworzy się za pomocą samozamykającego się znacznika <input>, który służy do tworzenia wszystkich typów pół na formularzu. Określa je dodatkowy parametr type, np.
<input type=”typ” name=”nazwa” value=”wartość”/>
Atrybut type=”text” pozwala wprowadzać dane w linii do wczytywania łańcucha znaków np.:
<input type=”text” name=”nazwisko” size=”40”/>
Atrybut type=”checkbox” pozwala wprowadzić pole w postaci pola opcji (tak lub nie), np.:
<input type=”checkbox” name=”jezyk” value=”angielski”/>angielski
Atrybut type=”radio” pozwala wprowadzić pole wyboru (jeden z wielu), np.:
<input type=”radio” name=”plec” value=”mezczyzna”/>mężczyzna
<input type=”radio” name=”plec” value=”kobieta”/>kobieta
Atrybut type=”submit” wstawia przycisk wysyłający zawartość formularza, np.:
<input type=”submit” value=”Wyślij do …”/>
Atrybut type=”reset” spowoduje usunięcie wszystkich danych wpisanych do formularza, np.:
<input type=”reset” value=”Usuń wszystko”/>
Oprócz powyżej wymienionych w HTML5 wprowadzono między innymi następujące wartości atrybutu type znacznika <input>:
  • email - przeznaczony do wpisywania adresu e-mail,
  • url - przeznaczony do wpisywania adresu URL,
  • tel - przeznaczony do wpisywania numeru telefonu.
W formularzach spotyka się także znacznik <textarea>, pozwalający wprowadzić pole dla komentarza. Wprowadza on standardowe pole o 40 kolumnach i 4 wierszach. W ten sposób zostawisz miejsce, które wypełni czytelnik, jeśli uzna, że warto o czymś jeszcze napisać.
<textarea name=”nazwa”></textarea>
Tworząc formularz, możesz skorzystać z rozwijalnych list ułatwiających dokonanie wyboru. Do ich tworzenia wykorzystywany jest parzysty znacznik <select>, a kolejne pozycje listy są definiowane za pomocą polecenia <option>. Każda lista musi mieć nazwę deklarowaną poprzez przypisanie pożądanej wartości atrybutowi name, np. <select name=”nazwa”>
Przykładowy kod listy rozwijalnej
<select name=”Ulubione przeglądarki”>
<option>Internet Explorer</option>
<option>Firefox</option>
<option>Opera</option>
<option>Safari</option>
</select>

Zadanie 1.10.1.16.

Na podstawie powyższych informacji spróbuj wykonać poniżej przedstawiony formularz.
Odpowiedź
<h2> Ankieta statystyczna</h2>
<form method=”post” enctype=”text/plain” action=”mailto:kowalski654@outlook.com”>
<p>Zapraszamy do wypełnienia ankiety.
<p>Użyj przycisku <strong>Prześlij</strong> do wysłania odpowiedzi.
<hr/>
<strong>Nazwisko: </strong><input name=”Nazwisko”><br/><br/>
<strong>E-mail:</strong> <input type=”email”/>
<p><strong>Płeć: </strong>
<input type=”radio” name=”thesex” value=”mezczyzna”/>Mężczyzna
<input type=”radio” name=”thesex” value=”kobieta”/>Kobieta
<p>Ile masz lat?</p>
<select name=”Wiek”>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select>
<P><strong>W którym zawodzie chciałbyś pracować<br/>
<input type=”checkbox” name=”grafik”/>Grafik komputerowy<br/>
<input type=”checkbox” name=”programista”/>Programista<br/>
<input type=”checkbox” name=”siec”/>Administrator sieci<br/>
<input type=”checkbox” name=”computer”/>Serwisant<br/>
<p>Dlaczego chciałbyś wykonywać ten zawód?</p>
<textarea>To jest miejsce na odpowiedź</textarea><br/><br/>
<input type=”submit” value=”Prześlij wyniki”/><br/><br/>
<input type=”reset” value=”Wyczyść formularz”/><br/>
</form>
Powyżej przedstawiony kod źródłowy jest już kodem dość skomplikowanym. Gdy powrócisz do niego za jakiś czas, możesz zastanawiać się, dlaczego tak go napisałeś. Przydatne mogą być w takim przypadku komentarze, które wstawione w kod zostaną pominięte przez przeglądarkę przy wyświetlaniu strony internetowej, a będą widoczne w kodzie. Komentarze występują w każdym języku programowania, pomagając w ustaleniu np. czego dana część kodu dotyczy. W języku HTML komentarz umieszczany jest pomiędzy znacznikami <!- oraz ->. Przykładowa informacja może być również wskazówką dla autora i może wyglądać w ten sposób:

Elementy blokowe i liniowe

Omawiane w poprzednich podrozdziałach elementy dzielimy na liniowe (wierszowe) oraz blokowe.
Elementy liniowe wstawione w wierszu pozostawiają w nim miejsce dla kolejnych elementów, a elementy blokowe zawsze wyświetlane są od nowej linii i zajmują całą jej powierzchnię. W tym przypadku następny element będzie zmuszony do ukazania się w następnej linii, pod spodem.
Elementy liniowe to np. <a>, <b>, <em>, <i>, <img>, <strong>, a elementy blokowe poznane do tej pory to: <p>, <h1>-<h6>, <ul>, <ol>, <li>, <dt>, <dl>, <dd>. Elementy liniowe mogą być zagnieżdżone w elemencie blokowym.
Tworząc stronę internetową, możesz pewne elementy HTML połączyć w sekcje z wykorzystaniem elementu blokowego o nazwie <div>.
<div>
<img src=”grafika.png” alt=”robot”/>
<ul>
<li><a href=”#”> Strona czołowa</a></li>
<li><a href=”druga.html”>Strona druga</a></li>
<li><a href=”trzecia.html”>Strona trzecia</a></li>
</ul>
</div>
Jeżeli takich sekcji będzie więcej, musisz do ich identyfikacji użyć tzw. identyfikatorów (w skrócie id) przyjmujących dowolne nazwy. Przypisujemy im wartości, tak jak atrybutom, pamiętając o znaku równości i cudzysłowach.
Oznacz powyższą sekcję id wartością o nazwie nagłówek1 lub po angielsku header1.
<div id=”header1”>
<img src=”grafika.png” alt=”robot”/>
<ul>
<li><a href=”#”> Strona czołowa</a></li>
<li><a href=”druga.html”>Strona druga</a></li>
<li><a href=”trzecia.html”>Strona trzecia</a></li>
</ul>
</div>
Do tego id możesz się przenosić poprzez element <a>. W atrybucie href dodaj nazwę identyfikatora poprzedzoną znakiem #.
<a href=”#header1”>Nagłówek</a>
Po wybraniu wyrazu Nagłówek przeniesiesz się do miejsca na stronie, gdzie zaczyna się sekcja o id równym header1.
W większości przypadków, w momencie wskazania połączenia, użytkownik znajdzie się u góry strony WWW. Warto wówczas wprowadzić spis nagłówków i tytułów podrozdziałów i umożliwić odbiorcy przejście od razu do części strony, która go interesuje.
W tym celu skorzystaj z dowolnych elementów blokowych, np. akapitów czy tytułów zawierających atrybut id
<p id=”identyfikator”>To jest element p do którego odsyła łącze wewnątrz dokumentu</p>,
a następnie w wybranym miejscu na stronie wstaw łącze do tej sekcji.
Odnośnik do elementu identyfikowanego przez atrybut id zawiera wartość atrybutu id poprzedzoną znakiem #.
<a href=”#id_elementu”>tekst odnośnika</a>
np.
<a href=”#identyfikator”>Przejdź do rozdziału 3</a>

Uwaga

Różne właściwości obiektom tego samego typu, znajdującym się w treści jednej strony, nadasz, posługując się pojęciem klasy. Używamy ich, stosując słowo class. Identyfikatory i klasy będą potrzebne, gdy poznasz w szkole ponadgimnazjalnej Kaskadowe Arkusze Stylów i będziesz chciał się odwoływać do odpowiednich elementów HTML.
Poznawany przez ciebie język HTML5 wprowadził także do poprzedniej jego specyfikacji oznaczonej jako HTML4.01, szereg innych zmian. Między innymi zrezygnował z niektórych znaczników i ich atrybutów, np. <font>, <center>, <frameset>, <u>, <big>, <strike>, a wprowadził nowe znaczniki takie jak np. <article>, <audio>, <dialog>, <footer>, <header>, <nav>, <section>, <video> - pozwalających na lepsze opisywanie struktury dokumentu oraz <canvas> umożliwiający rysowanie w oknie przeglądarki a także nowe typy formularzy, np. email, numer, search, URL, tel.
Korzystając np. ze znacznika <nav>, możesz obecnie zgrupować odnośniki do prezentowania innych podstron i stron WWW.
Nowe znaczniki w HTML5:
  • <section> – reprezentuje wybraną zwartą część dokumentu,
  • <nav> – sekcja dokumentu odpowiedzialna za nawigację, składająca się z odnośników,
  • <article> – zawiera część dokumentu z jego niezależną treścią np. artykuł,
  • <aside> – dodatkowa treść dokumentu luźno powiązana z resztą strony,
  • <embed> – umożliwia osadzenie muzyki,
  • <header> – przedstawia początkową, nagłówkową, część dokumentu,
  • <footer> – zawiera końcową część dokumentu, tzw. Stopkę,
  • <canvas> – umożliwia tworzenie dynamicznych animacji,
  • <dialog> – reprezentuje rozmowę,
  • <figure> – pozwala na powiązanie podpisu z rysunkiem lub filmem,
  • <time> – oznacza czas,
  • <command> – reprezentuje polecenie wywoływane przez użytkownika,
  • <audio>; <video> – pozwalają osadzić materiał multimedialny,
  • <wbr> – łamanie wiersza,
  • <mark> – wyeksponowanie tekstu.
  • <figure> – umożliwia utworzenie pojemnika dla grupy grafik,
  • <figcaption> – tworzy wspólny podpis dla grupy grafik.
Z poniżej przedstawionego przykładu strony internetowej, uwzględniającej nowe znaczniki i atrybuty widać wyraźnie, że nacisk w języku HTML5 położono na strukturę dokumentu.
Kod źródłowy:
<!doctype html>
<html>
<head>
<title>Dzieła sztuki</title>
</head>
<body>
<header>
<h1>Światowe dzieła sztuki</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a>
<li><a href="dziela.html">Dzieła sztuki światowej</a>
<li><a href="tworcy.html">Twórcy uznanych dzieł sztuki</a>
</ul>
</nav>
<section id="wstep">
<header>
<h2>Poznajemy dziela sztuki światowej</h2>
</header>
<p>„Dzieło sztuki jest rzadką, trwałą wartością majątkową, która oferuje swojemu właścicielowi usługi natury estetycznej (przyjemność estetyczna), społecznej (wyróżnienie i prestiż) oraz finansowej. Nie jest źródłem dochodów, ale – biorąc pod uwagę, że ma charakter mobilny i może być korzystnie odsprzedane – stanowi potencjalny obiekt alternatywnej lokaty finansowej”. Tak dzieło sztuki definiuje Raymonde Moulin, francuska socjolog.</p>
</section>
<div id="content">
<div id="page">
<section>
<article>
<header>
<h2>Arcydzieła rzeźbiarstwa greckiego</h2>
</header>
<div>
<p>Sztuka starożytnej Grecji powstała i rozwijała się po upadku kultury mykeńskiej spowodowanym w głównym stopniu najazdem Dorów. Za czas jej trwania przyjmuje się okres od ok. 1200 p.n.e. do I w. p.n.e., czyli do czasu podboju starożytnej Grecji przez Rzymian. Miała wpływ na całą późniejszą sztukę – od starożytnego Rzymu do współczesności. Przy wykonywaniu elementów rzeźbiarskich pracował Fidiasz</p>
<img src="zeus1.jpg" alt="Zeus Olimpiski"/>
<p>Ten posąg przedstawiał siedzącego na tronie Zeusa. W lewej dłoni trzymał berło, na którego głowicy siedział orzeł. Na jego prawej dłoni stała bogini zwycięstwa Nike. Głowa Zeusa była przyozdobiona wieńcem z gałązek oliwnych. Był zdobiony złotem i kością słoniową. Tron również wykonano z kości słoniowej. Posąg Zeusa był największym i najbardziej znanym wizerunkiem Zeusa. Zeus przedstawiony przez Fidiasza jest mądrym i dobrotliwym mężczyzną, który nie wzbudza lęku. </p
</div>
</article>
</section>
</div>
<aside>
<section>
<header>
<h3>Inne dzieła</h3>
</header>
<ul>
<li><a href="malarstwo.html">Malarstwo</a></li>
<li><a href="muzyka.html">Muzyka</a></li>
</ul>
</section>
</aside>
</div>
<footer>
<div>Copyright &copy: 2010 by <b> Autor</b> - Wszelkie prawa zastrzeżone</div>
</footer>
</body>
</html>

Zapamiętaj

Język HTML umożliwia tworzenie stron internetowych, oznaczanie na nich rozdziałów, sekcji, tytułów, oddzielanie akapitów, załączanie tabel, ramek zagnieżdżonych, formularzy, grafiki i multimediów, oraz łączenie tego wszystkiego za pomocą odnośników.
Język CSS służy do formatowania elementów HTML (określania wyglądu strony, rozmiaru czcionek, koloru tła itp.). Poznasz go w szkole ponadgimnazjalnej.
Ostatnią czynnością wieńczącą wysiłek włożony w przygotowanie strony WWW będzie jej umieszczenie na serwerze WWW. Umiejętności te ukształtujesz w szkole ponadgimnazjalnej, ale już teraz, dysponując wiedzą i umiejętnościami z zakresu projektowania i tworzenia stron internetowych w HTML, możesz przystąpić do realizacji poważnego projektu mającego postać witryny WWW.

Zadanie 1.10.1.17.

Utwórz za pomocą wybranego przez siebie edytora tekstu stronę internetową zawierającą informacje o twoim hobby. Tworząc stronę, postaraj się wykorzystać przedstawione w niniejszym rozdziale informacje o języku HTML.

Zadanie 1.10.1.18.

Wykorzystując informacje przedstawione w niniejszym rozdziale, spróbuj przedstawić w postaci strony WWW osiągnięcia twojej szkoły w różnych rodzajach jej działalności (nauka, sport, osiągnięcia artystyczne). Wykonując stronę, skorzystaj z własnych materiałów zdjęciowych i graficznych prezentowanych w ramkach zagnieżdżonych.

Zadanie 1.10.1.19.

Wspólnie z koleżankami i kolegami z klasy przedstaw w postaci witryny internetowej osiągnięcia polskich sportowców na Mistrzostwach Europy w Lekkiej Atletyce w roku 2014. Członkowie grupy powinni przedstawić na stronie głównej informacje ogólne o mistrzostwach, a na podstronach zdjęcia i teksty przybliżające poszczególnych medalistów. Do prezentacji wyników użyjcie tabel, a przekaz wzbogaćcie o filmy i dźwięk.

Zadanie 1.10.1.20.

Utwórz na stronie internetowej galerię 16 samodzielnie wykonanych zdjęć dotyczących dziedziny, którą się interesujesz. Niech każde ze zdjęć będzie w niej zaprezentowane w postaci miniatury po kliknięciu, w którą ukaże się w osobnym oknie (karcie) jego powiększenie. Wykorzystaj do tego celu tabelę oraz stosowne hiperłącza.