Wstaw zdjęcia za pomocą HTML - jak to działa
Jeśli chcesz wstawić obraz na swojej stronie za pomocą HTML, użyj tagu img. Przeczytaj tutaj, jak dokładnie to działa i na co musisz uważać.
Jak wstawiać obrazy za pomocą HTML - podstawy
- Z dnia
można wstawiać zdjęcia. - Źródło obrazu podane jest w tagu:
wstawia plik „testbild.webp” z podfolderu „zdjęcia” na stronie internetowej. - Możliwe są również źródła zewnętrzne za pośrednictwem adresu URL:
integruje logo CHIP z naszych serwerów.
Atrybuty HTML dla osadzonych obrazów
W atrybucie img można dodać wiele atrybutów:
- Użyj „szerokość” i „wysokość”, aby określić rozmiar obrazu na stronie: obraz
jest wyświetlany w kwadracie o długości boku 100 pikseli. - Za pomocą „alt” definiujesz alternatywny tekst, który będzie wyświetlany, jeśli nie można załadować odpowiedniego obrazu. Zawsze należy ustawić ten atrybut podczas wstawiania obrazów za pomocą HTML.
- Atrybut „granicy” określa grubość ramki w pikselach. Zdjęcie z
ma względnie grubą ramkę z pięcioma pikselami. - Użyj „wyrównaj”, aby wyrównać grafikę. Wartości tego atrybutu to „dolny”, „górny”, „środkowy”, „lewy”, „prawy” i „środkowy”.
- Za pomocą „hspace” i „vspace” możesz (poziomo i pionowo) ustawić odległość do obrazu.
Jakiego formatu powinienem użyć?
Istnieją różne formaty obrazów, które można uwzględnić w kodzie HTML.
- JPG: obrazy w formacie JPG są najczęściej używane na stronach internetowych. Ten format reprezentuje 16, 7 miliona kolorów, a ponadto plik JPG można bardzo dobrze skompresować. Plik obrazu może być zatem bardzo mały, co umożliwia szybki czas ładowania.
- PNG: format PNG może również wyświetlać 16, 7 miliona kolorów i może być skompresowany. Zaletą w stosunku do formatu JPG jest to, że kompresja jest możliwa bez strat.
- Obszary zdefiniowane w formacie PNG można również wyświetlać w przejrzysty sposób. Jednak bardzo stare przeglądarki mają problemy z wyświetlaniem folii.
- GIF: Jeśli chcesz wstawiać ruchome obrazy za pomocą HTML, odpowiedni jest format GIF. W tym formacie wyświetlanych jest tylko 256 kolorów, a kompresja odbywa się automatycznie bez żadnych opcji ustawień.
- Format GIF najlepiej nadaje się do małych, animowanych grafik lub logo. Aby zapewnić harmonijne dopasowanie logo do strony, folie mogą być używane w formacie GIF, takim jak PNG.
przykładem HTML
- To integruje logo CHIP z naszej strony internetowej.
- Jest wyświetlany z wysokością 100 pikseli i szerokością 200 pikseli.
- Jeśli nie można go załadować, „Logo CHIP” jest wyświetlane jako pusty tekst.
- Zdjęcie jest otoczone dwupikselową ramką.
- Jest wyrównany do prawej i ma 50 pikseli od innych elementów bocznych.