html - Kurs HTML i CSS
Formularze HTML / Pole wyboru <input "checkbox">Spis treści <input "checkbox"> Pole wyboru <input "checkbox"> Domyślne zaznaczenie pola <input "checkbox" checked> Blokada pola <input "checkbox" disabled> Etykieta <label> Klawisz skrótu <input "checkbox" accesskey> Dynamiczne blokowanie pól formularza Dynamiczne ukrywanie pól formularza Pole wyboru <input "checkbox"> <form action="..."> <input type="checkbox" name="nazwa" value="wartość">Tu wpisz opis pola </form> gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą...
Czcionki CSS / Wielkość czcionki {font-size}Spis treści {font-size} Wielkość czcionki {font-size} Najlepszy sposób ustalania wielkości czcionki Jednostka "em" Jednostka "px" Jednostka "pt" Podsumowanie Wielkość czcionki {font-size} selektor { font-size: rozmiar } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać konkretną wielkość czcionki. Możliwe są tutaj cztery sposoby: Imienne...
- Nagłówek i treść HTML / Opis zawartości strony <meta "description">
...wstawić np. następujący znacznik: <meta name="description" content="Tu podaj opis twojej strony">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem opis strony dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego! Ponadto w pliku *.html powinien się znajdować tylko jeden opis strony.
- HTML5 / Nowe elementy HTML5
Spis treści Wstęp Sekcje Nagłówki sekcji Znaczniki grupujące Semantyka tekstu Elementy osadzone Formularze Pole INPUT Elementy interaktywne Skrypty Wstęp Standard HTML5 nie jest już taki nowy, ale nadal mogą być do niego wprowadzane nowe znaczniki. Przeglądarki które ich jeszcze nie odsługują, zwykle próbują wyświetlać je w linii. Nie jest to zgodne z domyślnym sposobem prezentacji części z tych elementów określonym w specyfikacji. Aby ujednolicić sposób wyświetlania...
- HTML5 / Napisy do filmów <track>
Spis treści <track> Napisy do filmów <track> Rodzaj napisów WebVTT Ustawienia napisu Dialogi Formatowanie tekstu Stylizacja napisów Napisy do filmów <track> (interpretuje: Internet Explorer 10, Firefox 31, Opera 12.1, Chrome 23) <video> <source src="lokalizacja pliku w formacie 1" type='format 1'> <source src="lokalizacja pliku w formacie 2" type='format 2'> (...) <track src="napisy.vtt" default> (...) Treść alternatywna </video> gdzie: napisy.vtt Lokalizacja pliku...
- Nagłówek i treść HTML / Ikona strony <link "shortcut icon">
...elementu <head>...</head> - następujący znacznik: <link rel="shortcut icon" href="/favicon.ico">. Trzeba jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem ikonę dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
Widżety HTML / ĆwiczeniaOtwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Znajdź w serwisie YouTube przynajmniej jeden ciekawy film powiązany tematycznie z Twoją stroną. Użyj funkcji "Udostępnij / Umieść", aby skopiować kod HTML widżetu z wybranym filmem. Wstaw film bezpośrednio w treści swojej strony. Otwórz Twoją stronę w przeglądarce i sprawdź, czy można uruchomić odtwarzanie filmu.
- Tekst HTML / Blok <div>
<div>...</div> wyświetlanie: w bloku Polecenie to wydziela większy blok tekstu. W odróżnieniu od akapitu, blok może zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, należy zastosować znacznik <p>...</p> albo <br>). Przykład <div> To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy...
- Formularze HTML / Ćwiczenia
Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Na podstronie kontakt.html dodaj formularz kontaktowy kierujący na Twój adres e-mail. W formularzu umieść następujące pola: Temat - pole tekstowe o nazwie name="subject" Wiadomość - obszar tekstowy o nazwie name="body" Wyślij - przycisk wysłania formularza Anuluj - przycisk wyczyszczenia danych Jeżeli masz skonfigurowane na swoim komputerze konto w programie pocztowym, otwórz w...
- Tekst HTML / Przekreślenie <s>
<s>...</s> wyświetlanie: w linii Pozwala przekreślić część tekstu. Oznacza treść, która nie jest dłużej trafna lub istotna z punktu widzenia pozostałej zawartości dokumentu. Przykład <s> Ten tekst jest przekreślony Przekreślenie innym kolorem Stosując pewną "sztuczkę", można sprawić, aby kolor linii przekreślenia różnił się od koloru tekstu: <s style="color: red"><span style="color: black">To jest czarne przekreślenie czerwoną linią</span></s> gdzie w miejsce wyróżnionych wyrazów należy...