html - Kurs HTML i CSS
Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?...określony rozmiar poprzez jego zawartość albo bezpośrednie ustalenie - zachowuje się analogicznie jak np. element div. W tym trybie to element html reprezentuje ramy dokumentu. Analogicznie to element html a nie body staje się "pojemnikiem" dla elementów pozycjonowanych, które nie mają wypozycjonowanego rodzica. W trybie Quirks atrybut scroll="yes|no|auto" oraz własności CSS overflow, overflow-x i overflow-y stosuje się do selektora body, natomiast w trybie zgodności do selektora html...
- Szablon strony na DIV-ach / Responsywny szablon
...całą wiedzę nabytą w tym rozdziale i stworzyć najprostszy szablon responsywny korzystający z niezmiennego kodu HTML przedstawionego na wstępie. html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { background-color: #ccc; } #TRESC { background-color: #fff; } #STOPKA { background-color: #888; } @media only all and (min-width: 800px) { #MENU { width: 150px; float: left...
Formularze HTML / Hasło <input "password">...głównej, do której wszyscy mają normalny dostęp, wstawić następujący kod: <form action="?" onsubmit="window.location.href = this.password.value + '.html'; return false"> <input type="password" name="password"> <input type="submit" value="OK"> </form> Hasłem w tym przypadku jest nazwa strony bez rozszerzenia, którą chcemy zabezpieczyć. Przykładowo: hasłem do strony tajna_strona.html (która znajduje się w tym samym katalogu co strona główna, czyli tam gdzie wstawiliśmy powyższy skrypt)...
- I co dalej... / Wysłanie strony
...F5 Kopiowanie. W ten sposób można skopiować zawartość całego katalogu jednocześnie. Pamiętaj, że na serwer należy przesłać nie tylko strony *.html lub *.htm, ale również wszystkie inne pliki, do których następuje odwołanie na tych stronach, np. obrazki (*.gif, *.jpg). Zwykle wszystkie pliki, a zwłaszcza index.html (strona główna), należy umieścić wprost w głównym katalogu konta FTP, który wyświetlił się zaraz po zalogowaniu. Czasami jednak może się tam znajdować specjalny katalog o...
- 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...
- Kaskadowe Arkusze Stylów / Cascading Style Sheets
Spis treści Kaskadowe Arkusze Stylów Źródła Kaskadowe Arkusze Stylów CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak HTML. CSS daje możliwość globalnego...
- CSS dla zielonych / Edytory CSS
Style CSS można oczywiście pisać ręcznie, ponieważ jest to zwykły tekst - tak jak w przypadku samego HTML. Lecz stosowanie specjalnych edytorów przyspiesza i ułatwia nam pracę oraz zmniejsza ryzyko popełnienia błędów. Pozwalają automatycznie zdefiniować np. wielkość i kolor czcionki, kolor odsyłaczy czy tła (za pomocą specjalnych generatorów). Kolorowanie składni sprawia, że natychmiast odnajdziemy wszystkie błędy. Kreatory stylów (ang. wizards) są najczęściej wbudowane w edytory HTML. Zwykle...
- 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...
Rozwijane menu...się umieścić w innym miejscu również zwykłych odsyłaczy tekstowych. <select onchange="self.location.href = this.value"> <option VALUE="adres1.html">Opis1</option> <option VALUE="adres2.html">Opis2</option> ... </select> adres1.html, adres1.html Adresy (lub względne ścieżki dostępu) stron, które chcemy wczytać po wybraniu danej pozycji na liście Opis1, Opis2 Test, który pojawi się na liście i po wybraniu których nastąpi wczytanie stron Można również zaznaczyć opcję domyślną...