Konu İçerikleri:

HTML Nedir?

HTML web sayfaları oluşturulurken kullanılan standart biçimlendirme dilidir. Herhangi bir web sitesine girdiğinizde, tarayıcı ekranında karşınıza gelen şey bir HTML belgesidir. Web siteleri birbirine linklenmiş HTML dosyalarından oluşur. Google Chrome, Firefox, Safari, Edge gibi internet tarayıcıları HTML belgelerindeki etiket adı verilen kodları kullanarak size HTML belgesi içerisindeki içeriği biçimlendirilmiş olarak sunar.

HTML, internet sitelerinin temelini oluşturan bir işaretleme dilidir.

HTML Ne İşe Yarar?

HTML kodu; Chrome, Safari, Firefox, Explorer gibi web tarayıcılarının okuyup anlamlandırabildiği bir dildir. Bu dil de tarayıcılar ve “www” ile birlikte hayatımıza girmiştir ve bu sistemin temel iskeletini oluşturur. Kısaca HTML site kodu olarak kullanılır. Yani bir web sitesi yapmaya yarar.

E-ticaret, blog, kurumsal ya da kişisel fark etmeksizin tüm web sitelerin temel iskeletini bu işaretleme dili oluşturur. Birtakım etiketlerden oluşan bu kod dizisi, dinamikten ziyade statik bir web sitesi hazırlamaya yardımcı olur. CSS ve JavaScript kodlarının da eklenmesi ile bu statik web sitesi, dinamik bir siteye dönüştürülebilir. HTML, asıl altyapıyı oluşturmaya yarar.

HTML Nasıl Öğrenilir?

HTML öğrenmek, dijital dünyada iş yapmak isteyenlerin en çok ihtiyaç duydukları eğitimlerden biridir. Front-end geliştiricisi, içerik yöneticisi; sitesini yöneten bir web, blog ya da e-ticaret sitesi sahibi olmak istiyorsanız, bu dili bilmeniz son derece önemlidir. Peki HTML en kolay nasıl öğrenilir?

Kod yazmak aktif bir işlem olduğu için en etkili yöntem, uygulamalı öğrenmektir. Sadece okuyarak ya da video izleyerek tam anlamıyla öğrenmeniz çok zordur. Bunun yerine her öğrendiğiniz adımı uygulamalı olarak pratiğe dökmeniz gerekmektedir. Bu yöntem, HTML hakkında öğrendiklerinizin kalıcı olmasına ve sonrasında gelişmenize de yardımcı olur.

Hipermetin işaretleme dilini öğrenebilmeniz için internet ortamında, ücretli ve ücretsiz çok sayıda kaynak bulabilirsiniz. Eğitimin ücretli ya da ücretsiz olmasından ziyade eğitimi veren kişinin bilgisi, deneyimleri ve eğitim sürecinin işlevselliği önemlidir. Öncesinde işaretleme dilinin ne olduğunu ve ne işe yaradığını araştırıp öğrenmeniz ise başlangıç için önemlidir.

HTML Nerelerde Kullanılır?

HTML kodlarının en çok kullanıldığı yer, site kurma sürecidir. Bir site üzerindeki hemen her detay, bu kodların yardımı ile şekillenir. Site içeriklerinin temel dinamikleri arasında bulunan başlıkları, paragrafları, metinleri, görselleri ve yapı profillerini oluşturmak ve konumlandırmak için kullanılır.

Site üzerindeki bir yazılı içeriğin hem okunabilirliğini hem de SEO uyumluluğunu artırmak için bu kodlar ciddi bir önem taşır. Metin içerisinde yer alan ana başlıklar, alt başlıklar, bullet pointler, kalın ve italik kelimeler, bu kodlar ile işaretlenir. Ayrıca yazılı içeriğe ek olarak eklenen tablolar ve görsellerin konumlandırması da yine kod eklenerek ayarlanır.

Bir görselin, videonun ya da herhangi bir materyalin web sitesinde yer alması, doğru yerde durması ve kullanıcıya doğru bir şekilde gösterilmesi, başına ve sonuna eklenen HTML etiketlerine bağlıdır. İşaretleme kodları, buton ve arka plan renklendirmesi için de yardımcı olur. Ve site içerisine eklenen tüm bu detaylar hakkında arama motorlarına bilgi vermek de HTML kodlarının görevidir.

HTML Yazarken Nelere Dikkat Edilmelidir?

HTML kodları ve anlamlarını bilmek, yazma sürecine başlamadan önce dikkat edilmesi gereken bir detaydır. Çünkü yapılan bir hatanın sayfalarca kodu kullanılamaz hâle getirmesi de muhtemeldir. Bununla birlikte kullanıcı deneyimini olumsuz etkileyecek sonuçlar da doğurabilir. Kod yazarken dikkat edilmesi gereken detaylardan bazıları ise şöyledir:

• Kodlara, “tag” yani etiketler ile komut verilir.
• Etiketler, “< >” şeklindeki küçüktür ve büyüktür işaretleri arasına yazılır.
• Etiket açmak için gerekli kod, “< >” işaretleri arasına yazılır ve açılan etiketin kapatılması gerekir.
• Etiketin kapatılması için “< >” işaretleri arasındaki kodun başına “/” şeklindeki “slash” işareti konur.
• Kodlar arası metinlerde Türkçe karakter yer alabilirken kodlarda yer almaz.
• Kodlar çoğunlukla küçük harflerle yazılır.

En Çok Kullanılan HTML Kodları Hangileridir?

HTML zengin bir dildir fakat bazı kodlar çok sık kullanılır. Çünkü hemen her sitede mutlaka olması gereken kodlar vardır. En çok kullanılan HTML kod örneklerine göz atmak gerekirse, “body, head, title” gibi terimlerle karşılaşmak olasıdır. Dolayısıyla bunları bilmek, yazma sürecinde önemli bir şekilde pratiklik kazandırır.

<!DOCTYPE html>

“DOCTYPE” etiketi, kodlanan belgenin hangi dilde olduğunu bildirmek için kullanılır. Yanına “html” etiketini de eklemek, sayfanın HTML5 ile hazırlandığını gösterir. Belgeye başlanırken yazılan ilk kod etiketidir.

<html>

Bu etiket, belgenin kök etiketi olarak kabul edilir. HTML kaynak dokümanı yaratmak için kullanılır ve belgenin içerdiği tüm kodlar, bu etiketin içerisinde yer alır. Belge bu kodun kapatılması ile sonlanır.

<head>

Hazırlanan belge ya da sayfanın genel bilgileri, bu etiketin arasına yazılır. Söz konusu bilgiler dil, başlık vb. şeklindedir. Bu etikete yazılan kodlar, sayfada görüntülenmez ve kullanıcıya gösterilmez.

<body>

Sayfanın içeriğini oluşturan kodların yazıldığı etikettir. Belgenin görünen kısmını içerir. Bu etikete metin, paragraf, görsel gibi içerikler ile ilgili kodlar yazılır.

<title>

Belge, sayfa ya da web sitesi için başlık oluşturan etikettir. Tarayıcının en üst kısmında görünen başlığı oluşturmak için kullanılır. <head> etiketlerinin arasına yerleştirilmesi gerekir.

<button>

Hemen her web sayfasının olmazsa olmazları arasında yer alan butonlar, bu etiket ile oluşturulur. Tıklanabilir bir buton yaratmak için kullanılan etikettir.

<img>

Sayfaya resim eklemek için kullanılan <img> etiketi, diğer etiketlerden farklı çalışır. Çünkü sadece açılan bir etikettir ve </img> şeklinde kapanması söz konusu değildir. Bu etikette ayrıca “src” ve “alt” nitelikleri de yer alır. “alt” görüntülenemeyen resimler için alternatif bir metin içerirken “src”, görselin yolunu gösterir.

<a>

Bağlantı ya da köprü etiketi olarak adlandırılmakla birlikte en önemli etiketlerden biri olarak kabul edilir. Kelime ve kelime gruplarının tıklanabilir bir bağlantıya dönüşmesini sağlar. Bu sayede sayfalar ve siteler arasında bir köprü görevi görür.

<hX>,

Metin içeriklerinin okunabilirliğini artırmak için <hX> etiketi kullanılır. Bu bir başlık etiketidir ve “x” yerine bir sayı yazılarak başlığın önceliği ve görünümü ayarlanabilir. Örneğin <h1> birinci başlık, <h2> ikinci başlık, <h3> ise üçüncü başlıktır.

<p>, <div>

Yine yazılı içeriklerde kullanılan <p> etiketi, metni paragraflara ayırmaya yarar. <div> ise belgenin birden çok paragraf içeren belirli bir bölümünün biçimlendirilmesinde kullanılır.

<form>, <frameset>, <table>

Bu etiketler web sitesinin her sayfasında kullanılmasa da içeriğin görünümünü özelleştirmek için etkilidir. <form> etiketi form, <frameset> etiketi çerçeve, <table> etiketi ise tablo hazırlamak için kullanışlıdır.

HTML Tüm Kodlar?

HTML programlama dilinde kullanılan tüm kodlar aşağıda listelenmiştir:

HTML Giriş Örnekleri;

<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>

<h1>Bu bir başlıktır.</h1>
<p>Bu bir paragraftır.</p>

</body>
</html>