Web siteleri oluşturmanın özünü araştıran birçok acemi düzen tasarımcısı, genellikle arka planın html'de nasıl bir görüntü haline getirileceğini merak ediyor. Bazı kişiler bu görevi çözebilse bile, görüntüyü monitörün tüm genişliği boyunca uzatırken sorunlar ortaya çıkmaya devam ediyor. Aynı zamanda sitenin tüm tarayıcılarda eşit şekilde görüntülenmesini istiyorum, bu nedenle tarayıcılar arası gereksinimin karşılanması gerekiyor. Arka planı iki şekilde ayarlayabilirsiniz: CSS stilini kullanarak. Herkes kendisi için en iyisini seçer en iyi seçenek. Kesinlikle, CSS stili kodu saklandığı için çok daha kullanışlıdır. ayrı dosya ve sitenin ana etiketlerinde fazladan sütun kaplamaz, ancak önce sitenin arka planına resim yüklemenin basit bir yöntemini ele alacağız.

Arka plan oluşturmak için temel HTML etiketleri

O halde tüm ekranda html'de arka plan sorusuna geçelim. Sitenin güzel görünmesi için oldukça önemli bir ayrıntıyı anlamanız gerekir: sadece degrade bir arka plan oluşturmak veya onu düz bir renkle boyamak yeterlidir, ancak arka plana bir resim eklemeniz gerekiyorsa gerilmez monitörün tüm genişliği boyunca. Başlangıçta, site sayfanızın görüntüleneceği uzantıyla bir resim seçmeniz veya kendiniz bir tasarım yapmanız gerekir. Ancak arka plan resmi hazır olduktan sonra onu “Resimler” adlı bir klasöre aktarın. İçinde kullandığımız tüm resimleri, animasyonları ve diğer grafik dosyalarını saklayacağız. Bu klasörde olmalıdır kök dizin seninkilerle HTML dosyaları. Artık koda geçebilirsiniz. Arka planı bir resme dönüştürecek kod yazmak için çeşitli seçenekler vardır.

1. Etiket özelliğini yazın.
2. HTML kodunda CSS stili aracılığıyla.
3. CSS stilini ayrı bir dosyaya yazın.

Arka planı HTML'de nasıl bir resim haline getireceğiniz size kalmış, ancak bunun en uygun şekilde nasıl olacağına dair birkaç söz söylemek istiyorum. Bir etiket özelliği aracılığıyla yazmayı kullanan ilk yöntem uzun süredir geçerliliğini yitirmiştir. İkinci seçenek çok nadir durumlarda kullanılır, çünkü aynı kodun çoğu elde edilir. Ve üçüncü seçenek en yaygın ve etkili olanıdır. Burada HTML örnekleri Etiketler:

1. Yazmanın ilk yolu index.htm dosyasındaki tag niteliğini (body) kullanmaktır. Şu biçimde yazılmıştır: (gövde arka planı= "Klasör_adı/Görüntü_adı.uzantısı")(/body). Yani, “Resim” adında ve JPG uzantılı bir resmimiz varsa ve klasöre “Resimler” adını vermişsek, HTML kod girişi şu şekilde görünecektir: (body arka plan = "Resimler/Resim.jpg") … (/vücut) .
2. İkinci kayıt yöntemi CSS stilini etkiler ancak index.htm adı verilen aynı dosyaya yazılır. (gövde stili = "arka plan: url ("../Images/Picture.jpg")").
3. Üçüncü kayıt yöntemi ise iki dosya halinde yapılır. index.htm adlı bir belgede şu satır yazılır: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Ve style.css adlı stil dosyasına zaten şunu yazıyoruz: body (arka plan: url(Resimler/Resim.jpg")).

HTML'de arka plan görselinin nasıl oluşturulacağını tartıştık. Artık görüntünün tüm ekranın genişliği boyunca nasıl uzatılacağını anlamanız gerekiyor.

Arka plan resmini pencerenin genişliğine kadar uzatmanın yolları

Ekranımızı yüzdelik biçimde hayal edelim. Ekranın tüm genişliğinin ve uzunluğunun %100 x %100 olacağı ortaya çıktı. Görüntüyü bu genişliğe kadar uzatmamız gerekiyor. Style.css dosyasındaki resim girişine, resmi monitörün tüm genişliğine ve uzunluğuna uzatacak bir satır ekleyelim. Bu CSS tarzında nasıl yazılır? Çok basit!

arka plan: url(Resimler/Resim.jpg")

arka plan boyutu: %100; /* bu giriş çoğu modern tarayıcıya uygundur */

Böylece, tüm ekranı kaplayacak şekilde html'de arka plan olarak bir resmin nasıl oluşturulacağını bulduk. İndex.htm dosyasına yazmanın da bir yolu vardır. Bu yöntem her ne kadar güncelliğini kaybetmiş olsa da yeni başlayanların bunu bilmesi ve anlaması gerekmektedir. (head)(style) div ( arka plan boyutu: kapak; ) (/style) (/head) etiketinde bu giriş, arka plan için tüm genişliği boyunca konumlandırılacak özel bir blok seçtiğimiz anlamına gelir. pencere. Bir web sitesinin arka planını, herhangi bir modern tarayıcıda görüntünün ekranın tüm genişliği boyunca uzanması için bir HTML görüntüsüne dönüştürmenin 2 yolunu inceledik.

Sabit bir arka plan nasıl yapılır

Bir resmi gelecekteki bir web kaynağının arka planı olarak kullanmaya karar verirseniz, o zaman uzunluğu esnememesi ve estetik görünümü bozmaması için onu nasıl hareketsiz hale getireceğinizi bulmanız yeterlidir. Bu küçük eklemeyi yardımla yazmak yeterince kolaydır. style.css dosyasına arka plan: url(Images/Picture.jpg") sabitlendikten sonra bir cümle eklemeniz veya bunun yerine noktalı virgül - konum: sabitten sonra ayrı bir satır eklemeniz gerekir. Böylece arka plan resminiz hareketsiz hale gelecektir. Sitedeki içerikte gezinirken metin satırlarının hareket ettiğini ancak arka planın yerinde kaldığını göreceksiniz. Böylece, arka planı html'de nasıl bir görüntüye dönüştüreceğinizi çeşitli şekillerde öğrendiniz.

HTML'de bir tabloyla çalışma

Birçok deneyimsiz web geliştiricisi, tablolar ve bloklarla karşılaştıklarında, HTML'de bir resmin tablo arka planı olarak nasıl yapılacağını genellikle anlamazlar. Tüm CSS stilleri gibi bu web programlama dili de oldukça basittir. Ve böyle bir sorunun çözümü birkaç satır kod yazmak olacaktır. Bu yazıyı zaten biliyor olmalısın tablo satırları ve sütunlar sırasıyla (tr) ve (td) etiketleri olarak gösterilir. Tablonun arka planını resim şeklinde yapmak için (tablo), (tr) veya (td) etiketine görselin bağlantısını belirten basit bir ifade eklemeniz gerekir: arka plan = görselin URL'si. Açıklık sağlamak için birkaç örnek verelim.

Arka plan yerine resim içeren tablolar: HTML örnekleri

2x3'lük bir tablo çizelim ve arka planını “Resimler” klasörüne kayıtlı bir resim yapalım: (tablo arka planı = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tablo). Bu şekilde masamız resmin arka planına boyanacaktır.

Şimdi aynı plakayı 2x3 boyutunda çizelim ancak 1, 4, 5 ve 6 numaralı sütunlara resim yerleştirelim. (tablo)(tr)(td arka plan = “Resimler/Resim.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td arka plan = “Görüntüler/Resim.jpg”)4(/td) (td arka plan = “Görüntüler/Resim.jpg”) 5( /td) (td arka plan = “Resimler/Resim.jpg”)6(/td) (/tr) (/table). Görüntüledikten sonra arka planın tablonun tamamında değil, yalnızca kayıtlı olduğumuz hücrelerde göründüğünü görüyoruz.

Sitenin tarayıcılar arası uyumluluğu

Bir web kaynağının tarayıcılar arası uyumluluğu diye bir şey de vardır. Bu, site sayfalarının eşit derecede doğru şekilde görüntüleneceği anlamına gelir. farklı türler ve tarayıcı sürümleri. Bu durumda HTML kodunu ve CSS stilini gerekli tarayıcılara göre ayarlamanız gerekir. Ek olarak, akıllı telefon geliştirmenin modern çağında, birçok web geliştiricisi akıllı telefonlara uyarlanmış web siteleri oluşturmaya çalışıyor. mobil versiyonlar ve bilgisayar görünümü altında.

Vlad Merjeviç

Web sayfalarının özelliklerinden dolayı arka plan resimleri site belgelerinin düzeninde önemli bir rol oynar. Aynı zamanda, örneğin metne resim ekleme sürecini otomatikleştirmek, degrade geçişler oluşturmak ve tabii ki içeriğin altına bir arka plan eklemek gibi çeşitli şeylerle aktif olarak ilgileniyorlar. Aşağıda arka plan resimlerini kullanmanın bazı yönleri verilmiştir.

Bir web sayfasının arka planı

Bir web sayfasında arka plan resminin ayarlanması geleneksel olarak etiketin arka plan özelliği aracılığıyla gerçekleşir. .

Bu model yatay ve dikey olarak tekrarlanarak tarayıcı penceresinin tamamını doldurur. Burada yaratıcılık için özel bir seçeneğin olmadığı açık, o yüzden stillere dönüp CSS kullanarak neler yapılabileceğini görelim.

CSS'nin arka plan resmini kontrol eden beş özelliği vardır: eklenmesi, konumu ve tekrarlanması. Ancak tüm bu parametrelerin yerini gelecekte kullanacağımız tek bir evrensel özellik olan arka plan alır.

Duvar kağıdı ekleme

Resim ekleme, url anahtar sözcüğünü kullanarak resmin adresini ayarlayarak gerçekleşir. Bir görüntünün tekrarını kontrol etmek için tekrarlama yok, tekrarlama-x (yatay olarak tekrarla) ve tekrarla-y (dikey olarak tekrarla) argümanları kullanılır. Bu sayede Şekil 2'de gösterilen web sayfasını alabilirsiniz. 1.

Bir web sayfasına bir görsel ayarlamak için, Örnek 1'de gösterildiği gibi GÖVDE seçiciye bir arka plan stili özelliği eklemeniz gerekir.

Arka plan resmi İÇİNDE bu örnekte

grafik target.gif, bir web sayfasının görüntüyü tekrarlamadan arka planı olarak tanımlanır. Görüntünün tarayıcının kenarlarına sıkı bir şekilde sığmasını önlemek için orijinal konumundan 30 piksel sağa ve 20 piksel aşağı kaydırılır.

Bir desenin tekrarlanması

Arka plan desenini yatay veya dikey olarak tekrarlanacak şekilde ayarlayabilmeniz nedeniyle, web sayfalarının tasarımı için çeşitli seçenekler mevcuttur. Örneğin, sol kenar boyunca dikey bir şerit oluşturmak için (Şekil 2), Şekil 2'de gösterilen görüntüye ihtiyacınız olacaktır. 3.

Tasarım, gözle görülür ek yerleri olmadan dikey olarak birbirine oturacak ve ayrıca web sayfasının belirtilen arka plan rengiyle tek bir bütün oluşturacak şekilde olmalıdır.

Benzer şekilde, örneğin bir degrade oluşturarak ve bunu arka plan görüntüsü olarak ayarlayarak arka planı yatay olarak tekrarlayabilirsiniz (Şek. 4).

Şekil 2'de gösterilen web sayfasını almak için. 4'te öncelikle degrade geçişli bir resim yapmanız gerekecek. Genişlik 20-40 piksel belirtmek için yeterlidir ve görüntünün yüksekliği, belgenin amacına ve web sayfasının içeriğinin beklenen yüksekliğine bağlıdır. Ayrıca büyük bir çizimin hacim artışına yol açacağını da unutmayın. grafik dosyası. Bu da yükleme hızını olumsuz yönde etkileyecek ve sonuçta arka plan görüntüsünün yavaşlamasına yol açacaktır. Bu durumda 30x200 piksellik bir resim oldukça uygundur (Şekil 5).

Örnek 3, degrade bir arka plan oluşturmak için HTML kodunu göstermektedir.

Örnek 3: Yatay arka plan tekrarı

Degrade tasarımı düz renk bloğuyla iyi uyum sağlar; dolayısıyla bu örnekte web sayfasının içeriğini görüntülemek için bir katman ekliyoruz.

Metne resim ekleme

Bir arka plan görüntüsü kullanarak, başlıklar gibi belirli metinlere grafik ekleme işlemini otomatikleştirebilirsiniz. Bunu yapmak için istenen seçiciye uygulanan arka plan evrensel özelliğini kullanın. Değer, resme giden yoldur ve tekrarlanmaması için tekrarlanmayan argümandır (örnek 4).

Örnek 4: Resim ekleme

Başlık

Ana metin

Bu örnekte gösterildiği gibi resim orijinal konumuna göre yatay ve dikey olarak hareket ettirilebilir; varsayılan olarak burası sol üst köşedir blok elemanı. Arka plan kaydırma, görüntüyü metne göre istediğiniz şekilde konumlandırmanıza olanak tanır. Metnin görüntüyle örtüşmesini önlemek için, metnin belirtilen mesafe kadar sağa kaydırılması nedeniyle padding-left özelliğini eklemelisiniz. Her durumda bireyseldir ve genellikle resmin genişliği artı resim ile metin arasında istenen boşluğa eşittir.

17.10.2015

Henüz değil

Herkese selam!
HTML'nin temellerini öğrenmeye devam edelim.
Bu derste size anlatacağım ve örnekler göstereceğim arka plan nasıl yapılır HTML sayfasındaki bir renk veya resimden.
Oldukça basit!
Renkle başlayalım!
Yazının renginin nasıl değiştirileceğini anlattığım ve yazının sonunda çeşitli renk ve tonlar için kodlar verdiğimi sanırım kaçırmadınız. Bu dersi sana neden hatırlattım? Evet, çünkü hazır renk kodlarının bulunduğu bir tablo var, onları alın ve bu derste hemen uygulayın.
Peki HTML'de arka plan rengi nasıl yapılır?

HTML'de arka plan rengi

Bir HTML belgesindeki varsayılan arka plan rengi beyazdır. Renk istenilen şekilde nasıl ayarlanır?
“bgcolor” özelliği bu konuda bize yardımcı olacaktır. Arka planı boyamak için bu özelliği "body" etiketine ekleyin:

Veya bunun gibi:

İşte HTML kodunun tamamı:

Sayfa metni yeşil, arka plan ise siyah olacaktır.

Sonuç şu şekilde olacaktır:

Bir resimden arka plan oluşturmak istiyorsanız "body" etiketine "background" özelliğini ekleyin:

Web sayfanızın bulunduğu herhangi bir resmi doldurun (benim örneğimde sayfanın adı "fon" ve ".gif" uzantısıdır):

İşte HTML kodunun tamamı:

Sonuç şu şekilde olacaktır:

Arka plan resmi resimler klasöründe veya başka bir klasörde bulunuyorsa şöyle görünecektir:

İşte HTML kodunun tamamı:

Güzel bir arka planda sayfa metni.

Bugünlük bu kadar! Bence ders zor değildi ve her şeyi anladınız. Sorularınız varsa yorumlara yazın.
Bir sonraki derslerde sizi görmeyi sabırsızlıkla bekliyorum.

Önceki yazı
Sonraki giriş

2 oy

Bloguma hoş geldiniz. Anlamaya devam ediyoruz HTML'nin temelleri. Bu eğitim o kadar basit ve ilginç olacak ki, programlama dilleri hakkında daha fazla bilgi edinmek isteyeceğinizi umuyorum. Sadece birkaç dakika içinde HTML'de arka plan olarak resim yapmayı ve mükemmel sonuçlar elde etmeyi öğreneceksiniz.

Ayrıca arka planı olabildiğince pürüzsüz ve güzel hale getirecek bazı nüanslardan da bahsedeceğim. Peki başlayalım mı?

Bir resim seçme

Bir resim seçerek başlamak istiyorum. Böylece sayfada daha düzgün ve güzel görünürsünüz, boyutlar ve hizalamayla uğraşmanıza gerek kalmaz. Derhal kusursuz dokular aramanızı öneririm. Nedir?

Ne yazık ki, html'deki bir görüntüyü tüm ekranı dolduracak şekilde genişletmek imkansızdır. Fotoğraf gerçek boyutunda kullanılmıştır. Resim küçükse, aşağıdaki ekran görüntüsünde olduğu gibi tüm alanı kaplayacaktır. Resmi genişletmek için ek bir CSS belgesi oluşturmanız gerekecek, bu olmadan çalışmaz.

Yine de sistemi atlama fırsatınız var. Bunu yapmak için Photoshop'u ve ekran genişliğine (1280x720) kadar resimler kullanın. Her ne kadar bu durumda, aşağı kaydırırken resim diğerinin yerini alacaktır.

CSS kullanmak istemiyorsanız çok daha iyi bir seçenek kesintisiz dokular kullanmaktır. Görünür eklemleri yoktur. Tasarım olarak duvar kağıdına veya modern fayanslara benzerler. Biri diğerinin yerini alır ve hiçbir bağlantı görülmez.

Kullanımlarının yasal sonuçlarının olmamasıyla ilgileniyorsanız, web sitesinde arama yapmanızı öneririm. Pixabay.com .

HTML'

Şimdi kodla çalışalım. Şu anda html ile çalıştığımızı hemen belirtmeliyim, yani sitenin tamamı için değil, yalnızca kodun yazıldığı belirli bir sayfa için görüntüyü değiştiriyoruz. Kaynağın tamamını değiştirmekle ilgileniyorsanız, kullanarak kodlamanız gerekir. css, ancak bunun hakkında daha sonra daha fazla bilgi vereceğiz.

Yani not defterinde çalışabilirsiniz, ben NotePad++'ı tercih ediyorum. İçinde çalışmak çok daha uygun: Kod sizin için tamamlandı, etiketler vurgulandı. Program ücretsizdir ve yaklaşık 3 MB ağırlığındadır. Özellikle yeni başlıyorsanız kesinlikle tavsiye ederim.

Yani, etikete vücutözellik eklemeniz gerekir arka plan ve resmin çekileceği resmin bağlantısını belirtin. Programda böyle görünüyor.

Sadece not defterini açıp bu kodu kopyalayabilirsiniz. Tırnak içine, beğendiğiniz resmin bağlantısını koyun.

<HTML > <kafa > <başlık > Arka plan resmi</başlık> </kafa> <gövde arka planı = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </gövde> </html>

Yeni başlayanlar için şunu belirtmek isterim, mesele bu. Pixabay'den bir görsel alırsanız, bağlantıyı görselin bulunduğu sayfaya yapıştırmanız, görseli bir sonraki sekmede açmanız gerekir.

Bu tam URL'yi kopyalayın.

Belgeyi kaydedin. Not defteri kullanıyorsanız uzantıyı kullanmanız gerektiğini unutmayın. .HTML . Belgeye bir ad vermeniz yeterli; örneğin, geri.html . Aksi halde şu şekilde kaydedilecektir: metin belgesi ve tarayıcı ne yapması gerektiğini anlamayacak.

Bittiğinde sayfa farklı bir renkle doldurulur.

Html hakkında daha fazla bilgi edinmek istiyorsanız indirmenizi öneririm Evgeniy Popov'dan ücretsiz kurs . Buradan daha fazla etiket, dil yeteneği öğrenecek, bazı yeni teknikleri deneyecek ve daha fazlasını öğreneceksiniz.

Evgeniy Popov'un kurslarının çok popüler olduğunu söylemeyeceğim. Pek çok uzman onu azarlıyor ve eğer bu tür ifadelerle karşılaştıysanız, işte benim fikrim. Bu dersler ücretsiz olarak verilmektedir ve buna rağmen ana görevleri olan yeni başlayanlara temelleri göstermek ve onu güncel tutmak konusunda mükemmel bir iş çıkarıyorlar.

Her yazarın nasıl yazılacağı konusunda kendi fikri olduğu gibi programcıların da kendi tarzları vardır. Tüm hayatınızı web sitelerinin nasıl oluşturulacağını öğrenerek geçirebilirsiniz ancak bir yerden başlamanız gerekir. Kitaplardan mı? Bu değil. Evet, daha güvenilir bilgiler, güncel bilgiler içeriyorlar ama ustalaşmaları çok zor.

Benimle aynı fikirde değil misin? Alternatif sunabilirim. Elizabeth ve Erica Freeman'ın kitabı HTML, XHTML ve CSS'yi öğrenmek " Çok sıkıcı bir çok satan kitap değil ve çok uzun zaman önce, 2016'da yayınlandı. Bilgiler henüz güncelliğini yitirmedi.

CSS

Eğer arka planın sitenizin tüm sayfalarında tekrarlanmasını istiyorsanız CSS şarttır. Elbette önceki bölümde olduğu gibi her seferinde yolu belirtebilirsiniz. Ancak zamanla onu değiştirmeniz gerekip gerekmediğini düşünün: bağlantı güncelliğini yitirir veya yalnızca tasarımı değiştirmek istersiniz. Her sayfaya gidip kodu değiştirmek mi istiyorsunuz? Bu şekilde çalışmayacak.

CSS bu sorunun çözülmesine yardımcı olur. Css uzantılı bir dosya oluşturup aşağıdaki kodu girmeniz gerekiyor:

Biraz kodun kendisinden bahsedelim. Parantez içinde, sonra URL üçüncü taraf bir kaynaktan bir resme bağlantı girebilirsiniz veya resim bu dosyayla aynı klasördeyse yalnızca belgenin adını girebilirsiniz.

Daha iyi bilmek isteyenler için

Şu tarihte: css yardımı uzatabilirsin arka plan resmi, kendini tekrarlamadığından emin olun, GIF animasyonu ekleyin ve çok daha fazlasını yapın.

Her şeyi bir makaleye yazamazsınız. Ve kendime böyle bir görev belirlemedim. Pek çok incelik var ve size her şeyi tek bir makalede anlatacaklarına söz verirlerse, bu bir aldatmacadan başka bir şey değildir.

Web sitelerini nasıl doğru yazacağınızı öğrenmek ister misiniz? Programlama dillerini öğrenmenizi tavsiye ederim. Andrey Bernatsky'nin kursunu tavsiye edebilirim " Sıfırdan Profesyonele HTML5 ve CSS3 " Bu yazarı gerçekten çok seviyorum. Bu özel dersi birkaç yıl önce almamıştım; buna benzer ama daha az modern bir şey vardı.

Yazar çok güzel konuşuyor, her şey kolay ve anlaşılır. Bu kursun en önemli özelliği sadece ders çalışmamanız, öğretmenle birlikte belirli bir web sitesi oluşturmanızdır. Sonuç olarak, bir kartvizit, bir blog ve hatta bir çevrimiçi mağazaya sahip olacaksınız. Çok hoş. HTML5 ile ilgili ilk üç teorik dersi bu kurstan hemen buradan izleyebilirsiniz.

Bu arada, bu kursla birlikte 7 bonus alacaksınız: Andrei Bernatsky'den html ve css'nin temelleri, yeni başlayanlar için düzen, akşamları bir açılış sayfası oluşturma ve çok daha fazlası. Ciddi bir eğitime başlamadan önce ücretsiz kursu deneyin " HTML5 ve CSS3'te pratik yapın ».

Aslında hepsi bu. Daha fazlasını öğrenmek için bültene abone olun. Çok yakında size biraz daha anlatacağım uyarlanabilir düzen, herhangi bir blogdan elde ettiğiniz kazancı artırın ve size çok şey kazandırın yararlı ipuçları işin basitleştirilmesiyle ilgili. Tekrar görüşmek üzere, çalışmalarınızda başarılar dilerim.

12/27/14 56.3K

Zemini pahalı bir İran halısıyla kaplıysa herhangi bir oda çok daha iyi görünecektir. Peki web siteniz neden daha kötü? Belki de zeminini pahalı, zarif bir el yapımı halıyla "örtme" zamanı gelmiştir. Bir web sitesi için arka planın nasıl oluşturulacağına daha yakından bakalım:

Sitenin arka planı

Eski web sitesi tasarımı sıkıcı hale geldi. Ve yeni ve lezzetli bir şey istiyorum. A yeni tasarım kendi ellerinizle pişirirseniz böyle olacaktır.

Ancak bir kaynağın tüm tasarımını kendi başınıza tamamen değiştirmek nankör bir iştir. Ve herkesin elleri bu görev için uygun şekilde eğitilmemiştir. Bu nedenle eski bir şablonu yenilemenin en kolay yolu kaynağın arka plan rengini veya arka plan resmini değiştirmektir.

Bir web sitesindeki arka planı değiştirmenin birkaç yolu vardır. Bunun için CSS veya html'nin yeteneklerinden yararlanılır. Ancak arka planda çalışmaya yönelik özelliklerin birçoğu bu web teknolojilerinde aynı ada ve uygulama yöntemine sahiptir.

Html'de arka planlarla çalışmanın temelleri

Arka plan olarak çeşitli öğeler kullanılabilir:

• Renk;
• Arka plan resmi;
• Doku görüntüsü.

Her birinin kullanımına daha ayrıntılı olarak bakalım.

Bir sitenin arka plan rengini ayarlamak için stil özelliğinin arka plan rengi özelliğini kullanın. Yani bir web sayfasının ana rengini ayarlamak için onu etiketin içine yazmanız gerekir. . Örneğin:

Web sitesi arka planı #55D52B

Onaltılı renk koduna ek olarak anahtar kelime veya RGB formatındaki bir değer desteklenir. Örnekler:

Web sitesi arka planı rgb(23,113,44)

Web sitesi arka planı yeşil

Arka plan rengini kullanarak ayarlayın anahtar kelimeler diğer iki yönteme göre bir takım sınırlamaları vardır.

HTML, renkleri ayarlamak için yalnızca 16 anahtar kelimeyi destekler. İşte bunlardan birkaçı: beyaz, kırmızı, mavi, siyah, sarı ve diğerleri.

Bu nedenle, bir html web sitesinin arka planını ayarlamak için onaltılık veya RGB formatını kullanmak daha iyidir.

Renk seçimine ek olarak başka kişiselleştirme seçenekleri de mevcuttur. Arka plan rengi özelliği şeffaf olarak ayarlanırsa sayfanın arka planı şeffaf hale gelir. Bu değer varsayılan olarak bu özelliğe atanır.

Şimdi bir site için arka plan resmi ayarlamak için hiper metin dilinin yeteneklerine bakalım. Bu, arka plan resmi özelliği kullanılarak yapılabilir.

Koddan da görebileceğiniz gibi resim parantez içinde belirtilen url yolu üzerinden bağlanıyor. Ancak tüm resimler, boyutları ekranın tamamını dolduracak kadar büyük değildir. Küçük resmin nasıl görüntüleneceğini görelim.

Diyelim ki şiirle ilgili bir web sitesi geliştiriyoruz ve arka plan olarak Pegasus görselini kullanmamız gerekiyor. Kanatlı at, şairin yaratıcı düşüncesinin özgürlüğünü temsil edecek!

Görüntünün ekranın ortasında bir kez görüntülenmesine ihtiyacımız var. Ancak ne yazık ki tarayıcı bizim yüce arzularımızı anlamıyor. Ayrıca sitenin arka planı için ekran alanının alabileceği sayıda daha küçük bir resim görüntüler:

Belki de dört gülen kanatlı at, şairlere çok fazla ilham kaynağı olacaktır. Bu nedenle Pegasus'umuzun klonlanmasını yasaklıyoruz. Bunu arka planda tekrarlama özelliğini kullanarak yapıyoruz. Olası değerler:

• tekrarla-x – arka plan resmini yatay olarak tekrarla;
• tekrar-y – dikey olarak;
• tekrarla – her iki eksende;
• tekrarlama yok - tekrarlama yasaktır.

Listelenen seçenekler arasında sonuncusuyla ilgileniyoruz. Sitenin arka planını değiştirmeden önce kodumuzda kullanıyoruz:

Ancak elbette broşürümüz ekranın ortasında yer alsa daha iyi olurdu. Arka plan konumu özelliği tam olarak arka plan resmini sayfada konumlandırmak için tasarlanmıştır. Konum koordinatlarını birkaç yolla ayarlayabilirsiniz:

• Anahtar kelime ( üst, alt, orta, sol, sağ);
• Yüzde – sayma sol üst köşeden başlar;
• Ölçü birimleri (piksel) cinsinden.

En basit ortalama seçeneğini kullanalım:

Kaydırırken resmin konumunu düzeltmeniz gerekir. Bu nedenle, sitenin arka planı olarak bir resim yapmadan önce, arka plan eklentisinin özel özelliğini kullanın. Kabul ettiği değerler şunlardır:

• taslak;


• sabit.

Son değere ihtiyacımız var. Şimdi örnek kodumuz şöyle görünecek:

Web sitesi dokusu arka planı

İlk örnekte arka plan olarak geniş ve güzel bir çöl manzarası kullandık. Ama böyle bir güzellik için tam olarak para ödemeniz gerekiyor. Yapılan görüntünün ağırlığı yüksek kalite, birkaç megabayta ulaşabilir.

Bu hacim, yüksek hızlı İnternet bağlantısı olan tarayıcının sayfa yükleme hızını hiçbir şekilde etkilemez. Peki ya mobil internet, birkaç "metre" yüklemek uzun zaman alacak mı?