HTML Nedir?

İÇİNDEKİLER

HTML nedir?

HTML (HyperText Markup Language), web sayfalarının yapısını ve içeriğini tanımlamak için kullanılan bir işaretleme dilidir. HTML, web tarayıcıları tarafından okunup yorumlanarak kullanıcılara metin, resim, bağlantılar, formlar ve diğer medya öğeleri gibi içeriklerin görüntülenmesini sağlar.

HTML, metin belgesine çeşitli etiketler (tags) ekleyerek belirli görevlerin yerine getirilmesini sağlar. Her etiket, belirli bir işlevi temsil eder ve tarayıcının bu işlevi anlamasına yardımcı olur. Örneğin, bir başlık etiketi (metinleri başlık olarak biçimlendirir, bir bağlantı etiketi () bir bağlantı oluşturur, ve bir resim etiketi () resimleri gösterir.)

Temel bileşenler

HTML, belirli bir düzen ve hiyerarşi içinde yapılandırılır. Tipik olarak, bir HTML belgesi aşağıdaki temel bileşenleri içerir:

  1. : HTML5 belgesi olduğunu belirten deklarasyon.
  2. : HTML belgesinin başlangıcı ve sonu belirler.
  3. : Sayfanın başlık, meta bilgileri, stil bilgileri ve diğer başlık bilgilerini içerir.
  4. : Sayfanın başlığını belirler.
  5. : Sayfa içeriğini ve görüntülenecek metinleri, resimleri ve diğer öğeleri içerir.

HTML, metin düzenlemekten, resimleri görüntülemekten, bağlantılar oluşturmaktan ve formlar oluşturmaktan, daha karmaşık görevlere, özelleştirilmiş stillemeye ve JavaScript ile etkileşimli web uygulamaları oluşturmaya kadar birçok işlemi gerçekleştirmek için kullanılır. Web geliştirme için temel bir yapı taşıdır ve her web geliştiricisinin bilmesi gereken bir dil olarak kabul edilir.

html1_w515.jpg

İşaretleme dili olan Html, web sayfalarının hazırlanmasında kullanılan sistemdir. Bir programlama dili olmayan Html bilgisayarlarımızda kullandığımız web sitelerinin oluşturulmasında kullanılır. Chrome, Fİrefox ve İnternet Explorer gibi tarayıcılar html kodlarını işleyerek bu kodları web sayfasına dönüştürür.

HTML neler sunuyor?

HTML (HyperText Markup Language), web sayfalarının yapısını tanımlamak ve içeriği düzenlemek için kullanılan bir işaretleme dilidir. HTML'nin temel amaçları şunlardır:

  1. Web Sayfası Yapısını Tanımlama: HTML, bir web sayfasının temel yapısını tanımlar. Sayfa başlığı, başlık, paragrafler, listeler, resimler, bağlantılar, formlar ve diğer öğeler gibi temel bileşenleri belirler.

  2. Metin Biçimlendirme: HTML, metinleri farklı boyutlarda başlıklar halinde düzenlemek, kalın veya italik yazmak, listeler oluşturmak ve paragraf düzenlemek gibi metin biçimlendirme görevlerini yerine getirir.

  3. Medya ve İçerik Gösterme: HTML, resimlerin, videoların ve diğer medya öğelerinin sayfada nasıl görüntüleneceğini belirler. Bu, web sayfalarının zengin ve çekici içeriklerle dolu olmasını sağlar.

  4. Bağlantılar Oluşturma: HTML, bağlantılar (linkler) oluşturarak sayfaların birbirine veya farklı web sitelerine bağlanmasını sağlar. Kullanıcıları farklı sayfalar arasında gezinmeye olanak tanır.

  5. Formlar ve Veri Toplama: HTML formları oluşturmak için kullanılır. Kullanıcıların veri girişi yapmasını ve bu veriyi web sunucusuna iletmelerini sağlar. Örneğin, iletişim formları, kullanıcı kayıt formları ve arama formları gibi işlevler için kullanılır.

  6. Web Sayfasının Yapısal ve Semantik Anlamını İfade Etme: HTML, metin ve içerikleri sayfa üzerinde mantıklı bir yapı içinde düzenler. Bu, arama motorları ve diğer otomatik işleme araçlarının sayfaların içeriğini daha iyi anlamasına yardımcı olur ve SEO (Arama Motoru Optimizasyonu) için önemlidir.

HTML, web sayfalarının temel taşıdır ve web geliştirmenin en temel becerilerinden biridir. Ayrıca, CSS (Cascading Style Sheets) ve JavaScript gibi diğer web teknolojileri ile bir araya gelerek interaktif ve çekici web siteleri ve uygulamaları oluşturmanın temelini oluşturur.

HTML yazarken dikkat edilmesi gerekenler

  1. Geçerli Bir Yapı Kullanın: HTML belgenizin başında belirtmeyi unutmayın. Doğru bir doküman türü deklarasyonu, tarayıcının belgenizi doğru bir şekilde yorumlamasını sağlar.

  2. Doğru ve İlgili Başlıklar Kullanın: Sayfanızın başlığı (

    ) sayfanın içeriğini özetlemelidir. Başlıklar (h1, h2, h3, vb.) sayfanın hiyerarşisini ve içeriğini mantıklı bir şekilde düzenlemelidir.
  3. Dil Attribütünü Belirtin: Sayfanızın dilini doğru bir şekilde belirtmek için

    etiketi içinde lang özelliğini kullanın. Bu, sayfanızın dil analizi ve çeviri işlemlerinde önemlidir.
  4. Semantik Etiketleri Kullanın: HTML5 ile birlikte gelen semantik etiketler (örneğin,

    (header), (nav), (footer), (article), (section) ) sayfanızın yapısını daha açık ve anlamlı hale getirir. Bu, hem tarayıcılar hem de arama motorları için faydalıdır. (/a) (/section) (/article) (/footer) (/nav) (/header)
  5. CSS ve JavaScript Ayrımı: HTML belgenizi stil (CSS) ve davranış (JavaScript) ile ayrıştırın. CSS stil sayfanızı düzenlerken, JavaScript ise sayfanızın davranışlarını kontrol eder. Bu, kodun daha düzenli ve bakımı daha kolay hale gelmesini sağlar.

  6. Görüntüler ve Medya: Resimler ve diğer medya öğeleri için alt metinleri eklemeyi unutmayın. Bu, erişilebilirlik için önemlidir ve görseller yüklenmediğinde veya ekran okuyucuları tarafından okunduğunda metin açıklamaları sunar.

  7. Bağlantılar İçin İyi Pratikler: Bağlantılar için açılabilir yeni pencere (target="_blank") kullanırken kullanıcılarına bu durumu belirten bir gösterge (örneğin, ikon veya metin açıklaması) eklemeyi düşünün.

  8. Formlar ve Veri Girişi: Formlar oluştururken, her giriş alanı için etiketler (label) kullanın ve giriş hataları için uygun geri bildirimleri sağlayın. Ayrıca, sunucuya gönderilen verileri güvenli hale getirmek için güvenlik önlemleri alın.

  9. Doğrulama: HTML belgenizin geçerli olup olmadığını kontrol etmek için doğrulama araçları (örneğin, W3C Markup Validation Service) kullanın.

  10. Tarayıcı Uyumluluğu: HTML, farklı web tarayıcıları arasında tutarlı bir şekilde görüntülenmeli ve çalışmalıdır. Bu nedenle, farklı tarayıcıları test etmeyi ve uyumluluk sorunlarını çözmeyi unutmayın.

HTML yazarken bu temel ilkelere dikkat etmek, hem sayfanızın görünürlüğünü artırır hem de daha iyi bir kullanıcı deneyimi sağlar. Erişilebilirlik, SEO ve genel kullanıcı memnuniyeti için önemlidir.

grumpy-cat-small.png

En çok kullanılan HTML etiketleri

HTML etiketleri oldukça fazla ve her biri farklı işlevlere sahiptir. Aşağıda, HTML5 de sıkça kullanılan bazı temel HTML etiketlerinin sıralı bir listesini bulabilirsiniz. Ancak, HTML5 nin daha fazla etiketi vardır ve her biri farklı amaçlar için kullanılır.

  1. : HTML belgesinin türünü belirtir.
  2. : HTML belgesinin başlangıcı ve sonunu belirler.
  3. : Sayfanın başlık, meta bilgileri, stil bilgileri ve diğer başlık bilgilerini içerir.
  4. : Sayfanın başlığını belirler.
  5. : Sayfa için karakter seti, dil, anahtar kelimeler ve açıklamalar gibi meta bilgilerini içerir.
  6. : Sayfa ile ilişkili stil (CSS) dosyalarını veya diğer kaynakları ekler.
  7. : Sayfa üzerindeki stil (CSS) kurallarını içerir.
  8. : JavaScript veya diğer betikleri sayfada çalıştırmak için kullanılır.
  9. : Sayfa içeriğini ve görüntülenecek metinleri, resimleri ve diğer öğeleri içerir.
  10. : Başlık etiketleri; sayfa başlıklarını ve başlık hiyerarşisini belirler. (h1) en yüksek seviyede başlığı temsil eder.
  11. : Paragraf etiketi; metin paragraflarını oluşturur.
  12. : Bağlantı etiketi; diğer sayfalara veya kaynaklara bağlantılar oluşturur.
  13. : Resim etiketi; resimleri sayfada gösterir.
  14. : Liste etiketleri; sırasız (ul) veya sıralı (ol) listeleri oluşturur ve her maddeyi (li) belirtir.
  15. : Tablo etiketleri; tabloları oluşturur, satırları (tr), başlıkları (th) ve hücreleri (td) belirtir.
  16. : Form etiketleri; kullanıcıdan veri girişi almak ve göndermek için kullanılır.
  17. : Blok düzeyinde bir konteyner oluşturur ve sayfa yapısını düzenlemek için kullanılır.
  18. : Satır düzeyinde bir konteyner oluşturur ve metin içeriğini stillemek veya işlemek için kullanılır.

Bu sadece birkaç temel HTML etiketini içerir. HTML, daha fazla etiket içerir ve her biri belgenizin yapısını, görünümünü ve davranışını şekillendirmenize yardımcı olur. Hangi etiketlerin kullanılacağı, belgenizin gereksinimlerine ve amacına bağlıdır.

HTML ve CSS

HTML, web sayfalarının yapısını ve içeriğini tanımlamak için kullanılan bir işaretleme dilidir. Temel amacı, web sayfalarının içeriğini düzenlemek ve tarayıcılara sayfayı nasıl göstermeleri gerektiğini iletmektir.

HTML ve CSS, birlikte çalışarak web sayfalarının yapısını ve stilini belirler. HTML içeriği tanımlarken, CSS ise bu içeriği nasıl gösterileceğini düzenler. Bu, web geliştiricilerinin web sitelerini tasarlamak ve oluşturmak için kullandıkları temel araçlardan sadece ikisi.

CSS, HTML belgelerinin görünümünü ve stili düzenlemek için kullanılan bir stil dilidir. HTML belgesi içeriğini tanımlar, ancak CSS, bu içeriğin renkleri, yazı tipleri, boyutları, düzeni ve diğer görsel özellikleri gibi stilini belirler. İşte CSS'nin temel özellikleri:

  1. Stil Kuralları: CSS, belirli HTML öğelerine veya sınıflarına stil kuralları uygulayan bir dilidir. Örneğin, bir

    etiketinin metnini kırmızı yapmak için bir CSS stil kuralı oluşturabilirsiniz.

  2. İç İçe Geçmiş Stillemeler: CSS kuralları iç içe geçebilir. Yani, bir öğenin stilini diğer bir öğe üzerinde tanımlayabilirsiniz. Bu, stil kurallarının özelleştirilmesini sağlar.

  3. Sınıf ve Kimlik Seçiciler: Sınıf (.class) ve kimlik (#id) seçicileri, belirli öğelere stil uygulamak için kullanılır. Sınıflar birden çok öğeye stil uygulamanızı sağlar.

  4. Harici ve Dahili CSS: CSS kuralları harici bir stil dosyasında (.css uzantılı) veya HTML belgesinin içinde dahili olarak tanımlanabilir.

  5. CSS Özellikleri: CSS, metin rengi, yazı tipi, arka plan rengi, yükseklik, genişlik, kenar boşluğu ve daha birçok özelliği kontrol etmek için kullanılır.

HTML5 ve yenilikler

  • HTML5, web geliştiricilerine yeni özellikler ve semantik etiketler sunarak web sayfalarının daha iyi yapılandırılmasını ve zenginleştirilmesini sağlamıştır. İşte HTML5'in getirdiği bazı önemli yeni özellikler ve semantik etiketler:

    Yeni Özellikler:

  • Video ve Ses Desteği: HTML5, entegre video ve ses çalma özellikleri sunar. (video) ve (audio) etiketleri sayesinde ses ve video içeriği tarayıcıda doğrudan oynatılabilir hale gelir.

  • Canvas: (canvas) etiketi, JavaScript ile birlikte kullanılarak çizim ve grafiklerin oluşturulmasına olanak tanır. Bu, oyunlar, grafikler ve veri görselleştirmesi için kullanışlıdır.

  • SVG (Scalable Vector Graphics) Desteği: HTML5, vektör tabanlı grafiklerin (svg) eklenmesini destekler. SVG, ölçeklenebilir ve yüksek çözünürlüklü grafikler oluşturmak için kullanılır.

  • Form Geliştirmeleri: HTML5, form öğeleri için yeni özellikler ekler. Bunlar arasında tarih seçiciler, renk seçicileri, doğrulama özellikleri ve yerel depolama seçenekleri bulunur.

  • Yerel Depolama: Web Storage ve IndexedDB gibi yerel depolama seçenekleri sayesinde web uygulamaları kullanıcının cihazında veri saklayabilir.

  • Web Workers: HTML5, web uygulamalarının arka planda paralel işlemler yürütmesini sağlayan Web Workers özelliğini sunar. Bu, sayfanın etkileşiliğini artırabilir.

  • Drag and Drop: HTML5, nesneleri sürükle ve bırak işlemlerini kolaylaştırmak için sürükle ve bırak etiketlerini ekler.

  • Geolokasyon: HTML5, kullanıcıların konumunu belirlemek için yerleşik bir API sunar. Bu, konuma dayalı hizmetlerin geliştirilmesini sağlar.

  • Semantik Etiketler:

    HTML5, semantik etiketlerin kullanımını teşvik eder. Bu etiketler, belgenin yapısını ve içeriğini daha açık ve anlamlı hale getirir. İşte bazı semantik etiketler:

  • (header): Sayfa başlığı, logo, ana navigasyon vb. gibi sayfanın başlık bölümünü tanımlar.

  • (nav): Sayfanın gezinme menüsünü tanımlar.

  • (main): Sayfa içeriğinin ana kısmını tanımlar.

  • (article): Bağımsız bir içerik parçasını temsil eder, örneğin bir makale.

  • (section): Belge içeriğini bölümlere ayırır, özellikle anlamsal bir bölünme olduğunda kullanılır.

  • (aside): Sayfa içeriği ile ilgili ek bilgiler veya yan notları içerir.

  • (footer): Sayfanın alt kısmını tanımlar ve genellikle iletişim bilgileri veya telif hakkı bilgileri içerir.

  • HTML5, web sayfalarının daha iyi anlaşılmasını ve tarayıcılar ile arama motorlarının içeriği daha iyi yorumlamasını sağlar. Ayrıca, daha iyi erişilebilirlik, SEO ve genel kullanıcı deneyimi sunar. Web geliştiricileri, HTML5'in sunduğu bu özellikleri kullanarak daha güçlü ve zengin web uygulamaları oluşturabilirler.


Tuğba Ayvaz
Tuğba Ayvaz
×
Mobil Sürümünü görüntüle
loader yükleniyor...