Yeni başlayanlar için: Bir resmin etrafına nasıl metin çizilir

Bu makalede, HTML ve CSS ile görüntülerle ilişkili olan özellikleri anlatacağız. Bunları bir HTML belgesine nasıl ekleyeceğinizi öğreneceksiniz. Ayrıca makalede, resmin parametrelerinin nasıl değiştirileceği ve resmin çevresinde metnin akışını nasıl düzenleyeceğinizle ilgili bilgiler bulacaksınız.

İlk olarak - bir resim ekleme hakkında. Bunu yapmak için birkaç öznitelik içeren bir "img" etiketi bulunur . Ana "src" dir. Tarayıcının resmi ekleyebileceği adresi depolar. Bilgisayarda kayıtlı olan resmin yolunu belirtebilir veya web kaynağına bir bağlantı verebilirsiniz.

Bir sonraki önemli özellik çifti "genişlik" ve "yükseklik" dir. Bunlar görüntüyü manuel olarak yeniden boyutlandırmak için kullanılır (görüntüyü gerdirmek ve sıkıştırmak için kullanışlı bir seçenektir).

Ardından, "hspace" ve "vspace" (görüntüden çevreleyen metne olan uzaklık) parametreleri. Açıkçası, "hspace" yatay girinti ve "vspace" dikeydir.

Etikette "alt" ve "başlık" gibi özellikler bulunur. Amaçları birbirlerini tanımlamaktır, çünkü birbirlerine benzerler. Ancak "başlık", farenin üzerine resim geldiğinde görüntülenen yazılı metin ve resim "yüklenemedi" ise "alt" özelliğinin harf değeri görüntülenir.

Çoğu etikette bulunan daha belirgin birkaç özellik vardır. Bunlar "erişim anahtarı", "sınıf", "kimlik" ve "stil" dir. "Erişim tuşu", nesneye erişmek için kullanılan kısayol tuşunu belirtir. "Sınıf" ve "kimlik" CSS ile ilgili parametrelerdir. Resmin hangi sınıfa ait olduğunu (veya tanımlayıcısını) açıklarlar. "Stil", yerleşik bir CSS stili görüntüsü belirlemenizi sağlayan bir metin niteliğidir.

Görüntünün görünümünü tanımlayan parametrelerden biri "sınır". Nesnenin çevresindeki çerçevenin kalınlığını belirler ve herhangi bir pozitif tamsayı (piksel cinsinden) ile belirtilebilir.

Bir sonraki özellik "hizalama" dir. Resimli resmin etrafındaki akışı anlatıyor. Bu parametre "alt", "orta", "sol", "sağ" ve "üst" değerlerini alabilir. Değerlerin her biri resmin metne göreceli olarak nerede olacağını belirler. Örneğin, değer "orta" ise, resmin ortası metnin altına hizalanacak ve "sol" olduğunda - nesne metnin sol tarafında olacak. Ancak bu resim metninin akışını ayarlamanın tek yoludur - HTML.

Başka bir güçlü araç - CSS (daha çok yönlü) var. Yardımıyla, resim metni etrafındaki akış da dahil olmak üzere etiketin niteliklerini daha etkili bir şekilde ayarlayabilirsiniz. CSS, sadece belirli bir nesnenin parametrelerini tanımlamanıza izin vermez, ancak hepsi gibi. Örneğin, bir belgedeki tüm görüntülerin on piksele eşit girintilerini belirtmek isterseniz, tek bir satır içeren bir CSS dosyası eklemek yeterlidir: "img {margin: 10px 10px 10px 10px;}" (pratikte, tırnak işareti gerekmez!).

Ve resimdeki, örneğin sol taraftaki resimdeki akış şöyle ayarlanır: "img {align: left;}".

Bu arada CSS kod eklemek için dosyaya yazmak zorunda değilsiniz. Bunu yapmak için HTML, CSS kodu ekleyebileceğiniz bir "stil" etiketi sağlar. Ancak bu belge için çalışacaktır (aynı kodu birkaç HTML dosyasına eklemek istiyorsanız ayrı bir stil sayfası oluşturmalısınız).

Artık buradan sorumlu olan etiketin kullanışlı özelliklerini kullanarak siteyi görüntülerle "sulandır "abilirsiniz. Resmin etrafında yeniden boyutlandırma veya metin kaydırma uygulamaktan çekinmeyin. Grafiksel bileşenler içermeyen web sayfaları oldukça mat bir görünüm, değil mi?