HTML nedir
HTML nedir sorusunun cevabını bloğumuzda verdik. HTML (HyperText Markup Language) Tim Berners-Lee tarafından 1990 yılında oluşturduğu bir işaretleme dilidir. HTML kodları, internette gördüğümüz web sitelerinin oluşturulmasında kullanılır. Sayfaların temel yapısını oluşturur ve internet tarayıcılar html kodlarını işleyerek bu kodları web sayfasına dönüştürür. İçeriklerin internet sitesinde gözükmesini sağlar ve arama motorlarını web sitesi hakkında bilgilendirir. HTML olmadan tarayıcılar metinleri nasıl göstereceğini bilemez. HTML bir web sayfasının iskelet sistemi olarak düşünülebilir. Başlıca Html etiketlerinden yada bir web sitenin olmazsa olmaz iskeletine örnek verecek olursak;
<!DOCTYPE html>
<html>
<head>
Sayfa ile ilgili tanımlamalar
<title>Sayfa Başlığı</title>
</head>
<body>
Sayfanın içeriğini oluşturacak kısımlar
(Resimler, yazılar vs.)
</body>
</html>Yukarıdaki örnekte görüldüğü gibi html, head, title, body etiketleri HTML’in olmazsa olmaz etiketleridir. Her HTML etiketi “<>” şeklinde açılır. Çoğu HTML etiketleri “</>” şeklinde kapatılır. Kapatılması gereken etiketleri kapatmazsak yazdığımız kodlarda hata alırız. Temel HTML etiketlerini inceleyecek olursak;
<html> Etiketi
Web sitemizin tüm kodlarını kapsayan etikettir.
<head> Etiketi
Bu etiket sayfanın tarayıcıya ve arama motorlarına tanıtıldığı (Meta etiketleriyle), CSS ve Javascript dosyalarının dahil edildiği alanı temsil eder. Head etiketi içine yazılan hiçbir kod tarayıcı ekranında görünmez. Şimdi de bu etiketlerin en sık kullanılanlarını inceleyelim.
<title> Etiketi
Sayfa başlığını belirtir.
<!DOCTYPE html>
<html>
<head>
<title>Web Odası</title>
</head>
<body>
</body>
</html>
<meta> Etiketi
Meta etiketleri sayfaya ait temel bilgileri (Sayfa açıklaması, anahtar kelimeler, başlık vs) tarayıcılara ve arama motorlarına iletir. Böylelikle sayfanın hangi konu ile alakalı olduğunu arama motorları öğrenir ve sonuçları o bilgilere göre listeler. Örnek verecek olursak;
<!DOCTYPE html>
<html>
<head>
<title>Web Odası</title>
<meta charset="utf-8" />
<meta name="description" content="Bu bir web sayfasının tanımıdır.">
<meta name="keywords" content="anahtar, kelimeler, burada, olur">
</head>
<body>
</body>
</html><meta> etiketi çoğunlukla name ile birlikte kullanılır. Örneğin; description, tanımlama demektedir ve sayfa tanımlaması yapılır. keywords, anahtar kelimeler anlamındadır ve arama motorları için gerekli önemli anahtar kelimeler bu kısma yazılır. Charset ile sayfanın dil formatı tarayıcıya belirtilir. Aşağıdaki görselde çok daha rahat anlayabilirsiniz.
<link> Etiketi
- Harici dosyaları HTML dosyaları içerisinde tanımlamamızı sağlar.
- Head etiketi içerisinde tanımlanır.
- Açılıp kapanan etiketlerden biri değildir yani kapanış etiketi bulundurmaz.
- Charset, href, hreflang, media, rel, size, target ve type parametrelerini alabilir.
- Ancak charset ve target parametreleri HTML5 tarafından desteklenmemektedir
<!DOCTYPE HTML>
<html>
<head>
<title>Web Odası</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
</body>
</html>
Yukarıdaki örnekte rel’in açılımı relationship’tir ve dilimizde ilişki anlamına gelmektedir. Sayfaya eklenecek dosyanın ilişkisini tarayıcıya belirtir. Örneğin; ilk satırda bir CSS dosyası eklenmiştir
<style> Etiketi
Bazen sayfaya özgü CSS kodları kullanmak isteyebiliriz. Bunun için style etiketini kullanmamız yeterli olacaktır. Örnegin;
<!DOCTYPE HTML>
<html>
<head>
<title>Web Odası</title>
<style>
body {
color: red;
}
</style>
</head>
<body>
<p>Bu bir deneme yazıdır.</p>
</body>
</html>
Verdiğimiz örnekte sitenin içindeki metinin rengini kırmızı yaptık.
<script> Etiketi
Dışarıdan istemci tarafında çalışacak bir komut dosyası ya da JavaScript dosyası tanımlamak için kullanıyoruz. Script etiketini head içinde kullandığımız gibi body etiketi içinde de kullanabiliriz. İki farklı şekilde kullanılır;
- Dışarıdan bir dosya dahil etmek için kullanlabilir.
<!DOCTYPE HTML>
<html>
<head>
<title>Web Odası</title>
<script src="js/jquery-3.3.1.min.js "></script>
</head>
<body>
</body>
</html>
- Sayfa içersinde bir komut çalıştırmak için kulanıyoruz.
<!DOCTYPE HTML>
<html>
<head>
<title>Web Odası</title>
<script>
$(document).ready(function() {
alert('Sayfa hazır!');
});
</script>
</head>
<body>
</body>
</html>
Bu yazımızda HTML nedir sorusunun cevabı, HTML temel yapısını ve head etiketi içersinde en sık kullanılan etiketler hakkında bilgi verdik. Programlama nedir başlıklı bloğumuzu da okumak isteyebilirsiniz. HTML hakkında youtube videosu isterseniz de webodası youtube kanalına gidebilirsiniz. Diğer yazımızda görüşmek üzere.
Çok yararlı buldum. İşimize yarayacak önemli noktalar yazıda mevcut. Arkadaşı tebrik ederim 🙂
Teşekkür ederim 🙂 ben de yararlı olmasını umuyorum.
Hata!
Yorumunuz Çok Kısa, Yorum yapabilmek için en az En az 10 karakter gerekli