przykład html - Kurs HTML i CSS
HTML5 / Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>...wprowadzania danych poprzez automatyczne sugerowanie i uzupełnianie wartości na podstawie wcześniejszych wpisów lub zapisanych danych. Na przykład, w formularzu <input type="text" name="email"> przeglądarka może automatycznie wypełnić adres e-mail użytkownika, który był wcześniej używany. Jak wyłączyć autouzupełnianie w HTML? Autouzupełnianie można wyłączyć w HTML, dodając atrybut autocomplete="off" do tagu <form>, <input>, <select> lub <textarea>. Na przykład: <input...
Rozmiary CSS / Szerokość i marginesy automatyczne...który odpowiada przypadkowi, z którym się będziesz borykać. Wtedy to już nie będzie "sucha" teoria, ale od razu zastosowanie praktyczne w konkretnym przykładzie, a więc dużo łatwiej będzie to sobie przyswoić. Przed dalszą lekturą tego podrozdziału warto zwrócić uwagę na wartości domyślne, jakie przyjmują poszczególne własności, kiedy nie przypisze się im żadnych innych. Na przykład, jeżeli nie ustalimy marginesów elementu, przyjmą one wartości 0 (zero), co jest dosyć logiczne. To samo dotyczy...
- Wykazy CSS / Typ stylu wykazu {list-style-type}
Spis treści {list-style-type} Typ stylu wykazu {list-style-type} Znakowy typ stylu wykazu Alfabetyczny typ stylu wykazu Numeryczny typ stylu wykazu Typ stylu wykazu {list-style-type} selektor { list-style-type: typ } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast "typ" odpowiada za wygląd wyróżnika (markera) wykazu. Należy zamiast niego wpisać dowolny z poniżej...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...komentarzy w stylu C (długich): /* ... */. W trybie zgodności jeżeli deklaracja zawiera nierozpoznawaną wartość, zostaje pominięta w całości. Na przykład po podaniu: span { text-decoration: underline cross-out overline } tekst nie zostanie nawet podkreślony ani nadkreślony, ponieważ wartość cross-out jest nieprawidłowa. Natomiast starsze wersje Internet Explorera interpretowały deklarację do pierwszego nierozpoznanego składnika, tzn. w tym przypadku tekst zostałby pokreślony, ale nie...
- Szablon strony na DIV-ach / Responsywny szablon
...to lista najczęściej używanych szerokości ekranu, przy których zachodzą istotne zmiany w szablonie naszej strony. Istotną zmianą może być na przykład: Zmiana typu szablonu ze stałego (który zwykle może być bardziej przydatny na dużych ekranach panoramicznych) na płynny (laptopy i większe tablety) Ułożenie menu i treści w jednej kolumnie (smartfony i mniejsze tablety bądź czytniki e-booków) oraz być może zupełne ukrycie niektórych elementów strony, które mogą być mało przydatne na...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction command commandfor, input "button" popovertarget popovertargetaction>
...na stronie poza tym okienkiem.</p> </div> <button type="button" popovertarget="popover1">Otwórz/zamknij popover</button> Bardziej zaawansowany przykład z osobnym przyciskiem zamykania: <div id="popover2" popover> <p>To jest popover, który powinien się wyświetlić ponad standardową zawartością strony.</p> <p>Aby go zamknąć, kliknij przycisk:</p> <button type="button" popovertarget="popover2" popovertargetaction="hide">Zamknij popover</button> </div> <button type="button...
- Selektory specjalne CSS / Klasy selektorów <... class>
...selektor uniwersalny, który pozwala przypisać własności klasy do wszystkich elementów, którym zostanie ona nadana bez względu na typ znacznika. Na przykład jeżeli w arkuszu stylów strony została umieszczona następująca reguła: *.przyklad_uniwersalna { color: red } Dlatego teraz każdy element, któremu nadamy klasę przyklad_uniwersalna, będzie miał kolor czerwony: To jest akapit, któremu została przypisana klasa class="przyklad_uniwersalna". To jest pogrubienie, któremu została nadana klasa...
- Formularze HTML / Pole wyboru <input "checkbox">
...tzn. jakieś pole lub kilka pól tekstowych (albo dowolnych innych typów) powinny stać się niedostępne po zaznaczeniu określonej opcji wyboru. Na przykład nie ma sensu pytać użytkownika o dalsze szczegóły dotyczące jego samochodu, gdy wcześniej zaznaczy opcję, że nie posiada własnego pojazdu. <input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.checked"> <input type="text" name="nazwa2"> Po wybraniu opcji, pole tekstowe zostanie...
- Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
...{ list-style-type: nazwa; } Punkt pierwszy Punkt drugi Punkt trzeci Punkt czwarty Punkt piąty Punkt szósty Zwróć uwagę, że w powyższym przykładzie symbole muszą być ujęte w cudzysłowy (albo apostrofy), ponieważ niestandardowy identyfikator nie może się rozpoczynać od cyfry. System addytywny @counter-style {system: additive} (CSS 3 - interpretuje Firefox 33, Opera 77, Chrome 91) @counter-style typ { system: additive; additive-symbols: symbole-addytywne; } Symbole-addytywne...
- Tekst HTML / Kod poprawny semantycznie
...ale nie jest to wymagane. Są to np.: H1-H6 (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR (zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres), INS i DEL (zmiany), ABBR (skrót), DFN (definicja). Nie ma żadnej pewności, w jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik <strong>...</strong> jest pogrubiony, ale nic nie stoi na przeszkodzie...