Hoş Geldin, Ziyaretçi!

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

HTML Nedir? Nasıl Kullanılır? HTML Rehberi

  • Konbuyu başlatan Thous
  • Başlangıç tarihi
HTML Nedir? Nasıl Kullanılır? Gibi sorulara cevap vermeye çalıştığım; HTML Rehberi konumuza hepiniz hoş geldiniz. İnternet sitesine sahip kişilerin, bu kodlar hakkında belli bir düzeyde bilgi sahibi olmaları kendi yararlarına olacaktır. Kısa bir anlatım ile HTML Nedir? Sorusuna yanıt verelim.;

HTML Nedir?​

HTML; Hiper Text Markup Language yani Hiper Metin İşaretleme Dili olarak bilinmektedir. Peki, nedir bu İşaretleme Dili? Kısa bir örnek ile açıklayalım; Tilki.NET üzerinde paylaştığım bu yazının Google veya diğer arama motorları tarafından anlaşılarak; hangi kelimenin başlık, içerik, alt başlık, resim olduğunu anlaması için HTML büyük önem arz etmektedir. Yani HTML kısaca sitemizdeki içeriklerin tümünün arama motorları tarafından anlaşılmasını sağlayan bir araçtır diyebiliriz.

HTML dosyası oluştururken metin belgesi, notepad++ veya editör kullanabilirsiniz. (Buraya tıklayarak, yazmış olduğum En Kullanışlı Editörler isimli konuya gidebilirsiniz.) HTML dosyalarının uzantısı HTM ve HTML olmak zorundadır. HTM ve HTML arasında bir fark bulunmamaktadır. Windows eski yıllarda, dosya uzantısını maksimum 3 harf olarak kabul etmekte ve bu şekilde kullanıma izin vermekteydi. Güncel olarak (2022 yılında) HTML dosyalarının büyük çoğunluğu HTML uzantısına sahiptir ve bu şekilde kullanmanız daha modern olacaktır.

Html nedir nasil kullanilir html rehberi

HTML Nasıl Kullanılır?​

HTML kullanımı, etiketler arasına yazdığınız değerlerden ibarettir. Bir HTML sayfası oluşturmak için en basit yöntem bir editör kullanmaktan geçer. Ben bu konuda sadece 18.3 Mb boyutunda olan isimli editörü öneriyorum. Bu editörle .html uzantılı bir dosya oluşturup bu dosyayı düzenlediğiniz esnada html yazıp tab tuşuna basarsanız otomatik olarak HTML5 şablonu sayfaya gelecektir.

  • <html>, <head>, <meta>, <title>, <body> gibi <..> işaretlerinin arasında yer alan kelimelere etiket yani tag denilmektedir. Her etiket farklı bir işe yarar.
  • Tag kullanımında genellikle küçük harfler kullanılır.
  • Türkçe karakter kullanılmaz.
  • Her açılan tag kapatılmak zorundadır. Örnek olarak; <title> tag bu şekilde açılır, </title> bu şekilde ise kapatılır. Kapatma işareti "/"dir.

HTML Etiketleri Ne İşe Yarar?​

Yukarıda bahsettiğim Sublime Text 3 editörüne girerek daha detaylı anlatabilmek için bir HTML5 şablonu oluşturdum. Bu şablon üzerinden HTML'de hangi etiket ne işe yarar inceleyelim.

Html nedir

  • <!DOCTYPE html> : Bu etiket sayfanın HTML5 olduğunu belirtir. Sayfanın en üstünde yer alır.
  • <html> </html>: Bu kod arasındaki kodların HTML olarak işaretlenmesini sağlar, üstteki <!DOCTYPE html> haricindeki kodlar, çalışması için bu kodun içinde olmalıdır.
  • <head> </head>: Hazırlanan sayfa ile ilgili bilgileri verebileceğiniz etikettir.
  • <title> </title>: Sayfanın başlık kısmını oluşturan etikettir.
  • <body> </body>: Sayfanın gövdesi yani içeriğini aktaran etikettir.
Sık Kullanılan HTML KodlarıNe İşe Yarar?
<!–…–>Açıklama yazmanıza olanak sağlar.
<!DOCTYPE>Dosya türünü belirlemenizi sağlar.
<a>Bağlantı vermenize olanak sağlar.
<abbr>Kurum ve kuruluşların kısaltmasını yazmanıza olanak sağlar.
<acronym>Kısaltma açıklaması eklemenize olanak sağlar.
<address>Adres eklemenize olanak sağlar.
<area>Fotoğraf üstünde alan belirtmenize olanak sağlar.
<base>Bağlantılar için ana yol bildirmenize olanak sağlar.
<blockquote>Alıntı olduğunu belirtmenize olanak sağlar.
<br>Alt satıra geçmenize olanak sağlar.
<button>Yükle, gönder gibi butonları eklemenize olanak sağlar.
<caption>Tablo başlığı eklemenize olanak sağlar.
<code>Bilgisayar kodu eklemenize olanak sağlar.
<dd>Açıklama eklemenize olanak sağlar.
<div>Alan belirleme ve belirlenen alanların birbirine karışmamasına olanak sağlar.
<frame>Çerçeve oluşturmanıza olanak sağlar.
<img>Fotoğraf eklemenize olanak sağlar.
<ul>,<li>, <ol>Listeleme yaparken (nokta, numaralandırma gibi) düzenli olmasına olanak sağlar.
<meta>Sistemle ilgili bilgi vermenize olanak sağlar. Örneğin yukarıdaki resimde "charset utf 8" kısmı sayfanın UTF-8 karakterleri desteklediğinin bilgisini sunar.
<option> <select>Bu iki etiket birlikte kullanılır ve seçenek eklemenize olanak sağlar.
<pre>HTML içerisinde bir kodu kullanıcılarınıza göstermek istediğinizde kodun çalışmadan kullanıcılara kod şeklinde gösterilmesine olanak sağlar.
<script>JavaScript yani JS kodlarının çağırılmasına olanak sağlar.
<style>CSS kodlarının çağırılmasına ve çalışmasına olanak sağlar.
<table>Tablo oluşturmanıza olanak sağlar.
H etiketleri (h1,h2,h3,h4,h5,h6)H etiketleri başlıkların önem sırasını işaretlemenize olanak sağlar. Konu ile alakalı önem arz eden başlıklar H1 veya H2 ilgili alt başlıklar H3,H4 ile gösterilebilir. H5 ve H6 etiketleri günümüzde çok fazla kullanılmamaktadır. Çok detaylı bir konu hazırlıyorsanız bu etiketleri de kullanabilirsiniz.

HTML Kodları hakkında bilgi vermeye çalıştığım, HTML Nedir? Ne İşe Yarar? Gibi soruları yanıtladığım konunun sonuna geldik. Php derslerine başladığımda önce HTML'i öğrenmem gerektiğini anladığım için bu konuyla birlikte kısa bir tekrar yapmış oldum. Aklınıza takılan soruları yorum yaparak buradan bildirebilirsiniz. Sağ yüzük parmağım çatladığı için konuyu hazırlamam epey uzun sürdü. Umarım işinize yarayan bir konu olmuştur, iyi forumlar ♥
 
Son düzenleme:
Celil

Celil

Server Administrator 🌍
Yönetici
Moderatör
Katılım
28 Şub 2022
Mesajlar
171
Konum
Amsterdam
Kredi
572
Points
91
Ticaret: 0 / 0 / 0
Gerçekten çok başarılı bir yazı olmuş emeğinize sağlık HTML kullanım rehberi açısından başarılı.
 
f5tasarım

f5tasarım

Tilki Adayı
Grafiker
Katılım
28 Şub 2022
Mesajlar
8
Kredi
17
Points
3
Ticaret: 0 / 0 / 0
Ellerine sağlık, soluksuz okunuyor :)
 
Routine

Routine

Tilki Adayı
Katılım
28 May 2022
Mesajlar
4
Konum
Türkiye
Kredi
58
Points
8
Ticaret: 0 / 0 / 0
HTML'i merak edip öğrenmek isteyenler için güzel bir rehber olmuş. Teşekkürler.