Dodaj obraz z HTML

Zawartość

Do kroku
Metoda 1 z 1: Wstawianie obrazów w formacie HTML
Porady
Ostrzeżenia

Dodanie zdjęć do swojej witryny lub profilu w sieci społecznościowej to doskonały sposób na ubieranie swojej strony internetowej. HTML (HyperText Markup Language) ma wiele funkcji do tworzenia stron internetowych, ale na szczęście kod potrzebny do dodania obrazów nie jest zbyt trudny.

Do kroku

Metoda 1 z 1: Wstawianie obrazów w formacie HTML

Prześlij swój obraz do darmowej witryny hostingowej, takiej jak Photobucket lub TinyPic, która umożliwia łączenie na gorąco. Łączenie na gorąco umożliwia bezpośrednie połączenie obrazu z serwerem witryny; niektórzy dostawcy zakazali tego, ponieważ hot-linking wykorzystuje ich przepustowość i zajmuje miejsce na ich serwerach.
- Jeśli masz płatne konto hostingowe, prześlij obrazy bezpośrednio na serwer, na którym znajduje się Twoja witryna. Jest to zawsze bardziej niezawodne niż bezpłatna witryna i wcale nie musi być drogie.
Otwórz nowy dokument w edytorze tekstu (np., Notatnik / Notatnik) lub otwórz stronę w swojej witrynie / profilu, na której możesz bezpośrednio zmienić kod HTML.
Zacznij od img etykietka. Plik img tag jest pusty, co oznacza, że nie jest potrzebny żaden tag zamykający. Jednak w przypadku walidacji XHTML nadal możesz wstawić przed nim spację i ukośnik Lepszy niż znak.
- img />
Dostępnych jest wiele atrybutów, ale tylko jeden jest potrzebny:src. To jest lokalizacja / adres lub także adres URL twojego obrazu.
- img src = "URL obrazu" />
Następnie musisz alt Dodaj atrybut. To pokazuje alternatywny tekst na wypadek, gdyby obraz się nie załadował. Jest to również usługa dla osób niedowidzących, która korzysta z czytników ekranu.
- Jeśli najedziesz kursorem na obraz, ten tekst jest również wyświetlany jako podpowiedź, ale dotyczy to tylko programu Internet Explorer. Rozwiązanie, które działa ze wszystkimi przeglądarkami (Firefox et al.) jest do tego tytuł atrybut do użycia oprócz alt. (Możesz pominąć to drugie, jeśli nie chcesz, aby obraz miał podpowiedź).

Jako przykład:img src = "URL obrazu" alt = "Na wszelki wypadek" title = "Podpowiedź" />

Teraz możesz określić rozmiar obrazu za pomocą wysokość i szerokość atrybut i określając piksele lub wartość procentową. Zwróć uwagę, że zmiana rozmiaru w ten sposób zmienia tylko rozmiar widoku, a nie rozmiar samego obrazu. Aby skrócić czas ładowania obrazu, lepiej jest, zwłaszcza w przypadku dużych obrazów, zmienić ich rozmiar z wyprzedzeniem za pomocą oprogramowania do edycji zdjęć lub usługi online, takiej jak PicResize.com.
- img src = "URL obrazu" alt = "Na wszelki wypadek" title = "Podpowiedź" wysokość = "50%" szerokość = "50%" />
- img src = "URL obrazu" alt = "Na wszelki wypadek" title = "Etykietka" wysokość = "25px" szerokość = "50px" />

Porady

Wartość tych atrybutów jest podawana w pikselach lub w procentach od 1 do 100%.
Obraz można umieścić w dowolnym miejscu na stronie internetowej, korzystając z różnych atrybutów formatowania, takich jak góra, dół, środek, prawo, lewo itp.
Atrybut hspace służy do wstawiania odstępów poziomych po lewej i prawej stronie obrazu, natomiast atrybut vspace służy do zwalniania miejsca na górze i na dole obrazów i innych obiektów.
Nie oddawaj się zbytnio obrazom. To wygląda niechlujnie i nieprofesjonalnie.
Obrazy GIF są odpowiednie w przypadku logo lub kreskówek, ale ten typ pliku jest mniej odpowiedni w przypadku zdjęć i innych obrazów o wielu kolorach.
- Obrazy GIF obsługują tylko 8-bitowe kolory z maksymalnie 256 kolorami obrazu. Należy się zatem spodziewać, że reprodukcja 16- lub 24-bitowej kolorowej ilustracji lub zdjęcia nie będzie tak dobra.
- Obrazy GIF obsługują również przezroczystość. Możliwa jest jedna odrobina przezroczystości, co oznacza, że jeden kolor może być przezroczysty.
- Przeplot jest również obsługiwany przez obrazy GIF, co oznacza, że odwiedzający witrynę zorientuje się, jak będzie wyglądał obraz, zanim zostanie całkowicie załadowany.
- Format GIF obsługuje również animacje.
Upewnij się, że adres URL określa format pliku obrazu (.webp .gif itp.).