html - Kurs HTML i CSS
Aktualizacja / System newsów...poniżej, jednak tym razem zapisujemy go w pliku z rozszerzeniem *.js - np. news.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function News(days) { this.config = { ////////// // Konfiguracja: 'days': 0, // ilość dni wyświetlania newsów (0 = zawsze) // Ustawienia domyślne: 'author': '', // autor 'email': '', // e-mail 'img': '', // obrazek 'width': '', // szerokość...
- Menu rozwijane, otwierane, wysuwane / Przykład menu rozwijanego
Kliknij poniższe nagłówki menu myszką: HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno new Menu('menu0');
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
...swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku menu.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj) { if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25; if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25; if...
- Menu rozwijane, otwierane, wysuwane / Menu wysuwane
Normalnie pozycje menu są rozwijane począwszy od pierwszej do ostatniej, a zwijane od ostatniej do pierwszej. Można odwrócić te kolejności, dzięki czemu uzyskamy efekt wysuwania: <script> new Menu('menu0', '', false, true); </script> Przykład HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno new Menu('menu3', '', false, true);
PrzeglądarkiKażdy webmaster z pewnością zastanawiał się, czy wybrany element HTML lub CSS będzie poprawnie wyświetlany we wszystkich popularnych przeglądarkach. Teraz można to szybko sprawdzić w jednym miejscu - w poniższym zestawieniu. Szczegółowe informacje znajdziesz w odpowiednich sekcjach opisujących działanie tych elementów w przeglądarkach.
Odsyłacze HTML / Do adresu internetowego <a "http, https">(w obrębie całego Internetu) Połączenie niezabezpieczone <a href="http://adres strony">opis</a> Bezpieczne połączenie SSL <a href="https://adres strony">opis</a> Protokół SSL (Secure Sockets Layer - Bezpieczna Warstwa Gniazdek) został opracowany przez firmę Netscape Communications Corporation. Jest używany do przesyłana poufnych danych. Teoretyczne za jego pomocą można nawiązać połączenie ze zwykłą stroną HTML - analogicznie jak w przypadku niezabezpieczonego odsyłacza do adresu...
- Odsyłacze HTML / Odsyłacz pocztowy <a "mailto">
(e-mail) Spis treści <a "mailto"> Odsyłacz pocztowy <a "mailto"> Ochrona adresu e-mail Dodatkowe parametry odsyłacza pocztowego Odsyłacz pocztowy <a "mailto"> <a href="mailto:adres e-mail">opis</a> gdzie jako "adres e-mail" należy podać adres poczty elektronicznej osoby, do której ma zostać wysłany list (np.: jan_kowalski@example.com). Dzięki temu odsyłaczowi, użytkownicy oglądający Twoją stronę, będą mogli wysłać list e-mail pod adres podany w poleceniu. Po kliknięciu takiego...
- Tabele HTML / Zagnieżdżanie tabel
<table> <tr> <td> <table> <tr> <td>...</td> </tr> </table> </td> </tr> </table> gdzie kolorem czerwonym zaznaczono tabelę główną (nadrzędną), a kolorem zielonym tabelę wewnętrzną (podrzędną). Możliwe jest oczywiście dalsze zagnieżdżanie. Dzięki konstrukcji zagnieżdżania tabel, możliwe jest zbudowanie wielu tabel "jedna w drugiej". Tabele wewnętrzne znajdują się w komórkach tabeli zewnętrznej. Zauważ, że w składni polecenia powyżej, tabela podrzędna jest bardziej wcięta...
- Formularze HTML / Lista rozwijalna <select, option, optgroup>
Spis treści <select, option, optgroup> Lista rozwijalna <select, option, optgroup> Możliwość wyboru kilku opcji (typ rozszerzony) <select multiple> Z zaznaczoną domyślnie opcją <option selected> O określonej wysokości pola <select size> Blokada pola <select disabled> Grupy opcji <optgroup> Lista rozwijalna <select, option, optgroup> <form action="..."> <select name="nazwa"> <option>Tu wpisz pierwszą możliwość</option> <option>Tu wpisz drugą możliwość</option> (...) </select>...
- Formularze HTML / Obszar tekstowy <textarea>
Spis treści <textarea> Obszar tekstowy <textarea> Pole tylko do odczytu <textarea readonly> Blokada pola <textarea disabled> Obszar tekstowy <textarea> <form action="..."> <textarea name="nazwa" cols="x" rows="y">Tu wpisz tekst który pojawi się domyślnie</textarea> </form> gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem. Natomiast "x" oraz "y" oznaczają odpowiednio: ilość kolumn i wierszy tekstu, które...