HTML'de olduğu gibi, grafik olarak arka plan resmi yerleştirin. HTML'den bilgisayardan, ortadaki tabloya nasıl resim eklenir?

Görsel kısım, sitelerle çalışırken en önemli şeylerden biridir. Elbette, işlevselliğin altındadır, ancak atılmamalıdır. Bilgisayarınızdan sitenize bir HTML resmini yükleme hakkında konuşalım. Bunun bir olasılığı var mı yoksa birkaçı mı? HTML'de bir resim eklemek nasıl başkaları görürse? Kullanmak daha iyi - bilgisayar veya sunucu?

HTML nedir?

Köprü metin belgeleri için biçimlendirme dili - bu kısaltma bu şekilde duruyor. Yardımıyla gelecekteki sitenin omurgası oluşturulur, burada ana unsurların yerleşimi işlenmektedir. Sonra veri aktarımından sorumlu basamaklı stil sayfaları ve php dosyaları zaten yapılandırılmış durumdadır. Ancak herhangi bir sayfanın kalbinde HTML vardır. Yardımıyla bu arada görüntüler ayarlanır. Yapabileceğiniz gibi başka yollarla da, basit bir şeyin başlangıç yüklemesini sağlamanız gerekirse, örneğin bir çizim, o zaman kullanın. Ve şimdi HTML'ye bir resim nasıl ekleneceğimize bakalım.

Img etiketini kullanma

Grafikler kullanmaya başlıyoruz. Bir HTML belgesine nasıl arka plan resmi ekleyebilirim? İlk etapta bu, bir dosyayı sayfa nesnesi olarak ekleme anlamına gelir. Böyle bir ekleme için img kullanılır. Bu etiket, içinde bir yedek içerik bulunduğu bir satır öğesi. Köprü metni işaretleme dilinin yalnızca dört bölümünü taşır. Birincisi, yükseklik ve genişliktir, daha sonra tartışılacaktır. Diğer üçü ise nesne, embed (medya içeriğini katıştırmak için) ve iframe (alev kullanımı). Etiket, küçük bir öğe içeriyormuş gibi çalışır. Tek fark, görüntülenen harici içeriğin kullanılmasıdır. Bu durumda, aslında yüklenecek bir üçüncü parti dosyası olmalıdır. HTML'ye arka plan görüntüsü ekleme hakkında bir sorunuz varsa, onu bırakmak daha iyi. Çünkü yalnızca görüntünün bulunduğu bilgisayarın kendisi çalıştığında görüntülenir.

Src özniteliklerini kullanma

Bu nedenle, bir HTML belgesine nasıl grafik resim ekleyeceğimiz sorusu üzerinde çalışıyoruz. Yüklenmesi gereken resmin yolunu belirtmek için src'yi kullanın. Genel şema aşağıdaki gibidir: bu özniteliği, eşit işareti ve adresi belirtmeniz gerekir.

HTML ayrıştırılırken tarayıcı etikete ulaştığında, hemen satır öğesinin görüntüleneceği bir alan oluşturur. İçindedir ve dış dosyaya yüklenecektir. Üzerinde çalışacak program olduğundan yolun hiçbir hatası bulunmamalıdır. Dosyayı bulamazsa, hata simgesi görüntülenir ve bu da estetik görünmüyor. Bir HTML belge tablosuna nasıl resim ekleyebilirim ? İstenen hücrenin tüm kodlarını yazmak gerekiyor.

Görüntüyü sunucu üzerinde yapılandırma: img etiketindeki yükseklik ve genişlik

Bu nedenle, bir görüntüyü HTML'ye nasıl ekleyeceğimizi biliyoruz. Bunu şimdi nasıl yapılacağını nasıl anlayacağımızı. Dosya kullanıcı bilgisayarına indirilmeye başlar başlamaz, resim boyutu derhal belirlenecektir. Peki başlangıç parametreleri sizin istediğinizle eşleşmiyorsa? Bu durumda, yükseklik ve genişlik parametreleri (piksel olarak gösterilir) yardımcı olabilir. Bu durumda, kod şu şekilde yazılır: önce src ve dosya adresi. Sonra benzer bir tasarım genişliği belirtir ve genişliği ne olmalıdır. Sonuncusu da yükseklik ve yükseklik. Web yöneticileri sıklıkla böyle bir hata yaparlar: boyutu büyük olan birkaç megabayt büyük bir dosyayı sunucuya yüklerler. Yol öngörülür ve görüntü gerekli boyuta düzelir. Sonuç olarak, kullanıcı küçük bir görüntünün oldukça yavaş yüklendiğini görebilir. Bu çok cazip görünmüyor dışarıdan görünüyor.

İşe Yönelik Öneriler

Negatifliği önlemek için görüntünün boyutunu önceden azaltın. Çekici bir görünüm için hangi parametrelerin gerekli olduğundan emin değilseniz, bir kopya oluşturun ve onunla deneme yapın. Ayrıca, ağırlık optimize etmek için özen gösterilmelidir. Grafik dosyalarının ağırlığını, diğer uzantılara aktararak veya özel çevrimiçi servisler ve programlar kullanarak kaliteyi kaybetmeden azaltmak gerekir. Sadece sitenin kullanıcıları tarafından takdir edilmeyecek, aynı zamanda bir webmaster tarafından takdir edilecektir - sonuçta bu tür dosyalar daha hızlı yüklenecek ve barındırmada daha az alan kaplıyor olacak.

Kayıt yetenekleri örneği

Resmin yolunu nasıl yazabileceğinize bakalım:

1. Bir dosya adı.

2. Bir yerel bilgisayarda (sunucu) bulunan görüntünün adresini belirtin.

3. Diğer ana bilgisayarda dosyanın bulunduğu konumun ayrıntılı yolu.

Örneği ilk noktadan kullanırken, resim resimle aynı dizinde olmalıdır. İkinci konum, geçerli sayfaya göre bir alt klasördür. Üçüncü örnek, istenilen görüntünün bulunabileceği mutlak yolu belirtir. İkinci durumda, resmin herhangi bir sunucuda olabileceğini unutmayın (bu kullanım .htaccess dosyasında yasaklanmazsa). Ancak, kaldırılırsa, sitenizdeki resim kaybolur. HTML'nin özelliği, yalnızca biçimlendirme belgesine ihtiyaç duymanız ve diğer her şey üçüncü parti sunuculardan yüklenebilmesidir. Bu yöntemler genellikle indirme hızını artırmak için kullanılır (ancak burada bu aracın nasıl kullanılacağını bilmeniz gerekir).

Img'ye alt ve başlık atamak mı istiyorsunuz?

Bir grafik dosyası bir nedenle HTML belgesi yüklenmediğinde ne yapmalıyım? Yanlış bir yol veya başka bir şey varsa, alt özniteliğini kullanmanız gerekir. Resmin alternatif sunumu görevini yerine getirir. Zamanlamanın yüklü olmadığını varsayalım. Ancak tarayıcı halen imajın altındaki alanı oluşturacaktır. Ayrıca, kullanıcı bir yük beklediğinde ve programın programlamayı kabul etmeye hazırlandığını göstermesi gereklidir.

Eşlik eden metni görüntülemek için, özel başlık özniteliğini kullanın. Aslında, bu bir araç ipucudur ve HTML kodunun neredeyse görünür herhangi bir öğesi için kullanabilirsiniz. Bu, bazı yönlerini açıklamamıza izin verdiği için iyidir. Bu alt başlıkta gösterilen iki nitelik kullanımı aşağıdaki gibi görünür: Yukarıdaki örneğe göre, yükseklikten sonra alt ilk önce, sonra da başlık eklenir.

Ve bu nitelikler yalnızca ziyaretçiye kolaylık sağlamak için kullanılamaz. Sitenin tanıtımını olumlu olarak etkileyebilirler. Bunun için bunun için her zaman anahtar kelimeler kullanmalısınız. Bu, arama motorlarının görüntülerinin sitelerinin ve hizmetlerinin sıralamasındaki kaynağın sıralamasını artıracaktır . Ancak her konuda dikkatli ve rasyonel olmalısınız.

Resimleri Hizala

Resimler için ve daha önce belirtilmiş olan işaretleme dilinin genel olarak tüm 4 öğesi için, nitelik hizası getirildi. Bununla birlikte, resmin konumunu değiştirebilirsiniz. Varsayılan olarak, alt kenara hizalanır. Bunun için alt sorumludur. Üst kısımda nasıl yapılır? Bu üst gerektirir. Uygulamada şu şekilde görünecektir: Resmin adresinin belirtildiği src'den sonra align ve değer özniteliğini ekleyin.

Ve resmin bulunduğu satırda, üst kenarda hizalanacaktır. Görüntüyü merkeze eklemek için HTML nasıl? Kayıt için bir olasılık daha var - orta. Kullanımı ile temelde hiçbir şey değişmez. Bu kodu kullanırsanız, resim ortada hizalanacaktır. Metni resmin etrafında sarabilirsiniz. Bunu yapmak için sağ ve sol öznitelikler uygulanır. Bu gibi durumlarda, görüntü "kayan" olur. Sola kaydırma, diğer yazım değişiklikleri ile aynı görünüyor. Sağın kullanılması, resmin sağ tarafa yerleştirileceği fark ile benzer bir sonuç üretecektir. Bu talimatların uygulanması kendi nüanslarına sahiptir. Sorun, metnin imgeye çok yakın olmasıdır. Bu nedenle, göze oldukça hoş olmayan bir yapışma etkisi yaratılmıştır. Ancak bunu basamaklı bir stil sayfası veya HTML kodu ile düzeltebilirsiniz. Bu tür değişiklikler için vspace ve hspace niteliklerini kullanın. Birincisi, alttan ve yukarıdan girintili ve ikincisi - sağdan ve soldan girintili belirtir.

Arka plan yapma

Sitenin HTML sayfasına nasıl bir resim eklenir? Arka plan niteliği, bu amaca ulaşmak için çok yararlıdır. Vücut unsurunun bir parçasıdır. Amacı, sayfa, tablo veya ayrı bir hücre doldurması gereken grafik dosyasının yolunu göstermektir. Uygulamada, kullanım şöyle görünür: resmin adresi zaten bodybackground parametresinin değeri olarak yazılmıştır. Bu şekilde ayarlanan arka plan resmi, sol üst köşeden başlayarak, ordinatlar ve eksen ekseni boyunca tekrarlanır. Aşağıdakilerle birlikte aşağıda yer alan önceki bağlantı yeri. Bir şeyi bir renkle doldurmak ve bir resim kullanmamak için bir istek varsa, o zaman kısa bir açıklama kullanabilirsiniz: gama sayısı gövde bgcolor parametresi için bir karakteristik olarak gösterilir. Küçük değişiklikler oldu. Gördüğünüz gibi bgcolor özelliği zaten kullanılıyor. Bunun için, sayfanın veya bölümünün hangi rengin doldurulacağını belirtmeniz yeterlidir. Arka plan yapmak ve rengi değiştirmek için bilgisayarınızdan bir HTML'ye HTML'ye resim ekleme işlemi aşağıda açıklanmıştır. Genel olarak, HTML'yi tamamen öğrenebilmek için, ona bir hafta süre vermek yeterlidir ve bu bir intikayla yeterlidir.

Sonuç

HTML, tam teşekküllü bir programlama dilini talep edemese de, yine de bir web sitesi oluştururken son derece değerlidir. O gerçek iskelettir. Arka planda ve sabit resimlerle nasıl çalışacağınızı bildiğiniz ve onlara da bağlantı eklediğinizden emin olarak şunu söyleyebiliriz. Bu nedenle, HTML'ye bir görüntünün nasıl ekleneceği sorusunun cevabı açık olmalıdır.