przykład html - Kurs HTML i CSS
Formularze HTML / Lista rozwijalna <select, option, optgroup>...można ich zagnieżdżać, tzn. umieszczać jednej grupy wewnątrz innej. Wygląd nagłówka grupy opcji może różnić się w zależności od przeglądarki. Na przykład może zostać on wyświetlony czcionką pogrubioną, pochyloną albo wyróżniony w jeszcze inny sposób. Przykład <select, optgroup, option> Rozwiń listę, aby zobaczyć grupy opcji (zwróć uwagę, że nie możesz wybrać nagłówka grupy): Możliwość 1.1 Możliwość 1.2 Możliwość 1.3 Możliwość 2.1 Możliwość 2.2 Możliwość 2.3 Możliwość 3...
Dobre praktyki / CSS Zorientowane Obiektowo...znaczenia, ile punktów ma wykaz, ponieważ wygląd dla nich określamy wspólnie) odnośnik a W arkuszu CSS pełna definicja tej klasy może wyglądać na przykład tak: .Menu { background-color: white; } .Menu ul, .Menu li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego...
- Formularze HTML / Obszar tekstowy <textarea>
...precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora. ✅ Rozpocznij konfigurację formularza Przykład <textarea> To jest przykład pola komentarza bez podania treści domyślnej: Możesz tu coś wpisać... A to jest przykład podania treści domyślnej (możesz ją wymazać): To jest treść domyślna komentarza...Możesz tu coś wpisać... Pole tylko do odczytu <textarea readonly> <textarea name="nazwa" cols="x" rows="y" readonly>...</textarea> Wstawienie atrybutu readonly...
- Formularze HTML / Wysłanie formularza <input "submit, image">
...np. przy pomocy zamieszczonego generatora.przycisk o ✅ Rozpocznij konfigurację formularza Przykład <input "submit"> value="Kliknij tutaj!" To jest przykład bez podania wartości value="...". Blokada pola <form action="..."> <input type="submit" value="wartość" disabled> </form> Wstawienie atrybutu disabled powoduje zablokowanie pola. Przykład <input "submit" disabled> To pole jest zablokowane (disabled). Przycisk obrazkowy <input "image"> <form action="..."> <input type="image...
Aktualizacja / NowośćSpis treści Nowość Opcje nowości Nowość W serwisie WWW przydatne może się okazać zasygnalizowanie użytkownikowi wprowadzonych ostatnio nowości, poprzez umieszczenie w spisie treści (bezpośrednio obok danej pozycji) albo obok daty aktualizacji (na każdej ze stron) specjalnego obrazka lub napisu, wskazującego, że pozycja ta została ostatnio zaktualizowana. W ten sposób użytkownik już podczas przeglądania spisu treści odnajdzie wszystkie nowości. Zaletą użycia skryptu jest to, że nie musimy...
- Media CSS / Zapytania mediów
...Dodatkowe możliwości możemy uzyskać również w przypadku sterowania wyglądem strony wyświetlanej na ekranie tradycyjnego monitora komputerowego. Na przykład jeśli użytkownik ma ustawioną wyższą rozdzielczość ekranu, możemy wyświetlić mu dodatkową kolumnę treści. Co więcej, można płynnie dopasowywać wygląd strony przy przeciąganiu rozmiaru okna przeglądarki przez użytkownika. Zapytania mediów wpisuje się dokładnie w tych samych miejscach, co przy tradycyjnym wyborze medium, np.: @import...
- Tło CSS / Tło obrazkowe {background-image}
...jako tło w CSS? Aby ustawić obrazek jako tło w CSS, można użyć właściwości background-image i podać ścieżkę dostępu do obrazka jako wartość. Na przykład: "background-image: url('sciezka/do/obrazka.jpg')". Jak dodać tło do zdjęcia? Aby dodać tło do zdjęcia z elementami przezroczystymi w CSS, można jednocześnie użyć właściwości background-image do ustawienia obrazka jako tła oraz background-color do określenia koloru tła. Na przykład, jeśli obrazek ma format GIF lub PNG z elementami...
- HTML dla zielonych / Odsyłacz do adresu internetowego HTML <a "http, https">
...naszą witrynę, będą mogli przenieść się bezpośrednio do wskazanej strony, bez potrzeby wpisywania jej adresu. Przykład <a "https"> Aby zobaczyć przykład działania takiego odsyłacza możesz kliknąć tutaj (nastąpi przejście do strony głównej portalu internetowego onet.pl). Pytania i odpowiedzi <a https "http, _blank"> Jak zrobić odsyłacz do strony internetowej? Na przykład aby wstawić łącze do wyszukiwarki Google, należy się posłużyć następującym kodem: <a...
- HTML dla zielonych / Odsyłacz pocztowy HTML <a "mailto">
...przy wstawianiu odsyłaczy pocztowych na stronach internetowych, zobacz rozdział: Odsyłacze / Odsyłacz pocztowy. Przykład <a "mailto"> Jako przykład użycia takiego odsyłacza możesz wysłać list do mnie. Tylko proszę, jeśli nie masz nic konkretnego do napisania, nie przysyłaj mi pustych listów 😉 Pytania i odpowiedzi <a "mailto"> Jak wstawić adres e-mail w HTML? W tym celu trzeba umieścić na stronie znacznik odsyłacza z atrybutem, w którym będzie się znajdował adres poczty...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...itp. W celu wyznaczenia cyklu za pomocą wzoru najpierw podstawiamy pod wielkości A i B liczby całkowite (dodatnie, ujemne lub zero) - przyjmijmy dla przykładu wzór: 2n+1 (wprost w takiej postaci należy wpisać go do selektora). Teraz, kiedy znamy już konkretną postać wzoru, zaczynamy podstawiać do niego pod n kolejne liczby naturalne rozpoczynając od zera, a wynik całego wyrażenia określi kolejne numery wierszy, które otrzymają podany sposób formatowania: A=2, B=1 n wzór wynik 0 2*0+1 1...