DIV ve SPAN Arasındaki Fark

ve HTML kodundaki öğeleri tanımlayan HTML etiketleridir.

HTML (Köprü Metni Biçimlendirme Dili), çevrimiçi olarak ziyaret ettiğimiz web sayfalarını her gün, herhangi bir cihazda oluşturmak ve görüntülemek için kullanılan yapılandırılmış bir koddur.

Bir web sitesinde dinamik ve gelişmiş özellikler sağlamak için diğer teknolojiler ve programlama dilleri HTML ile entegre edilebilir.

HTML'yi anlama

Köprü Metni Biçimlendirme Dili (HTML) yaygın olarak kullanılan bir biçimlendirme dilidir ve web tarayıcısında görüntülenen bir web sayfasının 'arkasındaki' yapı ve kodu ifade eder.

HTML, bir sayfanın stilini, içeriğini, düzenini ve biçimini tanımlamak için belirli bir kod (sözdizimi) kullanan bir metin dosyasıdır. Biçimlendirme terimi, metnin / kodun işleme ve sunum için hazırlandığını, yani bir web sayfasında, bir web tarayıcısında olduğunu belirtir.

World Wide Web Konsorsiyumu (W3C) [i], HTML'yi web sayfası geliştirmede resmi bir biçimlendirme dili olarak tanır ve bu nedenle HTML çoğu tarayıcı tarafından desteklenir. Böylece, web sayfaları tanınmış bir dilde geliştirilebilir, sayfayı farklı tarayıcılar tarafından kolayca yorumlanabilir ve bu da tasarımcı tarafından tasarlandığı gibi.

Halen kullanılmakta olan sürüm HTML4'tür, ancak HTML5 dinamik ve duyarlı web sayfaları için daha fazla destek ve benimsemeden yavaş yavaş aşamalı olarak kaldırılmaktadır..

Duyarlılık, akıllı telefonlar, tabletler ve dizüstü bilgisayarlar gibi birden fazla cihazda barındırılması gereken daha kolay ve daha dinamik bir kullanıcı deneyimi sağlamak için web geliştirmede temel bir bileşen haline geliyor.

Basamaklı Stil Sayfaları (CSS) dinamik ve duyarlı sayfalar oluşturmanın ayrılmaz bir parçası haline geliyor. Yazı tipi, renk, hizalama gibi her öğe için öznitelikleri tanımlayan ayrı bir dosyadır - bu nedenle geliştiricinin HTML kodunda her kullanıldığında öğenin stilini belirtmesi gerekmez.

HTML'nin Temel Yapısı

Herhangi bir geliştirme dilinden en iyi şekilde yararlanmak için, standart dosya yapısına bağlı kalmak ve en iyi sözdizimi kullanımını göz önünde bulundurmak, kararlı, amaçlı ve görsel olarak çekici web içeriği sunmanın anahtarıdır.

Bir HTML sayfasının öğeler tarafından tanımlanan bir yapısı vardır (etiket olarak da adlandırılır). HTML kodunu yazarken, bu öğeler çiftler halinde gösterilir - yani, her etiketin açılması ve kapanması gerekir. Bir başlangıç ​​ve bir son.

Sözdizimi ile bir öğe açılır: ve ile kapatıldı.  / eğik çizgi o öğenin tanımının sonunu gösterir.

Öğe özellikleri ve içeriği bu iki nokta arasında tanımlanır.

minimum elemanlar HTML dosyası için gereken tanım,, (yalnızca HTML4) ve etiketlerdir.

• DOCTYPE Tanımı

Tanım (DTD) önce bir HTML dosyasındaki ilk etiket olarak bildirilmelidir, bu nedenle sayfa işlendiğinde web tarayıcı onun ne tür bir dosya olduğunu bilir ve bu nedenle sayfayı doğru şekilde yorumlayabilir ve görüntüleyebilir.

HTML4'te, DTD'nin varyasyonları vardır (sayfa özelliklerine ve öğelerine bağlı olarak), ancak daha tipik ifadeler şu şekilde dahil edilir:

veya

HTML5'teki DTD çok daha basittir:

· HTML, KAFA ve GÖVDE

• Etiketi, bunun bir HTML dosyası olduğunu ve bu, içinde tanımlanan diğer tüm öğeleri içeren HTML öğesinin kökü olduğunu belirtir; ve en iyi uygulama olarak bir dil niteliği dahil edilmesi önerilir; Örneğin:

• HTML4'te zorunludur, ancak HTML5'te zorunlu değildir. Başlık, başvuru komut dosyaları, stilleri tanımlama ve meta veriler gibi bu belge bölümüyle ilgili diğer öğeleri içeren bir öğedir. Kapalı etiket tanımlanmadan önce kullanılmalıdır. 
• Öğe, tablolar, görüntü metni, listeler vb. Dahil olmak üzere sayfanın ana içeriğini tutar. Etiket kapatıldıktan sonra öğe artık sona erebilir. Yeni HTML5 öğesini kullanmak sayfa için veya içeriğin başka bir bölümünde isteğe bağlıdır.

HTML Öğeleri

HTML5, geliştirme ve tasarım kolaylığı için yeni öğeler üretti ve ayrıca HTML4'te kullanılan öğeleri de kaldırdı. HTML4 ve HTML5 arasındaki farkların listesi World Wide Web Konsorsiyumu (W3C) tarafından yayınlandı [ii].

HTML DIV ETİKETİ

Geliştirmeler ve yeni öğelerle birlikte, CSS ilerlemeleriyle birlikte, belirli öğeler öncekinden farklı, daha iyi şekillerde kullanılabilir ve web sayfaları daha hızlı, daha zengin özelliklere sahip ve bakmak güzeldir! HTML5 ile kullanılan CSS ile, aşırı kullanılan belirli öğelerin yerini alabilir. .

Etiket, bir sayfadaki içeriği ayırırken popülerdir. Bu öğeyi oluştururken, otomatik olarak bir kesme ekler
metni sayfa boyunca devam etmek yerine metni veya içeriği bir arada tutmak için.

Web sitesi erişilebilirliği ve arama motoru optimizasyonu ile, teknikler bir bilim haline geliyor ve WC3 tarafından her zaman HTML5'te kullanılmaya geri dönmemesi için tavsiye ediliyor.

Düzgün bir şekilde yapılandırılmış ancak basit bir blog formatına örnek olarak, yeni HTML5 öğelerini, öğeyi kullanmak yerine CSS ile ele alalım; öğeyi ana içerik için kullanın, sayfadaki herhangi bir içeriği vurgulamak veya ayırmak için öğe, üstbilgi veya altbilgi (her yerde!) ve öğe, sayfadan göz atmak için bir menü veya grup bağlantılarını tutmak için kullanılabilir.

Bu yeni öğeler HTML5 kullanarak içerik türünü kolayca tanımlar. Ancak etiket, duyarlı web siteleri oluşturmak için CSS ile de kullanılır.

Her öğeyi (kendi kimliği veya sınıfı ile) oluşturarak, CSS dosyası her öğeyi değiştirmek için tanımlanabilir.

Aşağıdaki HTML örneği, birden çok öğenin kullanımına ilişkin bir örnek göstermektedir:

Örneklerim

Öğeler, kullanılan cihazın ekran boyutuna bağlı olarak farklı özelliklere, özellikle duyarlı etkileşim için farklı boyutlara sahip olabilir.

Aşağıda, her bir etikete başvurarak her bir öğenin HTML'nin ilgili CSS dosyasında nasıl stilize edilebileceğine ilişkin bir örnek verilmiştir..

#Header

en: 800 piksel;

height: auto

kenar-sayısı: otomatik;

kenar-sayısı: otomatik;

#Özellikler

Yükseklik: 150px;

Arka plan renkli: #CCC;

HTML SPAN ETİKETİ

Öğe bir satır içi öğedir ve kesilmedikçe satırlara ayrılmaz
etiketi kullanılır ve açık ve kapalı etiketler arasındaki tanımlanmış metin (içerik) satır olarak görüntülenir (varsayılan olarak diğer öğeleri kullanmadan).

Satır içi öğeler HTML dosyasındaki metin öğeleridir ve başka bir öğenin satırı içinde tanımlanabilir.

Mesela, elementin anlamı optimum referans için. Temel olarak öğe içeriğini olduğu gibi gösterir, ancak tüm örnekler doğru etiketlendiğinde ve diğer özelliklerle zenginleştirildiyse veya JavaScript ile değiştirildiyse stil için CSS'de tanımlanabilir.

Aşağıdaki örnekte mavi metin, span öğesinin üst öğesinden farklı özniteliklere sahip satır içi öğe olarak nasıl yuvalanabileceğini vurgular - p> paragrafı:

Örneği açmak için sayfanın altındaki simgeye tıklayın.

Bir web tarayıcısında görüntülendiğinde, kullanıcının örneğe erişmek için nerede tıklaması gerektiğini vurgulamak için yukarıdaki öğedeki metin paragraftan farklı bir yazı tipinde görüntülenir..

HTML4 ve HTML5 arasında fark olmadığını unutmayın.