wygląd strony - Kurs HTML i CSS
Szablon strony na DIV-ach / Płynny szablon...sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny od rozdzielczości ekranu, a w tym przypadku jest to mocno wskazane. Cały czas jedynie stylizując niezmienny kod HTML przedstawiony na wstępie, sprawimy, że kolumna treści dopasuje się do rozmiarów okna przeglądarki, a więc również do rozdzielczości ekranu (wszystkie przykłady w skali 1:2, czyli dwukrotnie...
- Dobre praktyki / Przykazania webmastera
...Uświadom sobie, że choćby oprawa graficzna Twojego serwisu była niezwykle estetyczna, a sama witryna bardzo funkcjonalna, rażące błędy ortograficzne wyglądają po prostu nieprofesjonalnie. Twoi potencjalni czytelnicy mogą wtedy z góry ocenić, że prawdopodobnie nie masz nic ważnego do przekazania i od razu opuszczą stronę. Używaj polskich znaków diakrytycznych Zrozumiałym może być, że SMS-y szybciej się pisze bez polskich liter. Podobnie nikt raczej nie będzie miał do Ciebie wielkich...
- Media CSS / Zapytania mediów
...Nie należy jednak myśleć, że jest to przydatne jedynie kiedy tworzymy stronę na urządzenia mobilne. Bez trudu można wyobrazić sobie specjalny wygląd dokumentu, dopasowany do wyświetlania na telewizorze o proporcjach ekranu 16:9. Dodatkowe możliwości możemy uzyskać również w przypadku sterowania wyglądem strony wyświetlanej na ekranie tradycyjnego monitora komputerowego. Na przykład jeśli użytkownik ma ustawioną wyższą rozdzielczość ekranu, możemy wyświetlić mu dodatkową kolumnę treści...
HTML5 / Napisy do filmów <track>...siebie oddzielone pustą linijką. Choć być może brzmi to nieco skomplikowanie, tak naprawdę jest bardzo intuicyjne. Najprostszy plik napisów mógłby wyglądać następująco: WEBVTT 00:00:01.000 --> 00:00:05.000 Ten napis wyświetli się między pierwszą a piątą sekundą filmu. 00:00:05.000 --> 00:00:10.000 Ten napis wyświetli się między piątą a dziesiątą sekundą filmu. 00:00:20.000 --> 00:00:30.000 Ten napis wyświetli się między dwudziestą a trzydziestą sekundą filmu. Czasy wyświetlania napisów...
Skórki...Podstawowe zasady tworzenia odsyłaczy Style CSS, a zwłaszcza zewnętrzne arkusze stylów Niektóre serwisy pozwalają swoim użytkownikom zmienić wygląd stron, poprzez wybór jednego spośród przygotowanych specjalnych szablonów, które często nazywa się skórkami (ang. skins). Choć na pierwszy rzut oka operacja zmiany wyglądu wydaje się być dość skomplikowana, tak naprawdę absolutnie nie ma potrzeby budowania drugiej wersji strony dla każdej kolejnej skórki. Z pomocą przychodzą style CSS...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...zyskać jeszcze więcej, projektując całą stronę w ten sam sposób: Wyobraź sobie, że po roku działalności strony zechcesz całkowicie odmienić jej wygląd, np. przenosząc kolumnę menu z lewej na prawą stronę. Dzięki CSS to tylko jedna linijka w arkuszu stylów, zamiast żmudnej modyfikacji być może setek powstałych dotychczas podstron serwisu! Bez trudu wprowadzisz okolicznościowe wersje wyglądu swojej witryny - np. z okazji Nowego Roku. Chcesz przygotować zestaw skórek dla Twojej strony? Z...
- Szablon strony na DIV-ach / Responsywny szablon
...częściej niż tradycyjne komputery stacjonarne czy laptopy. Cechą wspólną tego typu urządzeń zwykle jest mniejszy ekran. W końcu trochę dziwnie by wyglądało taszczenie pod pachą dwudziestocalowego "mobilnego" monitora do naszego smartfona 😉 Dla twórców stron internetowych oznacza to jedno: konieczne jest takie projektowanie serwisów, aby wyglądały dobrze, były czytelne i wygodne w użytkowaniu również na urządzeniach przenośnych. Jak to jednak zrobić? Istnieje kilka strategii. Powiększenie...
Dla nauczycieli / Scenariusz lekcji informatyki dla szkoły podstawowej...podstawy programowej Lekcja 1 - Wprowadzenie do HTML i struktury dokumentu Lekcja 2 - Wstawianie obrazków i linków Lekcja 3 - Dostosowanie wyglądu strony i podsumowanie Zadanie końcowe / projekt Podsumowanie Wstęp Poniżej znajdziesz scenariusz cyklu lekcji oparty na podstawie programowej dla klas IV-VIII szkoły podstawowej z zakresu informatyki oraz materiałach ze strony HTML dla zielonych. Lekcje zostały rozplanowane na 3 spotkania po 45 minut, z pracą domową i elementami...
- Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum
...tekstu CSS Czcionka CSS Wyrównanie tekstu CSS Przebieg 5 min - Wprowadzenie do tematu Co to jest CSS, jak działa, dlaczego warto oddzielać wygląd od struktury. 10nbsp;min - Wstawianie stylów CSS Omówienie trzech sposobów dodania CSS (zewnętrzny, wewnętrzny, inline), nacisk na <link rel="stylesheet">. 10 min - Składnia CSS Selektory, bloki deklaracji (właściwości, wartości). Przykłady formatowania całej strony i pojedynczych elementów. 15 min - Praktyczne ćwiczenia...
- CSS dla zielonych / Zaczynamy kurs CSS!
...prostą stronę internetową zawierającą tekst, obrazki i odsyłacze. Chociaż treść jest najważniejszym elementem każdej strony WWW, to przecież wygląd też się liczy. I właśnie do tego służy język CSS (Kaskadowe Arkusze Stylów). Zapamiętaj prostą zasadę: treść wraz ze znacznikami wprowadza się na stronę internetową za pomocą języka HTML, a następnie dzięki CSS można zmienić jej wygląd. Dlatego właśnie znajomość obu tych języków - HTML i CSS - jest kluczowa, aby zbudować profesjonalną...