obrazki - Kurs HTML i CSS

Oprawa graficzna / Zamiennik obrazkowy
...całej kolumny nawigacyjnej z lewej na prawą stronę. Jest jednak jeden ważny element, na zawartość którego nie można wpływać za pomocą CSS - obrazki. Można co prawda zmieniać rozmiary grafiki, dodawać obramowanie, ustalać pozycję i marginesy, ale nie da się wyświetlić innego zdjęcia bez modyfikacji kodu HTML. Jednak czy to stanowi jakiś problem? W pewnych sytuacjach tak: Przygotowując kilka alternatywnych arkuszy CSS, możesz udostępnić użytkownikom możliwość wyboru skórki, która...
Tekst HTML / Komentarz HTML
...niezależnie od tego, że nie są one widoczne na ekranie, to nadal figurują w kodzie źródłowym i spowalniają wczytywanie. Nie są natomiast wczytywane obrazki i inne osadzone pliki. Ponadto trzeba uważać, aby wybrany fragment nie zawierał wstawionych wcześniej komentarzy, ponieważ spowodowałoby to zagnieżdżenie, co jest niedozwolone:  Ciąg dalszy... </p>-->...
Pozycjonowanie CSS / Przyleganie {clear}
...odpowiednimi ilustracjami, które mają być ułożone po prawej stronie względem otaczającego tekstu (float: right). Jeśli w kodzie źródłowym umieścimy obrazki zbyt blisko siebie, tzn. nie rozdzielimy ich odpowiednio długim tekstem opisu, nie zostaną one ułożone 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ć...
Formularze HTML / Selektor plików <input "file">
...przeglądając swój dysk lokalny musiał się przedzierać przez inne pliki, które akurat znajdują się u niego w tym samym katalogu co pożądane obrazki. Atrybut accept="..." nie jest wystarczającym zabezpieczeniem przed przesyłaniem niechcianych bądź niebezpiecznych typów plików za pomocą formularza, ponieważ przeglądarki i tak zwykle dają możliwość usunięcia filtru i wybrania dowolnego pliku! Jeżeli do odbierania danych używasz np. PHP, musisz nałożyć dodatkowe zabezpieczenie...
I co dalej... / Wysłanie strony
...na serwer należy przesłać nie tylko strony *.html lub *.htm, ale również wszystkie inne pliki, do których następuje odwołanie na tych stronach, np. obrazki (*.gif, *.jpg). Zwykle wszystkie pliki, a zwłaszcza index.html (strona główna), należy umieścić wprost w głównym katalogu konta FTP, który wyświetlił się zaraz po zalogowaniu. Czasami jednak może się tam znajdować specjalny katalog o nazwie public_html albo rzadziej www (często jest skrótem właśnie do public_html). Czasem może się tam...
Tekst CSS / Tryb pisania {writing-mode}
...czemu cała tabela przyjmie bardziej zwarte rozmiary. Warto pamiętać, że nawet w przypadku pionowego ułożenia tekstu elementy takie jak <img> (obrazki) i <iframe> (ramki lokalne) nadal będą ułożone w standardowej orientacji poziomej. Jest to celowy zabieg, ponieważ jeśli chcemy, aby tekst w takich elementach był ułożony pionowo, możemy po prostu przygotować taki obrazek albo nadać taki tryb dla dokumentu HTML wyświetlanego wewnątrz ramki lokalnej. Inaczej sprawa się ma w przypadku...
CSS dla zielonych / Zaczynamy kurs CSS!
...HTML dla zielonych. Skoro nadal czytasz, zapewne oznacza to, że potrafisz stworzyć przynajmniej 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...
Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...dodatkowo dostajemy możliwość wpływu na pozycję markera. Sztuczka polega na zastąpienia tradycyjnego wyróżnika wykazu specjalnie przygotowanych obrazkiem, który wstawiamy w tle elementów li. CSS daje możliwość określenia tła właściwie dla każdego elementu, a dodatkowo można ustalić, aby nie było ono powtarzane oraz określić dokładną jego pozycję. Na koniec pozostaje tylko wykonanie wolnej przestrzeni z lewej strony punktów wykazu, tak aby zmieściły się tam obrazki markerów - tutaj właśnie...
Komendy CSS3 / Podstawowy interfejs użytkownika CSS
...horizontal | vertical Inicjalizacja none Zastosowanie elementy z przepełnieniem innym niż visible i opcjonalnie elementy zastępowane takie jak obrazki, wideo, ramki lokalne Dziedziczenie nie Procenty nie Media visual text-overflow Przepełnienie tekstu Wartość clip | ellipsis Inicjalizacja clip Zastosowanie elementy blokowe Dziedziczenie nie Procenty nie Media visual
Menu w CSS / Pionowe menu
...wyświetlać tła. W ten sposób udało nam się osadzić grafikę, imitującą tradycyjny obrazek, bez żadnej modyfikacji kodu źródłowego HTML. Pozostałe dwa obrazki - tlo.gif i tlo2.gif - są już wstawione jako zwykłe tło, przy czym drugi jest dynamicznie podmieniany przy podświetlaniu odnośników (a:hover).

« 1 2