Herhangi bir web sayfasına bakın ve metin içeriği ile görüntülerin bir kombinasyonunu göreceksiniz. Bu unsurların her ikisi de bir web sitesinin başarısı için gerekli unsurlardır. Metin içeriği, site ziyaretçilerinin okuyacağı ve arama motorlarının sıralama algoritmalarının bir parçası olarak kullanacağı içeriktir. Görseller, siteye görsel ilgi katacak ve metin içeriğini vurgulamaya yardımcı olacaktır.
HTML Etiketleri ve CSS Stilleri
Web sitelerine metin ve resim eklemek kolaydır. Metin, paragraflar, başlıklar ve listeler gibi standart HTML etiketleriyle eklenirken, görüntüler öğenin bulunduğu bir sayfaya yerleştirilir. Ancak, web sayfanıza bir görüntü ekledikten sonra, metnin altına hizalamak yerine görüntünün yanında akmasını isteyebilirsiniz (bu, HTML koduna eklenen bir görüntünün tarayıcıda işlenmesinin varsayılan yoludur). Teknik olarak, bu görünümü elde etmenin iki yolu vardır; CSS kullanarak (önerilen) veya görsel talimatları doğrudan HTML’ye ekleyerek (web siteniz için stil ve yapı ayrımını korumak istediğiniz için önerilmez).
Bir Resmin Etrafında Metin Akışı Sağlamak için CSS Nasıl Kullanılır
Bir sayfanın metin ve resim düzenini ve görsel stillerinin tarayıcıda nasıl göründüğünü değiştirmenin doğru yolu CSS’dir. Unutmayın, sayfadaki görsel bir değişiklikten bahsettiğimiz için (metnin bir resmin etrafında akmasını sağlamak), bunun Basamaklı Stil Sayfalarının alanı olduğu anlamına gelir.
-
İlk önce resminizi web sayfanıza ekleyin. Herhangi bir görsel özelliği (genişlik ve yükseklik değerleri gibi) bu HTML’den hariç tutmayı unutmayın. Bu, özellikle görüntü boyutunun tarayıcıya göre değişeceği duyarlı bir web sitesi için önemlidir. Adobe Dreamweaver gibi belirli yazılımlar, bu araçla eklenen görüntülere genişlik ve yükseklik bilgileri ekler, bu nedenle bu bilgileri HTML kodundan çıkardığınızdan emin olun! Bununla birlikte, uygun alternatif metni eklediğinizden emin olun. HTML kodunuzun nasıl görünebileceğine dair bir örnek:
tür = “kod”>
-
Stil oluşturma amacıyla, bir resme sınıf da ekleyebilirsiniz. Bu sınıf değeri, CSS dosyamızda kullanacağımız şeydir. Burada kullandığımız değerin keyfi olduğuna dikkat edin, ancak bu belirli stil için, resmimizin hangi yöne hizalanmasını istediğimize bağlı olarak “sol” veya “sağ” değerlerini kullanma eğilimindeyiz. Bu basit sözdiziminin iyi çalıştığını ve gelecekte bir siteyi yönetmesi gerekebilecek diğer kişilerin anlaması kolay olduğunu görüyoruz, ancak buna istediğiniz herhangi bir sınıf değerini verebilirsiniz.
type = “code”> Kendi başına, bu sınıf değeri hiçbir şey yapmaz. Resim otomatik olarak metnin soluna hizalanmayacaktır. Bunun için şimdi CSS dosyamıza dönmemiz gerekiyor.
-
Stil sayfanıza artık şu stili ekleyebilirsiniz: .left {
type = “code”> float: sol;
tür = “kod”> dolgu: 0 20px 20px 0;
tür = “kod”>}
type = “code”> Burada yaptığınız şey, resmi normal belge akışından (resmin normalde görüntüleneceği şekilde, altına hizalanmış metinle) çeken CSS “float” özelliğini kullanmaktır ve onu şu şekilde hizalar: kabının sol tarafı. HTML biçimlendirmesinde ondan sonra gelen metin şimdi etrafına sarılır. Ayrıca, bu metnin değil, doğrudan resme karşı çıkması için bazı dolgu değerleri de ekledik. Bunun yerine, sayfanın tasarımında görsel olarak çekici olacak güzel bir boşluğa sahip olacaktır. CSS kısaltmasında, görüntünün üst ve sol tarafına 0 değeri, soluna ve altına 20 piksel ekledik. Sola hizalanmış bir görüntünün sağ tarafına biraz dolgu eklemeniz gerektiğini unutmayın. Sağa hizalanmış bir görüntünün (birazdan bakacağımız) sol tarafına dolgu uygulanmış olacaktır.
-
Web sayfanızı bir tarayıcıda görüntülerseniz, artık resminizin sayfanın sol tarafına hizalandığını ve metnin etrafını güzelce sarıldığını görmelisiniz. Bunu söylemenin başka bir yolu da görüntünün “sola kaymasıdır”.
-
Bu resmi sağa hizalanacak şekilde değiştirmek isterseniz (bu makaleye eşlik eden fotoğraf örneğindeki gibi), bu basit olacaktır. Öncelikle, “left” sınıf değeri için CSS’mize az önce eklediğimiz stile ek olarak, sağa hizalama için de bir stilimiz olduğundan emin olmalısınız. Şöyle görünecektir: .right {
type = “code”> float: sağ;
tür = “kod”> dolgu: 0 0 20px 20px;
tür = “kod”>}
type = “code”> 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 ile kullandığımız dolgu değerleridir (bazılarını görüntümüzün sağ yerine sol tarafına ekleyerek).
-
Son olarak, HTML’nizde görüntü sınıfının değerini “soldan” “sağa” değiştirirsiniz:
tür = “kod”>
-
Sayfanıza şimdi tarayıcıda bakın ve resminiz, etrafına düzgün bir şekilde sarılmış metinle sağa hizalanmalıdır. Bu stillerin her ikisini de “sol” ve “sağ” olarak tüm stil sayfalarımıza ekleme eğilimindeyiz, böylece web sayfalarını oluştururken bu görsel stilleri gerektiği gibi kullanabiliriz. Bu iki stil, görüntülerin etrafına metin sararak stil vermemiz gerektiğinde başvurabileceğimiz güzel, yeniden kullanılabilir özellikler haline geliyor.
CSS Yerine HTML Kullanın (Ve Neden Bunu Yapmamalısınız)
HTML ile bir görüntünün etrafına metin sarmak mümkün olsa da, web standartları, yapının (HTML) ve stilin (CSS) ayrılmasını sürdürebilmemiz için CSS’nin (ve yukarıda sunulan adımlar) izlenecek yol olduğunu belirtir. Bu, özellikle bazı cihazlar ve düzenler için metnin olmayabilir görüntünün etrafında akması gerekir. Daha küçük ekranlar için, duyarlı bir web sitesinin düzeni, metnin gerçekten görüntünün altında hizalanmasını ve görüntünün ekranın tüm genişliğine yayılmasını gerektirebilir. Stilleriniz HTML biçimlendirmenizden farklıysa, bu, medya sorgularıyla kolayca yapılır. Görüntülerin ve metnin farklı ziyaretçiler için farklı ekranlarda farklı görüneceği günümüzün çok cihazlı dünyasında, bu ayrım bir web sayfasının uzun vadeli başarısı ve yönetimi için çok önemlidir.
Biçim mla apa chicago Alıntıınız
Kyrnin, Jennifer. “Bir Resmin Etrafındaki Metin Nasıl Sarılır.” ThoughtCo, Mayıs. 14, 2021, thinkco.com/wrapping-text-around-image-3466530.
Kyrnin, Jennifer. (2021, 14 Mayıs). Bir Resmin Etrafındaki Metin Nasıl Sarılır. Https://www.thoughtco.com/wrapping-text-around-image-3466530 adresinden erişildi
Kyrnin, Jennifer. “Bir Resmin Etrafındaki Metin Nasıl Sarılır.” ThoughtCo. https://www.thoughtco.com/wrapping-text-around-image-3466530 (26 Mayıs 2021’de erişildi).
