obrazek - Kurs HTML i CSS
HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>...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 zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu obrazków na...
- HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">
...Natomiast 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. Jak widać odsyłacza obrazkowego możemy użyć w połączeniu z dowolnym typem odnośników (do podstrony, do adresu internetowego lub pocztowy). Jednak najczęściej w ten sposób tworzy się menu...
CSS dla zielonych / Tapeta CSS {background-color, background-image, color}...np. ze względu na problemy z połączeniem internetowym bądź jeśli przeglądarka użytkownika nie obsługuje takiego formatu graficznego albo kiedy obrazek byłby uszkodzony bądź został wcześniej usunięty kiedy użytkownik zupełnie wyłączy wyświetlanie grafiki w swojej przeglądarce - ponieważ np. ma bardzo powolne lub drogie połączenie internetowe ścieżka dostępu do obrazka Lokalizacja gdzie znajduje się plik graficzny tapety Inaczej niż w przypadku znacznika <img src="..."> w języku HTML...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...dolna krawędź oraz boczne krawędzie w postaci grafiki powielanej w pionie. Przykład Tak wyglądają osobne części krawędzi obramowania (środkowy obrazek zostanie powielony w pionie, więc wystarczy, żeby miał wysokość 1px): Wykonanie ramki graficznej wymaga użycia następujące go kodu HTML: <div class="ramka"> <div class="ramka_pojemnik"> <div class="ramka_zawartosc"> ... </div> </div> </div> ...oraz CSS: .ramka { background: url(obramowanie.gif) no-repeat top; padding-top...
- Formularze HTML / Selektor plików <input "file">
...type="file" name="nazwa" accept="lista typów"> </form> Czasami oczekujemy, że użytkownik wyśle nam poprzez formularz konkretny typ pliku - np. obrazek. Możemy oczywiście podać gdzieś w widocznym miejscu informację, że np. przyjmujemy tylko pliki JPG i GIF, jednak taka informacja może zostać łatwo przeoczona. Poza tym skoro spodziewamy się tylko określonych typów plików, nie ma sensu, żeby użytkownik przeglądając swój dysk lokalny musiał się przedzierać przez inne pliki, które akurat...
- Tło CSS / Rozmiary tła obrazkowego {background-size}
...np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "rozmiary" należy wpisać: contain - skaluje obrazek, zachowując proporcje, tak aby w całości zmieścił się w tle cover - skaluje obrazek, zachowując proporcje, tak aby pokrył cały obszar tła (część grafiki może być niewidoczna) auto - zachowanie domyślne długość - obrazek zostanie przeskalowany do podanego wymiaru wartość procentową - obrazek zostanie przeskalowany względem...
- Pozycjonowanie CSS / Widzialność {visibility}
...tabeli przy ich tradycyjnym usuwaniu. Przykład {visibility} visibility: visible visibility: visible visibility: hidden visibility: hidden (obrazek jest niewidzialny - na ekranie pozostała pusta przestrzeń o rozmiarach takich jak ukryty obrazek) Dla porównania: display: none display: none (obrazek nie został wyświetlony, a dodatkowo na ekranie nie pozostała żadna pusta przestrzeń) Dla drugiego wiersza visibility: collapse komórka1 komórka2 komórka3 komórka4 - o szerszej...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img, map, area>
...dostępu do obrazka" alt="tekst alternatywny"></a> gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek. Zasady wpisywania adresu są analogiczne jak w przypadku odsyłaczy do: podstrony, etykiety, adresu internetowego, poczty e-mail czy dowolnych innych odsyłaczy (w zależności od wybranego typu odsyłacza). Odsyłacz ten zostanie uruchomiony, gdy klikniemy myszką obrazek, do którego podajemy ścieżkę dostępu. Dzięki niemu możemy stworzyć np...
- HTML5 / Uwierzytelnienie <audio crossorigin, img crossorigin, link crossorigin, script crossorigin, video crossorigin>
...samej domeny (to samo co użycie crossorigin jako atrybut logiczny - tzn. bez podania wartości). Czyli przykładowo jeśli na naszej stronie wstawimy obrazek znajdujący się na innym serwerze, będziemy mieli pewność, że jego zawartość nie będzie w żaden sposób dopasowana do użytkownika, który aktualnie odwiedza naszą stronę (jest to wartość domyślna). use-credentials - zostaną wysłane pełne dane uwierzytelniające bez względu na domenę. Steruje przesyłaniem danych uwierzytelniających takich...
- Formularze HTML / Wysłanie formularza <input "submit, image">
...do obrazka" alt="informacja alternatywna"> </form> gdzie jako "ścieżka dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się obrazek, który ma zostać wyświetlony jako przycisk wysłania formularza. Natomiast zamiast "informacja alternatywna" można podać treść informacji, która powinna pojawić się w przypadku, gdy obrazek nie zostanie wyświetlony, a także po wskazaniu go myszką (atrybut ten nie jest konieczny). Polecenie wprowadza na ekran przycisk w postaci obrazka, po...