Genel olarak insanlar web sitesine giriş yaptığında arkaplanda neler olduğu ile pek ilgilenmez. Oysa her web sitesinin temelinde bir iskelet vardır. İşte bu iskeletin adı HTML‘dir. Peki HTML nedir? Ne işe Yarar ? Neden bu kadar önemlidir ve nasıl çalışır? Bu yazımızda HTML’in temellerini en sade haliyle öğreneceksiniz ve sizlere anlatımın içinde bir takım html kodlardan örnekler vereceğiz. Hazırsanız başlıyoruz.
Html Nedir ? Ne İşe Yarar ?
HTML, “HyperText Markup Language” ifadesinin kısaltmasıdır. 1990 yılında Tim Berners-Lee tarafından geliştirilmiştir. Türkçeye, “Köprü Metni İşaretleme Dili” olarak çevrilebilir. Yani HTML bir programlama dili değil, web sayfalarının iskeletini oluşturmamıza yardımcı olan ve standart olarak kullanılan bir işaretleme dilidir. Web tarayıcıları (Chrome, Firefox, Safari vb.) bu dili okuyarak sayfanın yapısını anlar ve bize görsel olarak sunar. Buraya kadar Html nedir konusuna yer verdik bundan sonra html ne işe yarar bunlara değinelim.
Web Sayfalarının Yapısını Oluşturur.
Html tanımında da bahsettiğimiz gibi , HTML, web sayfalarının yapısını ve içeriğini tanımlamak için kullanılır. Başlıklar, paragraflar, listeler, tablolar ve diğer öğeler HTML etiketleri kullanılarak yapılandırılır. Bu yapı sayesinde tarayıcılar içeriği doğru bir şekilde görüntüler ve kullanıcı deneyimini iyileştirir. Örnek vermek gerekirse , bir haber sitesinde makale başlıkları, yazar bilgileri, makale metinleri ve resimler HTML etiketleri kullanılarak düzenlenir.
Bir web sayfasının standart Html Kodu :
<!DOCTYPE html>
<html>
<head>
<title>Web Sayfası Başlığı</title>
</head>
<body>
<h1>Merhaba, Dünya!</h1>
<p>Bu, ilk HTML sayfamızın paragrafıdır.</p>
</body>
</html>
Seo ile Sitelere Erişilebilirlik Sağlar
HTML sadece geliştiriciler için değil, aynı zamanda SEO (arama motoru optimizasyonu) için de büyük önem taşır. Google gibi arama motorları sitenizi tararken HTML etiketlerine bakar. <h1> etiketi bir sayfanın ana başlığını temsil ederken, <meta> etiketleri sayfanın açıklamasını verir.<h2> ve <h3> ise yine bir sayfada yer alan başlıklarda kullanılır. Burada yer alan tüm bu etiketlerin sitenin sayfasının ne hakkında olduğu konusunda Google arama motorlarına yardımcı olur.
İçerik ve Görselleri Yerleştirme de Kullanılır.
HTML sadece yazıları göstermekle kalmaz; aynı zamanda görsel, video gibi içerikleri de sayfaya eklememize yardımcı olur. Örneğin bir resim eklemek için <img> etiketi, bir video eklemek için ise <video> etiketi kullanılır. Bu sayede siteler daha renkli ve ilgi çekici hale gelir.
Diyelim ki bir ürün tanıtımı yapıyorsun, ürünün fotoğraflarını ve kısa videolarını sayfaya kolayca yerleştirebilirsin. Böylece ziyaretçiler sadece yazı okumakla kalmaz, görerek de fikir sahibi olur. Kısacası HTML, içerikleri daha canlı hale getirmenin basit ve etkili yoludur.
Görsel eklemek için örnek html kodu :
<img data-src="image.jpg" alt="Açıklama">Video eklemek için örnek html kodu :
<video controls>
<source src="video.mp4" type="video/mp4">
Tarayıcınız video etiketini desteklemiyor.
</video>HTML sayesinde bir sayfadan başka bir sayfaya kolayca geçiş yapabiliriz. Bu geçişler için <a> etiketi kullanılır. Yani bir bağlantı vermek istiyorsan bu etiket tam sana göre.
Mesela bir yazının içinde “buraya tıkla” diyerek başka bir sayfaya yönlendirme yapabilirsin. Aynı şekilde, sayfanın başka bir bölümüne atlamak da mümkün. Bu da ziyaretçilerin sitende kolayca gezinmesini sağlar.
Diyelim ki bu yazının içinde “Yazilim” sayfasını öneriyorsun. Bağlantıyı eklediğinde, okuyucu sadece bir tıkla o sayfaya geçebilir ve oradaki eğitimleri inceleyebilir. Bu da hem bilgiye hızlı ulaşmayı hem de kullanıcı deneyimini kolaylaştırır.
Bir başka sayfaya link vermek için kullanılan HTML Kodu :
<a href="https://www.example.com">Örnek Web Sitesi</a>İçerik Girdisi İçin Html Etiketleri ile Formlar Oluşturulur.
HTML ile sadece içerik göstermekle kalmaz, ziyaretçilerden bilgi alabileceğin formlar da oluşturabilirsin. Bunun için <form>, <input>, <textarea> ve <button> gibi etiketler kullanılır.
Formlar sayesinde kullanıcılar isim, e-posta gibi bilgileri girip, bu bilgileri sana gönderebilir. Örneğin bir üyelik formu hazırlarsan, insanlar siteye kolayca kayıt olabilir. Ya da bir iletişim formu sayesinde sana mesaj bırakabilirler.
Bu da siteni sadece okunur bir yapıdan çıkarıp, kullanıcılarla etkileşim kuran bir yapıya dönüştürür. Yani HTML formlar sayesinde web siteni daha interaktif hale getirmen mümkün. Burada belirtmemiz gereken önemli bir nokta daha var. Burada biz Html Nedir ? Sorusuna , hangi işleri yapabildiğinden bahsederek cevap vermekteyiz. Burada sadece HTML ye ait form etiketleri sayesinde kullanıcıdan istenen bilgilerin girilmesi için alanlar oluşturulabilir. Ama bu alanlarla bilgilerin aktarılması için arkaplan da bir çok kodun çalışması gerekmektedir.
Kullanıcıdan E-Mail bilgisi almak için örnek Html Kodu
<form action="/submit" method="post">
<label for="name">İsim:</label>
<input type="text" id="name" name="name">
<label for="email">E-posta:</label>
<input type="email" id="email" name="email">
<button type="submit">Gönder</button>
</form>
Html Nedir ve ne işe yarar konusunda verdiğimiz cevapları özetlersek ; HTML, web geliştirmenin olmazsa olmazıdır. Web sayfalarının iskeletini oluşturur, yani neyin nerede duracağını HTML belirler. Eğer bir web sayfası düzgün çalışsın, tarayıcıda sorunsuz açılsın istiyorsan, işe HTML ile başlamalısın.
Web dünyasına adım atmak isteyen herkesin ilk öğrenmesi gereken şey HTML’ dir. Çünkü HTML bilmeden CSS veya JavaScript gibi diğer teknolojileri anlamak çok zor olur. Temelin sağlam olursa, gerisi daha kolay gelir.
HTML sayesinde sadece sade yazılar değil, görsellerle, formlarla, bağlantılarla dolu etkileşimli sayfalar da oluşturabilirsin. Hem kullanıcı dostu hem de erişilebilir siteler yapmak HTML ile mümkün. Web geliştirmeye başlamak istiyorsan, yolun HTML’ den geçer. Bu dili öğrendiğinde internetin nasıl çalıştığını çok daha iyi anlayacaksın.
HTML Nedir ? Konusunda Sık Sorulan Sorular ve Cevaplar
Bu yazımızda Html Nedir sorusuna cevap verdik ve kullanıldığı yerleri sizlerle paylaştık. Burada yazdıklarımıza yapacağınız ilaveler varsa , bize iletişim bölümümüzden yazabilir ya da bu yazının sonuna yorum olarak yazabilirsiniz.
Html konusunda daha fazla yazı okumak istiyorsanız Html Kategorimizi takip edebilirsiniz.
Bu yazıda Html Nedir ? Konusunu açıklarken en sık kullanılan bazı Html kodlarından da örnekler verdik. Html de kullanılan tüm kodları öğrenmek istiyorsanız bu konuda en iyi kaynaklardan biri w3schools adındaki İngilizce dilindeki sitedir. Buraya tıklayarak ihtiyacınız olan tüm Html kodlarını bulabilirsiniz.