Witam, drodzy czytelnicy bloga. Udało nam się szczegółowo porozmawiać o tym, które i w jakich przypadkach najlepiej zastosować do wstawiania zdjęć na stronach Twojej witryny w artykule, do którego link znajduje się tuż powyżej.

Dzisiaj przyjrzymy się szczegółowo wszystkim aspektom używania tagu Img do wstawiania obrazów, zobaczmy, jak ustawić tekst, który będzie otaczał zdjęcie w Kod HTML, dowiemy się jak wykorzystać obrazy jako tło strony internetowej, jak zmienić ich rozmiar i ustawić ich wyrównanie (środek, lewy i prawy).

Korzystanie ze znacznika Img i jego atrybutów Src, Szerokość i Wysokość

Zobaczmy więc, jak możesz wykorzystać grafikę na swojej stronie internetowej. Po pierwsze, istnieje możliwość wstawienia obrazu jako elementu (obiektu) do kodu HTML strony. Właśnie takie wstawienie odbywa się za pomocą Img, który jest wyjątkowy - element inline z zastąpioną treścią, które obejmują tylko cztery, z których część już wspomnieliśmy, a pozostałe trzy - ( nowoczesna wersja za pomocą ramek) (do wstawiania filmów i innych treści multimedialnych).

Zachowuje się dokładnie jak element inline, ale wewnątrz niego wyświetlana jest obca treść zewnętrzna (zdjęcie w przypadku Img lub wideo i flash w przypadku Object i Embed). Każdy z tych czterech elementów implikuje obecność zewnętrznego pliku, który zostanie załadowany do tego właśnie obszaru, określonego w jego atrybutach.

Aby wskazać drogę do plik graficzny, który należy załadować na stronę, służy jako element specjalny Atrybut źródłowy.

Przeglądarka użytkownika analizując kod HTML strony, gdy tylko napotka w niej znacznik Img, od razu tworzy obszar dla elementu inline, do którego się ładuje plik zewnętrzny(na przykład fotografia). Przeglądarka wybiera ścieżkę do pliku z zawartości Src.

Kiedy obraz zaczyna się pobierać z Twojego serwera na komputer użytkownika, przeglądarka określa prawdziwe wymiary tego obrazu i rozszerza o te same wymiary obszar linii, który utworzyła po wykryciu elementu Img w kodzie.

Jeśli chcesz, aby przeglądarka natychmiast przydzieliła obszar o wymaganym rozmiarze dla tego elementu, a nie zmieniała go po otrzymaniu danych o rozmiarze załadowanego obrazu, musisz określić Atrybuty Szerokość i Wysokość.

Jeśli je ustawisz, przeglądarka użytkownika utworzy obszar z odpowiednie rozmiary a Twoje zdjęcie zmieści się tam, nawet jeśli będzie miało inny rozmiar. Nawiasem mówiąc, czasami natkniesz się na taki błąd na stronach internetowych początkujących webmasterów.

Na serwer wrzucany jest ogromny plik graficzny ważący kilka megabajtów (od razu po sfotografowaniu bez obróbki), a ścieżka do niego zapisana jest w Src. Aby obraz nie zajmował całego ekranu, do znacznika Img dodawane są Szerokość i Wysokość z akceptowalnymi wymiarami szerokości i wysokości.

A jaki jest wynik? Odwiedzający taką witrynę zauważa frustrująco powolne ładowanie obrazu na stosunkowo niewielki obszar określony wspomnianymi atrybutami (kilka megabajtów wagi mieści się w rozmiarze 300 na 400 pikseli).

Dlatego natychmiast wykonaj zdjęcia do opublikowania w Internecie o tym samym rozmiarze, jaki będziesz wyświetlać na stronie, i wprowadź szerokość i wysokość znacznika Img. Szanuj swoich użytkowników i nie marnuj ich ruchu (zwłaszcza mobilnego). jest to możliwe np Obraz FastStone Viewer lub dowolny inny edytor graficzny, np. .

Swoją drogą, oprócz wcześniejszego zmniejszania rozmiaru obrazków umieszczanych na stronach serwisu, należy z najwyższą ostrożnością podejść także do optymalizacji wagi. Czasami udaje się osiągnąć wielokrotne zmniejszenie wagi plików graficznych bez utraty jakości, co przełoży się na znacznie szybsze ładowanie i zmniejszenie obciążenia serwera hostingowego. Można w tym celu skorzystać z bardzo wygodnego i skutecznego narzędzia.

Zobaczmy teraz, jak określić ścieżkę do pliku obrazu w Src znacznika Img. Właściwie możesz użyć i, o czym pisałem już szczegółowo w powyższym artykule. Wszystko zależy od niuansów i wygody.

Te. Src może zawierać na przykład następujące wpisy:

W pierwszym przypadku plik graficzny powinien znajdować się w tym samym folderze, co plik Twojej strony internetowej (jeśli używasz , dwie pierwsze opcje raczej nie będą Ci odpowiadać, chociaż jest to bardzo wygodne przy ustawianiu obrazu tła w CSS). W drugim przypadku grafika znajduje się w podfolderze względem pliku Twojej strony, cóż, w trzecim przypadku wskazany jest Src absolutna ścieżka do pliku obrazu.

Ogólnie rzecz biorąc, zgodnie z zasadami języka HTML, na Twoim serwerze musi znajdować się tylko sam dokument ( Strona internetowa), a wszystkie inne dokumenty i pliki (grafiki, filmy, skrypty, style), które zostaną wraz z nim załadowane, mogą znajdować się na różnych serwerach.

Nawiasem mówiąc, jest to jeden ze sposobów na wzrost. Te same liczniki odwiedzin, których prawdopodobnie będziesz używać do monitorowania swoich zasobów, będą również ładować ich informatory i skrypty z hostów innych niż Twój.

Jak wstawić zdjęcie z linkiem, przypisaniem Alt i Tytułu w Img?

Jeśli Img jest z natury elementem wbudowanym, może być po prostu skapitalizować, co oznacza, że ​​nic nie stoi na przeszkodzie, aby obraz stał się linkiem poprzez umieszczenie tego tagu w hiperłączu. W sumie pisałem już o tym szczegółowo w niedawnym artykule o tym, ale nie byłoby grzechem, gdybym się trochę powtórzył.

Ru/image/webcamxp.png">

W przeglądarce IE wokół połączonego obrazu pojawi się ramka o szerokości trzech pikseli. Aby go usunąć, musisz dodać go do tagu Img Atrybut graniczny z wartością zerową:

We wszystkich przypadkach, gdy z jakiegoś powodu nie można załadować pliku graficznego Dokument HTML(ścieżka do niego nie jest poprawnie napisana lub coś innego), special Atrybut alternatywny.

Alt działa jako alternatywny widok obrazu. Co się stanie, jeśli grafika nie zostanie załadowana? Przeglądarka i tak po wykryciu w kodzie elementu Img tworzy dla niego obszar, który w zależności od przeglądarki używanej przez użytkownika może albo pozostać dany rozmiar lub upadek.

Ale żeby użytkownik miał pomysł, że w tym miejscu na stronie powinien znajdować się obrazek, wpisujesz Alt w Img, gdzie wpisujesz tekst opisujący, co ma się tu znaleźć na obrazku. Zawartość Alt zostanie wyświetlona w obszarze wyładowanego zdjęcia.

No i poza tym dla obrazów w kodzie HTML, a także dla innych elementów języka znaczniki hipertekstowe(na przykład wszystkie dla tych samych hiperłączy) możliwe jest, gdy użytkownik najedzie na nie kursorem myszy, aby wyświetlić mu towarzyszący tekst.

Odbywa się to za pomocą specjalnego atrybutu Tytuł, który w naszym przypadku jest wstawiany do Img. Zasadniczo jest to podpowiedź i można jej użyć do prawie wszystkiego, co jest widoczne na stronie. Elementy HTML kod, gdy trzeba coś dokładniej wyjaśnić.

Nawiasem mówiąc, poprzednio dodanie tekstu alternatywnego również prowadziło do podpowiedzi, ale teraz to zachowanie zostało porzucone i ten atrybut służy teraz głównie jako tekst alternatywny, a tytuł jest używany wyłącznie w przypadku podpowiedzi.

Pngе" wysokość="71" szerokość="90" alt="" title="">

W rzeczywistości zawartość Alt i Etykieta tytułowa Img nie tylko służy wygodzie osób odwiedzających Twoją witrynę, ale może również odegrać bardzo znaczącą rolę w powodzeniu promocji Twojego projektu.

Aby to zrobić trzeba pamiętać o zastosowaniu , o czym pisałem już wielokrotnie na przykład w artykule o lub w publikacji o .

Słowa kluczowe w Alt i Title (szczególnie w Alt) mogą znacznie się poprawić, podobnie jak w usługach. Jednak z tym trzeba być ostrożnym, bo pod nią dość łatwo jest zejść.

Zawijanie tekstu wokół obrazu w formacie HTML — atrybut Align znacznika Img

Porozmawiajmy teraz o wyrównywaniu wstawionych obrazów w kodzie HTML. Wszystkie cztery elementy wbudowane przy zastąpionej treści (Img, Iframe, Object i Embed) możliwe jest wyrównanie za pomocą atrybutu Wyrównywać. Ale tak naprawdę dotyczy to tylko elementów blokowych, a wspomniane znaczniki są znacznikami wbudowanymi.

Dlatego niektóre wartości Align dla Img (na przykład ustawienie tekstu, który będzie otaczał obraz) będą miały zupełnie inne znaczenie niż w przypadku użycia tego samego atrybutu w elementy blokowe( i tak dalej.).

Ogólnie rzecz biorąc, wyrównywanie obrazów z za pomocą Wyrównaj stosowane w Img można podzielić na dwie grupy.

Co się zatem stanie, gdy w tekście dokumentu wstawimy plik graficzny? W rzeczywistości wygląda to jak jedna wielka litera:

Domyślnie stosowane jest wyrównanie do dołu, tj. dodanie atrybutu wyrównania="bottom" do elementu Img niczego nie zmieni. Możesz jednak spróbować ustawić wyrównanie obrazu do górnej krawędzi, dodając do elementu wyrównanie="top":

PNG" Align="top">

W tym przypadku tekst w wierszu, w którym znajduje się zdjęcie, został wyrównany wzdłuż jego górnej krawędzi.

Istnieje inna możliwa wartość tego atrybutu wyrównanie = „środek”:

PNG" Align="middle">

W takim przypadku tekst w linii z obrazem zostanie wyrównany na środku tego samego obrazu.

Ale oprócz wyrównania w pionie, HTML zapewnia również opływać zdjęcia z tekstem, do czego służą wartości - Lewo i prawo. Ta grupa wartości atrybutów Align bardzo różni się od poprzedniej.

Stosując wartości Left i Right wewnątrz elementu Img, uzyskujemy tzw. zawijanie tekstu wokół obrazu, które jest określone w kodzie HTML. W tym przypadku rysunek staje się, a tekst zaczyna wokół niego przepływać.

Na przykład z wyrównaniem="left" otrzymamy następujący wynik:

PNG" Align="left">

Wartość Left w Img oznacza, że ​​zdjęcie unosi się w powietrzu lewa strona, a tekst opływa go po prawej stronie. W przypadku wyrównania = „w prawo” obraz będzie się unosić prawa strona, a jego tekst będzie płynął po lewej stronie:

PNG" Align="right">

Ustawiając tekst tak, aby otaczał obraz, należy zachować jedno zastrzeżenie – tekst znajduje się zbyt blisko niego, co powoduje nieprzyjemny wygląd efekt klejenia. Ten problem dość łatwe do rozwiązania za pomocą , ale także w czysty HTML jest rozwiązanie.

Można w tym celu skorzystać z atrybutów elementu Img − Hspace i Vspace. Służą do odsuwania tekstu zawijającego od obrazu. Hspace określa lewe i prawe dopełnienie obrazu do otaczającego tekstu, a Vspace określa górę i dół. Wcięcia ustawia się na przykład:

Png" wyrównania="left" hspace="30" vspace="30">

Tło - jak zrobić tło dla strony internetowej w czystym HTML

Pliki graficzne można wykorzystać nie tylko jako elementy kodu strony, ale także jako wypełnienie jako jej tło. Ogólnie rzecz biorąc, w Język HTML można ustawić według koloru lub za pomocą obrazów tła. Cóż, używając Właściwości CSS są jednym z głównych elementów, ponieważ na stronach nowoczesnych witryn nie są wstawiane żadne elementy projektu za pomocą Img.

Dlatego obrazy tła grają bardzo ważna rola w nowoczesnym układzie z za pomocą CSS(porozmawiamy o tym w artykule poniżej). Na razie przyjrzymy się, jak to wszystko jest zrobione w czystym HTML za pomocą atrybutu Tło element Body i , pokazuje ścieżkę do pliku graficznego, którym zostanie wypełniona strona internetowa lub tabela (lub jej pojedyncza komórka).

Na przykład dodanie następującego atrybutu tła do treści:

Otrzymamy tło dla naszej strony, składające się ze zwielokrotnionego zdjęcia, które niczym kafelek wypełni cały widoczny obszar:

Obraz tła, zaczynając od lewej górny róg, jest powtarzany wzdłuż dwóch osi jednocześnie (odciętej i rzędnej). Następny łączy się z poprzednim itd. Nawiasem mówiąc, jeśli chcesz wypełnić tło strony lub tabeli jednym kolorem, w tym celu musisz użyć nie Tła, ale atrybutu kolor, jako wartość, którą możesz wstawić na przykład w ten sposób:

Następnie otrzymujemy następujący kolor tła określony przez bgcolor:

Podobnie jak w przypadku atrybutu tła, za pomocą bgcolor można również ustawić tło całej tabeli lub jej poszczególnych elementów.

Powodzenia! Do zobaczenia wkrótce na stronach bloga

Możesz obejrzeć więcej filmów, przechodząc do

");">

Możesz być zainteresowany

Białe znaki i ich formatowanie kodu w HTML oraz znaki specjalne spacja nierozrywająca i inne mnemoniki
Tagi nagłówka i atrybuty H1-H6, linia pozioma Hr, podział wiersza Br i podział akapitu P zgodnie ze standardem HTML 4.01
Tabele w HTML - Tagi Table, Tr i Td oraz Colspan, Cellpadding, Cellspacing i Rowspan do ich tworzenia Wybierz, Opcja, Obszar tekstowy, Etykieta, Zestaw pól, Legenda - tagi Formularze HTML listy rozwijane i pole tekstowe
Osadź i obiektuj - znaczniki HTML służące do wyświetlania treści multimedialnych (wideo, flash, audio) na stronach internetowych

Trudno znaleźć w Internecie stronę internetową, która nie zawierałaby zdjęć i nie jest to zaskakujące, ponieważ to one stanowią główną część projektu strony internetowej, która nadaje jej zapadający w pamięć wygląd. A dobry projekt strona internetowa jest kluczem do jej pomyślnego rozwoju. Aby wyświetlić obrazy w formacie HTML, istnieje tylko jeden tag .

1. Składnia tagu

Opis obrazu" src ="URL " [atrybuty]>

Należy pamiętać, że ten tag jest pojedynczy i nie wymaga znacznik zamykający .

Wymagany jest atrybut src. Służy do podania adresu wyświetlanego obrazu. Możesz określić bezwzględny lub względny adres URL. Jeśli nie podasz adresu lub wpiszesz go z błędem, obraz nie zostanie wyświetlony.

Atrybut alt="opis" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

Pozostałe atrybuty są opcjonalne; przyjrzymy się im poniżej. Najpierw podamy prosty przykład wysyłania obrazu do formatu HTML.

2. Jak wstawić obrazek do HTML

Aby wstawić obraz do HTML, użyj tagu . Przyjrzeliśmy się składni nieco wyżej. Podajmy praktyczne przykłady.

Przykład 2.1. Używanie tagu

... ...

Ten kod

W w tym przykładzie wskazaliśmy bezpośredni adres obrazu ze zdjęć w Yandex Photos. Najczęściej podawane są linki do zdjęć znajdujących się pod tym samym adresem URL. Na przykład src="/img/kartinka.jpg", tj. wskazany jest adres względny.

Możliwe jest umieszczenie kilku zdjęć w rzędzie. Jeśli nie mieszczą się w jednej linii, automatycznie przejdą do następnej.

Przykład 2.2. Wyświetlanie kilku obrazów w formacie HTML jeden po drugim

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Konwertuje na następujący tekst na stronie:

Gdybyśmy mieli opublikować inne zdjęcie, byłoby to z Nowa linia, bo w tym już by się nie zmieścił.

Przykład 2.3. Użycie tekstu alternatywnego (alt) w img

Zalecane jest dodanie do tagu tekstu alternatywnego (atrybut alt). , aby zabezpieczyć się na wypadek, gdyby zdjęcie nie było dostępne. Poniżej znajduje się przykład użycia tekstu alternatywnego. W pierwszym przypadku nie określiliśmy rozmiaru obrazka, ale w drugim tak.

... Przykładowy obraz" src ="321.jpg "> ...

Konwertuje na następujący tekst na stronie:

Gdybyśmy umieścili inny obraz, znalazłby się on w nowej linii, ponieważ nie mieściłby się już w tej linii.

Przyjrzyjmy się teraz bliżej wszystkim atrybutom tagów .

3. Atrybuty i właściwości znaczników

1. Właściwość wyrównania="parametr" - określa wyrównanie obrazu. Ta wartość wpływa również na sposób opływania tekstu wokół obrazu. Może zaakceptować następujące parametry:

• wyrównanie do lewej – do lewej
• środek — wyrównaj środek obrazu do linii bazowej bieżąca linia
• dół — wyrównaj dolną krawędź obrazu do otaczającego go tekstu
• top — górna krawędź obrazu jest wyrównana ze sobą wysokim elementem bieżąca linia
• prawo - wyrównanie do prawej

Przykład 3.1. Wyrównywanie obrazu w HTML do prawej

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Konwertuje na następujący tekst na stronie:

2. Właściwość alt="tekst" - подсказка/описание картинки. Выполняет сразу две важные функции:!}

• Pokazuje podpowiedź po najechaniu kursorem
• Jeżeli obrazy są wyłączone w przeglądarce, zostanie wyświetlony ten tekst

Ten atrybut jest również bardzo ważny przy rankingu obrazów w Yandex Images i obrazy Google. Należy go dodać do każdego obrazu, ponieważ jest to jeden z czynników algorytmów wyszukiwarek.

Przykład 3.2. Wyprowadzanie obrazu w formacie HTML z ramką (obramowaniem)

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Konwertuje na następujący tekst na stronie:

4. Właściwość bordercolor="color" - ustawia kolor obramowania otaczającego obraz. Ma sens tylko wtedy, gdy atrybut granicy jest większy niż 0.

Przykład 3.3. Wyprowadzanie obrazu w formacie HTML z kolorową ramką

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Wynik można zobaczyć tuż powyżej.

Notatka

Można ustawić atrybuty border i bordercolor Style CSS do img:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

5. Właściwość height="NUMBER" - ustawia wysokość obrazu: w pikselach lub procentowo. Przykładowo, jeśli obrazek ma rozmiar 400x200, a my podajemy wysokość 150 pikseli, to zostaje on skompresowany do rozmiaru 300x150 (25% mniejszy), tj. proporcjonalnie.

6. Właściwość szerokość="NUMBER" - ustawia szerokość obrazu: w pikselach lub procentowo. Na przykład, jeśli obraz ma rozmiar 1000x800, a szerokość jest określona jako 1200 pikseli, to zostanie on automatycznie powiększony o 20% do rozmiaru 1200x960.

7. Właściwość hspace="NUMBER" - ustawia poziome wcięcie obrazu w pikselach względem innych obiektów HTML.

8. Właściwość vspace="NUMBER" - ustawia odstęp w pionie obrazu w pikselach od innych obiektów HTML.

Notatka

Zamiast hspace i vspace radzę zastosować stary i sprawdzony margines (więcej na ten temat przeczytasz w lekcji o opisywaniu stylów HTML). Przypomnę krótko:

• margines u góry: X px; (X - górne wcięcie)
• margines na dole: Y px; (Y - wcięcie dolne)
• margines po lewej stronie: L px; (L - wcięcie z lewej strony)
• margines po prawej: R px; (R - wcięcie z prawej strony)

Ustaw wcięcia obiektów w pikselach. Dopuszczalne są wartości ujemne. Domyślnie dziedziczy wartość przodka lub ma wartość 0.

Na przykład. Lewy margines wynosi 50 pikseli, a górny margines wynosi 10 pikseli.

... margines u góry: 10 pikseli; margines po lewej stronie: 50px"źródło=" https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Konwertuje na następujący tekst na stronie:

W tym przykładzie wcięcie u góry miało wielkość 10 pikseli, po lewej stronie 50 pikseli.

9. Właściwość class="nazwa_klasy" - możesz przypisać klasę do obrazu, aby ustawić styl dla wszystkich obrazów tej klasy.

4. Jak zrobić zdjęcie jako link

To pytanie pojawia się wśród młodych webmasterów. To naprawdę bardzo proste. Aby to zrobić, po prostu opraw tag znacznik (link).

Na przykład

... Adres_obrazu"> ...

5. Jak zaokrąglić rogi obrazu

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"style="border-promień: 30px">

Drogi czytelniku, teraz dowiedziałeś się znacznie więcej o znaczniku HTML img. Teraz radzę ci przejść do następnej lekcji.

Mamy nadzieję, że ten artykuł będzie dla Ciebie przydatny. Miłej lektury!

Obrazy błyskawicznie pozwalają nam zrozumieć, jak interesująca może być dla nas dana strona czy artykuł, budują nastrój, potrafią odsłonić temat w nowy sposób. Czasem jedno zdjęcie jest warte tysiąca słów.

Nie powinieneś jednak brać w nich udziału, jeśli nie masz Instagrama ani sklepu internetowego. Zaleca się, aby obrazy:

• miały charakter informacyjny
• dopasuj kolorystykę swojej witryny
• były odpowiednie

Jeśli nie posiadasz odpowiedniego zdjęcia, możesz skorzystać z tzw fotostock (bank zdjęć) - miejsce, w którym przechowywanych jest wiele fotografii, ilustracji i grafik wektorowych. Istnieje wiele takich zasobów, być może nawet słyszałeś o jednym z największych - Shutterstock, ale pobieranie ich jest płatne.

Dla tych, którzy nie lubią przepłacać, na końcu przygotowaliśmy artykuł premia- lista kilku banków zdjęć, z których możesz pobrać ogromną ilość wysokiej jakości pięknych materiałów zupełnie za darmo :)

Formaty obrazów

W sieci WWW używane są głównie 3 typy obrazów:

gif(Format wymiany grafiki - format wymiany obrazów)

Jest to pierwszy format, który zaczął być używany w Internecie. Zaletami tego formatu jest dostępność animacje i mały rozmiar, strona ładuje się szybko. Ponadto wspiera przejrzystość. Wada - tylko używany 256 kolorów(właściwie dlatego rozmiar jest mały), tj. nie można go używać do obrazów pełnokolorowych.

JPEG, znany jako jpg(Wspólna Grupa Ekspertów Fotograficznych - Wspólna Grupa Ekspertów Fotograficznych - to jest nazwa organizacji rozwojowej)

nadaje się do tworzenia pełnokolorowych obrazów o wysokiej jakości, zdjęcia. Rozmiar takich obrazów jest duży, więc zwykle powodują duże obciążenie serwera. Jeśli chcesz skompresować plik JPEG (w celu uzyskania mniejszej wagi obrazu), zalecamy przyjęcie rozmiaru końcowego obrazu wielokrotność ośmiu , więc utrata jakości będzie minimalna.

png(Przenośna Grafika Sieciowa - Przenośna Grafika Sieciowa. Wymawiane tak samo jak ping, tj. )

format ten został pierwotnie opracowany dla Internetu, tj. Obraz zazwyczaj niewiele waży i nie spowalnia strony podczas ładowania. Format ten został stworzony, aby zastąpić przestarzały gif, ale w przeciwieństwie do niego nie obsługuje animacji. PNG-8, podobnie jak gif, używa tylko 256 kolorów. Format png-24 obsługuje 16 milionów kolorów, chociaż jest już dość ciężki. PNG-32 zawiera tę samą liczbę kolorów co png-24, a dodatkowo pozwala uzyskać obraz z przezroczystym tłem i możesz dostosować stopień przezroczystości. Zmniejszanie rozmiaru PNG nie powoduje utraty jakości kolorów.

Podsumujmy

gif- do animacji

JPEG- do zdjęć

png- dla ikon, przycisków, tła, logo, zrzutów ekranu, rysunków, tekstów, fotografii z przezroczystym tłem

Wstawianie obrazu do pliku HTML

Aby dodać zdjęcie na stronę użyj etykietka (z angielskiego obrazu - obraz, obraz). Jest to pojedynczy znacznik i nie wymaga znacznika zamykającego. Ten tag zawiera atrybuty w środku.

Atrybut źródło(z angielskiego źródła - source) wskazuje ścieżkę do pliku (miejsce, w którym znajduje się obraz). Jeśli zdjęcie znajduje się na Twoim komputerze (strona jest jeszcze w fazie rozwoju) lub na serwerze, użyj linku względnego. Jeśli obraz pochodzi z sieci, potrzebny jest link bezwzględny. Przeczytaj jak to zrobić w artykule „Linki”.

Aby więc połączyć obraz ze swoją stroną internetową, musisz napisać taki kod:

atrybut alternatywny(z angielskiej alternatywy - alternatywa) wskazuje tekst, który użytkownik zobaczy, jeśli obraz się nie załaduje. Ścieżka jest błędna, zdjęcie zostało usunięte, Zły internet- powodów może być wiele i wskazane jest, aby ktoś zrozumiał, co kryje się za tą znienawidzoną ikoną.

Wyszukiwarki zwracają szczególną uwagę na to, aby ten atrybut był wypełniony. A walidator HTML (źródło służące do sprawdzania poprawności kodu) zaakceptuje nieobecność atrybut alternatywny jako błąd. Jeśli wszystkie atrybuty zostaną wypełnione i w miarę możliwości będą zawierać również słowa kluczowe - widoczność Twojej witryny znacznie wzrośnie, tj. będzie częściej pokazywany w wynikach wyszukiwania. To tak z zakresu SEO i na tym etapie wystarczy, że wiemy, że taki atrybut istnieje, a „żywa” witryna musi mieć go uzupełniony. Dopóki strona znajduje się na naszym dysku, można ją pozostawić pustą.

W poniższym przykładzie celowo podaliśmy nieistniejącą ścieżkę do obrazu, aby można było zobaczyć, jak działa atrybut alt

Wysokość i szerokość obrazów

Możesz także ustawić wysokość i szerokość obrazu, jeśli oryginalny obraz jest np. więcej niż potrzebujesz.

W HTML5 zaleca się to zrobić za pomocą CSS lub atrybut stylu , lubię to:

W tym przykładzie przyjęliśmy 30% szerokości nie oryginalnego obrazu, ale rozmiaru okna przeglądarki. Gdy szerokość = 100%, obraz otwiera się na pełną szerokość przeglądarki. Zapamiętaj tę funkcję procent jako jednostki miary.

Swoją drogą, gdybyśmy napisali tylko szerokość, wynik byłby taki sam, spróbuj:

< img src = „https://site/tutorials/wp-content/uploads/2016/07/panda.jpg” alt = „panda na drzewie” styl = "szerokość:30%;" >

Możesz także ustawić szerokość i wysokość pikseli. W przypadku naszej pandy, której oryginalne wymiary to 1196 x 796 pikseli, aby zwierzę nie ucierpiało przy ściskaniu, musimy zachować proporcje, a tutaj nie obejdzie się bez kalkulatora. Powiedzmy, że chcemy zmniejszyć rozmiar obrazu 3 razy, a następnie musimy ustawić wymiary na 399 x 265 pikseli.

Należy pamiętać, że jeśli powiększymy obraz proporcjonalnie, to wystarczy podać tylko jeden parametr np. szerokość. Inteligentna przeglądarka sama obliczy pełny rozmiar obrazu.

Spróbuj uruchomić ten kod i spójrz na wynik:

< img src = „https://site/tutorials/wp-content/uploads/2016/07/panda.jpg” alt = „panda na drzewie” styl = "szerokość: 399 pikseli;" >

Zawsze ustawiaj wymiary obrazu. Zazwyczaj obrazy ładują się dłużej niż reszta kodu HTML. Jeśli przeglądarka wie, ile miejsca zarezerwować na obrazy, może kontynuować ładowanie witryny bez czekania na załadowanie obrazów.

Trochę kulki na mole

Jeśli zdarzy ci się majstrować przy kodzie strony utworzonej w HTML-4 lub nawet wcześniej, zauważysz, że rozmiary obrazów są ustawiane za pomocą specjalnych atrybuty szerokości I wysokość. Jest to przestarzała metoda, chociaż nadal obowiązuje w HTML5. Zalecamy jednak używanie stylu, ponieważ Na atrybuty szerokości i wysokości mogą mieć wpływ wewnętrzne lub zewnętrzne style, które będą widoczne w przeglądarce lub pliku CSS. Zajmiemy się tym bardziej szczegółowo, gdy przyjrzymy się CSS, ale na razie spójrzmy tylko na przykład wpływu stylów na atrybuty wysokości i szerokości.

W tym oknie znajdują się 3 zakładki: na pierwszej widzisz kod HTML, na drugiej kod CSS, a na ostatniej - jak zawsze, wynik. Działa to tak, jakby pierwsza karta była plikiem Index.html, druga plikiem style.css, a trzecia przeglądarką. Zatem teraz nasz CSS mówi, że wszystkie elementy ze znacznikiem img mają szerokość 100%. Domyślne rozmiary atrybutów szerokości i wysokości podawane są w pikselach, więc nie ma potrzeby dodawania tutaj żadnych jednostek.

Różnica w wynikach jest wyraźna :)

Również w starszych wersjach HTML używano następujących atrybutów:

wyrównywać, który służył do wyrównania obrazu w poziomie lub w pionie.

hspace- wcięcie po lewej i prawej stronie obrazu do otaczającej treści (na przykład tekstu lub sąsiadującego obrazu)

vsprzestrzeń- wcięcie powyżej i poniżej od obrazu do otaczającej go treści.

granica- ustaw grubość ramki wokół obrazu (domyślnie jest to zero)

Obecnie cała ta manipulacja (i wiele więcej) odbywa się za pomocą CSS, więc postanowiliśmy nie zawracać Ci tym głowy. Jeśli nadal jesteś zainteresowany pracą z tymi atrybutami napisz w komentarzach, dodamy ten element :)

Umieszczenie obrazu w kodzie

Skąd umieszczamy nasz tag zależy od tego jak będzie on wyświetlany w przeglądarce.

Przykład nr 1 – przed akapitem:

Elementy takie jak

I

odnosić się do elementy blokowe . Zawsze zaczynają się od nowej linii i zajmują całą dostępną szerokość okna przeglądarki. Jeśli zajmiesz pierwsze miejsce , a po nim element blokowy, np. akapit, zostanie on przeniesiony do następnej linii.

Przykład nr 2 – na początku akapitu

Jest to element wbudowany, mieści się w elemencie blokowym i nie rozpoczyna nowej linii. W powyższym przykładzie tekst otacza obraz, ponieważ kod zarejestrowany w środku

Podpisy do ilustracji

Aby oznaczyć lub podpisać zdjęcie na stronie, użyj etykietka

(z angielskiego rysunku - rysunek). Znacznik ten wskazuje, że zostaną w nim umieszczone treści takie jak ilustracje, zdjęcia, diagramy itp.

Etykietka