przykład html - Kurs HTML i CSS
- Tabele HTML / Struktura tabeli HTML <table, tr, td>
...tabeli. Z kolei wewnątrz każdego znacznika TR trzeba dodać taką samą liczbę elementów TD, które tworzą pojedyncze komórki (rubryki) tabeli. Na przykład, aby utworzyć tabelę z dwoma wierszami i dwiema kolumnami, można się posłużyć następującym kodem: <table> <tr> <td>wiersz 1, kolumna 1</td> <td>wiersz 1, kolumna 2</td> </tr> <tr> <td>wiersz 2, kolumna 1</td> <td>wiersz 2, kolumna 2</td> </tr> </table>. Co to jest TD w HTML? Jest to znacznik tworzący nową komórkę w tabeli - czyli...
- HTML5 / Element edytowalny <... contenteditable>
...atrybut contenteditable="true" do dowolnego elementu HTML, co sprawi, że użytkownicy będą mogli edytować jego zawartość bezpośrednio na stronie. Na przykład: <div contenteditable="true">Edytowalny tekst</div>. To sprawia, że zawartość tego <div> stanie się edytowalna. Jaki jest pożytek z contenteditable w HTML? Atrybut contenteditable w HTML jest użyteczny do tworzenia obszarów na stronie, które użytkownicy mogą edytować bezpośrednio w przeglądarce, co jest przydatne w aplikacjach...
- 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 / 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...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...padding, border-width, border-style, border-color, border-radius} Wszystkie powyższe deklaracje można ze sobą dowolnie łączyć. Na przykład jeśli w arkuszu stylów umieścimy następującą definicję klasy: .ramka { background-color: silver; padding: 10px; border-width: 1px; border-style: solid; border-color: gray; border-radius: 5px; } a następnie w dowolnym dokumencie HTML wstawimy taki kod: <div class="ramka">To jest przykład ramki z tekstem...</div> to na stronie...
- 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...
- 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...
- 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...