Projektowanie i tworzenie stron WWW
Proces projektowania i budowy stron WWW wymaga zaplanowania ich struktury tekstowej i graficznej zawartości oraz połączeń między witrynami. Wykorzystuje się do tego 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, zamieszczanie tabel i grafiki oraz łączenie tych materiałów za pomocą odnośników. Sposób wyświetlania przez przeglądarkę internetowąP3x0ZAdPQprzeglądarkę internetową zawartości strony opisuje się z wykorzystaniem języka CSS (ang. Cascading Style Sheets), którego w przyszłości również możesz się nauczyć. Poniższy materiał skupia się wyłącznie na hipertekstowym języku znaczników HTML. Nauczysz się projektowania stron WWW (zgodnego z obowiązującymi światowymi standardami) oraz korzystania z tekstowych i graficznych edytorów WWW, a efektem ich wykorzystania będzie wykonana przez ciebie atrakcyjna wizualnie strona internetowa, zawierająca łącza do innych stron, grafikę oraz multimedia.
Dokonaj analizy znanych ci stron internetowych. Jakie znajdujące się na nich elementy możesz wykorzystać na swojej stronie WWW?
Jeśli masz problem ze znalezieniem odpowiednich stron w interneciePt1nhKeXyznalezieniem odpowiednich stron w internecie lub nie wiesz na jakie elementy stron WWW należy zwrócić uwagę, zajrzyj do podpowiedzi.
Jednymi z najpopularniejszych stron internetowych, które możesz znać są:
https://pl.wikipedia.org/wiki/Wikipedia:Strona_główna
https://www.youtube.com
https://www.google.pl
https://www.gov.pl
Poszukaj między nimi podobieństw, zwróć uwagę gdzie znajdują się elementy służące nawigacji i przeszukiwaniu strony. Każdą stronę wyróżnia treść, dla której została stworzona. Zwróć uwagę, czy poruszasz się po stronie za pomocą hiperłączy, a sama zawartość pozostaje statyczna, czy strona dynamicznie zmienia się w odpowiedzi na twoją interakcję.
Podstawowym elementem, który posiada większość stron internetowych jest główna pozioma belka nawigacyjna znajdująca się zazwyczaj na górze strony. Umieszcza się tam pasek wyszukiwania oraz przyciski nawigacyjne przekierowujące do najważniejszych podstron. Odnośniki mogą być widoczne lub ukryte pod rozwijanym menu. Przyjęło się, że w lewym górnym rogu umieszcza się logo. W prawym rogu natomiast, znajdują się opcje takie jak zmiana języka strony, ustawienia i przekierowanie do profilu użytkownika. W przypadku bardziej rozbudowanych portali internetowych, wykorzystywane są także belki nawigacyjne boczne, po lewej lub prawej stronie. Ułatwiają one nawigację i poruszanie się po wielu kategoriach, zawierających równie dużo podkategorii. Na środku strony dominuje treść, dla której portal powstał. Czy są to aktualności ze świata układające się w siatkę lub tabelę, czy kolumna najnowszych powiadomień, to ta zawartość najbardziej przykuwa wzrok. W tym celu stosowane są oczywiście rozmaite funkcje formatowania, odpowiedni dobór kolorów i ciekawe animacje. Wszystkie elementy tworzą spójną całość.
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 liczby 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.
![Grafika ilustrująca Podobieństwa i różnice między stronami statycznymi, a dynamicznymi. Strony statyczne: zawierają tą samą treść, wszyscy widzą tą samą treść. Strony dynamiczne: treść jest modyfikowana na bieżąco, różni użytkownicy widzą odmienne treści, możliwość korzystania z baz danych.](https://static.zpe.gov.pl/portal/f/res-minimized/RdVx6b7yvH9zI/1712839634/1PDirQlDaiT0g2RrNfk5DEuePLi200Qe.png)
Strony statyczne | Strony dynamiczne |
---|---|
Zawierają tę samą treść | Treść jest modyfikowana na bieżąco |
Wszyscy widzą tę samą treść | Różni użytkownicy widzą odmienne treści |
Pusta komórka | Możliwość korzystania z baz danych |
Zasady projektowania stron WWW
W celu zapewnienia prawidłowego wyświetlania 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 HTML5HTML5HTML5 (wersja HTML5). 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.
Standard HTML5 to dokładna specyfikacja techniczna, która szczegółowo opisuje wszystkie elementy dostępne w HTML. Możesz się z nim zapoznać pod adresem http://whatwg.org/html.
![Zrzut fragmentu okna strony: http://whatwg.org/html Zrzut fragmentu okna strony: http://whatwg.org/html. Na białej stronie widnieje tekst nagłówek HTML. Pod nim znajduje się napis Living Standard - Last Updated 20 March 2023>. Poniżej w prostokątnych bloczkach ułożonych w dwóch rzędach znajdują się odnośniki: One‑Page Version - html.spec.whatwg.org, Multipage Version - /multipage, Version for Web Devs - /dev, PDF Version - /print.pdf, Translations - 日本語 • 简体中文, FAQ - on GitHub, Chat - on Matrix, Contribute on GitHub - whatwg/html repository, Commits- on GitHub, Snapshot - as of this commit, Twitter Updates -@htmlstandard, Open Issues - filed on GitHub, Open an Issue - whatwg.org/newbug, Tests - web‑platform‑tests html/, Issues for Tests - ongoing work. W prawym górnym rogu strony widnieje pytajnik w okręgu.](https://static.zpe.gov.pl/portal/f/res-minimized/RhZKqaThQkEmj/1712839635/1DTzrYgYWF0O5w1LU1zavXgGATSYveBh.png)
Tworzenie stron WWW za pomocą edytorów graficznych i tekstowych
Dla osób początkujących w procesie tworzenia stron internetowych, ułatwieniem jest możliwość tworzenia ich za pomocą edytorów graficznych. Autor, za pomocą myszki i opcji menu danego edytora, tworzy stronę WWW z gotowych elementów, umieszczanych na stronie. Niestety, prostota tworzenia nie zawsze pozwala na spełnienie oczekiwań twórcy strony.
Warto wiedzieć, że w edytorach tekstuPx2ArsNCeedytorach tekstu i arkuszach kalkulacyjnychPPFd3jtJgarkuszach kalkulacyjnych (w pakiecie Microsoft Office lub LibreOffice) istnieje możliwość zapisu dokumentów tam stworzonych pod postacią strony internetowej. Wystarczy zapisać je w formacie strony Web, wybierając odpowiednią opcję z menu programu, w którym powstała. Na przykład, z menu Plik
pakietu Office wybierz opcję Zapisz jako
, a następnie kliknij Strona sieci Web
. Uzyskany efekt może nie spełnić twoich oczekiwań co do wyglądu i z pewnością nie będzie idealny pod względem informatycznym.
Spróbuj zapoznać się z kodem źródłowym dowolnej strony. W tym celu otwórz ją w wybranej przeglądarce i wybierz z menu kontekstowego (widocznego po naciśnięciu prawego klawisza myszy) opcję Wyświetl źródło strony
lub Źródło strony
.
Poniżej znajdziesz zrzut okna menu kontekstowego wyświetlonego w przeglądarce Microsoft Edge. Opcja Wyświetl źródło strony
jest podświetlona na szaro i znajduje się na przedostatniej pozycji na liście. Skrót klawiszowy pokazujący źródło strony to Ctrl+U
.
![Zrzut okna menu kontekstowego przeglądarki Microsoft Edge Ilustracja przedstawia zrzut okna menu kontekstowego na otwartym pliku html Moja pierwsza strona w przeglądarce Microsoft Edge. Opcje od góry: 1. Wstecz, skrót klawiszowy Alt+Strzałka w lewo, 2. Przewiń do przodu,skrót klawiszowy Alt+Strzałka w prawo, 3. Odśwież, skrót klawiszowy Ctrl+R, 4. Zapisz jako,skrót klawiszowy Ctrl+S, 5. Drukuj, skrót klawiszowy Ctrl+P, 6. Emituj multimedia do urządzenia,7. Wyślij stronę na swoje urządzenia, 8. Utwórz kod QR dla tej strony, 9. Czytaj na głos,skrót klawiszowy <math aria‑label="kontrol plus szift plus U">Ctrl+Shift+U, 10. Tłumacz na język polski, 11. Dodaj stronę do sekcji Kolekcje,12. Udostępnij, 13. Wybór internetowy, skrót klawiszowy <math aria‑label="kontrol plus szift plus iks">Ctrl+Shift+X, 14. Przechwycenie sieci Web, skrót klawiszowy <math aria‑label="kontrol plus szift plus es">Ctrl+Shift+S, 15. Wyświetl źródło strony, skrót klawiszowy <math aria‑label="kontrol plus U">Ctrl+,16. Wykonaj inspekcję.](https://static.zpe.gov.pl/portal/f/res-minimized/RHFoFi2AcSabP/1712839635/j27cBeBZf1v9xSb1bd3JSAZ18CRBbJ8Y.png)
Poniżej znajdziesz zrzut przykładowego kodu źródłowego strony Wikipedii.
![Kod źródłowy strony Wikipedia.org wyświetlony w przeglądarce Microsoft Edge Ilustracja przedstawia okno przeglądarki Microsoft Edge, w której został otwarty kod źródłowy strony Wikipedia.org. Znaczniki HTML umieszczone są w nawiasach ostrych. Na górze znajduje się deklaracja dokumentu HTML: !DOCTYPE html. Pod nią widoczne jest otwarcie głównego znacznika html, w którym zawarty jest cały kod. Kod podzielony jest na dwie części. Pierwsza część odpowiada nagłówki, znacznik head. W znaczniku znajdują się deklaracje dotyczące, tytułu sytrony, kodowania, ostylowania, JavaScriptu. Druga cześć kodu to tak zwane body. W body znajduje się kod dotyczący budowy strony.](https://static.zpe.gov.pl/portal/f/res-minimized/R1Dmos64Srtob/1712839636/zEpJupYVv8wAb7TDIa4tCPBFKl7SF8sK.png)
Zapoznaj się z poniższym kodem źródłowym przykładowej strony internetowej. W notesie wypisz powtarzające i pojawiające się charakterystyczne elementy znalezione w jej strukturze.
<!-- To jest komentarz -->
<html>
<head>
<title>Przykładowa strona HTML</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest akapit tekstu. Możesz użyć znaczników <strong>strong</strong> lub <em>em</em>, aby nadać tekstowi odpowiednie formatowanie.</p>
<p>Oto lista nieuporządkowana:</p>
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>
<p>A to lista uporządkowana:</p>
<ol>
<li>Pierwszy krok</li>
<li>Drugi krok</li>
<li>Trzeci krok</li>
</ol>
<p>Oto tabela z danymi:</p>
<table border="1">
<tr>
<td>Nazwa</td>
<td>Cena</td>
<td>Ilość</td>
</tr>
<tr>
<td>Jabłko</td>
<td>2 zł</td>
<td>5 sztuk</td>
</tr>
<tr>
<td>Banan</td>
<td>3 zł</td>
<td>3 sztuki</td>
</tr>
<tr>
<td>Pomarańcza</td>
<td>4 zł</td>
<td>2 sztuki</td>
</tr>
</table>
<p>Oto formularz, który pozwala wprowadzić swoje imię i e-mail:</p>
<form action="https://www.example.com" method="get">
<label for="name">Imię:</label>
<input type="text" id="name" name="name" value="Jan">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" value="jan@example.com">
<button type="submit">Wyślij</button>
</form>
<p>Oto obraz kwiatu:</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Sunflower_from_Silesia2.jpg/320px-Sunflower_from_Silesia2.jpg" alt="Słonecznik" width="320" height="240">
<p>Oto odnośnik do Wikipedii:</p>
<a href="https://pl.wikipedia.org">Wikipedia</a>
</body>
</html>
Spróbuj wyświetlić również kod źródłowy dowolnej strony znalezionej w internecie. W tym celu otwórz ją w wybranej przeglądarce i wybierz z menu kontekstowego opcję Wyświetl źródło strony
lub Źródło strony
. Zwróć uwagę, jak bardzo jest on rozbudowany względem podanego wyżej przykładu.
W przykładowej stronie zwróć uwagę na elementy zawarte w ostrokątnych nawiasach.
Skrót klawiszowy pokazujący źródło strony to Ctrl+U
.
Charakterystyczne elementy, które możesz znaleźć w przykładowym kodzie źródłowym prostej strony internetowej to: <html>, <head>, <body>, <h1>, <p>, <ul>, <ol>, <li>, <strong>, <em>, <table>, <tr>, <td>, <form>, <input>, <label>, <img> i <a>. Kontynuuj materiał, aby dowiedzieć się o nich więcej.
Poniżej w zakładce znajdziesz również przykładowy kod źródłowy głównej strony Wikipedii.
<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-enabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-0 vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-not-available" lang="pl" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Wikipedia, wolna encyklopedia</title>
<script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-enabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-0 vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-not-available";var cookie=document.cookie.match(/(?:^|; )plwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":[",\t."," \t,"],"wgDigitTransformTable":["",""],
"wgDefaultDateFormat":"dmy","wgMonthNames":["","styczeń","luty","marzec","kwiecień","maj","czerwiec","lipiec","sierpień","wrzesień","październik","listopad","grudzień"],"wgRequestId":"c62c116b-0a48-49bf-b0d4-a2fbf25fefd0","wgCanonicalNamespace":"Project","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":4,"wgPageName":"Wikipedia:Strona_główna","wgTitle":"Strona główna","wgCurRevisionId":71125202,"wgRevisionId":71125202,"wgArticleId":2956678,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Strona główna"],"wgPageViewLanguage":"pl","wgPageContentLanguage":"pl","wgPageContentModel":"wikitext","wgRelevantPageName":"Wikipedia:Strona_główna","wgRelevantArticleId":2956678,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":["sysop"],"wgRestrictionMove":["sysop"],"wgIsMainPage":true,"wgNoticeProject":"wikipedia","wgFlaggedRevsParams":{"tags":{"accuracy":{"levels":1}}},
"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":10,"wgVisualEditor":{"pageLanguageCode":"pl","pageLanguageDir":"ltr","pageVariantFallbacks":"pl"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":true,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":4000,"wgULSCurrentAutonym":"polski","wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"visual","wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q5296","wgCheckUserClientHintsHeadersJsApi":["architecture","bitness","brands","fullVersionList","mobile","model","platform","platformVersion"]
,"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"skins.vector.user.styles":"ready","ext.gadget.wikibugs-styles":"ready","ext.gadget.wikiflex":"ready","ext.gadget.hlist":"ready","ext.gadget.small-references":"ready","ext.gadget.citation-access-info":"ready","ext.gadget.sprawdz-problemy-szablony":"ready","ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","skins.vector.user":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","codex-search-styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","ext.wikimediaBadges":
"ready"};RLPAGEMODULES=["ext.scribunto.logs","site","mediawiki.page.ready","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ll-script-loader","ext.gadget.veKeepParameters","ext.gadget.szablon-galeria","ext.gadget.NavFrame","ext.gadget.maps","ext.gadget.padlock-indicators","ext.gadget.interwiki-langlist","ext.gadget.edit-summaries","ext.gadget.edit-first-section","ext.gadget.wikibugs","ext.gadget.nuxTBKeys","ext.gadget.enhanced-upload","ext.gadget.map-toggler","ext.gadget.ReferenceTooltips","ext.gadget.narrowFootnoteColumns","ext.gadget.WDsearch","ext.gadget.main-page-js","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.head","mmv.bootstrap.autostart","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","wikibase.client.vector-2022",
"ext.checkUser.clientHints"];</script>
<script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"});
}];});});</script>
<link rel="stylesheet" href="/w/load.php?lang=pl&modules=codex-search-styles%7Cext.discussionTools.init.styles%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector-2022">
<script async="" src="/w/load.php?lang=pl&modules=startup&only=scripts&raw=1&skin=vector-2022"></script>
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" href="/w/load.php?lang=pl&modules=ext.gadget.citation-access-info%2Chlist%2Csmall-references%2Csprawdz-problemy-szablony%2Cwikibugs-styles%2Cwikiflex&only=styles&skin=vector-2022">
<link rel="stylesheet" href="/w/load.php?lang=pl&modules=site.styles&only=styles&skin=vector-2022">
<meta name="generator" content="MediaWiki 1.42.0-wmf.2">
<meta name="referrer" content="origin">
<meta name="referrer" content="origin-when-cross-origin">
<meta name="robots" content="max-image-preview:standard">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=1000">
<meta property="og:title" content="Wikipedia, wolna encyklopedia">
<meta property="og:type" content="website">
<link rel="preconnect" href="//upload.wikimedia.org">
<link rel="alternate" media="only screen and (max-width: 720px)" href="//pl.m.wikipedia.org/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna">
<link rel="alternate" type="application/atom+xml" title="Kanał informacyjny Wikipedii o ilustracjach na medal" href="/w/api.php?action=featuredfeed&feed=potd&feedformat=atom">
<link rel="alternate" type="application/atom+xml" title="Kanał wyróżnionych artykułów witryny Wikipedia" href="/w/api.php?action=featuredfeed&feed=featured&feedformat=atom">
<link rel="alternate" type="application/atom+xml" title="Kanał informacyjny Wikipedii o wybranych rocznicach" href="/w/api.php?action=featuredfeed&feed=onthisday&feedformat=atom">
<link rel="alternate" type="application/atom+xml" title="Kanał informacyjny Wikipedii o nowych artykułach" href="/w/api.php?action=featuredfeed&feed=dyk&feedformat=atom">
<link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png">
<link rel="icon" href="/static/favicon/wikipedia.ico">
<link rel="search" type="application/opensearchdescription+xml" href="/w/opensearch_desc.php" title="Wikipedia (pl)">
<link rel="EditURI" type="application/rsd+xml" href="//pl.wikipedia.org/w/api.php?action=rsd">
<link rel="canonical" href="https://pl.wikipedia.org/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna">
<link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.pl">
<link rel="alternate" type="application/atom+xml" title="Kanał Atom Wikipedii" href="/w/index.php?title=Specjalna:Ostatnie_zmiany&feed=atom">
<link rel="dns-prefetch" href="//meta.wikimedia.org" />
<link rel="dns-prefetch" href="//login.wikimedia.org">
</head>
<body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-4 ns-subject page-Wikipedia_Strona_główna rootpage-Wikipedia_Strona_główna skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Przejdź do zawartości</a>
<div class="vector-header-container">
<header class="vector-header mw-header">
<div class="vector-header-start">
<nav class="vector-main-menu-landmark" aria-label="Witryna" role="navigation">
<div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" >
<input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Menu główne" >
<label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span>
<span class="vector-dropdown-label-text">Menu główne</span>
</label>
<div class="vector-dropdown-content">
<div id="vector-main-menu-unpinned-container" class="vector-unpinned-container">
<div id="vector-main-menu" class="vector-main-menu vector-pinnable-element">
<div
class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned"
data-feature-name="main-menu-pinned"
data-pinnable-element-id="vector-main-menu"
data-pinned-container-id="vector-main-menu-pinned-container"
data-unpinned-container-id="vector-main-menu-unpinned-container"
>
<div class="vector-pinnable-header-label">Menu główne</div>
<button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">przypnij</button>
<button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">ukryj</button>
</div>
<div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" >
<div class="vector-menu-heading">
Nawigacja
</div>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna" title="Przejdź na stronę główną [z]" accesskey="z"><span>Strona główna</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Specjalna:Losowa_strona" title="Załaduj losową stronę [x]" accesskey="x"><span>Losuj artykuł</span></a></li><li id="n-Kategorie" class="mw-list-item"><a href="/wiki/Portal:Kategorie_G%C5%82%C3%B3wne"><span>Kategorie artykułów</span></a></li><li id="n-Featured-articles" class="mw-list-item"><a href="/wiki/Wikipedia:Wyr%C3%B3%C5%BCniona_zawarto%C5%9B%C4%87_Wikipedii"><span>Najlepsze artykuły</span></a></li><li id="n-FAQ" class="mw-list-item"><a href="/wiki/Pomoc:FAQ"><span>Częste pytania (FAQ)</span></a></li>
</ul>
</div>
</div>
<div id="p-zmiany" class="vector-menu mw-portlet mw-portlet-zmiany" >
<div class="vector-menu-heading">
Dla czytelników
</div>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="n-czytelnicy" class="mw-list-item"><a href="/wiki/Wikipedia:O_Wikipedii"><span>O Wikipedii</span></a></li><li id="n-bug_in_article" class="mw-list-item"><a href="/wiki/Wikipedia:Zg%C5%82o%C5%9B_b%C5%82%C4%85d_w_artykule"><span>Zgłoś błąd</span></a></li><li id="n-bad-image" class="mw-list-item"><a href="/wiki/Wikipedia:Zg%C5%82oszone_grafiki"><span>Zgłoś błąd w pliku</span></a></li><li id="n-contact" class="mw-list-item"><a href="/wiki/Wikipedia:Kontakt_z_wikipedystami"><span>Kontakt</span></a></li><li id="n-sitesupport" class="mw-list-item"><a href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_pl.wikipedia.org&uselang=pl" title="Pomóż nam"><span>Wspomóż Wikipedię</span></a></li>
</ul>
</div>
</div>
<div id="p-edytorzy" class="vector-menu mw-portlet mw-portlet-edytorzy" >
<div class="vector-menu-heading">
Dla wikipedystów
</div>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="n-pierwsze-kroki" class="mw-list-item"><a href="/wiki/Pomoc:Pierwsze_kroki"><span>Pierwsze kroki</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Portal_wikipedyst%C3%B3w" title="O projekcie – co możesz zrobić, gdzie możesz znaleźć informacje"><span>Portal wikipedystów</span></a></li><li id="n-Noticeboard" class="mw-list-item"><a href="/wiki/Wikipedia:Tablica_og%C5%82osze%C5%84"><span>Ogłoszenia</span></a></li><li id="n-Guidelines" class="mw-list-item"><a href="/wiki/Wikipedia:Zasady"><span>Zasady</span></a></li><li id="n-helppage-name" class="mw-list-item"><a href="/wiki/Pomoc:Spis_tre%C5%9Bci"><span>Pomoc</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Specjalna:Ostatnie_zmiany" title="Lista ostatnich zmian w Wikipedii. [r]" accesskey="r"><span>Ostatnie zmiany</span></a></li>
</ul>
</div>
</div>
<div class="vector-main-menu-action vector-main-menu-action-lang-alert">
<div class="vector-main-menu-action-item">
<div class="vector-main-menu-action-heading vector-menu-heading">Języki</div>
<div class="vector-main-menu-action-content vector-menu-content">
<div class="mw-message-box cdx-message cdx-message--block mw-message-box-notice cdx-message--notice vector-language-sidebar-alert"><span class="cdx-message__icon"></span><div class="cdx-message__content">Linki pomiędzy różnymi wersjami językowymi znajdują się na górze strony, naprzeciw jej tytułu.</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<a href="/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna" class="mw-logo">
<img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50">
<span class="mw-logo-container">
<img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;">
<img class="mw-logo-tagline" alt="wolna encyklopedia" src="/static/images/mobile/copyright/wikipedia-tagline-pl.svg" width="120" height="13" style="width: 7.5em; height: 0.8125em;">
</span>
</a>
</div>
<div class="vector-header-end">
<div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box">
<a href="/wiki/Specjalna:Szukaj" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" id="" title="Przeszukaj Wikipedię [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span>
<span>Szukaj</span>
</a>
<div class="vector-typeahead-search-container">
<div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width">
<form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button">
<div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved">
<div class="cdx-text-input cdx-text-input--has-start-icon">
<input
class="cdx-text-input__input"
type="search" name="search" placeholder="Przeszukaj Wikipedię" aria-label="Przeszukaj Wikipedię" autocapitalize="sentences" title="Przeszukaj Wikipedię [f]" accesskey="f" id="searchInput"
>
<span class="cdx-text-input__icon cdx-text-input__start-icon"></span>
</div>
<input type="hidden" name="title" value="Specjalna:Szukaj">
</div>
<button class="cdx-button cdx-search-input__end-button">Szukaj</button>
</form>
</div>
</div>
</div>
<nav class="vector-user-links" aria-label="Narzędzia osobiste" role="navigation" >
<div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet mw-portlet-vector-user-menu-overflow" >
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Specjalna:Utw%C3%B3rz_konto&returnto=Wikipedia%3AStrona+g%C5%82%C3%B3wna" title="Zachęcamy do stworzenia konta i zalogowania, ale nie jest to obowiązkowe."><span>Utwórz konto</span></a></li><li id="pt-login-2" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Specjalna:Zaloguj&returnto=Wikipedia%3AStrona+g%C5%82%C3%B3wna" title="Zachęcamy do zalogowania się, choć nie jest to obowiązkowe. [o]" accesskey="o"><span>Zaloguj się</span></a></li>
</ul>
</div>
</div>
<div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Więcej opcji" >
<input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Narzędzia osobiste" >
<label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span>
<span class="vector-dropdown-label-text">Narzędzia osobiste</span>
</label>
<div class="vector-dropdown-content">
<div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="Menu użytkownika" >
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Specjalna:Utw%C3%B3rz_konto&returnto=Wikipedia%3AStrona+g%C5%82%C3%B3wna" title="Zachęcamy do stworzenia konta i zalogowania, ale nie jest to obowiązkowe."><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Utwórz konto</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Specjalna:Zaloguj&returnto=Wikipedia%3AStrona+g%C5%82%C3%B3wna" title="Zachęcamy do zalogowania się, choć nie jest to obowiązkowe. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Zaloguj się</span></a></li>
</ul>
</div>
</div>
<div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" >
<div class="vector-menu-heading">
Strony dla anonimowych edytorów <a href="/wiki/Pomoc:Pierwsze_kroki" aria-label="Dowiedz się więcej na temat edytowania"><span>dowiedz się więcej</span></a>
</div>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Specjalna:M%C3%B3j_wk%C5%82ad" title="Lista edycji wykonanych z tego adresu IP [y]" accesskey="y"><span>Edycje</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Specjalna:Moja_dyskusja" title="Dyskusja użytkownika dla tego adresu IP [n]" accesskey="n"><span>Dyskusja</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
</div>
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="vector-sitenotice-container">
<div id="siteNotice"><!-- CentralNotice --></div>
</div>
<div class="vector-main-menu-container">
<div id="mw-navigation">
<nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Witryna" role="navigation">
<div id="vector-main-menu-pinned-container" class="vector-pinned-container">
</div>
</nav>
</div>
</div>
<div class="mw-content-container">
<main id="content" class="mw-body" role="main">
<header class="mw-body-header vector-page-titlebar vector-page-titlebar-blank">
<h1 id="firstHeading" class="firstHeading mw-first-heading" style="display: none"><span class="mw-page-title-namespace">Wikipedia</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Strona główna</span></h1>
<div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" >
<input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Przejdź do artykułu w innym języku. Treść dostępna w 60 językach" >
<label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-60" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span>
<span class="vector-dropdown-label-text">60 języków</span>
</label>
<div class="vector-dropdown-content">
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/" title="arabski" lang="ar" hreflang="ar" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-bn mw-list-item"><a href="https://bn.wikipedia.org/wiki/" title="bengalski" lang="bn" hreflang="bn" class="interlanguage-link-target"><span>বাংলা</span></a></li><li class="interlanguage-link interwiki-be mw-list-item"><a href="https://be.wikipedia.org/wiki/" title="białoruski" lang="be" hreflang="be" class="interlanguage-link-target"><span>Беларуская</span></a></li><li class="interlanguage-link interwiki-be-x-old mw-list-item"><a href="https://be-tarask.wikipedia.org/wiki/" title="Belarusian (Taraškievica orthography)" lang="be-tarask" hreflang="be-tarask" class="interlanguage-link-target"><span>Беларуская (тарашкевіца)</span></a></li><li class="interlanguage-link interwiki-bg mw-list-item"><a href="https://bg.wikipedia.org/wiki/" title="bułgarski" lang="bg" hreflang="bg" class="interlanguage-link-target"><span>Български</span></a></li><li class="interlanguage-link interwiki-bs mw-list-item"><a href="https://bs.wikipedia.org/wiki/" title="bośniacki" lang="bs" hreflang="bs" class="interlanguage-link-target"><span>Bosanski</span></a></li><li class="interlanguage-link interwiki-br mw-list-item"><a href="https://br.wikipedia.org/wiki/" title="bretoński" lang="br" hreflang="br" class="interlanguage-link-target"><span>Brezhoneg</span></a></li><li class="interlanguage-link interwiki-ca mw-list-item"><a href="https://ca.wikipedia.org/wiki/" title="kataloński" lang="ca" hreflang="ca" class="interlanguage-link-target"><span>Català</span></a></li><li class="interlanguage-link interwiki-cs mw-list-item"><a href="https://cs.wikipedia.org/wiki/" title="czeski" lang="cs" hreflang="cs" class="interlanguage-link-target"><span>Čeština</span></a></li><li class="interlanguage-link interwiki-da mw-list-item"><a href="https://da.wikipedia.org/wiki/" title="duński" lang="da" hreflang="da" class="interlanguage-link-target"><span>Dansk</span></a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/" title="niemiecki" lang="de" hreflang="de" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-dsb mw-list-item"><a href="https://dsb.wikipedia.org/wiki/" title="dolnołużycki" lang="dsb" hreflang="dsb" class="interlanguage-link-target"><span>Dolnoserbski</span></a></li><li class="interlanguage-link interwiki-et mw-list-item"><a href="https://et.wikipedia.org/wiki/" title="estoński" lang="et" hreflang="et" class="interlanguage-link-target"><span>Eesti</span></a></li><li class="interlanguage-link interwiki-el mw-list-item"><a href="https://el.wikipedia.org/wiki/" title="grecki" lang="el" hreflang="el" class="interlanguage-link-target"><span>Εepsilonλlambdaλlambdaηetaνnuιiotaκkappaά</span></a></li><li class="interlanguage-link interwiki-en mw-list-item"><a href="https://en.wikipedia.org/wiki/" title="angielski" lang="en" hreflang="en" class="interlanguage-link-target"><span>English</span></a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikipedia.org/wiki/" title="hiszpański" lang="es" hreflang="es" class="interlanguage-link-target"><span>Español</span></a></li><li class="interlanguage-link interwiki-eo mw-list-item"><a href="https://eo.wikipedia.org/wiki/" title="esperanto" lang="eo" hreflang="eo" class="interlanguage-link-target"><span>Esperanto</span></a></li><li class="interlanguage-link interwiki-eu mw-list-item"><a href="https://eu.wikipedia.org/wiki/" title="baskijski" lang="eu" hreflang="eu" class="interlanguage-link-target"><span>Euskara</span></a></li><li class="interlanguage-link interwiki-fa mw-list-item"><a href="https://fa.wikipedia.org/wiki/" title="perski" lang="fa" hreflang="fa" class="interlanguage-link-target"><span>فارسی</span></a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/" title="francuski" lang="fr" hreflang="fr" class="interlanguage-link-target"><span>Français</span></a></li><li class="interlanguage-link interwiki-gl mw-list-item"><a href="https://gl.wikipedia.org/wiki/" title="galicyjski" lang="gl" hreflang="gl" class="interlanguage-link-target"><span>Galego</span></a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/" title="koreański" lang="ko" hreflang="ko" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-hy mw-list-item"><a href="https://hy.wikipedia.org/wiki/" title="ormiański" lang="hy" hreflang="hy" class="interlanguage-link-target"><span>Հայերեն</span></a></li><li class="interlanguage-link interwiki-hsb mw-list-item"><a href="https://hsb.wikipedia.org/wiki/" title="górnołużycki" lang="hsb" hreflang="hsb" class="interlanguage-link-target"><span>Hornjoserbsce</span></a></li><li class="interlanguage-link interwiki-hr mw-list-item"><a href="https://hr.wikipedia.org/wiki/" title="chorwacki" lang="hr" hreflang="hr" class="interlanguage-link-target"><span>Hrvatski</span></a></li><li class="interlanguage-link interwiki-io mw-list-item"><a href="https://io.wikipedia.org/wiki/" title="ido" lang="io" hreflang="io" class="interlanguage-link-target"><span>Ido</span></a></li><li class="interlanguage-link interwiki-id mw-list-item"><a href="https://id.wikipedia.org/wiki/" title="indonezyjski" lang="id" hreflang="id" class="interlanguage-link-target"><span>Bahasa Indonesia</span></a></li><li class="interlanguage-link interwiki-is mw-list-item"><a href="https://is.wikipedia.org/wiki/" title="islandzki" lang="is" hreflang="is" class="interlanguage-link-target"><span>Íslenska</span></a></li><li class="interlanguage-link interwiki-it mw-list-item"><a href="https://it.wikipedia.org/wiki/" title="włoski" lang="it" hreflang="it" class="interlanguage-link-target"><span>Italiano</span></a></li><li class="interlanguage-link interwiki-he mw-list-item"><a href="https://he.wikipedia.org/wiki/" title="hebrajski" lang="he" hreflang="he" class="interlanguage-link-target"><span>עברית</span></a></li><li class="interlanguage-link interwiki-ka mw-list-item"><a href="https://ka.wikipedia.org/wiki/" title="gruziński" lang="ka" hreflang="ka" class="interlanguage-link-target"><span>ქართული</span></a></li><li class="interlanguage-link interwiki-csb mw-list-item"><a href="https://csb.wikipedia.org/wiki/" title="kaszubski" lang="csb" hreflang="csb" class="interlanguage-link-target"><span>Kaszëbsczi</span></a></li><li class="interlanguage-link interwiki-kk mw-list-item"><a href="https://kk.wikipedia.org/wiki/" title="kazachski" lang="kk" hreflang="kk" class="interlanguage-link-target"><span>Қазақша</span></a></li><li class="interlanguage-link interwiki-la mw-list-item"><a href="https://la.wikipedia.org/wiki/" title="łaciński" lang="la" hreflang="la" class="interlanguage-link-target"><span>Latina</span></a></li><li class="interlanguage-link interwiki-lb mw-list-item"><a href="https://lb.wikipedia.org/wiki/" title="luksemburski" lang="lb" hreflang="lb" class="interlanguage-link-target"><span>Lëtzebuergesch</span></a></li><li class="interlanguage-link interwiki-lt mw-list-item"><a href="https://lt.wikipedia.org/wiki/" title="litewski" lang="lt" hreflang="lt" class="interlanguage-link-target"><span>Lietuvių</span></a></li><li class="interlanguage-link interwiki-hu mw-list-item"><a href="https://hu.wikipedia.org/wiki/" title="węgierski" lang="hu" hreflang="hu" class="interlanguage-link-target"><span>Magyar</span></a></li><li class="interlanguage-link interwiki-mk mw-list-item"><a href="https://mk.wikipedia.org/wiki/" title="macedoński" lang="mk" hreflang="mk" class="interlanguage-link-target"><span>Македонски</span></a></li><li class="interlanguage-link interwiki-ms mw-list-item"><a href="https://ms.wikipedia.org/wiki/" title="malajski" lang="ms" hreflang="ms" class="interlanguage-link-target"><span>Bahasa Melayu</span></a></li><li class="interlanguage-link interwiki-nl mw-list-item"><a href="https://nl.wikipedia.org/wiki/" title="niderlandzki" lang="nl" hreflang="nl" class="interlanguage-link-target"><span>Nederlands</span></a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/" title="japoński" lang="ja" hreflang="ja" class="interlanguage-link-target"><span>日本語</span></a></li><li class="interlanguage-link interwiki-no mw-list-item"><a href="https://no.wikipedia.org/wiki/" title="norweski (bokmål)" lang="nb" hreflang="nb" class="interlanguage-link-target"><span>Norsk bokmål</span></a></li><li class="interlanguage-link interwiki-nn mw-list-item"><a href="https://nn.wikipedia.org/wiki/" title="norweski (nynorsk)" lang="nn" hreflang="nn" class="interlanguage-link-target"><span>Norsk nynorsk</span></a></li><li class="interlanguage-link interwiki-pt mw-list-item"><a href="https://pt.wikipedia.org/wiki/" title="portugalski" lang="pt" hreflang="pt" class="interlanguage-link-target"><span>Português</span></a></li><li class="interlanguage-link interwiki-ro mw-list-item"><a href="https://ro.wikipedia.org/wiki/" title="rumuński" lang="ro" hreflang="ro" class="interlanguage-link-target"><span>Română</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/" title="rosyjski" lang="ru" hreflang="ru" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-simple mw-list-item"><a href="https://simple.wikipedia.org/wiki/" title="Simple English" lang="en-simple" hreflang="en-simple" class="interlanguage-link-target"><span>Simple English</span></a></li><li class="interlanguage-link interwiki-sk mw-list-item"><a href="https://sk.wikipedia.org/wiki/" title="słowacki" lang="sk" hreflang="sk" class="interlanguage-link-target"><span>Slovenčina</span></a></li><li class="interlanguage-link interwiki-sl mw-list-item"><a href="https://sl.wikipedia.org/wiki/" title="słoweński" lang="sl" hreflang="sl" class="interlanguage-link-target"><span>Slovenščina</span></a></li><li class="interlanguage-link interwiki-szl mw-list-item"><a href="https://szl.wikipedia.org/wiki/" title="śląski" lang="szl" hreflang="szl" class="interlanguage-link-target"><span>Ślůnski</span></a></li><li class="interlanguage-link interwiki-sr mw-list-item"><a href="https://sr.wikipedia.org/wiki/" title="serbski" lang="sr" hreflang="sr" class="interlanguage-link-target"><span>Српски / srpski</span></a></li><li class="interlanguage-link interwiki-sh mw-list-item"><a href="https://sh.wikipedia.org/wiki/" title="serbsko-chorwacki" lang="sh" hreflang="sh" class="interlanguage-link-target"><span>Srpskohrvatski / српскохрватски</span></a></li><li class="interlanguage-link interwiki-fi mw-list-item"><a href="https://fi.wikipedia.org/wiki/" title="fiński" lang="fi" hreflang="fi" class="interlanguage-link-target"><span>Suomi</span></a></li><li class="interlanguage-link interwiki-sv mw-list-item"><a href="https://sv.wikipedia.org/wiki/" title="szwedzki" lang="sv" hreflang="sv" class="interlanguage-link-target"><span>Svenska</span></a></li><li class="interlanguage-link interwiki-te mw-list-item"><a href="https://te.wikipedia.org/wiki/" title="telugu" lang="te" hreflang="te" class="interlanguage-link-target"><span>తెలుగు</span></a></li><li class="interlanguage-link interwiki-th mw-list-item"><a href="https://th.wikipedia.org/wiki/" title="tajski" lang="th" hreflang="th" class="interlanguage-link-target"><span>ไทย</span></a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikipedia.org/wiki/" title="turecki" lang="tr" hreflang="tr" class="interlanguage-link-target"><span>Türkçe</span></a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/" title="ukraiński" lang="uk" hreflang="uk" class="interlanguage-link-target"><span>Українська</span></a></li><li class="interlanguage-link interwiki-vi mw-list-item"><a href="https://vi.wikipedia.org/wiki/" title="wietnamski" lang="vi" hreflang="vi" class="interlanguage-link-target"><span>Tiếng Việt</span></a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/" title="chiński" lang="zh" hreflang="zh" class="interlanguage-link-target"><span>中文</span></a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="vector-page-toolbar">
<div class="vector-page-toolbar-container">
<div id="left-navigation">
<nav aria-label="Przestrzenie nazw">
<div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" >
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="ca-nstab-project" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna" title="Zobacz stronę projektu [c]" accesskey="c"><span>Strona główna</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Dyskusja_Wikipedii:Strona_g%C5%82%C3%B3wna" rel="discussion" title="Dyskusja o zawartości tej strony [t]" accesskey="t"><span>Dyskusja</span></a></li>
</ul>
</div>
</div>
<div id="p-variants" class="vector-dropdown emptyPortlet" >
<input type="checkbox" id="p-variants-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-variants" class="vector-dropdown-checkbox " aria-label="Zmień wariant języka" >
<label id="p-variants-label" for="p-variants-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">polski</span>
</label>
<div class="vector-dropdown-content">
<div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" >
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<div id="right-navigation" class="vector-collapsible">
<nav aria-label="Widok">
<div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" >
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna"><span>Czytaj</span></a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Wikipedia:Strona_g%C5%82%C3%B3wna&action=edit" title="Ta strona jest zabezpieczona. Możesz zobaczyć kod źródłowy. [e]" accesskey="e"><span>Kod źródłowy</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Wikipedia:Strona_g%C5%82%C3%B3wna&action=history" title="Starsze wersje tej strony [h]" accesskey="h"><span>Wyświetl historię</span></a></li>
</ul>
</div>
</div>
</nav>
<nav class="vector-page-tools-landmark" aria-label="Narzędzia dla stron">
<div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" >
<input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Narzędzia" >
<label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Narzędzia</span>
</label>
<div class="vector-dropdown-content">
<div id="vector-page-tools-unpinned-container" class="vector-unpinned-container">
<div id="vector-page-tools" class="vector-page-tools vector-pinnable-element">
<div
class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned"
data-feature-name="page-tools-pinned"
data-pinnable-element-id="vector-page-tools"
data-pinned-container-id="vector-page-tools-pinned-container"
data-unpinned-container-id="vector-page-tools-unpinned-container"
>
<div class="vector-pinnable-header-label">Narzędzia</div>
<button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">przypnij</button>
<button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">ukryj</button>
</div>
<div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="Więcej opcji" >
<div class="vector-menu-heading">
Działania
</div>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna"><span>Czytaj</span></a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Wikipedia:Strona_g%C5%82%C3%B3wna&action=edit"><span>Kod źródłowy</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Wikipedia:Strona_g%C5%82%C3%B3wna&action=history"><span>Wyświetl historię</span></a></li>
</ul>
</div>
</div>
<div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" >
<div class="vector-menu-heading">
Ogólne
</div>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Specjalna:Linkuj%C4%85ce/Wikipedia:Strona_g%C5%82%C3%B3wna" title="Pokaż listę wszystkich stron linkujących do tej strony [j]" accesskey="j"><span>Linkujące</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Specjalna:Zmiany_w_linkowanych/Wikipedia:Strona_g%C5%82%C3%B3wna" rel="nofollow" title="Ostatnie zmiany w stronach, do których ta strona linkuje [k]" accesskey="k"><span>Zmiany w linkowanych</span></a></li><li id="t-upload" class="mw-list-item"><a href="//pl.wikipedia.org/wiki/Wikipedia:Prześlij_plik" title="Prześlij pliki [u]" accesskey="u"><span>Prześlij plik</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Specjalna:Strony_specjalne" title="Lista wszystkich stron specjalnych [q]" accesskey="q"><span>Strony specjalne</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Wikipedia:Strona_g%C5%82%C3%B3wna&oldid=71125202" title="Stały link do tej wersji tej strony"><span>Link do tej wersji</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Wikipedia:Strona_g%C5%82%C3%B3wna&action=info" title="Więcej informacji na temat tej strony"><span>Informacje o tej stronie</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Specjalna:UrlShortener&url=https%3A%2F%2Fpl.wikipedia.org%2Fwiki%2FWikipedia%3AStrona_g%25C5%2582%25C3%25B3wna"><span>Zobacz skrócony adres URL</span></a></li><li id="t-wikibase" class="mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q5296" title="Link do powiązanego elementu w repozytorium danych [g]" accesskey="g"><span>Element Wikidanych</span></a></li>
</ul>
</div>
</div>
<div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" >
<div class="vector-menu-heading">
Drukuj lub eksportuj
</div>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Specjalna:Ksi%C4%85%C5%BCka&bookcmd=book_creator&referer=Wikipedia%3AStrona+g%C5%82%C3%B3wna"><span>Utwórz książkę</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Specjalna:DownloadAsPdf&page=Wikipedia%3AStrona_g%C5%82%C3%B3wna&action=show-download-screen"><span>Pobierz jako PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Wikipedia:Strona_g%C5%82%C3%B3wna&printable=yes" title="Wersja do wydruku [p]" accesskey="p"><span>Wersja do druku</span></a></li>
</ul>
</div>
</div>
<div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" >
<div class="vector-menu-heading">
W innych projektach
</div>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li class="wb-otherproject-link wb-otherproject-commons mw-list-item"><a href="https://commons.wikimedia.org/wiki/Main_Page" hreflang="en"><span>Wikimedia Commons</span></a></li><li class="wb-otherproject-link wb-otherproject-foundation mw-list-item"><a href="https://foundation.wikimedia.org/wiki/Home" hreflang="en"><span>Wikimedia Foundation</span></a></li><li class="wb-otherproject-link wb-otherproject-mediawiki mw-list-item"><a href="https://www.mediawiki.org/wiki/MediaWiki" hreflang="en"><span>MediaWiki</span></a></li><li class="wb-otherproject-link wb-otherproject-meta mw-list-item"><a href="https://meta.wikimedia.org/wiki/Main_Page" hreflang="en"><span>Meta-Wiki</span></a></li><li class="wb-otherproject-link wb-otherproject-outreach mw-list-item"><a href="https://outreach.wikimedia.org/wiki/Main_Page" hreflang="en"><span>Wikimedia Outreach</span></a></li><li class="wb-otherproject-link wb-otherproject-sources mw-list-item"><a href="https://wikisource.org/wiki/Main_Page" hreflang="en"><span>Multilingual Wikisource</span></a></li><li class="wb-otherproject-link wb-otherproject-species mw-list-item"><a href="https://species.wikimedia.org/wiki/Main_Page" hreflang="en"><span>Wikispecies</span></a></li><li class="wb-otherproject-link wb-otherproject-wikibooks mw-list-item"><a href="https://pl.wikibooks.org/wiki/Wikibooks:Strona_g%C5%82%C3%B3wna" hreflang="pl"><span>Wikibooks</span></a></li><li class="wb-otherproject-link wb-otherproject-wikidata mw-list-item"><a href="https://www.wikidata.org/wiki/Wikidata:Main_Page" hreflang="en"><span>Wikidane</span></a></li><li class="wb-otherproject-link wb-otherproject-wikifunctions mw-list-item"><a href="https://www.wikifunctions.org/wiki/Wikifunctions:Main_Page" hreflang="en"><span>Wikifunctions</span></a></li><li class="wb-otherproject-link wb-otherproject-wikimania badge-Q70893996 mw-list-item" title=""><a href="https://wikimania.wikimedia.org/wiki/Wikimania" hreflang="en"><span>Wikimania</span></a></li><li class="wb-otherproject-link wb-otherproject-wikinews mw-list-item"><a href="https://pl.wikinews.org/wiki/Strona_g%C5%82%C3%B3wna" hreflang="pl"><span>Wikinews</span></a></li><li class="wb-otherproject-link wb-otherproject-wikiquote mw-list-item"><a href="https://pl.wikiquote.org/wiki/Strona_g%C5%82%C3%B3wna" hreflang="pl"><span>Wikicytaty</span></a></li><li class="wb-otherproject-link wb-otherproject-wikisource mw-list-item"><a href="https://pl.wikisource.org/wiki/Wiki%C5%BAr%C3%B3d%C5%82a:Strona_g%C5%82%C3%B3wna" hreflang="pl"><span>Wikiźródła</span></a></li><li class="wb-otherproject-link wb-otherproject-wikivoyage mw-list-item"><a href="https://pl.wikivoyage.org/wiki/Strona_g%C5%82%C3%B3wna" hreflang="pl"><span>Wikipodróże</span></a></li><li class="wb-otherproject-link wb-otherproject-wiktionary mw-list-item"><a href="https://pl.wiktionary.org/wiki/Wikis%C5%82ownik:Strona_g%C5%82%C3%B3wna" hreflang="pl"><span>Wikisłownik</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="vector-column-end">
<nav class="vector-page-tools-landmark vector-sticky-pinned-container" aria-label="Narzędzia dla stron">
<div id="vector-page-tools-pinned-container" class="vector-pinned-container">
</div>
</nav>
</div>
<div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container>
<div class="vector-body-before-content">
<div class="mw-indicators">
</div>
<div id="siteSub" class="noprint">Z Wikipedii, wolnej encyklopedii</div>
</div>
<div id="contentSub"><div id="mw-content-subtitle"></div></div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="pl" dir="ltr"><div class="mw-parser-output"><style data-mw-deduplicate="TemplateStyles:r71125188">.mw-parser-output #main-page #main-page-header{background:url("//upload.wikimedia.org/wikipedia/commons/3/3e/MP-open-book4.png")-20px 0px no-repeat;border:1px solid #c5c5c5;border-radius:1em;font-size:1.1em;padding:5px 15px 0}.mw-parser-output #main-page #main-page-welcome{display:block}.mw-parser-output #main-page #main-page-header strong{font-size:1.2em}.mw-parser-output #main-page #main-page-header #main-page-welcome strong{font-size:1.8em}.mw-parser-output #main-page #main-page-intro{float:left;width:60%;padding-top:4px}.mw-parser-output #main-page #main-page-portals{float:right;width:40%;text-align:center}.mw-parser-output #main-page #main-page-wiki-events{clear:both;text-align:center;border-top:1px solid #c5c5c5}.mw-parser-output #main-page #main-page-wiki-events:empty{border-top:0}.mw-parser-output #main-page #main-page-portals span{display:block;margin-bottom:.5em}.mw-parser-output #main-page #main-page-content{padding-top:1em}.mw-parser-output #main-page #main-page-content h2,.mw-parser-output #main-page #main-page-footer h2{clear:both;padding:.15em 0;margin-top:1em;border-width:0;font-size:1.3em;font-weight:bold}.mw-parser-output #main-page #main-page-footer h2,.mw-parser-output #main-page #main-page-content h2{position:relative;z-index:0}.mw-parser-output #main-page #main-page-footer h2::after,.mw-parser-output #main-page #main-page-content h2::after{display:block;content:"";position:absolute;top:50%;transform:translateY(-50%);left:10px;background-image:linear-gradient(90deg,#c2dfff 0%,transparent 88%);border-radius:1em;height:1.5em;width:90%;z-index:-1}.mw-parser-output #main-page #main-page-footer h2::after{background-image:linear-gradient(90deg,#c6fec8 0%,transparent 88%)}.mw-parser-output #main-page #main-page-footer .blue h2{background-image:linear-gradient(90deg,#c2dfff 0%,transparent 88%)}.mw-parser-output #main-page .section .footer{clear:both;text-align:right;font-style:italic;margin-top:.5em}.mw-parser-output #main-page #main-page-content h2{margin-left:-.2em}.mw-parser-output #main-page #main-page-footer h2{margin-left:-.2em;margin-right:-.2em}.mw-parser-output #main-page #main-page-didyouknow h2,.mw-parser-output #main-page #main-page-featured-article h2,.mw-parser-output #main-page #main-page-footer h2{margin-top:-.5em}.mw-parser-output #main-page #main-page-column1,.mw-parser-output #main-page #main-page-column2,.mw-parser-output #main-page #main-page-footer .section{margin-bottom:1em;border-width:1px;border-style:solid;border-radius:1em;padding:1em}.mw-parser-output #main-page #main-page-column1,.mw-parser-output #main-page #main-page-column2,.mw-parser-output #main-page #main-page-footer .section.blue{border-color:#a7d7f9}.mw-parser-output #main-page #main-page-footer .section{border-color:#a7f9ab}.mw-parser-output #main-page #main-page-column1,.mw-parser-output #main-page #main-page-column2{box-sizing:border-box;width:49.5%}.mw-parser-output #main-page #main-page-column1{float:left}.mw-parser-output #main-page #main-page-column2{float:right}.mw-parser-output #main-page #main-page-footer{clear:both;margin-top:1em}.mw-parser-output #main-page #main-page-wikimedia .main-page-threecol p{width:33%;float:left;box-sizing:border-box;padding:1em}.mw-parser-output #main-page #main-page-wikimedia .main-page-threecol p img{float:left;margin-right:1em}.mw-parser-output #main-page #main-page-wikimedia div{clear:both}.mw-parser-output #main-page img{max-width:100%;height:auto;object-fit:contain}@media screen and (max-width:768px){.mw-parser-output #main-page-header{display:none}}.mw-parser-output #main-page-content{display:flex;gap:1em;flex-wrap:wrap}.mw-parser-output #main-page #main-page-column1,.mw-parser-output #main-page #main-page-column2{width:auto;margin:0;flex:1;min-width:20em}@media screen and (max-width:22em){.mw-parser-output #main-page #main-page-column1,.mw-parser-output #main-page #main-page-column2{min-width:60%}}body.skin-minerva .mw-parser-output #main-page #main-page-footer h2::after,body.skin-minerva .mw-parser-output #main-page #main-page-content h2::after{left:0;height:100%}body.skin-minerva .mw-parser-output #main-page #main-page-content h2 .mw-headline,body.skin-minerva .mw-parser-output #main-page #main-page-footer h2 .mw-headline{display:flex;gap:.3em;padding-left:.2em;align-items:center}body.skin-minerva .mw-parser-output #main-page #main-page-content .floatright{margin-top:.6em}body.skin-minerva .mw-parser-output #main-page-featured-image .image{margin-top:.6em;display:block}body.skin-minerva .mw-parser-output #main-page #main-page-didyouknow h2,body.skin-minerva .mw-parser-output #main-page #main-page-featured-article h2{margin-top:-.3em}</style>
<div class="section" id="main-page">
<div class="header nomobile" id="main-page-header">
<div id="main-page-intro">
<p> <span id="main-page-welcome"><strong>Witaj w <a href="/wiki/Wikipedia" title="Wikipedia">Wikipedii</a>,</strong></span>
<a href="/wiki/Wolna_tre%C5%9B%C4%87" title="Wolna treść">wolnej</a> <a href="/wiki/Encyklopedia" title="Encyklopedia">encyklopedii</a>, którą <a href="/wiki/Pomoc:Pierwsze_kroki" title="Pomoc:Pierwsze kroki">każdy może redagować</a>.<br/><a href="/wiki/Wikipedia:Liczba_artyku%C5%82%C3%B3w_w_polskoj%C4%99zycznej_Wikipedii" title="Wikipedia:Liczba artykułów w polskojęzycznej Wikipedii">1 588 081</a> artykułów, w tym 4910 <a href="/wiki/Wikipedia:Wyr%C3%B3%C5%BCniona_zawarto%C5%9B%C4%87_Wikipedii" title="Wikipedia:Wyróżniona zawartość Wikipedii">wyróżnionych</a>
</p>
</div>
<div id="main-page-portals">
<p> <span> <a href="/wiki/Portal:Kategorie_G%C5%82%C3%B3wne" title="Portal:Kategorie Główne">Kategorie Wikipedii</a>:
</span></p><p> <a href="/wiki/Kategoria:Nauki_%C5%9Bcis%C5%82e" title="Kategoria:Nauki ścisłe">Nauki ścisłe</a> • <a href="/wiki/Kategoria:Nauki_przyrodnicze" title="Kategoria:Nauki przyrodnicze">Nauki przyrodnicze</a> • <a href="/wiki/Kategoria:Nauki_spo%C5%82eczne" title="Kategoria:Nauki społeczne">Nauki społeczne</a> • <a href="/wiki/Kategoria:Nauki_humanistyczne" title="Kategoria:Nauki humanistyczne">Nauki humanistyczne</a> • <a href="/wiki/Kategoria:Technika" title="Kategoria:Technika">Technika</a> • <a href="/wiki/Kategoria:Filozofia" title="Kategoria:Filozofia">Filozofia</a> • <a href="/wiki/Kategoria:Historia" title="Kategoria:Historia">Historia</a> • <a href="/wiki/Kategoria:Kultura" title="Kategoria:Kultura">Kultura</a> • <a href="/wiki/Kategoria:Sztuka" title="Kategoria:Sztuka">Sztuka</a> • <a href="/wiki/Kategoria:Religioznawstwo" title="Kategoria:Religioznawstwo">Religioznawstwo</a> • <a href="/wiki/Kategoria:Gospodarka" title="Kategoria:Gospodarka">Gospodarka</a> •
<a href="/wiki/Kategoria:Spo%C5%82ecze%C5%84stwo" title="Kategoria:Społeczeństwo">Społeczeństwo</a> •
<a href="/wiki/Kategoria:Sport" title="Kategoria:Sport">Sport</a> •
<a href="/wiki/Kategoria:Polska" title="Kategoria:Polska">Polska</a> •
<a href="/wiki/Kategoria:Biografie" title="Kategoria:Biografie">Biografie</a>
</p>
</div>
<div id="main-page-wiki-events">
<p> <span class="notpageimage" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/20px-Wikipedia-logo-v2.svg.png" decoding="async" width="20" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/30px-Wikipedia-logo-v2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/40px-Wikipedia-logo-v2.svg.png 2x" data-file-width="103" data-file-height="94"/></span></span><span style="padding-left:18px;"> </span>Zapraszamy do udziału w akcji <b><a href="/wiki/Wikipedia:Wielkie_Wyzwanie_Wikipedii_2023" title="Wikipedia:Wielkie Wyzwanie Wikipedii 2023">Wielkie Wyzwanie Wikipedii 2023</a></b>!
</p>
</div>
</div>
<div id="mf-main-page">
<div class="article" id="main-page-content">
<div id="main-page-column1">
<div class="section" id="main-page-didyouknow">
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span id="Czy_wiesz.E2.80.A6"></span><span data-mw-comment-start="" id="h-Czy_wiesz…"></span><span class="mw-headline" id="Czy_wiesz…" data-mw-thread-id="h-Czy_wiesz…"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f4/PL_Wiki_CzyWiesz_ikona.svg/38px-PL_Wiki_CzyWiesz_ikona.svg.png" decoding="async" width="38" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f4/PL_Wiki_CzyWiesz_ikona.svg/57px-PL_Wiki_CzyWiesz_ikona.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f4/PL_Wiki_CzyWiesz_ikona.svg/76px-PL_Wiki_CzyWiesz_ikona.svg.png 2x" data-file-width="38" data-file-height="38"/></span></span> Czy wiesz…</span><span data-mw-comment-end="h-Czy_wiesz…"></span></h2><!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Czy_wiesz\u2026","replies":[],"uneditableSection":true}}--></div>
<p>Z <a href="/wiki/Specjalna:Nowe_strony" title="Specjalna:Nowe strony">nowych</a> i ostatnio rozbudowanych artykułów w Wikipedii:
</p>
<figure class="mw-halign-right" typeof="mw:File"><a href="/wiki/Plik:William_Henry_Wheeler.jpg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/7/75/William_Henry_Wheeler.jpg/100px-William_Henry_Wheeler.jpg" decoding="async" width="100" height="167" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/75/William_Henry_Wheeler.jpg/150px-William_Henry_Wheeler.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/75/William_Henry_Wheeler.jpg/200px-William_Henry_Wheeler.jpg 2x" data-file-width="374" data-file-height="623"/></a><figcaption></figcaption></figure>
<p>…w jaki sposób odcinano modelowi głowę do przedstawionego na zdjęciu obok <b><a href="/wiki/Wiktoria%C5%84ski_portret_bezg%C5%82owy" title="Wiktoriański portret bezgłowy">wiktoriańskiego portretu bez głowy</a></b>?
</p><p>…dla kogo zbudowano <b><a href="/wiki/Dom_urz%C4%99dnik%C3%B3w_Banku_Gospodarstwa_Krajowego_w_Katowicach" title="Dom urzędników Banku Gospodarstwa Krajowego w Katowicach">dom przy ulicy Narcyzów 2</a></b> w Katowicach?
</p><p>…że do powstania pewnej <b><a href="/wiki/Cudowna_melina" title="Cudowna melina">książki</a></b> przyczynił się przemyt czosnku?
</p><p>…który <b><a href="/wiki/Gedanoleria" title="Gedanoleria">zwierz o wystających policzkach</a></b> nazwany został od Gdańska?
</p><p>…czy alkoholicy i narkomani mogli być <b><a href="/wiki/Szko%C5%82a_Podchor%C4%85%C5%BCych_Lotnictwa" title="Szkoła Podchorążych Lotnictwa">kandydatami na polskich pilotów wojskowych</a></b>?<br style="clear:right;"/>
</p>
<div style="text-align: right; margin-top: 5px;"><i><a href="/wiki/Wikiprojekt:Czy_wiesz/propozycje" title="Wikiprojekt:Czy wiesz/propozycje">Propozycje do ekspozycji</a> • <a href="/wiki/Pomoc:Jak_napisa%C4%87_nowy_artyku%C5%82" title="Pomoc:Jak napisać nowy artykuł">Jak napisać nowy artykuł?</a></i></div>
</div>
<div class="section" id="main-page-news">
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span data-mw-comment-start="" id="h-Wydarzenia"></span><span class="mw-headline" id="Wydarzenia" data-mw-thread-id="h-Wydarzenia"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/4/4d/PL_Wiki_Aktualnosci_ikona.svg/38px-PL_Wiki_Aktualnosci_ikona.svg.png" decoding="async" width="38" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/4d/PL_Wiki_Aktualnosci_ikona.svg/57px-PL_Wiki_Aktualnosci_ikona.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/4d/PL_Wiki_Aktualnosci_ikona.svg/76px-PL_Wiki_Aktualnosci_ikona.svg.png 2x" data-file-width="38" data-file-height="38"/></span></span> Wydarzenia</span><span data-mw-comment-end="h-Wydarzenia"></span></h2><!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Wydarzenia","replies":[],"uneditableSection":true}}--></div>
<p><b><a href="/wiki/Inwazja_Rosji_na_Ukrain%C4%99" title="Inwazja Rosji na Ukrainę">Inwazja Rosji na Ukrainę</a></b> • <b><a href="/wiki/Wojna_Izraela_z_Hamasem" class="mw-redirect" title="Wojna Izraela z Hamasem">Wojna Izraela z Hamasem</a></b>
</p>
<div class="floatright" style="width: 100px; line-height: 1.5ex;"><span typeof="mw:File"><a href="/wiki/Plik:Matthew_Perry_2013.jpg" class="mw-file-description" title="Matthew Perry"><img alt="Matthew Perry" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/90/Matthew_Perry_2013.jpg/100px-Matthew_Perry_2013.jpg" decoding="async" width="100" height="135" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/90/Matthew_Perry_2013.jpg/150px-Matthew_Perry_2013.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/90/Matthew_Perry_2013.jpg/200px-Matthew_Perry_2013.jpg 2x" data-file-width="715" data-file-height="964"/></a></span><span style="font-size:smaller; line-height:130%"><a href="/wiki/Matthew_Perry_(aktor)" title="Matthew Perry (aktor)">Matthew Perry</a></span></div>
<ul><li>Zakończył się rozgrywany we Francji <b><a href="/wiki/Puchar_%C5%9Awiata_w_Rugby_2023" title="Puchar Świata w Rugby 2023">Puchar Świata w Rugby</a></b>. Trofeum wywalczyła <a href="/wiki/Reprezentacja_Po%C5%82udniowej_Afryki_w_rugby_union_m%C4%99%C5%BCczyzn" title="Reprezentacja Południowej Afryki w rugby union mężczyzn">Południowa Afryka</a>, która w finale na stadionie <a href="/wiki/Stade_de_France" title="Stade de France">Stade de France</a> pokonała 12:11 <a href="/wiki/Reprezentacja_Nowej_Zelandii_w_rugby_union_m%C4%99%C5%BCczyzn" title="Reprezentacja Nowej Zelandii w rugby union mężczyzn">Nową Zelandię</a> <span style="font-size:smaller; line-height:130%">(<a href="/wiki/Pa%C5%BAdziernik_2023#28_października" title="Październik 2023">28 października</a>)</span></li>
<li>W Polsce odbyły się <b><a href="/wiki/Wybory_parlamentarne_w_Polsce_w_2023_roku" title="Wybory parlamentarne w Polsce w 2023 roku">wybory parlamentarne</a></b> oraz <b><a href="/wiki/Referendum_w_Polsce_w_2023_roku" title="Referendum w Polsce w 2023 roku">referendum ogólnokrajowe</a></b> <span style="font-size:smaller; line-height:130%">(<a href="/wiki/Pa%C5%BAdziernik_2023#15_października" title="Październik 2023">15 października</a>)</span></li></ul>
<p><b><a href="/wiki/Zmarli_w_pa%C5%BAdzierniku_2023" title="Zmarli w październiku 2023">Zmarli</a></b>: <a href="/wiki/Matthew_Perry_(aktor)" title="Matthew Perry (aktor)">Matthew Perry</a> <span style="font-size:smaller; line-height:130%">(na zdjęciu)</span> • <a href="/wiki/Li_Keqiang" title="Li Keqiang">Li Keqiang</a> • <a href="/wiki/Wiktor_Mamatow" title="Wiktor Mamatow">Wiktor Mamatow</a> • <a href="/wiki/Wanda_P%C3%B3%C5%82tawska" title="Wanda Półtawska">Wanda Półtawska</a> • <a href="/wiki/Bill_Hayden" title="Bill Hayden">Bill Hayden</a> • <a href="/wiki/Wojciech_Korda" title="Wojciech Korda">Wojciech Korda</a> • <a href="/wiki/Bobby_Charlton" title="Bobby Charlton">Bobby Charlton</a> • <a href="/wiki/Anfisa_Riezcowa" title="Anfisa Riezcowa">Anfisa Riezcowa</a> • <a href="/wiki/Heinrich_Messner" title="Heinrich Messner">Heinrich Messner</a> • <a href="/wiki/Carla_Bley" title="Carla Bley">Carla Bley</a> • <a href="/wiki/Martti_Ahtisaari" title="Martti Ahtisaari">Martti Ahtisaari</a> • <a href="/wiki/Piper_Laurie" title="Piper Laurie">Piper Laurie</a>
</p>
<div style="text-align:right; margin-top:5px;"><i><a href="/wiki/Portal:Aktualno%C5%9Bci" title="Portal:Aktualności">Więcej…</a></i></div>
</div>
<div class="section" id="main-page-anniversaries">
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span data-mw-comment-start="" id="h-Rocznice"></span><span class="mw-headline" id="Rocznice" data-mw-thread-id="h-Rocznice"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3d/PL_Wiki_Kalendarium_ikona.svg/38px-PL_Wiki_Kalendarium_ikona.svg.png" decoding="async" width="38" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/3d/PL_Wiki_Kalendarium_ikona.svg/57px-PL_Wiki_Kalendarium_ikona.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/3d/PL_Wiki_Kalendarium_ikona.svg/76px-PL_Wiki_Kalendarium_ikona.svg.png 2x" data-file-width="38" data-file-height="38"/></span></span> Rocznice</span><span data-mw-comment-end="h-Rocznice"></span></h2><!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Rocznice","replies":[],"uneditableSection":true}}--></div>
<p> <b><a href="/wiki/2_listopada" title="2 listopada">2 listopada</a></b>: <a href="/wiki/Imieniny" title="Imieniny">imieniny</a> obchodzą m.in.: <a href="/wiki/Bogdan" title="Bogdan">Bohdan</a>, <a href="/wiki/Marcjan" title="Marcjan">Marcjan</a> i <a href="/wiki/Tobiasz" title="Tobiasz">Tobiasz</a>; <a href="/wiki/Zaduszki" title="Zaduszki">Zaduszki</a><br/>Okrągłe, dziesięcioletnie rocznice:
</p>
<div class="floatright" style="width: 102px; line-height: 1.5ex; overflow: hidden;"><span class="mw-image-border" typeof="mw:File"><a href="/wiki/Plik:Corpse_of_Ng%C3%B4_%C4%90%C3%ACnh_Di%E1%BB%87m_in_the_1963_coup.jpg" class="mw-file-description" title="Ngô Đình Diem"><img alt="Ngô Đình Diem" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Corpse_of_Ng%C3%B4_%C4%90%C3%ACnh_Di%E1%BB%87m_in_the_1963_coup.jpg/100px-Corpse_of_Ng%C3%B4_%C4%90%C3%ACnh_Di%E1%BB%87m_in_the_1963_coup.jpg" decoding="async" width="100" height="74" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Corpse_of_Ng%C3%B4_%C4%90%C3%ACnh_Di%E1%BB%87m_in_the_1963_coup.jpg/150px-Corpse_of_Ng%C3%B4_%C4%90%C3%ACnh_Di%E1%BB%87m_in_the_1963_coup.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Corpse_of_Ng%C3%B4_%C4%90%C3%ACnh_Di%E1%BB%87m_in_the_1963_coup.jpg/200px-Corpse_of_Ng%C3%B4_%C4%90%C3%ACnh_Di%E1%BB%87m_in_the_1963_coup.jpg 2x" data-file-width="612" data-file-height="454"/></a></span><small><a href="https://commons.wikimedia.org/wiki/File:Corpse_of_Ng%C3%B4_%C4%90%C3%ACnh_Di%E1%BB%87m_in_the_1963_coup.jpg" class="extiw" title="c:File:Corpse of Ngô Đình Diệm in the 1963 coup.jpg">Ngô Đình Diem</a></small></div>
<div class="floatright" style="width: 102px; line-height: 1.5ex; overflow: hidden;"><span class="mw-image-border" typeof="mw:File"><a href="/wiki/Plik:Kajetan_Morawski_1892_1973.jpg" class="mw-file-description" title="Kajetan Morawski"><img alt="Kajetan Morawski" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/93/Kajetan_Morawski_1892_1973.jpg/100px-Kajetan_Morawski_1892_1973.jpg" decoding="async" width="100" height="150" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/93/Kajetan_Morawski_1892_1973.jpg/150px-Kajetan_Morawski_1892_1973.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/93/Kajetan_Morawski_1892_1973.jpg/200px-Kajetan_Morawski_1892_1973.jpg 2x" data-file-width="319" data-file-height="480"/></a></span><small><a href="https://commons.wikimedia.org/wiki/File:Kajetan_Morawski_1892_1973.jpg" class="extiw" title="c:File:Kajetan Morawski 1892 1973.jpg">Kajetan Morawski</a></small></div>
<ul><li><a href="/wiki/1903" title="1903">1903</a> – ukazało się pierwsze wydanie brytyjskiego dziennika <b>"<a href="/wiki/Daily_Mirror" title="Daily Mirror">Daily Mirror</a>"</b></li>
<li><a href="/wiki/1913" title="1913">1913</a> – urodził się amerykański aktor <b><a href="/wiki/Burt_Lancaster" title="Burt Lancaster">Burt Lancaster</a></b> (<i><a href="/wiki/Karmazynowy_pirat" title="Karmazynowy pirat">Karmazynowy pirat</a></i>, <i><a href="/wiki/Lampart_(film)" title="Lampart (film)">Lampart</a></i>, <i><a href="/wiki/St%C4%85d_do_wieczno%C5%9Bci_(film)" title="Stąd do wieczności (film)">Stąd do wieczności</a></i>)</li>
<li><a href="/wiki/1953" title="1953">1953</a> – podjęto uchwałę w sprawie powołania <b><a href="/wiki/Instytut_Energetyki" title="Instytut Energetyki">Instytutu Energetyki</a></b></li>
<li><a href="/wiki/1963" title="1963">1963</a> – prezydent <a href="/wiki/Wietnam_Po%C5%82udniowy" title="Wietnam Południowy">Południowego Wietnamu</a> <b><a href="/wiki/Ng%C3%B4_%C4%90%C3%ACnh_Di%E1%BB%87m" title="Ngô Đình Diệm">Ngô Đình Diệm</a></b> został zamordowany w wyniku puczu zorganizowanego przez <a href="/wiki/Centralna_Agencja_Wywiadowcza" title="Centralna Agencja Wywiadowcza">CIA</a> <small>(<i>na fotografii zwłoki</i>)</small></li>
<li><a href="/wiki/1973" title="1973">1973</a> – zmarł dyplomata <b><a href="/wiki/Kajetan_Dzier%C5%BCykraj-Morawski" title="Kajetan Dzierżykraj-Morawski">Kajetan Dzierżykraj-Morawski</a></b> <small>(<i>na fotografii</i>)</small>, w czasie <a href="/wiki/II_wojna_%C5%9Bwiatowa" title="II wojna światowa">II wojny światowej</a> ambasador <a href="/wiki/Rz%C4%85d_Rzeczypospolitej_Polskiej_na_uchod%C5%BAstwie" title="Rząd Rzeczypospolitej Polskiej na uchodźstwie">Rządu londyńskiego</a> przy <a href="/wiki/Wolna_Francja" title="Wolna Francja">Komitecie Wolnej Francji</a>, założyciel <b><a href="/wiki/Dom_Spokojnej_Staro%C5%9Bci_Polskiego_Funduszu_Humanitarnego" title="Dom Spokojnej Starości Polskiego Funduszu Humanitarnego">Domu Spokojnej Starości</a></b> w <a href="/wiki/Lailly-en-Val" title="Lailly-en-Val">Lailly-en-Val</a></li>
<li><a href="/wiki/1983" title="1983">1983</a> – rozpoczęły się <b><a href="/wiki/Able_Archer_83" title="Able Archer 83">europejskie ćwiczenia wojskowe</a></b> symulujące zmasowany atak jądrowy</li>
<li><a href="/wiki/2013" title="2013">2013</a> – zakończyła się <b><a href="/wiki/ATV_Albert_Einstein" title="ATV Albert Einstein">czwarta misja</a></b> <a href="/wiki/Automatyczny_Statek_Transportowy" title="Automatyczny Statek Transportowy">Automatycznego Statku Transportowego</a> służącego do zaopatrywania <a href="/wiki/Mi%C4%99dzynarodowa_Stacja_Kosmiczna" title="Międzynarodowa Stacja Kosmiczna">Międzynarodowej Stacji Kosmicznej</a><br style="clear:right;"/><div style="text-align:right; margin-top:5px;"><i><a href="/wiki/1_listopada" title="1 listopada">1 listopada</a> • <a href="/wiki/Kalendarium_dzie%C5%84_po_dniu" title="Kalendarium dzień po dniu">Kalendarium dzień po dniu</a> • <a href="/wiki/3_listopada" title="3 listopada">3 listopada</a></i></div></li></ul>
</div>
</div>
<div id="main-page-column2">
<div class="section" id="main-page-featured-article">
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span id="Artyku.C5.82_na_medal"></span><span data-mw-comment-start="" id="h-Artykuł_na_medal"></span><span class="mw-headline" id="Artykuł_na_medal" data-mw-thread-id="h-Artykuł_na_medal"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/ee/HSUtvald.svg/38px-HSUtvald.svg.png" decoding="async" width="38" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/ee/HSUtvald.svg/57px-HSUtvald.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/ee/HSUtvald.svg/76px-HSUtvald.svg.png 2x" data-file-width="156" data-file-height="156"/></span></span> Artykuł na medal</span><span data-mw-comment-end="h-Artykuł_na_medal"></span></h2><!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Artyku\u0142_na_medal","replies":[],"uneditableSection":true}}--></div>
<figure class="mw-halign-right" typeof="mw:File"><a href="/wiki/Plik:Moniter_HMS_Abarcrombie_in_1915,_her_14_inch_guns,_manufactured_in_the_United_States,_were_originally_intended_for_the_Greek_battle_cruiser_SALAMIS._(51035386541).jpg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Moniter_HMS_Abarcrombie_in_1915%2C_her_14_inch_guns%2C_manufactured_in_the_United_States%2C_were_originally_intended_for_the_Greek_battle_cruiser_SALAMIS._%2851035386541%29.jpg/100px-thumbnail.jpg" decoding="async" width="100" height="75" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Moniter_HMS_Abarcrombie_in_1915%2C_her_14_inch_guns%2C_manufactured_in_the_United_States%2C_were_originally_intended_for_the_Greek_battle_cruiser_SALAMIS._%2851035386541%29.jpg/150px-thumbnail.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Moniter_HMS_Abarcrombie_in_1915%2C_her_14_inch_guns%2C_manufactured_in_the_United_States%2C_were_originally_intended_for_the_Greek_battle_cruiser_SALAMIS._%2851035386541%29.jpg/200px-thumbnail.jpg 2x" data-file-width="5196" data-file-height="3876"/></a><figcaption></figcaption></figure>
<p><b><a href="/wiki/Monitory_typu_Abercrombie" title="Monitory typu Abercrombie">Monitory typu Abercrombie</a></b> – typ <a href="/wiki/Wielka_Brytania" title="Wielka Brytania">brytyjskich</a> <a href="/wiki/Monitor_(okr%C4%99t)" title="Monitor (okręt)">monitorów</a> z okresu <a href="/wiki/I_wojna_%C5%9Bwiatowa" title="I wojna światowa">I wojny światowej</a>. Okręty miały <a href="/wiki/Wyporno%C5%9B%C4%87" title="Wyporność">wyporność</a> 6150 ton i osiągały prędkość 6,5 <a href="/wiki/W%C4%99ze%C5%82_(jednostka_pr%C4%99dko%C5%9Bci)" title="Węzeł (jednostka prędkości)">węzła</a>, a ich główne uzbrojenie stanowiły dwa <a href="/wiki/Dzia%C5%82o_okr%C4%99towe" title="Działo okrętowe">działa</a> kalibru 356 mm produkcji <a href="/wiki/Stany_Zjednoczone" title="Stany Zjednoczone">amerykańskiej</a>, uzupełniane przez artylerię mniejszego kalibru. W latach 1914–1915 w stoczniach <a href="/wiki/Harland_and_Wolff" title="Harland and Wolff">Harland and Wolff</a> oraz <a href="/wiki/Swan_Hunter" title="Swan Hunter">Swan Hunter & Wigham Richardson</a> zbudowano cztery okręty tego typu. Jednostki zostały wcielone do służby w <a href="/wiki/Royal_Navy" title="Royal Navy">Royal Navy</a> w maju i czerwcu 1915 roku. Monitory wzięły czynny udział w działaniach wojennych na <a href="/wiki/Morze_%C5%9Ar%C3%B3dziemne" title="Morze Śródziemne">Morzu Śródziemnym</a>, uczestnicząc m.in. w <a href="/wiki/Operacje_morskie_w_Cie%C5%9Bninie_Dardanelskiej" title="Operacje morskie w Cieśninie Dardanelskiej">kampanii dardanelskiej</a>. Z wyjątkiem zatopionego w styczniu 1918 roku w <a href="/wiki/Bitwa_ko%C5%82o_Imroz_(1918)" title="Bitwa koło Imroz (1918)">bitwie koło Imroz</a> "<a href="/wiki/HMS_Raglan" title="HMS Raglan">Raglana</a>", pozostałe trzy okręty zostały wycofane ze służby w 1919 roku. "<a href="/wiki/HMS_Abercrombie_(1915)" title="HMS Abercrombie (1915)">Abercrombie</a>" oraz "<a href="/wiki/HMS_Havelock_(1915)" title="HMS Havelock (1915)">Havelock</a>" zostały <a href="/wiki/Stocznia_z%C5%82omowa" title="Stocznia złomowa">złomowane</a> w 1927 roku, natomiast "<a href="/wiki/HMS_Roberts_(1915)" title="HMS Roberts (1915)">Roberts</a>" wykorzystywany był jako maszt kotwiczny i stacja paliwowa dla <a href="/wiki/Sterowiec" title="Sterowiec">sterowców</a> oraz służył do testów nowych rozwiązań ochrony podwodnej części kadłuba, a w 1936 roku został sprzedany w celu złomowania. <i><a href="/wiki/Monitory_typu_Abercrombie" title="Monitory typu Abercrombie">Czytaj więcej…</a></i>
</p>
<div style="text-align:right; margin-top:5px;"><i>Inne <a href="/wiki/Wikipedia:Artyku%C5%82y_na_Medal" title="Wikipedia:Artykuły na Medal">Artykuły na Medal</a> i <a href="/wiki/Wikipedia:Listy_na_Medal" title="Wikipedia:Listy na Medal">Listy na Medal</a> • <a href="/wiki/Pomoc:Jak_napisa%C4%87_doskona%C5%82y_artyku%C5%82" title="Pomoc:Jak napisać doskonały artykuł">Jak napisać doskonały artykuł?</a></i></div>
</div>
<div class="section" id="main-page-good-article">
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span id="Dobry_artyku.C5.82"></span><span data-mw-comment-start="" id="h-Dobry_artykuł"></span><span class="mw-headline" id="Dobry_artykuł" data-mw-thread-id="h-Dobry_artykuł"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f0/HSBra.svg/38px-HSBra.svg.png" decoding="async" width="38" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f0/HSBra.svg/57px-HSBra.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f0/HSBra.svg/76px-HSBra.svg.png 2x" data-file-width="156" data-file-height="156"/></span></span> Dobry artykuł</span><span data-mw-comment-end="h-Dobry_artykuł"></span></h2><!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Dobry_artyku\u0142","replies":[],"uneditableSection":true}}--></div>
<figure class="mw-halign-right" typeof="mw:File"><a href="/wiki/Plik:Adlon_Hotel_Berlin_Germany_-_02.jpg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/82/Adlon_Hotel_Berlin_Germany_-_02.jpg/100px-Adlon_Hotel_Berlin_Germany_-_02.jpg" decoding="async" width="100" height="68" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/82/Adlon_Hotel_Berlin_Germany_-_02.jpg/150px-Adlon_Hotel_Berlin_Germany_-_02.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/82/Adlon_Hotel_Berlin_Germany_-_02.jpg/200px-Adlon_Hotel_Berlin_Germany_-_02.jpg 2x" data-file-width="6200" data-file-height="4211"/></a><figcaption></figcaption></figure>
<p><b><a href="/wiki/Hotel_Adlon" title="Hotel Adlon">Hotel Adlon</a></b> – pięciogwiazdkowy <a href="/wiki/Hotel" title="Hotel">hotel</a>, znajdujący się w <a href="/wiki/Berlin" title="Berlin">Berlinie</a>, w dzielnicy <a href="/wiki/Mitte_(dzielnica_Berlina)" title="Mitte (dzielnica Berlina)">Mitte</a>, przy alei <a href="/wiki/Unter_den_Linden" title="Unter den Linden">Unter den Linden</a> oraz placu <a href="/wiki/Pariser_Platz" title="Pariser Platz">Pariser Platz</a>, bezpośrednio przy <a href="/wiki/Brama_Brandenburska" title="Brama Brandenburska">Bramie Brandenburskiej</a>, w sąsiedztwie ambasad, <a href="/wiki/Bundestag" title="Bundestag">parlamentu</a> i <a href="/wiki/Urz%C4%85d_Kanclerza_Federalnego" title="Urząd Kanclerza Federalnego">Urzędu Kanclerza Federalnego</a>. Jest własnością sieci hotelowej <a href="/wiki/Kempinski" title="Kempinski">Kempinski</a>, jest członkiem prestiżowej międzynarodowej organizacji The Leading Hotels of the World. Powstał w latach 1995–1997 na miejscu pierwszego Hotelu Adlon, oddanego do użytku w 1907 roku i zniszczonego pod koniec <a href="/wiki/II_wojna_%C5%9Bwiatowa" title="II wojna światowa">II wojny światowej</a>, a następnie rozebranego w 1952 i 1984 roku. W swej architekturze jest zorientowany na klasyczno-tradycyjny język projektowania i stanowi nawiązanie do poprzednika. Obecnie jest uważany za jeden z najbardziej luksusowych hoteli w <a href="/wiki/Niemcy" title="Niemcy">Niemczech</a>. Do dyspozycji gości jest ogółem 307 pokoi oraz 78 apartamentów, trzy restauracje, dwa bary, piętnaście sal bankietowych, dwie sale balowe, centrum fitness oraz ekskluzywny salon spa. <i><a href="/wiki/Hotel_Adlon" title="Hotel Adlon">Czytaj więcej…</a></i>
</p>
<div style="text-align:right; margin-top:5px;"><i><a href="/wiki/Wikipedia:Dobre_Artyku%C5%82y" title="Wikipedia:Dobre Artykuły">Inne Dobre Artykuły</a> • <a href="/wiki/Pomoc:Styl_%E2%80%93_poradnik_dla_autor%C3%B3w" title="Pomoc:Styl – poradnik dla autorów">Jak pisać w stylu encyklopedycznym?</a></i></div>
</div>
<div class="section" id="main-page-featured-image">
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span data-mw-comment-start="" id="h-Ilustracja_na_medal"></span><span class="mw-headline" id="Ilustracja_na_medal" data-mw-thread-id="h-Ilustracja_na_medal"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/74/PL_Wiki_InM_ikona.svg/38px-PL_Wiki_InM_ikona.svg.png" decoding="async" width="38" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/74/PL_Wiki_InM_ikona.svg/57px-PL_Wiki_InM_ikona.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/74/PL_Wiki_InM_ikona.svg/76px-PL_Wiki_InM_ikona.svg.png 2x" data-file-width="38" data-file-height="38"/></span></span> Ilustracja na medal</span><span data-mw-comment-end="h-Ilustracja_na_medal"></span></h2><!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Ilustracja_na_medal","replies":[],"uneditableSection":true}}--></div>
<div style="text-align:center; clear:both;"><div class="thumb" style="width:100%;margin-left: auto; margin-right:auto;"><div class="thumbinner"><div style="overflow:auto; overflow-y:hidden; overflow-x:auto;"><span typeof="mw:File"><a href="/wiki/Plik:2015_Szczytna_i_G%C3%B3ry_Sto%C5%82owe_ze_Szczytnika.jpg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/9/93/2015_Szczytna_i_G%C3%B3ry_Sto%C5%82owe_ze_Szczytnika.jpg/1100px-2015_Szczytna_i_G%C3%B3ry_Sto%C5%82owe_ze_Szczytnika.jpg" decoding="async" width="1100" height="250" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/93/2015_Szczytna_i_G%C3%B3ry_Sto%C5%82owe_ze_Szczytnika.jpg/1650px-2015_Szczytna_i_G%C3%B3ry_Sto%C5%82owe_ze_Szczytnika.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/93/2015_Szczytna_i_G%C3%B3ry_Sto%C5%82owe_ze_Szczytnika.jpg/2200px-2015_Szczytna_i_G%C3%B3ry_Sto%C5%82owe_ze_Szczytnika.jpg 2x" data-file-width="8264" data-file-height="1878"/></a></span></div></div></div><div style="margin-top:5px;">Szczytna i Góry Stołowe ze <a href="/wiki/Szczytnik_(g%C3%B3ra)" title="Szczytnik (góra)">Szczytnika</a><br/></div></div><div style="text-align:right; margin-top:5px;"><i><a href="/wiki/Wikipedia:Ilustracje_na_Medal" title="Wikipedia:Ilustracje na Medal">Inne Ilustracje na Medal</a> • <a href="/wiki/Pomoc:Ilustrowanie" title="Pomoc:Ilustrowanie">Jak zilustrować artykuł?</a></i></div>
</div>
</div>
</div>
</div>
<div class="footer" id="main-page-footer">
<div class="section" id="main-page-sister-projects">
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span data-mw-comment-start="" id="h-Siostrzane_projekty_Wikipedii"></span><span class="mw-headline" id="Siostrzane_projekty_Wikipedii" data-mw-thread-id="h-Siostrzane_projekty_Wikipedii"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/1/14/Wikimedia-logo-circle.svg/38px-Wikimedia-logo-circle.svg.png" decoding="async" width="38" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/14/Wikimedia-logo-circle.svg/57px-Wikimedia-logo-circle.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/14/Wikimedia-logo-circle.svg/76px-Wikimedia-logo-circle.svg.png 2x" data-file-width="700" data-file-height="700"/></span></span> Siostrzane projekty Wikipedii</span><span data-mw-comment-end="h-Siostrzane_projekty_Wikipedii"></span></h2><!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Siostrzane_projekty_Wikipedii","replies":[],"uneditableSection":true}}--></div>
<p> <style data-mw-deduplicate="TemplateStyles:r69460789">.mw-parser-output .tpl-sisproj ul li,.mw-parser-output .tpl-sisproj ul{margin:0;padding:0;list-style:none}.mw-parser-output .tpl-sisproj ul+ul{margin-top:1em}.mw-parser-output .tpl-sisproj ul{display:flex;gap:1em;flex-wrap:wrap;align-items:center;justify-content:center;margin-left:auto;margin-right:auto;max-width:100em}@media screen and (min-width:23em){.mw-parser-output .tpl-sisproj-12 li{min-width:12em}.mw-parser-output .tpl-sisproj-13 li{min-width:13em}.mw-parser-output .tpl-sisproj-14 li{min-width:14em}.mw-parser-output .tpl-sisproj-15 li{min-width:15em}}@media screen and (min-width:30em){.mw-parser-output .tpl-sisproj-16 li{min-width:16em}.mw-parser-output .tpl-sisproj-18 li{min-width:18em}.mw-parser-output .tpl-sisproj-20 li{min-width:20em}.mw-parser-output .tpl-sisproj-22 li{min-width:22em}}.mw-parser-output .tpl-sisproj li{display:flex;gap:.8em;align-items:center}.mw-parser-output .tpl-sisproj .sub{font-size:85%;color:#444;white-space:nowrap}@media screen and (max-width:470px){.mw-parser-output .tpl-sisproj .sub{white-space:normal}.mw-parser-output .tpl-sisproj ul{display:grid}}</style>
</p>
<div class="plainlinks tpl-sisproj">
<ul class="tpl-sisproj--main tpl-sisproj-12">
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Wikiźródła"><img alt="Wikiźródła" src="//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/32px-Wikisource-logo.svg.png" decoding="async" width="32" height="34" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/48px-Wikisource-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/64px-Wikisource-logo.svg.png 2x" data-file-width="410" data-file-height="430"/></span></span></div>
<p><a href="https://pl.wikisource.org/wiki/" class="extiw" title="s:"><b>Wikiźródła</b></a><br/><span class="sub">Wolna biblioteka</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Wikisłownik"><img alt="Wikisłownik" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/67/WiktionaryPl_nodesc.svg/32px-WiktionaryPl_nodesc.svg.png" decoding="async" width="32" height="31" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/67/WiktionaryPl_nodesc.svg/48px-WiktionaryPl_nodesc.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/67/WiktionaryPl_nodesc.svg/64px-WiktionaryPl_nodesc.svg.png 2x" data-file-width="122" data-file-height="117"/></span></span></div>
<p><a href="https://pl.wiktionary.org/wiki/" class="extiw" title="wikt:"><b>Wikisłownik</b></a><br/><span class="sub">Wielojęzyczny słownik</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Commons"><img alt="Commons" src="//upload.wikimedia.org/wikipedia/commons/9/9d/Commons-logo-31px.png" decoding="async" width="31" height="41" class="mw-file-element" data-file-width="31" data-file-height="41"/></span></span></div>
<p><a href="https://commons.wikimedia.org/wiki/Strona_g%C5%82%C3%B3wna" class="extiw" title="c:Strona główna"><b>Commons</b></a><br/><span class="sub">Repozytorium mediów</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Wikidata"><img alt="Wikidata" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Wikidata-logo.svg/37px-Wikidata-logo.svg.png" decoding="async" width="37" height="21" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Wikidata-logo.svg/56px-Wikidata-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Wikidata-logo.svg/74px-Wikidata-logo.svg.png 2x" data-file-width="1050" data-file-height="590"/></span></span></div>
<p><a href="https://www.wikidata.org/wiki/Wikidata:Strona_g%C5%82%C3%B3wna" class="extiw" title="d:Wikidata:Strona główna"><b>Wikidane</b></a><br/><span class="sub">Repozytorium danych</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Wikinews"><img alt="Wikinews" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/60/Wikinews-logo-51px.png/40px-Wikinews-logo-51px.png" decoding="async" width="40" height="24" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/6/60/Wikinews-logo-51px.png 1.5x" data-file-width="51" data-file-height="30"/></span></span></div>
<p><a href="https://pl.wikinews.org/wiki/" class="extiw" title="n:"><b>Wikinews</b></a><br/><span class="sub">Serwis informacyjny</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Wikispecies"><img alt="Wikispecies" src="//upload.wikimedia.org/wikipedia/commons/thumb/d/df/Wikispecies-logo.svg/32px-Wikispecies-logo.svg.png" decoding="async" width="32" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/df/Wikispecies-logo.svg/48px-Wikispecies-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/d/df/Wikispecies-logo.svg/64px-Wikispecies-logo.svg.png 2x" data-file-width="941" data-file-height="1103"/></span></span></div>
<p><a href="https://species.wikimedia.org/wiki/Strona_g%C5%82%C3%B3wna" class="extiw" title="wikispecies:Strona główna"><b>Wikispecies</b></a><br/><span class="sub">Katalog gatunków</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Wikibooks"><img alt="Wikibooks" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/32px-Wikibooks-logo.svg.png" decoding="async" width="32" height="32" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/48px-Wikibooks-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/64px-Wikibooks-logo.svg.png 2x" data-file-width="300" data-file-height="300"/></span></span></div>
<p><a href="https://pl.wikibooks.org/wiki/" class="extiw" title="b:"><b>Wikibooks</b></a><br/><span class="sub">Wolne podręczniki</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Wikicytaty"><img alt="Wikicytaty" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/32px-Wikiquote-logo.svg.png" decoding="async" width="32" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/48px-Wikiquote-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/64px-Wikiquote-logo.svg.png 2x" data-file-width="300" data-file-height="355"/></span></span></div>
<p><a href="https://pl.wikiquote.org/wiki/" class="extiw" title="q:"><b>Wikicytaty</b></a><br/><span class="sub">Kolekcja cytatów</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Wikivoyage"><img alt="Wikivoyage" src="//upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Wikivoyage-Logo-v3-icon.svg/32px-Wikivoyage-Logo-v3-icon.svg.png" decoding="async" width="32" height="32" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Wikivoyage-Logo-v3-icon.svg/48px-Wikivoyage-Logo-v3-icon.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Wikivoyage-Logo-v3-icon.svg/64px-Wikivoyage-Logo-v3-icon.svg.png 2x" data-file-width="193" data-file-height="193"/></span></span></div>
<p><a href="https://pl.wikivoyage.org/wiki/" class="extiw" title="voy:"><b>Wikipodróże</b></a><br/><span class="sub">Informacje turystyczne</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span title="Wikiwersytet"><img alt="Wikiwersytet" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/91/Wikiversity-logo.svg/32px-Wikiversity-logo.svg.png" decoding="async" width="32" height="26" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/91/Wikiversity-logo.svg/48px-Wikiversity-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/91/Wikiversity-logo.svg/64px-Wikiversity-logo.svg.png 2x" data-file-width="1000" data-file-height="800"/></span></span></div>
<p><a href="https://beta.wikiversity.org/wiki/Strona_G%C5%82%C3%B3wna" class="extiw" title="betawikiversity:Strona Główna"><b>Wikiwersytet</b></a><br/><span class="sub">Wolna edukacja</span></p>
</li>
</ul>
</div>
</div>
<div class="section plainlinks" id="main-page-wikimedia">
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span id="Organizacja_i_promocja_Wikimedi.C3.B3w"></span><span data-mw-comment-start="" id="h-Organizacja_i_promocja_Wikimediów"></span><span class="mw-headline" id="Organizacja_i_promocja_Wikimediów" data-mw-thread-id="h-Organizacja_i_promocja_Wikimediów"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3c/HSSamarbetecolor.svg/38px-HSSamarbetecolor.svg.png" decoding="async" width="38" height="38" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/3c/HSSamarbetecolor.svg/57px-HSSamarbetecolor.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/3c/HSSamarbetecolor.svg/76px-HSSamarbetecolor.svg.png 2x" data-file-width="156" data-file-height="156"/></span></span> Organizacja i promocja Wikimediów</span><span data-mw-comment-end="h-Organizacja_i_promocja_Wikimediów"></span></h2><!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Organizacja_i_promocja_Wikimedi\u00f3w","replies":[],"uneditableSection":true}}--></div>
<p> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r69460789">
</p>
<div class="plainlinks tpl-sisproj">
<ul class="tpl-sisproj--extra">
<li>
<div aria-hidden="true"><span typeof="mw:File"><span><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/81/Wikimedia-logo.svg/32px-Wikimedia-logo.svg.png" decoding="async" width="32" height="32" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/81/Wikimedia-logo.svg/48px-Wikimedia-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/81/Wikimedia-logo.svg/64px-Wikimedia-logo.svg.png 2x" data-file-width="1024" data-file-height="1024"/></span></span></div>
<p><a href="https://wikimediafoundation.org/" class="extiw" title="foundationsite:"><b>Wikimedia Foundation</b></a><br/><span class="sub">Ponosi prawną i techniczną odpowiedzialność za Wikipedię.</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span><img src="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/Wikimediapolska-logo.png/32px-Wikimediapolska-logo.png" decoding="async" width="32" height="32" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/Wikimediapolska-logo.png/48px-Wikimediapolska-logo.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/28/Wikimediapolska-logo.png/64px-Wikimediapolska-logo.png 2x" data-file-width="500" data-file-height="500"/></span></span></div>
<p><a rel="nofollow" class="external text" href="https://wikimedia.pl"><b>Wikimedia Polska</b></a><br/><span class="sub">Promocja polskich projektów Wikimedia</span></p>
</li>
<li>
<div aria-hidden="true"><span typeof="mw:File"><span><img src="//upload.wikimedia.org/wikipedia/commons/thumb/7/75/Wikimedia_Community_Logo.svg/32px-Wikimedia_Community_Logo.svg.png" decoding="async" width="32" height="32" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/75/Wikimedia_Community_Logo.svg/48px-Wikimedia_Community_Logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/75/Wikimedia_Community_Logo.svg/64px-Wikimedia_Community_Logo.svg.png 2x" data-file-width="900" data-file-height="900"/></span></span></div>
<p><a href="https://meta.wikimedia.org/wiki/Strona_g%C5%82%C3%B3wna" class="extiw" title="m:Strona główna"><b>Meta-Wiki</b></a><br/><span class="sub">Koordynacja projektów Wikimedia</span></p>
</li>
</ul>
<div>
<p>Jeżeli jesteś nowym użytkownikiem Wikipedii, możesz znaleźć pomoc u innych członków <a href="/wiki/Wikipedia:Spo%C5%82eczno%C5%9B%C4%87_wikipedyst%C3%B3w" title="Wikipedia:Społeczność wikipedystów">społeczności</a>, m.in. u <a href="/wiki/Pomoc:Przewodnicy" title="Pomoc:Przewodnicy">przewodników</a> czy <a href="/wiki/Wikipedia:Administratorzy" title="Wikipedia:Administratorzy">administratorów</a>. Poznaj też inne formy <a href="/wiki/Wikipedia:Kontakt_z_wikipedystami" title="Wikipedia:Kontakt z wikipedystami">kontaktu z wikipedystami</a>.
</p>
</div>
</div>
</div>
</div>
<div class="section" id="main-page-for-editors">
<div class="footer">
<p> Zobacz też:
<a href="/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna/Wczoraj" title="Wikipedia:Strona główna/Wczoraj">Strona główna z wczoraj</a> •
<a href="/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna/Jutro" title="Wikipedia:Strona główna/Jutro">Strona główna na jutro</a> •
<a href="/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna/Dokumentacja" title="Wikipedia:Strona główna/Dokumentacja">Dokumentacja</a>
</p>
</div>
</div>
</div>
<!--
NewPP limit report
Parsed by mw1435
Cached time: 20231102043800
Cache expiry: 3600
Reduced expiry: true
Complications: [no‐toc]
DiscussionTools time usage: 0.019 seconds
CPU time usage: 0.184 seconds
Real time usage: 0.274 seconds
Preprocessor visited node count: 370/1000000
Post‐expand include size: 27052/2097152 bytes
Template argument size: 1033/2097152 bytes
Highest expansion depth: 8/100
Expensive parser function count: 5/500
Unstrip recursion depth: 0/20
Unstrip post‐expand size: 7184/5000000 bytes
Lua time usage: 0.033/10.000 seconds
Lua memory usage: 2148443/52428800 bytes
Number of Wikibase entities loaded: 0/400
-->
<!--
Transclusion expansion time report (%,ms,calls,template)
100.00% 131.712 1 -total
24.88% 32.766 1 Wikipedia:Strona_główna/Rocznice
17.32% 22.811 1 Szablon:Wikiwydarzenia
15.44% 20.339 1 Wikipedia:Strona_główna/Ilustracja_na_medal
11.65% 15.343 1 Szablon:Ikona
9.47% 12.468 1 Szablon:Siostrzane
8.48% 11.168 1 Wikipedia:Strona_główna/Czy_wiesz
6.25% 8.235 1 Szablon:Aktualności
5.76% 7.580 1 Wikipedia:Strona_główna/Dobry_artykuł
5.52% 7.267 1 Wikiprojekt:Czy_wiesz/ekspozycje/2023-11-02
-->
<!-- Saved in parser cache with key plwiki:pcache:idhash:2956678-0!canonical and timestamp 20231102043800 and revision id 71125202. Rendering was triggered because: page-view
-->
</div><!--esi <esi:include src="/esitest-fa8a495983347898/content" /> --><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript>
<div class="printfooter" data-nosnippet="">Źródło: "<a dir="ltr" href="https://pl.wikipedia.org/w/index.php?title=Wikipedia:Strona_główna&oldid=71125202">https://pl.wikipedia.org/w/index.php?title=Wikipedia:Strona_główna&oldid=71125202</a>"</div></div>
<div id="catlinks" class="catlinks catlinks-allhidden" data-mw="interface"><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Ukryta kategoria: <ul><li><a href="/wiki/Kategoria:Strona_g%C5%82%C3%B3wna" title="Kategoria:Strona główna">Strona główna</a></li></ul></div></div>
</div>
</main>
</div>
<div class="mw-footer-container">
<footer id="footer" class="mw-footer" role="contentinfo" >
<ul id="footer-info">
<li id="footer-info-lastmod"> Tę stronę ostatnio edytowano 26 sie 2023, 10:53.</li>
<li id="footer-info-copyright">Tekst udostępniany na <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.pl">licencji Creative Commons: uznanie autorstwa, na tych samych warunkach</a>, z możliwością obowiązywania dodatkowych ograniczeń.
Zobacz szczegółowe informacje o <a href="https://foundation.wikimedia.org/wiki/Policy:Terms_of_Use/pl">warunkach korzystania</a>.</li>
</ul>
<ul id="footer-places">
<li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Polityka prywatności</a></li>
<li id="footer-places-about"><a href="/wiki/Wikipedia:O_Wikipedii">O Wikipedii</a></li>
<li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:Korzystasz_z_Wikipedii_tylko_na_w%C5%82asn%C4%85_odpowiedzialno%C5%9B%C4%87">Korzystasz z Wikipedii tylko na własną odpowiedzialność</a></li>
<li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Universal_Code_of_Conduct">Powszechne Zasady Postępowania</a></li>
<li id="footer-places-developers"><a href="https://developer.wikimedia.org">Dla deweloperów</a></li>
<li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/pl.wikipedia.org">Statystyki</a></li>
<li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Komunikat na temat ciasteczek</a></li>
<li id="footer-places-mobileview"><a href="//pl.m.wikipedia.org/w/index.php?title=Wikipedia:Strona_g%C5%82%C3%B3wna&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Wersja mobilna</a></li>
</ul>
<ul id="footer-icons" class="noprint">
<li id="footer-copyrightico"><a href="https://wikimediafoundation.org/"><img src="/static/images/footer/wikimedia-button.png" srcset="/static/images/footer/wikimedia-button-1.5x.png 1.5x, /static/images/footer/wikimedia-button-2x.png 2x" width="88" height="31" alt="Wikimedia Foundation" loading="lazy" /></a></li>
<li id="footer-poweredbyico"><a href="https://www.mediawiki.org/"><img src="/static/images/footer/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/static/images/footer/poweredby_mediawiki_132x47.png 1.5x, /static/images/footer/poweredby_mediawiki_176x62.png 2x" width="88" height="31" loading="lazy"></a></li>
</ul>
</footer>
</div>
</div>
</div>
<div class="vector-settings" id="p-dock-bottom">
<ul>
<li>
<button class="cdx-button cdx-button--icon-only vector-limited-width-toggle" id=""><span class="vector-icon mw-ui-icon-fullScreen mw-ui-icon-wikimedia-fullScreen"></span>
<span>Przełącz ograniczenie szerokości strony</span>
</button>
</li>
</ul>
</div>
<script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.eqiad.main-59b47fbf78-trcxx","wgBackendResponseTime":145,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Czy_wiesz…","replies":[],"uneditableSection":true},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Wydarzenia","replies":[],"uneditableSection":true},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Rocznice","replies":[],"uneditableSection":true},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Artykuł_na_medal","replies":[],"uneditableSection":true},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Dobry_artykuł","replies":[],"uneditableSection":true},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Ilustracja_na_medal","replies":[],"uneditableSection":true},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Siostrzane_projekty_Wikipedii","replies":[],"uneditableSection":true},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Organizacja_i_promocja_Wikimediów","replies":[],"uneditableSection":true}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.019"},"limitreport":{"cputime":"0.184","walltime":"0.274","ppvisitednodes":{"value":370,"limit":1000000},"postexpandincludesize":{"value":27052,"limit":2097152},"templateargumentsize":{"value":1033,"limit":2097152},"expansiondepth":{"value":8,"limit":100},"expensivefunctioncount":{"value":5,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":7184,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 131.712 1 -total"," 24.88% 32.766 1 Wikipedia:Strona_główna/Rocznice"," 17.32% 22.811 1 Szablon:Wikiwydarzenia"," 15.44% 20.339 1 Wikipedia:Strona_główna/Ilustracja_na_medal"," 11.65% 15.343 1 Szablon:Ikona"," 9.47% 12.468 1 Szablon:Siostrzane"," 8.48% 11.168 1 Wikipedia:Strona_główna/Czy_wiesz"," 6.25% 8.235 1 Szablon:Aktualności"," 5.76% 7.580 1 Wikipedia:Strona_główna/Dobry_artykuł"," 5.52% 7.267 1 Wikiprojekt:Czy_wiesz/ekspozycje/2023-11-02"]},"scribunto":{"limitreport-timeusage":{"value":"0.033","limit":"10.000"},"limitreport-memusage":{"value":2148443,"limit":52428800},"limitreport-logs":"WRAP: lead = \"span\"\nWRAP: tail = \"span\"\nWRAP: lead = \"span\"\nWRAP: tail = \"span\"\nWRAP: lead = \"span\"\nWRAP: tail = \"span\"\nWRAP: lead = \"span\"\nWRAP: tail = \"span\"\nIlustracje na Medal/geografia fizyczna (19663, 491, 24)\nfrequency: 4, index: 2, displays: 1966, galleryIndex: 3, filestamp: 491\nPlik:2015 Szczytna i Góry Stołowe ze Szczytnika.jpg|Szczytna i Góry Stołowe ze [[Szczytnik (góra)|Szczytnika]]\u003C!--PANORAMA 8264x1878--\u003E| (3, 491, 30)\nstatus: SUCCEEDED, result: \u003Cdiv style=\"text-align:center; clear:both;\"\u003E\u003Cdiv class=\"thumb\" style=\"width:100%;margin-left: auto; margin-right:auto;\"\u003E\u003Cdiv class=\"thumbinner\"\u003E\u003Cdiv style=\"overflow:auto; overflow-y:hidden; overflow-x:auto;\"\u003E[[Plik:2015 Szczytna i Góry Stołowe ze Szczytnika.jpg|1100px]]\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003Cdiv style=\"margin-top:5px;\"\u003ESzczytna i Góry Stołowe ze [[Szczytnik (góra)|Szczytnika]]\u003C!--PANORAMA 8264x1878--\u003E\u003Cbr /\u003E\u003C/div\u003E\u003C/div\u003E\nIlustracje na Medal/geografia fizyczna (19663, 491, 24)\nfrequency: 4, index: 2, displays: 1966, galleryIndex: 3, filestamp: 491\nPlik:2015 Szczytna i Góry Stołowe ze Szczytnika.jpg|Szczytna i Góry Stołowe ze [[Szczytnik (góra)|Szczytnika]]\u003C!--PANORAMA 8264x1878--\u003E| (3, 491, 30)\nstatus: SUCCEEDED, result: \u003Cdiv style=\"text-align:center; clear:both;\"\u003E\u003Cdiv class=\"thumb\" style=\"width:100%;margin-left: auto; margin-right:auto;\"\u003E\u003Cdiv class=\"thumbinner\"\u003E\u003Cdiv style=\"overflow:auto; overflow-y:hidden; overflow-x:auto;\"\u003E[[Plik:2015 Szczytna i Góry Stołowe ze Szczytnika.jpg|1100px]]\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003Cdiv style=\"margin-top:5px;\"\u003ESzczytna i Góry Stołowe ze [[Szczytnik (góra)|Szczytnika]]\u003C!--PANORAMA 8264x1878--\u003E\u003Cbr /\u003E\u003C/div\u003E\u003C/div\u003E\n"},"cachereport":{"origin":"mw1435","timestamp":"20231102043800","ttl":3600,"transientcontent":true}}});});</script>
</body>
</html>
Poszukaj w internecieP5C5LR65wPoszukaj w internecie graficznego edytora stron WWW. Za jego pomocą wykonaj prostą stronę internetową na wybrany przez siebie temat. Możesz wykorzystać do tego jeden z gotowych szablonów. Po wykonaniu strony zapoznaj się z jej kodem źródłowym. Zapewne zdziwi cię długość i stopień skomplikowania kodu.
Jeśli nie wiesz gdzie zacząć, skorzystaj z podpowiedzi i zaproponowanego tam edytora graficznego.
Jednym z prostszych i popularniejszych edytorów graficznych jest edytor WiX. Wejdź na stronę https://pl.wix.com i załóż darmowe konto. Stwórz własny unikalny projekt, pomogą ci w tym porady pojawiające się na stronie. Możesz wykorzystać do tego jeden z gotowych szablonów jeśli uważasz, że jego motyw przewodni i temat odpowiada temu, co chcesz zawrzeć na swojej stronie internetowej.
Pod paskiem nawligacyjnym, na środku strony znajduje się blok akapitu. W akapicie umieszczony jest napis: Stwórz profesjonalną stronę internetową. Pod nim kolejny napis: Odkryj platformę do tworzenia stron www, która daje Ci swobodę projektowania, zarządzania oraz rozwoju działalności i prowadzenia firmy online w dowolnej branży. Pod tekstem umieszczony jest niebieski przycisk. Na przycisku znajduje się napis: Do dzieła.
Pod przyciskiem znajdują się przykładowe wizualizacje stron internetowych. Od lewej strony: fragment edytora, gotowa strona w wersji na komputer, gotowa strona w wersji mobilnej.
![Strona główna edytora WiX Ilustracja przedstawia zrzut ekranu strony głównej edytora WiX. Na samej górze znajduje się biały pasek nawligacyjny. Na pasku od lewej strony widoczne jest logo WiX. Logo pisane jest czarnymi literami. Następnie umieszczone są przyciski: Możliwości, Inspiracje, Subskrybcje, Szablony, Pomoc oraz Języki. Po prawej stronie paska nawligacyjnego znajduje się niebieski przycisk Zarejestruj się.Pod paskiem nawligacyjnym, na środku strony znajduje się blok akapitu. W akapicie umieszczony jest napis: Stwórz profesjonalną stronę internetową. Pod nim kolejny napis: Odkryj platformę do tworzenia stron www, która daje Ci swobodę projektowania, zarządzania oraz rozwoju działalności i prowadzenia firmy online w dowolnej branży. Pod tekstem umieszczony jest niebieski przycisk. Na przycisku znajduje się napis: Do dzieła.Pod przyciskiem znajdują się przykładowe wizualizacje stron internetowych. Od lewej strony: fragment edytora, gotowa strona w wersji na komputer, gotowa strona w wersji mobilnej.](https://static.zpe.gov.pl/portal/f/res-minimized/RY4Sr0t2C2BD6/1712839637/vT9OKeY9AJ4P084JMEB17AGSQldoFJA5.png)
Poniżej znajdziesz film instruktażowy, który przedstawia jak w prosty sposób stworzyć przykładową stronę internetową w edytorze WiX.
![](https://static.zpe.gov.pl/portal/f/res-minimized/RcvFpdzVfe9Ln/1712839637/2hrxn6lDBj6DsfPEZgV30FeeYrVEcCmM.png)
Film dostępny pod adresem /preview/resource/RcvFpdzVfe9Ln
Film przedstawia tworzenie strony internetowej w edytorze WiX
Pobierz tekstowy edytor kodu Visual Studio Code ze strony https://code.visualstudio.com. Następnie zapoznaj się z jego podstawowymi funkcjonalnościami.
Program Visual Studio Code posiada wiele funkcji i dostosowań mogących ułatwić pracę każdemu użytkownikowi. Zmiana kolorów, wysoki kontrast i powiększenie może poprawić widoczność edytora, a system nawigacji za pomocą klawiatury i zoptymalizowanie pod kątem czytników ekranu w znaczący sposób wpływa na wygodę jego użytkowania.
W podanym programie zmodyfikuj poniższy kod, tak aby była to strona poświęcona twojemu hobby, np. pisaniu wierszy. Nie musisz edytować elementów, których jeszcze nie znasz, zostaną one wyjaśnione w dalszej części materiału. Skup się na zmianie tekstu zawartego pomiędzy charakterystycznymi elementami znalezionymi w poprzednim ćwiczeniu.
<!-- To jest komentarz -->
<html>
<head>
<title>Przykładowa strona HTML</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest akapit tekstu.</p>
<p>Oto lista nieuporządkowana:</p>
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>
<p>A to lista uporządkowana:</p>
<ol>
<li>Pierwszy krok</li>
<li>Drugi krok</li>
<li>Trzeci krok</li>
</ol>
<p>Oto tabela z danymi:</p>
<table border="1">
<tr>
<td>Nazwa</td>
<td>Cena</td>
<td>Ilość</td>
</tr>
<tr>
<td>Jabłko</td>
<td>2 zł</td>
<td>5 sztuk</td>
</tr>
<tr>
<td>Banan</td>
<td>3 zł</td>
<td>3 sztuki</td>
</tr>
<tr>
<td>Pomarańcza</td>
<td>4 zł</td>
<td>2 sztuki</td>
</tr>
</table>
<!-- To jest formularz, który pozwala użytkownikowi wprowadzić swoje imię i e-mail -->
<!-- Atrybut action określa, co się stanie po wysłaniu formularza -->
<!-- Atrybut method określa sposób przesyłania danych -->
<!-- W tym przypadku użyłem wartości "get", która dodaje dane do adresu URL -->
<!-- Możesz użyć również wartości "post", która ukrywa dane przed adresem URL -->
<!-- Atrybut name określa nazwę pola formularza -->
<!-- Atrybut type określa typ pola formularza -->
<!-- Atrybut value określa domyślną wartość pola formularza -->
<!-- Znacznik label służy do opisania pola formularza -->
<!-- Znacznik input służy do tworzenia pola formularza -->
<!-- Znacznik button służy do tworzenia przycisku wysyłania formularza -->
<!-- Atrybut for w znaczniku label musi być taki sam jak atrybut id w znaczniku input, aby połączyć je ze sobą -->
<p>Oto formularz, który pozwala wprowadzić swoje imię i e-mail:</p>
<form action="https://www.example.com" method="get">
<label for="name">Imię:</label>
<input type="text" id="name" name="name" value="Jan">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" value="jan@example.com">
<button type="submit">Wyślij</button>
</form>
<!-- To jest odnośnik, który pozwala użytkownikowi przejść do innej strony -->
<!-- Atrybut href określa adres URL strony docelowej -->
<!-- Tekst pomiędzy znacznikami a jest wyświetlany jako hiperłącze -->
<p>Oto odnośnik do Wikipedii:</p>
<a href="https://pl.wikipedia.org">Wikipedia</a>
</body>
</html>
Zwróć uwagę na komentarze wyjaśniające poszczególne elementy. Nie zmieniaj charakterystycznej składni języka typu <html>, <head>, <body>, <h1>, <p>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <form>, <input>, <label>, <img>, czy <a>. Skup się głównie na zmianie tekstu między zamykającymi, a otwierającymi ostrokątnymi nawiasami. Możesz powielić wybrane przez siebie znaczniki. Nie musisz wykorzystywać wszystkich struktur, usuń niepasujące ci elementy.
Poniżej napisana została przykładowa strona html, jej tematem przewodnim jest pasja do pisania wierszy.
<html>
<head>
<title>Portfolio wierszy</title>
</head>
<body>
<h1>Witaj na mojej stronie z wierszami!</h1>
<p>Na tej stronie znajdziesz moje autorskie wiersze. Mam nadzieję, że ci się spodobają. Możesz wybrać jeden z poniższych tytułów, aby przeczytać cały wiersz.</p>
<ul>
<li><a href="wiersz1.html" title="Wiersz o miłości i tęsknocie">Miłość i tęsknota</a></li>
<li><a href="wiersz2.html" title="Wiersz o podróżach i marzeniach">Podróże i marzenia</a></li>
<li><a href="wiersz3.html" title="Wiersz o naturze i ekologii">Natura i ekologia</a></li>
</ul>
<p>Oto tabela z moimi ulubionymi poetami i ich dziełami:</p>
<table border="1">
<tr>
<th>Poeta</th>
<th>Dzieło</th>
<th>Gatunek</th>
</tr>
<tr>
<td>Adam Mickiewicz</td>
<td>Pan Tadeusz</td>
<td>Epos narodowy</td>
</tr>
<tr>
<td>Juliusz Słowacki</td>
<td>Beniowski</td>
<td>Poemat dygresyjny</td>
</tr>
<tr>
<td>Bolesław Leśmian</td>
<td>Napój cienisty</td>
<td>Liryka filozoficzna</td>
</tr>
</table>
<p>Oto odnośnik do mojego profilu na portalu poetyckim:</p>
<a href="https://www.poeta.pl" title="Profil poetycki Jana Kowalskiego">Poeta.pl</a>
</body>
</html>
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ć korzystając z edytorów tekstu, które oferują możliwość tworzenia i modyfikowania kodu źródłowego. Do edytorów tego rodzaju zaliczamy:
Notepad++ - rozbudowany darmowy edytor tekstowy, rozpowszechniany na licencji GNU GPL, z możliwością instalacji i pracy w różnych systemach operacyjnych. Dzięki kolorowym znacznikom i wcięciom ułatwia on proces tworzenia kodu strony internetowej.
W kodzie na początku znajduje się deklaracja dokumentu HTML: !DOCTYPE html. Następnie otworzony został znacznik html. Zaraz po nim otwarto znacznik nagłówka: head. W nagłówku ustawiono tytuł strony: Moja pierwsza strona, za pomocą znacznika title. Następnie za pomocą czterech znaczników meta ustawiono kodowanie strony na utf8, ustawiono autora strony: Kowalski, wprowadzono słowa kluczowe: sztuka i malarstwo i dodano opis strony: Strona o sztuce. Zamknięto znacznik head. Pod znacznikiem nagłówka otworzono znacznik body. W nim znajdują się nagłówki. Pierwszy nagłówek (nagłówek pierwszego rzędu), h1: Światowe dzieła sztuki. Drugi nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki antycznej. Trzeci nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki renesansu. Czwarty nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki współczesnej. Piąty nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki literackiej. Szósty nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki malarskiej. Siódmy nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki muzycznej. Następnie zamknięty jest znacznik body, a zaraz po nim zamknięty jest znacznik html.
![Okno edytora tekstowego Notepad++ z otwartym w nim kodem HTML. Ilustracja przedstawia okno edytora tekstowego Notepad++ z otwartym w nim kodem HTML. Wszystkie znaczniki kody umieszczone są w nawiasach ostrych.W kodzie na początku znajduje się deklaracja dokumentu HTML: !DOCTYPE html. Następnie otworzony został znacznik html. Zaraz po nim otwarto znacznik nagłówka: head. W nagłówku ustawiono tytuł strony: Moja pierwsza strona, za pomocą znacznika title. Następnie za pomocą czterech znaczników meta ustawiono kodowanie strony na utf8, ustawiono autora strony: Kowalski, wprowadzono słowa kluczowe: sztuka i malarstwo i dodano opis strony: Strona o sztuce. Zamknięto znacznik head. Pod znacznikiem nagłówka otworzono znacznik body. W nim znajdują się nagłówki. Pierwszy nagłówek (nagłówek pierwszego rzędu), h1: Światowe dzieła sztuki. Drugi nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki antycznej. Trzeci nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki renesansu. Czwarty nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki współczesnej. Piąty nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki literackiej. Szósty nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki malarskiej. Siódmy nagłówek (nagłówek drugiego rzędu), h2: Dzieła sztuki muzycznej. Następnie zamknięty jest znacznik body, a zaraz po nim zamknięty jest znacznik html.](https://static.zpe.gov.pl/portal/f/res-minimized/R1HsSqBjAONSq/1712839647/1dSVx601IITxPgwW13HOVWveWHDQgQ98.jpg)
Visual Studio Code - darmowy edytor kodu źródłowego stworzony przez firmę Microsoft na zasadach otwartego kodu źródłowego. VS Code posiada kolorowanie składni dla wielu języków, wbudowane wsparcie dla debugowaniaDebugowaniedebugowania, refaktoryzacjiRefaktoryzacjarefaktoryzacji oraz zarządzania wersjami kodu.
W programowaniu refaktoryzacja to proces czyszczenia i przekształcania istniejącego już kodu na postać mniej złożoną, czytelniejszą i bardziej przejrzystą jednak z pełnym zachowaniem oryginalnych funkcjonalności. Refaktoryzacja ma na celu utrzymanie wysokiej jakości kodu źródłowego. Pomimo, że nie wpływa zwykle na jego sposób działania, to jest nieodłącznym etapem programowania ułatwiającym pielęgnację oprogramowania i jego przyszłą rozbudowę.
Proces wykrywania i usuwania wszelkich błędów oprogramowania (nazywanych również bug-ami (ang. pluskwa, robak; czyt. bag)) z kodu źródłowego programu. W debugowaniu programów pomagają inne, specjalne programy komputerowe zwane debuggerami stworzone do dynamicznej analizy, wykrywania i identyfikacji błędów.
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++ lub Visual Code Studio, dla systemu MacOS Text Edit czy Sublime Text.
![HTML 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.](https://static.zpe.gov.pl/portal/f/res-minimized/RZaVBbNaaUoml/1712839647/hZCtyIPAgJuVx5PTxr8FDVu9PebYNwyj.jpg)
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.
![](https://static.zpe.gov.pl/portal/f/res-minimized/R1CTu4eysVrRv/1712839648/1EXPvgrYIKnott831EehYfEN5ZHyEajW.png)
Film dostępny pod adresem /preview/resource/R1CTu4eysVrRv
Film przedstawia w jaki sposób utworzyć dokument HTML
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 (znacznikiZnacznikznaczniki) 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 /
.
![Znacznik akapitu w HTML 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.](https://static.zpe.gov.pl/portal/f/res-minimized/R19xGaxCgejk4/1712839651/1kcVl2bwpelMwXhR5Kj5BJMBK543Kqfu.jpg)
Składnia poleceń jest więc następująca:
<znacznik> fragment dokumentu </znacznik>
lub w przypadku polecenia pojedynczego:
<znacznik/>
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>
![](https://static.zpe.gov.pl/portal/f/res-minimized/R2Tydr3udfYz4/1712839651/15dS0lBIHrZ9P3MyLlWWw2NaWHFc7vvg.png)
Film dostępny pod adresem /preview/resource/R2Tydr3udfYz4
Film prezentuje strukturę dokumentu HTML
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.
To zadanie jest podsumowaniem wiedzy i informacji zawartych w akapicie Tworzenie stron WWW z wykorzystaniem języka HTML oraz Struktura dokumentu HTML. Jeśli nie wiesz jak wykonać powyższe zadanie, przeczytaj ponownie wspomniane materiały i zapoznaj się dokładnie z dołączonymi filmami instruktażowymi. Twoja strona internetowa nie posiada obecnie treści, dlatego będzie wyglądać następująco:
![Wygląd strony w przeglądarce, która nie posiada treści Ilustracja przedstawia puste okno przeglądarki Microsoft Edge z białym tłem.](https://static.zpe.gov.pl/portal/f/res-minimized/RUew9ArAIv3Vx/1712839654/2j9y76YK4lyNhKhirJtwbZypZqRAxrry.png)
W załączniku poniżej znajduje się plik o rozszerzeniu .html. Zmień jego nazwę na index.html. Plik zawiera podstawową strukturę dokumentu HTML:
<!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 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>
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.
W efekcie twojej pracy, na górnym pasku przeglądarki powinien się znaleźć wpisany tytuł:
![Tytuł strony Ilustracja przedstawia górny fragment okna przeglądarki internetowej Microsoft Edge. Na otwartej karcie przeglądarki znajduje się tytuł strony: Moja pierwsza strona. Na pasku adresu znajduje się napis: https://. Strona przeglądarki jest pusta.](https://static.zpe.gov.pl/portal/f/res-minimized/R12yi8UzTDj68/1712839655/1ztzc7cTLaibMjlaWG7aR6ck08Zm845n.png)
Aby osiągnąć efekt pokazany na powyższym zrzucie okna przeglądarki musisz edytować treść pliku, który został utworzony w poprzednim zadaniu. W tym celu otwórz plik index.html za pomocą dowolnego edytora tekstu. Pracując w systemie Windows kliknij na plik prawym przyciskiem myszy i wybierz opcję Otwórz za pomocą.
Z listy dostępnych programów wybierz Notatnik lub inny edytor tekstu. Może to być jeden z wcześniej zaproponowanych edytorów, np. Notepad++. Następnie pomiędzy znacznikami <head> ... </head>
dopisz linijkę tekstu:
<title> Moja pierwsza strona </title>
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>
</head>
<body> </body>
</html>
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"/>
![](https://static.zpe.gov.pl/portal/f/res-minimized/R3KtLBgvWLcMh/1712839656/24iCAuljI75WOBWHBfIemJ7C6W6BQuQY.png)
Film dostępny pod adresem /preview/resource/R3KtLBgvWLcMh
Film prezentuje w jaki sposób dodać w dokumencie nagłówek, kodowanie strony, autora, słowa kluczowe i krótki opis strony, który będzie wyświetlał się w wyszukiwarce.
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.
Ponownie musisz edytować plik index.html w jednym z edytorów tekstowych. Następnie pomiędzy znacznikami <body> ... </body>
dopisz linijki kodu:
<meta name="author" content="Kowalski"/>
<meta name="keywords" content="sztuka, malarstwo"/>
<meta name="description" content="Strona o sztuce" />
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>
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ą.
![](https://static.zpe.gov.pl/portal/f/res-minimized/R1ID8zhoxSuD1/1712839661/1ir4wy92h0QcY3wG7ovUIh8HyJU6phi6.png)
Film dostępny pod adresem /preview/resource/R1ID8zhoxSuD1
Film przedstawia umieszczanie nagłówków w części głównej strony umieszczonej między znacznikami BODY
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:
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. 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.](https://static.zpe.gov.pl/portal/f/res-minimized/R12gmxQbQykBa/1712839664/1BLNiMH19KrPfU6EaUglJSFCy1zDYwbf.png)
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>
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 znakiBiałe znakibiał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:
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 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.'](https://static.zpe.gov.pl/portal/f/res-minimized/RgVsBlZqOJeET/1712839665/WX48ZJUecCY13hFiGDZ5HrwNtC7LkSru.jpg)
![](https://static.zpe.gov.pl/portal/f/res-minimized/RpjdXcsy7QRGS/1712839666/DUGanfBq1744x7PTxUWU6WgLYHmHAHfM.png)
Film dostępny pod adresem /preview/resource/RpjdXcsy7QRGS
Film przedstawia umieszczanie akapitów w dokumencie HTML
Znaki specjalne
Encje - w celu wstawiania w dokumencie różnych symboli możesz skorzystać z tzw. encji HTMLEncje HTMLencji 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 < pre > … < pre > uznawana jest za sformatowaną za pomocą białych znaków.</p>
A oto rezultat 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 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'>
![Widok strony dokumentu HTML z widocznym efektem zastosowania znaków specjalnych 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.](https://static.zpe.gov.pl/portal/f/res-minimized/RCju2Q1OmitMO/1712839671/TCR8h7grDxSYiijVGUZCQIawkig2Oh7S.jpg)
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.
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.
![](https://static.zpe.gov.pl/portal/f/res-minimized/R151f8WQwboct/1712839672/2csZLiLX4Z2V5mOUNvHcbgCdOsPaWIgg.png)
Film dostępny pod adresem /preview/resource/R151f8WQwboct
Film przedstawia zastosowanie encji HTML
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:
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ą 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.](https://static.zpe.gov.pl/portal/f/res-minimized/R1QxCyQ4h4A58/1712839676/dMqYaC16dHvMCXCB5wb6Dx9FD27zExbq.png)
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 </h2> ... <h2>
dopisz linijki kodu:
<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> 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> 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>
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 22 + bIndeks górny 22 = cIndeks górny 22
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>
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 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.](https://static.zpe.gov.pl/portal/f/res-minimized/Rb6eu1b1KUNfP/1712839677/1TwF1nmlksFvaaTbG6mvcPOVfJOPGhDO.png)
![](https://static.zpe.gov.pl/portal/f/res-minimized/R1cqu9bvSqfFU/1712839678/2Hmac41aa1WBnCmqNmcFE8u8QtKoSqCp.png)
Film dostępny pod adresem /preview/resource/R1cqu9bvSqfFU
Film prezentuje umieszczanie na stronie znaczników służących do formatowania tekstu.
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">
![](https://static.zpe.gov.pl/portal/f/res-minimized/RD2e6eJMRjz9p/1712839683/1rjazIdO0HwWWnYO9Am9eDJYkCwDuUBN.png)
Film dostępny pod adresem /preview/resource/RD2e6eJMRjz9p
Film prezentuje umieszczanie na stronie cytatu
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:
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. Poniżej tekstu nagłówka: Dzieła sztuki malarskiej umieszczony jest cytat. Cytat brzmi: Nie zrozumiecie sztuki, póki nie zrozumiecie, że w sztuce może dać każdą liczbę z wyjątkiem . Tekst jest napisany kursywą i podkreślony.
![Widok strony dokumentu HTML z widocznym efektem zastosowania znacznika backquote 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. 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.](https://static.zpe.gov.pl/portal/f/res-minimized/R1W1HdDjYCQKp/1712839687/2Zs936kdd9dLXIIzr8CJGIA5KymRl0M8.png)
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> 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>
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>
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ą 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](https://static.zpe.gov.pl/portal/f/res-minimized/R1U13LZYEDeW5/1712839688/2OUzMyGIDpi19UNAVNyvdk9Te1gtlqMX.jpg)
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">
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.
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 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](https://static.zpe.gov.pl/portal/f/res-minimized/RxZGFWMiGi2d6/1712839689/2MDgPl2c58CzEZwMSPieF3CGZpQ5WBAj.png)
![](https://static.zpe.gov.pl/portal/f/res-minimized/RG5hJK6auwcO9/1712839689/udsp1vjSBhMrR6uYsay2yuafVsaWHLzn.png)
Film dostępny pod adresem /preview/resource/RG5hJK6auwcO9
Film przedstawia tworzenie list w HTML
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:
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 może dać każdą liczbę z wyjątkiem jest pisany kursywą i podkreślony.
![Widok strony z listą numerowaną i nienumerowaną 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.](https://static.zpe.gov.pl/portal/f/res-minimized/REyeKOHTiYCgg/1712839697/1XR669C453c4boWXERkKjnTknXPSHlfU.png)
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:
<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> 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> 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>
Załącznik zawiera plik o rozszerzeniu html. Strona internetowa zawiera listę. Pobierz załącznik
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>
![Zrzut ekranu tabeli składającej się z dwóch kolumn i dwóch wierszy](https://static.zpe.gov.pl/portal/f/res-minimized/RXauzk0xjjNKb/1712839698/K7peCk7fMBdbwnCzlHWeQj9lbpim4BV2.jpg)
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>
![Zrzut ekranu tabeli składającej się z dwóch kolumn zatytułowanych: imię, nazwisko.](https://static.zpe.gov.pl/portal/f/res-minimized/R190zVORJoHcg/1712839699/22PQ5xSYIL7JT05g1EFwDr2iW3ylzbsw.png)
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>
![Zrzut ekranu tabeli zawierającej trzy kolumny oraz dwa wiersze. W wierszach umieszczono tytuły: imię, nazwisko.](https://static.zpe.gov.pl/portal/f/res-minimized/RTcvDEeBxCYKI/1712839699/1CdmDYCtcfP8oQszcQxo9uCzneuP6r0Q.png)
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>
![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.](https://static.zpe.gov.pl/portal/f/res-minimized/RZe1Kc1ot0kJH/1712839700/uh3FrSo7ZtQtArrwQ5g7D1vNhp4Clcha.jpg)
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.
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>
![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.](https://static.zpe.gov.pl/portal/f/res-minimized/R1X5KsFLvTs7P/1712839700/1M76QV2ezBCGdgHljAtw0eaCT0V6nnew.png)
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.
Przeglądarki określają domyślnie szerokość tabeli w taki sposób, aby zmieściła się w niej zawartość wszystkich komórek.
![](https://static.zpe.gov.pl/portal/f/res-minimized/R1QrSOjEKOIou/1712839701/1YNTNjwGq0SpR6RRSqPZxnfitNyD2v2C.png)
Film dostępny pod adresem /preview/resource/R1QrSOjEKOIou
Film prezentuje tworzenie tabel w HTML
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:
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łoFidiasz<math aria‑label="od czterysta dziewięćdziesiątego do czterysta trzydziestego przed naszą erą">
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. Poniżej tekstu nagłówka: Dzieła sztuki malarskiej umieszczony jest cytat. Cytat brzmi: Nie zrozumiecie sztuki, póki nie zrozumiecie, że w sztuce może dać każdą liczbę z wyjątkiem . Tekst jest napisany kursywą i podkreślony.
![Zrzut ekranu strony zawierającej tabelę 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.](https://static.zpe.gov.pl/portal/f/res-minimized/R1OhHBA6t6SvF/1712839708/2aZeS8vznZty4w3Cdjm8zaWpQwbPbYXm.png)
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:
<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:
<!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> 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>
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.
![Strona internetowa ze wstawionym zdjęciem. Zrzut widoku strony dokumentu HTML z fotografią psa umieszczoną po lewej stronie względem otaczającego tekstu.](https://static.zpe.gov.pl/portal/f/res-minimized/RA061Yj64d1qQ/1712839709/1XCPP4MRTJrPPdicnnuNaVpQjaLBqVPK.png)
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="pies.png" alt="Pies">
Warto dodać także atrybut title, który będzie wyświetlany w momencie, gdy najedziemy kursorem myszy na grafikę, np.
<img src="pies.png" alt="pies" title="Pies Yoki">
Kolejne atrybuty pozwalają na określenie wysokości (height) i szerokości (width) wczytywanej grafiki, np.
<img src="pies.png" alt="Pies" title="Pies Yoki" 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 istnieje 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>
![Widok strony ze wstawionymi fotografiami Ilustracja przedstawia cztery fotografie na których znajdują się kwiaty polskie. Na pierwszym zdjęciu widać fioletową różę. Na drugim zdjęciu widoczne są kwiaty jabłoni obok których rosną jabłka. Na trzecim zdjęciu widać kwiatek z żółto - pomarańczowymi pączkami. Pączki mają cylindryczny kształt. Na czwartym zdjęciu znajdują się fioletowe kwiatki rosnące na łące. Pod zdjęciami znajduje się źródło strony: zdjęcie kwiaty jesienne.](https://static.zpe.gov.pl/portal/f/res-minimized/RhQWlZwRjiL1F/1712839709/1m7yuKwyZnKYnTM78kci9bL3PbL8Kuex.png)
![](https://static.zpe.gov.pl/portal/f/res-minimized/R1A9409QymAwC/1712839710/1kkQzGBTXUsLZOWyRUaIqA6oBokst5EV.png)
Film dostępny pod adresem /preview/resource/R1A9409QymAwC
Film przedstawia wstawianie grafiki poprzez kod HTML
Przy kilku plikach graficznych na stronie utwórz na nie osobny podfolder (nazwany np. ilustracje) i twórz odwołania do pliku, poprzedzając w kodzie jego nazwę ścieżką dostępu, np.
<img src="ilustracje/nazwa.gif"/>
Korzystając ze znacznika <img>
oraz jego atrybutów, umieść na tworzonej przez ciebie 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.
Przykładowa ilustracja powinna w podobny sposób znajdować się na twojej stronie:
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łoFidiasz<math aria‑label="od czterysta dziewięćdziesiątego do czterysta trzydziestego przed naszą erą">
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. Poniżej tekstu nagłówka: Dzieła sztuki malarskiej umieszczony jest cytat. Cytat brzmi: Nie zrozumiecie sztuki, póki nie zrozumiecie, że w sztuce może dać każdą liczbę z wyjątkiem . Tekst jest napisany kursywą i podkreślony.
![Widok tworzonej strony ze wstawionym zdjęciem. Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge ze wstawionym zdjęciem.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 Knidyjska Poniżej tabeli wstawione jest zdjęcie. Na zdjęciu widoczny jest posąg Zeusa siedzący na tronie.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. 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.](https://static.zpe.gov.pl/portal/f/res-minimized/R9oGujHtu5Gla/1712839715/weD4uTptXMo6p57WniTF9jW9UTjfS6nj.png)
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 dodanej w poprzednim zadaniu tabeli dopisać linijki kodu:
<img src="zeus.jpg" alt="Zeus Olimpijski" width="180" height="220" />
Żeby zdjęcie poprawnie wyświetliło się na twojej stronie internetowej należy umieścić plik zeus.jpg w tym samym folderze co plik index.html. Pobierz poniższą ilustrację wyobrażenia posągu Zeusa w Olimpii z 1815 roku, zmień nazwę pliku na zeus.jpg i umieść go w folderze z twoim nazwiskiem.
W załączniku poniżej znajduje się archiwum .zip z dwoma plikami - index.html oraz zeus.jpg. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik index 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> 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>
<br/>
<img src="zeus.jpg" alt="Zeus Olimpijski" width="180" height="220" />
<br/>
<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>
Załącznik zawiera archiwum zip z plikami strony internetowej Pobierz załącznik
Odnośniki
Jak już zapewne wiesz, odnośniki (hiperłącza) 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 hiperłącza.
Etykieta określająca połączenie do przykładowego adresu w Internecie ma postać
<a href="http://www.zpe.gov.pl">Platforma Edukacyjna</a>
gdzie:
<a>
- etykieta otwierająca;href="http://www.zpe.gov.pl"
- atrybut z docelowym adresem hiperłącza, czyli miejsce gdzie przekieruje cię link po kliknięciu w atrybut;Platforma Edukacyjna
- treść odnośnika na stronie internetowej, która przeniesie na wskazany adres;</a>
- etykieta zamykająca.
![Przykładowy link z wyodrębnieniem elementów jego struktury Ilustracja przedstawiająca strukturę etykiety określającej połączenie do dowolnego adresu w Internecie. kurs html. Href jest atrybutem, strona podana w linku - adresem URL, a "kurs html" jest tekstem linka.](https://static.zpe.gov.pl/portal/f/res-minimized/R1XpPbRbfIVVy/1712839716/1XV1TXaCmYIkM6rtUjOuFhXvqGszLPRz.png)
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="https://www.gov.pl">Strona rządowa</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/duza_grafika.gif" target="_blank">
<img src="ilustracje/mala_grafika.gif" alt="Mała grafika"/></a>
Grafiki – mała i duża – powinny znajdować się w tym samym folderze.
![](https://static.zpe.gov.pl/portal/f/res-minimized/RCQGbBgiQgzE0/1712839716/1k8hianhmhoAfI8RTAXd6VZy1txIqELk.png)
Film dostępny pod adresem /preview/resource/RCQGbBgiQgzE0
Film przedstawia używanie odsyłaczy w HTML
Na tworzonej przez siebie stronie internetowej dodaj odnośnik do fotografii. Po kliknięciu w fotografię, wstawioną przez ciebie w poprzednim zadaniu, w nowej karcie powinno otworzyć się to samo zdjęcie w większym formacie.
Przykładowa ilustracja powinna otworzyć się w nowym oknie w ten sposób:
![Strona internetowa ze wstawionym zdjęciem Zeusa Na ilustracji przedstawiono pomnik Zeusa siedzącego na tronie. Pomnik znajduje się w dużej świątyni. W lewej ręce zeusa znajduje się złota laska. Na prawej ręce widoczna jest złota statuetka. Koło stopni tronu widoczni są ludzie.](https://static.zpe.gov.pl/portal/f/res-minimized/RoUcBM0kLUTlt/1712839724/259ghzeSqEVGJ5UxpwD8dVvQ7QYsCO8l.jpg)
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 dodanej w poprzednim zadaniu tabeli dopisz linijki kodu:
<a href="zeus.jpg" target="_blank">
<img src="zeus.jpg" alt="Zeus Olimpijski" width="180" height="220" />
</a>
Aby zdjęcie poprawnie wyświetliło się na twojej stronie internetowej należy umieścić plik zeus.jpg w tym samym folderze co plik index.html. Pobierz poniższą ilustrację wyobrażenia posągu Zeusa w Olimpii z 1815 roku, zmień nazwę pliku na zeus.jpg i umieść go w folderze z twoim nazwiskiem.
W załączniku poniżej znajduje się archiwum zip z dwoma plikami - index.html oraz zeus.jpg. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik index 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> 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>
<br/>
<a href="zeus.jpg" target="_blank"><img src="zeus.jpg" title="Kliknij, aby zobaczyć powiększenie" alt="Zeus Olimpijski" width="180" height="220" /></a>
<br/>
<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>
Załącznik zawiera archiwum zip z plikami strony internetowej. Pobierz załącznik
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 ograniczających go punktów. 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
.
Poleceniem <map>
rozszerzonym o atrybut name
zdefiniujemy 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:
<img src="polska.gif" border="0" usemap="#kraj" />
<map name="kraj">
<area href="lublin.html" shape="rect" coords="350,21,371,270" alt="Województwo lubelskie"/>
<area href="poznan.html" shape="poly" coords="228,215,369,215,420,411,160,412" alt="Województwo wielkopolskie/>
<area href="lodz.html" shape="circle" coords="733,873,485" alt="Województwo łódzkie"/>
</map>
![](https://static.zpe.gov.pl/portal/f/res-minimized/ROB0pExX40aye/1712839726/2OzhYD8kzqft3UxonLSdclj4JYJlZ5uj.png)
Film dostępny pod adresem /preview/resource/ROB0pExX40aye
Film przedstawia w jaki sposób podzielić ilustrację na fragmenty, które będą odsyłały do innych miejsc (za pomocą mapy odnośników)
W tym samym folderze w którym znajduje się plik index.html utwórz drugi plik o nazwie mapa z rozszerzeniem .html i edytuj jego zawartość tworząc podstawową strukturę dokumentu HTML z ćwiczenia 4. Do swojej strony index.html dodaj relatywne połącznie hipertekstowe prowadzące do nowoutworzonego pliku mapa.html podobnie jak w ćwiczeniu 13. Pamiętaj, aby z nowej podstrony dało się również wrócić do strony głównej. Następnie, na nowej stronie umieść fotografię stosowną do tematu jaki prezentujesz (w taki sam sposób jak w ćwiczeniu 12). Do fotografii w pliku mapa.html dodaj mapę odnośników kierującą na inne strony internetowe istniejące już w sieci o podobnej tematyce.
Przykładowa nowa strona powinna wyglądać w ten sposób:
W górnej części przeglądarki umieszczone są katy zakładek: Moja pierwsza strona, Mapa. Zakładka: Mapa jest otwarta. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa ze wstawioną grafiką.
Na zdjęciu widać pomnik Zeusa. Pomnik znajduje się w dużej świątyni. W lewej ręce Zeus trzyma złotą laska. Na prawej dłoni Zeusa widoczna jest złota statuetka. Koło stopni tronu chodzą ludzie.
Pod zdjęciem znajduje się napis: wróć do strony głównej. Napis jest linkiem aktywnym.
![Widok strony internetowej ze wstawionym zdjęciem i linkiem. Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge ze wstawionym zdjęciem.W górnej części przeglądarki umieszczone są katy zakładek: Moja pierwsza strona, Mapa. Zakładka: Mapa jest otwarta. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa ze wstawioną grafiką.Na zdjęciu widać pomnik Zeusa. Pomnik znajduje się w dużej świątyni. W lewej ręce Zeus trzyma złotą laska. Na prawej dłoni Zeusa widoczna jest złota statuetka. Koło stopni tronu chodzą ludzie.Pod zdjęciem znajduje się napis: wróć do strony głównej. Napis jest linkiem aktywnym.](https://static.zpe.gov.pl/portal/f/res-minimized/R1Fuk7DmrqQAI/1712839734/fKqm3AR4svbFJjfZX4tN7VaCaFb4gWpY.png)
Wstawiona fotografia posiada niewidoczne pola. Gdy klikniesz w jedno z nich, działanie odnośnika przeniesie cię na jedną z trzech stron:
W centralnej części zdjęcia widoczny jest kształt strzałki. Grot strzałki skierowany jest do dołu. W grot strzałki wpisany jest zielony okrąg. W okręgu znajduje się napis: Fidiasz, cyfrowe koordynaty przypisane do zmiennej coords oraz kształt circle przypisany do zmiennej shape. Podstawa strzałki ma kształt niebieskiego prostokąta. W prostokącie znajduje się napis: Zeus, cyfrowe koordynaty przypisane do zmiennej coords oraz kształt rect przypisany do zmiennej shape. Pozostałe prostokątne obszary powstałe pomiędzy bokami podstawy strzałki a bokami zdjęcia, oraz trójkątne obszary powstałe poniżej grotu strzałki są opisane słowem: Świątynia. Obszary mają indywidualne cyfrowe koordynaty oraz przypisany kształt rect lub poly do zmiennej shape.
![Układ niewidocznych pól na zdjęciu Ilustracja pokazuje układ niewidocznych pól znajdujących się na zdjęciu Zeusa.W centralnej części zdjęcia widoczny jest kształt strzałki. Grot strzałki skierowany jest do dołu. W grot strzałki wpisany jest zielony okrąg. W okręgu znajduje się napis: Fidiasz, cyfrowe koordynaty przypisane do zmiennej coords oraz kształt circle przypisany do zmiennej shape. Podstawa strzałki ma kształt niebieskiego prostokąta. W prostokącie znajduje się napis: Zeus, cyfrowe koordynaty przypisane do zmiennej coords oraz kształt rect przypisany do zmiennej shape. Pozostałe prostokątne obszary powstałe pomiędzy bokami podstawy strzałki a bokami zdjęcia, oraz trójkątne obszary powstałe poniżej grotu strzałki są opisane słowem: Świątynia. Obszary mają indywidualne cyfrowe koordynaty oraz przypisany kształt rect lub poly do zmiennej shape.](https://static.zpe.gov.pl/portal/f/res-minimized/R1NdSh2hauFHa/1712839735/2AC38y4FZQNWz8aSBds41L0LFC8VVLct.jpg)
Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, musisz utworzyć nowy plik mapa.html i edytować jego zawartość w edytorze tekstowym dodając podstawową strukturę dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mapa</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" />
<meta name="keywords" content="sztuka, malarstwo" />
<name="description" content="Zeus z Olimpii" />
</head>
<body>
</body>
</html>
Następnie w sekcji body
wstaw zdjęcie z odpowiednimi atrybutami (w tym nazwą usemap
):
<img src="zeus.jpg" title="Zeus" alt="Zeus Olimpijski"/ usemap="#starozytnosc">
Mapa odnośników na fotografii zadziałała kiedy w sekcji body
dodasz znacznik map
oraz współrzędne odpowiadające konkretnym miejscom na fotografii:
<map name="starozytnosc">
<area target="_blank" alt="Posąg Zeusa w Olimpii" title="Zeus" href="https://pl.wikipedia.org/wiki/Posąg_Zeusa_w_Olimpii" coords="165,565,561,5" shape="rect">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="0,662,161,0,157,10" shape="rect">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="564,650,681,0" shape="rect">
<area target="_blank" alt="Fidiasz" title="Fidiasz" href="https://pl.wikipedia.org/wiki/Fidiasz" coords="342,708,141" shape="circle">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="314,860,9,668,4,857,156,857,239,859" shape="poly">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="675,854,380,856,676,660,677,778,677,808" shape="poly">
</map>
Aby móc wrócić do strony głównej znajdującej się w pliku index.html, na dole sekcji <body>
w pliku mapa.html należy dodać następujące linijki kodu:
<a href="index.html"> <h1>Wróć do strony głównej </h1> </a>
W pliku index.html edytuj linijkę z odnośnikiem, który po kliknięciu zamieszczonego na stronie obrazu wyświetlał w osobnej karcie większy obraz Zeusa. Zmień wartość atrybutu href
z wpisanego wcześniej zeus.jpg na mapa.html:
<a href="mapa.html" target="_blank">
<img src="zeus.jpg" alt="Zeus Olimpijski" width="180" height="220" />
</a>
Pamiętaj, aby wszystkie pliki znajdowały się w tym samym folderze. Od teraz, po kliknięciu na obraz Zeusa z Olimpii działanie odnośnika przeniesie cię na stronę utworzoną w pliku mapa.html.
Aby zdjęcie poprawnie wyświetliło się na twojej stronie internetowej należy umieścić plik zeus.jpg w tym samym folderze co plik mapa.html. Pobierz poniższą ilustrację wyobrażenia posągu Zeusa w Olimpii z 1815 roku, zmień nazwę pliku na zeus.jpg i umieść go w folderze z twoim nazwiskiem.
W załączniku poniżej znajduje się archiwum zip z trzema plikami - index.html, mapa.html oraz zeus.jpg. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik index 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> 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>
<br/>
<a href="mapa.html" target="_blank"><img src="zeus.jpg" title="Kliknij, aby przejść do mapa.html" alt="Zeus Olimpijski" width="180" height="220" /></a>
<br/>
<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>
Plik mapa zawiera strukturę dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mapa</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" />
<meta name="keywords" content="sztuka, malarstwo" />
<name="description" content="Zeus z Olimpii" />
</head>
<body>
<img src="zeus.jpg" title="Zeus" alt="Zeus Olimpijski"/ usemap="#starozytnosc">
<map name="starozytnosc">
<area target="_blank" alt="Posąg Zeusa w Olimpii" title="Zeus" href="https://pl.wikipedia.org/wiki/Posąg_Zeusa_w_Olimpii" coords="165,565,561,5" shape="rect">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="0,662,161,0,157,10" shape="rect">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="564,650,681,0" shape="rect">
<area target="_blank" alt="Fidiasz" title="Fidiasz" href="https://pl.wikipedia.org/wiki/Fidiasz" coords="342,708,141" shape="circle">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="314,860,9,668,4,857,156,857,239,859" shape="poly">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="675,854,380,856,676,660,677,778,677,808" shape="poly">
</map>
<a href="index.html"> <h1>Wróć do strony głównej </h1> </a>
</body>
</html>
Załącznik zawiera archiwum zip z plikami strony internetowej. Pobierz załącznik
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 (ang. 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.
![](https://static.zpe.gov.pl/portal/f/res-minimized/RP58q6lcnAzZn/1712839736/2FDymZ6By7IwWhrsKBC12E7Y09e0w6Gt.png)
Film dostępny pod adresem /preview/resource/RP58q6lcnAzZn
Film prezentuje wstawianie plików audio i wideo w HTML.
Znajdź spokojną muzykę lub urywek audiobooka (możesz go nagrać samodzielnie lub wyszukać w Internecie) pasujący tematycznie do tworzonej przez ciebie witryny internetowej, a następnie dodaj go na swojej stronie, tak aby odtwarzał się automatycznie i zapętlony. Muzykę możesz dodać do utworzonego pliku mapa.html, aby umilić użytkownikom czas podczas przeglądania stron zawartych na mapie odnośników.
Ciekawe źródła z muzyką znajdziesz na http://otwartezasoby.pl/category/muzyka/.
Po wykonaniu tego zadania, wszystkie elementy wyświetlone na twojej stronie internetowej powinny prezentować się następująco:
W górnej części przeglądarki umieszczone są katy zakładek: Moja pierwsza strona, Mapa. Zakładka: Mapa jest otwarta. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa ze wstawioną grafiką.
Na zdjęciu widać pomnik Zeusa. Pomnik znajduje się w dużej świątyni. W lewej ręce Zeus trzyma złotą laska. Na prawej dłoni Zeusa widoczna jest złota statuetka. Koło stopni tronu chodzą ludzie.
Pod zdjęciem znajduje się napis: wróć do strony głównej. Napis jest linkiem aktywnym.
W prawym dolnym rogu zdjęcia znajduje się dodane pole multimediów. Pole składa się z czarnego trójkąta rozpoczynającego odtwarzanie, czasu trwania oraz maksymalnego czasu nagrania, czarnego poziomego paska wskazującego orientacyjny punk czasowy nagrania, czarnego głośnika do sterowania głośnością, trzech pionowych kropek po naciśnięciu których rozwijają się dodatkowe opcje.
![Widok tworzonej strony z dodanym zdjęciem oraz polem multimediów Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge ze wstawionym zdjęciem.W górnej części przeglądarki umieszczone są katy zakładek: Moja pierwsza strona, Mapa. Zakładka: Mapa jest otwarta. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa ze wstawioną grafiką.Na zdjęciu widać pomnik Zeusa. Pomnik znajduje się w dużej świątyni. W lewej ręce Zeus trzyma złotą laska. Na prawej dłoni Zeusa widoczna jest złota statuetka. Koło stopni tronu chodzą ludzie.Pod zdjęciem znajduje się napis: wróć do strony głównej. Napis jest linkiem aktywnym.W prawym dolnym rogu zdjęcia znajduje się dodane pole multimediów. Pole składa się z czarnego trójkąta rozpoczynającego odtwarzanie, czasu trwania oraz maksymalnego czasu nagrania, czarnego poziomego paska wskazującego orientacyjny punk czasowy nagrania, czarnego głośnika do sterowania głośnością, trzech pionowych kropek po naciśnięciu których rozwijają się dodatkowe opcje.](https://static.zpe.gov.pl/portal/f/res-minimized/R1BJO1ABy0vkG/1712839742/29I2VdJk8qdkI63BK6ZoJPaNAULQCPvE.png)
Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, musisz edytować plik mapa.html w jednym z edytorów tekstowych. Następnie pod wstawioną fotografią dopisać linijki kodu:
<audio controls loop autoplay src="audio.mp3" type="audio/mpeg">Plik dźwiękowy nieobsługiwany</audio>
Przykładowy plik audio Greek Tragedy
autorstwa Various Artists La bel, wstawiony na tworzoną przez nas stronę możesz pobrać poniżej:
W załączniku poniżej znajduje się archiwum .zip z czterema plikami - index.html, mapa.html, zeus.jpg oraz audio.mp3. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik audio zawiera muzykę Greek Tragedy
autorstwa Various Artists La bel. Plik index 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> 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>
<br/>
<a href="mapa.html" target="_blank"><img src="zeus.jpg" title="Kliknij, aby przejść do mapa.html" alt="Zeus Olimpijski" width="180" height="220" /></a>
<br/>
<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>
Plik mapa zawiera strukturę dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mapa</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" />
<meta name="keywords" content="sztuka, malarstwo" />
<name="description" content="Zeus z Olimpii" />
</head>
<body>
<img src="zeus.jpg" title="Zeus" alt="Zeus Olimpijski"/ usemap="#starozytnosc">
<audio controls loop autoplay src="audio.mp3" type="audio/mpeg">Plik dźwiękowy nieobsługiwany</audio>
<map name="starozytnosc">
<area target="_blank" alt="Posąg Zeusa w Olimpii" title="Zeus" href="https://pl.wikipedia.org/wiki/Posąg_Zeusa_w_Olimpii" coords="165,565,561,5" shape="rect">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="0,662,161,0,157,10" shape="rect">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="564,650,681,0" shape="rect">
<area target="_blank" alt="Fidiasz" title="Fidiasz" href="https://pl.wikipedia.org/wiki/Fidiasz" coords="342,708,141" shape="circle">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="314,860,9,668,4,857,156,857,239,859" shape="poly">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="675,854,380,856,676,660,677,778,677,808" shape="poly">
</map>
<a href="index.html"> <h1>Wróć do strony głównej </h1> </a>
</body>
</html>
Załącznik zawiera archiwum zip z plikami strony internetowej. Pobierz załącznik
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="https://www.youtube.com/watch?v=sI9hk3JwbhQ">
</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 wykorzystać również 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="https://zpe.gov.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:
![](https://static.zpe.gov.pl/portal/f/res-minimized/RFx6apkwRW5NP/1712839744/avAZXRqU1WPbFxqoQE3aDr55Fn5lmtc7.png)
Film dostępny pod adresem /preview/resource/RFx6apkwRW5NP
Film przedstawia w jaki sposób umieszczać ramki zagnieżdżone w HTML.
Wykorzystując podane informacje, umieść na jednej ze stron ramkę pływającą, zawierającą inną ze stron twojego serwisu. Może to być strona utworzona w pliku mapa.html.
Po wykonaniu tego zadania twoja strona interentowa powinna wyglądać w podobny sposób:
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łoFidiasz<math aria‑label="od czterysta dziewięćdziesiątego do czterysta trzydziestego przed naszą erą">
W prawym dolnym rogu zdjęcia znajduje się pole multimediów. Pole składa się z czarnego trójkąta rozpoczynającego odtwarzanie, czasu trwania oraz maksymalnego czasu nagrania, czarnego poziomego paska wskazującego orientacyjny punk czasowy nagrania, czarnego głośnika do sterowania głośnością, trzech pionowych kropek po naciśnięciu których rozwijają się dodatkowe opcje.
Pod akapitem ze zdjęciem widoczny jest kolejny punt listy brzmiący: dzieła sztuki renesansu.
![Witok tworzonej strony internetowej z dodanym zdjęciem i polem multimedialnym Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge ze wstawionym zdjęciem.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 Knidyjska Poniżej tabeli wstawione jest zdjęcie. Na zdjęciu widoczny jest posąg Zeusa siedzący na tronie. W prawym dolnym rogu zdjęcia znajduje się pole multimediów. Pole składa się z czarnego trójkąta rozpoczynającego odtwarzanie, czasu trwania oraz maksymalnego czasu nagrania, czarnego poziomego paska wskazującego orientacyjny punk czasowy nagrania, czarnego głośnika do sterowania głośnością, trzech pionowych kropek po naciśnięciu których rozwijają się dodatkowe opcje.Pod akapitem ze zdjęciem widoczny jest kolejny punt listy brzmiący: dzieła sztuki renesansu.](https://static.zpe.gov.pl/portal/f/res-minimized/R1KWQmzw7g3f6/1712839751/tnOP9RKVYY17ywseJ17YKPMBjZXPh4SF.png)
Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, musisz edytować plik index.html dodając w sekcji body
:
<iframe width="100%" height="900px"
src="mapa.html">
</iframe>
oraz usunąć niepotrzebny już wcześniej wstawiony obraz Zeusa kasując następujące linijki kodu:
<br/>
<a href="mapa.html" target="_blank"><img src="zeus.jpg" title="Kliknij, aby przejść do mapa.html" alt="Zeus Olimpijski" width="180" height="220" /></a>
<br/>
Nie ma już również potrzeby, aby z podstrony Mapa, dało się wrócić do strony głównej, dlatego z pliku mapa.html usuń linijkę odnośnika:
<a href="index.html"> <h1>Wróć do strony głównej </h1> </a>
W załączniku poniżej znajduje się archiwum .zip z czterema plikami - index.html, mapa.html, zeus.jpg oraz audio.mp3. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik audio zawiera muzykę Greek Tragedy
autorstwa Various Artists La bel. Plik index 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> 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>
<iframe width="100%" height="900px">
src="mapa.html">
</iframe>
<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>
Plik mapa zawiera strukturę dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mapa</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" />
<meta name="keywords" content="sztuka, malarstwo" />
<name="description" content="Zeus z Olimpii" />
</head>
<body>
<img src="zeus.jpg" title="Zeus" alt="Zeus Olimpijski"/ usemap="#starozytnosc">
<audio controls loop autoplay src="audio.mp3" type="audio/mpeg">Plik dźwiękowy nieobsługiwany</audio>
<map name="starozytnosc">
<area target="_blank" alt="Posąg Zeusa w Olimpii" title="Zeus" href="https://pl.wikipedia.org/wiki/Posąg_Zeusa_w_Olimpii" coords="165,565,561,5" shape="rect">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="0,662,161,0,157,10" shape="rect">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="564,650,681,0" shape="rect">
<area target="_blank" alt="Fidiasz" title="Fidiasz" href="https://pl.wikipedia.org/wiki/Fidiasz" coords="342,708,141" shape="circle">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="314,860,9,668,4,857,156,857,239,859" shape="poly">
<area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="675,854,380,856,676,660,677,778,677,808" shape="poly">
</map>
</body>
</html>
Załącznik zawiera archiwum zip z plikami strony internetowej. Pobierz załącznik
Komentarze
Kod źródłowy przedstawiony powyżej jest już kodem dość skomplikowanym. Gdy powrócisz do niego za jakiś czas, możesz zastanawiać się, dlaczego został napisany w ten sposób. 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 wielolinijkowy umieszczany jest pomiędzy znacznikami <!-
oraz ->
. Jednolinijkowy komentarz możesz również wstawić używając dwóch ukośników //.
Przykładowa informacja może być również wskazówką dla autora i może wyglądać w ten sposób:
![Fragment kodu HTML z komentarzem jednolinijkowym oraz wielolinijkowym Na ilustracji pokazano sposób wstawiania komentarzy do kody HTML. W górnej części edytora HTML widoczny jest komentarz wielolinijkowy. Komentarz umieszcza się wewnątrz nawiasów ostrych. Po nawiasie ostrym lewostronnie domkniętym umieszcza się wykrzyknik oraz myślnik. Komentarz kończy się myślnikiem poprzedzającym znak nawiasu ostrego prawostronnie domkniętego. Komentarz na rysunku zaczyna się w trzydziestej drugiej linii a kończy w trzydziestej szóstej. Tekst komentarza brzmi: ramka zagnieżdżona. Zawiera ilustrację posągu Zeusa w Olimpii. Poniżej komentarza znajduje się kod odpowiadający kolejnym elementom listy. Na końcu linijek kody znajduje się komentarz jednolinijkowy. Komentarz jednolinijkowy jest oznaczony przez dwa ukośniki. Ukośniki są postawione jeden po drugim bez jakiegokolwiek białego znaku. Za ukośnikami widoczny jest przykładowy tekst: Należy uzupełnić informacje o sztuce renesansu.](https://static.zpe.gov.pl/portal/f/res-minimized/R18nMaMwIRYu9/1712839752/2VVh4Bqf5EM6YlSkTmVf5Qhze1Y0AYt5.png)
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 metodyget
ipost
.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ól 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.
Po lewej stronie zdjęcia widać różne atrybuty dla znacznika input. Obok atrybutu pokazano uzyskaną wizualizacje znacznika dla danego atrybutu.
W górnej części strony znajduje się napis: Atrybuty znacznika input i ich wartości. Słowo input znajduje się w nawiasie ostrym lewostronnie i prawostronnie domkniętym. Poniżej wyszczególnione są następujące atrybuty. Atrybuty umieszczone są w nawiasach ostrych.input type = "checkbox" checked/. Utworzone pole wyboru. Pole jest zaznaczone.input type = "file"/. Utworzony przycisk zamieszczenia pliku. Na przycisku znajduje się napis: Wybierz plik. Obok przycisku znajduje się napis: Nie wybrano plikuinput type = "password" maxlenght = ""/. Powstaje puste pole do wpisania hasła.input type = "radio" name = "płeć"/. Za nawiasem ostrym znajduje się dopisek: kobieta. Powstaje pole do zaznaczenia z etykietą: kobieta. input type = "submit" value = "Wyślij"/. Powstaje przycisk z napisem: Wyślij. input type = "reset" value = "Wyczyść formularz"/. Powstaje przycisk z napisem: Wyczyść formularz. input type = "text" size = ""/
![Atrybuty znacznika input i jego wartości. Ilustracja przedstawia atrybuty znacznika input oraz mark.Po lewej stronie zdjęcia widać różne atrybuty dla znacznika input. Obok atrybutu pokazano uzyskaną wizualizacje znacznika dla danego atrybutu.W górnej części strony znajduje się napis: Atrybuty znacznika input i ich wartości. Słowo input znajduje się w nawiasie ostrym lewostronnie i prawostronnie domkniętym. Poniżej wyszczególnione są następujące atrybuty. Atrybuty umieszczone są w nawiasach ostrych.input type = "checkbox" checked/. Utworzone pole wyboru. Pole jest zaznaczone.input type = "file"/. Utworzony przycisk zamieszczenia pliku. Na przycisku znajduje się napis: Wybierz plik. Obok przycisku znajduje się napis: Nie wybrano plikuinput type = "password" maxlenght = "8"/. Powstaje puste pole do wpisania hasła.input type = "radio" name = "płeć"/. Za nawiasem ostrym znajduje się dopisek: kobieta. Powstaje pole do zaznaczenia z etykietą: kobieta. input type = "submit" value = "Wyślij"/. Powstaje przycisk z napisem: Wyślij. input type = "reset" value = "Wyczyść formularz"/. Powstaje przycisk z napisem: Wyczyść formularz. input type = "text" size = "50"/](https://static.zpe.gov.pl/portal/f/res-minimized/R59bw4FMPf7f7/1712839752/2ih04D1dp1CkRTssaji4K5KZvOy8zKNE.png)
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 rozwijanych 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 rozwijanej
<select name="Ulubione przeglądarki">
<option>Microsoft Edge</option>
<option>Firefox</option>
<option>Opera</option>
<option>Safari</option>
</select>
![](https://static.zpe.gov.pl/portal/f/res-minimized/R1FthCKG8EzLR/1712839753/23XV1rxSXRVpmtZZViFqIUSyJbfzVrk0.png)
Film dostępny pod adresem /preview/resource/R1FthCKG8EzLR
Film prezentuje tworzenie formularzy w HTML
Na podstawie powyższych informacji, w nowym pliku .html spróbuj wykonać poniżej przedstawiony formularz.
W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Formularz. 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 brzmiący: Ankieta statystyczna. Poniżej znajduje się napis: Zapraszamy do wypełnienia ankiety. Użyj przycisku prześlij do wysłania odpowiedzi. Słowo prześlij jest pogrubione. Poniżej komunikatu znajduje się formularz. Kolejne pola formularza.Etykieta Nazwisko. Za etykietą pole tekstowe do uzupełnienia.Etykieta e‑mail Za etykietą pole tekstowe do uzupełnienia.Etykieta: Płeć. Za etykietą pola wyboru: Mężczyzna, Kobieta. Żadne z pól nie jest zaznaczone.Etykieta: Ile masz lat?. Poniżej rozwijalne pole wyboru. Wybrany przedział od do .Etykieta: W którym zawodzie chciałbyś pracować. Poniżej znajdują się następujące opcje z polem wyboru: Grafik komputerowy, Programista, Administrator sieci, Serwisant. Żadne z pól nie jest zaznaczone. Etykieta: Dlaczego chciałbyś wykonywać ten zawód?. Poniżej pole z tekstem do uzupełnienia. W polu znajduje się napis: To miejsce na odpowiedźPrzycisk z napisem: prześlij wynikPrzycisk z napisem: Wyczyść formularz
![Strona internetowa z utworzonym formularzem Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge ze stworzonym formularzem.W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Formularz. 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 brzmiący: Ankieta statystyczna. Poniżej znajduje się napis: Zapraszamy do wypełnienia ankiety. Użyj przycisku prześlij do wysłania odpowiedzi. Słowo prześlij jest pogrubione. Poniżej komunikatu znajduje się formularz. Kolejne pola formularza.Etykieta Nazwisko. Za etykietą pole tekstowe do uzupełnienia.Etykieta e‑mail Za etykietą pole tekstowe do uzupełnienia.Etykieta: Płeć. Za etykietą pola wyboru: Mężczyzna, Kobieta. Żadne z pól nie jest zaznaczone.Etykieta: Ile masz lat?. Poniżej rozwijalne pole wyboru. Wybrany przedział od 6 do 12.Etykieta: W którym zawodzie chciałbyś pracować. Poniżej znajdują się następujące opcje z polem wyboru: Grafik komputerowy, Programista, Administrator sieci, Serwisant. Żadne z pól nie jest zaznaczone. Etykieta: Dlaczego chciałbyś wykonywać ten zawód?. Poniżej pole z tekstem do uzupełnienia. W polu znajduje się napis: To miejsce na odpowiedźPrzycisk z napisem: prześlij wynikPrzycisk z napisem: Wyczyść formularz](https://static.zpe.gov.pl/portal/f/res-minimized/RjgJpGXI7f2gF/1712839762/s35KqPdSSmhBX27dLj10f42eWL1wKQvU.png)
Aby uzyskać pożądany efekt, musisz utworzyć nowy plik o wybranej nazwie np. formularz.html i edytować jego zawartość w edytorze tekstowym dodając podstawową strukturę dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Formularz</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" />
<meta name="keywords" content="dane, informacje" />
<name="description" content="Strona do zdobywania informacji" />
</head>
<body>
</body>
</html>
Przypomnij sobie poznane wcześniej znaczniki nagłówków, akapitu oraz sposoby na formatowanie tekstu i przenoszenie go do nowej linii. Za pomocą poznanych technik spróbuj ułożyć elementy formularza na stronie, tak aby wyglądały jak na podanym wyżej zrzucie ekranu. W celu pogrubienia czcionki użyj znacznika <strong>
. Linie oddzielające poszczególne części strony dodasz za pomocą znacznika <hr/>
.
W ciele strony utwórz formularz za pomocą znacznika <form>
z atrybutami method="post"
, action="mailto:"
oraz enctype:
<form method="post" enctype="text/plain" action="mailto: podajswójemail@outlook.com">
</form>
W znaczniku <form>
dodaj pierwsze widoczne na zrzucie ekranu pola formularza <input>
. Nazwisko będzie typu text, a adres poczty elektronicznej typu email. Nie zapomnij nadać nazwy, pod którą wpisane dane zostaną zwrócone. Aby przenieść kolejne elementy do nowej linii użyj znacznika <br>
:
<input name="Nazwisko" type="text"> <br/>
<input name="email" type="email"/>
Pola jednokrotnego wyboru płci utworzysz dodając typ radio oraz nadając im tę samą nazwę w atrybucie name
. Zwracane przez nie wartości po wysłaniu formularza określisz w atrybucie value
. Etykiety znajdujące się obok to wpisany czysty tekst.
<input type="radio" name="thesex" value="mezczyzna"/>Mężczyzna
<input type="radio" name="thesex" value="kobieta"/>Kobieta
Rozwijaną listę utworzysz znacznikiem <select>
. Kolejne pozycje listy znajdują się w znaczniku <option>
umieszczonym w rodzicu <select>
. Nie zapomnij nadać liście nazwy pod którą zostanie zwrócony wybrany przedział wiekowy.
<select name="Wiek">
<option>6-12</option>
<option>12-18</option>
<option>18-24</option>
<option>24-30</option>
<option>>30</option>
</select>
Pola w postaci opcji do zaznaczenia (tak lub nie) posiadają typ checkbox. Po wysłaniu formularza zwrócą swoją nazwę w postaci grafik=on.
<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/>
Miejsce na dłuższą odpowiedź utworzysz za pomocą znacznika <textarea>
Najważniejsze przyciski całego formularza to submit oraz reset. Wartość wyświetlana w przyciskach umieszczona jest w atrybucie value
. Ich kliknięcie spowoduje wysłanie formularza na podany w znaczniku <form>
e‑mail lub usunięcie wszystkich uzupełnionych informacji w formularzu.
<input type="submit" value="Prześlij wyniki"/>
<input type="reset" value="Wyczyść formularz"/>
W załączniku poniżej znajduje się plik o rozszerzeniu .html. Zmień jego nazwę na formularz.html. Plik zawiera strukturę dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Formularz</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" />
<meta name="keywords" content="dane, informacje" />
<name="description" content="Strona do zdobywania informacji" />
</head>
<body>
<h2> Ankieta statystyczna</h2>
<form method="post" enctype="text/plain" action="mailto: podajswójemail@outlook.com">
<p>Zapraszamy do wypełnienia ankiety. </p>
<p>Użyj przycisku <strong>Prześlij</strong> do wysłania odpowiedzi. </p>
<hr/>
<strong>Nazwisko: </strong><input name="Nazwisko" type="text"> <br/>
<br/>
<strong>E-mail:</strong> <input name="email" type="email"/> <br/>
<p><strong>Płeć: </strong> </p>
<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>6-12</option>
<option>12-18</option>
<option>18-24</option>
<option>24-30</option>
<option>>30</option>
</select>
<p><strong>W którym zawodzie chciałbyś lub chciałabyś pracować</p> <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ś lub chciałabyś wykonywać ten zawód?</p>
<textarea name="odpowiedz">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>
</body>
</html>
Załącznik zawiera plik o rozszerzeniu html. Strona internetowa zawiera formularz. Pobierz załącznik
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 ukaże się poniżej, w kolejnej linii.
![Znacznik zamknięcia na przykładzie akapitu. Ilustracja przedstawiająca znacznik zamknięcia akapitu. Literka p poprzedzona ukośnikiem znajduje się wewnątrz nawiasów ostrych. Z lewej strony znajduje się nawias lewostronnie domknięty. Z prawej strony znajduje się nawias prawostronnie domknięty.](https://static.zpe.gov.pl/portal/f/res-minimized/Rib2F59wiNdMS/1712839763/2VxgGOkDys5Sfmvt9SFq56wrU53yCgQW.jpg)
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 rozróżnienia 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.
Oznaczmy powyższą sekcję <div>
identyfikatorem id
z wartością o nazwie 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 wybranego id
możesz się przenosić poprzez znacznik <a>
. W atrybucie href
dodaj nazwę identyfikatora poprzedzoną znakiem #
:
<a href="#header1">Nagłówek</a>
Po kliknięciu słowa Nagłówek
na stronie internetowej przeniesiesz się do miejsca, 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, aby 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>
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>
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 na dalszych etapach edukacji Kaskadowe Arkusze Stylów i będziesz chciał się odwoływać do odpowiednich elementów HTML.
![](https://static.zpe.gov.pl/portal/f/res-minimized/RM0zQSyYmYMEN/1712839763/v46c5nvwEG6l6Vbzp1xbK35T9v7zKASR.png)
Film dostępny pod adresem /preview/resource/RM0zQSyYmYMEN
Film prezentuje podział strony na sekcje
Poznawany przez ciebie język HTML5 wprowadził także do poprzedniej jego specyfikacji oznaczonej jako HTML 4.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, number, 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.
Poniżej przedstawiono przykładu strony internetowej, uwzględniającej nowe znaczniki i atrybuty. Wyraźnie widać, że w języku HTML5 nacisk położono na strukturę dokumentu.
Sformatowany 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="zeus.jpg" alt="Zeus Olimpijski" width="180" height="220" />
<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 ©: 2010 by <b> Autor</b> - Wszelkie prawa zastrzeżone
</div>
</footer>
</body>
</html>
Wygląd strony:
![Przedstawiono zrzut ekranu strony internetowej zawierającej pogrubione nagłówki, hiperlinki, fotografię oraz krótkie opisy.](https://static.zpe.gov.pl/portal/f/res-minimized/RHRMsvW7PLwYm/1712839768/2FgwSqqezE0icjxuwYzZlUGP5SBu71Qq.png)
Zaprezentowaną powyżej stronę internetową oraz ilustrację wyobrażenia posągu Zeusa w Olimpii z 1815 roku pobierzesz poniżej:
Załącznik zawiera archiwum zip z plikami strony internetowej. Pobierz załącznik
Jeśli chcesz poćwiczyć tworzenie stron internetowych i szukasz pomysłów, przeczytaj poniższe propozycje:
Utwórz stronę internetową zawierającą informacje o twoim hobby. Tworząc stronę, postaraj się wykorzystać przedstawione w niniejszym rozdziale informacje o języku HTML.
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.
Przedstaw w postaci witryny internetowej osiągnięcia polskich sportowców na ostatnich Mistrzostwach Europy w Lekkiej Atletyce. Na stronie głównej zawarte powinny być informacje ogólne o mistrzostwach, a na podstronach zdjęcia i teksty przybliżające poszczególnych medalistów. Do prezentacji wyników użyj tabel, a przekaz wzbogać o filmy i dźwięk.
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, a po kliknięciu ukaże się w osobnym oknie (karcie) jego powiększenie. Wykorzystaj do tego celu tabelę oraz stosowne hiperłącza.
Spróbuj swoich sił, a jeśli napotkasz problem - przypomnij sobie informacje z powyższego materiału.
Język znaczników wykorzystywany do tworzenia stron internetowych WWW. Łączy kilka technologii usprawniając działanie i wygląd stron internetowych między różnymi przeglądarkami internetowymi. W porównaniu z poprzednimi wersjami, nie posiada wstecznej kompatybilności, ale pozwala na łatwiejsze zarządzanie grafiką i multimediami przez co wyparł dotychczas używany w tym celu Adobe Flash Player.
Specjalny tekst umieszczony w nawiasach ostrych będący częścią składni języka HTML. Pozwala sterować wyglądem strony, a jego zawartość dostosowywać do własnych potrzeb.
Symbole, takie jak: spacja, tabulacja, nowa linia. Nie posiadają one graficznej reprezentacji
Sekwencje znaków zaczynające się od „&”, pełniące funkcję specjalnego kodu, za pomocą którego można wstawić w dokumencie różne niestandardowe symbole.
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 na dalszych etapach edukacji.
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 na innych etapach nauki, 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.