CSS kodunda hata nasıl bulunur. CSS Doğrulama Hizmetini kullanarak CSS'nin geçerliliğini kontrol etme. Düğmeleri etkileşimli hale getirme
Bir web kodunun geçerliliğini kontrol etmek, W3C standartlarına ve sertifikalarına göre kontrol edilmesidir.
W3C (World Wide Web Consortium), kodlama için standartlar ve yönergeler geliştiren Web'in teknik yasa koyuculardır. W3C sertifikaları ve standartları, web üzerinde çalışan herkes için zorunludur. Tüm Web uygulamalarının tek bir dil alanında, standart dillerde iletişim kurması ve Web belgeleriyle çalışırken birbirini anlaması için kod yazımındaki tek tip standartlara ihtiyaç vardır.
W3C yalnızca Ağ Standartları oluşturmakla kalmaz, aynı zamanda bunların uygulanmasını aktif olarak teşvik eder.
W3C, geçerlilik için HTML / XHTML ve CSS kodunu kontrol etmek için çevrimiçi hizmetlere sahiptir.
W3C doğrulayıcılarını kullanarak kodunuzu W3C standartlarına göre kontrol etmek, en iyi çıkış yoludur.
Kodun geçerliliğini kontrol etmek için W3C'den ücretsiz çevrimiçi hizmetler.
W3C doğrulayıcıları sezgisel bir arayüze sahiptir. Onlarla çalışmak çok kolay ve basit.
Hizmetler, üç modda kontrol etmeyi ve buna göre yalnızca üç düğmeye sahip olmayı mümkün kılar:
URL'yi kontrol edin
(doğrulama için, sitenin Web'de bulunan herhangi bir sayfasının adresini belirtmeniz gerekir)
Yüklenen dosyayı kontrol edin
(doğrulama için taranan dosyanın yolunu belirtmeniz gerekir)
Yazılan metni kontrol edin
(doğrulama için doğrulanan kodu kopyalayıp doğrulayıcı penceresine yapıştırmanız gerekir)
Son iki yöntem özellikle yerel bilgisayarlarda bulunan web belgelerini veya metinleri kontrol ederken kullanışlıdır. Bunlar, ya Web'den yerel bilgisayara zaten indirilmiş ya da "Denver" gibi yerel sunucularda bulunan motorlar tarafından oluşturulmuş web sayfaları olabilir. Denver durumunda, sayfayı tarayıcı üzerinden .html uzantılı bir dosya olarak kaydetmeniz ve ardından ayrı bir dosya olarak kontrol etmeniz veya web sayfasının kaynak kodunu doğrudan tarayıcıdan kopyalamanız ve yazılan metin olarak kontrol etmeniz gerekir.
W3C çevrimiçi doğrulayıcıları nasıl kullanılır?
doğrulayıcıya şu adresten dönüyoruz:
(http://validator.w3.org/ - HTML veya XHTML doğrulaması için
http://jigsaw.w3.org/css-validator/ - CSS doğrulaması için)
açılan doğrulayıcı penceresinde üç doğrulama yönteminden birini seçin
(site sayfası url'si, yerel dosya veya yazılan metin)
ilgili sekmeye git
doğrulama nesnesini belirtin
(kontrol edilen web sayfasının url'sini girin,
veya yerel bilgisayardaki dosyanın yolu,
veya test edilen kodu sırasıyla ekleyin)
"Kontrol Et" düğmesine basın ve kontrolün sonucuna bakın
W3C'den gelen hizmetler kodun geçerliliğini kontrol eder ve varsa hemen hataları gösterir. Her bir hata yorumlanacaktır. Yorumlar maalesef İngilizce. Dolayısıyla, Google Çeviri size yardımcı olmak için orada, tek yapmanız gereken kodu düzeltmek ve gerekirse uygunluk için tekrar kontrol etmektir.
W3C doğrulayıcıları tamamen ücretsiz ve otomatiktir. Bu nedenle, hatalar üzerinde uzun süre ve cezasız bir şekilde onları çalışmalarınızla çekiçleyebilirsiniz. Bunun için bu hizmetler oluşturulur.
W3C doğrulayıcılarına normal bir alternatif.
W3C'nin çevrimiçi web kodu doğrulama sunucularına ek olarak, Mozilla Firefox tarayıcısı için HTML Doğrulayıcı uzantısı çok iyi sonuçlar verir. Tarayıcıda böyle bir eklentinin varlığı web yöneticisinin işini kolaylaştırır ve Mozilla Firefox'un "dümen" tarayıcısı olduğunu bir kez daha kanıtlar.
Silgi uzantısını buradan indirebilirsiniz: http://users.skynet.be/mgueury/mozilla/
Uzantıyı şu şekilde yükleyebilirsiniz:
- Firefox'u başlatın.
Sonraki: Menü - Araçlar - Eklentiler - Uzantılar.
Ve indirilen dosyayı (xpi uzantısı) fareyle açılan pencereye sürükleyin.
Bundan sonra uzantı otomatik olarak yüklenecektir.
veya (ikinci yol):
- Firefox'u başlatın.
Sonraki: Menü - Dosya - Dosya Aç - indirilen dosyanın yolunu belirtin.
Bundan sonra, uzantı yine otomatik olarak yüklenecektir.
Kurulum tamamlandıktan sonra, tarayıcıyı yeniden başlatmanız gerekecektir.
Yeniden başlatıldığında, web sayfalarını tarama yönteminin seçildiği bir pencere görünecektir:
"HTML Düzenli" veya "SGML Ayrıştırıcı" veya "Seri"
En uygun ve kabul edilebilir seçenek olarak "SGML Parser" yöntemini seçiyoruz. Karşılık gelen düğmeye tıklayın Şimdi, tarayıcı penceresinde eklenti için bir kısayol simgesi görüntülenecek ve yanında eklenti ayarları menü düğmesi olacaktır.
Bende - yukarıda ve sağda:
Mozilla Firefox tarayıcısı için HTML Doğrulayıcı tamamen otomatik olarak çalışır. Neyi kontrol edeceği gösterilmesine gerek yok. Mozilla Firefox'ta açılacak tüm belgeleri kontrol eder. Çok rahat. Açık belgede sorun olup olmadığını anlamak için program etiketinin rengine bakmak yeterlidir.
Test sonuçlarına bağlı olarak, simgenin rengi yeşil, sarı veya kırmızı olabilir, bu da şu anlama gelir:
yeşil - "hata yok", her şey "Tamam"
sarı - "hata yok, ancak uyarılar"
kırmızı - "hatalar var"
Kısayola tıkladığınızda, görüntülenen sayfanın kaynak kodunu içeren bir pencere açılacak ve varsa hata ve uyarılara ilişkin açıklamalar ve yorumlar yer alacaktır.
Bunun gibi bir şey.
Hoşgeldiniz! Böylece sona geldik. Önümüzde bütün bir yıl verimli çalışma var, birçok ilginç fikir ortaya atıldı ve şimdi geriye kalan tek şey onları hayata geçirmek 🙂 Olayların gidişatını takip edebilir ve düşünce özgürlüğünün eylemde nasıl ifade edildiğini görebilirsiniz - sadece bloga abone olun, sizi temin ederim - fazla zaman almayacaktır ...
Bugün benim görevim, testi geçen doğru kaynak kodun herhangi bir şeyi etkileyip etkilemediğini ve eğer öyleyse, ne kadarını bulmaktır. Ve her zaman olduğu gibi, bu konudaki görüşlerinizi yorumlarda bekliyorum.
Geçtiğimiz yıl yayınlarımda geçerlilik gibi bir terime çok dikkat ettim, hangilerinin olduğunu anlamanın zamanı geldi. geçerli HTML'nin avantajları... Daha önce sizinle birlikte, geçerliliğin nasıl kontrol edileceğini, kanalları ve diğer birkaç ilginç noktayı tartıştık.
Geçerli bir web sitesi lehine dört ana faktör
İlk olarak, doğrulayıcı testini geçen sayfaların kesinlikle tüm modern tarayıcılarda doğru şekilde görüntüleneceğini yüzde yüz kesinlikle söyleyebiliriz - ve bu, bundan daha az önemli değil. Katılıyorum, önünüzde çarpık öğeler bulunan düzeni görmek çok hoş değil. Ve ziyaretçinin böyle bir bloga geri dönme olasılığı düşüktür, yazarın görünüşü ve.
İkincisi, mantıksal olarak düşünseniz bile gereksiz etiketleri ve diğer "çöpleri" kaldırarak sayfa ağırlığını azaltıyoruz ve böylece sayfa yükleme süresini azaltıyoruz ve tarayıcılar bu tür sayfaları işlemek için daha az zaman harcıyor. Bilirsiniz, böyle bir söz vardır: "Daha az kelime, daha fazla eylem", onu başka kelimelerle ifade edip site oluşturmaya uygularsanız, "Daha az etiket - daha fazla kelime" gibi bir şey elde edersiniz.
Ve bunlar boş sözler değil, Yandex ile sorun yaşayan herkes teknik destekten bir yanıt aldı: siteyi iyileştirin ve üzerinde çalışın. Örneğin, Yandex Webmaster araç çubuğunda, site oluşturmaya yönelik önerileri içeren bölüm için yardım bulabilirsiniz.
Bu belgeyi dikkatlice incelerseniz, 3. paragrafta "Düzen" aşağıdakileri belirtir:
Sayfa düzeninizi standartlarda tutmaya çalışın
Üçüncüsü, ısmarlama web sitelerinin yaratılmasıyla uğraşıyorsanız veya bunları tanıtıyorsanız, muhtemelen HTML ve CSS dillerini bilmeniz gerekir ve eğer öyleyse, o zaman neden kasıtlı olarak hatalar yaratıyorsunuz? Ek olarak, müşteriler bazen yüklenici için bir görev belirler: geçerli bir kod kullanmak ve buna göre, yapılan iş için fiyatlar çok daha yüksek olacaktır.
Ve son olarak, dördüncü olarak, psikolojik faktör önemli bir rol oynar. Yapılan işin belirli kriterleri ve standartları, bizim durumumuzda, World Wide Web Konsorsiyumu standartlarını karşıladığını bilmek güzel. Ve bildiğiniz gibi, psikoloji harika bir şey! Bu yüzden onu görmezden gelme.
Eh, böyle bir yazı görmek çok güzel 😉
Herkese merhaba!
HTML kodunun geçerliliğini kontrol etmek için gereklidir, çünkü arama robotları yalnızca HTML kodunu görür. Bu nedenle site kodunu tam sıraya koymanız tavsiye edilir. Bu konuda, kod doğrulaması yapan ve özellikle hataları işaret eden özel çevrimiçi hizmetler bize yardımcı olacaktır.
Bu hizmetlerden biri, muhtemelen en iyisi olan validator.w3.org doğrulayıcıdır. Tamamen İngilizce'dir, bu nedenle bazılarının çalışırken sorunları olabilir, ancak endişelenmeyin: Doğrulayıcı size hem satır numarasını hem de hatanın kendisini gösterecektir.
Geçerli bir kod, tüm standartları karşılayan bir koddur.
Ders için aşağıdaki malzemeye ihtiyacınız olacak:
Yukarıda belirtilen çevrimiçi hizmet, sitenin tamamındaki HTML kodunu çevrimiçi olarak kontrol eder. Sitenizin etki alanını belirtmeniz ve "Kontrol Et" düğmesini tıklamanız yeterlidir, böylece sitenin HTML kodunu kontrol etmeye başlarsınız.
Ayrıca, doğrulayıcı çok ilginç bir özellik sunar - yerel bilgisayardan site dosyalarını kontrol etme. Bence bu araç, web sitelerini sipariş verenler için kullanışlıdır. Siparişi vermeden önce, her şeyi iki kez kontrol etmeniz gerekir, çünkü işinizden her zaman memnun olmak istersiniz. Dosyaları "Dosya Yükleyerek Doğrula" sekmesine giderek kontrol edebilirsiniz: 
HTML kodundaki hataları nasıl düzeltirim?
Doğrulayıcı W3c hizmeti bana iki hataya işaret etti ve 8 uyarı verdi. Onları düzeltmeye çalışacağım ve size tek parça halinde nasıl yapıldığını göstereceğim. 
Bu bağlamda "div öğesinin alt öğesi olarak öğe stiline izin verilmiyor" hatasını düzelttik. (Bu alt ağaçtan başka hatalar bastırılıyor.) ”. Bu hata bana HTML kodunda, yani etiketin
Doğrulayıcı ayrıca hatanın nerede olduğunu da belirtir: 
Bu şekilde, HTML kodu hatalarını bulabilir ve düzeltebilirsiniz. Ancak siteler yalnızca biçimlendirme kodundan değil aynı zamanda CSS'den de oluşur, bu nedenle web kaynağının basamaklı stil sayfalarını da kontrol ederiz.
CSS kodunu geçerlilik için kontrol etme
W3c doğrulayıcı ayrıca CSS kodunun geçerliliğini kontrol edebilir. Bunu bu bağlantıdan yapabilirsiniz. Çalışma prensibi aynıdır: Sitenin URL'sini belirtin veya bilgisayarınızda bir dosya seçin ve "Kontrol Et" düğmesini tıklayın.
Aynı HTML doğrulayıcısının aksine, CSS doğrulayıcısı Rusça'dır.
CSS hataları ve uyarıları
CSS kodunu geçerlilik açısından kontrol ederken, hizmet çok sayıda hata ve uyarı verir. 23 hata ve 281 uyarı aldım. İlk bakışta, bu çok görünebilir ve hatta korkutucu olabilir, ancak belirtilen hataların ve uyarıların çoğu yalnızca hizmetin farklı tarayıcılar için geçerli olan belirli özellikleri bilmemesi nedeniyle gösterilir.
Benim durumumda, 281 uyarılarının çoğu, farklı tarayıcılarda normal şekilde görüntülenecek CSS özellikleridir:
Hizmet, "bilinmeyen satıcı uzantısı" gibi etiketleri konumlandırır. Bu nedenle, CSS dosyalarınızı kontrol ederken çok sayıda bu tür hatalar görürseniz, alarma geçmeyin. Sorun değil.
En yaygın hataları ve bunların nasıl düzeltileceğini listelemeyeceğim çünkü herkesin çözümleri farklı olabilir ve neyin yanlış olduğunu anlamak için HTML kodunun kendisine bakmanız gerekir.
Bazı hataları ortadan kaldıramazsanız o zaman derste yapılan yorumlardaki problemi paylaşın, belki birlikte bir çözüm buluruz.
Umarım bu hafta çıkan dersler sizin için yararlı olmuş ve bazı sorunların çözülmesine yardımcı olmuştur.
Pekala, şimdi hoşçakal!
önceki makaleSonraki makale
2016-12-29
Düğmeleri canlandırıyoruz ve siteyi HTML ve CSS kodunun geçerliliğini kontrol ediyoruz
Merhaba sevgili ziyaretçi!
Bugün, oluşturulmuş bir web sayfası örneğini kullanarak, bir sitenin geçerliliğini, yani HTML ve CSS dillerinin yerleşik spesifikasyonlarına uygunluğunu nasıl kontrol edebileceğinizi ele alacağız.
Ek olarak, kontrol etmeden önce, statik düğmeleri etkileşimli hale getireceğimiz, pasif, aktif ve basılı durumlarına bağlı olarak görünümlerini değiştireceğimiz kenar çubuğu düğmelerini "canlandırmak" ile ilgili kısımda CSS stil sayfasının bazı revizyonlarını yapacağız.
- Düğmeleri hacimsel yapmak
- Düğmeleri etkileşimli hale getirme
- Doğrulamaya ihtiyacınız var mı
- HTML kodu nasıl doğrulanır
- CSS kodu nasıl doğrulanır
- Site kaynak dosyaları
Düğmeleri hacimsel yapmak
Önceki makalede, ana içerik alanını ana sayfanın düzenine uyacak şekilde biçimlendirdik. Aynı zamanda, şu anda kenar çubuğunda sabit ve yuvarlatılmış köşeleri olan normal bir düz kahverengi dikdörtgen gibi görünen düğmeler var.
Aşağıda, bu tür düğmelere sahip bir kenar çubuğunun bir parçası bulunmaktadır.
Düğmeleri "canlandırmak" için önce CSS stilleri yardımıyla onlara biraz hacim veriyoruz. Ve bunu daha önce döndürücü, arama ve abonelik bloklarının tasarımında kullanılan doğrusal gradyan özelliğini kullanarak yapacağız.
Doğrusal gradyan değerleri aşağıdaki gibi tanımlanır:
1. Renk gölgeleri, düğmenin ana rengine göre daha koyu bir renkle başlayarak aşağıdan yukarıya doğru ayarlanacaktır. Degradenin başlangıcında hangi rengin kullanılacağını belirlemek için, bu durumda Photoshop olan bir grafik düzenleyicinin aracını kullanırız.
Bunu yapmak için, açık bir tasarım yerleşim belgesiyle "Renk Seçici" yi seçin, imleci düğmenin gerekli alanı üzerine getirin, ana rengi tanımlayın ve ardından aynı kahverengi gölgenin daha koyu rengini seçmek için "Renk Seçici" araçlarını kullanın. Bizim durumumuzda "653939" değerinde bir renk alalım. Bunun nasıl yapılabileceği aşağıdaki ekran görüntüsünde açıkça gösterilmektedir.
2. Ardından, degradenin başlangıçtaki koyu rengin ana renge geçeceği durma konumunu tanımlayın. Durma pozisyonumuzu yaklaşık olarak ortaya koyacağız. Aynı zamanda daha doygun bir renk elde etmek için durma konumunu biraz yukarı hareket ettirip değerini, diyelim ki yüksekliğin% 70'ini tanımlayacağız.
3. Degradeye özellikler atamak için yapılacak son şey, üstteki düğmeleri renklendirecek temel renkten daha açık bir renk tanımlamaktır. Bu, degradenin başlangıç \u200b\u200brengini tanımlarken olduğu gibi yapılır. Bu durumda bu rengin değerini "b88686" olarak alacağız.
3. Alınan verilere bağlı olarak, düğmelerin önceden oluşturulmuş CSS özelliklerine doğrusal bir gradyan ekleyin.
giriş: {
yükseklik : 30px;
kenar boşluğu : 10px;
border-radius : 5px;
arka fon : # a76d6d;
metin hizalama : merkez;
yazı tipi ağırlığı : kalın;
renk : #fff;
yüzen : sağ;
arka plan görüntüsü
Ekstrem renkler belirlenirken,% 0 ve% 100 değerlerinde bu gerekli olmadığından burada durma konumlarının belirtilmediği not edilebilir.
Şimdi tarayıcıyı yenileyelim ve sonucu görelim.
Gördüğünüz gibi, düğmeler hafif bir çıkıntı elde etti. Şimdi onları "canlandırmaya" başlayabilirsiniz.
Düğmeleri etkileşimli hale getirme
Düğmelerle tam olarak çalışmak için onları etkileşimli hale getireceğiz, bu üç ana durumu görsel olarak yansıtacak; pasif (düğme başlangıç \u200b\u200bdurumundadır), aktif (imleç düğmenin üzerine gelir) ve basılır (imleç üzerine gelindiğinde, fare düğmesine basılı tutulur).
Bunu gölge ve sınır özelliklerinin bir kombinasyonunu kullanarak yapacağız. Bu tekniğin özü, farklı yönlerden gölge ve bordürlerin rengini değiştirerek, düğmelerin durumundaki değişikliği taklit edebilmenizdir.
Öncelikle bunu pasif durum için yapalım ve onu düğmelerin yüzeyin üzerine çıkması için tasvir etmeye çalışalım.
Kenarlıkların ve gölgelerin renklerini önceki durumlarda olduğu gibi seçeceğiz.
Uygun eklemelerden sonra CSS kodu formu alacaktır.
giriş: {
yükseklik : 30px;
kenar boşluğu : 10px;
border-radius : 5px;
arka fon : # a76d6d;
metin hizalama : merkez;
yazı tipi ağırlığı : kalın;
renk : #fff;
yüzen : sağ;
arka plan görüntüsü : doğrusal gradyan (yukarıya, # 653939, # a76d6d% 50, # b88686);
kutu gölgesi : 2px 2px 4px 0px # 422a2a;
border-width : 2px;
border-style : katı;
sınır rengi : #ddbebe # 241616 # 241616 #ddbebe;
Burada sınırların kalınlığı belirleyen özelliklerin bir kombinasyonu ile temsil edildiği not edilebilir (değer ile border-width) 2px ), dört tarafın her birinde düz bir kenarlık ve renkler (kenarlık rengi) belirten bir değere sahip bir stil (kenarlık stili).
Tarayıcıyı güncelleyelim ve düğmelerin şimdi nasıl görüneceğini görelim.
Gördüğünüz gibi, bu durumdaki düğmeler kalkmış görünüyor.
Şimdi düğmeleri basılı bir durum gibi göstermeye çalışalım. Bunu yapmak için gölgeyi kaldırıp sınırların rengini değiştireceğiz. Bu durumda, özel bir sözde sınıf seçici kullanacağız: aktif duruma karşılık gelen hover.
Düğmelerin aktif durumu için CSS kodu şöyle görünecektir.
giriş: fareyle üzerine gelme {
kutu gölgesi : Yok;
sınır rengi : # a76d6d # a76d6d # a76d6d # a76d6d;
Bu durumda yine sınırların rengini değiştirip bir gölge ekleyeceğiz, ancak bu durumda iç ve yer değiştirmesiz olacak. Sözde sınıf seçici de şu şekilde değişecektir: basılı duruma karşılık gelen aktif.
Basılmış durum için CSS kodu aşağıdaki gibi olacaktır.
giriş: aktif {
kutu gölgesi : 0px 0px 7px 2px # 422a2a iç metin;
sınır rengi : # 777 #fff #fff # 777;
"Ara" düğmesi, duruma bağlı olarak görünümünü nasıl değiştirdiğini açıkça görebileceğiniz karşılaştırma için aşağıda gösterilmiştir.
Şekil 8 Pasif durum
Burası ana sayfanın düzenini tamamladığımız ve onu tasarım düzeniyle eşleşen bir forma getirdiğimiz yerdir. Ve şimdi, her aşamada daha önce olduğu gibi, farklı tarayıcılarda çapraz uyumluluk açısından kontrol etmeliyiz. Ancak bundan önce, doğrulama için sayfayı kontrol edelim, çünkü kodun durumu bir dereceye kadar çapraz tutarlılığı etkileyebilir. Bu nedenle şimdi çok gerekli olan bu işlemi gerçekleştireceğiz.
Doğrulamaya ihtiyacınız var mı
Doğrulama, kodun yerleşik standartlara göre doğrulanmasıdır. HTML ve CSS kodunun doğruluğu için doğrulama arasında ayrım yapın. Bir durumda HTML kodunun, diğerinde CSS kodunun kontrol edildiği açıktır.
Muhtemelen, birçoğu onaylamanın gerekli olup olmadığını sormayı garip bulacaktır. Ancak internete bakarsanız, geçerli kodun gereksiz olduğuna, bunun bir zaman kaybı olduğuna inanan birçok insan olduğunu görebilirsiniz, çünkü tarayıcılar her türlü hatanın varlığında bile iyi çalışır.
Elbette çoğu durumda siteler geçersiz kod üzerinde iyi çalışabilir, ancak bu gibi durumlarda çapraz tutarlılık garanti edilemez. Sonuçta, programlama dillerinin kendileri için standartlar vardır, ancak tarayıcıların hataları aynı şekilde düzelttikleri gerçeği için, böyle bir standart elbette yoktur ve olamaz. Ve bu nedenle, farklı tarayıcılar hataları farklı şekillerde ele alabilir ve bu da sayfaların farklı görüntülenmesine neden olabilir.
Ve genel olarak, "tam da bunu yapacak" ilkesine göre, bazı insanların işlerine karşı neden bu kadar mecazi bir tavır sergiledikleri açık değildir. Bu nedenle, birisi kodu geçerlilik için kontrol etmesi gerekmediğini düşünürse, o zaman bu onun hakkıdır ve bunun tersine neredeyse ikna edilemez ve buna gerek yoktur.
Şimdi doğrudan kodların geçerliliğini kontrol etmeye geçelim, önce HTML, sonra CSS.
HTML kodu nasıl doğrulanır
Aslında, şimdi görülebileceği gibi, kod doğrulama kontrolünün kendisi oldukça basittir. Ancak, hataların giderilmesi genellikle belirli bir süre alır. Elbette, kod birkaç satırdan oluşuyorsa, burada zorluklar ortaya çıkabilir. Ancak, yüzlerce ve binlerce varsa, o zaman çok çalışmanız gerekebilir, hepsi kodun ne kadar iyi derlendiğine bağlıdır. Bu nedenle, bunu ortak çapraz eşleştirme kontrolü ile daha sık yapmak daha iyidir.
Burada, geçerliliği kontrol etmek için en basit ve en yaygın seçeneği ele alacağız - bu, tarayıcı geliştiricilerinin desteğiyle web sayfalarının kodları için spesifikasyonlar geliştiren "W3C Konsorsiyumu" sitesinin kullanımıdır.
HTML kodunu kontrol etmek için, https://validator.w3.org/ bağlantısını takip etmeniz yeterlidir, burada kontrol edilecek sayfanın adresini girmek için bir alan içeren bir sayfa açılacaktır.
ekran görüntüsü 51
"Kontrol Et" düğmesine bastıktan sonra, çek sonucunu alacağız.
Bu durumda, HTML kodu geçerlidir, ancak lang özniteliğinin değeriyle birlikte kullanılması için bir öneri vardır. "ru" , sayfa Rusça kullandığından.
Lang özelliği, kullanılan dile bağlı olarak tarayıcıların tırnak işaretleri gibi belirli karakterleri doğru şekilde görüntülemesine izin vermek için tasarlanmıştır. Bu nedenle, onu HTML koduna dahil etmemiz gereksiz olmayacaktır. Ve bunu html etiketinde yapacağız, böylece bu nitelik tüm belgeyi etkileyebilir.
Bu eklemenin nasıl yapılacağı aşağıdaki tabloda gösterilmiştir.
"ru" >
. . .
Ve şimdi, ikinci bir kontrol yaparsak, kodun herhangi bir yorum olmadan tamamen geçerli hale geldiğini görebiliriz.
Bu şekilde internette yayınlanan dosyayı kontrol ettik. Ancak sayfa henüz web'de yayınlanmadığında, geçerliliğini başka yollarla kontrol edebilirsiniz; bu, dosyayı göz at düğmesini kullanarak yükleyin veya HTML kodunu doğrudan kopyalamak için formu kullanın.
Ekran görüntüsü, web sayfası kodu doğrulama için doğrudan forma kopyalandığında son seçeneği gösterir.
Kontrolü yaptıktan sonra benzer bir sonuç alıyoruz ve kontrol edilen kod da burada gösterilecek. Hataların bulunması durumunda, aramayı basitleştirmek için vurgulanacaklar, bu da onları ortadan kaldırmak için çalışmayı büyük ölçüde basitleştiriyor.
CSS kodu nasıl doğrulanır
HTML doğrulama kontrolünü ele aldık. CSS kodu tam olarak aynı sırada kontrol edilir. Sadece bu durumda, böyle bir durum için http://jigsaw.w3.org/css-validator/ adresinde bulunan başka bir doğrulayıcı sayfası kullanmanız gerekir.
Açalım ve önceki sefer olduğu gibi kontrol edilecek sayfanın adresini girip "Kontrol et" butonuna basalım.
Bu kontrolün sonucu ekran görüntüsünde gösterilmektedir.
Gördüğünüz gibi, CSS kodumuz herhangi bir hatasız spesifikasyonla tamamen uyumludur ki bu iyi bir sonuçtur.
Bu durum için diğer doğrulama yöntemlerinin sırası, HTML kodu için yapılan benzer kontrollerle tamamen örtüşmektedir. Bu nedenle, burada kendimizi tekrar etmeyeceğiz ve bu, doğrulama kontrollerini değerlendirmeyi bitireceğimiz yer.
Bundan sonra, sayfamızı çapraz eşleme açısından kontrol edeceğiz ve tüm tarayıcılarda aynı görüntülendiğinden emin olacağız, burada sitenin ana sayfasının düzenini tamamlayacağız.
Ve bununla Yeni Yıl tatillerinden hemen sonra ilgileneceğiz.
Ve sonuç olarak, herkese Mutlu Yıllar dileyebilirsiniz! Ve Yeni Yılda İnternette başarılı çalışma imkanı için kendi web sitenizi oluşturmada size sağlık, sevgi, neşe, refah ve elbette büyük başarılar diliyorum!
Site kaynak dosyaları
Bu makalede yapılan güncellemelerin bulunduğu sitenin kaynak dosyaları ekteki sayfadan indirilebilir. ilave malzemeler.