Bir web sayfasının bölümü.
Html ile ilgili ilk yazımda, bana göre bir sayfa düzeni tasarımcısının bilmesi gereken etiketlerin bir listesini vermiştim. Geriye kalan etiketler aslında bence gereksiz, hatta gereksiz. Bu yazımda bunlardan bahsetmek istiyorum HTML'nin temelleri ve html, head, title, body etiketlerinin yanı sıra div ve span etiketleri hakkında. Bana göre bu etiketler html öğrenmeye başlamak için iyi bir temel oluşturuyor.
Ne yazık ki modern tarayıcılar web geliştiricilerine çok sadıktır. Kendilerine sunulan her şeyi yorumlamaya çalışırlar. Kapatılmayan etiketler, farklı kayıtlardaki etiketler, net olmayan etiketler, olmaması gereken yere yerleştirilen etiketler vb. Mesela başlık kabının gövdenin içinde yer aldığı, hatta başlık etiketinin başlık kabının dışında olduğu bir siteyi bizzat gördüm. Aynı zamanda site dışarıdan normal görünüyordu!
Gerçekten bir gün standartların daha katı hale geleceğini ve yanlış düzenlenmiş sayfaların doğru şekilde görüntülenmeyeceğini umuyorum. Doğru, bu, tüm tarayıcıların html ve CSS'yi aynı şekilde işlemesini gerektirir... Neyse, kendimi kaptırdım.
Bu gibi durumlarda her zaman olduğu gibi öncelikle ders planının ana hatlarını çiziyoruz:
- Genel kurallar
- Belge yapısı
Genel kurallar
Başlangıç olarak html'nin oldukça sadık bir dil olduğunu söylemekte fayda var. Var HTML sürümü standardı sıkılaştırılmıştır - xhtml. Bu standardı korumaya çalışıyorum. Özellikle bu standart, tüm etiketlerin yazıldığını varsayar. küçük harf ve kapalı. Bekar olanlar bile. Aşağıda nasıl gösterilecektir. Tüm nitelikler küçük harflerle yazılmıştır ve değerleri içine alınmıştır. ikili alıntı ve değerlerinin ölçüldüğü miktarın bir tanımına sahiptir. Bu kurallara uyacağız.
Standartlar bazı unsurların belirli bir düzenlemesini sağlar. Bir yerde bulunması gereken bir öğenin farklı bir yerde bulunması hata olarak kabul edilir. Genel olarak böyle bir belgenin işlenmemesi veya hatalı işlenmesi gerekir. Ancak tarayıcılar dikkatsiz geliştiricileri korur. Daha doğrusu, dikkatsiz geliştiriciler tarafından geliştirilen siteleri görüntüleyen kullanıcıları.
Şimdi etiketler hakkında. Etiketler eşleştirilmiş veya tekli olabilir. Eşleştirilmiş etiketler ayrıca blok ve satır içi etiketlere ayrılır. Bir çift etikete bazen kap adı verilir.
Tahmin edebileceğiniz gibi eşleştirilmiş etiketlerin bir çifti vardır ve tekli etiketler tek başınadır. Bir açılış ve kapanış etiketinden bir etiket çifti oluşturulur. Tekli etiketler hem açılış hem de kapanış etiketleridir.
Örnek kapsayıcı (eşleştirilmiş etiketler):
konteyner içeriği
Tek etiket örneği
tek satırlık metin
bu metin zaten başka bir satırda
Konteyner örneğinde yapı kullanıldıBu bir yorumdur. İki ok içine alınan her şey tarayıcı tarafından analiz edilmez ve ekranda görüntülenmez. Bu yorumlar bazen düzende kafa karıştırıcı noktalar olduğunda veya koddaki düzenin mantıksal bölümlerini ayırmak için çok kullanışlıdır.
Blok ve satır içi etiketler
Blok ve satır içi etiketler arasındaki fark, blok öğesinin ekranın tüm genişliğini doldurma eğiliminde olmasıdır. (genişliği açıkça belirtilmediği sürece) ve satır içi tam olarak içeriği kadar yer kaplar. Ek olarak, bir blok öğesini takip eden her şey yeni bir satırda görünecek ve bir satır içi öğeyi takip eden her şey doğrudan onun arkasında görünecektir. Div kapsayıcısı varsayılan olarak blok düzeyindedir ve span etiketi satır içidir. (ancak bu davranışı değiştirmek kolaydır CSS yardımı). Bu etiketlerin davranışını örnekleyelim.
Metin 1. Bu metin sayfanın tüm genişliğini kaplar.
Bu metin zaten ilk metnin ALTINDA yer alıyor ve aynı zamanda tüm sayfayı kaplıyor
Baştan sona. Ancak kırmızı metin, bir mahkum
span etiketinde, kendisinden sonraki metni yeni bir satıra kaydırmaz ve yer kaplar.
tam olarak gerektiği kadar alan.
Etiketler hiyerarşiyi koruyarak mantıksal olarak birbiri ardına takip edilmelidir. Bir etiketi diğerinin içine eklerken kapanış etiketlerinin sırasına uyulduğundan emin olmanız gerekir.
Yanlış:
metin
Sağ:
metin
Bahsetmek istediğim bir şey daha var: Etiketlerin nitelikleri olabilir. Bir nitelik, belirli bir davranışı belirtir veya bir etiketi bir şekilde tamamlar. Özellik, adından bir boşlukla ayrılarak doğrudan etiketin içine şu biçimde yazılır: ATTRIBUTE_NAME="VALUE[measure]". ATTRIBUT_NAME ve VALUE, sanırım ne oldukları açık. Ölçü, ölçü birimlerinin gösterimidir. Ölçü birimi yoksa icat etmeye gerek yoktur.
Bir öznitelik kullanma örneği
Burada konteyner div'in yükseklik özelliğini ayarlıyoruz (aslında bu CSS kullanılarak daha iyi yapılır, ancak bu durumda, bunu neye benzeyebileceğini göstermek için yazdım). Nitelikler yalnızca açılış etiketlerinde atanabilir. Boşluk sayısı önemli değil. Etiket adı ile nitelik arasına, nitelik adı ile eşittir işareti arasına ve eşittir işareti ile tırnak işareti arasına boşluk koyabilirsiniz. Tırnak işaretleri içine boşluk koyabilirsiniz ancak miktar ile ölçü birimleri arasına boşluk koyamazsınız! Tırnak işaretleri çift olmak zorunda değildir; "tek tırnak" kullanabilirsiniz, ancak yalnızca çiftler halinde. "Tırnak işaretleri" seçeneği çalışmaz. Bu durumda, tek tırnak ve takip eden her şey, özelliğin değerinin bir parçası olarak yorumlanacaktır.
Sanırım temelde söylemek istediğim tek şey buydu. O halde hadi konuya geçelim!
Belge yapısı
Aşağıda açıklanacak olan şey tam olarak zorunlu uyumluluk kategorisine girmektedir. Dolayısıyla eğer “bu şekilde görüntüleniyorsa” bunun normal olduğunu düşünmemelisiniz. Bu normal değil.
Her belge etiketler içine alınmalıdır Gördüğünüz gibi bu etiketler eşleştirilmiştir. Bu yüzden belgenin başında böyle bir etiket açıp sonunda kapatmayı unutmayın. Teorik olarak kapanış etiketinden sonra gelen her şey artık tarayıcı tarafından ayrıştırılmamalıdır. Ancak analiz edilir ve hatta görüntülenir. Ama bunu kullanmanızı tavsiye etmiyorum. Dikkate değer olan şey, açılış etiketinden önce başka içerikler de eklenebilir. Ama bu yazımda bundan bahsetmeyeceğim. İsteyen herkes DOCTYPE'a bakabilir.
Belgenin diğer tüm içeriği html kapsayıcısında bulunmalıdır. Belge iki bölüme ayrılmıştır. Birinin kontrol fonksiyonu var ve Ek Bilgiler tarayıcı için. Diğeri ise kullanıcıya yönelik bilgilerdir. Kontrol kısmına denir
ve içerik -
. Üstelik kafa kabı her zaman gövdeden önce gelmelidir. İki kap birbirini içermemelidir.
Her belgenin bir başlığı olmalıdır. Belgenin başlığı sayfanın çok önemli bir unsurudur. Tarayıcı penceresinin başlığında görüntülenir; arama motorları buna büyük önem verir. Sayfa başlığı bir kapsayıcı kullanılarak ayarlanabilir
Sayfa başlığı. Bu konteyner bir konteynerin içine yerleştirilmelidir . Başlığın (satırlar halinde) ne kadar yüksek olursa, sayfanın arama motorları tarafından o kadar iyi dizine eklendiğini ekleyeceğim.
Böylece, en basit html belgesi şuna benzer:
Belgenin adı
İşte belgenin gövdesi
Bu metni not defterine (veya benzeri bir yere) kopyalayabilirsiniz. Metin düzeltici), bu dosyayı .html uzantısıyla kaydedin ve tarayıcı pencerenize sürükleyin. Başlık kapsayıcısındaki metnin sayfa başlığında, gövdedeki metnin ise kullanıcı kısmında görüntülendiğini göreceksiniz.
Ana belge etiketlerine bakmayı bitirip içerik sunum etiketlerine geçelim.
İçeriğin mantıksal olarak ayrılması için etiketler
Başlangıç olarak aşağıda bahsedeceğim etiketlerin yalnızca body etiketinde bulunabileceğini söyleyeceğim.
Bu kapsayıcı, metnin bir kısmını sayfa içeriğinin geri kalanından ayrılmış mantıksal bir blokta birleştirmek için tasarlanmıştır. En basit belgemizin metnini alıp belgenin gövdesindeki metni bu kapsayıcıya eklerseniz, o zaman hayır dış değişiklikler fark etmeyeceksin. Ancak hâlâ varlar. Div kapsayıcısının içine alınmış metin için bir tane ayarlayabilirsiniz. şekillendirme. Bu blok belirli bir genişliğe ayarlanabilir, farklı bir yazı tipine ayarlanabilir, sağa hizalanabilir veya başka herhangi bir şey yapılabilir. İşte div etiketinin kullanımına bir örnek: (Kısacası, belgenin tüm metnini göstermeyeceğim. Ancak çalıştığını görmek için aşağıdaki yapıyı gövde kapsayıcısına eklemeniz gerektiğini unutmamalısınız):
Sayfanın sağ tarafında görünmesini ve sayfadaki ana metinden biraz farklı biçimlendirilmesini istediğim küçük bir metin.
Sayfanın ana metni. Muhtemelen uzun sürmez çünkü bu sadece bir test.
Alışılmadık üslup özelliğinden ve içindeki anlaşılmaz kelimelerden (gerçekten bu kadar anlaşılmaz mı?) korkmayın. Bu öznitelikle birlikte div kapsayıcısını göstermek daha iyiydi. Çoğu zaman, doğru düzende, etiketi CSS ile ilişkilendirmeye veya JavaScript için tanımlamaya hizmet eden kapsayıcılar için id ve class nitelikleri kullanılır. Ama bu bizi aşar ;)
Div kabı bir blok elemanıdır. Ancak bu davranışı değiştirmek kolaydır.
Yayılma kapsayıcısı metnin bir bölümünü vurgulamak için tasarlanmıştır. Kullanımı aynıdır, ancak etikete özel özellikler verildikten sonra fark edilir. Çoğu zaman istenen etki CSS kullanılarak elde edilir. Basit uygulama örneği yayılma etiketi Blok düzeyindeki ve satır içi öğeler arasındaki farkı öğrendiğimizde gördük, bu yüzden üzerinde durmayacağız.
Sonuç olarak
Bu yazıda tanıştık Genel kurallar html, bir html belgesinin minimal yapısı, eşleştirilmiş ve eşlenmemiş etiketler ve blok ve satır içi kapsayıcılar hakkında bilgi aldı. Konteynerler arasındaki farkı gördük farklı şekiller ve ayrıca mantıksal bilgilerle tanıştım div kapları ve açıklık.
Bu mini kursu beğendiyseniz veya sorularınız veya önerileriniz varsa, bir konuda tartışmak istiyorsanız, geri bildirimlerinizi yorumlarda veya posta yoluyla duymaktan memnuniyet duyarım.
Satır içi öğeler, bir web sayfasının başka bir öğenin, örneğin bir metin paragrafının doğrudan parçası olan öğeleridir. Esas olarak metnin görünümünü değiştirmek veya mantıksal olarak vurgulamak için kullanılırlar.
Etiket biridir önemli unsurlar HTML ve bağlantılar oluşturmak için tasarlanmıştır. Varlığına bağlı olarak ad özellikleri veya href etiketi bir bağlantı veya çapa ayarlar.
Yazı tipinin kalınlığını tanımlar.
Etiket normal metne kıyasla yazı tipi boyutunu bir artırır. HTML'de yazı tipi boyutu 1'den 7'ye kadar isteğe bağlı birimlerle ölçülür, ortalama varsayılan metin boyutu 3'tür. Böylece bir etiket eklenir metni bir geleneksel birim artırır.
Etiket
bu etiketin bulunduğu konuma yeni bir satır belirler. Paragraf etiketinin aksine
Etiket kullanma
satırın önüne boş girinti eklemez.
Etiket metni vurgulamayı amaçlamaktadır. Tarayıcılar bu metni italik olarak görüntüler.
Yüklemeler italik stil yazı tipi.
![]()
Etiket ![]()
Bir web sayfasındaki görüntüleri grafik biçiminde görüntülemek için tasarlanmıştır GIF formatı, JPEG veya PNG. Gerekirse etiket yerleştirilerek çizim başka bir dosyaya bağlantı yapılabilir. ![]()
bir konteynere . Bu durumda, görselin çevresinde, etikete border="0" niteliği eklenerek kaldırılabilen bir çerçeve görüntülenir. ![]()
.
Etiket Normal metne kıyasla yazı tipi boyutunu bir oranında azaltır. Eylemi bir etikete benzer , ancak tam tersi şekilde çalışır.
Bir belgedeki satır içi öğeyi tanımlamak için tasarlanmış evrensel bir etiket.
Etiket metni vurgulamayı amaçlamaktadır. Tarayıcılar bu metni kalın harflerle görüntüler.
Yazı tipini alt simge olarak görüntüler. Metin, satırın kalan karakterlerinin taban çizgisinin altında ve küçültülmüş boyutta - H 2 O bulunur.
Yazı tipini üst simge olarak görüntüler. Eylemi şuna benzer: ancak metin, metin taban çizgisinin (m2) üzerinde görüntülenir.
Blok ve satır içi elemanlar arasındaki fark aşağıdaki gibidir.
- Satır içi öğeler yalnızca verileri veya diğer satır içi öğeleri içerebilirken, blok öğeleri diğer blok öğelerini, satır içi öğeleri ve verileri içerebilir. Yani satır içi elemanlar hiçbir şekilde blok elemanlarını depolayamaz.
- Blok öğeler her zaman yeni bir satırda başlar ve satır içi öğeler bu şekilde vurgulanmaz.
- Blok öğeleri, tarayıcı penceresi gibi mevcut genişliğin tamamını kaplar ve genişlik satır içi öğeler içerikleri artı dolgu, kenar boşluğu ve kenarlık değerlerine eşittir.
