2. Özellik background="URL" - arka plan resmini ayarlar. URL yerine arka plan resminin adresi yazılmalıdır.

Örnek

Tablo örneği

Sütun 1

2. sütun

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

Yukarıdaki örnekte, arka plan resmimiz img klasöründe (html sayfasıyla aynı dizindedir) bulunur ve resmin adı fon.gif . Etikete style="color:white;" eklediğimize dikkat edin. . Arka plan siyaha yakın olduğu için yazı arka plana karışmasın diye beyaz yaptık.

3. Özellik bgcolor="color" - tablonun arka plan rengini ayarlar. Renk olarak tüm paleti seçebilirsiniz (html renklerinin kodlarına ve adlarına bakın)

4. Özellik border="number" - tablo çerçevesinin kalınlığını ayarlar. Önceki örneklerde border="1" tanımlamıştık, yani kenarlık 1 piksel kalınlığındadır.

5. Özellik bordercolor="color" - kenarlık rengini ayarlar. border="0" ise, kenarlık olmayacak ve kenarlığın rengi bir anlam ifade etmeyecektir.

6. Özellik cellpadding="number" - çerçeveden hücre içeriğine piksel olarak doldurma.

7. Özellik cellpacing="number" - piksel cinsinden hücreler arasındaki mesafe.

8. Özellik cols="number" - sütun sayısı. Ayarlamazsanız, tarayıcı sütun sayısını belirleyecektir. Tek fark, bu parametrenin belirtilmesinin büyük olasılıkla tablonun yüklenmesini hızlandırmasıdır.

9. Özellik çerçevesi = "parametre" - tablonun etrafındaki sınırların nasıl görüntüleneceği. Aşağıdaki değerleri alabilir:

• void - sınır çizme
• kenarlık - masanın etrafındaki kenarlık
• yukarıda - tablonun üst kenarı boyunca uzanan sınır
• aşağıda - tablonun alt sınırı
• hsides - yalnızca yatay kenarlıklar ekleyin (tablonun üstü ve altı)
• vsides - yalnızca dikey kenarlıklar çizin (tablonun soluna ve sağına)
• rhs - sadece tablonun sağ tarafındaki kenarlık
• lhs - sadece tablonun sol tarafındaki kenarlık

10. Özellik yüksekliği="sayı" - tablonun yüksekliğini ayarlar: piksel veya yüzde olarak.

11. Özellik kuralları = "parametre" - hücreler arasındaki sınırların nerede gösterileceği. Aşağıdaki değerleri alabilir:

• tümü - her tablo hücresinin etrafına bir çizgi çizilir
• gruplar - etiketlerin oluşturduğu gruplar arasına bir çizgi çizilir

Nitelikler ve özellikler

1. Özellik hizalama="parametre" - ayrı bir tablo hücresinin hizalamasını ayarlar. Aşağıdaki değerleri alabilir:

• sol - sol hizalama
• merkez - merkez hizalama
• sağ - sağ hizalama

2. Özellik background="URL" - hücrenin arka plan görüntüsünü ayarlar. URL yerine arka plan resminin adresi yazılmalıdır.

3. Özellik bgcolor="color" - hücrenin arka plan rengini ayarlar.

4. Özellik bordercolor="color" - hücre kenarlığının rengini ayarlar.

5. Özellik char="letter" - hizalamanın yapılacağı harfi ayarlar. align niteliğinin değeri char olarak ayarlanmalıdır.

6. Özellik colspan="number" - birleştirilmiş yatay hücrelerin sayısını ayarlar.

7. Özellik height="number" - tablonun yüksekliğini ayarlar: piksel veya yüzde olarak.

8. Özellik width="number" - tablonun genişliğini ayarlar: piksel veya yüzde olarak.

9. Özellik rowspan="number" - birleştirilecek dikey hücrelerin sayısını ayarlar.

10. Özellik valign="parametre" - hücre içeriğinin dikey hizalanması.

• top - hücrenin içeriğini satırın üstüne hizalayın
• orta - orta hizalama
• alt - alt hizalama
• taban çizgisi - taban çizgisi hizalaması

Etiket için

Bir tabloda hücre sınırlarının birbirine yapışmasını nasıl önleyebilirim?

Hücreler arasında kenarlık (hücre sınırı) ve sıfır dolgu kullanılması durumunda, yine de birbirine yapıştırılır ve çift kenarlık elde edilir. Bunu önlemek için, tabloyu border-collapse: crash ile biçimlendirmeniz gerekir:

...

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

Merhaba sevgili blog okuyucuları! Bu makalede, hakkında her şeyi öğreneceksiniz html sayfasına resim nasıl eklenir. Sayfanıza koymak istediğiniz bazı resimleriniz mi var yoksa sitenize bir logo mu koymak istiyorsunuz? Bütün bunlar kolay. Bu makaleyi okuduktan sonra, html sayfalarınıza herhangi bir zorluk çekmeden resim ekleyebileceksiniz. Bunu yapmak için, hakkında ayrıntılı olarak konuşacağız img etiketi gif, jpeg ve png gibi grafik dosya biçimlerine hızlıca göz atın ve sitenize video ve ses yerleştirmeyi kolaylaştıran yeni HTML5 özelliklerine bir göz atın.

Grafikler ve html metni tek bir dosyada birleştirilemediğinden, sitede html sayfalarının diğer öğelerinden farklı bir şekilde görüntülenirler. Her şeyden önce, grafik görüntüler ve diğer multimedya verileri ayrı dosyalarda saklanır. Bunları bir web sayfasına gömmek için, bu ayrı dosyalara bağlantılar içeren özel etiketler kullanılır. Bu etiket özellikle img etiketi. Bir adrese sahip böyle bir etiketle karşılaşan tarayıcı, önce Web sunucusundan bir görüntü, ses veya video içeren ilgili dosyayı ister ve ancak bundan sonra Web sayfasında görüntüler.

Tüm grafik görüntülere ve genel olarak web sayfasından ayrı dosyalarda saklanan herhangi bir veriye denir. gömülü sayfa öğeleri.

Resim eklemeden ve "img" etiketine ayrıntılı olarak bakmadan önce, grafik formatları hakkında biraz bilgi edinmeye değer.

Grafik görüntü biçimleri.

Birçok farklı grafik biçimi vardır, ancak tarayıcılar yalnızca birkaçını destekler. Bunlardan üçünü ele alalım.

1. JPEG formatı(Birleşmiş Fotoğraf Uzmanları Grubu). Görüntüleri depolamak için kullanılan oldukça popüler bir biçim. 24 bit rengi destekler ve fotoğraflarda tüm orta tonları olduğu gibi tutar. Ancak jpeg saydamlığı desteklemez ve resimlerdeki ince ayrıntıları ve metni bozar. JPEG, esas olarak fotoğrafları depolamak için kullanılır. Bu formattaki dosyalar jpg, jpe, jpeg uzantılarına sahiptir.

2. GIF formatı(Grafik Değişim Formatı). Bu formatın ana avantajı, birkaç görüntüyü aynı anda tek bir dosyada saklama yeteneğidir. Tüm animasyonlu videolar oluşturmanıza olanak tanır. İkincisi, şeffaflığı destekler. Ana dezavantajı, fotoğrafları depolamak için iyi olmayan yalnızca 256 renk desteğidir. GIF esas olarak logoları, afişleri, saydam alanları olan ve metin içeren görüntüleri depolamak için kullanılır. Bu formattaki dosyalar gif uzantısına sahiptir.

3. PNG formatı(taşınabilir Ağ Grafikleri). Bu biçim, eski GIF ve bir dereceye kadar JPEG'in yerini alacak şekilde geliştirilmiştir. Şeffaflığı destekler, ancak animasyona izin vermez. Bu formatın bir png uzantısı vardır.

Web siteleri oluştururken genellikle JPEG veya GIF formatındaki görüntüleri kullanırlar, ancak bazen PNG kullanırlar. Ana şey, hangi durumlarda hangi formatı kullanmanın daha iyi olduğunu anlamaktır. Kısacası, o zaman:

JPEG, metin içermeyen fotoğrafları veya gri tonlamalı resimleri depolamak için en iyi şekilde kullanılır;

• GIF, öncelikle animasyon için kullanılır;
• PNG, diğer her şey için bir biçimdir (simgeler, düğmeler, vb.).

HTML sayfalarına resim ekleme

Peki bir web sayfasına nasıl resim eklersiniz? Resim ekle tek izin verir img etiketi. Tarayıcı, görüntüyü web sayfasında img etiketiyle karşılaştığı yere yerleştirir.

Html'de resim gömme kodu sayfa şöyle görünür:

Bu html kodu, web sayfasıyla aynı klasörde bulunan image.jpg dosyasında saklanan görüntüyü web sayfasına yerleştirecektir. Fark etmiş olabileceğiniz gibi, resmin adresi şurada belirtilmiştir: kaynak niteliği. Nedir dedim zaten. Bu nedenle, src niteliği, görüntü dosyasının adresini belirtmeye yarayan gerekli bir niteliktir. src niteliği olmadan, img etiketinin bir anlamı yoktur..

Resimli bir dosyanın adresini belirtmek için birkaç örnek daha vereceğim:

bu html kodu, web sitesinin kökünde bulunan resimler klasöründe saklanan image.jpg adlı sayfaya bir resim ekleyecektir.

src niteliği, resimlere göreli bağlantılardan daha fazlasını içerebilir. Resimler html sayfalarıyla birlikte web'de saklandığından, her resim dosyasının kendi url'si vardır. Bu nedenle, görüntünün url adresi src özniteliğine eklenebilir. Örneğin:

Bu kod, sayfaya mysite.ru adresinden bir resim ekleyecektir. URL adresi genellikle başka bir sitede bulunan bir resme işaret ediyorsanız kullanılır. Sitenizde depolanan resimler için göreli bağlantıları kullanmak en iyisidir.

img etiketi bir satır içi öğedir, bu nedenle onu bir blok öğesinin içine, örneğin “P” etiketinin - bir paragrafın içine yerleştirmek daha iyidir:

Pratik yapalım ve önceki html makalelerinden sayfamıza bir resim ekleyelim. Sayfamın html dosyasının yanında bir “images” klasörü oluşturacağım ve şuna benzeyen “bmw.jpg” resim dosyasını buraya koyacağım:

Ardından, eklenen resmin bulunduğu sayfanın html kodu şöyle olacaktır:

Ve tarayıcıdaki ekranın sonucuna bakıyoruz:

Gördüğümüz gibi, görüntüleri web sayfalarına yerleştirmede karmaşık bir şey yok. Şimdi, "img" etiketinin diğer birkaç önemli özelliğine bakalım.

alt nitelik - yedek olarak

Görüntü dosyaları web sayfalarından ayrı olarak depolandığından, tarayıcının bunları almak için ayrı isteklerde bulunması gerekir. Ancak sayfada çok fazla resim varsa ve ağ bağlantı hızı düşükse, ek dosyaların indirilmesi oldukça zaman alacaktır. Daha da kötüsü, görüntü sizin bilginiz dışında sunucudan kaldırılırsa.

Bu durumlarda, web sayfasının kendisi başarıyla yüklenecek, resimler yerine yalnızca beyaz dikdörtgenler görüntülenecektir. Bu nedenle, bir görüntünün ne olduğu hakkında kullanıcıyı bilgilendirmek için, . Bu öznitelikle, resim yüklenene kadar boş bir dikdörtgende görüntülenecek olan sözde değiştirme metni belirtilir:

Ve işte böyle görünüyor:

Resmin boyutlarını ayarlayın

Hala bilmeniz gereken birkaç img etiketi özelliği var. Bu bir çift özellik Genişlik ve yükseklik. Bir görüntünün boyutlarını belirtmek için bunları kullanabilirsiniz:

Her iki özellik de boyutu gösterir piksel. Genişlik özniteliği, tarayıcıya görüntünün ne kadar geniş olması gerektiğini ve yükseklik özniteliği ne kadar yüksek olması gerektiğini söyler. Bu iki özellik birlikte veya ayrı ayrı kullanılabilir. Örneğin, yalnızca genişlik özniteliğini belirtirseniz, tarayıcı belirtilen genişliğe oranla ve ayrıca yalnızca yükseklik özniteliğinin kullanılması durumunda yüksekliği otomatik olarak ayarlar. Bu öznitelikleri hiç belirtmezseniz, tarayıcı ekranda görüntülemeden önce görüntünün boyutunu otomatik olarak belirleyecektir. Yalnızca, resim boyutlarının belirtilmesinin, sayfayı görüntülerken tarayıcıyı biraz hızlandıracağını belirtmekte fayda var.

Şimdilik sayfalara resim eklemek bu kadar, daha sonra siteye nasıl ses veya video ekleyeceğimize bakacağız...

HTML 5 ile Video ve Sesi Göm

Yeni html5 spesifikasyonu, medya dosyalarını yerleştirmeyi çok kolaylaştıran bazı yeni etiketlere sahiptir. Bu öncelikle video ve ses için geçerlidir.

Eklemek için ses HTML5, çift etiketi sağlar SES. Ses klibinin saklandığı dosyanın adresi, zaten bilinen src özniteliği kullanılarak belirtilir:

Ses etiketi, sayfada bir blok öğesi oluşturur. Varsayılan olarak, tarayıcı ses klibini oynatmaz. Bunu yapmak için, ses etiketinde özel bir nitelik belirtilmelidir. otomatik oynatma. Özel çünkü önemli değil. Bu özelliğin etikette bulunması, etkili olması için yeterlidir.

Varsayılan olarak, ses klibi web sayfasında hiçbir şekilde görüntülenmez. Ancak "ses" etiketine değeri olmayan bir özellik koyarsanız kontroller, tarayıcı, ses etiketinin yerleştirildiği web sayfasının yerinde ses klibini oynatmak için kontrolleri görüntüler. Oynat ve duraklat düğmesi, oynatma çubuğu ve ses kontrolü içerirler.

HTML etiketleri HTML dilinin temelidir. Etiketler, işaretlemedeki öğelerin başlangıcını ve sonunu sınırlamak için kullanılır.

Her HTML belgesi, bir HTML öğeleri ve metin ağacından oluşur. Her HTML öğesi, bir başlangıç ​​(açılış) ve bir bitiş (kapanış) etiketi ile tanımlanır. Başlangıç ​​ve bitiş etiketleri, etiket adını içerir.

Tüm HTML öğeleri beş türe ayrılır:

• boş elemanlar — , ,
  ,

, ,

---

, , , , , , , , , ;

düz metin öğeleri —

İlgili Makaleler

En son Microsoft Word güncellemelerini yükleme

Tablet açılıyor ama açılmıyor

Bir bilgisayarın çalışmasını kontrol eden ve bir kişi ile bilgisayar arasında etkileşimi sağlayan bir yazılım paketi mi?

Mac'te Windows nasıl kurulur?

Windows'ta Hyper-V: Sanal makineler oluşturma ve yapılandırma kılavuzu Windows'ta hyper v'yi etkinleştirme

Bir dizüstü bilgisayarda Skype'ı nasıl geri yükleyeceğinizi düşünüyoruz

En son makaleler

• 

  2022-04-27 04:35:28

  Fixies masters tam sürüm Fixies oyunu tam sürüm bilgisayarınıza indir
• 

  2022-04-27 04:35:28

  Net framework 3 hatalarını yükleme veya güncelleme, düzeltme
• 

  2022-04-27 04:35:28

  Dünyadaki sanal para birimleri ve sanal borsalar

Popüler Makaleler

• 

  Altın Numaralar Güzel bir telefon numarası nasıl satılır

• 

  Kripto para madenciliği: basit kelimelerle nedir

• 

  En iyi dizüstü bilgisayar işletim sistemi: Eksiksiz inceleme

• 

  Sınıf arkadaşlarından müzik indirmek için programlar Sosyal ağ sınıf arkadaşlarından üzücü bir şarkı indirin

• 

  Yandex tarayıcısının mobil versiyonu

Editörün Seçimi

• 2022-04-07 02:16:41
  Rakip alternatif uygulamalar

  Android için profesyonel spor simülatörü Athletics 2, dünya standartlarında sporcu olmaya hazırlanan kendine güvenen gençler için oluşturuldu....

• 2022-04-07 02:16:41
  HiSuite - Huawei akıllı telefonları PC ile senkronize etme programı huawei pc suite için indirme programı

  HiSuite, Huawei mobil cihazlarını bir bilgisayarla senkronize etmek için tasarlanmış resmi bir yazılımdır. Bu yönetici kapsıyor...

• 2022-04-07 02:16:41
  Hangi Sony Xperia Akıllı Telefon daha iyi?

  2017'nin yarısında Sony Mobile bir sürü akıllı telefon çıkarmayı başardı. Ama hangileri satın almak için en alakalı? Ve aralarından seçim yapmaya değer mi?

• 2022-03-29 09:24:03
  Karadağ'da tatil evi Gizlilik ayarlarının değiştirilmesi

  Karadağ turları her yıl çok sayıda turist seçmektedir. Bu yönün popülaritesi, Karadağ'daki tatillerin ...

• 2022-03-29 09:24:03
  Doğrudan Rezervasyon hizmeti nasıl göründü?

  Gizlilik ayarlarınızı değiştirme Sitede kabul etmek istediğiniz çerezleri seçin. İşlevsel çerezler nelerdir? Fonksiyonel...

rzdoro.ru

• Ütü
• Windows 10
• Tarama
• Windows 7
• Windows XP
• Yazıcı Sürücüleri
• dizüstü bilgisayarlar
• Windows 8
• Ses videosu
• gadget'lar
• Çeşitli
• linux