warto - Kurs HTML i CSS
HTML5 / Załącznik <figure, figcaption>...serwisu bez utraty spójności głównego tekstu dokumentu? Bardzo podobne przeznaczenie ma element ASIDE, jednak w odróżnieniu od FIGURE, jego zawartość jest tylko nieznacznie powiązana tematycznie z główną treścią. Na dobrą sprawę taką wstawkę (ASIDE) moglibyśmy zupełnie usunąć z witryny, podczas gdy załącznik (FIGURE) możemy co najwyżej przenieść na inną podstronę, bo inaczej dokument utraciłby spójność. Przykład <figure> <p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu...
- HTML dla zielonych / Gotowiec HTML
...szablonów WWW możesz pobrać w serwisach: webmade.org www.oswd.org (Open Source Web Design) templatemo.com Przy wyborze gotowego szablonu warto zwrócić uwagę na pewne rzeczy. Niektóre szablony wyglądają nawet bardzo dobrze, ale są tak przeładowane grafiką, że wczytywanie takiej strony może potrwać bardzo długo. Dodatkowo szczególnie jeśli korzystasz z obcojęzycznych szablonów, należy sprawdzić sposób kodowania znaków. W nagłówku każdej strony HTML musi znajdować się linijka: <meta...
Układ elastyczny CSS / Kolejność {order}...dzieci kontenera elastycznego (ale nie sam kontener). Natomiast kolejność to liczba całkowita, domyślnie równa zero. Elementy z przypisaną niższą wartością, będą wyświetlane w pierwszej kolejności. Wartości ujemne pozwalają przesunąć dowolny element na miejsce przed pierwszym. Elementy z przypisaną taką samą liczbą, wyświetlą się w kolejności ich występowania w kodzie źródłowym HTML. Możliwość swobodnego ustalania kolejności wyświetlania się elementów to następna duża zaleta układu...
- Dziedziczenie stylów CSS / Przywrócenie wartości domyślnej {...: initial}
...może nie być dla nas pożądane. Na szczęście istnieje sposób na odwołanie jego efektów dla wybranych sytuacji. Każda cecha CSS ma określoną wartość domyślną, która zostanie przyjęta, jeśli nie określimy inaczej. Na przykład dla wartości koloru tekstu może to być barwa czarna, a dla koloru tła - biała. Wartości domyślne są przypisywane podczas tzw. procesu inicjalizacji. Wartości domyślne (inicjalizacja) dla poszczególnych cech CSS możesz sprawdzić w rozdziałach: Komendy CSS 2 oraz...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...jest wyrażone liczbą naturalną (większą lub równą zero), która określa proporcje, w jakich będą rozciągane elementy w kontenerze. Domyślna wartość - zero - odbiera elementom elastyczność. Może się zdarzyć, że w jednym wierszu kontenera elastycznego mogłoby się zmieścić więcej elementów niż mamy zapewnionych. Wtedy zwykle z prawej strony pozostaje wolna przestrzeń. Możemy jednak sprawić, aby w takiej sytuacji szerokość elementów elastycznie dopasowała się w taki sposób, aby wypełniły...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...Jak ustawić obrazek jako tło w CSS? W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklaracje o odpowiednich wartościach. Na przykład jeśli plik tła nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co arkusz stylów *.css, a jego kolorystyka jest przeważająco jasna, można się posłużyć następującą regułą stylów: body { background-color: white; background-image: url(obrazek.jpg); color: black; }. Polecenie to ustawi również...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...długi może być tekst na stronie - bo powstanie on dopiero później - dlatego aby zabezpieczyć się na taką okoliczność, zwykle ukrywa się nadmiarową zawartość przy pomocy stylu "overflow: hidden" albo "overflow: auto". Kłopot w tym, że wtedy użytkownik może się w ogóle nie zorientować, że tekst został przycięty - zwłaszcza jeśli litery ułożą się w taki sposób, że żaden wyraz nie zostanie ucięty w środku. W takiej sytuacji znacznie lepiej by było wstawić na końcu wiersza wielokropek, który...
- HTML5 / Minimalna i maksymalna liczba znaków <input minlength maxlength, textarea minlength maxlength>
Pole tekstowe: <input minlength="minimum" maxlength="maksimum"> Obszar tekstowy: <textarea minlength="minimum" maxlength="maksimum">...</textarea> minimum maksimum Liczby całkowite oznaczające odpowiednio: najmniejszą liczbę znaków, którą użytkownik musi wpisać w polu tekstowym oraz największą liczbę znaków, której nie może przekroczyć Atrybuty te pozwalają wymusić wpisanie w polu formularza tekstu składającego się przynajmniej z podanej liczb znaków (minlength="...") lub/i...
- HTML5 / Osadzenie kodu HTML w ramce lokalnej <iframe srcdoc>
(interpretuje: Firefox 25, Opera 15, Chrome 20) Z użyciem apostrofu (przydatne kiedy wartość zawiera cudzysłowy): <iframe srcdoc='kod'></iframe> Z użyciem cudzysłowu (przydatne kiedy wartość zawiera apostrofy): <iframe srcdoc="kod"></iframe> kod Dowolny tekst ze znacznikami HTML. Może on składać się z wielu linijek. Dzięki atrybutowi srcdoc='...' do ramki lokalnej nie musimy wczytywać osobnego pliku HTML za pomocą atrybutu src="...", ale możemy wprost podać kod HTML, który się w...
- Tekst CSS / Tryb pisania {writing-mode}
...może się przydać takie nienaturalne ułożenie tekstu w pionie. Na przykład wyobraźmy sobie tabelę z wieloma kolumnami, w których znajdują się krótkie wartości - np. małe liczby całkowite. Jeśli do takiej tabeli dodamy nagłówek, może okazać się, że tabela stanie się bardzo szeroka, przez co trudno będzie ją czytać. W takiej sytuacji czasami lepiej jest wpisać komórki nagłówkowe pionowo, dzięki czemu cała tabela przyjmie bardziej zwarte rozmiary. Warto pamiętać, że nawet w przypadku pionowego...