strona tekstu - Kurs HTML i CSS
Tło CSS / Usunięcie tła {background: none, background-color: transparent}...nie jest jednak zbyt dobre, ponieważ musimy ręcznie wpisywać wszystkie inne deklaracje, które znajdują się w arkuszu (np. kolor tekstu na stronach), pomijając przy tym tą, która odpowiada za tło. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni modyfikować również taką stronę. Nie dość, że jest to uciążliwe (zwłaszcza gdy istnieje więcej takich stron), to po jakimś czasie możemy po prostu zapomnieć o tej...
- Rozmiary CSS / Blok obejmujący CSS
...sposób: Jeśli przodek jest wyświetlany jako inline-block i kierunek tekstu (direction) jest określony jako ltr (od lewej do prawej) góra i lewa strona bloku obejmującego jest górną i lewą krawędzią zawartości pierwszego pudełka utworzonego przez przodka, natomiast dół i prawa krawędź jest dolną i prawą krawędzią zawartości ostatniego pudełka przodka. W przypadku kierunku tekstu rtl (od prawej do lewej) wszystko jest odwrotnie. W przeciwnym razie obejmujący blok jest tworzony przez...
HTML5 / Sekcja <section>...miejscach albo nie mają zbyt dużo wolnego miejsca w pomieszczeniu. Zapewnia przyzwoite osiągi sprzętowe.</p> </section> Tak przedstawione bloki tekstu są raczej zbyt obszerne, aby wstawić je w formie listy opisowej. Opisują nie tylko definicję terminów, ale również typowe sposoby użytkowania oraz główne zalety. Z drugiej strony opisy są raczej za mało kompletne, aby zamiast znaczników SECTION użyć ARTICLE. Tak wyrwane z kontekstu sekcje, samodzielnie nie stanowiłyby raczej zbyt...
Menu drzewiaste / Skrypt menu drzewiastego...CSS (m.in. arkusze stylów i klasy selektorów) Skrypt menu drzewiastego Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim: ul.tree { display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li { display: block; list-style-type: none; padding-left: 20px; background-image: url("document.gif"); background-position: left top...
HTML dla zielonych / Ćwiczenia...plików (w systemie Windows możesz użyć np. Eksploratora plików) i dwukrotnie kliknij ikonę stworzonego właśnie dokumentu. Dzięki temu Twoja strona otworzy się w przeglądarce. Za każdym razem kiedy coś na niej zmienisz, po prostu ponownie zapisz plik w edytorze, a następnie przełącz się do przeglądarki i odśwież stronę (klawisz F5), aby zobaczyć efekty. Wróć do edytora HTML. Podziel tekst na akapity, tak aby był wygodniejszy w czytaniu. Wybierz fragmenty tekstu, na które Twoim...
- Nagłówek i treść HTML / Plik robots.txt
...o dodatkową dyrektywę - Allow, której działanie jest przeciwne do Disallow, czyli wskazuje ścieżki, które robot może indeksować: # Tylko strona główna tego serwisu zostanie zaindeksowana: User-Agent: * Disallow: / Allow: /index.html Dyrektywa Allow może nie być interpretowana przez niektóre roboty wyszukiwarek (jest rozpoznawana przez robota Google) Wzorce dopasowania Co zrobić, jeśli chcemy zablokować indeksowanie wszystkich zdjęć serwisu, ale jednocześnie zezwolić na...
- Odsyłacze HTML / Odnośniki hipertekstowe
...Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Przy czym strona taka może wchodzić w skład tego samego serwisu, ale równie dobrze może znajdować się na drugim końcu świata. Przeglądarki internetowe wyświetlają odsyłacze najczęściej w innym kolorze oraz podkreślają je (można to oczywiście zmienić) - w ten sposób są one lepiej widoczne i odróżniają się od zwykłego tekstu. Użytkownika można odsyłać...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...ustalenie marginesu - margin). Jest przydatne np. w połączeniu z tłem pod tekstem, obramowaniem, czy też tabelami. W przeglądarce Opera każda strona posiada domyślnie ustalone niezerowe marginesy wewnętrzne. Jeżeli chcemy je zlikwidować, należy do selektora BODY przypisać następujący styl: body { padding: 0 } Przykład {padding-top} Tekst w tej komórce tabeli jest oddalony od górnego brzegu obramowania o 1cm (padding-top: 1cm) Rzeczywiście w wielu przypadkach, praktycznie nie...
- HTML5 / Nowe atrybuty HTML5
...pisowni i gramatyki srcdoc IFRAME Dokument do renderowania w ramce IFRAME translate Wszystkie elementy Czy element ma być tłumaczony, gdy strona jest lokalizowana width, height INPUT (type="image") width - wymiar poziomy; height - wymiar - pionowy wrap TEXTAREA Sposób, w jaki wartość kontrolki formularza ma być zawijana podczas wysyłania formularza writingsuggestions Wszystkie elementy Czy element może oferować podpowiedzi w trakcie pisania (ang. writing suggestions)...
- Kaskadowe Arkusze Stylów / Cascading Style Sheets
...trzeba się jednak obawiać stosowania CSS, ponieważ nie powodują one błędów w przeglądarkach, które ich nie obsługują. Nigdy nie zdarzy się tak, aby strona w ogóle nie została wyświetlona, ponieważ korzysta z CSS. Jeżeli przeglądarka nie obsługuje stylów, po prostu je pominie. Najważniejszym powodem wprowadzenia stylów było rozdzielenie struktury i prezentacji dokumentów. Język HTML wywodzi się od SGML (Standard Generalized Markup Language - Standardowy Uogólniony Język Oznaczania). SGML miał...