Podstawy HTML - Wyświetlanie obrazów

• Może 8, 2024

Po opublikowaniu i sformatowaniu tekstu witryny według własnego uznania, czas urozmaicić stronę kilkoma obrazkami. Obrazy mogą nie tylko nadać kolor i żywotność stronom, ale można również użyć ich do generowania efektów tekstowych, które byłyby trudne lub niemożliwe do wykonania w przypadku zwykłego tekstu i formatowania. Na przykład, twój wybór czcionek będzie zwykle ograniczony do małej liczby czcionek, które możesz mieć pewność, że są zainstalowane na komputerach odwiedzających, ponieważ jeśli nie mają zainstalowanej czcionki, nie zobaczą jej na twojej stronie! Za każdym razem, gdy publikujesz tekst w niedostępnej czcionce, komputery odwiedzających renderują go w dowolnej dostępnej czcionce, która jest najbliższa stylowi, co często może zrujnować projekt Twojej witryny.

Z drugiej strony, jeśli korzystasz z programu do edycji obrazów, aby przechwycić tekst w fantazyjnej czcionce i opublikować go jako GIF lub JPEG na swojej stronie, każdy odwiedzający zobaczy go dokładnie tak, jak zamierzałeś - ponieważ jest to teraz zdjęcie tekstu, a nie sam tekst. Dzięki temu możesz używać fantazyjnych czcionek w nagłówkach i grupować je w nietypowy sposób.

Podstawowym znacznikiem używanym do wyświetlania obrazów jest:



Powyższy kod będzie działał idealnie w HTML. Jeśli używasz XHTML lub chcesz mieć pewność, że Twoja strona jest gotowa na XHTML, powinieneś dodać ukośnik, aby zamknąć tag, ponieważ w XHTML nie możesz używać tagów otwartych:



„Src” jest skrótem od źródła i użyjesz go do określenia ścieżki pliku do twojego obrazu - innymi słowy, aby powiedzieć przeglądarce, gdzie można znaleźć obraz w Twojej witrynie. Jeśli przechowujesz swoje obrazy w tym samym folderze co strony internetowe, nie musisz umieszczać folderu w tekście „src” - wystarczy wpisać nazwę pliku obrazu.

Po określeniu źródła obrazu możesz ulepszyć tę podstawową strukturę o różne opcjonalne atrybuty, aby uzyskać jak najwięcej ze swoich zdjęć. Jednym z atrybutów, którego prawie zawsze powinieneś używać, jest atrybut „alt”. Pozwala to określić, jaki tekst ma wyświetlać przeglądarka, jeśli z jakiegoś powodu nie może wyświetlić Twojego obrazu. Tekst „alt” jest przygotowany w następujący sposób:



Innym przydatnym zestawem atrybutów są tagi „szerokość” i „wysokość”. Pozwalają one wyświetlać obrazy w innym rozmiarze niż rzeczywisty rozmiar obrazu. Możesz ich użyć do ulepszenia obrazu, aby idealnie pasował do ogólnego projektu strony. Jednak generalnie lepiej jest zmienić rzeczywisty rozmiar obrazu za pomocą programów do edycji obrazu, a następnie opublikować obraz w trybie online, z dwóch powodów. Po pierwsze, oprogramowanie do edycji obrazu prawie zawsze daje lepszy efekt niż ręczne modyfikowanie rozmiaru. Po drugie, zmiana tagów „szerokość” i „wysokość” nie zmienia rzeczywistego rozmiaru pliku obrazu, więc jeśli masz ogromny obraz, który wyświetlasz jako miniaturę, załadowanie obrazu zajmie tyle samo czasu i przeżuje tak samo jak duża przepustowość, jakbyś ją wyświetlał w pełnym rozmiarze.

Określając rozmiar obrazu, możesz podać wysokość, szerokość lub oba te parametry. Rozmiary są określone przez piksel, jak widać poniżej:



Możesz także „wyrównać” swoje obrazy, aby płynnie je dostosowywać do przepływu tekstu. Jeśli wybierzesz wyrównanie do lewej, tekst zacznie się po prawej stronie obrazu. Jeśli wybierzesz wyrównanie do prawej, obraz zostanie wyświetlony po prawej stronie strony, a tekst pojawi się po lewej stronie obrazu, a następnie przejdzie do nowej linii.

Wyrównanie obrazu ustawia się w następujący sposób:



Możesz także ustawić wyrównanie na „górny”, „dolny” lub „środkowy”, aby obraz był wyrównany z górną lub dolną linią tekstu. Jeśli nie określisz wyrównania, obraz zostanie domyślnie ustawiony na „do dołu”.

Na marginesie możesz umieścić atrybuty obrazu (src, align, alt itp.) W dowolnej kolejności w tagach obrazu. Osobiście wolę, aby najpierw wymienić atrybut „src”, ponieważ jest to najbardziej podstawowy atrybut i musi być zawarty w każdym znaczniku obrazu, ale możesz użyć dowolnej sekwencji, która będzie dla ciebie najbardziej naturalna.

Instrukcje Wideo: Dodawanie obrazków w HTML (Może 2024).