przykład html - Kurs HTML i CSS
HTML5 / Element ukryty <... hidden>...Aby ukryć coś w HTML, można użyć atrybutu hidden, który sprawia, że dany element nie jest widoczny na stronie i nie zajmuje miejsca w układzie. Na przykład: <div hidden>Ukryty element</div>. Taki element pozostaje w kodzie HTML, ale nie jest wyświetlany użytkownikom. Jak zrobić ukryty tekst w HTML? Aby zrobić ukryty tekst w HTML, można użyć atrybutu hidden na elemencie zawierającym tekst. Przykład: <span hidden>Ukryty tekst</span>. Taki tekst nie będzie widoczny na stronie, ani nie...
- 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...
- 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...
- Formularze HTML / Wysłanie formularza bez programu pocztowego
...elementu select, obowiązkowo należy postawić pusty nawias kwadratowy: []. Wewnątrz tych nawiasów nie może być żadnego znaku, nawet spacji! Na przykład: <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...
Definicje / Drzewo dokumentu...Każdy element w takim drzewie ma dokładnie jednego rodzica, oprócz elementu podstawowego, czyli korzenia drzewa (root). Przykład Po wpisaniu: <html> <head> <title>...</title> </head> <body> <h1>...</h1> <p>...</p> <table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table> </body> </html> Otrzymamy następujące drzewo dokumentu: gdzie: Element TABLE jest dzieckiem elementu BODY. Element TABLE jest...
- 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...
- 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...
- Formularze HTML / Pole tekstowe <input "text">
...umieszczenia kontrolek formularza w kodzie źródłowym strony. Zwykle jest to zupełnie naturalna kolejność. Czasami jednak chcielibyśmy ją zmienić. Na przykład wyobraźmy sobie, że pola formularza są umieszczone w kilku kolumnach i wierszach tabeli. W takim przypadku kolejność aktywacji będzie następowała wierszami (poziomo), ponieważ w takiej kolejności są umieszczone komórki tabeli w kodzie źródłowym. Jeśli jednak ze względu na budowę naszego formularza logiczniej by było aktywować kontrolki...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, 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 i blokadą przypadkowego zamknięcia: <div id="popover2" popover="manual"> <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...
- 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...