HTML - obrazy

Obrazy są bardzo ważne, aby upiększyć, a także przedstawić wiele złożonych koncepcji w prosty sposób na Twojej stronie internetowej. Ten samouczek przeprowadzi Cię przez proste kroki, aby używać obrazów na swoich stronach internetowych.

Umieść obraz

Możesz wstawić dowolny obraz na swoją stronę internetową, używając <img>etykietka. Poniżej znajduje się prosta składnia użycia tego tagu.

<img src = "Image URL" ... attributes-list/>

Znacznik <img> jest pustym tagiem, co oznacza, że może zawierać tylko listę atrybutów i nie ma tagu zamykającego.

Przykład

Aby wypróbować następujący przykład, zachowajmy nasz plik HTML test.htm i plik obrazu test.png w tym samym katalogu -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

To da następujący wynik -

Możesz użyć pliku obrazu PNG, JPEG lub GIF w zależności od wygody, ale upewnij się, że podałeś poprawną nazwę pliku obrazu w srcatrybut. W nazwie obrazu jest zawsze rozróżniana wielkość liter.

Plik alt atrybut to obowiązkowy atrybut, który określa alternatywny tekst dla obrazu, jeśli obraz nie może zostać wyświetlony.

Ustaw lokalizację obrazu

Zwykle przechowujemy wszystkie obrazy w oddzielnym katalogu. Zachowajmy więc plik HTML test.htm w naszym katalogu domowym i utwórzmy podkatalogimages wewnątrz katalogu domowego, w którym będziemy przechowywać nasz obraz test.png.

Przykład

Zakładając, że lokalizacja naszego obrazu to „image / test.png”, wypróbuj następujący przykład -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

To da następujący wynik -

Ustaw szerokość / wysokość obrazu

Możesz ustawić szerokość i wysokość obrazu w zależności od wymagań za pomocą width i heightatrybuty. Możesz określić szerokość i wysokość obrazu w pikselach lub w procentach rzeczywistego rozmiaru.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
	
</html>

To da następujący wynik -

Ustaw obramowanie obrazu

Domyślnie obraz będzie miał wokół siebie obramowanie, możesz określić grubość obramowania w pikselach za pomocą atrybutu border. Grubość 0 oznacza brak obramowania wokół obrazu.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
	
</html>

To da następujący wynik -

Ustaw wyrównanie obrazu

Domyślnie obraz zostanie wyrównany w lewej części strony, ale możesz użyć align atrybut, aby ustawić go w środku lub w prawo.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
	
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
	
</html>

To da następujący wynik -

Darmowa grafika internetowa

Aby uzyskać bezpłatną grafikę internetową, w tym wzory, możesz zajrzeć do darmowej grafiki internetowej