przykład html - Kurs HTML i CSS
Formularze HTML / Wyczyszczenie danych <input "reset">...jeden z poniższych przycisków: Wpisz tu jakiś tekst. Odpowiedź nr1 Odpowiedź nr2 Odpowiedź nr1 Odpowiedź nr2 value="Kliknij tutaj!"... To jest przykład bez podania wartości VALUE. Zwróć uwagę, że kliknięcie któregokolwiek z powyższych przycisków, spowoduje wyczyszczenie wszystkich pól formularza (jeśli był on wcześniej wypełniony). Blokada pola <input "reset" disabled> Możliwe jest także zablokowanie przycisku (nie obsługuje Opera 6): <form action="..."> <input type="reset...
Czcionki CSS / Waga czcionki {font-weight}...Jak zrobić pogrubiony tekst w CSS? Aby zrobić pogrubiony tekst w CSS, użyj właściwości font-weight i przypisz jej wartość bold. Na przykład: "font-weight: bold" pogrubia tekst. Jak zmienić grubość czcionki HTML? W HTML można zmienić grubość czcionki za pomocą atrybutu style="..." i wartości font-weight. Na przykład: <p style="font-weight: bold">Tekst pogrubiony</p> tworzy pogrubiony tekst.
- Tekst CSS / Kolor tekstu {color}
...możesz użyć znacznika <span>, wewnątrz którego umieścisz tekst, a następnie wykorzystać atrybut style="..." lub CSS do ustalenia koloru tekstu. Na przykład: <span style="color: red">Kolorowy tekst</span>. Jak ustawić kolor RGB w CSS? Aby ustawić kolor w formacie RGB w CSS, możesz użyć właściwości color i podać wartość w formie rgb(R, G, B), gdzie R, G i B to liczby od 0 do 255 reprezentujące składowe czerwonej, zielonej i niebieskiej odpowiednio. Na przykład: "color: rgb(255, 0, 0)...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...ramka_zawartosc { background: #92C892 url(obramowanie3.gif) repeat-y center; padding: 0 12px; color: #031; } Uzyskany efekt: To jest przykład tradycyjnie wykonanego "obramowania" obrazkowego. Wymaga zagnieżdżenia w sobie aż trzech bloków i przygotowania trzech obrazków. Ramka musi mieć stałą szerokość. Natomiast wysokość automatycznie dopasowuje się do zawartości, ale za to grafika pionowych krawędzi ramki nie może być zbyt skomplikowana. Obrazek obramowania...
- HTML5 / Sekcja <section>
...Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. Treść sekcji może być dodatkowo podzielona na podsekcje - poprzez umieszczenie w elementach głównych sekcji dodatkowych znaczników SECTION. W takim przypadku mamy do czynienia z podrozdziałami. Podział treści na sekcje jest niezwykle przydatny czytelnikowi. Akapity w...
- Nagłówek i treść HTML / Strona mobilna <link media>
<head> <link rel="alternate" media="media" href="adres"> </head> gdzie jako "media" podaje się typ(y) mediów alternatywnych albo zapytanie mediów. Natomiast zamiast "adres" wpisuje się bezwzględny adres strony (rozpoczynający się od http:// lub https://), która stanowi odpowiednik bieżącego dokumentu specjalnie przystosowany na podane urządzenia. W niektórych przypadkach autorzy udostępniają specjalną wersję strony na urządzenia mobilne. Zwykle ma ona węższy układ treści, mniej zdjęć i menu...
- Tabele HTML / Tytuł tabeli <caption>
...tytuł tabeli? W tym celu zaraz po znaczniku otwierającym tabeli trzeba wstawić element CAPTION, wewnątrz którego umieszcza się tytuł tabeli. Na przykład, aby utworzyć tabelę z tytułem oraz dwoma wierszami i dwiema kolumnami, można się posłużyć następującym kodem: <table> <caption>Tytuł tabeli</caption> <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>. Domyślnie tytuł wyświetla się na środku...
- Selektory atrybutów CSS / Prosty selektor atrybutu
...określony atrybut (przy czym jego wartość nie ma znaczenia). Pozwala nadać konkretne cechy elementom, które posiadają właśnie taki atrybut. Na przykład znacznik może być automatycznie napisany czcionką koloru czerwonego, jeśli ma nadany atrybut title="..." (który powoduje wyświetlenie tekstu informacji, po wskazaniu myszką). W tym przypadku nie ma znaczenia jaką wartość ma atrybut, ważne jest jedynie, aby został on nadany. UWAGA! Polecenie nie interpretuje MSIE 6 (od wersji 7 wszystko...
- HTML5 / Nawigacja <nav>
...przedzierania się przez mniej istotne treści, które w kodzie źródłowym dokumentu znajdują się przed nim. Przykład <nav> Poniżej przedstawiony przykład zawiera dwie sekcje nawigacyjne: pierwsza dla całego serwisu, a druga w obrębie artykułu na stronie. <nav> <ul> <li><a href="index.html">Strona główna</a></li> <li><a href="contents.html">Spis treści</a></li> </ul> </nav> <article> <h1>Mój artykuł</h1> <nav> <ul> <li><a href="#sec1">Rozdział 1</a></li> <li><a...
- Układ elastyczny CSS / Kolejność {order}
...W ten sposób potrzeby obu grup użytkowników zostaną spełnione. Przykład {order} blok 1 blok 2 blok 3 (order: -1) blok 4 blok 5 Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i...