dokumentu - Kurs HTML i CSS
Skórki...skin/style.css, będzie zawsze kierować do pliku http://www.example.com/skin/style.css, niezależnie od tego, czy będziemy się do niego odnosić z dokumentu http://www.example.com/index.html czy np. http://www.example.com/katalog/podstrona.html. Podać pełny adres URL, np. http://www.example.com/skin/style.css. W zasadzie pierwszy z omawianych sposobów jest bardziej elastyczny, ponieważ nie powoduje żadnych problemów przy ewentualnej zmianie adresu serwisu, choć w tym przypadku tak...
Szablon strony na DIV-ach / Stały szablon...deklaracje są przypisane jednocześnie elementom html oraz body, z uwagi na różnice interpretacji elementu podstawowego (korzeń - ang. root) drzewa dokumentu w niektórych przeglądarkach (element podstawowy posiada określone domyślne marginesy strony, które chcemy usunąć). Ustalamy odpowiednią szerokość szablonu, tzn. taką, aby zmieściła się w najniższej planowanej rozdzielczości ekranu - w tym przypadku 800x600. Musimy przewidzieć 20px miejsca dla suwaka do przewijania treści, dlatego...
- Oprawa graficzna / "Duszki" CSS
...nie tylko co, ale w jaki sposób jest ładowanie. Po wybraniu adresu dowolnego współczesnego serwisu internetowego, przeglądarka zaczyna ładowanie dokumentu HTML oraz wszystkich elementów osadzonych na takiej stronie: głównie obrazków. Aby skrócić czas, przeglądarka nie ładuje osadzonych na stronie plików jeden po drugim, ale równocześnie po kilka - każdy w oddzielnym żądaniu HTTP (ang. HTTP request). Liczba jednoczesnych żądań jest jednak ograniczona, więc część plików musi poczekać na...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...jest różnica między selektorami :NTH-OF-TYPE i :NTH-CHILD? Oba te selektory CSS dopasowują elementy znajdujące się na tym samym poziomie drzewa dokumentu. Jednak :nth-of-type(...) wymaga dodatkowo, aby znajdowała się tam przynajmniej podana liczba elementów o takiej samej nazwie (mogą być przedzielone również innymi elementami), natomiast :nth-child(...) wybiera po prostu element o podanej kolejności. Na przykład, jeśli mamy: <p>...</p> <p>...</p> <div>...</div> <p>...</p>, to...
- 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. Co...
- Dobre praktyki / CSS Zorientowane Obiektowo
...CSS sprowadza się do nadawania formatowania w kontekście takich obiektów, a nie poszczególnych znaczników występujących w kodzie źródłowym dokumentu. Pojedynczemu obiektowi zwykle odpowiada klasa CSS albo selektor identyfikatora: #Header { /* nagłówek */ } .Menu { /* menu */ } .Article { /* artykuł */ } #Footer { /* stopka */ } Warto zwrócić uwagę, że w przypadku stosowania systemów parsowania szablonów na serwerze (np. w języku PHP), każdy obiekt jest...
Formularze HTML / Alternatywny sposób wysłania formularza...Dzięki niemu możemy próbować ominąć opisany błąd systemowy. Aby zastosować taki skrypt, wstaw przed formularzem (najlepiej w treści nagłówkowej dokumentu) następujący kod: <script> // www.kurshtml.edu.pl function mail_form(f) { function url_encode(text) { return text.replace(/%/g, '%25').replace(/\?/g, '%3F').replace(/=/g, '%3D').replace(/&/g, '%26').replace(/#/g, '%23').replace(/\r/g, '%0D').replace(/\n/g, '%0A'); } for (var i = 0, text = ''; i < f.elements.length; i++) { if...
- Komendy HTML 4.01 / BODY
Ciało (treść) dokumentu. Zobacz więcej... Atrybuty: ALINK="kolor" Kolor aktywnych odsyłaczy, czyli takich, które zostały wybrane przez użytkownika (zdeprecjonowane) BACKGROUND="adres" Wskazuje adres obrazka, który będzie wstawiony sąsiadująco jako tło strony (zdeprecjonowane) BGCOLOR="kolor" Kolor tła (zdeprecjonowane) CLASS="klasa" Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami DIR="kierunek" Kierunek tekstu: ltr - od lewej do...
- Szablon strony na DIV-ach / Responsywny szablon
...(CSS). Można to zrobić w trzech prostych krokach opisanych poniżej. Skalowanie Aby stworzyć stronę responsywną, najpierw musimy wstawić w nagłówku dokumentu, tzn. w dowolnym miejscu pomiędzy znacznikami <head> i </head>, następuje polecenie: <meta name="viewport" content="width=device-width, initial-scale=1"> Oznacza ono, że przeglądarka mobilna nie musi pomniejszać strony, ponieważ to my zadbamy o to, aby strona była wygodna w odbiorze na urządzeniach przenośnych [zobacz: Skalowanie]...
- Czcionki CSS / Czcionki osadzone @font-face
...dowolną liczbę razy (drugie polecenie). Jako adres URL można podać także ścieżkę dostępu do pliku czcionki, wyznaczaną względem arkusza CSS, a nie dokumentu HTML, w którym ten arkusz został dołączony. Opcjonalnie zaleca się podać również format pliku czcionki, aby przeglądarka nie pobierała fontu, którego nie potrafi wyświetlić ani żeby nie musiała się domyślać formatu na podstawie rozszerzenia nazwy pliku: @font-face { font-family: comic; src: url(http://adres/plik.ttf)...