• Artykuł

          

Samouczek: Wstawianie grafiki na stronę WWW - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Kędziora

Opublikowano: 2011-09-23

Typowym i częstym zadaniem przy projektowaniu stron internetowych jest umieszczanie plików graficznych (zdjęć) na stronie WWW. Grafika na stronie internetowej jest jednym z jej ważniejszych elementów, ponieważ może pełnić rolę ozdobną (np. może być tłem strony, służyć jako punktor czy też służyć jako linia oddzielająca), może pełnić rolę informacyjną (np. wykres w formie grafiki, schemat) lub może być potrzebna do prezentacji zdjęć. Grafika może też być odnośnikiem do innej strony lub do pliku.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • wstawiać plik graficzny na stronę WWW,
  • formatować właściwości grafiki poprzez Kaskadowe Arkusze Stylów (CSS).

Implementacja

Twoim zadaniem będzie:

  • wstawienie pliku graficznego na stronę internetową,
  • ustawienie obramowania (grubość, kolor) obrazka poprzez Kaskadowe Arkusze Stylów (CSS),
  • ustawienie marginesów obrazka poprzez Kaskadowe Arkusze Stylów (CSS).

Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy zadania.

Przygotowanie strony

Przygotujemy podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.

  1. Otwórz edytor HTML i utwórz szkielet strony.
<html>
    <head>
        <title>Wstawianie grafiki na stronę WWW</title>
    </head>
    <body>
    </body>
</html>
  1. Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej.
  2. Kliknij prawym przyciskiem myszki na obrazek z Rys. 2. Z menu podręcznego wybierz Zapisz obrazek jako i zapisz go w katalogu, w którym umieściłeś plik index.html, nadając mu nazwę cucumber.jpg.

Rys. 2. Obrazek cucumber.jpg do umieszczenia na stronie.

Wstawienie grafiki na stronę WWW

W celu dodania pliku graficznego na stronę WWW posłużymy się znacznikiem img.

Wstaw plik graficzny na stronę internetową.

  • W pliku o nazwie index.html w sekcji body wpisz:
<img src="cucumber.jpg" alt="Alternatywny tekst" />
  • Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 3.

Rys. 3. Plik index.html po dodaniu znacznika img.

  • Otwórz plik index.html w dowolnej przeglądarce. Sprawdź, czy wygląda tak, jak na Rys. 4.

Rys. 4. Plik index.html z wstawionym obrazkiem cucumber.jpg – podgląd w Internet Explorer 9.

Informacja

Najważniejsze rzeczy, o których należy pamiętać to:

  • sprawdzenie, czy nazwa pliku graficznego nie posiada polskich znaków diakrytycznych lub spacji,
  • zadbanie o odpowiednią kompresję obrazka przed wstawieniem go na stronę internetową,
  • alt="Alternatywny tekst" – dzięki temu, w przypadku, gdy obrazek nie załaduje się poprawnie na stronie w miejscu, gdzie powinien być umieszczony, pojawi się wprowadzony napis – w tym przypadku będzie to „Alternatywny tekst”.

Obramowanie obrazka

Aby dodać obramowanie do naszego obrazka, będziemy musieli użyć stylu CSS.

Dodawanie stylu.

  • W pliku index.html, w sekcji head, wpisz poniższy kod:
<style type="text/css">
        .grafika { border-width: 2px;
            border-style: solid;
            border-color: green; }
    </style>
  • Dzięki temu stylowi można ustawić, jako obramowanie, zieloną linię ciągłą o grubości 2 pikseli. Więcej informacji na ten temat znajdziesz w Jak umieszczać style CSS oraz Jak zrobić ramkę w CSS.
  • Dodaj atrybut class wstawionemu obrazkowi.
    —   Ustaw się w znaczniku <img>
    —   Dopisz do niego atrybut class="grafika"
  • Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 5.

Rys. 5. Plik index.html po dodaniu stylu.

  • Odśwież plik index.html w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 6.

Rys. 6. Obrazek po dodaniu stylów, zmieniających kolor, rodzaj i grubość obramowania.

Informacja

Poznane atrybuty HTML i CSS to:

  • class="grafika" – przypisanie nazwy klasy do elementu,
  • border-width – grubość obramowania,
  • border-style – rodzaj obramowania,
  • border-color – kolor obramowania.

Umieszczanie tekstu obok obrazka

Dość często potrzebujemy otoczyć tekstem nasz obrazek. Do tego celu możemy wykorzystać Kaskadowe Arkusze Stylów (CSS) i wiadomości z poprzedniego samouczka Układ elementów na stronie.

Dodawanie tekstu obok grafiki.

  • Ustaw się za znacznikiem <img>, następnie wpisz znaczniki <p> </p>.
  • Między znacznikami <p> i </p> wklej 4 razy poniższy tekst:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Aby tekst był umieszczony obok obrazka, a nie pod nim, musimy ustawić atrybut wyrównania wcześniej wstawionemu obrazkowi. W tym celu zmodyfikujmy styl o nazwie grafika, dopisując do niego:
float: left;
  • Odśwież plik index.html w przeglądarce i sprawdź, czy tekst i obrazek wyglądają tak, jak na Rys. 7.

Rys. 7. Obrazek ze wstawionym obok tekstem – podgląd w Internet Explorer 9.

Marginesy obrazka

Marginesy będą nam przydatne m.in. w przypadku, gdy będziemy chcieli odsunąć treść

i wstawić obok siebie dwa obrazki (lub więcej) oraz jeśli będziemy chcieli, żeby były one umieszczone w pewnym odstępie.

Więcej informacji o marginesach znajdziesz w encyklopedii pod hasłem Jak określić marginesy na stronie WWW za pomocą CSS.

Dodawanie marginesów w stylu grafika.

  • Aby zobaczyć efekt działania marginesów dodaj drugi obrazek na stronę WWW, wykonując dwa poprzednie kroki.
  • Do stylu grafika dopisz kod, umożliwiający dodanie 20 pikseli marginesów zewnętrznych z każdej strony obrazków:
margin: 20px;
  • Sprawdź, czy plik index.html wygląda tak, jak na Rys. 8. Odśwież plik index.html w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 1.

Rys. 8. Plik index.html po dodaniu marginesów.

Informacja

Marginesy mieszane:

  • margin: 10px 5px 2px 15px; – taki zapis oznacza, że marginesy będą następujące: górny – 10px, prawy – 5px, dolny – 2px, lewy – 15px.
  • rozmiar marginesów można podawać w różnych jednostkach, na przykład w cm, mm lub pikselach. Więcej o wielkościach przeczytasz w Jak określić wielkość w CSS.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod strony HTML:

<html>
<head>
    <title>Wstawianie grafiki na stronę WWW</title>
    <style type="text/css">
        .grafika { border-width: 2px;
            border-style: solid;
            border-color: green; 
            float: left;
            margin: 20px;}
    </style>
</head>
<body>
    <img class="grafika" src="cucumber.jpg" alt="Alternatywny tekst" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się, w jaki sposób umieszczać grafikę na stronie internetowej oraz jak formatować jej właściwości, takie jak obramowanie czy marginesy, poprzez ustalenie odpowiednich stylów CSS. Dowiedzieliśmy się również, jak dodać tekst obok grafiki.

W kolejnym artykule nauczymy się, jak umieszczać Odnośniki na stronie WWW.

Dodatkowo zobacz: