HTML Nedir? - Nasıl Kullanılır? - Özellikleri Ve Detaylı Anlatım

Web tasarımına yeni başlayanların biraz araştırma yaptıktan hemen sonra ilk tanıştıkları ve en sık karşılaştıkları konu şüphesiz ki HTML‘dir. Buda HTML’in, web tasarımının en temel taşı olmasındandır. Sosyal ağ gruplarında ve forumlarda HTML ile ilgili bir çok soru görmekteyiz. HTML nedir?, HTML bir yazılım dili midir?, HTML ile neler yapılabilir?, HTML ile site yapmak mümkün müdür? gibi bir çok konu üzerinde tartışılmaktadır.

Peki nedir bu HTML? HTML hakkında merak edilen tüm soruların cevapları, doğru ve yanlış bilinenler için yazının devamını okuyabilirsiniz.

Yazı içeriği

Toggle

• HTML Nedir?
  • • index.html Nedir?
  • HTML Tarihçesi
    • HTML 1.0 – 1991
    • HTML 2.0 – 1994
    • HTML 3.2 – 1997
    • HTML 4.0 – 1999
    • HTML 5 – 2011
  • HTML ile Neler Yapılabilir?
  • Temel HTML Yapısı
  • HTML Elementleri
  • HTML Meta Etiketleri
  • HTML Hakkında Bilinmesi Gerekenler
  • HTML Örnek Sayfa Yapısı
  • HTML Editörleri
    • Notepad ++
    • Sublime Text

HTML Nedir?

HTML (Hyper Text Markup Language) yani web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Buradan çıkaracağımız sonuç şudur ki HTML bir programlama dili değildir. Biraz daha açıklamak gerekirse, HTML, Chrome, Yandex Browser, Firefox, Opera, Safari gibi web tarayıcılarının okuyup anladığı bir dildir. Tarayıcılar HTML çıktıyı okurlar ve bizlere web sitesini çalıştırırlar.

HTML (Zengin Metin İşaretleme Dili) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyaları .html ya da .htm uzantısı ile saklanır. HTML, W3C tarafından standartlaştırılmaktadır.

ASP, ASP.net, PHP, Java, Phyton gibi günümüzde sıklıkla kullanılan yazılım dilleri ile geliştirilen web projelerinin hepsinin ortak noktası HTML’dir. Web projesi hangi yazılım dili ile geliştirilirse geliştirilsin, sonunda HTML olarak tarayıcıya yazılır ve tarayıcı bu HTML çıktıyı okur.

Tarayıcınızda bir web sayfası görüntülerken Sağ tık > Sayfa Kaynağını Görüntüle dediğinizde karşınıza gelen kodlar HTML’dir.

Html dili bize temel olarak, yazı, görsel ve video gibi öğeleri sayfa içersine yerleştirme ve konumlandırma, bu sayfaların web tarayıcılarında düzgün şekilde görüntülenmesi, arama motorlarına sayfa hakkında bilgi verme gibi işlemleri gerçekleştirir.

HTML ile bir sayfanın iskeleti oluşturulur ve bu iskelet CSS (cascading style sheet) ve Javascript yardımı ile şekillendirilir. CSS nedir , JavaScript Nedir? diye merak edenler temel web tasarım dersleri yazı dizimizin devamını okuyabilirler.

HTML bir web sayfasının içerik katmanıdır.

index.html Nedir?

Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler için, default.htm dosyası ise WinNT ya da türevi sistemler için giriş sayfası olur.

HTML Tarihçesi

1980 yılında CERN’de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dökü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 kurdu. 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 internetin başlıca temelini oluşturmuştur.

HTML 1.0 – 1991

HTML‘in ilk sürümü 1991 yılında yayınlandı. Zamanla çok yetenekli olacak olan HTML, henüz 1.0 iken ilk sürüm olmasından kaynaklı çok kısıtlı özelliklere sahipti. Bundan dolayı bu sürüm ile oluşturulan sayfalarda oldukça basitti. Başlıklar, listeler ve paragraflar bu sürümün vazgeçilmez özellikleriydi.

HTML 2.0 – 1994

1994 yılında HTML 2.0 sıfır yayınlandı. Bu sürümde geliştirilmeye devam eden HTML, günümüzde sıkça kullandığımız doldurulabilir form özelliğini kazandı.

HTML 3.2 – 1997

HTML 3.2 adı verilen üçüncü sürüm 1997 yılında yayınlandı. Tarayıcıya özel etiket kullanma sistemi getirildi ve o gün bu gündür tarayıcı uyumsuzlukları oluşmaya devam etti. Ancak en önemlisi CSS bu sürüm ile beraber geldi ve HTML artık daha yakışıklı olmaya başladı.

HTML 4.0 – 1999

HTML 4.0 ile önceki sürümlerde var olan gereksiz kodlar kaldırıldı. Söz dizimi açısından HTML’in en iyi standartlarına gelindi. HTML’in geldiği bu nokta artık web sitelerinin çoğalmasına imkan sağlamaya başladı.

HTML 5 – 2011

HTML5 standartları ile HTML artık harika bir hal aldı. Şuan kullanmakta olduğumuz bu sürüm, günümüz teknolojisindeki tablet, mobil gibi cihazlarla uyum içinde çalışan ve çok daha fazla özelliğe sahip olmuş, arama motoru dostu haline gelmiş bulunmaktadır.

HTML ile Neler Yapılabilir?

En merak edilenlerden bir tanesi HTML ile web sitesi yapılır mı? sorusudur. Evet HTML ile web sitesi yapımı mümkündür. Az önce belirttiğimiz gibi herhangi bir yazılım dili ile geliştirilen web projesi eninde sonunda HTML olarak tarayıcıya yazdırılacağı için web sitesini direkt olarak HTML ile de yapmak mümkün olacaktır.

Ancak burada doğru bilinmesi gereken, HTML ile yapılan bir sitenin dinamik değil statik olacağıdır. Yani sadece HTML ile çalıştırılmış bir web sitesinin admin paneli olmaz. Site üzerinde değişiklik yapmak (yazı, görsel vs eklemek, değiştirmek veya silmek) için sunucuya bağlanıp direkt olarak .html dosyasının üzerinde güncelleme yapmak gerekir. Takdir edersiniz ki bu herkesin yapabileceği bir işlem olmadığı gibi, günümüz teknolojilerini tercih etmek varken oldukça gereksiz bir iş yükü olacaktır. Bu sebeple HTML’in ne olduğunun iyice farkına varılması gerekmektedir. Tema satın alıp site yapmak gibi fikirler aslında çok mantıklı değildir.

Görseldeki gibi bir html web sayfasının örnek kodlaması için buraya tıklayın..

Temel HTML Yapısı

HTML temel yapısı:

HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>

Yukarıda görmüş olduğunuz kod bloğu bir web sayfasının temel HTML yapısıdır.

HTML <html> tüm html kodları bu tagların arasına yazılır. </html>

+ HTML ana yapısında iki kısım vardır. Bunlar,

HTML <head> ... </head> HTML <body> ... </body>

kısımlarıdır.

head kısmında CSS (cascading style sheet), meta tanımlamalar gibi bağlantılar yapılır. Tarayıcı HTML içeriğini okuma işlemine bu kısımdan başlar.

body kısmında ise web sayfasını oluşturan html kod blogları yazılır.

HTML Elementleri

HTML elementleri, bir sayfa yapısını oluşturan parçacıklardır. Tüm HTML elementleri < ile başlar ve > ile biter. Örnek vermek gerekirse <div>…</div> bu bir kutu/alan oluşturmaya yarar ve noktalı kısıma içerik gelir. Bu içerik bilgisi, element içeriği element contents olarak tanımlanır. Elementlerin bazı özellikleri ve bu özelliklerin aldığı değerler bulunmaktadır. Bu özelliklere ise attributes denmektedir.

HTML <!-- Yorum elementi --> <!-- HTML kodlarımızın arasına notlar bırakmak için işlevsiz satırlar oluşturmaya yarar --> <!-- Tüm html elementler <html> <body> ...... </body> </html> arasına yazılırlar --> <div>...</div> <!-- div elementi bir kutu (alan) yaratmaya yarar. En çok kullanılan elementtir. Bu kutulara CSS (custom style sheet) yardımı ile stiller verilerek istenilen şekle sokulur. --> <b>Kalın Yazı</b> <strong>Kalın yazı</strong> <p>Paragraf elementi</p> <span>Span Elementi isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlar. div etiketinden farklı olarak, kapsadığı metni keserek bir alt satıra geçmeden ona farklı bir nitelik kazandırır.</span> <br/> <!-- br elementi konulduğu yerden sonrasını aşağı atmak için kullanılır. Word'de yazı yazarken enter ile aşağı inmeyi örnek olarak verebiliriz. --> <hr/> <!-- hr elementi yatay çizgi oluşturmaya yarar. --> <img /> <!-- img elementi görsel eklemeye yarar. bu element özellik değeri (attributes) ile kullanılır. Örneğin ; --> <img src="görselin bulunduğu adres" alt="görsel tanımlama bilgisi" --> <a>Link</a> <!-- a elementi bir yazı veya görsele link vermek için kullanılır. bu element'de img elementi gibi özellik değeri ile kullanılır. Örneğin ; --> <a href="gidilecek adres">Bağlantı Metni</a> <h1>Başlık</h1> <h2>Başlık</h2> <h3>Başlık</h3> <h4>Başlık</h4> <h5>Başlık</h5> <h6>Başlık</h6> <!-- h elementleri başlık oluşturmak için kullanılırlar -->

+ Tüm HTML elementleri ile ilgili detaylı bilgilere buradan ulaşabilirsiniz. + Tüm HTML element özellikleri ile ilgili detaylı bilgilere buradan ulaşabilirsiniz.

HTML Meta Etiketleri

HTML meta etiketleri, web sayfası hakkında bilgilerin yazılmasına imkan sağlayan etiketlerdir. SEO işlemlerinde de büyük bir rol oynarlar. Meta etiketlerinin en önemli olanları ve sık kullanılanları title ve description taglarıdır.

Meta etiketleri (meta tag), HTML kodumuzun head tagları arasına yerleştirdiğimiz bilgi etiketleridir. Title, Description, Keywords (her ne kadar artık kullanılmasa da), Robots, Content-Type ve bir kaç meta etiketi daha mevcuttur. Bu etiketlerin kullanım amacı sitemiz ile ilgili gerekli bilgileri tanımlamamıza imkan sağlamaktır.

HTML Meta Tag Örnekleri

HTML <title>WPLİMON - Yazılım - SEO - WordPress Bloğu</title> <!-- Title, sayfanın başlık bilgisidir. Bu bilgi arama motoru sonuçlarında kullanıcıya gösterilen bir bilgidir ve seo açısından da önemi oldukça büyüktür. --> <!-- Title bilgisini, sitemizi görüntülemekte olan tarayıcı sekmesinde ve Google arama sonuçlarında görebiliriz. --> <meta name="description" content="sayfa açıklaması" /> <!-- Meta description tıpkı title etiketi gibi seo açısından oldukça büyük önem taşıyan bir sayfa bilgilendirme etiketidir. Google yaptığı açıklamada, tanım (description) meta etiketinden faydalanın demiştir. Açıklamalar her sayfa için ayrı ayrı tanımlanabilir. Zaten tavsiye edilen kullanım şekli de budur. Bir sayfanın açıklama etiketi, adından da anlaşılacağı üzere sayfa hakkında açıklama yapmamızı sağlayan, sayfa ile ilgili özet bir bilgiyi arama motorlarına ve kullanıcılara belirtmemize yarayan etikettir. Tıpkı title gibi html kodumuzun <head></head> tagları arasına yazılır --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Content-Type, sayfanın karakter kodlamasını gösterir. Yazılmadığı takdirde sayfa ISO-8859-1 karakter kodlaması olarak değerlendirilir. HEAD etiketi içerisinde en üste yazılmalıdır. --> <meta http-equiv="Content-Language" content="tr" /> <!-- Content-Language, sayfanın hangi dilde yayın yaptığının bilgisini verir. --> <meta name="author" content="WPLİMON - Batuhan Özyavru"> <!-- author, yazılımın kimler tarafından yapıldığının bilgisini göstermek için kullanılır. -->

HTML Hakkında Bilinmesi Gerekenler

HTML hakkında yazdıklarımızı kısaca özetleyelim.

+ HTML bir programalama dili değil, bir işaretleme dilidir. + Sadece HTML, CSS ve Javascript ile bir web sitesi yapılabilir ancak günümüz teknolojileri arasında çok basit bir site olur. Dinamik bir site oluşturmak için, PHP, ASP.net, JAVA gibi diller ile geliştirme yapılması daha doğrudur. + HTML yazımı için, notepad, notepad++, sublime text gibi tüm editörler kullanılabilir. + HTML dosyalarının uzantıları .html veya .htm şeklinde olmalıdır. + Web projeleri geliştirmek için HTML’i doğru anlamak ve iyi bilmek gerekmektedir. + HTML konusunu iyice kavradıktan sonra mutlaka öğrenilmesi gereken diğer konu CSS’dir. CSS, HTML kodlarının tarayıcıda okunmuş hallerine stil vermek için kullanılır. + Tüm HTML standartlarını öğrenmek ve takip etmek için buraya tıklayın.

HTML Örnek Sayfa Yapısı

HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Örnek HTML Sayfa</title> <meta charset='utf-8'><meta name="description" content="WPLİMON, Batuhan Özyavru ile HTML dersleri.." /> <meta name="author" content="WPLİMON - Batuhan Özyavru"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <style type="text/css"> body{ font-family: 'Open Sans', sans-serif; font-size: 13px; color: #000; background: #bbb; } #wrapper{ width: 1140px; margin: 0 auto; background: #fff; } header{ background: #f5f5f5; } #logo{ font-size: 32px; font-weight: bold; padding: 2rem 0; text-align: center; } nav#menu{ background: #000; text-align: center; } nav#menu ul{ list-style-type: none; width: 1000px; padding: 0; margin: 0 auto; } nav#menu ul li{ display: inline-block; padding:0 10px; margin:auto 0; } nav#menu ul li a{ color: #F6CD61; display: inline-block; font-size: 18px; height: 36px; line-height: 36px; text-decoration: none; vertical-align: middle; padding: 0 10px; background-color:#4A4E4D; } #content{ width: 700px; float: left; padding: 20px; } #sidebar{ width: 360px; float: right; padding: 20px; background: #fbfecc; } footer{ background: #000; text-align: center; padding: 3rem 0; color: #fff; text-decoration: none; } footer a{ color: #f40 !important; text-decoration: none !important; } .footer-bold-text{ font-weight: bold; } .clearBoth{ clear: both; } </style> </head> <body> <div id="wrapper"> <header> <div id="logo">WPLİMON - HTML Nedir?</div> <nav id="menu"> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Hizmetlerimiz</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> <br class="clearBoth" /> </header> <div id="container"> <div id="content"> <h1>Lorem Ipsum Nedir?</h1> <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> </div> <div id="sidebar">sidebar</div> <br class="clearBoth" /> </div> <footer> Bu sayfa <span class="footer-bold-text"><a href="https://www.batuhanozyavru.com.tr" title="izmir web tasarım" target="_blank">Batuhan Özyavru - İzmir Web Tasarım</a></span> tarafından hazırlanmıştır. </footer> </div> </body> </html>

Yukarıda bulunan kodları yeni bir html belgesi içine yazıp çalıştırdığınızda, web sayfasının görüntüsü aşağıdaki gibi olacaktır:

HTML Editörleri

HTML oluşturmak için bir çok editör mevcuttur. Bunlardan en sıkça kullanılan ve ücretsiz olanları ise Notepad++ ve Sublime Text editörleridir.

Notepad ++

+ Notepad++ indirmek için buraya tıklayın

Sublime Text

+ Sublime Text indirmek için buraya tıklayın