2013 - 2024 © BİRNC
HTML Nedir?
HTML, web sitesi sayfalarını oluşturmak için kullanılan standart hiper metin işaretleme ve biçimlendirme dilidir. HTML'nin Açılımı: İngilizce olarak "Hyper Text Markup Language" olarak okunur ve baş harflerinin kısaltılması şeklinde HTML olarak web dünyasında yerini almıştır. Türkçe karşılığı ise "Hiper Metin İşaretleme Dili'dir.
HTML'nin Tarihsel Gelişimi
1989 ▬ Bu yıllarda CERN şirketinde görevli olan Tim Berners-Lee, CERN şirketi araştırma ekibinin dökümanlarını ekip arkadaşlarıyla paylaşabilmek, bilimsel belgeleri değiş tokuş yapabilmek için bir sistemin olması gerektiğini konuşmuşlar. HTML'nin dünyadaki tarihsel gelişme süreci işte bu düşünce tohumundan ortaya çıkmıştır. Ve bu düşünce tohumundan prototip olarak ENQUIRE adında bir sistem tasarlanmıştır.
1990 ▬ Bu yılda yılına gelindiğinde internet tabanlı HTML sisteminin ilk aşamaları başladı ve yine Tim Berners-Lee tarafından oluşturuldu.
1991 ▬ HTML 1.0 ilk sürüm dünyaya duyuruldu.
1995 ▬ HTML 2.0 versiyonu doldurulabilen form yetenekleriyle paylaşıldı.
1997 ▬ HTML 3.2 versiyona CSS ve tarayıcılara özel etiket sistemleri eklendi.
1999 ▬ HTML 4.1 sürümünde işlevsiz olan tüm yazılımlar sistem içerisinden çıkarıldı.
2014 ▬ HTML 5 son sürümü ve artık web dünyasının yapı taşı teknolojilerinden biri. HTML işaretleme standardının beşinci sürümünde artık sadece bir şekilleme dili olarak kullanılmamaktadır. CSS 3 ve JavaScript ile birleşerek mobil cihazlar ve tabletler gibi her cihaza uyumlu çalışan güçlü web uygulamaları geliştirilmektedir.
1990 ▬ Bu yılda yılına gelindiğinde internet tabanlı HTML sisteminin ilk aşamaları başladı ve yine Tim Berners-Lee tarafından oluşturuldu.
1991 ▬ HTML 1.0 ilk sürüm dünyaya duyuruldu.
1995 ▬ HTML 2.0 versiyonu doldurulabilen form yetenekleriyle paylaşıldı.
1997 ▬ HTML 3.2 versiyona CSS ve tarayıcılara özel etiket sistemleri eklendi.
1999 ▬ HTML 4.1 sürümünde işlevsiz olan tüm yazılımlar sistem içerisinden çıkarıldı.
2014 ▬ HTML 5 son sürümü ve artık web dünyasının yapı taşı teknolojilerinden biri. HTML işaretleme standardının beşinci sürümünde artık sadece bir şekilleme dili olarak kullanılmamaktadır. CSS 3 ve JavaScript ile birleşerek mobil cihazlar ve tabletler gibi her cihaza uyumlu çalışan güçlü web uygulamaları geliştirilmektedir.
HTML Ne İşe Yarar?
HTML, tarayıcılarda görülen sayfaların yapısını tanımlar. İnternette yayınlanan her web sitesi, bilgilerinin kullanıcılar tarafından görüntülemesi için HTML biçimlendirme dilini kullanmak zorundadır. HTML'nin etiketleri sayesinde tarayıcıda işlenen dosyalar web sayfasının yapısını biçimlendirerek internet ziyaretçilerinin ekranında görüntülenmektedir. Aslında HTML bir sayfa değildir, şifreli bir belgedir. HTTP protokolünde olduğu gibi HTML de zaten ilk olarak bilim adamları tarafından bilimsel belgeleri değiş tokuş etmek ve gizli belgeleri birbirleriyle paylaşmak amacıyla kullanılmıştır. Yani işleyişi şöyledir: Tarayıcınız web sunucusuyla HTTP protokolü aracılığıyla iletişim kurar, HTTP istekleri gönderir ve sunucu yanıtları alır.
HTML İşaretleme Dilinin Genel Özellikleri
HTML dilinin ana görevi web sayfalarındaki bilgileri yapılandırmaktır. Örneğin;
▬ tablolar,
▬ çeşitli liste türleri,
▬ paragraflar oluşturun,
▬ bir belgeye resim ekleyin,
▬ başlıklar kullanarak bir belgeyi parçalara ayırın,
▬ kullanıcılarla etkileşim için formlar oluşturun,
▬ farklı HTML belgelerini listelerle ilişkilendirin.
HTML'nin ana görevi bir belgeyi işaretlemek veya bir yapı oluşturmak olsa da bu dilde tasarım öğeleri de vardır. Yani HTML metinleri kalın veya italik hale getirerek vurgulamanıza, bir dizin veya alt dizin oluşturmanıza izin veren bazı özel fonksiyonlar da sunar. HTML belgelerini süslemek ve HTML etiketlerini benzersiz kılmak için HTML nitelikleri icat edildi ancak şu anda hiç kimse belgeleri süslemek için HTML niteliklerini kullanmıyor. Çünkü basamaklı stil gerektiren sayfalarda CSS kullanmaları gerekir. Tabiki bazı istisnalar vardır, örneğin bazı e-posta istemcileri CSS ile nasıl çalışılacağını bilmez ve e-postaları tasarlamak için HTML öznitelikleri kullanılır. Her web sitesi, bilgileri kullanıcıya grafik biçiminde sunmak için HTML kullanmak zorundadır. Tabiki yinede HTML internet ile sınırlı değildir, günümüzde çeşitli işletim sistemleri için mobil ve masaüstü uygulamalarının geliştirilmesinde çok yardımcı bir betimleme dili olarak kullanılmaktadır.
▬ tablolar,
▬ çeşitli liste türleri,
▬ paragraflar oluşturun,
▬ bir belgeye resim ekleyin,
▬ başlıklar kullanarak bir belgeyi parçalara ayırın,
▬ kullanıcılarla etkileşim için formlar oluşturun,
▬ farklı HTML belgelerini listelerle ilişkilendirin.
HTML'nin ana görevi bir belgeyi işaretlemek veya bir yapı oluşturmak olsa da bu dilde tasarım öğeleri de vardır. Yani HTML metinleri kalın veya italik hale getirerek vurgulamanıza, bir dizin veya alt dizin oluşturmanıza izin veren bazı özel fonksiyonlar da sunar. HTML belgelerini süslemek ve HTML etiketlerini benzersiz kılmak için HTML nitelikleri icat edildi ancak şu anda hiç kimse belgeleri süslemek için HTML niteliklerini kullanmıyor. Çünkü basamaklı stil gerektiren sayfalarda CSS kullanmaları gerekir. Tabiki bazı istisnalar vardır, örneğin bazı e-posta istemcileri CSS ile nasıl çalışılacağını bilmez ve e-postaları tasarlamak için HTML öznitelikleri kullanılır. Her web sitesi, bilgileri kullanıcıya grafik biçiminde sunmak için HTML kullanmak zorundadır. Tabiki yinede HTML internet ile sınırlı değildir, günümüzde çeşitli işletim sistemleri için mobil ve masaüstü uygulamalarının geliştirilmesinde çok yardımcı bir betimleme dili olarak kullanılmaktadır.
HTML Dosyası Nasıl Açılır?
Tarayıcıya bir sitenin URL'sini girdiğinizde, tarayıcı onu ayrıştırır ve sunucuya bir HTTP bağlantısı gönderir. Sunucu, özel HTTP başlıklarını ve istek yöntemlerini kullanarak, tarayıcının hangi HTML belgesini ve hangi biçimde almak istediğini anlar ve yanıt olarak HTML belgesini içeren özel bir HTTP mesajı gönderir.
HTML belgesini aldıktan sonra tarayıcı onu ayrıştırmaya başlar. Hangi HTML sürümünün kullanıldığını anlamak için önce DOCTYPE etiketinin değerini okur, ardından tarayıcı belgenin nasıl görüntüleneceğini bulmak için çeşitli meta etiketlerini süzer. Kullanılan tarayıcı, belgenin yapısından ve görüntülenmesinden sorumlu olan HTML etiketlerindeki bilgileri analiz ettikten sonra kullanıcıya gösterdiği sayfayı oluşturmuş olur.
HTML belgesini aldıktan sonra tarayıcı onu ayrıştırmaya başlar. Hangi HTML sürümünün kullanıldığını anlamak için önce DOCTYPE etiketinin değerini okur, ardından tarayıcı belgenin nasıl görüntüleneceğini bulmak için çeşitli meta etiketlerini süzer. Kullanılan tarayıcı, belgenin yapısından ve görüntülenmesinden sorumlu olan HTML etiketlerindeki bilgileri analiz ettikten sonra kullanıcıya gösterdiği sayfayı oluşturmuş olur.
En Popüler HTML Görüntüleyicisi Tarayıcılar
✦ Google Chrome - Google tarayıcısı.
✦ Yandex - Yandex'in Google'a karşı rakip olarak piyasaya sürdüğü bir tarayıcıdır.
✦ Internet Explorer - Microsoft tarayıcısı.
✦ Mozilla Firefox - İnternet'i geliştiren Mozilla'nın bir tarayıcısı.
✦ Opera - Farklı özellikleriyle muhteşem bir tarayıcıdır.
✦ Safari - Apple tarayıcısı.
Genellikle HTML belgesi .htm veya .html biçimindedir. Örnek bir web sitesi (Control Manager System) CMS yani yönetim paneli alt yapısına sahip ise HTML sayfalarının kodu dinamik bir şekilde otomatik olarak oluşturulabilir. Fakat yinede bir web sitesinin alt yapısı HTML belgesinin tüm yapısını kendi başına tamamen tek bir HTML belgesi ile oluşturma gücüne sahip olamaz.
✦ Yandex - Yandex'in Google'a karşı rakip olarak piyasaya sürdüğü bir tarayıcıdır.
✦ Internet Explorer - Microsoft tarayıcısı.
✦ Mozilla Firefox - İnternet'i geliştiren Mozilla'nın bir tarayıcısı.
✦ Opera - Farklı özellikleriyle muhteşem bir tarayıcıdır.
✦ Safari - Apple tarayıcısı.
Genellikle HTML belgesi .htm veya .html biçimindedir. Örnek bir web sitesi (Control Manager System) CMS yani yönetim paneli alt yapısına sahip ise HTML sayfalarının kodu dinamik bir şekilde otomatik olarak oluşturulabilir. Fakat yinede bir web sitesinin alt yapısı HTML belgesinin tüm yapısını kendi başına tamamen tek bir HTML belgesi ile oluşturma gücüne sahip olamaz.
HTML Nasıl Oluşturulur?
Bir HTML belgesi oluşturmak için günümüzde çok sayıda ve farklı işlevlere sahip özel metin düzenleyicileri vardır ve en popüler olan HTML editörleri aşağıdadır.
✦ Notepad ++ - sözdizimi vurgulamalı ücretsiz düzenleyicidir.
✦ SublimeText 3: Geliştirmeyi hızlandıran ücretli bir düzenleyicidir.
✦ Brackets: Çok yapılı özelliğe sahip ücretsiz bir düzenleyicidir.
birNC Web Tasasarım Ajansı olarak sizlere birçok karmaşık HTML düzenleyicisininin bilgilerini aktarmak yerine, aşağıda basit ve ergonomik bir arayüzüne sahip Brackets ile örnek HTML sayfası oluşturma aşamalarını aktaracağız.
✦ Notepad ++ - sözdizimi vurgulamalı ücretsiz düzenleyicidir.
✦ SublimeText 3: Geliştirmeyi hızlandıran ücretli bir düzenleyicidir.
✦ Brackets: Çok yapılı özelliğe sahip ücretsiz bir düzenleyicidir.
birNC Web Tasasarım Ajansı olarak sizlere birçok karmaşık HTML düzenleyicisininin bilgilerini aktarmak yerine, aşağıda basit ve ergonomik bir arayüzüne sahip Brackets ile örnek HTML sayfası oluşturma aşamalarını aktaracağız.
Brackets ile HTML Sayfası Oluşturma
1- Öncelikle https://brackets.io/ sayfasına giriş yaparak HTML düzenleyecisini bilgisayarınıza indirin.
2- Sol taraftaki pencereden "Klasörü Aç" sekmesiyle bir konum seçin.
3- İşlem yaptığınız cihazda (Masaüstü, İndirilenler vb.) konumu seçtikten sonra "GRİ" alana mause ile sağ tıklıyoruz.
4- Gelen menüde "Yeni Klasör" seçeneği ile (Masaüstü, İndirilenler vb.) kendi seçtiğiniz konuma "İlk Web Sitem" isimli yeni bir klasör oluşturuyoruz.
5- "İlk Web Sitem" klasörüne mause ile sağ tıklayıp gelen menüden "Yeni Dosya" dedikten sonra index.html isimli dosyayı "İlk Web Sitem" klasörünün içine kaydediyoruz.
Artık ilk HTML dosyanız hazır. Dosyanın içerisine girerek artık istediğinizi yazabilirsiniz. Bu dosyanız .html uzantılı olduğu için tıkladığınızda otomatik olarak kullandığınız tarayıcınızda açılacaktır. index.html dosyasına tıkladığımızda .html sayfamız alışık olmadığınız bir tarayıcıda karşınıza geliyor ise ayarlarının yapılması gerekebilir. Bu gibi durumlarda .html dosyanızın üzerinde mause ile sağ tıklayıp "bilikte aç" seçeneğini kullanıp istediğiniz tarayıcınızda dosyanızı açabilirsiniz.
2- Sol taraftaki pencereden "Klasörü Aç" sekmesiyle bir konum seçin.
3- İşlem yaptığınız cihazda (Masaüstü, İndirilenler vb.) konumu seçtikten sonra "GRİ" alana mause ile sağ tıklıyoruz.
4- Gelen menüde "Yeni Klasör" seçeneği ile (Masaüstü, İndirilenler vb.) kendi seçtiğiniz konuma "İlk Web Sitem" isimli yeni bir klasör oluşturuyoruz.
5- "İlk Web Sitem" klasörüne mause ile sağ tıklayıp gelen menüden "Yeni Dosya" dedikten sonra index.html isimli dosyayı "İlk Web Sitem" klasörünün içine kaydediyoruz.
Artık ilk HTML dosyanız hazır. Dosyanın içerisine girerek artık istediğinizi yazabilirsiniz. Bu dosyanız .html uzantılı olduğu için tıkladığınızda otomatik olarak kullandığınız tarayıcınızda açılacaktır. index.html dosyasına tıkladığımızda .html sayfamız alışık olmadığınız bir tarayıcıda karşınıza geliyor ise ayarlarının yapılması gerekebilir. Bu gibi durumlarda .html dosyanızın üzerinde mause ile sağ tıklayıp "bilikte aç" seçeneğini kullanıp istediğiniz tarayıcınızda dosyanızı açabilirsiniz.
HTML ile İlgili Sıkça Sorulan Sorular
HTML nasıl öğrenilir?
Dünyanın en yaygın kod türlerinden biri olan HTML internet vasıtasıyla öğrenilebilir. En hızlı bir şekilde ayrıntılarına yer verilebilir. İlgili kurslardan öğrenme aşamasında yardım alınabilir. Dilin en güncel sürümü öğrenilmelidir. HTML etiketleri açık ve evrensel özelliklere sahiptir. Bu özellikler genel bakış yöntemi ile internetten çevirimiçi kurslar veren sitelerden öğrenilebilir. Bir web sitesi tasarımı yapılan site projesinin aktif bir şekilde kullanılması için HTML işleminin tamamlanmması gerekir. Html olmadan site olmaz.
HTML nerelerde kullanılır?
İnternet ortamında girdiğiniz web sitesinde ekranda gördüğünüz her şey HTML’dir. Web sitelerinde görülen her şey HTML ile yapılıyor ve kodlanıyor. HTML ile web sitesinde video, müzik, tablo, resim paylaşabilirsiniz.
HTML oluşturmak için gerekli programlar nelerdir?
HTML kodu yazmak için ekstra bir programa ihtiyacınız yok. Notepad (https://notepad-plus-plus.org/) kullanarak web sayfası HTML biçimlendirme kodlarınızı yazabilirsiniz.
HTML oluştururken nelere dikkat etmeliyiz?
→ Büyüktür <…> işareti içerisine yazılan kodlara tag - etiket adı verilir.
→ Etiketler <..> şeklinde açılır ve etiketi kapatmak için kesme / işareti kullanılır.
→ Html kodları yazılırken ı-ş-ç-ü gibi Türkçe karakterler kullanılmaz.
→ Etiketlerde tarayıcılarda muhtelif hatalar alınmaması için genellikle küçük harf kullanılmalıdır.
→ Etiketler <..> şeklinde açılır ve etiketi kapatmak için kesme / işareti kullanılır.
→ Html kodları yazılırken ı-ş-ç-ü gibi Türkçe karakterler kullanılmaz.
→ Etiketlerde tarayıcılarda muhtelif hatalar alınmaması için genellikle küçük harf kullanılmalıdır.
HTML derslerini nereden alabilirim?
Online HTML kursları alabileceğiniz siteler
1- https://www.udemy.com/tr/topic/html/
2- https://l24.im/6lcAU
3- https://www.aribilgi.com/web-tasarim-kursu-egitimi/
4- https://www.techcareer.net/bootcamp/tubisad-front-end/
1- https://www.udemy.com/tr/topic/html/
2- https://l24.im/6lcAU
3- https://www.aribilgi.com/web-tasarim-kursu-egitimi/
4- https://www.techcareer.net/bootcamp/tubisad-front-end/
HTML ile ilgili bilinmesi gereken en önemli şeyler nelerdir?
1- Etiketler (Tags): HTML'de kullanılan etiketler, web sayfalarının yapısını ve içeriğini belirtmek için kullanılır. Her etiket açılış ve kapanış etiketiyle işaretlenir.
2- Elementler: HTML etiketleri, elementleri oluşturur.
3- Yapısal İşaretleme: HTML, web sayfalarının yapısını tanımlamak için kullanılır. Başlık, paragraf, liste, tablo gibi yapısal unsurlar, belirli etiketler ve elementler kullanılarak oluşturulur. Bu, web tarayıcılarının sayfanın yapısını anlamasını ve doğru şekilde görüntülemesini sağlar.
4- Bağlantılar: HTML, bağlantılar (linkler) oluşturmak için a etiketini kullanır. Bu etiket, bir metin veya resmin tıklanabilir bir bağlantıya dönüştürülmesini sağlar. Bağlantılar, diğer web sayfalarına, belgelere, resimlere, videolara vb. yönlendirme yapmak için kullanılır.
5- Biçimlendirme: HTML, metin ve içerik biçimlendirmek için kullanılır. Başlıkları, paragrafları, listeleri, vurgulanmış metinleri, kalın veya eğik metinleri vb. oluşturmak için farklı etiketler ve özellikler kullanılır.
6- Resimler ve Medya: HTML, resimleri ve diğer medya öğelerini web sayfalarına eklemek için kullanılır.
7- Formlar: HTML form elementleri, kullanıcıların web sayfalarına veri girişi yapmasını sağlar.
2- Elementler: HTML etiketleri, elementleri oluşturur.
3- Yapısal İşaretleme: HTML, web sayfalarının yapısını tanımlamak için kullanılır. Başlık, paragraf, liste, tablo gibi yapısal unsurlar, belirli etiketler ve elementler kullanılarak oluşturulur. Bu, web tarayıcılarının sayfanın yapısını anlamasını ve doğru şekilde görüntülemesini sağlar.
4- Bağlantılar: HTML, bağlantılar (linkler) oluşturmak için a etiketini kullanır. Bu etiket, bir metin veya resmin tıklanabilir bir bağlantıya dönüştürülmesini sağlar. Bağlantılar, diğer web sayfalarına, belgelere, resimlere, videolara vb. yönlendirme yapmak için kullanılır.
5- Biçimlendirme: HTML, metin ve içerik biçimlendirmek için kullanılır. Başlıkları, paragrafları, listeleri, vurgulanmış metinleri, kalın veya eğik metinleri vb. oluşturmak için farklı etiketler ve özellikler kullanılır.
6- Resimler ve Medya: HTML, resimleri ve diğer medya öğelerini web sayfalarına eklemek için kullanılır.
7- Formlar: HTML form elementleri, kullanıcıların web sayfalarına veri girişi yapmasını sağlar.
HTML nedir, ne işe yarar ve nasıl oluşturulur konusuyla ilgili araştırma yapan web sayfası geliştirmesi adaylarına eksiksiz bir makale sunabilmemiz için yazımızda gördüğünüz tüm eksikleri bilgi@birnc.com.tr mail adresine gönderebilirsiniz. Makelemizde bulamadığınız araştırma yaptığınız farklı bir HTML konusu var ise birNC'den bilgi almak için +90 212 232 9262 | +90 212 603 6677 telefon numaralarını arayabilirsiniz.
Hepinize başarılı yarınlar dileriz.
Hepinize başarılı yarınlar dileriz.
