• Artykuł

            

Kurs HTML - Dodawanie grafiki Udostępnij na: Facebook

Autor: Wojtek Raczyński

Opublikowano: 2011-09-23

W dzisiejszym Internecie trudno znaleźć strony bez grafik i zdjęć. W tym artykule nauczymy się, jak osadzać grafikę na stronie WWW oraz w jaki sposób formatować jej styl.

Artykuł jest częścią cyklu artykułów, dotyczących tworzenia stron WWW w języku HTML.

Po przeczytaniu tego artykułu będziesz:

  • potrafił wstawić dowolną grafikę na stronę WWW poprzez kod HTML lub narzędzia Visual Web Developer,
  • wiedział, jak zgodnie ze standardami zmienić rozmiar grafiki i oblać ją tekstem.

Implementacja

Utwórz nowy projekt, wybierając File->New->Project, następnie wybierz ASP.NET Empty Web Application. Dodaj do projektu pusty plik .html (prawy przycisk myszy na projekt i z menu wybierz Add->New Item). Następnie dla wygody utwórz w projekcie folder, w którym będziesz umieszczał swoje grafiki (Rys.1.).

*Rys.*1. Dodawanie do projektu folderu na grafiki.

Po utworzeniu folderu umieść w nim pliki graficzne, których użyjesz na stronie (wystarczy przeciągnąć z dysku na folder). Najlepiej, gdyby pliki nie zawierały w nazwie spacji (unikniesz wówczas kodowania jej na Unicode).

Twoim zadaniem jest wstawienie obrazka na pustą stronę, ustawienie dla niego stylu i oblanie go tekstem.

Kontrolka Image – wstawianie grafiki

Wstawienie grafiki na stronę możesz zrealizować na dwa sposoby (widok Design lub Source). W tym celu będziesz korzystał z kontrolki Image lub ze znacznika HTML <img>.

Więcej informacji (w języku angielskim) o używaniu tego znacznika można znaleźć na stronie w3cschools.

1. Dodaj kontrolkę grafiki do strony oraz ustaw dla niej rozmiar i położenie.

  • Na obszar strony, w widoku Design, przeciągnij kontrolkę Image z okna Toolbox (kategoria HTML).

  • Wybierz dodaną kontrolkę i w oknie Properties:
    - w polu Src wybierz [...], w okienku, które się pojawi, wskaż wybrany plik graficzny,
    - w polu Alt wpisz tekst, który pojawi się w przypadku braku obrazka.

  • Przełącz widok na Source i zobacz, czy został wstawiony następujący kod:

    <img alt="Obrazek" src="Grafiki/dakar%20(20).jpg" />

Informacja

Użyte właściwości kontrolki to:

  • src - źródło obrazka, nie powinno się podawać pełnej ścieżki, ale położenie obrazka względem pliku html, w którym wstawiamy grafikę,
  • alt - tekst alternatywny przydatny użytkownikowi, który wyłączył obsługę grafiki w przeglądarce lub dla osób niewidomych, korzystających z syntezatora mowy.

Ustawianie rozmiaru i położenia grafiki

2. Teraz ustaw rozmiar i położenie obrazka.

  • W oknie Properties w polu Style wybierz [...]. W nowo otwartym oknie Modify Style wybierz**Position (**Rys.2.):
    - ustaw pozycję obrazka, wpisując odpowiednie wartości w pola top,right, bottom i left,
    - z listy position wybierz relative (pozycja obrazka będzie liczona względem położenia początkowego) lub absolute (pozycja jest liczona od krawędzi strony),
    - aby ustawić rozmiar, w pola height i width, wpisz pożądany rozmiar, za pomocą list wyboru można ustawić wartości procentowe (np. 50%), pikselowe (500px) i metryczne (10cm).

*Rys.*2. Ustawianie pozycji obrazka za pomocą stylów.

Informacja

Pozycję obrazka można też ustawić za pomocą atrybutu margin, znajdującego się w zakładce Box.

Wysokość i szerokość obrazka można też ustawić poza stylem, w oknie Properties, poprzez pola Height i Width.

  • Po przełączeniu widoku na Source, powinieneś zobaczyć taki kod:

    <img alt="Obrazek" src="Grafiki/dakar%20(20).jpg" style="position: relative; top: 50px; left: 50px; width: 50%; height: 50%;" />

Oblanie obrazka tekstem

3. Dodaj tekst do strony. Możesz to zrobić w widoku Design, wpisując tekst, lub Source, umieszczając tekst między znacznikami <p></p>.

4. Ustaw oblewanie grafiki tekstem z lewej strony (tekst będzie po lewej stronie grafiki i pod nią).

  • Poprzez okno Properties w polu Style wybierz [...]:
    - w oknie Modify Style wybierzLayout, położenie obrazu względem tekstu ustaw za pomocą parametru float, ustaw go na right,
    - ustaw pozycję obrazka (zakładka Position na 0),
    - w zakładce Box ustaw marginesy dla obrazka tak, by tekst nie przylegał do obrazka, a obrazek do krawędzi strony (np. na 10px).
Informacja

Oblewanie grafiki można też ustalić poprzez pole Align w Properties. W tym celu należy:

  • w polu Align wybrać położenie, w którym znajdzie się obrazek (w naszym przypadku right),
  • w polach HSpace i VSpace ustaw odległość tekstu od obrazu.

Rozwiązanie to działa poprawnie w większości przeglądarek, ale nie jest zgodne ze standardem HTML 4.01 i nie powinno być stosowane.
  • Wygląd strony po wprowadzeniu zmian widoczny jest na Rys.3.

*Rys.*3. Wygląd strony po oblaniu obrazu tekstem.

Inne parametry znacznika <img>

Znacznik <img> posiada jeszcze kilka ciekawych i przydatnych atrybutów. W tym punkcie nauczymy się tworzyć ramkę wokół obrazka i dodawać do niego tytuł.

5. Dodaj do obrazka tytuł, który pojawi się w dymku po najechaniu kursorem na obrazek.

  • W oknie Properties wybierz pole Title. Wpisz w nie tekst, który ma pojawić się w dymku.

6. Utwórz ramkę obrazka.

  • W oknie Properties w polu Style wybierz [...]. W nowo otwartym oknie Modify Style wybierzBorder:
    - w polach border-style, border-width i border-color ustaw odpowiednio styl obramowania, grubość ramki i jej kolor. Odznaczając opcje Same for all masz możliwość wybrania innego wyglądu dla każdej ze stron obramowania. W oknie Preview widoczny jest podgląd ustawionej ramki.
Informacja

Obramowanie obrazka można też ustalić poprzez pole Border w Properties. Wpisanie w to pole liczby powoduje ustawienie obramowania w kolorze czarnym, w stylu solid.

Rozwiązanie to nie jest zgodne ze standardem HTML 4.01 i nie powinno być stosowane.

  • Po przełączeniu widoku na Source, kod obrazka powinien wyglądać tak:

    <img alt="Obrazek" src="Grafiki/dakar%20(20).jpg" style="margin: 10px; border: medium dashed #FF0000; width: 50%; height: 50%; float: right;" />

Podsumowanie

W tym artykule nauczyliśmy się, jak wstawiać obrazki na stronę oraz określać ich właściwości, takie jak rozmiar i położenie. Poznaliśmy również standardy, dotyczące osadzania grafiki i ustawiania jej właściwości. Dowiedzieliśmy się, jak wykonać te zadania w trybie graficznym i jak jest to odwzorowywane w kodzie HTML.

Kolejny artykuł będzie zawierał możliwości osadzania dźwięków, filmów oraz obiektów Silverlight na stronie WWW.