Bir resmin etrafında metin sarma nasıl

Herhangi bir web sayfasına bakın ve metin içeriği ile görüntülerin bir kombinasyonunu göreceksiniz. Bu öğelerin her ikisi de bir web sitesinin başarısında temel bileşenlerdir. Metin içeriği, site ziyaretçilerinin okuyacağı ve hangi arama motorlarının sıralama algoritmalarının bir parçası olarak kullanacağıdır . Görüntüler siteye görsel ilgi ekleyecek ve metin içeriğini vurgulamaya yardımcı olacaktır.

Web sitelerine metin ve resim eklemek kolaydır. Metinler, paragraflar, başlıklar ve listeler gibi standart HTML etiketleriyle eklenirken, resimler öğesine sahip bir sayfaya yerleştirilir. Ancak, web sayfanıza bir görüntü ekledikten sonra, altında metin hizalaması yapmak yerine, resmin yanında metin akışı olmasını isteyebilirsiniz (HTML koduna eklenmiş bir resmin tarayıcıda oluşturduğu varsayılan yol budur). Teknik olarak, bu görünüme ulaşmanın iki yolu vardır, ya CSS kullanarak (önerilen) ya da görsel yönergeleri doğrudan HTML'ye ekleyerek (web siteniz için stil ve yapı ayrımını korumak istediğiniz için önerilmez).

CSS Kullanımı

Bir sayfanın metin ve görüntü düzenini ve görsel stillerinin tarayıcıda nasıl göründüğünü değiştirmenin doğru yolu CSS ile olur . Unutmayın, sayfadaki görsel bir değişimden söz ettiğimizden (bir resmin etrafında metin akışı yapmak), bunun anlamı Basamaklı Stil Sayfalarının alanıdır.

1. Öncelikle görselinizi web sayfanıza ekleyin. Bu HTML'deki görsel özellikleri (genişlik ve yükseklik değerleri gibi) hariç tutmayı unutmayın. Bu özellikle, görüntü boyutunun tarayıcıya bağlı olarak değişeceği duyarlı bir web sitesi için önemlidir. Adobe Dreamweaver gibi bazı yazılımlar, bu araca eklenen görüntülere genişlik ve yükseklik bilgisi ekleyeceğinden, bu bilgileri HTML kodundan kaldırdığınızdan emin olun! Ancak, uygun alt metni içerdiğinden emin olun. HTML kodunuzun nasıl göründüğüne dair bir örnek:
2. Stil oluşturma amacıyla, bir resme bir sınıf da ekleyebilirsiniz. Bu sınıf değeri, CSS dosyasımızda kullanacağımız değerdir. Burada kullandığımız değerin keyfi olduğunu unutmayın, ancak bu özel stil için, görüntümüzü hangi yönde hizalayacağımıza bağlı olarak "sol" veya "doğru" değerlerini kullanma eğilimindeyiz. Basit bir sözdiziminin iyi çalıştığını ve gelecekte bir siteyi yönetmek için yönetmesi gereken diğer kullanıcılar için kolay olduğunu görüyoruz, ancak istediğiniz herhangi bir sınıf değerini verebilirsiniz.
   2. Kendi başına, bu sınıf değeri hiçbir şey yapmayacaktır. Görüntü otomatik olarak metnin soluna hizalanmaz. Bunun için şimdi CSS dosyasına dönmeliyiz.

1. Stil sayfanızda, şu stilleri ekleyebilirsiniz:
   1. .ayrıldı {
   2. yüzer: sol;
   3. dolgu malzemesi: 0 20px 20px 0;
   4. }
   5. Burada yaptığınız şey, görüntüyü normal belge akışından çekecek olan CSS "yüzdürme" özelliğini kullanmaktır (görüntünün normalde metnin altına hizalanacağı şekilde) ve kapsayıcının sol tarafına hizalanacaktır. . HTML işaretlemesinden sonra gelen metin artık etrafına sarılıyor. Ayrıca, bazı metin değerleri ekledik, böylece bu metin doğrudan görüntüye karşı olmayacaktı. Bunun yerine, sayfa tasarımında görsel olarak çekici olacak bazı güzel boşluklara sahip olacak. Dolgu için CSS kısayolu olarak, resmin üst ve sol tarafına 0 değer ve sol ve alt kısmına 20 piksel ekledik. Unutmayın, sol hizalanmış resmin sağ tarafına biraz dolgu eklemeniz gerekiyor. Sağa hizalı bir görüntü (bir anda bakacağımız) sol tarafına dolgu uygulandı.
2. Web sayfanızı bir tarayıcıda görüntülüyorsanız, görüntünüzün sayfanın sol tarafıyla hizalandığını ve metnin güzel bir şekilde etrafına sarıldığını görmelisiniz. Bunu söylemenin başka bir yolu, görüntünün "sola doğru yüzdüğü" dir.

1. Bu resmi sağa hizalanacak şekilde değiştirmek isterseniz (bu makaleye eşlik eden fotoğraf örneğinde olduğu gibi), bu basit olur. Öncelikle, "sol" un sınıf değeri için CSS'ye eklediğimiz stile ek olarak, sağdan hizalama için de bir tane olduğundan emin olmalısınız. Şuna benziyordu:
   1. .sağ {
   2. Sağa çık;
   3. dolgu malzemesi: 0 0 20px 20px;
   4. }
   5. Bunun, yazdığımız ilk CSS ile neredeyse aynı olduğunu görebilirsiniz. Tek fark, "float" özelliği için kullandığımız değer ve kullandığımız dolgu değerleridir (bazılarının sağ taraftaki yerine sol tarafına eklenmesi).
2. Son olarak, HTML’nizdeki görüntünün sınıfının değerini "soldan" "sağa" çevirirsiniz:
3. Tarayıcınızdaki sayfanıza şimdi bakın ve resminiz düzgün bir şekilde etrafı saran metinle sağa hizalanmalıdır. Web sayfalarını oluştururken gerektiğinde bu görsel stilleri kullanabilmemiz için, tüm stil sayfalarımıza "sol" ve "doğru" bu stilleri eklemeyi tercih ediyoruz. Bu iki stil, çevrelerindeki metin sarmalarıyla stil oluşturmaya ihtiyaç duyduğumuzda dönebileceğimiz güzel, yeniden kullanılabilir özellikler haline geliyor.

CSS yerine HTML'yi Kullanma (ve Neden Yapmamalısınız?)

HTML ile bir resmin etrafına metin sarmak mümkün olsa da, web standartları CSS'nin (ve yukarıda açıklanan adımların), bir yapının (HTML) ve stilin (CSS) ayrılmasını sağlayabilmemizin yolunu çizmektedir. Bazı aygıtlar ve düzenler için bu metnin resmin etrafında akmasına gerek duymayacağını düşündüğünüzde bu özellikle önemlidir. Daha küçük ekranlar için, duyarlı bir web sitesinin düzeni metnin gerçekten görüntünün altında olmasını ve görüntünün ekranın tüm genişliğini uzatmasını gerektirebilir. Stilleriniz HTML işaretlemenizden ayrıysa, bu medya sorguları ile kolayca yapılır. Görüntülerin ve metinlerin farklı ziyaretçiler ve farklı ekranlar için farklı görüneceği günümüzün çoklu cihaz dünyasında, bu ayrım bir web sayfasının uzun vadeli başarısı ve yönetimi için çok önemlidir.