Język kosmitów. Formatowanie tekstu w HTML - Język kosmitów. Formatowanie tekstu w HTML

RS7J3TSPTF62Q

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 już Notepad++ lub Visual Code Studio, dla systemu MacOS Text Edit czy Sublime Text.

RZaVBbNaaUoml

Ilustracja przedstawia pole stworzone z wypukłych kwadratów na białym tle. Kwadraty mają zaokrąglone wierzchołki i są od siebie oddalone w równych odległościach. Na czterech środkowych, sąsiadujących ze sobą w poziomej linii kwadratach znajdują się kolejno litery: H, T, M, L. — Grafika z napisem HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

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.

R1CTu4eysVrRv

Tworzenie dokumentu HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

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 wstawiania 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 zamykającym znakiem slash /.

R19xGaxCgejk4

Ilustracja przedstawia dwa znaczniki HTML. Po lewej stronie znajduje się znacznik otwarcia akapitu. Znacznik otwarcia akapitu jest to litera p umieszczona pomiędzy lewostronnym i prawostronnym ostrym nawiasem. Po prawej stronie ilustracji znajduje się znacznik zamknięcia akapitu. Znacznik zamknięcia akapitu jest to litera p poprzedzona symbolem ukośnika (znak slash) która jest umieszczona pomiędzy lewostronnym i prawostronnym ostrym nawiasem. Pod rysunkami znajdują się podpisy: znacznik otwarcia akapitu, znacznik zamknięcia akapitu. — Znacznik akapitu w HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

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. Informuje on przeglądarkę, że 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>

R2Tydr3udfYz4

Struktura dokumentu HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 1

Utwórz katalogP1626rFMLUtwó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. Sprawdź wynik swojej pracy w przeglądarce.

Nagłówek strony <head>

Nagłówek wyznacza początek strony i zawiera informacje o tytule dokumentu i jego autorze, rodzaju zastosowanego języka programowania, oraz odwołania do innych powiązanych stron i zasobów.

Jedynym widocznym elementem na stronie jest tytuł wyświetlany na górnym pasku okna przeglądarki. Zawartość tytułu jest wykorzystywana przez wyszukiwarki przy poszukiwaniu dokumentów w sieci. Tytuł umieszcza się 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>

Ćwiczenie 2

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. Tytuł powinien być krótki, określający o czym będzie tworzona przez ciebie strona internetowa.

Oprócz tytułu, w nagłówku strony znajdują się 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 content 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 dowolnych symboli:

<meta charset="UTF-8"/>

R3KtLBgvWLcMh

Dodawanie nagłówka, kodowania strony, autora, słów kluczowych oraz opisu strony w dokumencie HTML.
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 3

Do edytowanego wcześniej pliku tekstowego index.html dodaj autora, słowa kluczowe oraz opis strony. Możesz również edytować jej tytuł. Od teraz jest to twoja własna strona internetowa. Pomyśl nad tematem jaki chcesz na niej zaprezentować. Jeśli nie masz pomysłu, możesz wykorzystać temat Europejskich Pasm Górskich przedstawiony w filmach instruktażowych lub podążać krok po kroku za rozwiązaniami zaproponowanymi w podpowiedziach i odpowiedziach. W dalszych ćwiczeniach będziesz rozbudowywać swoją stronę internetową o kolejne elementy.

W załączniku poniżej znajduje się plik o rozszerzeniu .html. Zmień jego nazwę na index.html. Plik zawiera strukturę dokumentu HTML:

<!DOCTYPE html>  
<html>  
<head>  
<title> Moja pierwsza strona </title>  
<meta charset="utf-8"/>  
<meta name="author" content="Kowalski"/>  
<meta name="keywords" content="sztuka, malarstwo"/> 
<meta name="description" content="Strona o sztuce" /> 
</head>  
<body>   </body>  
</html>

R1LZpr3FpbnPR

Załącznik zawiera plik o rozszerzeniu html. Strona internetowa zawiera metadane oraz tytuł. Po otworzeniu załącznika otrzymujemy pustą, białą stronę.

Załącznik do pobrania z pustą białą stroną internetową i z metadanymi

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik HTML o rozmiarze 299.00 B w języku polskim

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>

Następnie wstaw nagłówki poziomu drugiego i trzeciego.
Zauważ, że nagłówki oddzielone są od siebie pustą linią.

R1ID8zhoxSuD1

Umieszczanie nagłówków między znacznikami BODY
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 4

Dodaj nagłówek głównej sekcji swojego dokumentu oraz nagłówki sygnalizujące treści przedstawiane w dalszej części tworzonej przez ciebie strony WWW.

Po wykonaniu tego zadania, ułożenie tekstu na twojej stronie internetowej powinno prezentować się następująco:

R12gmxQbQykBa

Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge na której zaprezentowane są różne poziomy nagłówka. W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Moja pierwsza strona. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa. Na stronie widocznych jest siedem nagłówków. Nagłówki umieszczone są jeden pod drugim. Pierwszy nagłówek jest większy niż pozostałe. Treść nagłówków od góry: Światowe dzieła sztuki, Dzieła sztuki antycznej, Dzieła sztuki renesansu, Dzieła sztuki współczesnej, Dzieła sztuki literackiej, Dzieła sztuki malarskiej, Dzieła sztuki muzycznej. — Wygląd treści zamieszczonej w różnych poziomach nagłówka.
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, ponownie musisz edytować plik index.html w jednym z edytorów tekstowych. Następnie pomiędzy znacznikami <body> ... </body> dopisz linijki kodu:

<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>

W załączniku poniżej znajduje się plik o rozszerzeniu .html. Zmień jego nazwę na index.html. Plik zawiera strukturę dokumentu HTML:

<!DOCTYPE html>  
<html>  
<head>   
<title>Moja pierwsza strona</title>  
<meta charset="utf-8"/>  
<meta name="author" content="Kowalski"/>  
<meta name="keywords" content="sztuka, malarstwo"/>  
<name="description" content="Strona o sztuce" />  
</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>

RC2DXfnYq5aAh

Załącznik zawiera plik o rozszerzeniu html. Strona internetowa zawiera metadane, tytuł oraz siedem nagłówków.

Załącznik do pobrania strony internetowej z metadanymi i siedmioma nagłówkami

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik HTML o rozmiarze 563.00 B w języku polskim

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:

RgVsBlZqOJeET

Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge z zamieszczoną treścią w formie akapitu. W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Moja pierwsza strona. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa. Na stronie widnieje tekst: 'Tekst na tej 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.' — Widok akapitu tekstu z zastosowanymi znacznikami line break
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

RpjdXcsy7QRGS

Umieszczanie akapitów w dokumencie HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Znaki specjalne

Encje - 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.: „<” - mniejszy niż < (ang. less than), „>” - większy od > (ang. greater than).

Gdy zamierzasz na stronie umieścić zdanie:

„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 &lt; pre &gt; … &lt; pre &gt; uznawana jest za sformatowaną za pomocą białych znaków.</p>

A oto rezultat na stronie internetowej.

RCju2Q1OmitMO

Zrzut widoku strony dokumentu HTML z widocznym efektem zastosowania znaków specjalnych tzw. encji HTML. W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Moja pierwsza strona. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa. Na stronie widnieje tekst: Każda informacja tekstowa znajdująca się wewnątrz znaczników <math aria‑label='litery pre znajdujące się w środku nawiasu lewostronnie i prawostronnie domkniętego'><pre>, trzy kropki, <math aria‑label='litery pre poprzedzone symbolem ukośnika znajdujące się w środku nawiasu lewostronnie i prawostronnie domkniętego'></pre> uznawana jest za sformatowaną za pomocą białych znaków. — Widok strony dokumentu HTML z widocznym efektem zastosowania znaków specjalnych
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Zapamiętaj!

Jeżeli chcesz zaprezentować znacznik, musisz odpowiednio zakodować znaki.
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, wprowadzić tzw. twardą spację, którą uzyskasz wprowadzając znacznik specjalny  . 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.   nie wpisujemy pomiędzy znakami większości.

Więcej encji znajdziesz na stronie:
https://www.w3schools.com/charsets/ref_html_entities_a.asp

Do rozdzielenia wprowadzanych na stronie treści możesz wykorzystywać znacznik <hr>, który podobnie jak znacznik <br>, nie posiada znaczników zamykających.

R151f8WQwboct

Zastosowanie encji HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 5

W pliku index.html utwórz pierwszy i drugi akapit dokumentu (znaczniki <p> i </p>). W pierwszym akapicie, fragment tekstu w nim zawarty przenieś 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.

Po wykonaniu tego zadania, ułożenie tekstu na twojej stronie internetowej powinno prezentować się następująco:

R1QxCyQ4h4A58

Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge z zastosowanymi znacznikami nagłówków, akapitu, preformatowania oraz line break.W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Moja pierwsza strona. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa. Na górze strony znajduje się nagłówek pierwszego poziomu z tekstem: Światowe dzieła sztuki. Poniżej widać napis: Dzieła sztuki antycznej sporządzony nagłówkiem drugiego poziomu. Poniżej znajduje się akapit tekstowy z zastosowanymi znacznikami preformatowania oraz line break. Pod akapitem znajduje się pięć kolejnych nagłówków drugiego poziomu. Nagłówki w kolejności: dzieła sztuki renesansu, dzieła sztuki współczesnej, dzieła sztuki literackiej, dzieła sztuki malarskiej, dzieła sztuki muzycznej. — Widok strony dokumentu HTML z widocznymi akapitami i zastosowaną encją
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. III wieku p.n.e. > W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele  stuleci cywilizacja europejska wzorowała swoje dziełana dokonaniach antyku i kładła >nacisk na  przestrzeganie antycznych zasad i norm w sztuce.<br />
Mamy na myśli klasycyzm oświeceniowy, klasycyzm renesansowy oraz neoklasycyzm </p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Podstawą sztuki klasycznej jest harmonia, równowaga, logika, >spokój i piękno. Nie przedstawiono  w sztuce klasycznej wartości negatywnych, takich jak >starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa >harmonia i prostota</p>

Przed ostatnimi dwoma znacznikami <h2> dodaj linijkę tekstu:

<hr/>

W załączniku poniżej znajduje się plik o rozszerzeniu .html. Zmień jego nazwę na index.html. Plik zawiera strukturę dokumentu HTML:

<!DOCTYPE html>
<html> 
<head>
<title>Moja pierwsza strona</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Strona o sztuce" />
</head> 
<body> 
<h1>Światowe dzieła sztuki</h1> 
<h2>Dzieła sztuki antycznej</h2> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.
<br />Mamy na myśli klasycyzm oświeceniowy, klasycyzm renesansowy oraz neoklasycyzm.</p> 
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>
<h2>Dzieła sztuki renesansu</h2> 
<h2>Dzieła sztuki współczesnej</h2> 
<h2>Dzieła sztuki literackiej</h2>
<hr /> 
<h2>Dzieła sztuki malarskiej</h2>
<h2>Dzieła sztuki muzycznej</h2>
</body> 
</html>

R1cqWfrNEAtdM

Załącznik zawiera plik o rozszerzeniu html. Strona internetowa zawiera metadane, tytuł, siedem nagłówków oraz akapit.

Załącznik do pobrania strony internetowej z metadanymi, siedmioma nagłówkami i akapitami

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik HTML o rozmiarze 1.25 KB w języku polskim

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: aIndeks górny 2 + bIndeks górny 2 = cIndeks górny 2

Należy zwrócić uwagę na prawidłowe zagnieżdżanie znaczników. Znaczniki otwierane jako pierwsze powinny być zamykane jako 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, klasycyzm renesansowy oraz neoklasycyzm. </mark>

Rb6eu1b1KUNfP

Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge z zastosowanym znacznikiem mark.W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Moja pierwsza strona. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa. Na górze strony znajduje się nagłówek pierwszego poziomu z tekstem: Światowe dzieła sztuki. Poniżej widać napis: Dzieła sztuki antycznej sporządzony nagłówkiem drugiego poziomu. Poniżej znajduje się akapit tekstowy z zastosowanymi znacznikami preformatowania, line break oraz mark. Teks: klasyczny oświeceniowy, klasyczny renesansowy oraz neoklasyczny jest zaznaczony na żółto.Pod akapitem znajduje się pięć kolejnych nagłówków drugiego poziomu. Nagłówki w kolejności: dzieła sztuki renesansu, dzieła sztuki współczesnej, dzieła sztuki literackiej, dzieła sztuki malarskiej, dzieła sztuki muzycznej. — Widok strony dokumentu HTML z widocznym efektem zastosowania znacznika mark
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

R1cqu9bvSqfFU

Umieszczanie znaczników do formatowania tekstu
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

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">

RD2e6eJMRjz9p

Umieszczanie cytatu w dokumencie HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 6

Korzystając z dwóch znaczników formatowania tekstu oraz znacznika <blockquote>, umieść na swojej stronie dowolny cytat. Ciekawe cytaty możesz znaleźć na stronie http://pl.wikiquote.org. Dodatkowo zastosuj znacznik <mark> na dowolnym fragmencie tekstu.

Po wykonaniu tego zadania, formatowanie tekstu na twojej stronie internetowej powinno prezentować się następująco:

R1W1HdDjYCQKp

Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, ponownie musisz edytować plik index.html w jednym z edytorów tekstowych. Następnie po nagłówku

<h2>Dzieła sztuki malarskiej</h2>

dopisz linijki kodu:

<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę zwyjątkiem 2. </i></u></b></blockquote>

oraz dopisz znacznik <mark> wraz z jego domknięciem:

<mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark>

W załączniku poniżej znajduje się plik o rozszerzeniu .html. Zmień jego nazwę na index.html. Plik zawiera strukturę dokumentu HTML:

<!DOCTYPE html>
<html> 
<head>
<title>Moja pierwsza strona</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Strona o sztuce" />
</head> 
<body> 
<h1>Światowe dzieła sztuki</h1> 
<h2>Dzieła sztuki antycznej</h2> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.<br />Mamy na myśli <mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark> oraz neoklasycyzm.
</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>
<h2>Dzieła sztuki renesansu</h2> 
<h2>Dzieła sztuki współczesnej</h2> 
<h2>Dzieła sztuki literackiej</h2>
<hr /> 
<h2>Dzieła sztuki malarskiej</h2>
<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie
zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z
wyjątkiem 2. </i></u></b></blockquote>
<h2>Dzieła sztuki muzycznej</h2>
</body> 
</html>

R1AqGRmzVNs7X

Załącznik zawiera plik o rozszerzeniu html. Strona internetowa zawiera metadane, tytuł, siedem nagłówków, akapit oraz sformatowany tekst.

Załącznik do pobrania strony internetowej ze sformatowanym tekstem

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik HTML o rozmiarze 1.42 KB w języku polskim

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.

Linia 1. otwórz nawias ostrokątny h1 zamknij nawias ostrokątny Ranking wartościowych filmów dokumentalnych otwórz nawias ostrokątny prawy ukośnik h1 zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dramaty otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny li zamknij nawias ostrokątny Człowiek ringu otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny li zamknij nawias ostrokątny Pianista otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny li zamknij nawias ostrokątny Piękny umysł otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dokumentalne otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny li zamknij nawias ostrokątny Wielka cisza otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny Duśka otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny Biograficzne otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny li zamknij nawias ostrokątny Generał Nil otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny li zamknij nawias ostrokątny Bogowie otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny li zamknij nawias ostrokątny Świadectwo otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny.

<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>

R1U13LZYEDeW5

Ilustracja przedstawia widok utworzonej listy na stronie internetowej.W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Moja pierwsza strona. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa. Na górze strony znajduje się nagłówek pierwszego poziomu: Ranking wartościowych filmów dokumentalnych. Poniżej znajdują się listy numerowane i nienumerowane. Widoczny tekst. DramatyCzłowiek ringuPianistaPiękny umysłDokumentalneWielka ciszaDuśkaBiograficzneGenerał NilBogowieŚwiadectwo — Widok strony z listą numerowaną i nienumerowaną
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Aby uzyskać inny rodzaj wyróżnienia listy punktowej (standardowo kółko), należy użyć Kaskadowych Arkuszy Stylów (ang. Cascading Style Sheets, w skrócie CSS), o których 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.

RxZGFWMiGi2d6

Ilustracja przedstawia strukturę listy definicyjnej. Na górze ilustracji znajduje się napis: Listy definicyjne. Poniżej umieszczone są znaczniki z tekstem wyjaśniającym dany znacznik. Wszystkie znaczniki umieszczone są w środku nawiasów ostrych. Po lewej stronie znajduje się nawias lewostronnie domknięty, po prawej stronie nawias prawostronnie domknięty. Obok znacznika znajduje się tekst wyjaśniający. Zamieszczony opis. Brak wcięcia znacznik dl, tekst: początek listy definicyjnej. Pojedyncze wcięcie, znacznik dt, tekst: pierwszy termin. Podwójne wcięcie, znacznik dd, tekst: wyjaśnienie pierwszy termin. Pojedyncze wcięcie, znacznik dt, tekst: drugi termin. Podwójne wcięcie, znacznik dd, tekst: wyjaśnienie drugiego terminu. Brak wcięcia znacznik dl poprzedzony ukośnikiem, tekst: koniec listy definicyjnej — Struktura listy definicyjnej
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

RG5hJK6auwcO9

Tworzenie list w HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 7

Wykorzystując znaczniki <ul> oraz <li> zamień nagłówki <h2> w tworzonej przez siebie stronie internetowej na listę wyliczeniową, w której elementy oznaczone są małymi literami.

Po wykonaniu tego zadania, formatowanie tekstu na twojej stronie internetowej powinno prezentować się następująco:

REyeKOHTiYCgg

Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge z zastosowanymi znacznikami listy numerowanej i nienumerowanej.W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Moja pierwsza strona. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa. Na górze strony widoczny jest pierwszy poziom listy nienumerowanej. Na pierwszym poziomie znajduje się tekst: Światowe dzieła sztuki. Poniżej widać listę nienumerowaną z następującymi punktami: Dzieła sztuki antycznej, Dzieła sztuki renesansu, Dzieła sztuki współczesnej, Dzieła sztuki literackiej, Dzieła sztuki malarskiej, Dzieła sztuki muzycznej.W punkcie dzieła sztuki antycznej znajduje się tekst. Fragment tekstu: klasyczny oświeceniowy, klasyczny renesansowy oraz neoklasyczny jest zaznaczony na żółto.W punkcie, dzieła sztuki malarskiej znajduje się blok cytatu. Tekst: Nie zrozumiecie sztuki, póki nie zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z wyjątkiem 2 jest pisany kursywą i podkreślony. — Widok strony z listą numerowaną i nienumerowaną
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, ponownie musisz edytować plik index.html w jednym z edytorów tekstowych. Następnie zmienić zawartość <body> na poniższy kod:

Linia 1. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny li zamknij nawias ostrokątny Światowe dzieła sztuki otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny ol type znak równości cudzysłów a cudzysłów zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki antycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny p zamknij nawias ostrokątny Do tego okresu zaliczamy dzieła powstałe od XII wieku p kropka n kropka e kropka do III wieku p kropka n kropka e kropka W wieku Ill p kropka n kropka e kropka pod względem artystycznym zaczął przewodzić Rzym kropka Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce kropka otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny Mamy na myśli otwórz nawias ostrokątny mark zamknij nawias ostrokątny klasycyzm oświeceniowy przecinek klasycyzm renesansowy otwórz nawias ostrokątny prawy ukośnik mark zamknij nawias ostrokątny oraz neoklasycyzm kropka. Linia 6. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny otwórz nawias ostrokątny p zamknij nawias ostrokątny Podstawą sztuki klasycznej jest harmonia przecinek równowaga przecinek logika przecinek spokój i piękno kropka Nie przedstawiono w sztuce klasycznej wartości negatywnych przecinek takich jak starość czy cierpienie kropka W przypadku postaci ludzkich istotna była właściwa harmonia i prostota otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki renesansu otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki współczesnej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki literackiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny hr prawy ukośnik zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki malarskiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny blockquote zamknij nawias ostrokątny otwórz nawias ostrokątny b zamknij nawias ostrokątny otwórz nawias ostrokątny u zamknij nawias ostrokątny otwórz nawias ostrokątny i zamknij nawias ostrokątny Nie zrozumiecie sztuki przecinek póki nie. Linia 13. zrozumiecie przecinek że w sztuce 1 plus 1 może dać każdą liczbę z. Linia 14. wyjątkiem 2 kropka otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik u zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik blockquote zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki muzycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny.

<ul>
<li>Światowe dzieła sztuki</li> 
<ol type="a">
<li>Dzieła sztuki antycznej</li> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.<br />Mamy na myśli <mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark> oraz neoklasycyzm.
</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>
<li>Dzieła sztuki renesansu</li> 
<li>Dzieła sztuki współczesnej</li> 
<li>Dzieła sztuki literackiej</li>
<hr /> 
<li>Dzieła sztuki malarskiej</li>
<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie
zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z
wyjątkiem 2. </i></u></b></blockquote>
<li>Dzieła sztuki muzycznej</li>
</ol>
</ul>

Zwróć uwagę, że wszystkie znaczniki <h2> zostały zastąpione przez znaczniki elementów listy, oraz zostały dodane znaczniki <ol> oraz <ul>

W załączniku poniżej znajduje się plik o rozszerzeniu .html. Zmień jego nazwę na index.html. Plik zawiera strukturę dokumentu HTML:

<!DOCTYPE html>
<html> 
<head>
<title>Moja pierwsza strona</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Strona o sztuce" />
</head> 
<body> 
<ul>
<li>Światowe dzieła sztuki</li> 
<ol type="a">
<li>Dzieła sztuki antycznej</li> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.<br />Mamy na myśli <mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark> oraz neoklasycyzm.
</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>
<li>Dzieła sztuki renesansu</li> 
<li>Dzieła sztuki współczesnej</li> 
<li>Dzieła sztuki literackiej</li>
<hr /> 
<li>Dzieła sztuki malarskiej</li>
<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie
zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z
wyjątkiem 2. </i></u></b></blockquote>
<li>Dzieła sztuki muzycznej</li>
</ol>
</ul>
</body> 
</html>

R1Syk2xJ8FQPu

Załącznik zawiera plik o rozszerzeniu html. Strona internetowa zawiera listę.

Załącznik do pobrania strony internetowej z listą

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik HTML o rozmiarze 1.45 KB w języku polskim

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="*").

Ważne!

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>

RXauzk0xjjNKb

Zrzut ekranu tabeli składającej się z dwóch kolumn i dwóch wierszy — Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli bez wiersza nagłówkowego. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

Pierwszy wiersz, pierwsza komórka	druga komórka
Drugi wiersz, pierwsza komórka	druga komórka

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>

R190zVORJoHcg

Zrzut ekranu tabeli składającej się z dwóch kolumn zatytułowanych: imię, nazwisko. — Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli z wierszem nagłówkowym. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

Imię	Nazwisko
Bilbo	Baggins
Peregrin	Tuk

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>

RTcvDEeBxCYKI

Zrzut ekranu tabeli zawierającej trzy kolumny oraz dwa wiersze. W wierszach umieszczono tytuły: imię, nazwisko. — Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli z pionowym wierszem nagłówkowym. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

Imię	Bilbo	Peregrin
Nazwisko	Baggins	Tuk

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 komórka</td>  
</tr>  
</table>

RZe1Kc1ot0kJH

Zrzut tabeli składającej się z dwóch wierszy oraz dwóch kolumn. Wyżej znajduje się tytuł tabeli: ważne informacje z giełdy. — Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli z wierszem nagłówkowym oraz dodanym tytułem tabeli. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

Ważne informacje z giełdy
Pierwszy wiersz, pierwsza komórka	druga komórka
Drugi wiersz, pierwsza komórka	druga komorka

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>

R1X5KsFLvTs7P

Zrzut ekranu tabeli zawierającej scalone komórki. Tabela składa się z sześciu ponumerowanych pól. Pole pierwsze składa się z czterech scalonych pól. — Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli bez wiersza nagłówkowego w której zastosowano scalanie wierszy i kolumn. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

$1$		$2$
$1$		$3$
$4$	$5$	$6$

Przeglądarki określają domyślnie szerokość tabeli w taki sposób, aby zmieściła się w niej zawartość wszystkich komórek.

R1QrSOjEKOIou

Tworzenie tabel w dokumencie HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 8

Na tworzonej przez siebie stronie internetowej wstaw tabelę, o co najmniej trzech kolumnach i wierszach oraz tytule, zawierającą informacje dotyczące wybranej przez ciebie tematyki.

Przykładowa tabela na twojej stronie powinna prezentować się następująco:

R1OhHBA6t6SvF

Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge ze wstawioną tabelą.W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Moja pierwsza strona. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa. Na górze strony znajduje się nagłówek pierwszego poziomu z tekstem: Światowe dzieła sztuki. Poniżej widać napis: Dzieła sztuki antycznej sporządzony nagłówkiem drugiego poziomu. Poniżej znajduje się akapit tekstowy z zastosowanymi znacznikami preformatowania, line break oraz mark. Teks: klasyczny oświeceniowy, klasyczny renesansowy oraz neoklasyczny jest zaznaczony na żółto. Na dole akapitu znajduje się tabela zatytułowana wielcy rzeźbiarze greccy. Lp.TwórcaLata działalnościPrzykładowe dzieło1Fidiasz<math aria‑label="od czterysta dziewięćdziesiątego do czterysta trzydziestego przed naszą erą">490 - 430 p.n.eZeus Olimpijski2Lizyp<math aria‑label="od trzysta siedemdziesiątego do trzysta dwudziestego przed naszą erą">370 - 320 p.n.eHermes odpoczywający3Praksyteles<math aria‑label="od trzysta osiemdziesiątego do trzysta trzydziestego przed naszą erą">380 - 330 p.n.eAfrodyta KnidyjskaPod akapitem znajduje się pięć kolejnych nagłówków drugiego poziomu. Nagłówki w kolejności: dzieła sztuki renesansu, dzieła sztuki współczesnej, dzieła sztuki literackiej, dzieła sztuki malarskiej, dzieła sztuki muzycznej. Poniżej tekstu nagłówka: Dzieła sztuki malarskiej umieszczony jest cytat. Cytat brzmi: Nie zrozumiecie sztuki, póki nie zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z wyjątkiem 2. Tekst jest napisany kursywą i podkreślony. — Zrzut ekranu strony zawierającej tabelę
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, ponownie musisz edytować plik index.html w jednym z edytorów tekstowych. Następnie po akapicie w nagłówku

<h2>Dzieła sztuki antycznej</h2>

dopisz linijki kodu:

Linia 1. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny caption zamknij nawias ostrokątny Wielcy rzeźbiarze greccy otwórz nawias ostrokątny prawy ukośnik caption zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny th zamknij nawias ostrokątny Lp kropka otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Twórca otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Lata działalności otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Przykladowe dzieła otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny td zamknij nawias ostrokątny 1 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Fidiasz otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 490 minus 430 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Zeus Olimpijski otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Lizyp otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 370 minus 320 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Hermes odpoczywający otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Praksyteles otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 380 minus 330 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Afrodyta Knidyjska otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny.

<table border="1">
<caption>Wielcy rzeźbiarze greccy</caption>
<tr>
<th>Lp.</th><th>Twórca</th><th>Lata działalności</th><th>Przykladowe dzieła</th>
</tr>
<td>1.</tfd><td>Fidiasz</td><td>490-430 p.n.e.</td><td>Zeus Olimpijski</td>
</tr>
<tr>
<td>2.</tfd><td>Lizyp</td><td>370-320 p.n.e.</td><td>Hermes odpoczywający</td>
<tr>
<td>3.</td><td>Praksyteles</td><td>380-330 p.n.e.</td><td>Afrodyta Knidyjska</td>
</tr>
</table>

W załączniku poniżej znajduje się plik o rozszerzeniu .html. Zmień jego nazwę na index.html. Plik zawiera strukturę dokumentu HTML:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny html zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny title zamknij nawias ostrokątny Moja pierwsza strona otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Kowalski cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów sztuka przecinek malarstwo cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Strona o sztuce cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny Światowe dzieła sztuki otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny ol type znak równości cudzysłów a cudzysłów zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki antycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny p zamknij nawias ostrokątny Do tego okresu zaliczamy dzieła powstałe od XII wieku p kropka n kropka e kropka do III wieku p kropka n kropka e kropka W wieku Ill p kropka n kropka e kropka pod względem artystycznym zaczął przewodzić Rzym kropka Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce kropka otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny Mamy na myśli otwórz nawias ostrokątny mark zamknij nawias ostrokątny klasycyzm oświeceniowy przecinek klasycyzm renesansowy otwórz nawias ostrokątny prawy ukośnik mark zamknij nawias ostrokątny oraz neoklasycyzm kropka. Linia 16. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny otwórz nawias ostrokątny p zamknij nawias ostrokątny Podstawą sztuki klasycznej jest harmonia przecinek równowaga przecinek logika przecinek spokój i piękno kropka Nie przedstawiono w sztuce klasycznej wartości negatywnych przecinek takich jak starość czy cierpienie kropka W przypadku postaci ludzkich istotna była właściwa harmonia i prostota otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny caption zamknij nawias ostrokątny Wielcy rzeźbiarze greccy otwórz nawias ostrokątny prawy ukośnik caption zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny th zamknij nawias ostrokątny Lp kropka otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Twórca otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Lata działalności otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Przykladowe dzieła otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny td zamknij nawias ostrokątny 1 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Fidiasz otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 490 minus 430 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Zeus Olimpijski otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Lizyp otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 370 minus 320 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Hermes odpoczywający otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Praksyteles otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 380 minus 330 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Afrodyta Knidyjska otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki renesansu otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 31. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki współczesnej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki literackiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 33. otwórz nawias ostrokątny hr prawy ukośnik zamknij nawias ostrokątny. Linia 34. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki malarskiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 35. otwórz nawias ostrokątny blockquote zamknij nawias ostrokątny otwórz nawias ostrokątny b zamknij nawias ostrokątny otwórz nawias ostrokątny u zamknij nawias ostrokątny otwórz nawias ostrokątny i zamknij nawias ostrokątny Nie zrozumiecie sztuki przecinek póki nie. Linia 36. zrozumiecie przecinek że w sztuce 1 plus 1 może dać każdą liczbę z. Linia 37. wyjątkiem 2 kropka otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik u zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik blockquote zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki muzycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 40. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 42. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

<!DOCTYPE html>
<html> 
<head>
<title>Moja pierwsza strona</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Strona o sztuce" />
</head> 
<body> 
<ul>
<li>Światowe dzieła sztuki</li> 
<ol type="a">
<li>Dzieła sztuki antycznej</li> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.<br />Mamy na myśli <mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark> oraz neoklasycyzm.
</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>
<table border="1">
<caption>Wielcy rzeźbiarze greccy</caption>
<tr>
<th>Lp.</th><th>Twórca</th><th>Lata działalności</th><th>Przykladowe dzieła</th>
</tr>
<td>1.</tfd><td>Fidiasz</td><td>490-430 p.n.e.</td><td>Zeus Olimpijski</td>
</tr>
<tr>
<td>2.</tfd><td>Lizyp</td><td>370-320 p.n.e.</td><td>Hermes odpoczywający</td>
<tr>
<td>3.</td><td>Praksyteles</td><td>380-330 p.n.e.</td><td>Afrodyta Knidyjska</td>
</tr>
</table>
<li>Dzieła sztuki renesansu</li> 
<li>Dzieła sztuki współczesnej</li> 
<li>Dzieła sztuki literackiej</li>
<hr /> 
<li>Dzieła sztuki malarskiej</li>
<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie
zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z
wyjątkiem 2. </i></u></b></blockquote>
<li>Dzieła sztuki muzycznej</li>
</ol>
</ul>
</body> 
</html>

R12IQ1nL3MI0d

Załącznik zawiera plik o rozszerzeniu html. Strona internetowa zawiera między innymi tabelę.

Załącznik do pobrania strony internetowej z tabelą

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik HTML o rozmiarze 1.88 KB w języku polskim