HTML'ye nasıl resim eklenir - düzenleme, hizalama, nitelikler. HTML'de resimlerle çalışma (bir resim nasıl eklenir, yeniden boyutlandırılır, bir resim nasıl bir bağlantı yapılır)

Ardından, bir html belgesine nasıl resim ekleneceğine ve görüntüsünün nasıl özelleştirileceğine bakalım. Çalışmak için yalnızca yukarıda belirtilen düzenleyiciye ve bir tarayıcıya ihtiyacınız var.

Yine de, Notepad ++'nız yoksa veya indirmeyle ilgili bir sorun varsa ve şu soruyla eziyet duyuyorsanız - not defterinde html'ye nasıl resim eklenir?

Cevap basittir, normal bir not defterinde çalışmak, yalnızca okunabilirlik ve kodu metnin kendisinden ayırmak için kodu farklı renklerde vurgulamadığından farklıdır.

HTML sayfasına nasıl resim eklenir

Düzenleyiciyi kurduktan sonra, herhangi bir dosyaya sağ tıklayarak içerik menüsü açılır menüsünde ilgili öğe görünecektir.

Şimdi, böyle bir dosyayı düzenlemek için, üzerine sağ tıklayarak içerik menüsünü ve ardından "Notepad++ ile Düzenle" yi çağırmanız yeterlidir.

Koddaki değişikliklerin sonuçlarını gözlemlemek için bir test sayfası kullanılacaktır.

Html koduna bir resim eklemek için tek bir satır içi etiket kullanılır resim. Ana özelliği fotoğrafın kaynağıdır.

Sabit sürücüdeki herhangi bir dosya veya ağda bulunan bir görüntünün bağlantısı olabilir. Etiketlerle çerçevelenmiş < p> p>.

Fotoğraf eklemek için aşağıdaki satırı girmeniz gerekir:

.

Editörde şöyle görünecek:

Ve sayfada bu şekilde görüntülenecektir:

kaynak görüntünün kaynağını gösterir. Resim dosyası html belgesiyle aynı dizinde bulunuyorsa tek dosya adı yeterlidir.

Fotoğraf başka bir dizinde bulunuyorsa, html dosyasının bulunduğu klasörden başlayarak yolunu belirtmeniz gerekecektir.

Tavsiye! Belirtilen fotoğraf dosyasının yolunun Kiril karakterleri içermemesi gerektiğini düşünmek önemlidir. Ayrıca dosya adı yazarken büyük/küçük harf önemlidir.

Kaynak olarak ağdan bir örnek kullanabilirsiniz. Bunu yapmak için, sabit sürücüdeki konum yerine öznitelikte yalnızca bir bağlantı belirtmeniz gerekir.

Dosya yolu biçim tablosu

Bir resmi yeniden boyutlandırmak için iki özellik eklemeniz gerekir: Genişlik ve yükseklik. Değer, herhangi bir öznitelikle aynı şekilde biçimlendirilir.

Eşittir işaretinden sonra boyutu piksel olarak belirtmelisiniz.

Çizimin açıkça tanımlanmış boyutları varsa, sayfada aşağıdaki gibi görüntülenecektir:

Bir resmi hizalama ve düzenleme

Merkezde html'de bir fotoğraf nasıl eklenir? Bir sayfadaki bir görüntünün konumunu atamak için şunu kullanın: hizalamak etiket ile ilgili p.

Birkaç olası değeri vardır: merkez(ortada), ayrıldı(sol kenar) ve Sağ(Sağ kenar).

Ortaya ve sağ kenar boşluğuna hizalanmış şekilde resim sayfada böyle görünüyor.

Önemli! Fotoğrafı sayfa yerine metne göre konumlandırmak için img etiketinde align niteliği kullanılmalıdır.Değerler p etiketi özelliği ile aynıdır.

Verilen değere bağlı olarak, görüntü metne göre konumunu değiştirecektir.

Metne bir resim yerleştirmek için etiketi girmeniz yeterlidir resim(tüm kenarlıklarla birlikte) içindeki bir metin bloğunda.

Çerçeve eklemek için çerçevenin kalınlığını piksel olarak gösteren sayısal bir değere sahip border niteliğini kullanın.

Dikey ve yatay kenar boşluklarını ayarlamak için şunu kullanın: uzay ve hspace. Sayısal değerleri, metinden görüntüye olan mesafeyi doğrudan piksel cinsinden ifade eder.

Örnek öznitelikte uzay 50 piksel olarak ayarlayın.

Yatay dolgunun boyutu, görüntünün etrafını sardığında metnin olacağı mesafeyi gösterecektir.

İki kullanışlı özellik daha - alt ve Başlık. İlki, alternatif metni resme ayarlar.

Bununla birlikte, görüntü herhangi bir nedenle yüklenmezse, bunun yerine öznitelik değerinde belirtilen metin görüntülenecektir.

Özniteliğin yeteneklerini denemek için dosyayı kodda belirtilen dizinden taşıyabilirsiniz.

Nitelik değeri olarak belirtilen metin Başlık, fareyi doğrudan görüntünün üzerine getirdiğinizde bir araç ipucu görüntüler. Kodda, görünüşü diğer niteliklerden farklı değildir.

Sayfayı yeniledikten sonra sonuç şöyle görünecektir:

Etiket özelliği tablosu resim

oy[lar]

	Tanım
kaynak=””	Görüntü kaynağı göstergesi. Hem sabit diskte saklanan hem de ağ üzerinde barındırılan olarak kullanılabilir (sabit diskteki konum yerine adres belirtilir).
Genişlik=""; yükseklik=""	Görüntü yükseklik ve genişlik göstergeleri. Yalnızca biri belirtilirse, ikincisi otomatik olarak birinciyle eşleşecek şekilde ölçeklenir. Sayısal değer, piksel sayısı anlamına gelir.
hizalamak=””	Metne göre görüntünün konumunun niteliği. Geçerli değerler: tepe,orta,alt,ayrıldı,Sağ.
sınır=””	Resmin etrafına bir çerçeve atar. Sayısal değer, sınırın piksel cinsinden genişliğine karşılık gelir.
uzay=””; hspace=""	Bitişik elemanlardan dikey ve yatay olarak girinti göstergeleri. Değer, öğeler arasındaki piksel sayısını belirtir. Metni kaydırırken, öznitelik metne olan mesafeyi atar.
alt=””	Resmin herhangi bir nedenle yüklenmemesi durumunda alternatif bir açıklama atar. Değer keyfidir.
Başlık=””	Fareyle üzerine gelindiğinde araç ipucu metnini ayarlar. Değer keyfidir.

Herkese iyi günler, sevgili dostlarım, okuyucularım ve blogumun misafirleri. Tatil gibi ama hiçbir şey için yeterli zaman yok. Her şey biraz aceleci. Ancak bu fenomen geçicidir, yakında her şey yoluna girecek. Ve bugün sizinle birlikte html'nin temellerini anlamaya devam edeceğiz. Arkadaşlar, ne düşünüyorsunuz, hangi web sayfası olmadan meçhul, gri ve sıkıcı olacak? Bu doğru, grafik içeriği olmadan, fotoğraflar, logolar veya arka planlar olsun.

Bu nedenle, html'ye resim eklemek de en önemli bileşenlerden biridir, bu nedenle kendi başına web sitesi yapacak herkes bunu kesinlikle bilmelidir. Bugün tüm bu bacchanalia ile yapacağımız şey tam olarak bu)))

Peki o zaman, başlayalım. Başlıktan da anladığınız gibi, etiket bir resim eklemekten sorumludur. , ancak iki nüansı var:

1. Etiket tektir, bu nedenle kapatmanıza gerek yoktur
2. Etiket her zaman görüntünün yolunu belirten öznitelikle birlikte çalışır.

Genel olarak, tüm bu eylemi pekiştirmek için bir örneğe bakalım. doğru mu söylüyorum? Ders materyallerini indirin ve html dosyasını not defterinde açın. Ve şimdi, ana metinden önce aşağıdakileri yazın:

Her şey. İşte böyle kısa bir kayıt bize sitemizde bir resim sağlayacaktır. Bir belgeye yazmayı deneyin.

Şimdi dosyayı kaydedin ve tarayıcınızda çalıştırın. Bakalım neler yapabiliriz. Ben böyle aldım.

Öznitellikler

Yukarıda söylediğim gibi, img etiketi hemen src niteliği ile birlikte gelir. Pekala, bence bunu zaten anladınız, o yüzden gerisini inceleyelim. İşte dönülecek yer burası. Buradaki nitelikler sadece dofigischa'dır. Fransızcamı bağışlayın).

alt

Aniden resim yüklenmediyse veya herhangi bir nedenle kullanılamıyorsa, Alt özniteliğinin değerinde yazılmış metni görürsünüz. Genellikle resimde gösterilenler burada yazılır, yani. milliyetlerle ilgili bir şey tasvir ediliyorsa, alt. Örneğin, şuna benziyor:

Sonuç olarak, herhangi bir nedenle resim görüntülenemiyorsa, yazıtımız çıkacaktır.

Prensip olarak, genellikle alternatif bir metin olarak herhangi bir şey yazamazsınız, ancak özniteliğin kendisini boş olsa bile bırakmak daha iyidir.

Genişlik ve yükseklik

İngilizce bilenler için görüntünün genişliğinden ve yüksekliğinden bu iki özelliğin sorumlu olduğunu tahmin etmek kolaydır. Bu iki şeyi tek bir öğede birleştirmeye karar verdim, çünkü benzer işlevleri yerine getiriyorlar, diyebilir ki - erkek kardeşler (iyi ya da kız kardeşler).

Genişlik görüntünün genişliğinden sorumludur ve boyutun kendisi değerlerinde ayarlanır. Genel olarak, örneğin 640 * 480 piksel gibi bir resminiz varsa ve bunu 320 * 240 sitesinde görüntülemeniz gerekiyorsa, aşağıdakileri yapmanız yeterlidir:

Her şey. Şimdi, belgeyi kaydedip bir tarayıcı ile açtığınızda bir küçük resim göreceksiniz. Ve sadece genişlik parametresini değiştirdiğimizi ve resmin orantılı olarak azaldığını, yani. yükseklik otomatik olarak azalır.

Height , tahmin edebileceğiniz gibi görüntünün yüksekliğinden sorumludur. Burada her şey tamamen aynı şekilde çalışır, ancak dikey olarak. Aynı resmi çekelim, ancak genişliği değil, sadece yüksekliği ayarlayacağız.

Kaydedin ve belgeye gidin. Gördüğünüz gibi, bu sefer sadece yüksekliği ayarlamamıza rağmen, görüntü önceki örnekteki ile aynı boyuta küçüldü. Buradaki her şeyin oranlar çerçevesinde çalıştığını zaten anladınız, bu nedenle prensipte her iki parametreyi de ayarlamanın bir anlamı yok.

İlgi uğruna, hem genişlik hem de yükseklik özelliklerini aynı anda ayarlamaya çalışalım, sadece orantısız parametrelere ayarlayın. Peki, o zaman ne yapabileceğimize bakarız.

Tasarruf ediyoruz ve şimdi elimizdekilere bakıyoruz. Hmm, bu orantısız bir şey). Sonuç olarak, konuyu anladığınızı düşünüyorum. Boyut çalışmasını sağlamlaştırmak için kendi başınıza biraz çalışın ve ardından bir sonraki özniteliğe geçin.

hizala

Pekala, bu özniteliğe, o makaleden, üzerinden geçtiğimizde zaten aşinasınız. Ve muhtemelen görüntünün konumundan onun sorumlu olduğunu tahmin ettiniz.

Toplamda hizalama için beş parametre vardır:

• sol - sol hizalama
• sağ - sağ hizalama
• orta - görüntünün çizginin taban çizgisi boyunca hizalanması (bir örnekle bunun ne anlama geldiğini göreceksiniz)
• top - verilen görüntünün üst kısmı, verilen satırdaki en uzun öğeyle hizalanır
• alt - görüntünün alt kenarlığının metne göre hizalanması

Pekala, burada listelemeyelim ama gelenek gereği her şeyi bir örnekle göstereceğim. Hazırlanan html belgesini buradan indirin ve açın. Orada 5 özdeş paragraf göreceksiniz. Burada açıklanan niteliklere sahip resimleri ekleyin:

Pekala, şimdi belgemizi her zamanki gibi kaydediyoruz ve elimizde ne olduğunu görüyoruz. Peki? Farkı gör? Artık bu parametrelerin nasıl farklı olduğunu biliyorsunuz).

Sınır

Border niteliği, görüntüdeki kenarlığın kalınlığına göre ayarlanır. Ve ne kadar büyükse, çerçeve o kadar kalın olur. Bu özelliği resminize eklemeyi deneyin, ancak değerini sürekli değiştirin ve sınırın ne kadar kalınlaştığını kendiniz göreceksiniz.

hspace ve vspace

Pekala, bugün için en son img etiketi özelliklerine bakalım. Boşluk (İngilizce) boşluk, boşluk, boşluk (anahtar) vb. H ve V önekleri yatay ve dikey anlamına gelir. Burada soru sorulmamalıdır.

Peki bu nitelikler ne işe yarıyor? Görüntüden çevreleyen metne (veya diğer içeriğe) dikey ve yatay dolguyu ayarlarlar. Yani, resmin metne çok yakın olmasını sevmiyorsanız, aralarındaki mesafeyi artırabilirsiniz. Bir örnekle neye benzediğini görelim.

Görmek? Kenar boşlukları hem dikey hem de yatay olarak arttı. Bunun için çabalıyorduk.

Bu arada, bu resimleri siteler için başlık olarak da ekleyebilir, resimleri bağlantı olarak yapabilirsiniz, vb. Bütün bunlardan bahsetmiştim.

Genel olarak, her şeye sahip gibiyim. Size resim eklemenin temellerini anlattım, ancak bir profesyonel gibi HTML ve CSS öğrenmek istiyorsanız, indirmenizi şiddetle tavsiye ederim. harika kurs Bu konuda, bu biçimlendirme dili ve basamaklı stil sayfaları sayesinde kolayca üç tür site oluşturabilirsiniz: kartvizitler, bloglar, çevrimiçi mağazalar. Her şey sade ve anlaşılır bir dille anlatılıyor. Bu sadece bir bomba!

Pekala, bugün sana veda ediyorum. Sadece birkaç derste, size HTML'nin temelleri üzerine son dersi vermeyi planlıyorum, ardından pratikte edindiğimiz tüm bilgileri pekiştireceğiz ve üç sayfalık basit bir site oluşturacağız. Genel olarak, her şey harika olacak)

Blogumdaki en ilginç şeyleri kaçırmamak için makale güncellemelerine abone olmayı unutmayın. Ve elbette, diğer makalelere göz atın. Kendiniz için çok faydalı bilgiler bulacağınızdan eminim. Sana iyi şanslar. Başka yazılarda görüşmek üzere. Güle güle!

Saygılarımla, Dmitry Kostin

Bu yazıda size bir sayfaya resim ve grafik eklemek için çok önemli HTML etiketlerinden bahsedeceğim, çünkü bu olmadan güzel ve iyi bir site oluşturmak zordur.

Resimler sitenizi benzersiz kılacak ve kalabalığın arasından sıyrılacaktır. Ancak, sitede aşırı grafik kullanımının kötü bir faktör olabileceğini unutmayın.

Html sayfanızı resimlerle aşırı yüklemeyin, sayfa hafif olmalı ve ziyaretçileri korkutmamalıdır. Ziyaretçi her zaman ana bilgileri özümsemeli ve dikkati dağılmamalı, görüntüleri yalnızca gerektiğinde HTML'ye eklemelidir.

BODY etiketi özellikleri sayfasında, resimlerin bir html sayfasının arka planı olabileceğini zaten söylemiştim ve şimdi size aynı resimlerin arka plandan daha yüksek düzeyde nasıl kullanılabileceğini anlatacağım.

Bu nedenle, bir HTML sayfasına resim eklemek için etikete ihtiyacınız vardır. , en önemli SRC özelliğine sahiptir. Bu öznitelik, görüntünün adresini belirtmek için gereklidir. Diyelim ki image.jpg resmini html sayfasında bir yere koymanız gerekiyor ve resmimiz sayfa ile aynı klasörde (dizin) olacak, o zaman aşağıdaki html kodunu yazmanız gerekiyor:

Resim ve html sayfası farklı klasörlerde veya dizinlerdeyse, resmin yolunu sayfaya göre yazmanız gerekir. Örneğin, html sayfamız klasör veya dizin haberlerinde bulunur, aynı dizin veya klasörde image.jpg resmimizin bulunduğu bir alt dizin (klasör) açılır, daha sonra eklemek için şöyle yazmanız gerekir. Bu:

Etiketin src özelliğine ek olarak Birkaç isteğe bağlı ancak önemli özellik vardır:

• genişlik - görüntü genişliği (piksel veya yüzde belirtebilirsiniz);
• yükseklik — görüntü yüksekliği (piksel veya yüzde belirtebilirsiniz).

Bu öznitelikleri belirtmezseniz, tarayıcı görüntünün gerçek boyutunu yükler. Bununla birlikte, bu niteliklerin değerleriyle aşırıya kaçmamalısınız, çünkü resmin uzunluğunu veya genişliğini artırmak onu bozabilir, bu da onu bozabilir, örneğin bir kişinin oranlarının olacağı bir kişinin fotoğrafı. değiştirmek.

Daha önce yazdığım gibi, resim boyutları hem piksel hem de yüzde olarak belirtilebilir. Sadece bir örnek vereceğim:

başka bir html kodu örneği:

Tarayıcıda resimler de dahil olmak üzere grafik görüntüleme yeteneğinin devre dışı bırakıldığı ve sayfanızın anlamını kaybetmemesi için, resim yüklenmemişse alternatif metin yazdığımız alt niteliğinin kullanıldığı durumlar vardır. sayfa. örneğin html kodu:

• sol - resim solda olacak ve yanındaki metin sağda olacak;
• sağ - resim sağda olacak ve yanındaki metin solda olacak.

İşte HTML kodu:

Bir resmin yanındaki metin.

ve tarayıcı aşağıdaki çıktıyı verir:

Bir resmin yanındaki metin.

Doğru değer için HTML kodu:

Bir resmin yanındaki metin.

html sayfası şöyle görünecek:

Resmin yanındaki metin.

Metnin bir görüntünün etrafına sarılmasını önlemek için, HTML Metin Biçimlendirme sayfasında daha önce bahsedilen BR etiketini kullanabilirsiniz. Bu arada, BR etiketinin kendi değer değerleriyle birlikte net bir özelliği vardır:

• sol - sola hizalanacak metni kaydırmayın;
• sağ - sağa hizalanacak metni kaydırmayın;
• tümü - metni sol ve sağ kenarlara hizalanacak şekilde kaydırmayın.

Hizalama özniteliği olmadan, metin varsayılan olarak görüntünün sağına sarılır ve neredeyse aynı hizadadır. Metnin görüntünün etrafına sıkıca sarılmamasını istiyorsanız, aşağıdaki öznitelikleri kullanabilirsiniz:

• vspace - üst ve alt kenar boşluklarını piksel olarak yapar;
• hspace - Yan kenar boşluklarını (sol ve sağ) piksel olarak yapar.

İşte örneğin basit bir html kodu:

Bu çok güzel bir resim.

Bu örnekte ne olduğunu kendiniz görmeye çalışın.

Ayrıca border niteliğini kullanarak görüntünün etrafında bir kenarlık oluşturabilir ve boyutunu piksel olarak belirleyebilirsiniz. Değer ne kadar büyük olursa, görüntünün etrafındaki çerçeve o kadar büyük olur. HTML kodu şu şekilde olacaktır:

Html sayfası şöyle görünecek:

Bir html sayfasına resim eklemek için gereken temel HTML etiketlerini yazdım. Ardından, HTML'de nasıl bağlantı oluşturulacağını ve ayrıca bir resmi nasıl bağlantı yapacağınızı anlatacağım.

Yayın tarihi: 15 Mayıs 2012

Bir html sayfasına nasıl resim eklenir

Siteye bir resim-resim eklemek için (fotoğraf veya herhangi bir grafik), img etiketini kullanarak kaynağa (resim dosyasına) giden yolu belirtmelisiniz.img etiketi, İngilizce resmin (resim, resim) kısaltmasıdır. , kaynak
Önemli: ağırlık ve boyut resimler (küçük), Dosya adı(boşluk yok ve sadece latin harfleri ve sayıları), resim formatı(uzantıları. GIF, JPG, JPEG, PNG. Hareketli resimler (GIF) kullanılabilir.
Resmin yolu, resmin sitenizde veya İnternet'te üçüncü taraf kaynaklarda nerede bulunduğuna bağlı olarak mutlak veya göreceli olarak belirtilir (o zaman URL'yi belirtmeniz gerekir)

Sis. Sanatçı Vladimir Knyagnitsky

Kod. Kod göreli bir adres içeriyor (sunucumdaki klasöre göre)

Kod. Kod, görüntünün mutlak adresini içerir

Görüntü Boyutu ve Çerçeve Kalınlığı

Bu resmin gerçek boyutu: Width (width)="499" Height (height)="434". Photoshop'a başvurmadan ekrandaki resmin gerçek boyutundan daha büyük veya daha küçük görünmesini sağlayabilirsiniz. Bunun için öznitelikler kullanılır. Genişlik ve yükseklik. Örneğin, resmin 2 kat daha küçük görünmesini sağlamak için genişliği (width)="250" ve yüksekliği (height)="217" belirtin. Ve 4 piksel kalınlığında bir kenarlık ekleyin( sınır="4"). Solda çerçeveli bir resim, sağda karşılaştırma için çerçevesiz

IMG etiketi özellikleri

kaynak- Resmin URL'sini gösteren gerekli nitelik (adresi, konumu)
IMG SCR="img/kartinka.gif"

hizalamak- Resmi belgenin bir tarafına hizalar
align="left" - Sola hizalama
align="sağ" Sağa hizalama
align="alt" Alt hizalama
align="üst" Üst hizalama
align="middle" Ortaya hizala

alt- Resmin metnini görüntüler. Yüklenmiyorsa grafiklere bir alternatif
sınır- Resmin etrafındaki çerçevenin genişliğini piksel olarak ayarlar. Çerçeve varsayılan olarak kullanılmaz.

Genişlik piksel veya yüzde olarak görüntü genişliği
yükseklik- piksel veya yüzde olarak görüntü yüksekliği

hspace yatay ofset
uzay dikey ofset

HTML kullanarak bir görüntüyü metinle hizalama örnekleri

Resim, herhangi bir nitelik belirtmeden metnin önüne yerleştirilir. Metin biçimlendirme yok. Sonuç, gördüğünüz şeydir. Resim, sola ayarlı hizalama özelliği kullanılarak metnin soluna konumlandırılır. hizala = "sol" .
Bu, elbette, resmin metinle konumunun önceki versiyonundan çok daha iyidir. Ama görsele metne yakın basıldığında kimsenin hoşuna gideceğini sanmıyorum. Kelebek, kelebek, kelebek. Ve metin, metin, bir kelebek, kelebek, kelebek hakkında metin. Görüntüye çok yakın. Metnin resmin etrafına sarıldığını görsel olarak göstermek için metin sadece metin olarak yazılmış olsa bile resim metinle birleşmemelidir. Ekrandaki resmin yazı ile bütünleşmemesi, rahatsız etmemesi, göze hoş gelmesi ve yerinde olması çok önemlidir. Yeterli miktarda metin, örneği daha net bir şekilde bozar.
Kitap yayıncılığında düzen kuralları vardır, site yapımında düzen kuralları olmalıdır. Resim, özniteliği kullanarak metnin solunda bulunur.SOL değeriyle hizalayın, metinden girinti yapın - yatay olarak 20 piksel.
align="left" hspace=20 Nitelikler kullanılarak dolgu eklenir HSPACE(yatay girinti) ve VSPACE(dikey girinti). Bu durumda, dikey girinti, görüntünün üst kısmı metnin üst satırıyla aynı hizada olacak şekilde sıfıra ayarlanır. Girinti sıfır ise belirtilmez. Peki, dikey girinti öznitelikte belirtilir. Ve web yöneticileri şimdi HTML özelliklerini atmaya ve tamamen CSS'ye geçmeye teşvik edilirken, bana öyle geliyor ki bu yöntemin basitliği ona var olma hakkını veriyor.
KOD Resim metnin sağında bulunurözellik yardımı hakkında değer hakkında hizalamakSAĞ, özniteliklerle dolgu eklendi HSPACE(yatay girinti). ve VSPACE(dikey girinti). Prensip olarak, her şey önceki sürümdekiyle aynıdır, yalnızca ayrıldı, belirtildi Sağ ve resim metnin önüne değil, yaklaşık olarak ortasına eklenir. Özniteliklerle Biçimlendirme hizalamak(doğrusal hizalama) ve girintiler yardımıyla yatay ve dikey olarak tamamen normal bir sonuç verir. Resim solda, üstte ve altta metinle sarılır (yeterli metin varsa). Görüntüden sol, üst ve alt metin girintisi 20 piksele eşittir. Her şey kodda belirttiğimiz gibidir.
İki tür hizalama (sol ve sağ) en yaygın kullanılanlardır ve diğerleri... Hemen hemen tüm diğerlerinin modası geçmiş olarak kabul edilir. Modern sitelerde, tüm görüntüler (ve aslında tüm tasarım), basamaklı stil sayfaları (CSS) kullanılarak tasarlanmıştır.

Metin, metin, metin devam eden metin

Resim, hizalama özelliği kullanılarak konumlandırılır anlamı olan orta. Niteliklerle dolgu eklendi HSPACE(yatay girinti) ve VSPACE. Aşağıdaki gibi görünüyor, kod aşağıda yazıyor.. Görüntü konumlandırma niteliklerinin bittiği yer burasıdır.

Alt ve başlık nitelikleri nasıl kullanılır?

Alt ve başlık özellikleri, resmin başlığını içerir. ALT, herhangi bir nedenle yüklenmemişse, bir resme bir alternatiftir. Başlık resmin başlığıdır. Farenizi resmin üzerine getirdiğinizde görünür.
Sadece kendiniz için bir site yapıyorsanız, bu özellikleri uygulayamazsınız. Site insanlara yönelikse, bu nitelikler, görüntünün net ve doğru bir açıklaması verilerek doldurulmalıdır.
Birincisi, ziyaretçiler için uygundur ve ikincisi, arama motorları için gereklidir. Arama robotlarının resimleri dizine eklemesini, anahtar kelimelere göre sıralamasını ve kullanıcı isteklerine göre yayınlamasını sağlayan IMG etiketinin içindeki metindir. Bu arada Yandex, resmin anlamlı bir açıklaması yoksa aramaya girmediği konusunda bile uyarıyor. Yalnızca standart grafik biçimlerindeki (JPEG, GIF ve PNG) resimler dizine eklenir. Bir komut dosyası kullanılarak genişletilen arka plan resimleri ve resimler dizine eklenmez.

Doldurulmuş alt ve başlık ile Resim KODU

Bir resim bir bağlantı nasıl yapılır

Herhangi bir bağlantı, A etiketi ve href özniteliği (bir köprü ise) veya if if (aynı sayfada bulunan bir paragrafa veya öğeye bağlantı) kullanılarak yapılır.
Başlangıç ​​etiketi Görüntü kaynağı kapanış etiketi

İnternette resim içermeyen bir site bulmak zor ve bu hiç de şaşırtıcı değil, çünkü sitenin tasarımının akılda kalıcı bir görünüm kazandıran ana parçası bunlar. İyi bir web sitesi tasarımı, başarılı gelişiminin anahtarıdır. Html'de resimleri görüntülemek için yalnızca bir etiket var .

1. Etiket sözdizimi

Görüntü açıklaması"src="URL" [öznitelikler]>

Lütfen bu etiketin tek olduğunu ve gerektirmez kapanış etiketi .

src niteliği gerekli. Çıktı görüntüsünün adresini belirtir. Mutlak veya göreli bir URL belirtebilirsiniz. Adresi belirtmezseniz veya hatalı yazarsanız, resim görüntülenmeyecektir.

Özellik alt="(!LANG:açıklama" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

Niteliklerin geri kalanı isteğe bağlıdır ve aşağıda tartışılacaktır. İlk olarak, bir resmi html'de görüntülemeye basit bir örnek verelim.

2. HTML'ye nasıl resim eklenir

Html'de bir resim eklemek için etiketi kullanın . Yukarıda sözdizimini tartıştık. Pratik örnekler verelim.

Örnek 2.1. Etiket kullanımı

... ...

Bu kod

Bu örnekte, Yandex Photo'daki resimlerden görüntünün doğrudan adresini belirledik. Çoğu zaman, aynı URL'de bulunan resimlere bağlantılar belirtilir. Örneğin, src="/img/kartinka.jpg", yani. göreli bir adres belirtilir.

Arka arkaya birkaç resim yerleştirmek mümkündür. Bir satıra sığmazlarsa, bir sonrakine geçiş otomatik olarak gerçekleşir.

Örnek 2.2. Birden çok görüntüyü html'de birbiri ardına görüntüleme

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Sayfada aşağıdakine dönüşür:

Başka bir resim yayınlasaydık, artık buna sığmayacağından yeni bir satırda olurdu.

Örnek 2.3. img'de alternatif metin (alt) kullanma

Etikete alternatif metin (alt niteliği) yazılması önerilir. , resmin mevcut olmaması durumunda kendinizi güvence altına almak için. Aşağıda alternatif metin kullanan bir örnek verilmiştir. İlk durumda, görüntünün boyutunu ayarlamadık, ancak ikinci durumda yapıyoruz.

... Resim örneği"src="321.jpg"> ...

Sayfada aşağıdakine dönüşür:

Başka bir görüntü yerleştirirsek, artık bu satıra sığmayacağından yeni bir satırda olur.

Şimdi tüm etiket özelliklerine ayrıntılı olarak bakalım. .

3. Etiket Nitelikleri ve Özellikleri

1. Özellik hizalama="parametre" - resmin hizalamasını belirler. Bu değer ayrıca metnin görüntünün çevresini nasıl saracağını da etkiler. Aşağıdaki parametreleri alabilir:

• sol - sol hizalama
• orta - görüntünün ortasını geçerli satırın taban çizgisine hizalayın
• alt - görüntünün alt sınırının çevreleyen metinle hizalanması
• top - görüntünün üst sınırı, geçerli satırın en yüksek öğesiyle hizalanır
• sağ - sağ hizalama

Örnek 3.1. resmi html'de sağa hizala

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Sayfada aşağıdakine dönüşür:

2. Özellik alt="(!LANG:metin" - подсказка/описание картинки. Выполняет сразу две важные функции:!}

• Fareyle üzerine gelindiğinde bir araç ipucu verir
• Tarayıcıda resimler devre dışı bırakılırsa, bu metin görüntülenir

Bu özellik, Yandex Görseller ve Google Görseller'deki görselleri sıralarken de çok önemlidir. Arama motoru algoritmalarındaki etkenlerden biri olduğu için her resim için yazılmalıdır.

Örnek 3.2. Bir çerçeve (kenarlık) ile html çıktı görüntüsü

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Sayfada aşağıdakine dönüşür:

4. Özellik bordercolor="color" - görüntünün etrafını saran çerçevenin rengini ayarlar. Yalnızca border niteliğinin 0'dan büyük olması anlamlıdır.

Örnek 3.3. Resmi html'de renkli kenarlıkla görüntüle

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Sonuç biraz daha yüksek görülebilir.

Not

Border ve bordercolor nitelikleri img için CSS stillerinde ayarlanabilir:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

5. Özellik yüksekliği="SAYI" - görüntünün yüksekliğini ayarlar: piksel veya yüzde olarak. Örneğin, bir görüntünün boyutu 400x200 ise ve biz 150 piksellik bir yükseklik belirlersek, 300x150'ye (%25 daha küçük) sıkıştırılır, yani. orantılı olarak.

6. Özellik genişliği = "SAYI" - görüntünün genişliğini ayarlar: piksel veya yüzde olarak. Örneğin, bir görüntünün boyutu 1000x800 ve genişliği 1200 piksel olarak belirlenmişse, otomatik olarak %20 oranında 1200x960'a genişletilir.

7. Özellik hspace="NUMBER" - görüntünün yatay ofsetini diğer html nesnelerinden piksel olarak ayarlar.

8. Özellik vspace="NUMBER" - görüntünün dikey ofsetini diğer html nesnelerinden piksel olarak ayarlar.

Not

hspace ve vspace yerine eski ve kanıtlanmış kenar boşluğunu kullanmanızı tavsiye ederim (bununla ilgili daha fazla bilgiyi html stillerini açıklama dersinde okuyabilirsiniz). Kısaca hatırlatayım:

• üst kenar boşluğu: X piksel; (X - üst girinti)
• kenar boşluğu-alt: Ypx; (Y - alt girinti)
• sol kenar boşluğu: Lpx; (L - girinti sola)
• sağ kenar boşluğu: Rpx; (R - sağ girinti)

Nesnelerden girintileri piksel olarak ayarlayın. Negatif değerlere izin verilir. Varsayılan değer, atadan miras alınır veya 0 olarak ayarlanır.

Örneğin. Soldaki dolgu 50 piksel ve üst kısım 10 pikseldir.

... üst kenar boşluğu:10 piksel; sol kenar boşluğu:50px"kaynak=" https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Sayfada aşağıdakine dönüşür:

Bu örnekte, üstteki girinti 10 piksel, soldaki 50 pikseldir.

9. Özellik class="class_name" - bu sınıfın tüm görüntüleri için stili ayarlamak üzere bir görüntüye bir sınıf atayabilirsiniz.

4. Bir resim nasıl bağlantı yapılır

Bu soru genç web yöneticileri arasında ortaya çıkıyor. Aslında her şey çok kolay. Bunu yapmak için etiketi çerçevelemek yeterlidir etiket (bağlantı).

Örneğin

... image_url"> ...

5. Bir görüntünün köşeleri nasıl yuvarlanır

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"style="border-radius: 30px">

Sevgili okuyucu, şimdi html img etiketi hakkında çok daha fazla şey öğrendiniz. Şimdi bir sonraki derse geçmenizi tavsiye ederim.