Metni bir görüntünün etrafına sarmak için koda mı ihtiyacınız var? Normalde bir HTML sayfası oluşturduğunuzda, her şey doğrusal olarak akar, yani bir blok birbiri ardına gelir. Önceki tüm gönderilerim buna bir örnek, yani metin, sonra resim, sonra metin vb.

Bazen bir resmin altına metin eklemek yerine yanına metin eklemek isteyebilirsiniz. Buna görüntünün etrafına metin sarma denir. HTML kullanarak metni kaydırmak aslında oldukça kolaydır . Metni kaydırmak için CSS kullanmanız gerekmediğini unutmayın .

Ancak, bu günlerde W3C , bu tür görevler için HTML yerine CSS kullanılmasını önermektedir . Aşağıda her iki yöntemden de bahsedeceğim, ancak yapabiliyorsanız, duyarlı web sitesi tasarımlarına daha uyarlanabilir olduğundan CSS kullanmak daha iyidir.^(CSS)

HTML kullanarak Resmin Çevresine Metni Sarma

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Önemli^(Fusce) bir nokta. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus ve magnis doğumdan uzak, nascetur alaycı mus. Aliquam a felis vitae augue lobortis dictum. Curabitur taciz pozu laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Metnin görüntünün sağ tarafına sarılması için resmi sola hizalamanız gerekir:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

Metnin solda görünmesini ve görüntünün en sağda görünmesini istiyorsanız, hizalama parametresini "sağ" olarak değiştirmeniz yeterlidir.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Önemli^(Fusce) bir nokta. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus ve magnis doğumdan uzak, nascetur alaycı mus. Aliquam a felis vitae augue lobortis dictum. Curabitur taciz pozu laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

Bu kadar! Oldukça^(Pretty) kolay değil mi? CSS'yi^(CSS) kullanmak isteyeceğiniz tek zaman , resimlere kenar boşlukları eklemek, böylece metin ile resim arasında biraz boşluk kalmasıdır.

Aşağıdaki CSS^(CSS) stil kodunu kullanarak bir resme kenar boşlukları ekleyebilirsiniz :

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

Yukarıdaki kod , görüntünün sağ tarafına 10 piksel boşluk eklemek için MARGIN CSS öğesini kullanır. ^{(MARGIN CSS)}Resmi sola hizaladığımız için, boşlukları sağa eklemek istiyoruz.

Temel olarak, dört sayı SAĞ ÜST ALT SOL'u^{(TOP RIGHT BOTTOM LEFT)} temsil eder . Bu nedenle, sağa hizalanmış bir görüntüye beyaz boşluk eklemek istiyorsanız, şunu yaparsınız:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Bu nedenle , bu görevi gerçekleştirmek için HTML kullanmak oldukça basittir , ancak bir kez daha, duyarlı siteler için iyi çalışmayabilir.

CSS Kullanarak Metni Resmin Etrafına Sarın

Metni bir görüntünün etrafına sarmanın en iyi yolu CSS kullanmaktır . Öğelerin konumlandırılması üzerinde size daha fazla ince tanecik kontrolü sağlar ve modern kodlama standartlarıyla daha iyi çalışır.

<img src="IMAGE URL" alt="A photo" class="left" />

HTML örneğinde ^(HTML)CSS'yi^(CSS) doğrudan resim etiketine dahil etsem de, artık bunu da asla yapmamalısınız. Bunun yerine, tüm CSS^(CSS) kodunuzu içeren, stil sayfası adı verilen ayrı bir dosyanız olmalıdır .

IMG etiketinde , etikete bir sınıf atamanız ve ona bir ad vermeniz yeterlidir. Örneğimde, sınıfa left adını verdim . Stil sayfamda tek yapmam gereken aşağıdaki kodu eklemek:

.left {
 float: left;
 padding: 0 10px 0 0;}

Gördüğünüz gibi, sola hizalanmış görüntünün sağ tarafına 10px dolgu ekledim. Ayrıca, görüntüyü belgenin normal akışından çıkarmak ve ana kabın sol tarafına koymak için float özelliğini kullandım.

Gördüğünüz gibi, tüm bu kodu IMG etiketinin kendisine eklemekten çok daha temiz. Ayrıca yönetimi daha kolaydır ve web sayfanızın görünümünü özelleştirmek için çok daha fazla CSS özelliği kullanabilirsiniz. ^(CSS)Herhangi bir sorunuz varsa, yorum yapmaktan çekinmeyin. Zevk almak!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you create an HTML page, everything flows linearly, meaning one bloсk dirеctly after another. All of my preνious posts arе an example of this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• iPhone ve Android'de QR Kodu Nasıl Taranır?

• Android'den Metin Mesajları Nasıl Yazdırılır

• Çalışan İşlemlerin Listesini Windows'ta Bir Metin Dosyasına Kaydetme

• GitHub'dan Dosya İndirme ve Kodu Görüntüleme

• Aynı Anda Birden Fazla Metin Dosyasının İçinde Arama Yapın

• Windows 7/8/10'da Metin Etiketlerini Masaüstü Simgelerinden Kaldırma

• Ücretsiz Online OCR Text'yı Image'ten ayıklamak için Siteler ve Hizmetler

• Çıktıyı Windows Komut Satırından Bir Metin Dosyasına Yönlendirin

• AI kullanarak Görüntülerden Arka Planları Anında Kaldırın

• Photoshop'ta Metin Nasıl Eğilir

• CPU Stres Testi Nasıl Yapılır?

• Convert Text Windows PC için MarkdownPad ile HTML or XHTML'e

• GIMP'da Shadow Text or Image'ye nasıl eklenir?

• Google Chrome Çevrimdışı (Bağımsız) Yükleyici Nasıl İndirilir

• Başka Bir Program Kullanırken Kilitli Bir Dosya Nasıl Açılır

• Dinamik Diski Temel Diske Dönüştürme

• Photoshop'ta Metin Nasıl Anahatlandırılır

• Metin Mesajları iPhone'dan Android'e Nasıl Aktarılır

• Kitap İnceleme - Windows 8 için Nasıl Yapılır Geek Kılavuzu

• Windows Update Hata Kodunu Düzeltin 8E5E03FA