przykład html - Kurs HTML i CSS
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...
- Selektory pseudoelementów CSS / Przed... :before
Spis treści :before Przed... :before Obrazek przed... :before {content: url} Wartość atrybutu przed... :before {content: attr} Przed... :before selektor:before { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor. UWAGA...
- Selektory pseudoelementów CSS / Po... :after
Spis treści :after Po... :after Obrazek po... :after {content: url} Wartość atrybutu po... :after {content: attr} Po... :after selektor:after { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor. UWAGA! Polecenie nie interpretuje...
- Kursory CSS / Kursor obrazkowy {cursor: url}
...w CSS i określ odpowiednią wartość kursora. Możesz również użyć niestandardowego obrazka jako kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('myszka.png'), auto } ustawi niestandardowy obrazek jako kursor, który zmieni się na domyślny (auto) w przypadku braku dostępności. Jak zrobić "customowy" kursor? Aby stworzyć niestandardowy kursor, można użyć właściwości cursor w CSS i wskazać ścieżkę do własnego obrazka kursora za pomocą...
- HTML5 / Artykuł <article>
...tematyka treści elementów podrzędnych (wewnętrznych) jest w istotny sposób powiązana z treścią, którą obejmuje znacznik nadrzędny (zewnętrzny). Na przykład nadrzędnym artykułem może być wpis na blogu, a podrzędnymi - komentarze użytkowników. Artykuł może również zawierać wewnętrzne sekcje i tak jak one często ma na początku określony nagłówek (zobacz również: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). Wstawienie na początku znacznika ARTICLE tytułu nagłówkowego H1-H6 nie...