BODY etiketi nitelikleri. HTML etiketleri html, head, body. Herhangi bir İnternet sayfasında bulunan etiketler Geliştirilmiş bir HTML belge yapısına bir örnek

Öğe (İngilizceden vücut- gövde), tarayıcı penceresinde görüntülenen bir web sayfasının içeriğini (içerik) depolamak için tasarlanmıştır. Belgede görüntülenmesi gereken bilgiler kabın içinde bulunmalıdır . Bu bilgiler metin, resimler, etiketler, JavaScript vb. içerir.

ayrıca bir web sayfasındaki bağlantıların ve metnin renklerini belirlemek için de kullanılır. Bu uygulama HTML'de hoş karşılanmaz ve bunun yerine bir renk şeması belirlemek için stillerin kullanılması ve bunları gövde seçiciye uygulanması önerilir.

Sıklıkla belgenin geçerli pencereye veya çerçeveye yüklenmesi tamamlandıktan sonra çalışan aşırı yükleme gibi bir olay işleyicisini yerleştirmek için kullanılır.

Etiketleri açma ve kapatma bir web sayfasında gerekli değildir, ancak bunları bir HTML belgesinin başlangıcını ve sonunu tanımlamak için kullanmak iyi bir stil olarak kabul edilir.

Sözdizimi

...

Kapanış etiketi

Gerekli değil.

Öznitellikler

Örnek

VÜCUT

Aristoteles bile "Politika" adlı eserinde müziğin bir kişiyi etkileyen "bir tür arınma, yani zevkle bağlantılı bir rahatlama" sağladığını söylemiştir.

Mevcut örneğin sonucu Şekil 2'de gösterilmektedir. 1. Bir öğenin yükleme olayını kullanırken JavaScript'te yazılmış bir komut dosyası yürütülür, bu durumda belgenin yüklendiğine dair bir mesaj görüntüler.

Pirinç. 1. Belgedeki açılır pencere

Şartname

Her spesifikasyon birkaç onay aşamasından geçer.

  • Öneri - Spesifikasyon W3C tarafından onaylanmıştır ve standart olarak önerilmektedir.
  • Aday Tavsiyesi ( Olası öneri) - standarttan sorumlu grup, hedeflerini karşıladığından memnundur ancak standardı uygulamak için geliştirme topluluğunun yardımına ihtiyaç duyar.
  • Önerilen Öneri Önerilen Öneri) - bu aşamada belge nihai onay için W3C Danışma Konseyine sunulur.
  • Çalışma Taslağı - Topluluğun incelemesi için tartışılan ve değiştirilen taslağın daha olgun bir versiyonu.
  • Editörün taslağı ( Editör taslağı) - proje editörleri tarafından değişiklikler yapıldıktan sonra standardın taslak versiyonu.
  • Taslak ( Taslak spesifikasyon) - standardın ilk taslak versiyonu.

Yaşayan HTML standardı (Living) öne çıkıyor - sürekli geliştirilme aşamasında olduğundan ve düzenli olarak güncellendiğinden geleneksel sürüm numaralandırmasına bağlı kalmıyor.

Etiket (çiftler), bir tarayıcı penceresinde görüntülenen bir web sayfasının içeriğini (içerik) depolamak için tasarlanmıştır. Belgede görüntülenmesi gereken bilgiler BODY kabının içinde bulunmalıdır. Bu bilgiler metin, resimler, etiketler, JavaScript vb. içerir.

Etiket ayrıca bir web sayfasındaki bağlantıların ve metnin renklerini belirlemek için de kullanılır. Bu uygulama HTML 4'te kullanımdan kaldırılmıştır ve bunun yerine bir renk şeması belirlemek için stillerin kullanılması ve bunları seçiciye uygulanması önerilir. . Ancak çoğu seçenek hâlâ tarayıcılarda desteklenmektedir.

Sıklıkla etiketleyin belgenin geçerli pencereye veya çerçeveye yüklenmesi tamamlandıktan sonra çalışan onLoad gibi bir olay işleyicisini yerleştirmek için kullanılır.

Bir web sayfasındaki BODY etiketlerini açma ve kapatma isteğe bağlıdır, ancak bunları bir HTML belgesinin başlangıcını ve sonunu tanımlamak için kullanmak iyi bir stildir.

Sözdizimi

...

Kapanış etiketi
Gerekli.

Seçenekler
alink - etkin bağlantının rengini ayarlar.
arka plan - web sayfasındaki arka plan resmini ayarlar.
bgcolor - web sayfasının arka plan rengi.
bgproperties - arka planın metinle birlikte kaydırılıp kaydırılmayacağını belirler.
Bottommargin - tarayıcı penceresinin alt kenarından içeriğe girinti.
sol kenar boşluğu - tarayıcı penceresinin kenarından içeriğe kadar yatay kenar boşluğu.
bağlantı - bağlantı rengi.
kaydırma - kaydırma çubuklarının görüntülenip görüntülenmeyeceğini ayarlar.
metin - belgedeki metnin rengi.
topmargin - tarayıcı penceresinin üst kenarından içeriğe girinti.
vlink - ziyaret edilen bağlantıların rengi.

Örnek 1: BODY etiketini kullanma



Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam Erat volutpat.


Enim ve minimum düzeyde olmak üzere, her türlü sonuçtan elde edilebilecek en iyi egzersizi yapmaktır.



BODY etiketi parametrelerinin açıklaması

ALINK parametresi

Tanım
Etkin bağlantının rengini ayarlar. Bağlantı fare imleciyle tıklatıldığında veya klavye kullanılarak seçildiğinde geçerli bağlantı rengi etkin renge dönüşür.

Sözdizimi
...

Argümanlar
Renk değeri iki şekilde ayarlanabilir.

1. Adıyla
Tarayıcılar bazı renkleri adlarına göre destekler.

2. Onaltılı değere göre
Renkleri belirtmek için onaltılık sayılar kullanılır. Onaltılık sistem, ondalık sistemden farklı olarak adından da anlaşılacağı gibi 16 sayısını temel alır. Sayılar şu şekilde olacaktır: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. 10'dan 15'e kadar olan sayıların yerini Latin harfleri alır. Onaltılık sistemde 15'ten büyük sayılar iki sayının birleştirilmesiyle oluşur. Örneğin ondalık sistemde 255 sayısı, onaltılık sistemde FF sayısına karşılık gelir. Sayı sistemini belirlerken karışıklığı önlemek için, onaltılık sayının önüne # karma sembolü yerleştirilir, örneğin #666999. Üç rengin her biri (kırmızı, yeşil ve mavi) 00'dan FF'ye kadar değerler alabilir. Böylece, renk sembolü üç bileşene bölünmüştür #rrggbb; burada ilk iki sembol rengin kırmızı bileşenini, ortadaki iki - yeşil ve son iki - mavi bileşenini gösterir.

Varsayılan değer
Bağlantı rengiyle eşleşir.



...

ARKA PLAN parametresi

Tanım
Duvar kağıdı olarak kullanılacak görüntüyü belirtir. Normal görsellerden farklı olarak arka planın genişlik veya yükseklik ayarı yoktur ve her zaman %100 tam boyutta görüntülenir. Resmin boyutu tarayıcı penceresinden daha küçükse, resim bir mozaik gibi sıralanarak yatay olarak sağa ve aşağıya doğru tekrarlanır. Bu nedenle arka plan görsellerinin birleşim yerlerinde site ziyaretçilerinin fark edebileceği gözle görülür farklılıklar meydana gelebilir. Bir arka plan resmi seçerken, bununla web sayfasındaki metin arasında yeterli kontrast olduğundan emin olun. Animasyonlu GIF'ler arka plan olarak kullanılabilir ancak okuyucunun dikkatini dağıtır.

Sözdizimi
...

Argümanlar
Geçerli herhangi bir resim adresi - göreceli veya mutlak bir yol kullanabilirsiniz.

Varsayılan değer
HAYIR.

Örnek 3: Bir web sayfasına duvar kağıdı ayarlama



...

BGCOLOR parametresi

Tanım
Web sayfasının arka plan rengini ayarlar. Bu parametreyi arka plan görüntüsüne yakın bir arka plan rengi seçerek arka planla birlikte kullanabilirsiniz.

Sözdizimi
...

Argümanlar
ALINK parametresine bakın.

Varsayılan değer
Tarayıcıya ve sürümüne bağlıdır ancak arka plan rengi genellikle beyazdır.

Örnek 4: Bir web sayfasının arka plan rengini ayarlama



...

BGPROPERTIES parametresi

Tanım
Varsayılan olarak arka plan resmi web sayfasının içeriğiyle birlikte kayar. Bgproperties parametresini kullanarak arka planı tek bir yerde sabitleyebilir ve böylece yalnızca içeriğin kaydırılmasını sağlayabilirsiniz. Bir web sayfasının bu kalitesi web siteleri için nadiren kullanılır, bu nedenle kullanıcılara tuhaf ve sıra dışı görünebilir.

Sözdizimi
...

Argümanlar
Arka planı düzelten tek bir sabit parametre vardır. Bu özelliği kaldırmak istiyorsanız BODY etiketinden bgproperties parametresini kaldırın veya boş bir değere - "" ayarlayın.

Varsayılan değer
HAYIR.

Örnek 5: Arka planı düzeltme



...

Not

  • Tüm tarayıcılar bu ayarı desteklemez; örneğin Netscape bunu yok sayar.
  • Stiller aracılığıyla bir web sayfasında arka plan resmi ayarlarken bgproperies parametresinin çalışmayı durdurduğu fark edildi.

LEFTMARGIN parametresi

Tanım
Tarayıcı penceresinin sol ve sağ kenarlarından web sayfası içeriğine kadar olan boşluk miktarını tanımlar.

Sözdizimi
...

Argümanlar
Uzaklığı piksel cinsinden belirten pozitif bir tam sayı.

Varsayılan değer
Windows için 10 piksel ve Macintosh için 8 piksel.

Örnek 6: Sol kenar boşluğunu değiştirme



...

Not

  • Netscape tarayıcısı leftmargin parametresini anlamıyor; kenar boşluklarını ayarlamak için, marj genişliği - yatay kenar boşlukları ve kenar yüksekliği - dikey kenar boşlukları parametrelerini kullanır.
  • Sağ, alt ve üst kenarlardan kenar boşluklarını ayarlamak için sırasıyla rightmargin, Bottommargin ve topmargin parametrelerini kullanın.

BAĞLANTI parametresi

Tanım
Ziyaret edilmeyen bağlantıların rengini ayarlar.

Sözdizimi
...

Argümanlar
ALINK parametresine bakın.

Varsayılan değer
#0000FF

Örnek 7: Bağlantıların rengini ayarlama



...

KAYDIRMA parametresi

Tanım
Kaydırma parametresi, bir web sayfasının içeriği geçerli pencerenin boyutunu aştığında tarayıcı penceresinde kaydırma çubuklarının varlığını kontrol eder. Bu ayar yalnızca Internet Explorer'da çalışır.

Sözdizimi
...

Argümanlar
evet - kaydırma çubuklarını görüntüler.
hayır - kaydırma çubuklarının pencerede gösterilmesini engeller.

Varsayılan değer
Evet

Örnek 8: Kaydırma çubuğunu gizleme



...

METİN parametresi

Tanım
Bir web sayfasında kullanılan metnin varsayılan rengini ayarlar. Tek tek öğelerin renkleri stiller kullanılarak kolayca değiştirilebilir.

Sözdizimi
...

Argümanlar
ALINK parametresine bakın.

Varsayılan değer
#000000

Örnek 9: Metin rengini değiştirme



...

VLINK parametresi

Tanım
Ziyaret edilen bağlantıların, yani kullanıcının zaten "tıkladığı" bağlantıların rengini tanımlar.

Sözdizimi
...

Argümanlar
ALINK parametresine bakın.

Varsayılan değer
#551a8b (Gezgin 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).

Örnek 10: Ziyaret edilen bağlantıların rengini ayarlama



...

    Metin rengi

    Arka plan rengi

    Arka plan görüntüsü

    Bağlantı rengi

    İçeriğin etrafını doldurma

    Egzersiz yapmak

Bildiğiniz gibi açılış etiketi arasında ve kapanış etiketi Sayfanın gövdesi veya sayfanın içeriği yerleştirilir. Aynı zamanda kelime olarak da adlandırılır içerik(İngilizce içerikten - içerikten). Etiket seçenekleri içeriğin özelliklerini bir bütün olarak belirler. Bu derste bunlardan bazılarına bakacağız.

Metin rengi

Tüm belgenin metin rengi parametre tarafından belirlenir metin. Parametrede olduğu gibi bir renk adı veya onaltılık bir renk değeri atanır. renk etiket (bkz. Ders 2. Testin biçimlendirilmesi):

veya

Bu örneğin kullanılması sayfadaki tüm metnin kırmızı olmasına neden olacaktır.

Parametre metinİsteğe bağlı. Bunu atlarsanız sayfadaki metin varsayılan olarak siyah olacaktır. Muhtemelen önceki alıştırmaları yaparak bunu zaten görmüşsünüzdür. :)

Arka plan rengi

Sayfa arka plan rengi parametre tarafından belirlenir siyah renk. Tıpkı parametre gibi bir renk adını veya onaltılık renk değerini kabul eder metin.

veya

Bu örnek sayfa arka planının kırmızı olmasına neden olacaktır.

Parametre siyah renkİsteğe bağlı. Bunu atlarsanız varsayılan sayfa arka planı beyaz olur. Önceki alıştırmaları yaparak da zaten görmüş olduğunuz şey. :)

Arka plan görüntüsü

Parametreyi kullanma arka plan Sayfanın düz bir arka planının olmamasına, arka planının resim olmasına dikkat edebilirsiniz. Bu parametre için arka plan arka plan yapmak istediğiniz görüntünün yolunu ve parametresini atamanız gerekir kaynak etiket (Bkz. Ders 5. Görseller):

Bu şekilde, örneğin bir sayfanın arka planını bir tür desenle döşeyebilirsiniz. Ancak bu fırsatı kötüye kullanmamalı ve sayfayı çok ağırlaştırmamak için arka planda büyük resimler yapmamalısınız.

Örneğin, bir modelin şu parçasına sahibiz:

Bunu bir arka plan resmi yaparsak, şöyle bir arka plana sahip bir sayfa elde ederiz:

Parametre arka plan aynı zamanda isteğe bağlıdır. Bunu atlarsanız varsayılan sayfa arka planı beyaz olur.

Bağlantı rengi

Bağlantıların rengini ayarlamak için 3 etiket parametresi vardır vücut:

Bu parametrelere, bir şeyin renginden sorumlu olan diğer parametrelere benzer şekilde, rengin adı veya onaltılık değeri atanır.

Sayfada bu şekilde görünecektir (bağlantının tüm durumlarını görmek, başlangıçta ne olduğunu hatırlamak, basılı tutmak, neye dönüştüğünü görmek ve son olarak serbest bırakmak, bu sayfaya geri dönmek ve ne renk olduğunu görmek için) ):

Bu parametreler isteğe bağlıdır. Bunları atlarsanız, bağlantı renkleri varsayılan değerleri (sırasıyla mavi, kırmızı, mor) alır.

İçeriğin etrafını doldurma

Sayfa içeriğinin tarayıcı penceresinin kenarlarından belirli bir miktarda geri çekilmesini istiyorsanız bu durumda etiket vücut 4 parametre vardır:

    sol kenar boşluğu- sol kenardan girinti;

    sağ kenar boşluğu- sağ kenardan girinti;

    üst boşluk- üst kenardan girinti;

    alt kenar boşluğu- alt kenardan girinti yapın.

Bu parametreler piksel cinsinden değer alır. Bunlara gerek yoktur, hepsini birden veya ayrı ayrı kullanabilirsiniz. Örneğin, yalnızca sol ve sağ tarafa veya yalnızca üst ve alt kısımlara vb. girinti uygulayabilirsiniz:

veya

Merhaba beyler!

Bugün genç web sitesi yaratıcıları arasında geçerliliğini asla yitirmeyecek bir konuya değinmeye karar verdim.

Siteleri oluşturulduktan sonra her zaman özelleştirmeye ihtiyaç vardır. Bazı ayarlar, kurulu tema şablonunun dosyaları düzenlenerek gerçekleştirilir. Örneğin benzer girişleri görüntüleyen kodu eklemeniz gerekir. Ama nereye eklenecek?

Çoğu zaman yeni başlayanlar bu tür soruları sorar. Ayrıca, çözümü temelde tamamen aynı olan diğer benzer sorunlarla da ilgileniyorlar. Ayrıca bundan sonraki yazılarımda şablonun çeşitli yerlerine kod eklemeye sıklıkla başvuracağım. Bu nedenle bu materyal her zamankinden daha alakalı.

Bu makalede, WordPress şablonunuzda herhangi bir kodu eklemeniz gereken yeri belirlemenin sizin için ne kadar kolay olduğunu göstereceğim. Başlangıç ​​aşamasında sizi ilgilendirebilecek diğer önemli noktaları da dikkate alacağım.

En baştan başlayalım ve eklentileri kullanmak yerine kodları manuel olarak eklemek istiyorsanız düzenlemeniz gerekebilecek dosyalara bakalım, çünkü bu seçenek var. Hoş karşılamıyorum ama yine de tembel olanlar için bu tür eklentileri ilerleyen yazılarda anlatacağım.

Başlangıçta bir video dersi veriyorum çünkü o olmadan aşağıdaki metin formatında sunulan materyali anlamak zor olacaktır.

Şimdi her şeyi detaylı olarak metin formatında anlatacağım.

Her sayfa türünün çıktısının alınmasından sorumlu dosyalar

Kodları (komut dosyalarını) kullanarak bazı işlevlerin uygulanmasıyla ilgili diğer bloglarda birçok makale okuduysanız, aşağıdaki gibi ifadeler gördüğünüzden %100 eminim:

  • Bu kodu ana sayfayı görüntülemekten sorumlu dosyaya yapıştırın;
  • Bu kodu, kayıtların ve diğerlerinin çıktısından sorumlu dosyaya yapıştırın.

Kodları eklemeniz gerekebilecek birçok dosya var. Peki bu dosyalar nelerdir? Her şey çok basit.

  1. Ana sayfa çıktısı - index.php;
  2. Kayıtların çıktısı - single.php dosyası;
  3. Sayfa çıktısı - page.php dosyası;
  4. Arşivlerin ve kategorilerin çıktısı - archive.php;
  5. Altbilgi çıktısı - footer.php;
  6. Arama sayfası çıktısı - search.php;
  7. Kenar çubuğu çıkışı - sidebar.php;
  8. Stil dosyası - style.css;
  9. 404 sayfalık çıktı dosyası 404.php'dir.

Artık size kodu falan dosyaya yapıştırmanız gerektiğini söylediklerinde nereye bakmanız gerektiğini bileceksiniz.

Geriye kalan tek şey şu soruyu cevaplamak: Dosyaların her birinde doğru yer nasıl belirlenir?

Kodun nereye ekleneceğinin belirlenmesi

Öncelikle tanımlanması gerekmeyen yerlerden geçelim. Şablondan bağımsız olarak herkes için aynı olacaktır.

Tüm şablonlar için aynı olan ilk yer Header.php dosyasındaki alandır. Bunlar açılış ve kapanış etiketleridir .

Bazı komut dosyaları her zaman bu etiketlerin arasına yerleştirilir ve bu, sitenin tüm sayfalarında çalışması gerekir. Yani bu etiketlerin arasına örneğin sosyal düğmeler için bir komut dosyası yerleştirdik ve sitenin onları görüntüleyeceğimiz tüm sayfalarında çalışıyorlar.

Bu etiketler Header.php dosyasının en üstünde bulunur.

Her şey şablona bağlı olduğundan aradaki içerik herkes için farklı olacaktır.

Bu kodu açılış ve kapanış başlık etiketleri arasına eklemeniz gerektiği söylenirse, kodu kopyalayın, şablon dosyanızda benzer bir alan arayın ve bu etiketlerin arasına yapıştırın.

Tüm şablonlar için de aynı olan ikinci yer, altbilginin çıktısından sorumlu dosyada bulunur - footer.php.

Komut dosyaları yalnızca etiketlerin arasına yerleştirilerek bağlanamaz Header.php dosyasında. Bunları footer.php dosyası aracılığıyla da yükleyebilir, böylece site sayfasının yüklenmesini hızlandırabilirsiniz.

Gerçek şu ki, sayfa yüklenmeye başladığında yukarıdan aşağıya doğru yüklenir. Tüm komut dosyaları sayfanın üst kısmındaysa, komut dosyalarının yüklenmesi zaman alacağından içeriğinin görüntülenmesi yavaşlayacaktır.

Görevimiz sayfanın içeriğini hem ziyaretçilere hem de arama motorlarına olabildiğince hızlı bir şekilde göstermektir. Bu durumda, önce içeriği göstermek ve ardından diğer her şeyi yüklemek için komut dosyalarını sayfanın en sonuna yüklemeniz önerilir.

Bu seçeneği uygulamak için footer.php dosyasını açmanız ve betiği kapanış gövde etiketinin önüne eklemeniz gerekir. Sayfa alanının sonundan sorumlu olduğundan dosya içeriğinin sonunda bulunur.


Gördüğünüz gibi bu alandaki tüm scriptleri kapanış etiketinden önce görüntüledim(mavi bir çerçeveyle vurgulanmıştır). Bu arada, onları bu alana komut dosyalarını yerleştirerek değil, dosyalardan yükleme yoluyla ortaya çıkardım. Bundan sonra blogu önemli ölçüde hızlandırdım. Bunun nasıl yapılacağı ayrı bir makale olacak. Beklemek!

Umarım bu alanlara kod yapıştırmanızı söylediklerinde bunu sorunsuz bir şekilde yaparsınız.

Daha karmaşık bir konuya geçelim ve diğer şablon dosyalarındaki çeşitli kodların eklendiği yerleri nasıl tanımlayacağımızı öğrenmeye çalışalım. Tipik olarak bu kodlar şunları içerir:

  • Benzer gönderileri görüntüle;
  • Abonelik formu çıktısı;
  • Sosyal düğmelerin görüntülenmesi vb.

Bütün bunlar içeriğin ana kısmından sonra, yani yazının sonundan sonra eklenir. Her birinin farklı bir şablon kodu vardır ve bu nedenle sorunun evrensel bir yanıtı vardır. "Makale çıktı kodum nerede bitiyor?" kesinlikle hayır.

Ancak kodun sonunu kolayca belirleyebilirsiniz, ardından ihtiyacınız olan işlevi uygulamanız gerekir. Bu yöntemi zaten bir WordPress şablonu seçmeyle ilgili makalede () kısmen göstermiştim. Daha sonra bir İnternet tarayıcısının standart işlevselliğini kullandım.

Bu yöntemin özünü daha iyi anlamak için bu yazının başındaki videoyu izlemenizi şiddetle tavsiye ederim. İçinde her şeyin gerçek zamanlı olarak nasıl gerçekleştiğini gösterdim. Şimdi bunu olabildiğince açık bir şekilde anlatmaya çalışacağım.

Örnek olarak size Google Chrome tarayıcısını kullanmayı göstereceğim. Diğer tarayıcılarda da bu işlev bulunur ancak adları biraz farklı olabilir.

  • Google Chrome - öğe kodunu görüntüleyin;
  • Firefox - öğeyi keşfet;
  • Opera - bir öğeyi inceleyin.

Prensip 3 tarayıcıda da benzerdir. Şimdi size herhangi bir şablondaki herhangi bir alanın konumunu nasıl belirleyeceğinizi göstereceğim.

Öğe kodunu görüntülemek için gidin (Google Chrome). Sayfanın boş bir alanına sağ tıklayın.


Bundan sonra sayfanın alt kısmında, sayfanın kaynak kodunun tamamını gösteren, düzenleyebileceğimiz ve şablonun yapısının ve görünümünün gerçek zamanlı olarak nasıl değişeceğini görebileceğimiz bir panel beliriyor. Ancak veri değişiklikleri kaydedilmez. Bunu yapmak için şablon dosyalarını kendilerini düzenlemeniz gerekir.

İşte panelin neye benzediği.

Büyüteci okla işaret ettim, üzerine tıklayarak şablonun yapısını inceleyebilir ve şablonumuzun hangi bloklardan oluştuğunu belirleyebiliriz. Ben bu fonksiyona müfettiş diyorum.

Denetleyiciye tıkladıktan sonra fareyi sayfamızda hareket ettirebiliriz ve üzerine geldiğimiz tüm öğelerin renkli bir arka planla vurgulanmaya başladığını göreceğiz. Örnek olarak size şablon seçimiyle ilgili bir makalenin ekran görüntüsünü göstereceğim. Orada yazının başlığının üzerine geldim.


Yazımızın çıktısı sonrasında kod eklememiz gerekiyorsa şablonumuzun alanını inceleyerek yazının tüm içeriğini barındıran bloğu bulmamız gerektiğini tahmin etmek hiç de zor değil. Bloğun hem sonunu hem de başlangıcını arayabilirsiniz. Yani şablonu hem aşağıdan hem de yukarıdan inceleyebilirsiniz.

Ama işte bir not . Şablon dosyalarında makale bulunmadığından, yalnızca makalenin satırlarını değil, tam olarak içeriğin bulunduğu blokları da bulmamız gerekiyor. Yalnızca içeriği görüntüleyen kod vardır ve bloklar içine alınmıştır. Kapanış bloğu etiketinin hemen ardından

ve kodu yapıştırmanız gerekecek.

Peki ne yapıyoruz? Büyüteç simgesine tıklayın ve yazımızın bulunduğu alanı incelemeye başlayın. Makalenin tamamının alanı vurgulandığında sayfanın bir bölümünü bulmanız gerekir. Bu, içeriği görüntüleyen blok olacaktır.

Örnek olarak bu bloğun nasıl vurgulanacağını göstermek için küçük içerikli yeni bir makale oluşturdum.


Dürtme yöntemini kullanarak içeriğinizi içeren bloğu da bulmalısınız. Fareyle üzerine geldiğinizde bloğun adını gösteren küçük bir ipucu görürsünüz.

Şablonun böyle bir bölümünü bulduğunuzda fare düğmesine tıklayın ve bu bölüm aktif hale gelecektir. Eleman kodu görüntüleme panelinde bu bloğun bulunduğu kod satırı otomatik olarak vurgulanacaktır.


Gördüğünüz gibi bu blok, fareyle üzerine gelme araç ipucundakiyle tamamen aynı ada sahip.

Yazının ana bölümünün görüntülendiği bloğun adını bildiğimizde gerekli dosyaya giderek ihtiyacımız olan kodu bu bloktan sonra ekleyebiliriz. Örneğin kayıt çıktı dosyasını (single.php) ele alalım.

Bunu Not Defteri düzenleyicisinde açıyorum ve kodda, öğe kodu görünüm panelindekiyle tamamen aynı başlayan bir satır arıyorum.

Not Defteri düzenleyicisinde çalışmak çok uygundur, çünkü bir bloğun açılış etiketine tıkladığınızda kapanış etiketi de vurgulanır (yukarıdaki resimde gösterilmektedir). Kapanış etiketi bunun içeriğin sonu olduğunu gösterir. Bundan sonra sosyal butonlarımızı, benzer gönderilerimizi ve diğer fonksiyonları ekleyebiliriz.

Güncellemeler için bir abonelik formunun yanı sıra sosyal düğmeleri de ekledim.


Sayfalarda bu şekilde görünüyorlar.


Aynı durum diğer şablon dosyalarına (sayfalar, kategoriler, arşivler...) ekleme için de geçerlidir.

Pratik yapmadan, bu metin ve resim ekleme yönteminde ustalaşmanız pek mümkün değildir. Bu nedenle alın ve deneyin. Her şeyin yoluna gireceğine eminim. Ayrıca makalenin başındaki video da faydalıdır.

İstenilen dosyanın daha sonra eklenmesi için şablon dosyasındaki konumun belirlenmesi hakkında, bunu anladık.

Son an kaldı, bu noktada kutsanmaya değer.

Şablonun function.php dosyasında müdahale gerektiren pek çok ayar var. Ancak içine nasıl kod ekleyeceğinizi de anlamanız gerekir.

Kural olarak, tüm bloglarda ekleme işleminin dosyanın en sonuna, kapanış etiketinden önce yapılması gerektiğini yazıyorlar?>.

Peki ya bu etiket dosyada yoksa? Mesela bende yok. Böyle bir durumda ne yapmalı? Kapanış etiketinin olmaması dosyanın hatalı olduğu anlamına gelmez. Blog çalışıyor. Yani her şey yolunda.

Bu durumda, tam tersini yapmayı öneriyorum - bunu dosyanın en başında, açılış etiketinden önce koda ekleyin. Aşağıdaki resme bakın.


Açılış etiketi kırmızıyla, eklenen kod ise maviyle vurgulanır.

Bu bir seçenektir. Kodu dosyanın sonuna, ancak son koddan önce de ekleyebilirsiniz. Bu durumda, kesmemek için son kodun nerede başladığını en azından biraz anlamanız gerekir.

Bu kadar. Birdenbire funsctions.php dosyasında eksik kapanış etiketiyle aynı durumu yaşarsanız ne yapmanız gerektiğini bileceksiniz.

Bir şablonda tasarım stillerini tanımlama

Ayrıca sayfa öğelerinin tasarım stillerini görüntüleyebilir, değiştirebilir ve kendimizinkini ekleyebiliriz. Aynı eleman denetçisi bu konuda yardımcı olur.

İstenilen elemanı bulup üzerine tıkladığımızda, kod inceleme panelinin sağ alanında seçilen blok (eleman) için tasarım stilleri görüntülenir. Yukarıda tartışılan makalenin aynı bloğunun stillerini göstereceğim.


Bu stilleri gerçek zamanlı olarak düzenlemek ve şu veya bu öğenin nasıl bir görünüme sahip olacağını görmek istiyorsak, bunları doğrudan bu panelden değiştirebiliriz. İstediğiniz stillerin değerlerine tıklayın ve değiştirin.

Ancak değişiklikler yalnızca 1. sayfa yenilenene kadar geçerli olacaktır. Bu stilleri uygulamak için bunları şablonun stiller dosyasına eklemelisiniz. Yukarıdaki görsellerden birinde, bu stillerin yazıldığı dosyanın adını ve tam olarak başladıkları satırı gösteren alanı mavi bir çerçeveyle gösterdim.

Bu nedenle, style.css stil dosyasını açın ve benim durumumda 890 satırını arayın.

Burada bunları düzenleyebilirsiniz. Dosyayı kaydedin ve hostinginize yükleyin.

Lütfen bilgisayarımdaki tüm dosyaları düzenlediğimi unutmayın. Bu durumda, herhangi bir sorun çıkması durumunda değişiklikleri iptal etmeyi mümkün kılan harici programlar kullanıyorum. Aynı şey kodlar ve komut dosyalarıyla yapılan çeşitli deneyler için de geçerlidir - hepsi açık .

Bilgisayarınızdaki herhangi bir dosyada da benzer düzenleme yapmanızı şiddetle tavsiye ederim. Bunu yapmak için öncelikle dosyaları bir ftp istemcisi kullanarak hostinginizden bilgisayarınıza indirmeniz gerekir. Bunun hakkında şunu yazdım. Daha sonra dosyaları, sizin için uygun olan ve onları açabilecek herhangi bir düzenleyiciyle açın. Not Defteri'ni bu amaçlar için kullanıyorum.

Bu makaleyi sonlandırıyor. Bu, bazı kodları veya komut dosyalarını nereye eklemeniz gerektiğini belirlemeye yönelik zorlu bir süreçtir. İlk bakışta bu prosedür karmaşık görünebilir. Ama her şey çok basit. Birkaç kez deneyeceksin ve artık bu tür sorular sormayacaksın.

Elbette blogunuza özel eklentiler kullanarak kodlar ve scriptler ekleyebilirsiniz, bunu ilerleyen yazılarda mutlaka ele alacağım. Ancak bunların kullanımını önlemek için aynı işlemleri onlarsız da yapabilirsiniz, ben de bunu öneriyorum. Bunu yaparak sitedeki gereksiz yükten kurtulacak, böylece siteyi hızlandıracak ve ziyaretçilerinizin kullanımını daha kolay hale getireceksiniz.

Tüm arkadaşlar. Burada bitireceğim. Sorularınızı yoruma bekliyorum. Anlayacağız. Yeni materyallerde görüşmek üzere.

Saygılarımla Konstantin Khmelev.

Öğe Bir tarayıcı penceresinde görüntülenen bir web sayfasının içeriğini (içerik) depolamak için tasarlanmıştır. Belgede görüntülenmesi gereken bilgiler BODY kabının içinde bulunmalıdır. Bu bilgiler metin, resimler, etiketler, JavaScript vb. içerir.

Etiket ayrıca bir web sayfasındaki bağlantıların ve metnin renklerini belirlemek için de kullanılır. Bu uygulama HTML 4'te kullanımdan kaldırılmıştır ve bunun yerine bir renk şeması belirlemek için stillerin kullanılması ve bunların BODY seçiciye uygulanması önerilir. Ancak çoğu seçenek hâlâ tarayıcılarda desteklenmektedir.

Sıklıkla etiketleyin belgenin geçerli pencereye veya çerçeveye yüklenmesi tamamlandıktan sonra çalışan onLoad gibi bir olay işleyicisini yerleştirmek için kullanılır.

Etiketleri açma ve kapatma bir web sayfasında gerekli değildir, ancak bunları bir HTML belgesinin başlangıcını ve sonunu tanımlamak için kullanmak iyi bir stil olarak kabul edilir.

Sözdizimi


...

Seçenekler

alink Etkin bağlantının rengini ayarlar. arka plan Web sayfasındaki arka plan resmini ayarlar. bgcolor Web sayfasının arka plan rengi. bgproperties Arka planın metinle birlikte kaydırılıp kaydırılmayacağını belirler. Bottommargin Tarayıcı penceresinin alt kenarından içeriğe kadar olan kenar boşluğu. sol kenar boşluğu Tarayıcı penceresinin kenarından içeriğe kadar olan yatay kenar boşluğu. bağlantı Bir web sayfasındaki bağlantıların rengi. kaydırma Kaydırma çubuklarının görüntülenip görüntülenmeyeceğini ayarlar. metin Belgedeki metnin rengi. topmargin Tarayıcı penceresinin üst kenarından içeriğe kadar olan kenar boşluğu. vlink Ziyaret edilen bağlantıların rengi.

Kapanış etiketi

Açılış ve kapanış etiketleri isteğe bağlıdır.

Örnek 1: Etiket kullanma




Etiket GÖVDE


Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam Erat volutpat.


Enim ve minimum düzeyde olmak üzere, her türlü sonuçtan elde edilebilecek en iyi egzersizi yapmaktır.



Yük etiketi parametresini kullanırken JavaScript'te yazılmış bir komut dosyası yürütülür, bu durumda belgenin yüklendiğine dair bir mesaj görüntüler.

Etiket parametrelerinin açıklaması

ALINK parametresi

Tanım

Sözdizimi

...

Argümanlar

Renk değeri iki şekilde ayarlanabilir.

1. Adıyla

Tarayıcılar bazı renkleri adlarına göre destekler.

2. Onaltılı değere göre

Renkleri belirtmek için onaltılık sayılar kullanılır. Onaltılık sistem, ondalık sistemden farklı olarak adından da anlaşılacağı gibi 16 sayısını temel alır. Sayılar şu şekilde olacaktır: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. 10'dan 15'e kadar olan sayıların yerini Latin harfleri alır. Onaltılık sistemde 15'ten büyük sayılar iki sayının birleştirilmesiyle oluşur. Örneğin ondalık sistemde 255 sayısı, onaltılık sistemde FF sayısına karşılık gelir. Sayı sistemini belirlerken karışıklığı önlemek için, onaltılık sayının önüne # karma sembolü yerleştirilir, örneğin #666999. Üç rengin her biri (kırmızı, yeşil ve mavi) 00'dan FF'ye kadar değerler alabilir. Böylece, renk sembolü üç bileşene bölünmüştür #rrggbb; burada ilk iki sembol rengin kırmızı bileşenini, ortadaki iki - yeşil ve son iki - mavi bileşenini gösterir.

Varsayılan değer

CSS'ye benzer

GÖVDE:aktif (renk: renkli)




BODY etiketi, alink parametresi



...

ARKA PLAN parametresi

Tanım

Duvar kağıdı olarak kullanılacak görüntüyü belirtir. Normal görsellerden farklı olarak arka planın genişlik veya yükseklik ayarı yoktur ve her zaman %100 tam boyutta görüntülenir. Resmin boyutu tarayıcı penceresinden daha küçükse, resim bir mozaik gibi sıralanarak yatay olarak sağa ve aşağıya doğru tekrarlanır. Bu nedenle arka plan görsellerinin birleşim yerlerinde site ziyaretçilerinin fark edebileceği gözle görülür farklılıklar meydana gelebilir. Bir arka plan resmi seçerken, bununla web sayfasındaki metin arasında yeterli kontrast olduğundan emin olun. Animasyonlu GIF'ler arka plan olarak kullanılabilir ancak okuyucunun dikkatini dağıtır.

Sözdizimi

...

Argümanlar

Geçerli herhangi bir resim adresi - göreceli veya mutlak bir yol kullanabilirsiniz.

Varsayılan değer

CSS'ye benzer

BODY (arka plan: url("dosya yolu"))

Örnek 3: Duvar kağıdını ayarlama




BODY etiketi, arka plan parametresi


arka plan = "/images/bgred.gif">
...

BGCOLOR parametresi

Tanım

Web sayfasının arka plan rengini ayarlar. Bu parametreyi arka plan görüntüsüne yakın bir arka plan rengi seçerek arka planla birlikte kullanabilirsiniz.

Sözdizimi

...

Argümanlar

ALINK parametresine bakın.

Varsayılan değer

Tarayıcıya ve sürümüne bağlıdır ancak arka plan rengi genellikle beyazdır.

CSS'ye benzer

GÖVDE (arka plan: renkli)

Örnek 4: Bir web sayfasındaki arka plan rengi




BODY etiketi, bgcolor parametresi



...

BGPROPERTIES parametresi

HTML: 3.2 4 XHTML'de: 1.0 1.1

Tanım

Varsayılan olarak arka plan resmi web sayfasının içeriğiyle birlikte kayar. Bgproperties parametresini kullanarak arka planı tek bir yerde sabitleyebilir ve böylece yalnızca içeriğin kaydırılmasını sağlayabilirsiniz. Bir web sayfasının bu kalitesi web siteleri için nadiren kullanılır, bu nedenle kullanıcılara tuhaf ve sıra dışı görünebilir.

Sözdizimi

...

Argümanlar

Arka planı düzelten tek bir sabit değer vardır. Arka planın düzeltilmemesini istiyorsanız etiketten bgproperties parametresini kaldırın. veya boş bir değere ayarlayın - "".

Varsayılan değer

CSS'ye benzer

BODY (arka plan eklentisi: sabit | kaydırma)

Örnek 5. Arka planı düzeltme




BODY etiketi, bgproperties parametresi


arka plan = "images/bbking.jpg" bgproperties = "sabit">
...

Not

  • Tüm tarayıcılar bu parametreyi desteklemez; örneğin Netscape (Firefox) bunu tamamen yok sayar.
  • Stiller aracılığıyla bir web sayfasında arka plan resmi ayarlarken bgproperies parametresinin çalışmayı durdurduğu fark edildi.

LEFTMARGIN parametresi

HTML: 3.2 4 XHTML'de: 1.0 1.1

Tanım

Tarayıcı penceresinin sol ve sağ kenarlarından web sayfası içeriğine kadar olan boşluk miktarını tanımlar.

Sözdizimi

...

Argümanlar

Uzaklığı piksel cinsinden belirten pozitif bir tam sayı.

Varsayılan değer

Windows için 10 piksel ve Macintosh için 8 piksel.

CSS'ye benzer

GÖVDE (kenar boşluğu: sayı)

Örnek 6: Sol kenar boşluğu




BODY etiketi, leftmargin parametresi



...

Not

  • Netscape tarayıcısı leftmargin parametresini anlamaz; kenar boşluklarını ayarlamak için marj genişliği (yatay kenar boşlukları) ve kenar yüksekliği (dikey kenar boşlukları) parametrelerini kullanır.
  • Sağ, alt ve üst kenarlardan kenar boşluklarını ayarlamak için sırasıyla rightmargin, Bottommargin ve topmargin parametrelerini kullanın.

BAĞLANTI parametresi

Tanım

Ziyaret edilmeyen bağlantıların rengini ayarlar.

Sözdizimi

...

Argümanlar

ALINK parametresine bakın.

Varsayılan değer

CSS'ye benzer

GÖVDE:bağlantı (renk:renk)

Örnek 7. Bağlantı rengi




BODY etiketi, bağlantı parametresi



...

KAYDIRMA parametresi

HTML: 3.2 4 XHTML'de: 1.0 1.1

Tanım

Kaydırma parametresi, bir web sayfasının içeriği geçerli pencerenin boyutunu aştığında tarayıcı penceresinde kaydırma çubuklarının varlığını kontrol eder. Bu ayar yalnızca Internet Explorer'da çalışır.

Sözdizimi

...

Argümanlar

evet—Kaydırma çubuklarını görüntüler.
no—Pencerede kaydırma çubuklarının görüntülenmesini devre dışı bırakır.

Varsayılan değer

CSS'ye benzer

BODY (taşma: gizli)




BODY etiketi, kaydırma parametresi



...

METİN parametresi

Tanım

Bir web sayfasında kullanılan metnin varsayılan rengini ayarlar. Tek tek öğelerin renkleri stiller kullanılarak kolayca değiştirilebilir.

Sözdizimi

...

Argümanlar

ALINK parametresine bakın.

Varsayılan değer

CSS'ye benzer

GÖVDE (renk: renk)

Örnek 9: Bir web sayfasındaki metin rengi




BODY etiketi, metin parametresi



...

VLINK parametresi

Tanım

Ziyaret edilen bağlantıların, yani kullanıcının zaten "tıkladığı" bağlantıların rengini tanımlar.

Sözdizimi

...

Argümanlar

ALINK parametresine bakın.

Varsayılan değer

#551a8b (Gezgin 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).

  • META, tarayıcılara ve arama motorlarına yönelik bilgileri depolamak için kullanılan meta etiketleri tanımlar.
  • STYLE, web sayfası öğelerinin stillerini tanımlamak için kullanılır.
  • LINK, stil sayfası veya yazı tipi dosyası gibi harici bir belgeye bağlantı kurar.