okna - Kurs HTML i CSS
Komendy HTML 4.01 / IFRAME...ramce (w pikselach) NAME="nazwa" Określa nazwę ramki, do której mogą się później odnosić odsyłacze (atrybut TARGET elementu A) NORESIZE Rozmiary okna ramki nie będą zmieniane SCROLLING="przewijanie" Określa sposób przewijania zawartości ramki: auto - ramka będzie przewijana, kiedy to będzie konieczne (domyślnie) no - ramka nie będzie przewijana yes - ramka będzie przewijana zawsze SRC="adres" Podaje lokację inicjalizującego dokumentu ramki STYLE="styl" Informacje stylów (CSS)...
- HTML5 / Możliwy koniec linii <wbr>
...ale nie 8-11, Firefox 2, Opera 10, Chrome 4) <wbr> Normalnie przeglądarki zawijają długie linijki tekstu, jeśli nie mieszczą się w szerokości okna. Jednak w niektórych warunkach przełamanie tekstu może nie być możliwe. Wtedy najczęściej pojawi się poziomy suwak do przewijania strony. Z takim przypadkiem możemy mieć do czynienia wewnątrz znacznika PRE, gdy zablokujemy zawijanie tekstu przy pomocy CSS albo gdy w długiej linijce nie umieścimy żadnego białego znaku (np. spacji) ani innego...
- HTML5 / Sekcja <section>
...to tematyczna grupa treści, zwykle zawierająca nagłówek. Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. Treść sekcji może być dodatkowo podzielona na podsekcje - poprzez umieszczenie w elementach głównych sekcji dodatkowych znaczników SECTION. W takim przypadku mamy do czynienia z podrozdziałami. Podział treści na sekcje...
- HTML5 / Element bierny <... inert>
...usunięcie interaktywności dynamicznym elementom strony, które jeszcze nie do końca się wczytały albo chwilowo znajdują się poza zakresem widoczności okna przeglądarki, zanim użytkownik nie wykona jakiejś założonej akcji.
- Ikony (symbole) / Gospodarstwo domowe
...dry dry Żaluzje zamknięte blinds_closed blinds_closed Rolety zamknięte roller_shades_closed roller_shades_closed Propan propane propane Czujnik okna sensor_window sensor_window Dzwonek do drzwi 3p doorbell_3p doorbell_3p Zdrowie i uroda health_and_beauty health_and_beauty Termostat węglowy thermostat_carbon thermostat_carbon Dom rodzinny family_home family_home Okap range_hood range_hood Telewizor z asystentem tv_with_assistant tv_with_assistant Koc blanket blanket Rolety pionowe...
- Ikony (symbole) / Dom
...Nest Wake On Press nest_wake_on_press nest_wake_on_press Powiadomienie czujnika ruchu motion_sensor_alert motion_sensor_alert Czujnik okna window_sensor window_sensor Strefa osoby bezczynna zone_person_idle zone_person_idle Czujniki Krx sensors_krx sensors_krx Uchwyt magnetyczny dla kamery Nest nest_cam_magnet_mount nest_cam_magnet_mount Stojak dla kamery Nest nest_cam_stand nest_cam_stand Detektor offline detector_offline detector_offline Uchwyt ścienny dla kamery Nest...
Tło CSS / Rozmiary tła obrazkowego {background-size}...nam na wstawieniu w tle strony tylko jednego egzemplarza obrazka (bez jego powielania), ale w taki sposób aby idealnie dopasował się do rozmiarów okna przeglądarki - niezależnie od używanej rozdzielczości ekranu. Powyższe polecenie pozwala uzyskać taki efekt i to bez żadnych sztuczek ani obejść. Trzeba jednak pamiętać, że rozciąganie obrazka nie tylko zniekształca jego proporcje, ale również w przypadku powiększania wpłynie na utratę jakości grafiki. Pamiętaj również, aby nie wstawiać w tle...
- Tabele CSS / Rozmiary tabeli {width, height}
...500px" lub "width: 50%" w zależności od preferencji. Jak dopasować tabelę do marginesów? Aby uzyskać efekt autodopasowania rozmiaru tabeli do okna, który jest znany z programu Microsoft Word, można ustawić szerokość tabeli na 100% za pomocą właściwości width, co spowoduje, że tabela zajmie całą dostępna przestrzeń w poziomie, a kolumny dopasują się proporcjonalnie do zawartości. Przykład: <table style="width: 100%">...</table>.
- Pozycjonowanie CSS / Przyleganie {clear}
...jeden pod drugim - tak jak prawdopodobnie oczekiwaliśmy - lecz obok siebie. Co więcej, ułożenie będzie zależało od rozdzielczości ekranu i rozmiarów okna przeglądarki (w mniejszej rozdzielczości wszystko może być w porządku). Aby pozbyć się tych niedogodności wystarczy dla obrazków określić dodatkowo deklarację: clear: right. Przykład {clear} <img style="float: left"> <p style="clear: left">Lewy bok tego akapitu nie przylega do obrazka</p> <img style="float: left"> <p style="clear...
- Układ elastyczny CSS / Kolejność {order}
...który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i najczęściej wymagało pójścia na pewne kompromisy. <div id="top"> <div id="TRESC">Treść strony...</div> <div id="MENU">Menu nawigacyjne</div> </div> #top { display: flex; } #MENU...