Markdown'a Resim Eklemek İçin:
Sözdizimi aşağıda verilmiştir.
Markdown'da Görüntü Boyutunu Değiştirmek için:
Markdown'da görüntünün boyutunu değiştirmek için HTML'nin “ ” etiketini kullanırız. Yalnızca bu etiket, Markdown'daki görüntünün boyutunu değiştirmeye yardımcı olur ve bu “
” etiketinin sözdizimi aşağıda verilmiştir.
< resim kaynak = 'resim adı' her şey = “” Genişlik = 'değer' yükseklik = 'değer' >
Genişlik ve yükseklik değerlerini sayı ve yüzde olarak ayarlayarak görüntünün boyutunu değiştirebiliriz. Markdown'da görüntünün boyutunu değiştirmek için bu ' ' etiketindeki style niteliğini de kullanabiliriz.
Örnek # 01:
Markdown kodlarını gerçekleştirmek için Visual Studio Code kullanıyoruz. Markdown kodları için hem metin düzenleyiciyi hem de önizleme penceresini açmamız gerekiyor. Metin düzenleyicide girdiyi eklememiz gerekiyor ve çıktı ön izleme penceresinde elde ediliyor. Metin düzenleyicide, önce Markdown'daki resmi “!” yerleştirerek ekliyoruz. simgesini ve ardından “Alt metin” eklediğimiz köşeli parantezleri ekleyin. Şimdi görüntünün yolunu ekliyoruz.
Hem kod hem de resim aynı dizine kaydedildiği için resmin adını uzantısıyla birlikte giriyoruz. Bu yüzden buraya sadece “cloud.png” adını ekliyoruz. Ardından “Cloud Image” olan metni ekliyoruz ve bu sadece fareyle üzerine gelindiğinde görünen metindir. Şimdi görüntü eklendi ve bu görüntüyü önizleme penceresinde de görebiliriz.
Yukarıda görüntülenen Markdown koduna bu görüntüyü eklediğimiz için bulut görüntüsü aşağıda gösterilmiştir.
Örnek # 02:
Şimdi bu görüntünün boyutunu “ ” etiketini kullanarak değiştiriyoruz. İlk olarak görüntünün adının veya yolunun eklendiği “src”ye giriyoruz. Bundan sonra “alt” yerleştirip “Cloud Image” ayarını yapıyoruz. Resmin “genişliğini” “230” olarak ayarladık. “Yükseklik” “300” olarak ayarlanır. Bu “
” etiketine “başlık” da ekliyoruz ve bu “başlığın” değeri “Bulut başlığı” oluyor. Şimdi, görüntünün boyutu değiştirildi. Görüntünün değiştirilmiş boyutunu önizleme penceresinde görebilirsiniz.
Bu sonuçtaki görüntünün boyutu değiştirilir ve görüntünün “genişliği” “230” ve “yüksekliği” “300” olur. Bunun nedeni, Markdown kodunda bu genişlik ve yüksekliği ayarlamış olmamızdır.
Örnek # 03:
Değerlerini yüzde olarak koyarak “genişlik” ve “yükseklik” imajını da değiştirebiliriz. Resmin adını veya yolunu ekledikten ve “alt”ı “Bulut Görüntü” olarak ayarladıktan sonra, görüntünün “genişliğini” ve “yüksekliğini” “%50” olarak ayarladık. Ardından, “başlığı” ekleyin ve bu etiketi kapatın.
İşte boyutu “ ” etiketi kullanılarak değiştirilen resim. Resmin yüksekliği ve genişliği '%50'dir.
Örnek #04:
Şimdi, Markdown'da görüntünün boyutunu değiştirmek için bu ' ' etiketindeki 'style' özniteliğini kullanıyoruz. Resmin adını ve ardından “alt” niteliğini eklemeliyiz. Bundan sonra 'style' niteliğini koyduk ve değerleri olarak 'width ve height' ekledik. Belirlediğimiz “genişlik” piksel cinsinden “500 piksel” ve “yükseklik” “400 piksel”dir. Şimdi, görüntü boyutu buna göre ayarlanacaktır.
Bu sonuçtaki resmin boyutu güncellendi; “genişliği” artık “500 piksel” ve “yüksekliği” “400 piksel”dir. Bu, style özelliğinde genişlik ve yüksekliği ayarladığımız yukarıda verilen Markdown kodunun bir sonucu olarak görülebilir.
Örnek # 05:
Bir resim daha ekliyoruz. Ancak bu Markdown kodunda görüntünün boyutunu değiştirmiyoruz. Resmin boyutu yalnızca “ ” etiketini kullandığımızda değiştirilir. “!” koyduk. ve köşeli parantezlerin içine “Sun Image” olan metni ekleyin. Köşeli parantezleri kapattıktan sonra içine “New_sun.png” resim adını koyduğumuz parantezleri koyuyoruz ve fareyle üzerine gelindiğinde görünecek metni ekliyoruz. Görüntünün orijinal boyutu sonuçta gösterilecektir.
Bu görüntüyü Markdown koduna eklediğimiz için güneşin görüntüsü gösteriliyor. Ayrıca, görüntünün boyutunu “ ” etiketini kullanmadan ayarlayamadığımız için görüntünün orijinal boyutu görünür.
Örnek # 06:
“ ” etiketini kullanarak şimdi bu görüntünün boyutunu değiştiriyoruz. İlk olarak “src” alanına boyutunu değiştirmek istediğimiz resmin adını veya yolunu ekliyoruz. Resmin 'genişliği' ve 'yüksekliği', '300' olarak değiştirildi. Resmin boyutu şimdi değişti. Önizleme penceresi görüntünün yeni boyutunu gösterir.
Resmin genişliği ve yüksekliği '300' olarak değiştirildi.
Örnek # 07:
Resmin 'genişlik' ve 'yükseklik' değerlerini yüzde olarak ayarlayarak bu boyutları kolayca değiştirebiliriz. Resmin 'genişliğini' ve 'yüksekliğini' ikimiz de '%40' olarak ayarladık ve ardından bu etiketi kapattık.
İşte %40 yüksekliğinde ve ayrıca %40 genişliğinde olan resim. Bu genişlik ve yüksekliği görselin adını ekledikten sonra “ ” etiketinin içine ekledik.
Örnek # 08:
Şimdi, Markdown'da görüntünün boyutunu değiştirmek için ' ' etiketindeki 'style' özelliğini kullanıyoruz. Resim adını ve 'alt' özniteliğini ekledikten sonra 'stil' özniteliğine değer olarak 'genişlik ve yükseklik' ekledik. Belirttiğimiz “genişlik” “450 piksel” iken “yükseklik” de “450 piksel” olarak ayarlanmıştır. Görüntü boyutu artık bu yeni genişlik ve yükseklik değerlerine göre uygun şekilde değişecektir.
Şimdi, bu kodun sonucu, aşağıda görüntülenen önizleme penceresinde de gösterilir. Aşağıdaki sonuçta bu görüntünün hem genişliği hem de yüksekliği artık “450 piksel”dir.
Çözüm:
Bu kılavuzda görüntü ekleme kavramını ayrıntılı olarak inceledik ve ayrıca Markdown'da görüntünün boyutunun nasıl değiştirileceğini de araştırdık. Görselleri Markdown'a ekledik ve boyutlarını “ ” etiketi yardımıyla değiştirdik ve tüm bunların nasıl yapıldığını Markdown'da gösterdik. Genişlik ve yükseklik değerlerini sayı ve yüzde olarak koyarak görüntünün boyutunu değiştirdik. Markdown'da görüntünün boyutunu güncellemek veya değiştirmek için “
” etiketindeki style özelliğini de kullandık.