tekst obrazek - Kurs HTML i CSS
Tło CSS / Atrybuty mieszane tła {background}Spis treści {background} Atrybuty mieszane tła {background} Tło graficzne obok tekstu Wielokrotne atrybuty mieszane Atrybuty mieszane tła {background} (interpretuje Internet Explorer 6, Firefox, Opera, Chrome) selektor { background: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać konkretne wartości atrybutów, dotyczących tła, które...
- Tło CSS / Tło obrazkowe {background-image}
...tło przyjmie podany kolor. Ponadto jeżeli obrazek posiada przezroczystość (np. format *.gif), zostanie ona zastąpiona podanym kolorem. Jeśli kolor tekstu elementu z tłem obrazkowym jest zbliżony do domyślnego koloru tła strony, wskazane jest podanie dodatkowo takiego koloru tła dla tego elementu, aby tekst był na nim czytelny. Jeżeli tego nie zrobimy, a obrazek nie zostanie wyświetlony, może wystąpić sytuacja typu: "biały tekst na białym tle". Może się to zdarzyć np. gdy obrazek w tle...
- Oprawa graficzna / Zamiennik obrazkowy
...jako tło obrazkowe! Dzięki temu każdy alternatywny arkusz CSS będzie miał zupełnie indywidualną oprawę graficzną. Wstawianie tła graficznego pod tekstem jest dość proste i oczywiste. Często jednak trzeba osadzić elementy graficzne, nad którymi nie będzie widniał żaden tekst - np. przyciski, logo, ikony itp. W takim przypadku mogłoby się wydawać, że wystarczy wstawić pusty element do kodu HTML, jednak jest to bardzo zły pomysł. Takie rozwiązanie jest niepoprawne semantycznie. Staje się dużą...
Multimedia HTML / Obrazek HTML <img>...<img src="ścieżka dostępu" alt="Tekst alternatywny"> gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek. Natomiast w miejsce "Tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce internetowej). Informacja alternatywna jest przydatna w przeglądarkach, które nie wyświetlają grafiki lub kiedy użytkownik...
- HTML dla zielonych / Wstawienie obrazka HTML <img src alt>
<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"> Zamiast tekstu: "Tu podaj względną ścieżkę dostępu do obrazka", należy podać miejsce na dysku, gdzie znajduje się nasz obrazek, który chcemy umieścić na stronie. Jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać tutaj samą nazwę pliku obrazka, nie zapominając przy tym o podaniu rozszerzenia (".jpg" lub ".gif"). Natomiast w miejsce "Tu podaj tekst...
Aktualizacja / Nowość...miesiac, rok, godzina, minuta, napis, obrazek) { var obrazek_domyslny = 'nowosc.gif'; // lokalizacja obrazka var napis_domyslny = 'NOWOŚĆ'; // tekst alternatywny if (typeof obrazek == 'undefined') obrazek = obrazek_domyslny; if (typeof napis == 'undefined') napis = napis_domyslny; if (typeof godzina == 'undefined') godzina = 0; if (typeof minuta == 'undefined') minuta = 0; if (new Date(rok, miesiac-1, dzien, godzina, minuta) > new Date()) document.write(obrazek ? '<img...
- HTML dla zielonych / Ustawienie obrazka HTML <img src alt "float">
<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="float: ustawienie"> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Natomiast jako: "ustawienie" należy wpisać: left Obrazek będzie ustawiony po lewej stronie względem...
- Oprawa graficzna / "Duszki" CSS
...krawędzi arkusza - nie zawiera się w samym obrazku): Pionowe menu Najmniej problemu jest z elementami, które będą stanowić zwyczajne tło pod tekstem. Tak jest 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...
- HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>
<div style="text-align: center"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"></div> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Polecenie pozwala wyśrodkować obrazek, czyli ustawić go na środku ekranu. Dla...
- HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">
Wszystkie odsyłacze przedstawione do tej pory, miały postać tekstową. Jeśli chcesz umieścić w swoim serwisie np. menu z obrazkowymi przyciskami, należy w tym celu użyć następującego polecenia: <a href="adres"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="border: 0"></a> gdzie jako "adres" można podać: względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu (np.: index.html), adres internetowy poprzedzony przez "http://" lub...