Kişiler

Bir HTML belgesi oluşturuyoruz. Doğru HTML belge yapısı ve sayfa kodu

  • 27.06.2020

Web sayfanızın hangi HTML standardına göre yazıldığını belirtir.


DOKTORAAçıklama
HTML5
Tüm belgeler için.
HTML 4.01
"http://www.w3.org/TR/html4/strict.dtd"> Sıkı HTML sözdizimi.
Geçiş HTML sözdizimi.
Çerçeveler HTML belgesinde kullanılır.
XHTML 1.0
Güçlü XHTML sözdizimi.
Geçiş XHTML sözdizimi.
Belge XHTML ile yazılmıştır ve çerçeveler içermektedir.
XHTML mobil profili, cep telefonları için özel öğeler ekler.
XHTML 1.1
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Bu tanımın türlere ayrılması yoktur, sözdizimi aynıdır ve açık kurallara uyar.

Bu nedenle, birkaç doktip vardır (HTML ve XHTML için katı ve geçişli). Hangi standardın seçileceği sorudur.

HTML ve XHTML standartları

HTML, Web belgeleri için standart biçimlendirme dilidir.

HTML 4.01 ve HTML5'te bir sayfanın görünümü içeriğinden ayrılır. İçerik ve yapı (başlıklar, paragraflar, bağlantılar) HTML'de ayarlanır. Tasarım (hizalama, yazı tipleri, renkler) CSS stilleri tarafından belirlenir.

Örneğin, etiket ve align niteliği kullanımdan kaldırılmıştır.

XHTML, Web belgeleri için genişletilebilir bir XML tabanlı biçimlendirme dilidir. XHTML standardı, HTML 4.01 ve XHTML arasındaki farkların bir listesidir.

XHTML gereksinimleriYasaktırgerek
Tüm etiketler kapatılmalıdır.
Tüm etiketler, nitelikler ve CSS özellikleri küçük harfle yazılmalıdır.
Tüm etiket öznitelik değerleri tırnak içine alınmalıdır.
Hiyerarşi kesinlikle takip edilmelidir: ilk etiket en son kapatılır.... ...
Bir satır içi etiketin içine blok etiketi yerleştirilemez. (Bir blok öğesinden sonra, sayfada daha fazla çıktı yeni bir satırda gerçekleştirilir. Bir satır içi öğe satır besleme yapmaz.)
...
...
Boole nitelikleri genişletilmiş biçimde yazılır.
Resimlerin bir açıklaması olmalıdır

XHTML'nin güzelliği, sözdiziminin katılığı değil, kendi etiketlerinizi oluşturabilme yeteneğidir.

Ancak 2 Temmuz 2009'da World Wide Web Konsorsiyumu (W3C), XHTML kavramının yanlış olduğunu düşünerek XHTML 2.0'ın durdurulduğunu duyurdu. Programcı grubu, HTML5 standardı üzerinde çalışmaya başladı. HTML5 standardı henüz onaylanmamış olsa da, birçok sitede zaten bunun üzerine yazılmıştır.

HTML5'in ne zaman biteceğiyle ilgilenen herkes orijinal kaynaklara göz atabilir:

HTML5 standardının resmi sürümü şu adreste bulunabilir: www.w3.org/TR/html5/

Seçime karar verelim. Yapması kolaydır: HTML dilini genişletmeyi düşünmüyorsanız XHTML standardını kullanmamalısınız.

Üzerinde durmayacağız!DOCTYPE, çerçeve kullanan belgelere yöneliktir: dünden önceki gün.

Bir sonraki soru, hangi sözdizimini seçeceğinizdir - katı mı yoksa geçişli mi?

HTML 4.01 katı ve geçici sözdizimi

Yeni bir standarda geçişi kolaylaştırmak için geçiş sözdizimleri mevcuttur. Katı sözdiziminin hata olarak kabul edeceği birçok şeyi kaçıracaklar.

Neyin ne olduğunu anlamak için bir örnekle daha kolay. İlk olarak, katı sözdizimini ayarlayalım.

katı sözdizimi

Geçerlilik kontrolü

Geçerlilik kontrolü

kırmızı renk.



HTML kodunun beyan edilen standarda uygunluğuna denir. geçerlilik ve bu yazışmanın kontrolü doğrulama.

Düzen hatalarını izlemek için Html Validator eklentisini FireFox'a yükleyin.

Sayfamızı FireFox tarayıcısında açalım, fareyi doğrulayıcı işaretinin üzerine getirin:

Doğrulayıcı işaretine çift tıklamak genişletilmiş bir hata listesi verecektir:


DOCTYPE'ı geçiş sözdizimiyle değiştirelim:

geçiş sözdizimi

Geçerlilik kontrolü

Geçerlilik kontrolü

Vurgulanması gereken metnin bir kısmı kırmızı renk.



FireFox'u başlatın. Hata yok:


Her şey yolunda gibi görünüyor. Belki orada dur?

Tavsiyem: HTML 4.01'in katı sözdizimine uygun olarak veya hemen HTML5'te geçerli bir düzen yapmak. HTML amacına uygun kullanılmalı ve tasarım CSS'de bırakılmalıdır. Ayrıca sitenin geçerli bir düzeni varsa ve herhangi bir tarayıcıda düzgün görüntülenmiyorsa, bu kesinlikle bir tarayıcı sorunudur. Tarayıcının daha yeni sürümleri standarda daha iyi uyum sağlayacak ve geçerli kodun yorumlanmasında hata yapmayacaktır. Karmaşık bir düzen geçersiz bir şekilde uygulanırsa, tarayıcıların yeni sürümlerinin onu parçalara ayırmayacağının garantisi yoktur.

Geçiş sözdiziminin sadakatine kapılmayın, sadece katı standartlara uygunluk!

Neden geçerli bir düzene ihtiyacınız var?

Görünüşe göre, neden rahatsız ediyorsun? Sonuçta, tarayıcılar genellikle düzendeki küçük kusurları otomatik olarak düzeltir ve site kesinlikle iyi çalışır. Ancak bu küçük, pratikte görünmez hatalar yine de arama motorları tarafından fark edilir. Bir etiket bile eksik

- bu, sitenin kalitesini değerlendirmede bir eksidir.

Arama motorlarının HTML kodundaki herhangi bir kusuru fark etme yeteneği nedeniyle, mizanpajın geçerliliğini gözlemlemeniz önerilir. Ek olarak, kodun geçerliliğini kontrol ederek, küçük kusurların yanı sıra daha önce fark edilmeyen ciddi hataları da bulabilirsiniz.



.

Herhangi bir web sayfasını açarsanız, sitenin türüne ve odağına bağlı olarak değişmeyen tipik öğeler içerecektir. Örnek 4.1, temel etiketleri içeren basit bir belgenin kodunu gösterir.

Örnek 4.1. Web sayfasının kaynak kodu

Örnek web sayfası

başlık

İlk paragraf.

İkinci paragraf.



Bu örneğin içeriğini kopyalayın ve c: \ www \ klasörüne example41.html olarak kaydedin. Bundan sonra, tarayıcıyı başlatın ve dosyayı menü öğesinden açın Dosya> Dosyayı Aç (Ctrl + O)... Belge Seç iletişim kutusunda, example41.html dosyasını belirtin. Şekil 4'te gösterilen web sayfası tarayıcınızda açılacaktır. 4.1.

Pirinç. 4.1. Örnek yürütme sonucu

elemangeçerli belgenin türünü belirtmeyi amaçlamaktadır - DTD (belge türü tanımı, belge türü açıklaması). Bu, tarayıcının mevcut web sayfasını nasıl yorumlayacağını anlaması için gereklidir, çünkü HTML'nin çeşitli versiyonları vardır ve ayrıca HTML'ye benzer, ancak sözdiziminde ondan farklı olan XHTML (Genişletilebilir Köprü Metni İşaretleme Dili) vardır. Tarayıcının "kafası karışmaması" ve web sayfasının hangi standarda göre görüntüleneceğini anlaması ve kodun ilk satırında ayarlanması gerekir. .

birkaç türü var, hedefledikleri HTML sürümüne göre farklılık gösterirler. Tablo 4.1. ana belge türlerini açıklamalarıyla birlikte listeler.

Sekme. 4.1. Geçerli DTD'ler
DOKTORA Açıklama
HTML 4.01
Sıkı HTML sözdizimi.
Geçiş HTML sözdizimi.
Çerçeveler HTML belgesinde kullanılır.
HTML5
Bu HTML sürümünde yalnızca bir doktip vardır.
XHTML 1.0
Güçlü XHTML sözdizimi.
Geçiş XHTML sözdizimi.
Belge XHTML ile yazılmıştır ve çerçeveler içermektedir.
XHTML 1.1
XHTML 1.1'in geliştiricileri, yavaş yavaş HTML'nin yerini alacağını tahmin ediyor. Gördüğünüz gibi, sözdizimi aynı olduğundan ve açık kurallara uyduğundan, bu tanımın türlere bölünmesi yoktur.

Kesin ve geçici belge açıklamaları arasındaki fark, belge kodu yazmaya yönelik farklı yaklaşımdır. Katı HTML, HTML spesifikasyonuna sıkı sıkıya bağlı kalmayı gerektirir ve affetmez. Geçiş HTML'si, koddaki bazı kusurlar konusunda daha "rahattır", bu nedenle bazı durumlarda bu tür tercih edilir.

Örneğin, katı HTML ve XHTML'de etiket geçiş HTML'sinde atlanabilir veya çıkarılabilir. Aynı zamanda, sözdizimiyle eşleşip eşleşmediğine bakılmaksızın tarayıcının her durumda belgeyi görüntüleyeceğini unutmayın. Bu doğrulama, bir doğrulayıcı kullanılarak gerçekleştirilir ve öncelikle geliştiricilerin belgedeki hataları izlemesi amaçlanır.</p> <p>Aşağıda, esas olarak katı kuralları kullanacağız.<!DOCTYPE>, Aksi belirtilmediği sürece. Bu, yaygın hatalardan kaçınmamıza ve bize sözdizimsel olarak doğru kod yazmayı öğretmemize izin verecektir.</p> <p>HTML kodunu hiç kullanmadan bulmak çoğu zaman mümkündür.<!DOCTYPE>, web sayfası böyle bir durumda gösterilmeye devam edecektir. Ancak, kullanırken aynı belge tarayıcıda farklı görüntülenebilir.<!DOCTYPE>ve onsuz. Ek olarak, tarayıcılar bu tür belgeleri kendi yollarıyla görüntüleyebilir; sonuç olarak sayfa "parçalanır", yani. geliştiricinin olmasını istediğinden tamamen farklı bir şekilde görüntülenecektir. Bu gibi durumlardan kaçınmak için her zaman ekleyin<!DOCTYPE>belgenin başına.</p><p>Etiket <html>HTML dosyasının başlangıcını tanımlar, içinde başlık ( <head>) ve belge gövdesi ( <body> ).</p><p>Blok olarak da adlandırılan belge başlığı <head>, metin ve etiketler içerebilir, ancak bu bölümün içeriği kapsayıcı dışında doğrudan sayfada gösterilmez. <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Etiket <meta>evrenseldir ve özellikle meta etiketleri kullanarak, bu etiket genel olarak adlandırıldığından, sayfa kodlamasını değiştirebilir, anahtar kelimeler, belge açıklaması ve çok daha fazlasını ekleyebilirsiniz. Tarayıcının UTF-8 kodlaması (Unicode dönüştürme formatı) ile uğraştığını anlaması için bu dize eklenir.</p><p> <title>Örnek web sayfası

Etiket Web sayfasının başlığını tanımlar, bu birçok sorunu çözmek için tasarlanmış önemli unsurlardan biridir. Windows işletim sisteminde, başlık metni tarayıcı penceresinin sol üst köşesinde görüntülenir (Şekil 4.2).</p> <p><img src='https://i0.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Pirinç. 4.2. Tarayıcı başlığı görünümü</p> <p>Etiket <title>gereklidir ve belge kodunda bulunmalıdır.</p><p>Bir kapanış etiketi eklediğinizden emin olun</head> belgenin başlık bloğunun tamamlandığını belirtmek için.</p><p>Belgenin gövdesi <body>web sayfasının etiketlerini ve içeriğini barındıracak şekilde tasarlanmıştır.</p><p> <h1>başlık</h1> </p><p>HTML, başlıktan sonraki bölümün göreli önemini gösteren altı farklı metin başlığı düzeyi sunar. Yani, etiket <h1>en önemli birinci düzey başlığı ve etiketi temsil eder <h6>altıncı seviye bir başlığı ifade etmeye hizmet eder ve en az önemlidir. Varsayılan olarak, ilk düzey başlığı en büyük kalın yazı tipiyle görüntülenir, sonraki düzeyin başlıkları boyut olarak daha küçüktür. Etiketler <h1>...<h6>blok öğelerdir, her zaman yeni bir satırda başlarlar ve onlardan sonra diğer öğeler bir sonraki satırda görüntülenir. Ayrıca başlıktan önce ve sonra beyaz boşluk eklenmiştir.</p><p> <!-- Комментарий --> </p><p>Bazı metinler, yorum yapılarak tarayıcıda görüntülenmekten gizlenebilir. Kullanıcı böyle bir metni görmese de yine de belgede iletilecektir, bu nedenle kaynak koduna bakarak gizli notları bulabilirsiniz.</p> <p>Bugün sevgili okuyucu, bir HTML belgesinin yazıldığı standardı ilan etmek gibi gizemli bir şeyden bahsedeceğiz. adlı bir web sayfasının kodundaki ilk HTML yönergesi <b>!DOKTİP</b>.</p> <p>İşte bu satırın bir örneği:</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </p><p>Neden böyle bir saçmalığa ihtiyacınız olduğunu ve sizin durumunuzda hangi DOCTYPE'ı seçeceğinizi bilmiyorsanız, bu yazıda bu soruların cevaplarını bulacaksınız, en azından sorunu ayrıntılı olarak ele almaya çalıştım 🙂</p> <p>Vicdanlı bir acemi web yöneticisinin DOCTYPE yönergesinin amacını anlamaya çalışırken yapabileceği ilk şey, htmlbook.ru'ya gitmek ve okumaktır; <i>doktipler</i> birkaç tane var (HTML ve XHTML için katı ve çok katı değil). Bu yönergenin, HTML belgesinin hangi standartlara göre düzenlendiği konusunda tarayıcıyı bilgilendirmek için gerekli olduğu açıktır, ancak hangi standardın seçileceği ve neyi etkilediği büyük bir sorudur.</p> <p>Büyük bir sorunun ayrıntılı bir cevaba dönüşmesi için, tüm bu standartların ortaya çıkışının en ilginç tarihini tanıyalım (korkmayın, kısayım).</p> <h2>HTML standartlarının tarihi</h2> <p>Uzun zaman önce, internet henüz emekleme dönemindeyken bir sorun ortaya çıktı. <i>ağ üzerinden iletilen bir dizi harf nasıl başlıklara, paragraflara, bağlantılara dönüştürülür</i>... Cevap fizikçi Tim Berners-Lee tarafından icat edilerek bulundu. <b>hiper metin biçimlendirme dili HTML</b>(not, sarışın yoldaşlar, HTML bir programlama dili değildir). HTML belgeleri 1991'de yayınlandı.</p> <p>HTML o kadar çok tutuldu ki, İnternette belgeleri işaretlemek için standart haline geldi ve aynı HTML yaratıcısı Ser Tim Berners tarafından garip bir şekilde kurulmuş ve yönetiliyor olan uluslararası W3C standartları organizasyonu tarafından onaylandı. Lee.</p> <p>İlk baskısında HTML, bir web sayfasının içeriği için bir işaretleme diliydi ve tarayıcıya iyi arkadaşlarımız HTML etiketlerini kullanarak başlığın nerede olduğunu, paragrafın nerede olduğunu, bağlantının nerede olduğunu söylüyordu. Ancak tarayıcılar, etiketlerle yapılandırılmış tüm içerik öğelerini görsel olarak nasıl temsil edeceklerine kendileri karar vermek zorundaydı. Başka bir deyişle, HTML'nin ilk revizyonunun istemci tarafında köprü metninin görsel sunumu üzerinde hiçbir gücü yoktu; bu işlev tamamen tarayıcının omuzlarına düştü.</p> <p>İş internete akarken, İnternet teknolojilerinin patlayıcı gelişimi biraz zaman aldı. İş siteleri hiç benzemek istemiyorlardı, parlaklığa, akılda kalıcılığa ihtiyaçları vardı.</p> <p>O zamanlar popüler tarayıcılar (tabii ki IE ve sonra hala hayatta, Netscape), bir web belgesinin bireysel tasarım özelliklerini ayarlamanıza izin veren kendi etiketlerini bulmaya başladı. Evet sevgili okuyucu, o zamanlar tarayıcılar arası uyumluluk yoktu. Web sitelerinin yalnızca IE kullanılarak taranabildiği günleri hala hatırlıyorum, diğer tüm tarayıcılar korkutucu şeyler gösteriyordu. Ama şimdi bununla ilgili değil.</p> <p>W3C, halihazırda görsel sunum araçlarını içeren yeni bir HTML standardını benimsiyor.</p> <p>CSS teknolojisi, düzeni ve ayrı sunumu (artık CSS stilleri tarafından ayarlanacak olan hizalama, renkler, yazı tipleri) yapıdan (ideolojik olarak HTML'de ayarlanmış başlıklar, paragraflar, bağlantılar) geri yüklemek için tasarlanmış sıçramalar ve sınırlarla gelişmektedir.</p> <p>Acemi Web Yöneticisi soracak <i>görseli yapıdan neden ayıralım</i>, ve ona cevap vereceğiz:</p> <ul><li>Basit bir sitede buna ihtiyaç bariz değildir, ancak proje büyükse, bölüm karışıklığı ve HTML kodunda karışıklığı önleyebilir.</li> <li>Blokların görsel sunumu aynı ise aynı kodu farklı sayfalarda tekrarlamaya gerek yoktur. Belirli bir blok ailesi için görüntüleme stilini bir kez belirleyebileceğiniz bir CSS dosyası kullanmak yeterlidir.</li> <li>Görünümle ilgili talimatları önbelleğe alınmış bir dosyaya ayırarak, dünya çapında web'de anlamsız yüklemelerden kaçınabilirsiniz (hehe, dünya çapında web'de ne işimiz var, sunucunuz aşırı yüklenmez; CSS, sunucuları yüksek yükten kurtarır. projeler).</li> <li>Şimdi, CSS'nin gücü, sunum mantığıyla çalışma açısından, HTML'de yapay olarak feda edilen bir sayfanın görünümünü değiştirme araçlarından inkar edilemez bir şekilde daha fazladır.</li> </ul><p>Öyleyse, CSS hakkında yeterince, HTML'ye geri dönelim.</p> <p>Şu anda ilgili, <b>HTML 4.01 standardı</b>öğelerin görüntülenmesini değiştirmek için HTML kullanımını yasaklar. HTML yönergelerine veda edin <i>hizalamak, yazı tipi</i>; görünüm, CSS stilleri kullanılarak ayarlanmalıdır. Her şey normale döner.</p> <p>Ancak, İnternet gelişmeye devam ediyor ve standartlar onunla birlikte gelişiyor ve yeniden doğuyor.</p> <p>W3C, en tatmin edici modern trendin yeni genişletilebilir bir trend olacağına karar verdi. <b>XHTML standardı</b>... Bu mekanizma, HTML ile XML ilkelerinin bir tür simbiyozudur.</p> <p>XML, yapılandırılmış verileri bir metin dosyasında saklamanın bir yoludur. İcat edilen etiketler, belirli bir şekilde, XML standartlarına uygun olarak bir veri yapısı oluşturur:</p><p> <kontakty> <zapis nomer="1"> <familiya>Morkovin</familiya> <imya>Andrey</imya> <site>alan</site> </zapis> <zapis nomer="2"> <familiya>Volozh</familiya> <imya>Arkadiy</imya> <site>yandex.ru</site> </zapis> </kontakty> </p><p>Basit bir program ile XML aracılığıyla yapılandırılmış verileri kolayca ayırabilirsiniz. Bu durumda, veriler herhangi bir işletim sisteminde, herhangi bir cihazda analiz edilebilir (sonuçta, bu yalnızca iyi bilinen bir standarda göre uygun sınırlayıcı etiketlerle yapılandırılmış bir metin dosyasıdır).</p> <p>W3C, yukarıdaki özelliği çok havalı buldu ve HTML geliştirmedeki bir çıkmazı düşünmek XHTML'nin doğuşuna yol açtı. Yeni etiketlerle ağrısız bir şekilde genişletilmesi gereken ve herhangi bir cihaz (mobil, bilgisayar, TV) tarafından işlenebilen bir biçimlendirme dili olacaktır, çünkü bunu yayan XML'e dayanmaktadır (W3C organizasyonunun saf çalışanları olarak düşündü).</p> <p>Söylenenden daha erken değil - Mayıs 2001'de ortaya çıktı <b>yeni XHTML 1.0 Genişletilebilir Köprü Metni Biçimlendirme Standardı</b>... XML'in zorluklarını emdi, şimdi HTML kodunun aşağıdaki gereksinimleri karşılaması gerekiyor:</p> <ul><li>Tüm etiketler kapatılmalıdır. Etiket tek ise, örneğin <i><img> </i>, o zaman şöyle görünmelidir: <i><img src='/1c-enterprise/sozdaem-html-dokument-pravilnaya-struktura-html-dokumenta-i-kod-stranicy.html' loading=lazy loading=lazy> </i>.</li> <li>Hiyerarşi kesinlikle takip edilmelidir. Bu böyle değil: <i><div>…</div> </i>... Bu tek yoldur: <i><div>…</div> </i>... Etiketler hakkında unutma <i><html>, <body> </i>- her şey düzgün olmalı.</li> <li>Etiket niteliklerini tırnak içine aldığınızdan emin olun. Bunu şu şekilde yapamazsınız: <i><a href=http://сайт> </i>... Bu tek yoldur: <i><a href=”http://сайт”> </i>.</li> <li>Etiketler ve CSS özellikleri yalnızca küçük harflerle yazılabilir.</li> <li>işareti içeren bir bağlantı varsa <i>& </i>, dönüştürülmesi gerekiyor <i>& amp.</i></li> <li>Etiket tarafından oluşturulan resimler için <i><img> </i>, özelliği belirtmelisiniz <i>alt</i>.</li> </ul><p>Ve tıpkı HTML 4.01'de olduğu gibi, XHTML'de herhangi bir görünüm hafızası olmamalıdır.</p> <p>Tabii ki, bu XHTML dilinin tam bir özelliği değil, betiklerle ilgili bir takım kısıtlamaları var ve Tanrı bilir başka ne var. Tam spesifikasyon, W3C web sitesinin ilgili bölümünde bulunabilir (her şey İngilizce olmasına rağmen, ancak anlamak isteyen herkes anlayacaktır).</p> <p>Daha önce de söylediğim gibi, XHTML <b>genişletilebilir</b> hiper metin işaretleme dili. Ancak, tüm bu genişletilebilirlik arama motorları tarafından pek kabul görmez, IE6 ve IE7'de düzgün çalışmaz, XTML'nin tüm avantajlarının tam olarak çalışması için sunucu tarafından iletilen başlıkları özelleştirmek ve katı XML formatı kurallarına uymak gerekli hale gelir.</p> <p>XHTML'nin avantajı, sözdiziminin katılığı değil, örneğin ad alanına ait olan zor işaretleme etiketlerini kullanma yeteneğidir. <i>MathML</i>(yalnızca normal tarayıcılarda çalıştırılması gereken bir örnek; IE6, XHTML kodunu yorumlamak yerine dosya kaydetme iletişim kutusunu açar) veya kendi ad alanınızda etiketleri kendiniz icat edin (bu işlem W3C web sitesinde ayrıntılı olarak açıklanmıştır) .</p> <p>Devrim niteliğindeki XHTML dalının daha da geliştirilmesi, çıkış yoludur <b>XTML 2.0 standardı</b> normal HTML'den önemli ölçüde farklıdır ve XHTML 1.0 ile uyumlu değildir. 2009 yılı için XHTML 2.0 üzerindeki çalışmaların tamamlanması planlandı.</p> <p>XHTML 2.0 standardı terk edildi ve W3C, HTML 5 geliştirmeye geçti.</p> <p>HTML 5 standardının 2020'den önce onaylanması planlanmaktadır.</p> <h2>Hangi DOCTYPE seçilir</h2> <p>Şimdi, standartların tarihi bilgisiyle donanmış olarak, DOCTYPE hakkında htmlbook.ru'daki makaleye geri dönelim.</p> <p>HTML 4.01 ve XHTML 1.0'ın ne olduğunu biliyoruz. Üç soru açık kalıyor:</p> <ul><li>Kesin ve geçici sözdizimi nedir?</li> <li>Hangi standardı seçmelisiniz?</li> <li>Seçilen standarda göre dizgi yapmayı nasıl öğreneceksiniz?</li> </ul><p>Şimdi, sorulan tüm soruları tutarlı bir şekilde cevaplayacağım.</p> <p><b>Kesin ve geçici sözdizimi nedir</b></p> <p>Yeni standarda geçişteki bozulmanın o kadar acı verici olmadığı ortaya çıktı, icat ettiler <b>geçici sözdizimleri</b>.</p> <p>HTML 4.01'in HTML düzeni talimatlarına izin vermediğini hatırlıyor musunuz? Evet, unutmayın, elbette, sadece emin olmak istedim.</p> <p>Şimdi deneyelim.</p> <p>ilk ben seçeceğim <b>katı HTML 4.01 biçim sözdizimi</b> ve ilgili DOCTYPE yönergesini belirtin:</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> </p><p>Bu anlamsız, aşağıdaki HTML'nin W3C tarafından kabul edilen 4.01 standardına uygun olduğu anlamına gelir (bu anlamsız parça <i>"- // W3C // DTD HTML 4.01 // EN"</i>). Bu standartla ilgili olarak W3C kuruluşu tarafından yazılan talimatlar burada yer almaktadır: <i>"http://www.w3.org/TR/html4/strict.dtd"</i> ve tarayıcı açıklama için bu adrese gidebilir.</p> <p>Bu HTML koduyla deney yapalım:</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Kontrol

Bazı metin



Kodda yasaklanmış unsurların varlığına asıl dikkat gösterilmelidir: hizalama = "merkez" ve etiket .

Şimdi bu kodu standartlara göre kontrol edelim. Daha önce birçok kez söylediğim gibi, FireFox adlı harika bir eklenti var. Programulina, HTML kodunda iki hata gösteriyor:

Her şey tahmin edilebilir çıktı. Doğrulayıcı, nitelik üzerine yemin eder hizalamak ve etiket , HTML kodunun ilk satırıyla bildirdiğimiz HTML 4.01 standardında bu tür şeyler yasaklanmıştır.

İlk satırı HTML 4.01 standart doktipiyle değiştirelim geçiş sözdizimi:

Şimdi anlamsız, tarayıcıya HTML belgesinin HTML 4.01 standardının geçiş sözdizimine uygun olarak yazıldığını söyler, çünkü belgenin yazarı zaman zaman karşı konulmaz bir şekilde standart tarafından yasaklanan direktifleri kullanmak ister. Bu DOCTYPE'ı yukarıdaki koda koyarak doğrulamayı tekrarlayalım.

Voila, sevgili okuyucu, bu iki hata gitti:

Bence tüm farklılıklar şimdi açık olmalı sıkı ve geçiş sözdizimi.

XHTML 1.0 standardının geçiş doktipi, görünümü ayarlamak için HTML yönergelerinin kullanılmasına izin verecek, ancak XML ideolojisine uyumu yakından izleyecek ve kapatılmamış her tek etiket için bir doğrulama hatası veya alt özelliğin yokluğu ile tepki verecektir. bir şekil.

Hangi standardı seçmeli

Standardın katı sözdizimine uygun olarak geçerli bir şekilde dizmeniz gerektiğine inanıyorum. Bu, sizi HTML'yi amacına uygun kullanmaya zorlayacak ve aynı plakadaki sinekli köftelere müdahale etmeyecektir. Ek olarak, site herhangi bir tarayıcıda geçerli ve yanlış görüntüleniyorsa, bu, yeni sürümleri W3C organizasyonunun standartlarını daha iyi ve daha iyi karşılayan ve geçerli kodun yorumlanmasındaki hataları düzelten bir tarayıcı sorunudur. Ancak bazı karmaşık yapıları sapkın, geçersiz bir şekilde uyguladıysanız, o zaman tarayıcıların yeni sürümlerinin düzeninizi parçalara ayırmayacağının garantileri nerede?

Yani, geçici sözdizimi yok, sadece standartlara sıkı uyum.

Standartlara sıkı sıkıya uymak için başka bir argüman daha var. Bu argümanın bacakları, Fr.'ye yapılan yorumlarda alevlenen Takobus ile olan anlaşmazlığımızdan çıkıyor. Sonuçta IE8'in CSS özelliğinin amacını mükemmel bir şekilde anladığı ortaya çıktı. ekran: tablo hücresi ancak HTML 4.01 standardının katı sözdizimi bildirilmişse. Geçiş sözdiziminde, IE8 verilen CSS özelliğiyle çalışmayı reddeder.

Şimdi mevcut standartlar arasındaki tercihe karar verelim: HTML 4.01 ve XHTML 1.0.

HTML dilini genişletecek misiniz? Değilse, asla sürüm 2.0'a dönüşmeyen çürümüş XHTML dalını kullanmanıza gerek yoktur.

Ürününüzü gelecek için korumak istiyorsanız, gelecekte HTML kodunun XML standartlarına uymaması nedeniyle işlevselliği genişletirken herhangi bir sorun olmayacaksa, tek etiketlerde ve zorunlu olarak eğik çizgilerle kendinize eziyet edin. görüntülerin alt parametreleri. Ama boşuna yapmayın, sadece XHTML standardını kullanmaya gerek görmüyorum.

Çerçeve kullanan HTML belgeleri için de DOCTYPE yönergeleri vardır. Eski çerçeveleme teknolojisini kullandığınızdan şüpheliyim :)

Konuda olmayanlar için:

Çerçeveler, tek bir Web sayfasında görüntülenen bağımsız tarayıcı pencereleridir. Her pencere bağımsız bir HTML dosyasıyla ilişkilendirilir.

Artık hangisinin olduğu açık! DOCTYPE'ın en uygun olduğu ortaya çıktı:

Katı HTML 4.01 biçim sözdizimi

Seçilen standarda göre dizgi nasıl öğrenilir

Çok basit olduğu ortaya çıkıyor. FireFox için önerdiğim uzantıyı yüklemeniz gerekiyor ki bu popüler bir şekilde örneklerle hatanın nedenini HTML'de açıklayacak ve nasıl düzeltileceğini size gösterecek. İşte size geçerli kod.

Konuyla ilgili komik video

not Muhafız değişimine ilişkin süresiz işlem devam ediyor. Tematik bloglar ve sitelerle memnuniyetle bağlantı alışverişi yapacağım. Bir arzunuz varsa, yazın.

Yukarıdakilerin devamında, bir muhafız gönderiyorum.

Web tasarımıyla ilgileniyor musunuz? Web siteleri oluşturuyor musunuz? O zaman Web 2.0 Portalında birçok ilginç şey bulacaksınız.

Hepinize iyi günler! Bugün ilk HTML sayfamız için bir tel kafes oluşturmayı öğreneceğiz. Daha doğrusu html sayfasının temel yapısını çözelim, nelerden oluştuğunu öğrenelim. Ama her şeyden önce, biraz etiketlerden bahsedelim.

etiket nedirHTML?

Etiket, HTML dilinin temel bir öğesidir. Yani HTML tam olarak etiketlerden oluşur ve HTML öğrenmek için en sık kullanılan ana etiketleri incelemek yeterlidir. Gerçek hayattan bir örnekle karşılaştırıldığında, o zaman etiket HTML'de tuğla gibi ev için. Tuğla, bir ev inşa etmek için kullanılan ana unsurdur. HTML'de aynıdır, bir etiket, bir html sayfası oluşturmak için temel öğedir. Etiketin yardımıyla tarayıcıya html sayfasının içeriğini nasıl doğru bir şekilde görüntüleyeceğini anlatıyoruz.

İki tür etiket vardır: eşleştirilmiş etiketler ve tek etiketler:

  • eşleştirilmiş etiketler bunlar bir başlangıç ​​etiketi ve bir bitiş etiketinden oluşan etiketlerdir. Kısacası, bunlar bir bitiş etiketi olan etiketlerdir. Örnekler: ve; ve; ve ; ve

    ; ;
  • Tek etiketler bunlar bitiş etiketi olmayan etiketlerdir. Tek etiket örnekleri:
    .

html sayfası var basit yapı... Sitenin tüm sayfalarındaki temel yapı aynı görünüyor. Sayfaların temel yapısında siteden siteye farklılık gösterebilen tek şey DOCTYPE öğesidir. DOCTYPE'ın ne olduğunu ve hangi türlerin bulunduğunu öğrenmek için bu makaleyi okuyun. Bu öğeyi belirtmezsek, tarayıcı sayfayı yanlış görüntüleyecektir.

Temel böyle görünüyor karkassayfanın html'si:

ana sayfa

Şimdi bu sayfayı bir tarayıcıda açarsak boş olacaktır. Şimdi etiketin içine birkaç satır kod ekleyelim gövde ve bu sayfayı bir tarayıcıda tekrar açın.

ilk html sayfam

Kodu değiştirdikten sonra sayfa tarayıcıda şöyle görünür:


Bu örneği analiz etmek

Sayfanın başında, html etiketinden önce her zaman belirtmekDOKTORA, yani belge türü.

Her html sayfası şununla başlar: etiket< html> Ve biter etikethtml> ve başlıktan oluşur < kafa>kafa> Ve beden < vücut>vücut>.

Hizmet öğeleri, tarayıcıda sayfada görüntülenmeyen başlığın içine yazılır. Esasen:

  • Meta etiketleri... başlıcaları m eta kodlama etiketi, bunun aracılığıyla sayfa kodlamasını belirtiyoruz ( ), arama motorları için meta etiketler meta etiketsayfa açıklaması ile (tanım) ve sayfa için anahtar kelimeler (anahtar kelimeler).
  • Etiketin içinde belirtilen sayfanın başlığı < başlık>başlık>... Bu başlık tarayıcı sekmesinde görüntülenir.
  • Dahili stiller ile engelleyin. < stiltip = ”Metin /css ”> İç Stiller.
  • Tek etiket < bağlantı />üzerinden harici dosyaları bağladığımız.
  • Ve ayrıca blok < senaryokaynak=" kütüphane.js" tip=" metin / javascript" > komut dosyası>çeşitli senaryoların yazıldığı JavaScript.

etiketin içinde < vücut>vücut> sayfanın içeriği yazılır. İçerik, tarayıcıda sayfada görüntülenen metin, resim, tablo, liste, bağlantı ve diğer öğeleri içerebilir.

Etiket isimleri her durumda yazılabilir, yani yazarsak < GÖVDE>,< gövde>,< gövde> veya < vücut>, o zaman sonuç aynı olacaktır, ancak her zaman önerilir küçük harfle yaz, yani < vücut>.

Belki de hepsi bu. Bu küçük ama çok önemli makaleden neye benzediğini öğrendiniz. basit yapı sayfanın html'si.

Sıfırdan bir şablon oluşturuyorsanız, bir şeyler üzerine inşa etmeniz gerekir. HTML5 standardının "ülke genelinde yaygın olarak ilerlediğini" göz önünde bulundurarak, bu makalede boş bir HTML5 şablonu örneği sunacağım.

Yeni standartta pek çok şey basitleştirildi ve şimdi temel kısım şöyle görünüyor:

...

Yeni HTML5 etiketleri

HTML5, kod yapısı için birkaç yeni etiket sunar:

,
En son makaleler
Popüler Makaleler
Editörün Seçimi

Bilgisayar yardım sitesi

© Telif hakkı 2022,
rzdoro.ru - Bilgisayar yardım sitesi

  • Kategoriler
  • Ütü
  • Windows 10
  • Tarama
  • Windows 7
  • Ütü
  • Windows 10
  • Tarama
  • Windows 7
rzdoro.ru