What is HTML and what is it used for? - Kurs HTML i CSS
Szablon strony na DIV-ach / Stały szablon...przykłady w skali 1:2, czyli dwukrotnie pomniejszone): Dwie kolumny: Nagłówek szablonu Menu nawigacyjne Treść strony Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; text-align: center; } #top { width: 780px; margin-left: auto; margin-right: auto; text-align: left; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; background-color: #ccc; } #TRESC { width: 630px; float: left...
- Szablon strony na DIV-ach / Płynny szablon
...Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; position: relative; background-color: #ccc; } #TRESC { margin-left: 150px; background-color: #fff; } #STOPKA { clear: both; background-color: #888; } Wyjaśnienie...
- 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...
- Oprawa graficzna / "Duszki" CSS
...w przypadku menu pionowego, opisanego wcześniej w rozdziale Menu w CSS. Tutaj wykonamy go przy wykorzystaniu "duszków". <ul> <li><a href="czcionki.html">Czcionki</a></li> <li><a href="tekst.html">Tekst</a></li> <li><a href="tlo.html">Tło</a></li> <li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul> ul, ul li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width: 200px...
- Oprawa graficzna / Zamiennik obrazkowy
Spis treści Wstęp Fahrner Dwyer Phark Gilder/Levin Jefferies Zamienniki obrazkowe a Google Wstęp Po lekturze rozdziałów Menu w CSS oraz Szablon strony na DIV-ach powinny być Ci już znane ogromne możliwości wpływania na wygląd dokumentów stron WWW tylko za pomocą stylów CSS. Wiesz już, w jaki sposób można przygotować optymalny kod HTML, a następnie za pomocą w zasadzie drobnych wpisów w arkuszu CSS, wprowadzać daleko idące zmiany wyglądu witryny. Nie jest żadnym kłopotem zmiana...
Tekst / Przekreślenie <s><s>...</s> wyświetlanie: w linii Pozwala przekreślić część tekstu. Oznacza treść, która nie jest dłużej trafna lub istotna z punktu widzenia pozostałej zawartości dokumentu. Przykład <s> Ten tekst jest przekreślony Przekreślenie innym kolorem Stosując pewną "sztuczkę", można sprawić, aby kolor linii przekreślenia różnił się od koloru tekstu: <s style="color: red"><span style="color: black">To jest czarne przekreślenie czerwoną linią</span></s> gdzie w miejsce wyróżnionych wyrazów należy...
- Tekst / Skrót <abbr>
wyświetlanie: w linii <abbr>...</abbr> Znacznik ten pozwala oznaczyć wpisaną formę skróconą jak np.: "inż.", "prof.". Obejmuje to również tzw. akronimy (skrótowce), czyli wyraz utworzony z pierwszych liter lub pierwszych zgłosek (najczęściej sylab) kilku wyrazów będących zwykle jakąś nazwą, np.: "WWW" (World Wide Web). Akronim od skrótu najłatwiej można odróżnić po tym, że w języku polskim po skrócie stawiamy kropkę, chyba że kończy się ostatnią literą pełnego wyrazu (jak "nr" - numer)...
- Tekst / Słownik <dl, dt, dd>
<dl> <dt>Pierwszy termin</dt><dd>Definicja pierwszego terminu</dd> <dt>Drugi termin</dt><dd>Definicja drugiego terminu</dd> <dt>Trzeci termin</dt><dd>Definicja trzeciego terminu</dd> </dl> wyświetlanie: w bloku Polecenie tworzy tzw. listę opisową, która jest przydatna, gdy piszemy słownik, w którym znajdują się pewne wyrazy i ich objaśnienia. Objaśnienia są zwykle przesunięte bardziej w prawo, dzięki czemu lista staje się czytelniejsza. (Zobacz także: Definicja). Zwracam uwagę, że w obrębie...
- Dobre praktyki / CSS Zorientowane Obiektowo
Spis treści Wstęp Obiekty Atrybuty Kompozycja Rozszerzanie Wielokrotne rozszerzanie Przesłanianie Klasa abstrakcyjna Singleton Polimorfizm Wstęp Każdy programista wie, jaki przełom w rozwoju informatyki przyniosła koncepcja Programowania Zorientowanego Obiektowo (ang. Object Oriented Programming). Dlaczego by nie przenieść tego na grunt CSS? Może zabrzmi to zaskakująco, ale CSS już teraz daje taką możliwość. Nie są wymagane do tego żadne dodatkowe rozszerzenia w przeglądarkach, a...
- Dobre praktyki / Przykazania webmastera
...przeglądarki. Jeśli dodatkowo zmiany dotyczyły również kodu HTML, mamy gotowy przepis na zupełne rozsypanie się wyglądu strony. Ponieważ pliki *.html zwykle cache'ują się słabiej (na krótszy czas), może dojść do sytuacji, kiedy użytkownicy dostaną już nową wersję kodu źródłowego HTML, która wymaga jednak zmienionego właśnie arkusza CSS, ale sam arkusz zaczyta się stary - z pamięci podręcznej przeglądarki. Aby do tego nie dopuścić, zawsze można wprowadzić na serwer po prostu nowy plik...