HTML Nedir? Özellikleri, HTML Etiketleri, HTML5 ve Yenilikler

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ınca okunup yorumlanarak kullanıcılara metin, fotoğraf, bağlantılar, formlar ve öteki medya öğeleri benzer biçimde içeriklerin görüntülenmesini sağlar.

HTML, metin belgesine çeşitli etiketler (tags) ilave ederek 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 destek sağlar. Mesela, bir başlık etiketi (metinleri başlık olarak biçimlendirir, bir bağlantı etiketi () bir bağlantı oluşturur, ve bir fotoğraf etiketi () resimleri gösterir.)

Temel bileşenler

HTML, belirli bir seviye ve sıradüzen içinde yapılandırılır. Tipik olarak, bir HTML belgesi aşağıdaki temel bileşenleri ihtiva eder:

1. : HTML5 belgesi bulunduğunu belirten deklarasyon.
2. : HTML belgesinin başlangıcı ve sonu belirler.
3. : Sayfanın başlık, meta detayları, yoldam detayları ve öteki başlık bilgilerini ihtiva eder.
4. : Sayfanın başlığını belirler.
5. : Sayfa içeriğini ve görüntülenecek metinleri, resimleri ve öteki öğeleri ihtiva eder.

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ı yapmaya 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 ihtiyaç duyulan bir dil olarak kabul edilir.

İş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 benzer biçimde 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çinde ne olduğu 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 öteki öğeler benzer biçimde temel bileşenleri belirler.

2. Metin Biçimlendirme: HTML, metinleri değişik boyutlarda başlıklar halinde düzenlemek, kalınca yada italik yazmak, listeler oluşturmak ve paragraf düzenlemek benzer biçimde metin biçimlendirme görevlerini yerine getirir.

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

4. Bağlantılar Oluşturma: HTML, bağlantılar (bağlantılar) oluşturarak sayfaların birbirine yada değişik internet sayfalarına bağlanmasını sağlar. Kullanıcıları değişik sayfalar içinde gezinmeye olanak tanır.

5. Formlar ve Veri Toplama: HTML formları oluşturmak için kullanılır. Kullananların veri girişi yapmasını ve bu veriyi web sunucusuna iletmelerini sağlar. Mesela, kontakt formları, kullanıcı kayıt formları ve arama formları benzer biçimde 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 üstünde mantıklı bir yapı içinde düzenler. Bu, arama motorları ve öteki otomatik işleme araçlarının sayfaların içeriğini daha iyi anlamasına destek sağlar 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. Ek olarak, CSS (Cascading Style Sheets) ve JavaScript benzer biçimde öteki web teknolojileri ile bir araya gelmiş olarak interaktif ve çekici internet sayfaları ve uygulamaları oluşturmanın temelini oluşturur.

HTML yazarken dikkat edilmesi gerekenler

1. Geçerli Bir Yapı Kullanın: HTML belgenizin başlangıcında belirtmeyi ihmal etmeyin. Doğru bir doküman türü deklarasyonu, tarayıcının belgenizi doğru bir halde 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 halde düzenlemelidir.

3. Dil Attribütünü Belirtin: Sayfanızın dilini doğru bir halde belirtmek için

   etiketi içinde lang hususi durumunu kullanın. Bu, sayfanızın dil analizi ve tercüme işlemlerinde önemlidir.

4. Semantik Etiketleri Kullanın: HTML5 ile beraber gelen semantik etiketler (mesela,

   (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 yoldam (CSS) ve davranış (JavaScript) ile ayrıştırın. CSS yoldam sayfanızı düzenlerken, JavaScript ise sayfanızın davranışlarını denetim eder. Bu, kodun daha tertipli ve bakımı daha kolay hale gelmesini sağlar.

6. Görüntüler ve Medya: Resimler ve öteki medya öğeleri için alt metinleri eklemeyi ihmal etmeyin. Bu, erişilebilirlik için önemlidir ve görseller yüklenmediğinde yada ekran okuyucuları tarafınca 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 (mesela, ikon yada 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. Ek olarak, 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ı denetlemek için doğrulama araçları (mesela, W3C Markup Validation Service) kullanın.

10. Tarayıcı Uyumluluğu: HTML, değişik web tarayıcıları içinde tutarlı bir halde görüntülenmeli ve çalışmalıdır. Bu yüzden, değişik tarayıcıları kontrol etmeyi ve uyumluluk sorunlarını çözmeyi ihmal etmeyin.

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.

En oldukca kullanılan HTML etiketleri

HTML etiketleri çok çok fazla ve her biri değişik işlevlere haizdir. Aşağıda, HTML5 de sıkça kullanılan bazı temel HTML etiketlerinin sıralı bir listesini bulabilirsiniz. Sadece, HTML5 nin daha çok etiketi vardır ve her biri değişik 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 detayları, yoldam detayları ve öteki başlık bilgilerini ihtiva eder.
4. : Sayfanın başlığını belirler.
5. : Sayfa için karakter seti, dil, anahtar kelimeler ve açıklamalar benzer biçimde meta bilgilerini ihtiva eder.
6. : Sayfa ile ilişkili yoldam (CSS) dosyalarını yada öteki kaynakları ekler.
7. : Sayfa üstündeki yoldam (CSS) kurallarını ihtiva eder.
8. : JavaScript yada öteki betikleri sayfada çalıştırmak için kullanılır.
9. : Sayfa içeriğini ve görüntülenecek metinleri, resimleri ve öteki öğeleri ihtiva eder.
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; öteki sayfalara yada kaynaklara bağlantılar oluşturur.
13. : Fotoğraf etiketi; resimleri sayfada gösterir.
14. : Sıralama etiketleri; sırasız (ul) yada 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. : Biçim 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 yada işlemek için kullanılır.

Bu bir tek birkaç temel HTML etiketini ihtiva eder. HTML, daha çok etiket ihtiva eder ve her biri belgenizin yapısını, görünümünü ve davranışını şekillendirmenize destek sağlar. 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 icap ettiğini iletmektir.

HTML ve CSS, beraber emek vererek web sayfalarının yapısını ve stilini belirler. HTML içinde ne olduğu tanımlarken, CSS ise bu içinde ne olduğu {nasıl} gösterileceğini düzenler. Bu, web geliştiricilerinin internet sayfalarını tasarlamak ve oluşturmak için kullandıkları temel araçlardan bir tek ikisi.

CSS, HTML belgelerinin görünümünü ve stili düzenlemek için kullanılan bir yoldam dilidir. HTML belgesi içeriğini tanımlar, sadece CSS, bu içeriğin renkleri, yazı tipleri, boyutları, düzeni ve öteki görsel özellikleri benzer biçimde stilini belirler. İşte CSS’nin temel özellikleri:

1. Yoldam Kuralları: CSS, belirli HTML öğelerine yada sınıflarına yoldam kuralları tatbik eden bir dilidir. Mesela, bir

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

2. İç İçe Geçmiş Stillemeler: CSS kuralları iç içe geçebilir. Doğrusu, bir öğenin stilini öteki bir unsur üstünde tanımlayabilirsiniz. Bu, yoldam kurallarının özelleştirilmesini sağlar.

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

4. Harici ve Dahili CSS: CSS kuralları harici bir yoldam dosyasında (.css uzantılı) yada 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 denetlemek 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 elde etmiştir. İşte HTML5’in getirmiş olduğu bazı mühim yeni özellikler ve semantik etiketler:

  Yeni Özellikler:

• Video ve Ses Desteği: HTML5, entegre video ve ses çalma özellikleri sunar. (video) ve (audio) etiketleri yardımıyla ses ve video içinde ne olduğu tarayıcıda direkt oynatılabilir hale gelir.

• Canvas: (canvas) etiketi, JavaScript ile beraber 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 destek sunar. SVG, ölçeklenebilir ve yüksek çözünürlüğünde olan grafikler oluşturmak için kullanılır.

• Biçim Geliştirmeleri: HTML5, biçim öğeleri için yeni özellikler ekler. Bunlar içinde tarih seçiciler, renk seçicileri, doğrulama özellikleri ve mahalli depolama seçenekleri bulunur.

• Mahalli Depolama: Web Storage ve IndexedDB benzer biçimde mahalli depolama seçenekleri yardımıyla 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 elde eden Web Workers hususi durumunu 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, kullananları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. benzer biçimde sayfanın başlık bölümünü tanımlar.

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

• (main): Sayfa içinde ne olduğunun ana kısmını tanımlar.

• (article): Bağımsız bir içerik parçasını temsil eder, mesela bir yazı.

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

• (aside): Sayfa içinde ne olduğu ile ilgili ek bilgiler yada yan notları ihtiva eder.

• (footer): Sayfanın alt kısmını tanımlar ve çoğu zaman kontakt detayları yada telif hakkı detayları ihtiva eder.

• HTML5, web sayfalarının daha iyi anlaşılmasını ve tarayıcılar ile arama motorlarının içinde ne olduğu daha iyi yorumlamasını sağlar. Ek olarak, daha iyi erişilebilirlik, SEO ve genel kullanıcı deneyimi sunar. Web geliştiricileri, HTML5’in sunmuş olduğu bu özellikleri kullanarak daha kuvvetli ve varlıklı web uygulamaları oluşturabilirler.