przykład html - Kurs HTML i CSS
HTML5 / Asynchroniczne ładowanie skryptów <script src async>...Co to jest skrypt src w HTML? Skrypt src w HTML to atrybut tagu <script>, który określa ścieżkę do pliku JavaScript, który ma być załadowany. Na przykład: <script src="script.js"></script>. Używając src, zamiast pisać kod JavaScript bezpośrednio w tagu <script>, możemy załadować kod z zewnętrznego pliku. Na czym polega asynchroniczność? Asynchroniczność polega na wykonywaniu zadań niezależnie od głównego wątku aplikacji, co pozwala na równoległe przetwarzanie i unikanie blokowania...
Przeglądarka zdjęć...miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku przegladarka_zdjec.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod: <script> var przegladarka_zdjec = new PrzegladarkaZdjec('przegladarka_zdjec', new Array( new Array('zdjęcie', 'Tytuł', 'Opis'), new Array('zdjęcie', 'Tytuł', 'Opis'), new Array('zdjęcie', 'Tytuł', 'Opis') )); </script> zdjęcie Lokalizacja pliku zdjęcia Tytuł Tytuł zdjęcia Opis Szerszy opis zdjęcia (opcjonalnie)...
Szablon strony na DIV-ach / Płynny szablon...na wstępie, sprawimy, że kolumna treści dopasuje się do rozmiarów okna przeglądarki, a więc również do rozdzielczości ekranu (wszystkie przykłady w skali 1:2, czyli dwukrotnie pomniejszone): Dwie kolumny: Nagłówek szablonu Menu nawigacyjne Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...sposób zoptymalizować ładowanie arkuszy stylów, zobacz rozdział HTML5: Wstępne ładowanie, Priorytet ładowania. Przykład <link "stylesheet"> A oto przykładowy zewnętrzny arkusz stylów: /* SELEKTORY: */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } Strona kodowa @charset Jeżeli arkusz stylów zawiera narodowe znaki diakrytyczne, konieczne...
- 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...
- 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...
- 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...