Przykłady HTML
W tym rozdziale znajdziesz wykaz wszystkich przykładów kodu źródłowego, które znajdują się w kategorii HTML. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.
HTML dla zielonych
Jak wygląda typowy dokument HTML? Co to są podstrony?<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Tu wpisz opis zawartości strony">
<title>Tu wpisz tytuł strony</title>
</head>
<body>
Tu wpisuje się treść strony
</body>
</html>
Co to są znaczniki HTML?<b>Ten tekst zostanie wytłuszczony.</b>
<b>
Ten tekst zostanie wytłuszczony.
</b>
W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?To jest pierwsza linia...<br>
a to jest druga linia.
To jest pierwsza linia...<br><br><br>
...a to jest kolejna linia.
W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Jak wyśrodkować lub wyjustować tekst? Co to są atrybuty HTML?<p style="text-align: left">wyrównanie do lewej...</p>
<p style="text-align: right">wyrównanie do prawej...</p>
<p style="text-align: center">wyśrodkowanie...</p>
<p style="text-align: justify">justowanie, czyli wyrównanie do obu marginesów jednocześnie...
justowanie, czyli wyrównanie do obu marginesów jednocześnie...
justowanie, czyli wyrównanie do obu marginesów jednocześnie...
justowanie, czyli wyrównanie do obu marginesów jednocześnie...
justowanie, czyli wyrównanie do obu marginesów jednocześnie...</p>
W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?<b>Ten tekst jest pogrubiony (wytłuszczony)</b>
W jaki sposób pochylić tekst na stronie WWW (kursywa)?<i>Ten tekst jest napisany pismem pochylonym, czyli kursywą</i>
W jaki sposób podkreślić tekst na stronie WWW?<u>Ten tekst jest podkreślony</u>
W jaki sposób przekreślić tekst na stronie WWW?<s>Ten tekst jest przekreślony</s>
W jaki sposób zmienić rozmiar czcionki na stronie WWW?<span style="font-size: xx-small">Czcionka o rozmiarze xx-small</span>
<span style="font-size: x-small">Czcionka o rozmiarze x-small</span>
<span style="font-size: small">Czcionka o rozmiarze small</span>
<span style="font-size: medium">Czcionka o rozmiarze medium</span>
<span style="font-size: large">Czcionka o rozmiarze large</span>
<span style="font-size: x-large">Czcionka o rozmiarze x-large</span>
<span style="font-size: xx-large">Czcionka o rozmiarze xx-large</span>
W jaki sposób zmienić kolor czcionki na stronie WWW?<span style="color: red">Ten tekst został napisany czcionką koloru czerwonego</span>
W jaki sposób zmienić rodzaj czcionki na stronie WWW?<span style="font-family: Arial, sans-serif">Czcionka Arial</span>
<span style="font-family: 'Courier New', monospace">Czcionka 'Courier New'</span>
<span style="font-family: 'Times New Roman', serif">Czcionka 'Times New Roman'</span>
<span style="font-family: Verdana, sans-serif">Czcionka Verdana</span>
W jaki sposób zmienić wygląd tekstu na stronie WWW?<p style="text-align: center"><span style="font-size: large; color: red"><b><i><u>
To jest jakiś tekst
</u></i></b></span></p>
Jak wstawić indeks górny i dolny przy tekście?indeks<sup>górny</sup>
indeks<sub>dolny</sub>
Jak dodać na stronie WWW poziomą linię?<p>Akapit...</p>
<p>Akapit...</p>
<hr>
<p>Akapit...</p>
<p>Akapit...</p>
Czego unikać, aby Twoja strona WWW nie odstraszała internautów?<header style="text-align: center">Tutaj można umieścić logo serwisu</header>
<nav style="width: 300px; float: left; overflow: hidden">
Tu umieszcza się odsyłacze spisu treści
</nav>
<article style="margin-left: 320px">
Tu wpisuje się treść strony
</article>
<footer style="text-align: center; clear: both">Tutaj można umieścić stopkę serwisu</footer>
Potrzebujesz na jutro gotowej, profesjonalnie wyglądającej strony HTML (gotowiec) i to zupełnie za darmo?<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Nagłówek i treść HTML
Jak określić w jakim języku (mówionym) jest napisana strona WWW? Jak stworzyć serwis z wieloma wersjami językowymi?<link rel="alternate" hreflang="pl" href="https://www.example.com/pl/index.html">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/index.html">
<link rel="alternate" hreflang="pl" href="https://www.example.com/pl/">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/">
Gdzie wpisać autora strony WWW? Jak wskazać link do strony autora aktualnego artykułu?<meta name="author" content="Jan Kowalski">
<link rel="author" href="mailto:jan.kowalski@example.com">
Jak wstawić informację o edytorze użytym przy tworzeniu strony WWW?<meta name="generator" content="MetBod (https://www.kurshtml.edu.pl/generatory/metbod.html)">
W jaki sposób ułatwić indeksowanie (wyszukanie) strony WWW przez roboty wyszukiwarek sieciowych (Google) lub sprawić, aby strona nie była odnajdowana przez wyszukiwarki?<meta name="robots" content="unavailable_after: 2023-06-04">
<meta name="robots" content="nofollow, noarchive">
<meta name="googlebot" content="noindex, nofollow">
W jaki sposób przeskalować rozmiar strony WWW? Jak przygotować stronę RWD (Responsive Web Design)?<meta name="viewport" content="width=device-width, initial-scale=1">
W jaki sposób wskazać link do wersji mobilnej (smartfon, tablet) serwisu?<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">
W jaki sposób wstawić ikonę obok adresu strony WWW?
<link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/vnd.microsoft.icon">
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon48.png" sizes="48x48" type="image/png">
<link rel="icon" href="favicon72.png" sizes="72x72" type="image/png">
<link rel="icon" href="favicon96.png" sizes="96x96" type="image/png">
<link rel="icon" href="favicon144.png" sizes="144x144" type="image/png">
<link rel="icon" href="favicon192.png" sizes="192x192" type="image/png">
<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">
W jaki sposób wskazać licencję odnoszącą się do aktualnej strony? Jak oznaczyć prawa autorskie zdjęć umieszczonych w dokumencie? Gdzie podawać dokument opisujący przetwarzanie danych osobowych (RODO, GDPR)? Jak wskazać regulamin serwisu?<figure>
<img src="zdjecie.jpg" alt="Tatry">
<figcaption>Tatry<br><small>© Jan Kowalski (<a rel="license" href="https://creativecommons.org/licenses/by/4.0/deed.pl">CC BY</a>)</small></figraption>
<figure>
Jak udostępnić czytelnikom subskrypcję kanału informacyjnego RSS (Really Simple Syndication) lub Atom, zawierającego nowości w serwisie?<link rel="alternate" title="Kurs HTML - darmowe szkolenie: tworzenie stron internetowych" href="https://www.kurshtml.edu.pl/rss/rss.php?id=1" type="application/rss+xml">
Tekst HTML
Jak wstawić tytuł (nagłówek) na stronie WWW? W jaki sposób wyświetlić "dymek narzędziowy" po wskazaniu tekstu myszką?<h1>1. Dział</h1>
(...)
<h2>1.1. Rozdział</h2>
(...)
<h2>1.2. Rozdział</h2>
(...)
<h3>1.2.1. Podrozdział</h3>
(...)
<h1>2. Dział</h1>
(...)
W jaki sposób podkreślić tekst na stronie WWW?<u style="color: red"><span style="color: black">To jest czarne podkreślenie czerwoną linią</span></u>
W jaki sposób przekreślić tekst na stronie WWW?<s style="color: red"><span style="color: black">To jest czarne przekreślenie czerwoną linią</span></s>
Jak powinno się wprowadzać odniesienia do źródła?Więcej informacji znajduje się w opracowaniu
<cite>HTML 4.01 Specification</cite>
Jak powinno się oznaczać krótkie cytaty na stronach internetowych?Albert Einstein powiedział:
<q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.</q>
Jak wprowadzić dłuższy cytat?<blockquote cite="http://www.w3.org/">
<p>The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.</p>
</blockquote>
Jak powinno się oznaczać skróty i akronimy?<abbr title="profesor">prof.</abbr>
<abbr lang="en" title="World Wide Web">WWW</abbr>
Jak wprowadzić na stronę WWW słownik (listę definicyjną)?<dl>
Słownik...
<dt>Termin</dt>
<br>
<dd>Definicja</dd>
<br>
</dl>
<dl>
<dt>Zamek</dt>
<dd>Urządzenie do zamykania drzwi za pomocą klucza.</dd>
<dd>Zapięcie wszywane do odzieży.</dd>
<dd>Warowna budowla mieszkalna.</dd>
<dt>Auto</dt>
<dt>Samochód</dt>
<dd>Dwuśladowy pojazd mechaniczny napędzany silnikiem.</dd>
</dl>
Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?<ul>
Wykaz...
<li>Punkt pierwszy</li>
<br>
<li>Punkt drugi</li>
<br>
</ul>
<ul style="color: red">
<li><span style="color: black">Punkt pierwszy</span></li>
<li><span style="color: black">Punkt drugi</span></li>
<li><span style="color: black">Punkt trzeci</span></li>
</ul>
<ul>
<li style="color: red"><span style="color: black">Punkt pierwszy</span></li>
<li style="color: green"><span style="color: black">Punkt drugi</span></li>
<li style="color: blue"><span style="color: black">Punkt trzeci</span></li>
</ul>
<p style="text-align: center">
Tu rozpoczyna się akapit...
<ul>
<li>Punkt pierwszy wykazu</li>
<li>Punkt drugi wykazu...</li>
</ul>
...tu powinien skończyć się akapit.
</p>
W jaki sposób zrobić listę punków i podpunktów (wykaz)?<ol type="I">
<li>Punkt pierwszy
<ol type="1">
<li>Punkt I.1
<ol type="a">
<li>Punkt I.1.a
<ul>
<li>Punkt I.1.a.(1)</li>
<li>Punkt I.1.a.(2)</li>
</ul>
</li>
<li>Punkt I.1.b</li>
</ol>
</li>
<li>Punkt I.2</li>
</ol>
</li>
<li>Punkt drugi</li>
</ol>
W jaki sposób ukryć przed użytkownikiem wybrany tekst?<!-- Ten tekst
zostanie zignorowany
przez przeglądarkę -->
<!-- zewnętrzny <!-- komentarz wewnętrzny --> zewnętrzny -->
<!--<p>
Ten fragment pokazuje przykład,
w jaki sposób można używać <b>komentarz HTML</b>...
</p>-->
<!--<p>
Ten fragment pokazuje przykład,
w jaki sposób nie można używać <b>komentarza HTML</b>...
<!-- Ten komentarz jest niedozwolony -->
Ciąg dalszy...
</p>-->
Jak zablokować wybrane fragmenty treści na stronie przed pojawianiem się w wynikach wyszukiwania Google?<div data-nosnippet>Cała zawartość tego znacznika nie powinna pojawić się w wynikach wyszukiwania.</div>
<p>Ten tekst może pojawić się w wynikach wyszukiwania<span data-nosnippet>, ale ten już nie</span>.</p>
Odsyłacze HTML
W jaki sposób przenieść użytkownika do jednej z podstron serwisu?<a href="../index.html" title="Do strony głównej">Strona główna</a>
<a target="_blank" href="adres">opis</a>
Jak stworzyć formę elektronicznej zakładki na stronie?<a id="nazwa_etykiety"></a>
<a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a>
<a id="nazwa_etykiety">(opis etykiety)</a>
(...)
<a href="#nazwa_etykiety">opis odsyłacza</a>
<a href="ścieżka dostępu lub adres internetowy#nazwa_etykiety">opis odsyłacza</a>
Jak zablokować indeksowanie wybranych odnośników ze strony przez wyszukiwarki sieciowe?<a href="http://adres strony" rel="ugc nofollow">...</a>
Tabele HTML
Jak wstawić tabelkę na stronę WWW?<table>
Tabela...
<tr>
<b><td>...</td></b> <td>...</td>
</tr>
<br>
<tr>
<b><td>...</td> <td>...</td></b>
</tr>
<br>
</table>
<table>
<tr>
<td>komórka1</td> <td>komórka2</td>
</tr>
<tr>
<td>komórka3</td> <td>komórka4</td>
</tr>
</table>
<table>
<tr>
<td>komórka1</td>
<td>komórka2</td>
</tr>
<tr>
<td>komórka3</td>
<td>komórka4</td>
</tr>
</table>
W jaki sposób połączyć kilka komórek tabeli w jedną dużą?<table>
<tr>
<td colspan="2">komórka1+2</td>
</tr>
<tr>
<td>komórka3</td> <td>komórka4</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2">komórka1+3</td> <td>komórka2</td>
</tr>
<tr>
<td>komórka4</td>
</tr>
</table>
W jaki sposób połączyć kilka wierszy tabeli w grupę funkcjonalną? Jak wydzielić nagłówek i stopkę tabeli?<table>
<tbody style="background-color: red">
<tr>
<td>komórka1</td> <td>komórka2</td> <td>komórka3</td>
</tr>
<tr>
<td>komórka4</td> <td>komórka5</td> <td>komórka6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>komórka7</td> <td>komórka8</td> <td>komórka9</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>A</th> <th>B</th> <th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<td>a</td> <td>b</td> <td>c</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>komórka1</td> <td>komórka2</td> <td>komórka3</td>
</tr>
<tr>
<td>komórka4</td> <td>komórka5</td> <td>komórka6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>komórka7</td> <td>komórka8</td> <td>komórka9</td>
</tr>
<tr>
<td>komórka10</td> <td>komórka11</td> <td>komórka12</td>
</tr>
<tr>
<td>komórka13</td> <td>komórka14</td> <td>komórka15</td>
</tr>
</tbody>
</table>
W jaki sposób połączyć kilka kolumn tabeli w grupę funkcjonalną?<table>
<colgroup span="1" style="background-color: red"></colgroup>
<tr>
<td>komórka1</td> <td>komórka2</td> <td>komórka3</td>
</tr>
<tr>
<td>komórka4</td> <td>komórka5</td> <td>komórka6</td>
</tr>
</table>
<table>
<colgroup span="3" style="background-color: green">
<col style="background-color: red">
<col span="2">
</colgroup>
<tr>
<td>komórka1</td> <td>komórka2</td> <td>komórka3</td> <td>komórka4</td>
</tr>
</table>
Multimedia HTML
Jak wstawić obrazek (grafikę, zdjęcie, fotografię, ilustrację) na stronę WWW?<img src="obrazek.jpg" alt="..." width="300" height="150">
Jak osadzić na stronie WWW plik multimedialny: animację, film, muzykę (wav, mid, avi, ra, mp3, mpg, mov, asf i inne)?<a href="dokument.pdf">...</a>
Widżety HTML
Co zrobić, aby strony z menu wczytywały się do ramki umieszczonej bezpośrednio w treści?<a href="javascript:void(0)" onclick="parent.nazwaramki1.location.href = 'adres1.html'; parent.nazwaramki2.location.href = 'adres2.html'; return false">...</a>
Jak umieścić menu serwisu w osobnym pliku, tak aby w przypadku modyfikacji nie trzeba było go zmieniać na każdej podstronie?<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Tytuł strony</title>
</head>
<body>
<ul>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
</ul>
Właściwa zawartość strony...
</body>
</html>
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<?php include $_SERVER['SCRIPT_FILENAME'].'.html'; ?>
</head>
<body>
<ul>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
</ul>
</body>
</html>
<?php include $_SERVER['DOCUMENT_ROOT'].'/head.php'; ?>
Właściwa zawartość strony...
<?php include $_SERVER['DOCUMENT_ROOT'].'/foot.php'; ?>
<title>Tytuł strony</title>
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<!--#include virtual="${SCRIPT_NAME}.html" -->
</head>
<body>
<ul>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
</ul>
</body>
</html>
<!--#include virtual="/head.shtml" -->
Właściwa zawartość strony...
<!--#include virtual="/foot.shtml" -->
<title>Tytuł strony</title>
Formularze HTML
Jak wstawić formularz na stronę WWW? Co można uzyskać obsługując formularze przez skrypty? W jaki sposób sprawdzić, czy użytkownik wypełnił wszystkie pola formularza?<form action="..." onsubmit="alert(this.tekst.value); return false">
<input type="text" name="tekst"><input type="submit" value="OK">
</form>
<form action="mailto:adres e-mail" method="post" onsubmit="if (this.tekst2.value == '') { alert('Zanim wyślesz formularz, musisz wypełnić pole tekstem!'); return false }">
<input type="text" name="tekst2"><input type="submit" value="OK">
</form>
<script>
function sprawdz(formularz)
{
for (i = 0; i < formularz.length; i++)
{
var pole = formularz.elements[i];
if (!pole.disabled && !pole.readonly && (pole.type == "text" || pole.type == "password" || pole.type == "textarea") && pole.value == "")
{
alert("Proszę wypełnić wszystkie pola!");
return false;
}
}
return true;
}
</script>
<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="if (sprawdz(this)) return true; return false">
<div>
<input type="text" name="a"><br>
<input type="password" name="b"><br>
<textarea name="c" cols="20" rows="10"></textarea><br>
<input type="submit" value="OK">
</div>
</form>
Jak wprowadzić pole tekstowe, w którym można wpisać np. imię i nazwisko? W jaki sposób zablokować pole przed wpisywaniem? Jak zmienić kolejność aktywowania elementów przy pomocy tabulatora?<input type="text" name="nazwa" tabindex="n">
<table>
<tr>
<td><input type="text" name="nazwa1" tabindex="1"></td>
<td><input type="text" name="nazwa4" tabindex="4"></td>
<td><input type="text" name="nazwa7" tabindex="7"></td>
</tr>
<tr>
<td><input type="text" name="nazwa2" tabindex="2"></td>
<td><input type="text" name="nazwa5" tabindex="5"></td>
<td><input type="text" name="nazwa8" tabindex="8"></td>
</tr>
<tr>
<td><input type="text" name="nazwa3" tabindex="3"></td>
<td><input type="text" name="nazwa6" tabindex="6"></td>
<td><input type="text" name="nazwa9" tabindex="9"></td>
</tr>
</table>
Jak wprowadzić pole, w którym można wpisać hasło?<form action="?" onsubmit="window.location.href = this.password.value + '.html'; return false">
<input type="password" name="password">
<input type="submit" value="OK">
</form>
Jak dać użytkownikowi możliwość wyboru kilku bądź jednej odpowiedzi? W jaki sposób zaznaczyć pole wyboru po kliknięciu tekstu opisu? W jaki sposób zdefiniować klawisz skrótu? Jak odblokować pole formularza dopiero po wybraniu określonej opcji?<label><input type="checkbox" name="nazwa" value="wartość">
To jest etykieta pola obok</label>
<input type="checkbox" name="nazwa" value="wartość" id="pole1">
<label for="pole1">To jest etykieta pola obok</label>
<input type="checkbox" name="nazwa" value="wartość" accesskey="a">Pole <u>a</u> (wciśnij Alt+A; jeśli używasz opery, wciśnij Shift+Esc+A)
<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = !this.checked">
<input type="text" name="nazwa2" disabled>
<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = !this.checked">
<input type="text" name="nazwa2" disabled>
<input type="text" name="nazwa3" disabled>
<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.checked">
<input type="text" name="nazwa2">
<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = this.checked">
<input type="text" name="nazwa2">
<input type="text" name="nazwa3">
<input type="checkbox" name="nazwa" value="wartość" onclick="document.getElementById('identyfikator').style.display = this.checked ? 'block' : 'none'; this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = !this.checked">
<div id="identyfikator" style="display: none">
<input type="text" name="nazwa2" disabled>
<input type="text" name="nazwa3" disabled>
</div>
<input type="checkbox" name="nazwa" value="wartość" onclick="document.getElementById('identyfikator').style.display = this.checked ? 'none' : 'block'; this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = this.checked">
<div id="identyfikator">
<input type="text" name="nazwa2">
<input type="text" name="nazwa3">
</div>
W jaki sposób umożliwić użytkownikowi wybranie pliku ze swojego dysku lokalnego?<input type="file" multiple>
<input type="file" accept="image/jpeg,image/gif">
<input type="file" accept="image/*">
<input type="file" accept=".jpeg,.jpg,.jpe">
<input type="file" name="..." accept="image/jpeg,audio/*,.gif">
Jak wysłać formularz?<form action="mailto:e-mail" method="post">
<input type="submit" name="opcja" value="Opcja 1">
<input type="submit" name="opcja" value="Opcja 2">
<input type="submit" name="opcja" value="Opcja 3">
</form>
<form action="mailto:e-mail" method="post">
<input type="radio" name="opcja" value="Opcja 1">
<input type="radio" name="opcja" value="Opcja 2">
<input type="radio" name="opcja" value="Opcja 3">
<input type="submit" value="wyślij">
</form>
<form action="?akcja=kasowanie" method="post">
<input type="hidden" name="id" value="1">
<p>Czy na pewno chcesz to zrobić?</p>
<input type="submit" name="potwierdzenie" value="Tak">
<input type="submit" name="potwierdzenie" value="Nie">
</form>
Jak wyczyścić wszystkie wprowadzone dane w formularzu? W jaki sposób zapobiec omyłkowemu wyczyszczeniu danych formularza?<form action="adres" method="post" onreset="if (!confirm('Czy na pewno chcesz wyczyścić cały formularz?')) return false">...</form>
Co zrobić, aby formularze były przesyłane w formie odszyfrowanej, którą łatwiej później odczytać? Jak usunąć polskie znaki z formularza?<select name="nazwa">
<option value="acelnoszz">ąćęłńóśźż</option>
<option value="ACELNOSZZ">ĄĆĘŁŃÓŚŹŻ</option>
</select>
<script>
function usun_pl(formularz)
{
for (i = 0; i < formularz.length; i++)
{
var pole = formularz.elements[i];
if (pole.type != "text" && pole.type != "textarea") continue;
var str = "";
for (j = 0; j < pole.value.length; j++)
{
switch (pole.value.charAt(j))
{
case "ą": str += "a"; break;
case "ć": str += "c"; break;
case "ę": str += "e"; break;
case "ł": str += "l"; break;
case "ń": str += "n"; break;
case "ó": str += "o"; break;
case "ś": str += "s"; break;
case "ź": str += "z"; break;
case "ż": str += "z"; break;
case "Ą": str += "a"; break;
case "Ć": str += "c"; break;
case "Ę": str += "e"; break;
case "Ł": str += "l"; break;
case "Ń": str += "n"; break;
case "Ó": str += "o"; break;
case "Ś": str += "s"; break;
case "Ź": str += "z"; break;
case "Ż": str += "z"; break;
default: str += pole.value.charAt(j); break;
}
}
pole.value = str;
}
}
</script>
<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="usun_pl(this)">
(Pola formularza)
</form>
<form action="..." accept-charset="windows-1250">...</form>
Jak wygląda przykładowy formularz HTML?<form action="mailto:twój_adres_poczty@domena" method="post" enctype="text/plain"><div>
<!-- Podstawowe pole tekstowe -->
<input name="Imię">Podaj swoje imię<br>
<input name="Nazwisko">Podaj swoje nazwisko
<!-- Pole typu RADIO -->
<p>Podaj swoją płeć:</p>
<input type="radio" name="Płeć" value="Kobieta">Kobieta
<input type="radio" name="Płeć" value="Mężczyzna">Mężczyzna
<!-- Pole typu RADIO -->
<p>Ile masz lat?</p>
<input type="radio" name="Wiek" value="mniej niż 15">mniej niż 15<br>
<input type="radio" name="Wiek" value="15-19">15-19<br>
<input type="radio" name="Wiek" value="20-29">20-29<br>
<input type="radio" name="Wiek" value="30-39">30-39<br>
<input type="radio" name="Wiek" value="40-60">40-60<br>
<input type="radio" name="Wiek" value="więcej niż 60">więcej niż 60
<!-- Pole typu CHECKBOX -->
<p>Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?</p>
<input type="checkbox" name="Muzyka" value="Rock">Rock<br>
<input type="checkbox" name="Muzyka" value="Heavy Metal">Heavy Metal<br>
<input type="checkbox" name="Muzyka" value="Pop">Pop<br>
<input type="checkbox" name="Muzyka" value="Techno">Techno<br>
<input type="checkbox" name="Muzyka" value="Muzyka poważna">Muzyka poważna<br>
<input type="checkbox" name="Muzyka" value="Inna">Inna (podaj jaka):
<input name="Muzyka">
<!-- Lista rozwijalna (typ podstawowy) z zaznaczoną opcją domyślną -->
<p>Jakiej przeglądarki internetowej używasz?</p>
<select name="Przeglądarka">
<option selected>Chrome</option>
<option>Opera</option>
<option>Firefox</option>
<option>Edge</option>
<option>Inna</option>
</select>
<!-- Lista rozwijalna (typ rozszerzony) z zaznaczoną opcją domyślną i zmniejszoną wysokością -->
<p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p>
<select name="System operacyjny" multiple size="3">
<option selected>Windows</option>
<option>DOS</option>
<option>Linux</option>
<option>Inny</option>
</select>
<!-- Pole komentarza (o powiększonych rozmiarach oraz z tekstem domyślnym) -->
<p>Podaj swój komentarz:</p>
<textarea name="Komentarz" cols="50" rows="10">Proszę, wpisz tutaj jakiś komentarz...</textarea>
<br><br><br>
<!-- Przycisk WYŚLIJ -->
<input type="submit" value="Wyślij formularz">
<!-- Przycisk WYCZYŚĆ DANE -->
<input type="reset" value="Wyczyść dane">
</div></form>
<form action="mailto:e-mail" method="post" enctype="text/plain"><div>
<table style="background-color: silver">
<tr>
<td>Imię:</td><td><input type="text" name="imie"></td>
</tr>
<tr>
<td>Nazwisko:</td><td><input type="text" name="nazwisko"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center"><br>
<input type="submit" value="Wyślij">
<input type="reset" value="Wyczyść">
</td>
</tr>
</table>
</div></form>
W jaki sposób zabezpieczyć się przed błędem w niektórych systemach operacyjnych, uniemożliwiającym wysyłanie formularzy pocztowych?<script>
// www.kurshtml.edu.pl
function mail_form(f)
{
function url_encode(text)
{
return text.replace(/%/g, '%25').replace(/\?/g, '%3F').replace(/=/g, '%3D').replace(/&/g, '%26').replace(/#/g, '%23').replace(/\r/g, '%0D').replace(/\n/g, '%0A');
}
for (var i = 0, text = ''; i < f.elements.length; i++)
{
if (f.elements[i].name == '' || f.elements[i].disabled) continue;
switch (f.elements[i].type)
{
case 'radio':
case 'checkbox':
if (f.elements[i].checked) text += url_encode(f.elements[i].name) + '=' + url_encode(f.elements[i].value) + "%0A";
break;
case 'select':
case 'select-one':
case 'select-multiple':
for (var j = 0; j < f.elements[i].options.length; j++)
{
if (f.elements[i].options[j].selected) text += url_encode(f.elements[i].name) + '=' + url_encode(f.elements[i].options[j].value != '' ? f.elements[i].options[j].value : f.elements[i].options[j].text) + "%0A";
}
break;
default:
text += url_encode(f.elements[i].name) + '=' + url_encode(f.elements[i].value) + "%0A";
break;
}
}
window.location.href = f.action + (f.action.indexOf('?') == -1 ? '?' : '&') + 'body=' + text;
}
</script>
<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="mail_form(this); return false">
(Pola formularza)
</form>
<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="usun_pl(this); mail_form(this); return false">
(Pola formularza)
</form>
Jak wysłać formularz na wskazany adres e-mail bez używania programu pocztowego?<input name="captcha" style="display: none">
<p>Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?</p>
<input type="checkbox" name="Muzyka[]" value="Rock">Rock<br>
<input type="checkbox" name="Muzyka[]" value="Heavy Metal">Heavy Metal<br>
<input type="checkbox" name="Muzyka[]" value="Pop">Pop<br>
<input type="checkbox" name="Muzyka[]" value="Techno">Techno<br>
<input type="checkbox" name="Muzyka[]" value="Muzyka poważna">Muzyka poważna<br>
<input type="checkbox" name="Muzyka[]" value="Inna">Inna (podaj jaka):
<input name="Muzyka[]">
<p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p>
<select name="System operacyjny[]" multiple size="3">
<option selected>Dos</option>
<option>Windows</option>
<option>Linux</option>
<option>Inny</option>
</select>
Promocja strony WWW
Jak podwyższyć pozycję strony WWW w wyszukiwarkach internetowych?<meta name="keywords" content="słowa kluczowe">
<meta name="description" content="Opis">
<title>Tytuł</title>
XHTML
Jak dostosować dokument HTML do standardu XHTML?<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<title>Tytuł dokumentu</title>
</head>
<body>
<p>Przejdź do <a href="http://example.org/">example.org</a>.</p>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
Czym różni się HTML 4 od XHTML 1.0?Poprawnie: <p>wewnątrz paragrafu jest <em>emfaza</em>.</p>
Niepoprawnie: <p>wewnątrz paragrafu jest <em>emfaza.</p></em>
Poprawnie: <p>tutaj jest paragraf.</p><p>tutaj jest następny paragraf.</p>
Niepoprawnie: <p>tutaj jest paragraf.<p>tutaj jest następny paragraf.
Poprawnie: <td rowspan="3">
Niepoprawnie: <td rowspan=3>
Poprawnie: <dl compact="compact">
Niepoprawnie: <dl compact>
Poprawnie: <br/><br /><hr></hr>
Niepoprawnie: <br><hr>
<script type="text/javascript">
<![CDATA[
...zawartość skryptu (może zawierać bezpośrednio znaki: <, >, &)...
]]>
</script>
<style type="text/css">
/* <![CDATA[ */
...zawartość arkusza CSS (może zawierać bezpośrednio znaki: <, >, &)...
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
...zawartość skryptu (może zawierać bezpośrednio znaki: <, >, &)...
// </script>
albo
<script type="text/javascript">
/* <![CDATA[ */
...zawartość skryptu (może zawierać bezpośrednio znaki: <, >, &)...
/* ]]> */
</script>
<a id="identyfikator" name="identyfikator">...</a>
Poprawnie: <a href="http://example.org/index.php?var1=1&var2=2">...</a>
Niepoprawnie: <a href="http://example.org/index.php?var1=1&var2=2">...</a>
<?xml-stylesheet href="zewnetrzny.css" type="text/css"?>
<?xml-stylesheet href="#internalStyle" type="text/css"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<title>Przykład wewnętrznego arkusza CSS</title>
<style type="text/css" id="internalStyle">
code {
color: green;
font-family: monospace;
font-weight: bold;
}
</style>
</head>
<body>
<p>
To jest tekst, który używa naszego
<code>wewnętrznego arkusza stylów</code>.
</p>
</body>
</html>
Co to są typy MIME dokumentów i dlaczego są tak ważne w języku XHTML? W jaki sposób automatycznie dobrać typ MIME, tak aby nie powodować błędów w starszych przeglądarkach?<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<?php require_once 'mime/mime.inc.php'; ?>
<title>Tytuł dokumentu</title>
</head>
<body>
<p>Treść dokumentu...</p>
</body>
</html>
<?php
// Dodatkowe arkusze CSS rozdzielone spacjami:
define('CSS', 'css/style3.css css/style4.css');
require_once 'mime/mime.inc.php';
?>
<title>Tytuł dokumentu</title>
</head>
<body>
<p>Treść dokumentu...</p>
</body>
</html><?php
// Dodatkowe arkusze CSS rozdzielone spacjami:
define('CSS', 'css/style.css css/print.css"print');
require_once 'mime/mime.inc.php';
?>
<title>Tytuł dokumentu</title>
</head>
<body>
<p>Treść dokumentu...</p>
</body>
</html><p>To jest przykład błędnego kodu XML: wewnątrz paragrafu jest <em>emfaza.</p></em>
</body> </html>
</body> </html>