Hiper Metin İşaretleme Dili (HTML, İngilizce HyperText Markup Language kelimelerinin baş harflerinin kısaltılmasıdır) web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5'tir.
HyperText Markup Language | |
İlk çıkışı | 1993 | )
---|---|
Geliştirici | W3C ve WHATWG |
Kararlı sürüm | Living Standard (2021) |
Etkilendikleri | SGML |
Etkiledikleri | XHTML |
Platformu | Web |
İşletim sistemi | Tümü |
Lisans | Açık kaynak |
Olağan dosya uzantıları | .html, .htm |
Web sitesi | w3.org/html/, whatwg.org |
HTML, bir programlama dili olarak tanımlanamaz. Çünkü HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Fakat bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Temel gereği, yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak, söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir.
HTML kodunu web tarayıcıları okur, yorumlar ve görsel hale dönüştürürler, dolayısıyla aynı HTML kodunun farklı tarayıcılarda farklı sonuç vermesi olasıdır. CSS ve JavaScript ile beraber kullanıldığında HTML vasıtasıyla görsel ve dinamik web siteleri yaratılabilir.
HTML, küçüktür (<) ve büyüktür (>) işaretleri arasına girilen HTML etiketleri kullanılarak yazılır (ör: <html>
). İşaretlenen metnin başını ve sonunu belirtmek için çoğunlukla çift olarak kullanılırlar (Örnek: <h1>Selam</h1>
). Fakat işaretlemek yerine metnin bir yerine bir işaret konacaksa, tek olarak da kullanılabilirler (Ör: <img>
).
Örnek bir HTML kodu
HTML standartları W3C tarafından belirlenmektedir. HTML, "etiket" (İngilizce: tag) ismi verilen çeşitli öğeler kullanılarak oluşturulur. Aşağıdaki örnek bu etiketler kullanılarak yazılmıştır.
<html> <head> <title>Örnek Başlık</title> </head> <body> <p style="font-size:10px"><a href="http://tr.wikipedia.org">Özgür Ansiklopedi</a></p> </body> </html>
Bu kodun ekran çıktısı "Özgür Ansiklopedi" yazısı şeklinde olur ve yazı Vikipedi genel sayfasına köprü görevi görür.
Tarihi
1980 yılında CERN'de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dokümanlarını birbirleriyle paylaşabilmeleri için bir sistem olması gerektiğine inanıyordu. Bu yüzden prototip olarak ENQUIRE isimli sistemi önerdi. 1989 yılına gelindiğinde internet tabanlı sistemin ilk temellerini yine aynı isim Tim Berners Lee attı. 1990 yılında HTML işaretleme dilini geliştirmesinden sonra World Wide Web (WWW) sistemini kurmuştur. Bu şekilde CERN'de bilgi paylaşımını kolaylaştırma amacı doğrultusunda ortaya çıkan HTML günümüzde hayatımızın vazgeçilmezi olan ağın başlıca temelini oluşturmuştur.
Eleman örnekleri
HTML belgesinin başlığı
<head>...</head>
Belge başlığı da bu bölüme dahil edilmiştir, örneğin:
<head> <title>Başlık</title> </head>
Başlıklar
HTML başlıkları, <h1>
- <h6>
etiketleriyle yazılır. H1 en yüksek (veya en önemli) ve H6 en az olacak şekilde tanımlanır:
<h1>Başlık seviyesi 1</h1> <h2>Başlık seviyesi 2</h2> <h3>Başlık seviyesi 3</h3> <h4>Başlık seviyesi 4</h4> <h5>Başlık seviyesi 5</h5> <h6>Başlık seviyesi 6</h6>
Paragraflar
<p>Paragraf 1</p> <p>Paragraf 2</p>
Satır sonları: <br>
. <br>
ve <p>
arasındaki fark, <p>
sayfayı paragraf olarak bölümlere ayırırken <br>
öğesi bir boş elemandır, çünkü nitelikleri olmasına rağmen hiçbir içerik alamaz ve bir bitiş etiketi olmayabilir.
<p>Bu <br> satır sonları <br> olan <br> bir paragraf</p>
Bağlantılar
Bu, HTML'deki bir bağlantıdır. Bir bağlantı oluşturmak için <a>
etiketi kullanılır. href
özelliği bağlantının URL adresini tutar.
<a href="https://www.wikipedia.org/">Vikipedi bağlantısı!</a>
Girişler
Bir kullanıcının aşağıdakiler gibi girişler verebilmesinin birçok yolu vardır:
<!-- Bu metin girişi içindir --> <input type="text"> <!-- Bu dosyaları yüklemek içindir --> <input type="file"> <!-- Bu onay kutuları içindir --> <input type="checkbox">
Butonlar
Bu, HTML'deki butondur. Bir buton oluşturmak için <button>
etiketi kullanılır.
<button>Click Me!</button>
Yorumlar
<!-- Bu bir yorum -->
HTML'de kullanılan çeşitli biçimlendirme öğeleri türleri vardır:
- Yapısal işaretleme metnin amacını gösterir
- Örneğin,
<h2>Golf</h2>
ikinci düzey bir başlık olarak "Golf" kurar. Yapısal işaretleme belirli bir oluşturmayı göstermez, ancak çoğu web tarayıcısının öğe biçimlendirmesi için varsayılan stilleri vardır. İçerik CSS kullanılarak daha fazla şekillendirilebilir. - Sunum biçimlendirmesi, amacına bakılmaksızın metnin görünümünü gösterir
- Örneğin,
'''kalın yazı'''
, görsel çıkış aygıtlarının kalın yazı ile "kalın yazı" oluşturması gerektiğini belirtir, ancak bunu yapamayan cihazların (metni yüksek sesle okuyan işitsel cihazlar gibi) ne yapması gerektiği konusunda çok az bilgi verir. Hem'''kalın'''
hem de''eğik''
durumunda, başka şeyler de vardır<strong>güçlü metin</strong>
ve<em>vurgulanan metin</em>
gibi, eşdeğer görsel renderlere sahip öğeler vurgulanan metin. Bir işitsel kullanıcı aracısının son iki unsuru nasıl yorumlaması gerektiğini görmek daha kolaydır. Bununla birlikte, sunumsal muadillerine eşdeğer değildir: örneğin bir ekran okuyucusunun bir kitabın adını vurgulaması istenmez, ancak ekranda böyle bir ad eğik olur. Sunum biçimlendirme öğelerinin çoğu stil için CSS kullanılması lehine HTML 4.0 spesifikasyonu altında kullanımdan kaldırılmıştır. - Köprü metni işaretleme, bir belgenin bölümlerini diğer belgelere bağlantılar haline getirir
- Bağlantı öğesi belgede hiperlink oluşturur ve
href
özelliği bağlantının hedefini URL ayarlar. Örneğin,<a href="https://tr.wikipedia.org/">Vikipedi</a>
HTML işaretlemesi, "Vikipedi 3 Temmuz 2008 tarihinde Wayback Machine sitesinde arşivlendi." köprüsü olarak uygulanır. Görüntüyü köprü olarak oluşturmak için<a>
öğesine içerik olarak bir<img>
öğesi eklenir.<br>
gibi
, nitelikleri olan, ancak içeriği veya kapanış etiketi olmayan boş bir öğedir.<img>
<a href="https://example.org"><img src="image.gif" alt="descriptive text" width="50" height="50" border="0"></a>
.
Kaynakça
- ^ Özgür Ansiklopedi 3 Temmuz 2008 tarihinde Wayback Machine sitesinde arşivlendi.
- ^ Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). W3.org 1 Nisan 2010 tarihinde Wayback Machine sitesinde .
- ^ . W3schools. 14 Şubat 2020 tarihinde kaynağından arşivlendi. Erişim tarihi: 16 Mart 2015.
wikipedia, wiki, viki, vikipedia, oku, kitap, kütüphane, kütübhane, ara, ara bul, bul, herşey, ne arasanız burada,hikayeler, makale, kitaplar, öğren, wiki, bilgi, tarih, yukle, izle, telefon için, turk, türk, türkçe, turkce, nasıl yapılır, ne demek, nasıl, yapmak, yapılır, indir, ücretsiz, ücretsiz indir, bedava, bedava indir, mp3, video, mp4, 3gp, jpg, jpeg, gif, png, resim, müzik, şarkı, film, film, oyun, oyunlar, mobil, cep telefonu, telefon, android, ios, apple, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, pc, web, computer, bilgisayar
Hiper Metin Isaretleme Dili HTML Ingilizce HyperText Markup Language kelimelerinin bas harflerinin kisaltilmasidir web sayfalarini olusturmak icin kullanilan standart metin isaretleme dilidir Dilin son surumu HTML5 tir HTMLHTMLHyperText Markup LanguageIlk cikisi1993 31 yil once 1993 GelistiriciW3C ve WHATWGKararli surumLiving Standard 2021 EtkilendikleriSGMLEtkiledikleriXHTMLPlatformuWebIsletim sistemiTumuLisansAcik kaynakOlagan dosya uzantilari html htmWeb sitesiw3 org html whatwg org HTML bir programlama dili olarak tanimlanamaz Cunku HTML kodlariyla kendi basina calisan bir program yazilamaz Fakat bu dili yorumlayabilen programlar araciligiyla calisabilen programlar yazilabilir Programlama dili denilememesinin nedeni tam olarak budur Temel geregi yazi goruntu video gibi degisik verileri ve bunlari iceren sayfalari birbirine basitce baglamak buna ek olarak soz konusu sayfalarin web tarayicisi yazilimlari tarafindan duzgun olarak goruntulenmesi icin gerekli kurallari belirlemektir HTML kodunu web tarayicilari okur yorumlar ve gorsel hale donustururler dolayisiyla ayni HTML kodunun farkli tarayicilarda farkli sonuc vermesi olasidir CSS ve JavaScript ile beraber kullanildiginda HTML vasitasiyla gorsel ve dinamik web siteleri yaratilabilir HTML kucuktur lt ve buyuktur gt isaretleri arasina girilen HTML etiketleri kullanilarak yazilir or lt html gt Isaretlenen metnin basini ve sonunu belirtmek icin cogunlukla cift olarak kullanilirlar Ornek lt h1 gt Selam lt h1 gt Fakat isaretlemek yerine metnin bir yerine bir isaret konacaksa tek olarak da kullanilabilirler Or lt img gt Ornek bir HTML koduHTML standartlari W3C tarafindan belirlenmektedir HTML etiket Ingilizce tag ismi verilen cesitli ogeler kullanilarak olusturulur Asagidaki ornek bu etiketler kullanilarak yazilmistir lt html gt lt head gt lt title gt Ornek Baslik lt title gt lt head gt lt body gt lt p style font size 10px gt lt a href http tr wikipedia org gt Ozgur Ansiklopedi lt a gt lt p gt lt body gt lt html gt Bu kodun ekran ciktisi Ozgur Ansiklopedi yazisi seklinde olur ve yazi Vikipedi genel sayfasina kopru gorevi gorur Tarihi1980 yilinda CERN de gorevli olan Tim Berners Lee CERN arastirmacilarinin bilgilerini ve dokumanlarini birbirleriyle paylasabilmeleri icin bir sistem olmasi gerektigine inaniyordu Bu yuzden prototip olarak ENQUIRE isimli sistemi onerdi 1989 yilina gelindiginde internet tabanli sistemin ilk temellerini yine ayni isim Tim Berners Lee atti 1990 yilinda HTML isaretleme dilini gelistirmesinden sonra World Wide Web WWW sistemini kurmustur Bu sekilde CERN de bilgi paylasimini kolaylastirma amaci dogrultusunda ortaya cikan HTML gunumuzde hayatimizin vazgecilmezi olan agin baslica temelini olusturmustur Eleman ornekleri HTML belgesinin basligi span class p lt span span class nt head span span class p gt span span class p lt span span class nt head span span class p gt span Belge basligi da bu bolume dahil edilmistir ornegin lt head gt lt title gt Baslik lt title gt lt head gt Basliklar HTML basliklari span class p lt span span class nt h1 span span class p gt span span class p lt span span class nt h6 span span class p gt span etiketleriyle yazilir H1 en yuksek veya en onemli ve H6 en az olacak sekilde tanimlanir lt h1 gt Baslik seviyesi 1 lt h1 gt lt h2 gt Baslik seviyesi 2 lt h2 gt lt h3 gt Baslik seviyesi 3 lt h3 gt lt h4 gt Baslik seviyesi 4 lt h4 gt lt h5 gt Baslik seviyesi 5 lt h5 gt lt h6 gt Baslik seviyesi 6 lt h6 gt Paragraflar lt p gt Paragraf 1 lt p gt lt p gt Paragraf 2 lt p gt Satir sonlari span class p lt span span class nt br span span class p gt span span class p lt span span class nt br span span class p gt span ve span class p lt span span class nt p span span class p gt span arasindaki fark span class p lt span span class nt p span span class p gt span sayfayi paragraf olarak bolumlere ayirirken span class p lt span span class nt br span span class p gt span ogesi bir bos elemandir cunku nitelikleri olmasina ragmen hicbir icerik alamaz ve bir bitis etiketi olmayabilir lt p gt Bu lt br gt satir sonlari lt br gt olan lt br gt bir paragraf lt p gt Baglantilar Bu HTML deki bir baglantidir Bir baglanti olusturmak icin span class p lt span span class nt a span span class p gt span etiketi kullanilir href ozelligi baglantinin URL adresini tutar lt a href https www wikipedia org gt Vikipedi baglantisi lt a gt Girisler Bir kullanicinin asagidakiler gibi girisler verebilmesinin bircok yolu vardir lt Bu metin girisi icindir gt lt input type text gt lt Bu dosyalari yuklemek icindir gt lt input type file gt lt Bu onay kutulari icindir gt lt input type checkbox gt Butonlar Bu HTML deki butondur Bir buton olusturmak icin span class p lt span span class nt button span span class p gt span etiketi kullanilir lt button gt Click Me lt button gt Yorumlar lt Bu bir yorum gt Yorumlar isaretlemenin anlasilmasina yardimci olabilir ve web sayfasinda goruntulenmez HTML de kullanilan cesitli bicimlendirme ogeleri turleri vardir Yapisal isaretleme metnin amacini gosterir Ornegin span class p lt span span class nt h2 span span class p gt span Golf span class p lt span span class nt h2 span span class p gt span ikinci duzey bir baslik olarak Golf kurar Yapisal isaretleme belirli bir olusturmayi gostermez ancak cogu web tarayicisinin oge bicimlendirmesi icin varsayilan stilleri vardir Icerik CSS kullanilarak daha fazla sekillendirilebilir Sunum bicimlendirmesi amacina bakilmaksizin metnin gorunumunu gosterir Ornegin kalin yazi gorsel cikis aygitlarinin kalin yazi ile kalin yazi olusturmasi gerektigini belirtir ancak bunu yapamayan cihazlarin metni yuksek sesle okuyan isitsel cihazlar gibi ne yapmasi gerektigi konusunda cok az bilgi verir Hem kalin hem de egik durumunda baska seyler de vardir span class p lt span span class nt strong span span class p gt span guclu metin span class p lt span span class nt strong span span class p gt span ve span class p lt span span class nt em span span class p gt span vurgulanan metin span class p lt span span class nt em span span class p gt span gibi esdeger gorsel renderlere sahip ogeler vurgulanan metin Bir isitsel kullanici aracisinin son iki unsuru nasil yorumlamasi gerektigini gormek daha kolaydir Bununla birlikte sunumsal muadillerine esdeger degildir ornegin bir ekran okuyucusunun bir kitabin adini vurgulamasi istenmez ancak ekranda boyle bir ad egik olur Sunum bicimlendirme ogelerinin cogu stil icin CSS kullanilmasi lehine HTML 4 0 spesifikasyonu altinda kullanimdan kaldirilmistir Kopru metni isaretleme bir belgenin bolumlerini diger belgelere baglantilar haline getirir Baglanti ogesi belgede hiperlink olusturur ve href ozelligi baglantinin hedefini URL ayarlar Ornegin span class p lt span span class nt a span span class na href span span class o span span class s https tr wikipedia org span span class p gt span Vikipedi span class p lt span span class nt a span span class p gt span HTML isaretlemesi Vikipedi 3 Temmuz 2008 tarihinde Wayback Machine sitesinde arsivlendi koprusu olarak uygulanir Goruntuyu kopru olarak olusturmak icin span class p lt span span class nt a span span class p gt span ogesine icerik olarak bir span class p lt span span class nt img span span class p gt span ogesi eklenir span class p lt span span class nt br span span class p gt span gibi code class mw highlight mw highlight lang html mw content ltr dir ltr span class p lt span span class nt img span span class p gt span code nitelikleri olan ancak icerigi veya kapanis etiketi olmayan bos bir ogedir span class p lt span span class nt a span span class na href span span class o span span class s https example org span span class p gt lt span span class nt img span span class na src span span class o span span class s image gif span span class na alt span span class o span span class s descriptive text span span class na width span span class o span span class s 50 span span class na height span span class o span span class s 50 span span class na border span span class o span span class s 0 span span class p gt lt span span class nt a span span class p gt span Kaynakca Ozgur Ansiklopedi 3 Temmuz 2008 tarihinde Wayback Machine sitesinde arsivlendi Tim Berners Lee Information Management A Proposal CERN March 1989 May 1990 W3 org 1 Nisan 2010 tarihinde Wayback Machine sitesinde W3schools 14 Subat 2020 tarihinde kaynagindan arsivlendi Erisim tarihi 16 Mart 2015