Jak wstawić obrazek do HTML na swojej stronie
Dodawanie zdjęć do Twojej witryny lub profilu sieci społecznościowej to świetny sposób na dekorowanie Twojej strony. HTML (Hypertext Markup Language) wyróżnia się dużą liczbą funkcji programistycznych, a kod wymagany do dodawania obrazów jest dość prosty.
Jak wstawić obrazek do HTML?
Prześlij swoje zdjęcie na darmową witrynę do przechowywania obrazów, na przykład Photobucket lub TinyPic, które zapewniają stały dostęp do pobranego pliku. Po skopiowaniu link do obrazu pojawi się bezpośrednio na stronie hostingu. Jeśli jednak płacisz za usługi premium takiej usługi, lepiej użyć dodatkowych funkcji. Jest to bardziej niezawodne, ponieważ w przypadku bezpłatnego hostingu obrazów obrazy czasami nie otwierają się z powodu przeciążenia. Po przesłaniu obrazu do jednej z usług online otwórz nowy dokument na komputerze w edytorze tekstów (na przykład w Notatniku) lub przejdź do panelu edycji żądanej strony witryny (gdzie możesz zmienić kod HTML).
Pisanie tagów
Kontynuując rozmowę o wstawianiu obrazu w HTML, zacznij od tagu IMG. Po nim musisz dodać spację i ukośnik przed zamykającą się postacią. Dlatego musisz wybrać następującą kombinację - <img />. Ponadto dostępnych jest wiele atrybutów, ale tylko jedna z nich jest absolutnie niezbędna. To jest adres lub URL Twojego obrazu. Jest on określony następująco - <img src = "URL_ twojego obrazu" />.
Alternatywny tekst
Następnie, próbując wstawić obrazek w HTML, musisz dodać atrybut Alt. To definiuje tekst alternatywny w przypadku, gdy obraz nie jest ładowany. Taki tekst jest również przeznaczony dla użytkowników niedowidzących, którzy używają czytników ekranu. Po najechaniu myszą kursor myszy na obrazie tekst alternatywny pojawi się w podpowiedzi, ale ta funkcja jest obecna tylko w przeglądarce Internet Explorer. Aby zobaczyć go w innych aplikacjach, będziesz potrzebował specjalnych wtyczek. Aby wprowadzić taką etykietkę, wpisz ją oprócz Alt. (Opcjonalnie można pominąć ten krok). Jeśli użyjesz tej funkcji, link będzie wyglądał następująco:
<img src = "URL_twoj_artykatura" alt = "pop-up_text" "title =" Etykieta narzędzia "/>
Rozmiary i parametry obrazu
Kontynuując stosowanie się do instrukcji wstawiania obrazu w formacie HTML, można dodatkowo określić rozmiar obrazu przy użyciu atrybutów wysokości i szerokości wskazujących w pikselach lub w procentach. Należy pamiętać, że obraz zostanie wyświetlony z powodu zmiany rozmiaru podczas rozruchu. Przeglądarka nadal będzie początkowo używać rzeczywistego rozmiaru obrazu. Z tego powodu, jeśli Twoje zdjęcie jest zbyt duże, lepiej je zmienić. rozmiar z za pomocą programy do edycji zdjęć a nie tylko adres linku. Teraz twój kod może wyglądać mniej więcej tak:
<img src = "Adres URL obrazu" alt = "teksttekstu narzędzia" title = "Etykieta narzędzia" height = "50%" width = "50%" />
<img src = "Adres URL twojego obrazu" alt = "teksttekstu narzędzia" title = "Wysokość etykiety" height = "25px" width = "50px" />
Inne atrybuty
Wartością tych atrybutów jest dodatnia wartość piksela lub procent z oryginałem (1-100%). Mówiąc o tym, jak wstawić obrazek do HTML, można również zauważyć, że można go umieścić w dowolnym miejscu na stronie internetowej z atrybutem wyrównania - góra, dół, środek, prawo, lewo, itp. Atrybut HSPACE służy do wstawiania obrazów poziomo wzdłuż lewej i prawej strony, VSPACE - w celu załadowania w pionie między górą i dołem strony oraz względem innych treści. Jeśli mówimy ogólnie o HTML - jak wstawić zdjęcie i jak dodać zawartość do strony, najważniejsze jest, aby nie przesadzić. W przeciwnym razie twój zasób będzie wyglądał niechlujnie i będzie zbyt "kolorowy". GIF będzie najlepszym rozwiązaniem do wyświetlania logo lub animacji, a JPEG jest bardziej odpowiedni do wysokiej jakości zdjęć i zdjęć.