ana /
Tavsiye / Aptallar için HTML programlama dili. Anlaşılabilir dilde yeni başlayanlar için HTML'nin temelleri
Aptallar için HTML programlama dili. Anlaşılabilir dilde yeni başlayanlar için HTML'nin temelleri
Temel HTML Bunlar, HTML dilinin temel kuralları, HTML sayfasının yapısının açıklaması, HTML öğeleri arasındaki HTML belgesinin yapısındaki ilişkisi.
HTML belgesi sıradan bir metin belgesidir, olağan metin düzenleyicide olduğu gibi oluşturulabilir. (Not defteri)ve uzmanlaşmış, aydınlatma kodu ile (Not Defteri ++, Visual Studio Code, vb.). HTML belgesi bir uzantıya sahiptir. HTML.
HTML belgesi, bir HTML öğesi ve metin ağacından oluşur. Her bir eleman ilk belge başlangıç \u200b\u200b(açılış) ve final (kapanış) etiketinde (nadir bir istisna) gösterilir.
Etiket başlatmak Elemanın nerede başladığını, nihai - bittiği yerde gösterir. Kapanış etiketi Etiketin adından önce bir çizgi eklenerek oluşturulur:<имя тега> … имя тега> . İlk ve kapanış etiketleri arasında etiketin içeriği var.
Tek etiketler içeriği doğrudan saklayamaz, bir öznitelik değeri olarak reçete edilir, örneğin etiket Metinli bir düğme oluşturun Buton İçeride.
Etiketler birbirlerine yatırım yapabilir, örneğin,
Metin
. Yatırım yaparken, kapanışlarının sırası takip edilmelidir. ("Matryshka" prensibi)Örneğin, bir sonraki giriş yanlış olacaktır:
Metin
.
HTML öğelerinin özellikleri olabilir (tüm HTML elemanları ve kendi başına geçerli). Nitelikler, keşif öğesi etiketinde yazılır ve öznitelik adı \u003d "değer" formatında belirtilen adı ve değeri içerir. Öznitelikler, belirtilen öğenin özelliklerini ve davranışlarını değiştirmenizi sağlar.
Her bir elemanın birkaç sınıf değeri ve yalnızca bir kimlik değeri atanabilir. Çoklu sınıf değerleri boşlukla kaydedilir,
. Sınıf ve ID değerleri yalnızca harf, sayılar, tire ve alt alt çizgilerden oluşmalıdır ve yalnızca harflerle veya rakamlarla başlamalıdır.
Tarayıcı tarayıcılığı (yorumlar), bir HTML belgesini, yapısını (DOM) oluşturun ve bu dosyada (stiller, komut dosyaları) dahil olan talimatlara uygun olarak görüntülenir. İşaretleme doğruysa, HTML öğeleri içeren HTML sayfası tarayıcı penceresinde görüntülenir - başlıklar, tablolar, görüntüler vb.
Yorumlama süreci (Ayrıştırma) Web sayfası tamamen tarayıcıya yüklenmeden önce başlar. Tarayıcılar, HTML belgelerini sırayla, CSS'yi işleme koyarken ve tarzdaki sayfaları sayfa öğeleri ile ilişkilendirilir.
HTML belgesi iki bölümden oluşur - başlık - Etiketler arasında
… ve anlamlı kısmı - Etiketler arasında … .
Web Sayfası Yapısı
1. HTML Belge Yapısı
HTML Dili, belge reklam türü reklam dosyasında bulunan kuralları izler. (Belge Tipi Tanımı veya DTD). DTD, belirli bir HTML tipi için hangi etiketlerin, niteliklerin ve değerlerinin hangi etiketlerin geçerli olduğunu belirleyen bir XML belgesidir. HTML'nin her bir sürümü için kendi DTD'si vardır.
DOCTYPE. Web sayfası tarayıcısının doğru ekranından sorumlu. DocType, yalnızca HTML sürümünü (örneğin, HTML) değil, aynı zamanda internetteki ilgili DTD dosyasını tanımlar.
...
Etiketin içinde bulunan unsurlar , sözde bir belge ağacı oluşturmak İşletim Belgesi Model, DOM (Belge Nesne Modeli). Aynı zamanda elementte Kök elemanıdır.
İncir. 1. En basit web sayfası yapısı
Web sayfası unsurlarının etkileşimini anlamak için, sözde sözde düşünmek gerekir. "İlgili ilişki" Elementler arasında. Birden fazla iç içe eleman arasındaki ilişki ebeveyn, bağlı ortaklıklara ve hemşireye bölünmüştür.
Ata - Diğer elemanlara giren bir unsur. Şekil 1, tüm elemanlar için ata . Aynı zamanda elementte
İçinde bulunan tüm etiketlerin atasıdır:
,
, ,
Azalan - Bir veya daha fazla madde türünde bulunan bir öğe. Örneğin,
Bu bir soyundan ve eleman
Aynı anda bir soyundan
ve .
Ebeveyn elemanı - Alt seviyenin diğer unsurlarıyla ve üstlerindeki ağaçların diğer unsurlarıyla ilişkili unsur. Şekil 1.
ve . Etiket
Sadece ebeveyn .
Kız elemanı - Eleman doğrudan daha yüksek bir seviyenin başka bir elementine yerleştirin. Şekil 1 Sadece öğeler
,
,
VE
Hemşirelik elemanı - Bir seviyenin sözde öğeleri ile ortak bir ebeveyn öğesine sahip bir eleman. Şekil 1.
ve - Bir seviyenin elemanlarının yanı sıra unsurlar
,
ve
Kendileri arasında hemşirelik var.
1.1. Eleman
1.2. Eleman
Bölüm
... Sayfa hakkında teknik bilgileri içerir: başlık, açıklama, arama motorları, kodlama, vb. Anahtar kelimeler. Buna girilen bilgiler tarayıcı penceresinde görüntülenmez, ancak tarayıcının sayfanın nasıl işleneceğini gösterdiği verileri içerir.
1.2.1. Eleman
Zorunlu Etiket Bölümü
etiket . Bu etiketin içinde bulunan metin, Web tarayıcı başlık çubuğunda görüntülenir. Başlık uzunluğu, başlığa tam olarak uyması için en fazla 60 karakter olmamalıdır. Başlık metni, web sayfasının içeriğinin en eksiksiz tanımını içermelidir.
1.2.2. Eleman
İsteğe bağlı kesit etiketi
aynı etiket . Bununla birlikte, sayfanın içeriğinin bir açıklamasını ve arama motorları için anahtar kelimelerin, HTML belgesinin yazarı ve meta verilerin diğer özelliklerini belirleyebilirsiniz. Eleman birkaç element içerebilir Çünkü kullanılan niteliklere bağlı olarak, çeşitli bilgiler taşırlar.
Sayfanın ve anahtar kelimelerin içeriği açıklaması, örneğin Rusça ve İngilizce olarak, çeşitli dillerde aynı anda belirtilebilir:
Etiketi kullanma Web sayfasının indekslenmesini arama motorlarına göre yasaklayabilir veya izin verebilirsiniz:
Sayfayı otomatik olarak yeniden başlatmak için belirli bir sürede yenileme değerini kullanmanız gerekir:
Sayfa 30 saniye sonra yeniden başlatılacak. Ziyaretçiyi başka bir sayfaya aktarmak için URL parametresinde URL'yi belirtmeniz gerekir:
Tablo 2. Etiket nitelikleri
Öznitelik
Charset.
Geçerli HTML belgesi için karakterlerin kodlamasını belirtir:
İçerik
Değerlerine bağlı olarak HTTP-EQUIV veya Ad özniteliğine bağlı değeri belirleyen rastgele metin içerir.
Http-equiv.
Bu Web sayfasındaki tarayıcının eylemlerini kontrol eder (HTTP başlıklarının eşdeğeri). Sayfayı görüntülerken, tarayıcı öznitelikte belirtilen talimatları izleyecektir: Varsayılan tarz, sayfada kullanılacak tercih edilen stili belirtir. İçerik niteliği bir öğe tanımlayıcısı içermelidir CSS stilleri tablosunu veya bir öğe tanımlayıcısını belirten
Öğeyi kullanma . Öğe bir kapanış etiketi gerektirmez. Bu eleman, geçerli sayfa ve diğer belgeler arasındaki ilişkiyi belirler. Sayfada çeşitli öğeler olabilir. Kayıt aşağıdaki forma sahip olacaktır:
Tablo 4. Etiket nitelikleri
Öznitelik
Açıklama
Crossorigin.
Sitedeki bir görüntü çıkarırken, CORS'lerin kullanılmasının (diğer etki alanı kaynaklarına bir web sayfası erişimi sağlamanızı sağlayan tarayıcı teknolojisi) belirtir. Anonim - Etki Alanı Sorgusunda, tarayıcı, bir talebin yapıldığı etki alanı adını içeren orijin başlığını otomatik olarak ekler. Sunucu, Access-Control-Consum-meneni: * (Yıldızlar yerine Etki Alanı adı) cevap vermezse, görüntü yükü engellenir. Kullanım-Kimlik Bilgileri - Sunucu, Access-Control-Allow-kimlik bilgilerini kullanarak kimlik bilgileri sağlamazsa: TRUE, ardından görüntü yükü engellenir.
HREF.
Etiketin bir değer olarak ana niteliği, dosyanın stilleri ile yoludur.
HREFLANG.
Bağlantının olduğu belgedeki metnin dilini belirtir.
Randing değişken, sunucuda rastgele oluşturulan, içeriği korumak için gömülü stilleri kullanma kurallarını belirleyen rastgele. Öznitelik değeri - Metin dizesi.
Rel.
Öznitelik, mevcut belge arasındaki ilişkiyi ve referansların olduğu belge arasındaki ilişkiyi belirler. Alternate - Aynı belgeye bağlantı, ancak başka bir biçimde (örneğin, yazdırma sayfaları, çeviri, ayna, RSS veya atom formatındaki şerit),
.
Arşivler - Bağlantıdaki belgenin tarihsel ilgiyi temsil ettiğini gösterir. Bağlantı, kayıt, belge ve diğer malzemeler koleksiyonunu gösterebilir. Yazarın, belgenin yazarı veya sayfanın yazarın yazarı hakkında yazarın bağlantısı. Atalar yoksa, bir link olan, bir bağlantı olan, bir bağlantı olan, bir bağlantı olan veya makale bölümünde yer imi referansı. Dış, bağlantının bu sitenin bir parçası olmadığı sayfanın olduğunu belirtmek için kullanılır. İlk önce, ilk belgeye giden bağlantıyı belge dizisinden belirtir. Sertifika ile bir belgeye atıfta bulunma. Simge, geçerli belge için kullanılacak olan simgenin yolunu tanımlar. Son belgenin sırasındaki son belgeye giden bağlantıyı belirtir. Belge için telif hakkı bilgilerine lisans başvurusu. Daha sonra, bu belgenin serinin bir parçası olduğunu ve bağlantının bu serideki aşağıdaki belgeye yol açtığını gösterir.
Nofollow, bağlantının sayfanın yazarı tarafından onaylanmadığını veya bağlantının ticari olduğunu gösterir. NorefErrer, istek kaynağının URL'sini içeren istemci istek başlığının bağlantı sırasında iletilmemesi gerektiğini belirtir. Pingback, blogun buna bağlı siteleri otomatik olarak bildirmesini sağlayan PingBack Sunucu adresini belirtir. Prefetch, dosyanın bağlantı yol açtığı önceden tutulması gerektiğini belirtir. Önceki, bu belgenin seri bir parçası olduğunu ve bağlantının bu serideki önceki belgeye yol açtığını gösterir.
Arama, referans belgesinin arama arayüzünü ve ilgili kaynakları içerdiğini gösterir. Sidebar, eğer mümkünse, eğer mümkünse, tarayıcının ek bağlamında ve bazı tarayıcıların ekrana tıkladığınızda bazı tarayıcıların, yer imleri paneline bir bağlantı eklemek için pencereyi açın. Bu belge için stil sayfası olarak kullanılacak harici bir dosyaya stil sayfası bağlantısı. Etiket, köprünün bu belgeye yol açtığı etiketin olduğunu gösterir. Yukarı, sayfanın hiyerarşik yapının bir parçası olduğunu ve köprünün yapıda daha yüksek bir kaynak seviyesine yol açtığını gösterir.
Boyutları.
Görsel ekran için simgelerin boyutunu belirtir. Boyutlar özniteliği sadece rel \u003d "simge" ile kullanılır ve aşağıdaki anlamları alabilir: Genişlikler yüksekliktedir - boşluklarla ayrılan boyutların bir listesini tanımlar, her bir boyut biçiminde olmalıdır - yüksekliğin genişlikleri (simgelerin boyutları piksellerde ayarlanır), örneğin:
; Herhangi bir - simge herhangi bir boyuta kadar ölçeklendirebilir.
Başlık
Bağlantının başlığını veya alternatif stil tablolarının adının adını belirtir. Öznitelik Değeri - Metin.
Tip
Bağlantının olduğu MIME türünü belirtir. Bu durumda, "Metin / CSS" değerini alır.
1.2.5. Eleman
Таблица 5. Атрибуты тега
Belgenin gövdesi
Lütfen HTML belgelerinin bir uzantısı olduğunu lütfen unutmayın. .html..
Yani, örnekten sırayla.
- Belge türü (DC)
Bu tasarım, belgenin başlangıcında, bir belge oluştururken HTML'nin hangi sürümünün kullanıldığı "anlayış" tarayıcısının başlangıcında belirtilir.
HTML'nin sürekli gelişen olması nedeniyle, herhangi bir program ürünü olarak çeşitli sürümlere sahiptir. HTML'nin mevcut sürümü, örnekte verilen beşinci ve birdir. uyuşturucu madde ilgilidir.
Prensip olarak, belge türünün incelenmesi için bir anlam yoktur, çünkü HTML5 çıkışıyla bu tasarım standart hale geldi. Site düzenini her başlattığınızda belgenin başlangıcına ekleyin.
- Belgenin başlangıcı
Doktordan sonra buluştuğumuz ilk etiket .
Html etiketi - HTML belgesini işaretleme yapısal birimi. HTML kodu, etiket olarak adlandırılan tuğlalardan kıvrılır. Her etiketin kendi işlevine sahiptir ve sonuçta HTML İşaretleme dilinin incelenmesi, tam olarak etiketlerin çalışmasında ve belgelerdeki özelliklerindedir.
İlk bakışta göründüğü için HTML'nin çalışmasının böyle karmaşık bir ders olmadığını not etmek istiyorum. İşaretlemede kullanılan etiketleri öğrenmek için - beyin üzerinde böyle büyük bir yük değil.
Böylece, belgenin işaretlemesi etiketle başlar. ve bir kapanış etiketi ile biter. Diğer etiketleri veya elemanları içeren her etiket kapatılmalıdır kapanış etiketi. Örneğin, , ,
, vb.
Etiket Zorunludur, çünkü belgenin tüm yapısını içerdiğinden ve diğer elementler için bir kabuktur.
Etiket
Sonra görüyoruz etiket
Öğeler bunu anlayana kadar diğerlerini içerir. Diğer unsurları içerir - bu, elemanların veya etiketlerin yapının açılış ve kapanma etiketi arasında olduğu anlamına gelir:
<тег> İçerik veya diğer etiketlerтег>
Etiket
HTML belgesinin metaminginin depolanması, yani belgede görüntülenmeyen bilgiler, ancak önemlidir ve belgenin nasıl görüneceğini ve nasıl davranacağını belirler. Bu etiket belgede gereklidir.
Etiket - Belge Başlığı
Başlık
Başlık
bir zorunlu etiketTarayıcıda veya sekme başlığında görüntülenen metin meta bilgilerini içeren. Etiket etikette olmalı . Ayrıca, bu etiketin içeriği, belgeyi yayınlama sonuçlarında görüntülemek için arama motorları tarafından kullanılır.
Metâl
Metâl - Yapısal sayfa verilerini sağlamak için tasarlanmış özel bir etiket. Metathlets en sık etikette kullanılır
. Yapıda metagelys gerekli değildir Html Belge.
Favicon (Favicon)
Bir dosyayı Favonki'nin görüntüsü ile belgeye bağlar. Favicon (Favicon) - Tarayıcı sekmesindeki belge adının yanında görünen minyatür simgesi. Favonka, PNG, JPG, ICO, GIF gibi farklı formatlara sahip olabilen 16 x 16 (veya 32 x 32) piksel, grafik dosyasıdır. Geleneksel olarak ICO formatı kullanılır. Animasyonlu Favonki, animasyon içeren GIF dosyalarıdır. Yeni bir mesaj geldiğinde animasyonlu bir Favon, örneğin Vkontakte izleyebilirsiniz.
Belgenin CSS stilleri
HTML tasarım stilleriyle CSS belge dosyasına bağlanır.
CSS. - Çağlayan Bir HTML belgesinin tasarımın stilleri. Etiketteki her etiket
, diğer elemanlara göre renk, genişlik, yükseklik, konum gibi bir dizi özellik vardır. Tüm bu özellikler, harici bir dosyaya alınabilecek CSS stilleridir. Tasarlamak Harici dosyaları CSS stilleri de dahil olmak üzere HTML belgesine bağlar.
Not: mülk hREF. Tasarımlar Harici dosyanın konumunu belirtir. Örneğimize göre, dosya style.csss. ve favicon.ico., dosyayla aynı klasörde index.html. kapanış etiketi yok.
Etiket
Etiket
İndirme şimdi başlayacak ... Malzemeyi paylaşmayı unutmayın. sosyal ağlarda Meslektaşlar