Html etiketini kullanarak görseli web sayfasında farklı yerlere taşımak istiyorsak aşağıda verilen adımları takip etmemiz gerekmektedir.
Aşama 1: Öncelikle herhangi bir metin düzenleyiciye Html kodunu yazmamız veya görseli hizalamak istediğimiz metin düzenleyicide mevcut Html dosyasını açmamız gerekiyor:
Align an Image Hello User! This page helps us to understandhow to specify an image at a particular position in a pargraph using the Html tag. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp">
Adım 2: Şimdi imleci hizalamak istediğimiz görüntünün etiketi. Daha sonra konumu belirtmek için img etiketinin align özelliğini kullanmamız gerekiyor. Bu nedenle, align niteliğini aşağıdaki blokta anlatıldığı gibi yazmamız gerekiyor.
<img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt>
Aşama 3: Konumu belirledikten sonra Html kodunu kaydedip dosyayı çalıştırmamız gerekiyor. Paragraftaki görseli farklı konumlarda gösteren aşağıdaki çeşitli Html kodları vardır:
1. Orta
Bu hizalama değeri görüntüyü ortada ayarlar.
Align an Image at middle Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is first section in this page which describes how to specify an image at middle in a pargraph using the Html tag.</p>Şimdi Test Edin
Yukarıdaki Html kodunun çıktısı aşağıdaki Ekran Görüntüsünde gösterilmektedir:
2. Üst
Bu hizalama değeri görüntüyü en üstte ayarlar.
Align an Image at Top Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is Second section in this page which describes how to specify an image at top in a paragraph using the Html tag.</p>Şimdi Test Edin
Yukarıdaki Html kodunun çıktısı aşağıdaki Ekran Görüntüsünde gösterilmektedir:
3. Alt
Bu hizalama değeri görüntüyü en altta ayarlar.
Align an Image at bottom Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is third section in this page which describes how to specify an image at bottom in a paragraph using the Html tag.</p>Şimdi Test Edin
Yukarıdaki Html kodunun çıktısı aşağıdaki Ekran Görüntüsünde gösterilmektedir:
4 sol
Bu hizalama değeri görüntüyü sol tarafa ayarlar.
Align an Image at left Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fourth section in this page which describes how to specify an image at left side of a paragraph using the Html tag.</p>Şimdi Test Edin
Yukarıdaki Html kodunun çıktısı aşağıdaki Ekran Görüntüsünde gösterilmektedir:
5. Sağ
Bu hizalama değeri görüntüyü sağda ayarlar.
Align an Image at Right Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fifth section in this page which describes how to specify an image at right side of a paragraph using the Html tag.</p>Şimdi Test Edin
Yukarıdaki Html kodunun çıktısı aşağıdaki Ekran Görüntüsünde gösterilmektedir:
