przykład html - Kurs HTML i CSS
Formularze HTML / Pole wyboru <input "checkbox">...tzn. jakieś pole lub kilka pól tekstowych (albo dowolnych innych typów) powinny stać się niedostępne po zaznaczeniu określonej opcji wyboru. Na przykład nie ma sensu pytać użytkownika o dalsze szczegóły dotyczące jego samochodu, gdy wcześniej zaznaczy opcję, że nie posiada własnego pojazdu. <input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.checked"> <input type="text" name="nazwa2"> Po wybraniu opcji, pole tekstowe zostanie...
Szablon strony na DIV-ach / Semantyczny szablon strony...jak we wspomnianym wcześniej rozdziale pt. Menu w CSS, także i tutaj z góry ustalimy kod HTML, który następnie będzie wykorzystywany we wszystkich przykładach w tym rozdziale. Zmieniając wygląd kolejnych przygotowywanych szablonów, będziemy projektować jedynie kolejne arkusze CSS dla wciąż niezmiennego kodu HTML. Jest to praktyczny przykład implementacji koncepcji rozdzielenia struktury i prezentacji dokumentów, dzięki czemu możliwe są do osiągnięcia wszystkie wymienione powyżej korzyści...
- Typy MIME / Wykaz typów MIME
...znaleźć na stronach organizacji IANA (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...
- 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...
- Wstawianie stylów CSS / Wydzielone bloki <div style>
<div style="cecha: wartość; cecha2: wartość2...">...</div> Jako "cecha" należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (opisane w kolejnych rozdziałach). Natomiast jako wyraz "wartość" wpisujemy dokładną wartość atrybutu. Fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy...
- CSS dla zielonych / Klasy selektorów CSS <div class>
...bardzo wygodne rozwiązanie, jeśli na stronie internetowej znajdują się stałe albo powtarzające się elementy, które mają się wyświetlać tak samo. Na przykład na każdej podstronie serwisu może się znajdować menu nawigacyjne, które wszędzie ma mieć spójny wygląd. Co to jest div class? Jest to fragmentu kodu HTML, który w całości mógłby wyglądać np. tak: <div class="klasa">...</div>. Przypisuje on do znacznika bloku podaną klasę CSS. Dzięki temu element ten wraz z całą jego zawartością...
- Formularze HTML / Pole tekstowe <input "text">
...umieszczenia kontrolek formularza w kodzie źródłowym strony. Zwykle jest to zupełnie naturalna kolejność. Czasami jednak chcielibyśmy ją zmienić. Na przykład wyobraźmy sobie, że pola formularza są umieszczone w kilku kolumnach i wierszach tabeli. W takim przypadku kolejność aktywacji będzie następowała wierszami (poziomo), ponieważ w takiej kolejności są umieszczone komórki tabeli w kodzie źródłowym. Jeśli jednak ze względu na budowę naszego formularza logiczniej by było aktywować kontrolki...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...który odpowiada przypadkowi, z którym się będziesz borykać. Wtedy to już nie będzie "sucha" teoria, ale od razu zastosowanie praktyczne w konkretnym przykładzie, a więc dużo łatwiej będzie to sobie przyswoić. Przed dalszą lekturą tego podrozdziału warto zwrócić uwagę na wartości domyślne, jakie przyjmują poszczególne własności, kiedy nie przypisze się im żadnych innych. Na przykład, jeżeli nie ustalimy marginesów elementu, przyjmą one wartości 0 (zero), co jest dosyć logiczne. To samo dotyczy...
- Czcionki CSS / Wielkość czcionki {font-size}
...zawsze przy użyciu pikseli, a więc każda jednostka ostatecznie i tak musi być w ten sposób przeliczona. Jak można było zauważyć na wcześniejszym przykładzie obliczeń, korzystając z jednostek takich jak "em" (lub "%"), może się okazać, że przeliczona wartość pikselowa nie jest liczbą całkowitą. Jak wiadomo, nie da się podzielić piksela ekranowego, a więc wartość ta musi być zaokrąglona. Nie ma jednak żadnej pewności, w jaki sposób zostanie to wykonane: w dół, w górę, czy zgodnie z zasadami...
- Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
...{ list-style-type: nazwa; } Punkt pierwszy Punkt drugi Punkt trzeci Punkt czwarty Punkt piąty Punkt szósty Zwróć uwagę, że w powyższym przykładzie symbole muszą być ujęte w cudzysłowy (albo apostrofy), ponieważ niestandardowy identyfikator nie może się rozpoczynać od cyfry. System addytywny @counter-style {system: additive} (CSS 3 - interpretuje Firefox 33, Opera 77, Chrome 91) @counter-style typ { system: additive; additive-symbols: symbole-addytywne; } Symbole-addytywne...