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: , , , , , bazı durumlarda normalin yerini alan ... Bu, arama robotlarının sayfa kodunu daha iyi tanımaları ve ana içeriği yardımcı öğelerden ayırmaları için yapıldı.
Yeni etiketleri kullanarak boş bir HTML5 şablonu şöyle görünebilir:
Navigasyon menüsü
Kenar çubuğu kenar çubuğu
İçerik, sayfanın ana içeriğidir.
DOCTYPE yazmayı basitleştirin
Daha önce nasıl olduğunu hatırlayın, HTML4'te DOCTYPE etiketi şöyle görünüyordu:
Şimdi kayıt minimum, muhtemelen hiçbir yerde daha kolay değil:
Etiketlerin geri kalanı için benzer basitleştirmeler yapıldı, bu nedenle HTML5 standardına geçiş yazmayı çok daha kolay hale getiriyor.
HTML5'te isteğe bağlı etiketler
Yeni standart, yerleşim tasarımcılarına büyük kolaylık sağladı. Özellikle, HTML5 işaretlemesi için HTML, HEAD ve BODY öğelerinin kullanımı artık gerekli değildir. Eğer orada değillerse, tarayıcı hala onların var olduğunu düşünür. Aslında, HTML5'teki zorunlulardan yalnızca
.
Rus dilinin bir HTML belgesinin ana dili olarak yorumlanması
Etiket belgenin dilini tanımlar. Ağda düzenli olarak doğru yazımı, özellikle de "ru-RU" nun doğru yazımı hakkında tartışmalar ortaya çıkıyor. Rus dilinin İngiliz dili (İngiliz ve Amerikan) gibi lehçeleri ve yazımları olmadığı için "-RU" seçeneğinin gereksiz olduğu seçeneğine yöneliyorum. RU soneki, Rusça'nın nerede konuşulduğunu belirtir. Yani, en-US, "ABD'de konuşulan İngilizce" anlamına geliyorsa, ru-RU, gereksiz olan "Rusya'da konuşulan Rusça" anlamına gelir.
Başka bir deyişle, "ru-RU" seçeneğini kullanmaya devam ederseniz kötü bir şey olmayacak.
Ana etiketlerle tanımlanan HTML sayfası ve yapısı
Bakalım en sıradan internet sayfası içeriden nasıl görünüyor.
HTML yapısı her web sayfasının merkezinde yer alır.Bugün birkaç çeşit var HTML belgeler. Her belge türünün kendi HTML yapısı (ayrıntılar sayfanın altındadır).
Doğru başlangıç HTML yapısı bir rehindir çapraz tarayıcı sitesi .
Sistem Başlat veya Başlat menüsünde Tüm Programlar bölümüne gidin, Donatılar klasörünü açın, Not Defteri'ni seçin. Elbette kod yazmanın tek yolu bu değil ama bu aşamada buna ihtiyacınız var.
Bir belge yapısı örneği:
Sayfanın yapısını tanımlayan HTML etiketlerini göz önünde bulundurun
- zorunlu, tanımla HTML belge.
- hizmet bilgilerini içeren bir bölüm tanımlayın, arama motorları, tarayıcılar, komut dosyaları için talimatlar içerir.
- web sayfasının ana başlığını tanımlayın. - zorunlu, belgenin görünen kısmını tanımlayın.
- 3. seviyenin başlığını tanımlayın.- bir paragraf tanımlayın. Ders HTML paragraflarına bakın
HTML Belge Yapısı | Sayfa kodunun yazılması
Eylemlerin sırası aşağıdaki gibidir:
1. Kodu Not Defteri'ne yazıyoruz HTML sayfalar:
4. IE'yi (Internet Explorer) veya başka bir varsayılan tarayıcıyı açın. Menüsünde bilgisayarda kayıtlı olan index.html dosyasını bulup açmaya çalışıyoruz. Ayrıca klavyede iki tuşun bir kombinasyonunu yazdıktan sonra görünen pencerede herhangi bir tarayıcıda bir dosya bulabilir ve açabilirsiniz: Ctrl ve O - Ctrl tuşunu basılı tutun ve ardından Latin harfine O basın.
Malzemenin daha fazla incelenmesi için aşağıdakiler gereklidir:
Firefox ile index.html'yi açın. Bu tarayıcının önceki sürümlerinde yazdığınız metni okuyamayacaktınız, bu nedenle anlaşılmaz karakterler görüntülenecekti. Bu yanlışlık, basit ekleme ile ortadan kaldırılır. HTML ayrıca gerekli olan bir dizi özniteliğe sahip iki etiket için kod.
Doğru HTML 4.01 yapısı
Bu, HTML sayfasının ilk yapısı olmalıdır. :
Kendi paragraflarınızı, başlığınızı ekleyin ve ne olduğunu görün. Değişikliklerin geçerli olması için Mozilla Firefox'ta veya Internet Explorer'da düğmesine veya F5'e basarak belgeyi her kaydettikten sonra tarayıcı penceresinin içeriğini yenilemeyi unutmayın.
Başardın mı? - Yani dikkatliydin ve her şeyi doğru yaptın.
HTML temelleri HTML dilinin temel kurallarını, bir HTML sayfasının yapısının tanımını, bir HTML belgesinin yapısındaki HTML öğeleri arasındaki ilişkileri içerir.
HTML belgesi normal bir metin belgesidir, normal bir metin düzenleyicide olduğu gibi oluşturulabilir (Not defteri) , ve özel olarak, kod vurgulama ile (Notepad++, Visual Studio Code, vb.) ... HTML belgesi .html uzantısına sahiptir.
Bir HTML belgesi, bir HTML öğeleri ve metin ağacından oluşur. Her öğe kaynak belgede bir başlangıç (açılış) ve bitiş (kapanış) etiketiyle (nadir istisnalar dışında) belirtilir.
Başlangıç etiketi elemanın nerede başladığını, bitişini - nerede bittiğini gösterir. Bitiş etiketi etiket adından önce / bir eğik çizgi eklenerek oluşturulur:<имя тега> … ... Başlangıç ve bitiş etiketleri arasında etiketin içeriği bulunur - içerik.
Tek etiketler içeriği doğrudan kendi içlerinde depolayamazlar, bir öznitelik değeri olarak yazılır, örneğin bir etiket Buton içeri.
Etiketler iç içe yerleştirilebilir, örneğin,
Metin
... Yatırım yaparken kapanış sırasına göre hareket etmelisiniz.
("matryoshka" ilkesi) , örneğin, aşağıdaki giriş yanlış olacaktır:
Metin
.
HTML öğelerinin nitelikleri olabilir (tüm HTML öğeleri için geçerli olan genel ve kendilerine ait). Nitelikler, bir öğenin açılış etiketine yazılır ve bir ad ve öznitelik adı = "değer" biçiminde belirtilen değeri içerir. Nitelikler, ayarlandıkları öğenin özelliklerini ve davranışını değiştirmenize olanak tanır.
Her öğeye birden fazla sınıf değeri ve yalnızca bir id değeri atanabilir. Birden çok sınıf değeri bir boşlukla ayrılır,
... Sınıf ve id değerleri yalnızca harf, sayı, kısa çizgi ve alt çizgiden oluşmalı ve yalnızca harf veya rakamlarla başlamalıdır.
Tarayıcı, bir HTML belgesini görüntüler (yorumlar), yapısını (DOM) oluşturur ve bu dosyada bulunan talimatlara göre (stil sayfaları, komut dosyaları) görüntüler. İşaretleme doğruysa, tarayıcı penceresi HTML öğelerini (başlıklar, tablolar, resimler vb.) içeren bir HTML sayfası görüntüler.
yorumlama süreci (ayrıştırma) web sayfası tarayıcıya tam olarak yüklenmeden önce başlar. Tarayıcılar, CSS'yi işlerken ve stil sayfalarını sayfa öğeleriyle ilişkilendirirken, HTML belgelerini baştan itibaren sırayla işler.
HTML belgesi iki bölümden oluşur - başlık - etiketler arasında
… ve içerik kısmı - etiketler arasında … .
Web sayfası yapısı
1. HTML belgesinin yapısı
HTML, belge türü bildirim dosyasında bulunan kuralları takip eder (Belge Türü Tanımı veya DTD) ... DTD, belirli bir HTML türü için hangi etiketlerin, niteliklerin ve değerlerinin geçerli olduğunu tanımlayan bir XML belgesidir. Her HTML sürümünün kendi DTD'si vardır.
DOKTORA web sayfasının tarayıcı tarafından doğru görüntülenmesinden sorumludur. DOCTYPE, yalnızca HTML sürümünü (html gibi) değil, aynı zamanda İnternet'teki ilgili DTD dosyasını da tanımlar.
...
Etiketin içindeki öğeler , bir belge ağacı oluşturun, sözde belge nesne modeli (DOM) ... Bu durumda, eleman kök unsurdur.
Pirinç. 1. Bir web sayfasının en basit yapısı
Bir web sayfasının öğelerinin etkileşimini anlamak için, sözde düşünmek gerekir. "Aile ilişkisi" elemanlar arasında. Birden çok iç içe öğe arasındaki ilişkiler, ebeveyn, çocuk ve kardeş olarak kategorilere ayrılır.
Ata - diğer öğeleri içeren bir öğe. Şekil 1'de, tüm öğelerin atası ... Aynı zamanda, eleman
içerdiği tüm etiketlerin atasıdır:
, , , vesaire.
Azalan - bir veya daha fazla öğe türü içinde yer alan bir öğe. Örneğin,
soyundan geliyor ve eleman
Aynı zamanda soyundan mı
ve .
üst öğe - daha düşük seviyedeki diğer öğelerle ilişkili ve üstlerindeki ağaçta bulunan bir öğe. Şekil 1
ve ... Etiket
Yalnızca ebeveyn .
alt öğe - daha yüksek seviyedeki başka bir öğeye doğrudan bağlı bir öğe. Şekil 1'de sadece elemanlar
, , VE çocukları .
hemşirelik elemanı - sözde kardeşler olarak kabul edilenle ortak bir ebeveyni olan bir öğe. Şekil 1
ve - aynı seviyedeki elementlerin yanı sıra elementler
, ve Kendi aralarında kardeşler.
1.1. eleman
1.2. eleman
Bölüm
... sayfa hakkında teknik bilgiler içerir: başlık, açıklama, arama motorları için anahtar kelimeler, kodlama vb. İçine girilen bilgiler tarayıcı penceresinde görünmez, ancak tarayıcıya sayfayı nasıl kullanacağını söyleyen verileri içerir.
1.2.1. eleman </h4>
<p>Gerekli bölüm etiketi <head>etiket mi <title>... Bu etiketin içine yerleştirilen metin, web tarayıcısının başlık çubuğunda görüntülenir. Başlık, başlığa tam olarak sığması için 60 karakterden fazla olmamalıdır. Başlık metni, web sayfasının içeriğinin mümkün olduğunca eksiksiz bir açıklamasını içermelidir.</p>
<h4>1.2.2. eleman <meta></h4>
<p>İsteğe bağlı bölüm etiketi <head>tek bir etikettir <meta>... Arama motorları, HTML belgesinin yazarı ve diğer meta veri özellikleri için sayfa içeriğinin ve anahtar sözcüklerin bir tanımını ayarlamak için kullanılabilir. eleman <head>birden fazla öğe içerebilir <meta>çünkü kullanılan özniteliklere bağlı olarak farklı bilgiler taşırlar.</p><p>
<meta name="description" content="Sayfa içeriğinin açıklaması">
<meta name="keywords" content="Virgülle ayrılmış anahtar kelimeler">
</p><p>Sayfa içeriğinin ve anahtar kelimelerin açıklaması aynı anda birkaç dilde, örneğin Rusça ve İngilizce olarak belirtilebilir:</p><p>
<meta name="description" lang="ru" content="Sayfa içeriğinin açıklaması">
<meta name="description" lang="en" content="Açıklama">
<meta name="keywords" lang="ru" content="Virgülle ayrılmış anahtar kelimeler">
<meta name="keywords" lang="en" content="anahtar kelimeler">
</p><p>etiketi kullanma <meta>bir web sayfasının arama motorları tarafından indekslenmesini yasaklayabilir veya buna izin verebilirsiniz:</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>Belirli bir süre sonra sayfayı otomatik olarak yeniden yüklemek için yenileme değerini kullanmanız gerekir:</p><p>
<meta content="30">
</p><p>Sayfa 30 saniye içinde yeniden yüklenecektir. Bir ziyaretçiyi başka bir sayfaya göndermek için url parametresinde URL'yi belirtmeniz gerekir:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3">Tablo 2. Etiketin özellikleri <meta>
<tbody><tr><th style="width: 20%;">Bağlanmak</th>
<th></th>
</tr><tr><td>karakter seti</td>
<td>Geçerli HTML belgesi için karakter kodlamasını belirtir: <meta charset="UTF-8">
</td>
</tr><tr><td>içerik</td>
<td>Değerlerine bağlı olarak http-equiv veya name özniteliğiyle ilişkili değeri tanımlayan serbest metin içerir.</td>
</tr><tr><td>http-eşdeğer</td>
<td>Belirli bir web sayfasındaki tarayıcı eylemlerini kontrol eder (HTTP başlıklarına eşdeğer). Sayfayı oluştururken, tarayıcı öznitelikte verilen talimatları izleyecektir: <br>default-style, sayfada kullanım için tercih edilen stili belirtir. içerik özelliği, öğenin kimliğini içermelidir <link>bu, bir CSS stil sayfasına veya öğe kimliğine atıfta bulunur<style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
eleman kullanma
Tablo 4. Etiket Nitelikleri Bağlanmak
Açıklama, kabul edilen değer
çapraz kökenli
Bir siteden görüntü alınırken CORS'un (bir web sayfasının farklı bir etki alanındaki kaynaklara erişmesine izin veren bir tarayıcı teknolojisi) kullanılıp kullanılmayacağını belirtir.
href
Etiketin ana özelliği olan değer, stillere sahip dosyanın yoludur.
hreflang
Başvurulan belgedeki metnin dilini belirler.
medya
Bağlantı kaynağının uygulanması gereken cihazın türünü belirtir.
nonce
İçeriği korumak için satır içi stilleri kullanma kurallarını belirten, sunucuda rastgele oluşturulmuş bir dize değişkeni. Nitelik değeri bir metin dizisidir.
rel
Nitelik, geçerli belge ile başvurulan belge arasındaki ilişkiyi tanımlar.
boyutlar
Görsel gösterim için simgelerin boyutunu belirtir. Size niteliği yalnızca rel = "icon" ile bağlantılı olarak kullanılır ve aşağıdaki değerleri alabilir:
Başlık
Bağlantının başlığını veya bir dizi alternatif stil sayfasının adını belirtir. Nitelik değeri metindir.
tip
Başvurulan belgenin MIME türünü belirtir. Bu durumda "text / css" değerini alır.
1.2.5. eleman
