HTML Nedir?
HTML’nin Açılımı: HTML, “HyperText Markup Language” kelimelerinin kısaltmasıdır.
- HyperText (Hipermetin): Bağlantılar aracılığıyla birbirine bağlı metin anlamına gelir. Web sayfaları arasındaki bağlantıları ve farklı kaynaklara yönlendirmeyi sağlar.
- Markup (İşaretleme): Metni yapılandırmak, biçimlendirmek ve anlam kazandırmak için kullanılan etiketler demektir. HTML, metnin nasıl görüntülenmesi gerektiğini tarayıcıya bildirir.
- Language (Dil): Belirli bir sözdizimi ve kuralları olan bir iletişim aracıdır. HTML de web sayfalarını oluşturmak için kullanılan özel bir dildir.
HTML’nin Amacı: Web sayfalarının içeriğini tanımlamak ve yapılandırmaktır. Metin, resim, video gibi içerikleri düzenler ve tarayıcıya nasıl görüntüleneceğini söyler.
Web Sayfaları, Web Tarayıcıları ve Sunucular Arasındaki İlişki:
Sunucu: Web sitelerinin dosyalarını (HTML, CSS, JavaScript vb.) barındıran bir bilgisayardır. Kullanıcılar web sitesine eriştiğinde, sunucu bu dosyaları kullanıcının tarayıcısına gönderir.
Web Tarayıcısı (Chrome, Firefox, Safari, Edge): HTML kodunu alan ve kullanıcıya anlamlı bir şekilde görüntüleyen yazılımdır. Tarayıcı, HTML etiketlerini yorumlar ve içeriği ekrana yansıtır.
Kullanıcı: Web sitesini ziyaret eden kişidir. Kullanıcının tarayıcısı, sunucudan aldığı HTML kodunu işleyerek web sayfasını görüntüler.
HTML’nin Diğer Web Teknolojileriyle İlişkisi:
CSS (Cascading Style Sheets): HTML içeriğinin görünümünü (renk, yazı tipi, düzen vb.) kontrol eder. HTML yapıyı tanımlarken, CSS sunumu tanımlar.
JavaScript: Web sayfalarına etkileşim ve dinamik özellikler ekler. Kullanıcıların tıklamaları, form gönderimleri gibi olaylara tepki veren kodlar yazmamızı sağlar.
HTML Yapısı ve Temel Etiketler
Her HTML belgesi belirli bir yapıya sahiptir. Bu yapı, tarayıcının sayfayı doğru şekilde yorumlamasını sağlar.
<!DOCTYPE html>: Bu etiket, belgenin HTML5 standardına uygun olduğunu belirtir. Her HTML belgesinin en başında bulunmalıdır.
<html>: Tüm HTML içeriğini kapsayan kök etikettir. Belge içindeki tüm diğer öğeler bu etiketin içinde yer alır.
<head>: Web sayfasının meta verilerini (sayfa başlığı, karakter seti, bağlantılar vb.) içerir. Kullanıcı tarafından doğrudan görüntülenmez.
- <title>: Sayfanın sekme veya pencere başlığında görünen metni tanımlar. SEO için önemlidir.
- <meta>: Sayfayla ilgili ek bilgiler (açıklama, anahtar kelimeler, karakter seti vb.) içerir. Arama motorları ve tarayıcılar tarafından kullanılır. Örneğin: <meta charset=”UTF-8″> karakter kodlamasını belirtir.
- <link>: Harici kaynaklara bağlantı kurar (örneğin CSS dosyaları). Örneğin: <link rel=”stylesheet” href=”style.css”> bir CSS dosyasını bağlar.
<body>: Web sayfasının içeriğini (metin, resim, video vb.) içerir. Kullanıcı tarafından görüntülenen tüm öğeler bu etiketin içinde yer alır.
Temel HTML Yapısı:
<!DOCTYPE html>
<html>
<head>
<title>Basit Bir Web Sayfası</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam.</p>
</body>
</html>Etiketler, Elemanlar ve Özellikler
Etiketler: HTML öğelerini tanımlayan anahtar kelimelerdir. Genellikle açılış ve kapanış olmak üzere iki parçadan oluşurlar.
- Açılış Etiketi: Öğeyi başlatır. Örnek: <h1>, <p>, <a>. Genellikle köşeli parantezler içinde gelir (< >).
- Kapanış Etiketi: Öğenin sonunu işaretler ve içeriğin bittiğini belirtir. Açılış etiketinine benzer, ancak ek olarak bir eğik çizgi (/) içerir. Örnek: </h1>, </p>, </a>.
Çift Etiketli (İki Yönlü) Etiketler: Çoğu HTML etiketi çift etiketlidir. Yani hem açılış hem de kapanış etiketleri bulunur. Bu tür etiketler, bir öğenin başlangıcını ve sonunu belirleyerek tarayıcıya içeriğin nasıl biçimlendirilmesi gerektiğini söyler. Örnek: <p>, <h1>, <div>.
Tek Etiketli (Boş) Etiketler: Bazı HTML etiketleri tek etiketlidir. Bu tür etiketlerin sadece açılış etiketi bulunur ve herhangi bir içeriği kapsamazlar. Kapanış etiketi bulunmaz veya boş olarak yazılır (/>). Örnek: <br>, <hr>, <img>.
Açıklama Satırı: Açıklama satırları <!-- ile başlar ve --> ile biter. Açıklama satırları arasında yazılanlar html sayfasında görülmez. Örnek: <!-- Buraya açıklamalarınızı yazabilirsiniz. -->Not: HTML etiketleri, büyük/küçük harf duyarlı değildir. Yani <p>
ile <P> aynı anlama gelir. Ancak kodun okunabilirliği için genellikle küçük harfler tercih edilir.
Elemanlar: ir HTML elemanı, bir açılış etiketi, içerdiği metin veya diğer öğeler ve bir kapanış etiketinden oluşur. Eleman, HTML belgesinin temel yapı taşlarından biridir.
Örnek:
- <p>Bu bir paragraf.</p>: Burada <p> açılış etiketi, “Bu bir paragraf.” içeriği ve </p> kapanış etiketi elemanı oluşturur. Paragrafın içeriği, etiketlerin arasında yer alır.
- <h1>Başlık</h1>: Başlık elemanı, <h1> açılış etiketi, “Başlık” içeriği ve </h1> kapanış etiketinden oluşur.
- <img src=”resim.jpg” alt=”Resim açıklaması”>: Bu tek etiketli bir elemandır. Açılış etiketi içerir ancak kapanış etiketi yoktur.
Özellikler: Özellikler, HTML etiketlerine ek bilgi sağlamak için kullanılır. Açılış etiketinin içinde belirtilirler ve genellikle isim=”değer” şeklinde yazılırlar.
- İsim (Name): Özelliğin adını belirtir. Örneğin: src, href, class, id.
- Değer (Value): Özelliğe atanan değeri belirtir. Değer genellikle tırnak içine alınır (” “). Örneğin: src=”resim.jpg”.
Özelliklerin Amacı:
- Görüntü Kaynağını Belirtmek: <img src=”resim.jpg”> (görselin dosya yolunu belirtir)
- Bağlantı Hedefini Belirtmek: <a href=”https://www.example.com”>Example</a> (bağlantının nereye gideceğini belirtir)
- Stil Uygulamak: <p class=”paragraf-stili”>Bu bir paragraftır.</p> (CSS ile stil uygulamak için kullanılır)
- Öğe Kimliği Belirtmek: <div id=”ana-bolum”>…</div> (JavaScript ile belirli öğeleri seçmek veya CSS ile özel stiller uygulamak için kullanılır)
- Erişilebilirlik Bilgisi Sağlamak: <img src=”resim.jpg” alt=”Güneşin batışı resmi”> (ekran okuyucular ve arama motorları için resmin açıklamasını sağlar)
Yaygın Kullanılan Özellikler:
src (Source): Genellikle <img> etiketinde kullanılır, görselin dosya yolunu belirtir.
href (Hypertext Reference): Genellikle <a> (bağlantı) etiketinde kullanılır, bağlantının hedef URL’sini belirtir.
alt (Alternative Text): Genellikle <img> etiketinde kullanılır, görselin açıklamasını sağlar. Görsel yüklenemediğinde veya ekran okuyucular tarafından görüntülenir.
class: Bir HTML öğesine bir sınıf adı atar. CSS ile stil uygulamak için kullanılır. Aynı sınıfa birden fazla öğe atanabilir.
id: Bir HTML öğesine benzersiz bir kimlik atar. Bir sayfada her öğenin sadece bir id’si olabilir. JavaScript ile belirli öğeleri seçmek veya CSS ile özel stiller uygulamak için kullanılır.
style: Doğrudan bir HTML öğesine stil eklemek için kullanılır (genellikle önerilmez, CSS dosyaları tercih edilir).
title: Bir öğenin üzerine gelindiğinde görünen bir araç ipucu metni sağlar.
Kaynak: https://developer.mozilla.org/en-US/docs/Web/HTML