html - Kurs HTML i CSS
- Wstęp do JavaScript i ECMAScript / Jak osadzić skrypt JavaScript na stronie?
Spis treści Wstęp HTML5 XHTML HTML 4.01 Wstęp Aby osadzić kod JavaScript na stronie internetowej, należy posłużyć się znacznikiem SCRIPT. Sam sposób osadzenia będzie się nieco różnił w zależności do wersji użytego języka (X)HTML (patrz poniżej). HTML5 W języku HTML5 można to zrobić następująco: <script> /* Tutaj umieść kod skryptu. */ </script> Jeżeli ten sam skrypt chcemy osadzić na kilku podstronach, możemy zapisać go w pliku z rozszerzeniem *.js i potem wstawić do niego...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
Praktycznym zastosowaniem klas selektorów mogą być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów: .nazwa-klasy { deklaracje stylów } by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie: <div class="nazwa-klasy">dowolny tekst...</div> Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po...
- HTML5 / Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>
(interpretuje: Internet Explorer 6, Firefox 2, Opera 10, Chrome 17) Cały formularz: <form autocomplete="autouzupełnianie">...</form> Wybrane pole: <input type="typ" autocomplete="autouzupełnianie"> Lista rozwijalna: <select autocomplete="autouzupełnianie">...</select> Obszar tekstowy: <textarea autocomplete="autouzupełnianie">...</textarea> autouzupełnianie Można podać: on - autouzupełnianie aktywne (domyślnie) off - autouzupełnianie nieaktywne typ Należy użyć dowolnego pola...
- HTML5 / Leniwe ładowanie <iframe loading, img loading>
Widżet - ramka lokalna: <iframe src="lokalizacja" loading="tryb"></iframe> Obrazek: <img src="lokalizacja" loading="tryb"> lokalizacja Ścieżka dostępu albo adres URL wskazujące na miejsce, skąd ma zostać załadowany zewnętrzny zasób tryb Należy podać jedną z poniższych wartości: lazy - zasób zostanie pobrany dopiero po spełnieniu określonych warunków - np. kiedy użytkownik przewinie stronę w jego pobliże. eager - ładowanie natychmiastowe (wartość domyślna) Język HTML pozwala na...
- Nagłówek i treść HTML / Deklaracja strony kodowej <meta charset>
...tzn. wewnątrz elementu <head>...</head> - wstawić następujący znacznik: <meta charset="utf-8">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem deklarację strony kodowej dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
- Skórki
...w swoim edytorze nowy dokument, wklej do niego poniższy kod i zapisz w pliku skin.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Skin(name, expires, path, message) { this.expires = typeof expires != 'undefined' ? expires : 365; this.message = typeof message != 'undefined' ? message : 'Wymagana obsługa cookie'; this.name = typeof name != 'undefined' ? name : 'skin...
- Szablon strony na DIV-ach / Semantyczny szablon strony
Spis treści Szablon strony na DIV-ach Dlaczego nie tabele? Szablon strony na DIV-ach Po lekturze rozdziału pt. Menu w CSS powinny być Ci już znane praktyczne możliwości stylizacji elementów stron internetowych. Wiesz już zapewne, dlaczego rozwiązanie oparte o CSS jest najkorzystniejszym wyborem przy tworzeniu menu nawigacyjnego. Dlaczego zatem ograniczać się tylko do menu, kiedy można przecież zyskać jeszcze więcej, projektując całą stronę w ten sam sposób: Wyobraź sobie, że po roku...
- Typy MIME / Wykaz typów MIME
...(zobacz: Media Types). W wielu systemach operacyjnych typ MIME jest związany z rozszerzeniem nazwy pliku. Na przykład jeśli plik nazywa się index.html, to system wie, że powinien go potraktować jako typ text/html - tzn. otworzyć w domyślnej przeglądarce internetowej. Typ MIME Rozszerzenia nazwy pliku application application/andrew-inset ez application/applixware aw application/atom+xml atom application/atomcat+xml atomcat application/atomsvc+xml atomsvc application/ccxml+xml...
- Odsyłacze HTML / Do podstrony <a href>
...pomocniczy w "dymku" narzędziowym. Można tam podać np. szerszy opis strony, do której ma nastąpić przeniesienie, np. po wpisaniu: <a href="../index.html" title="Do strony głównej">Strona główna</a> Otrzymamy (wskaż odsyłacz myszką, aby zobaczyć opis): Strona główna Nowe okno <a href "_blank"> Jeśli chcesz, aby po kliknięciu odsyłacza otworzyło się nowe okno, wpisz następujący kod (dotyczy to również pozostałych typów odsyłaczy przedstawionych na tej stronie): <a target="_blank...
- Formularze HTML / Przycisk <button>
<button type="rodzaj">Treść przycisku</button> gdzie "rodzaj" określa typ przycisku i można tutaj podać: "submit" - przycisk wysłania formularza (domyślnie) "reset" - przycisk wyczyszczenia danych "button" - zwykły przycisk Wprowadza na ekran przycisk. Polecenie to jest zbliżone do przycisków: wysłania oraz wyczyszczenia formularza, a także do: <input type="button" value="napis">. Jednak pozwala ono dodatkowo, wprowadzić do przycisku grafikę, tabelkę i inne elementy - wystarczy umieścić...