J\u0119zyk HTML nie jest skomplikowany, by go opanowa\u0107, wystarczy pisa\u0107 kod. Trzymanie si\u0119 tej zasady, podparte kilkoma aktualnymi \u017ar\u00f3d\u0142ami informacji jak w3school, pozwoli opanowa\u0107 HTML.<\/p>\n
Poni\u017csze zestawienie nie b\u0119dzie zawiera\u0142o zdeprecjonowanych tag\u00f3w HTML, takich jak B czy font face albo font color. Lista jest aktualna na dzie\u0144 18.10.2020r i w razie zmian, b\u0119dzie sukcesywnie korygowana. Przejd\u017amy wi\u0119c do konkretu.<\/p>\n
<\/p>\n
Tworzy dokument HTML<\/p>\n <pre> <\/pre> Tabel nale\u017cy u\u017cywa\u0107 tylko do uk\u0142adu danych. Do formatowania tabel, dostosowania ich wygl\u0105du nale\u017cy u\u017cywa\u0107 CSS. Atrybuty tabeli nale\u017cy u\u017cywa\u0107 wy\u0142\u0105cznie w szablonach wiadomo\u015bci e-mail.<\/p>\n UWAGA! ni\u017cej wymienione atrybuty nie s\u0105 obs\u0142ugiwane przez wszystkie przegl\u0105darki<\/p>\n <\/p>\n <\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" J\u0119zyk HTML nie jest skomplikowany, by go opanowa\u0107, wystarczy pisa\u0107 kod. Trzymanie si\u0119 tej zasady, podparte kilkoma aktualnymi \u017ar\u00f3d\u0142ami informacji jak w3school, pozwoli opanowa\u0107 HTML.<\/p>\n","protected":false},"author":1,"featured_media":137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[45],"class_list":["post-135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3-javascript","tag-html5"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":0,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/137"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<html> <\/html><\/code><\/p>\n<head> <\/head><\/code>
\nOkre\u015bla tytu\u0142 i inne informacje, kt\u00f3re nie s\u0105 wy\u015bwietlane<\/p>\n<body> <\/body><\/code>
\nWyznacza widoczn\u0105 cz\u0119\u015b\u0107 dokumentu<\/p>\n<title> <\/title><\/code>
\nUmieszcza nazw\u0119 dokumentu na pasku tytu\u0142u czy tytu\u0142 zapisanej zak\u0142adki do strony<\/p>\nAtrybuty tre\u015bci (u\u017cywane tylko w biuletynach e-mailowych)<\/h2>\n
<body bgcolor =?><\/code>
\nUstawia kolor t\u0142a, u\u017cywaj\u0105c nazwy lub warto\u015bci szesnastkowej<\/p>\n<body text =?><\/code>
\nUstawia kolor tekstu, u\u017cywaj\u0105c nazwy lub warto\u015bci szesnastkowej<\/p>\n<body link =?><\/code>
\nUstawia kolor link\u00f3w, u\u017cywaj\u0105c nazwy lub warto\u015bci szesnastkowej<\/p>\n<body vlink =?><\/code>
\nUstawia kolor odwiedzanych link\u00f3w, u\u017cywaj\u0105c nazwy lub warto\u015bci szesnastkowej<\/p>\n<body alink =?><\/code>
\nUstawia kolor aktywnych link\u00f3w (podczas klikania mysz\u0105)<\/p>\nTagi tekstowe<\/h2>\n
\nTworzy wst\u0119pnie sformatowany tekst<\/p>\n<h1> <\/h1> -> <h6> <\/h6><\/code>
\nHx, czyli nag\u0142\u00f3wki . Tag tworzy nag\u0142\u00f3wki od H1 (najwi\u0119kszy) do H6(najmniejszy)<\/p>\n<tt> <\/tt><\/code>
\nTworzy tekst w stylu maszyny do pisania<\/p>\n<code> <\/code><\/code>
\nS\u0142u\u017cy do definiowania kodu \u017ar\u00f3d\u0142owego, zwykle o sta\u0142ej szeroko\u015bci<\/p>\n<cite> <\/cite><\/code>
\nTworzy cytat, zwykle pisany kursyw\u0105<\/p>\n<address> <\/address><\/code>
\nTworzy sekcj\u0119 adresow\u0105, zwykle pisan\u0105 kursyw\u0105<\/p>\n<em> <\/em><\/code>
\nPodkre\u015bla s\u0142owo (zwykle pisane kursyw\u0105)<\/p>\n<strong> <\/strong><\/code>
\nPodkre\u015bla s\u0142owo (zwykle wyt\u0142uszczone)<\/p>\nLinki, odno\u015bniki, odsy\u0142acze, hiper\u0142\u0105cza<\/h2>\n
<a href=\"URL\"> klikalny tekst, zwany anchorem lub anchor tekstem<\/a><\/code>
\nTworzy hiper\u0142\u0105cze do Uniform Resource Locator, czyli URL<\/p>\n<a href=\"mailto:EMAIL_ADDRESS\">tekst, kt\u00f3ry mo\u017cna klikn\u0105\u0107<\/a><\/code>
\nTworzy hiper\u0142\u0105cze do adresu e-mail<\/p>\n<a name=\"NAME\"><\/code>
\nTworzy tak zwan\u0105 kotwic\u0119, czyli lokalizacj\u0119 docelow\u0105 w dokumencie. Cz\u0119sto to link do odpowiedniego miejsca w obr\u0119bie tego samego dokumentu HTML<\/p>\n<a href=\"#NAME\">klikalny tekst<\/a><\/code>
\nTworzy \u0142\u0105cze do wyja\u015bnionej wy\u017cej kotwicy, czyli tej lokalizacji docelowej<\/p>\nFormatowanie<\/h2>\n
<p> <\/p><\/code>
\nTworzy nowy akapit<\/p>\n<br><\/code>
\nA Wstawia znak ko\u0144ca wiersza (powr\u00f3t karetki)<\/p>\n<blockquote> <\/blockquote><\/code>
\nUmieszcza tre\u015b\u0107 w cudzys\u0142owie – wcina tekst z obu stron<\/p>\n<div> <\/div><\/code>
\nBlok, S\u0142u\u017cy do formatowania zawarto\u015bci bloku za pomoc\u0105 CSS, zazwyczaj wzgl\u0119dem innych blok\u00f3w.<\/p>\n<span> <\/span><\/code>
\nS\u0142u\u017cy do formatowania tre\u015bci w tek\u015bcie za pomoc\u0105 CSS<\/p>\nListy<\/h2>\n
<ul> <\/ul><\/code>
\nTworzy nieuporz\u0105dkowan\u0105 list\u0119<\/p>\n<ol start=?> <\/ol><\/code>
\nTworzy uporz\u0105dkowan\u0105 list\u0119 (start = xx, gdzie xx jest liczb\u0105 zliczaj\u0105c\u0105)<\/p>\n<li> <\/li><\/code>
\nObejmuje ka\u017cdy element listy<\/p>\n<dl> <\/dl><\/code>
\nTworzy list\u0119 definicji<\/p>\n<dt><\/code>
\nPoprzedza ka\u017cdy termin definicji<\/p>\n<dd><\/code>
\nPoprzedza ka\u017cd\u0105 definicj\u0119<\/p>\nElementy graficzne<\/h2>\n
<hr><\/code>
\nWstawia poziom\u0105 lini\u0119<\/p>\n<hr size=?><\/code>
\nUstawia rozmiar (wysoko\u015b\u0107) linijki poziomej<\/p>\n<hr width=?><\/code>
\nUstawia szeroko\u015b\u0107 regu\u0142y (jako % lub bezwzgl\u0119dn\u0105 d\u0142ugo\u015b\u0107 wyra\u017can\u0105 w pixelach)<\/p>\n<hr noshade><\/code>
\nTworzy poziom\u0105 lini\u0119 bez cienia<\/p>\n<img src=\"URL\" \/><\/code>
\nDodaje obraz; jest to osobny plik znajduj\u0105cy si\u0119 pod adresem URL<\/p>\n<img src=\"URL\" height=?><\/code>
\nUstawia wysoko\u015b\u0107 obrazu w pikselach<\/p>\n<img src=\"URL\" width =?><\/code>
\nUstawia szeroko\u015b\u0107 obrazu w pikselach<\/p>\n<img src=\"URL\" alt =?><\/code>
\nUstawia tekst alternatywny dla przegl\u0105darek, kt\u00f3re nie mog\u0105 za\u0142adowa\u0107 obrazka, np. ze wzgl\u0119du na usuni\u0119cie go na serwerze<\/p>\nFormularze<\/h2>\n
<form> <\/form><\/code>
\nDeklaruje\/ definiuje formularz<\/p>\n<select multiple name=? size=?> <\/select><\/code>
\nTworzy przewijane menu. Rozmiar okre\u015bla liczb\u0119 elementy menu widoczne, zanim u\u017cytkownik b\u0119dzie musia\u0142 przewin\u0105\u0107.<\/p>\n<select name=?> <\/select><\/code>
\nTworzy menu rozwijane<\/p>\n<option><\/code>
\nUstawia opcj\u0119 wyboru w menu rozwijanym<\/p>\n<textarea name=? cols=\"x\" rows=\"y\"> <\/textarea><\/code>
\nTworzy obszar pola tekstowego. Kolumny (cols) ustawiaj\u0105 szeroko\u015b\u0107; wiersze (rows) ustawiaj\u0105 wysoko\u015b\u0107.<\/p>\n<input type=\"checkbox\" name=? warto\u015b\u0107=?><\/code>
\nTworzy pole wielokrotnego wyboru.<\/p>\n<input type=\"checkbox\" name=? value=? checked><\/code>
\nTworzy pole wyboru, kt\u00f3re jest wst\u0119pnie zaznaczone.<\/p>\n<input type=\"radio\" name=? value=?><\/code>
\nTworzy przycisk opcji.<\/p>\n<input type=\"radio\" name=? value=? checked><\/code>
\nTworzy przycisk typu radio, kt\u00f3ry jest wst\u0119pnie zaznaczony.<\/p>\n<input type= \"text\" name =? size =?><\/code>
\nTworzy jednowierszowy obszar tekstowy. Rozmiar ustawia d\u0142ugo\u015b\u0107, cale postacie.<\/p>\n<input type=\"submit\" value=\"Wy\u015blij\"><\/code>
\nTworzy przycisk wysy\u0142ania danych z formularza. Warto\u015b\u0107 (value) ustawia tekst na przycisku wysy\u0142ania.<\/p>\n<input type=\"image\" name=? src=? border=? alt=?><\/code>
\nTworzy przycisk przesy\u0142ania za pomoc\u0105 obrazu.<\/p>\n<input type = \"reset\"><\/code>
\nTworzy przycisk resetowania wype\u0142nionego formularza<\/p>\nTabele<\/h2>\n
<table> <\/table><\/code>
\nTworzy tabel\u0119<\/p>\n<tr> <\/tr><\/code>
\nWyznacza ka\u017cdy wiersz w tabeli<\/p>\n<td> <\/td><\/code>
\nWyznacza ka\u017cd\u0105 kom\u00f3rk\u0119 w rz\u0119dzie<\/p>\n<th> <\/th><\/code>
\nUstawia nag\u0142\u00f3wek tabeli (normalna kom\u00f3rka pogrubiona, tekst wy\u015brodkowany)<\/p>\nAtrybuty tagu wej\u015bciowego HTML5<\/h2>\n
<input type=\"email\" name=?><\/code>
\nUstawia jednowierszowe pole tekstowe dla adres\u00f3w e-mail<\/p>\n<input type=\"url\" name=?><\/code>
\nUstawia jednowierszowe pole tekstowe dla adres\u00f3w URL<\/p>\n<input type=\"number\" name=?><\/code>
\nUstawia jednowierszowe pole tekstowe dla liczby<\/p>\n<input type=\"range\" name=?><\/code>
\nUstawia jednowierszowe pole tekstowe dla zakresu liczb<\/p>\n<input type=\"date\/month\/week\/time\" name =?><\/code>
\nUstawia jednowierszowe pole tekstowe z kalendarzem wy\u015bwietlanie daty \/ miesi\u0105ca \/ tygodnia \/ godziny<\/p>\n<input type=\"search\" name =?><\/code>
\nUstawia jednowierszowe pole tekstowe do wyszukiwania<\/p>\n<input type=\"color\" name =?><\/code>
\nUstawia jednowierszowe pole tekstowe do wybierania koloru<\/p>\nAtrybuty tabeli (u\u017cywaj tylko do biuletyn\u00f3w e-mailowych)<\/h2>\n
<table border=?><\/code>
\nUstawia szeroko\u015b\u0107 obramowania wok\u00f3\u0142 kom\u00f3rek tabeli<\/p>\n<table cellspacing=?><\/code>
\nUstawia ilo\u015b\u0107 miejsca mi\u0119dzy kom\u00f3rkami tabeli<\/p>\n<table cellpadding=?><\/code>
\nUstawia odst\u0119p mi\u0119dzy obramowaniem kom\u00f3rki a jej zawarto\u015bci\u0105<\/p>\n<table width=?><\/code>
\nUstawia szeroko\u015b\u0107 tabeli w pikselach lub w procentach<\/p>\n<tr align=?><\/code>
\nUstawia wyr\u00f3wnanie kom\u00f3rek w wierszu (left\/ center\/ right)<\/p>\n<td align=?><\/code>
\nUstawia wyr\u00f3wnanie kom\u00f3rek (left\/ center\/ right)<\/p>\n<tr valign=?><\/code>
\nUstawia wyr\u00f3wnanie pionowe kom\u00f3rek w wierszu(top\/middle\/bottom)<\/p>\n<td valign=?><\/code>
\nUstawia wyr\u00f3wnanie pionowe kom\u00f3rki (top\/middle\/bottom)<\/p>\n<td rowspan=?><\/code>
\nUstawia liczb\u0119 wierszy, kt\u00f3re powinna obejmowa\u0107 kom\u00f3rka (domy\u015blnie = 1)<\/p>\n<td colspan=?><\/code>
\nUstawia liczb\u0119 kolumn, kt\u00f3re powinna obejmowa\u0107 kom\u00f3rka<\/p>\n<td nowrap><\/code>
\nAtrybut definiuje blokowanie prze\u0142amywanie akapit\u00f3w<\/p>\n