Herkese merhaba bu konumuzda W3Schools kaynağının çevirisini yapacağım. Faydalı olması dileğiyle. (Aynı zamanda ben de öğreneceğim, birlikte ilerleyeceğiz.)
HTML nedir?
- HTML'in açılımı -> Hyper Text Markup Language
- HTML internet sitesi oluşturmak için kullanılan bir standart biçimlendirme dilidir.
- HTML bir internet sitesinin yapısını açıklar.
- HTML bir dizi öğeden oluşur.
- HTML öğeleri, tarayıcıya içeriğin nasıl görüntüleneceğini söyler.
- HTML öğeleri, "bu bir başlıktır", "bu bir paragraftır", "bu bir bağlantıdır" gibi içerik parçalarını etiketler.
HTML Elementi(Öğesi) nedir?
Bir HTML öğesi bir başlangıç tag'i ile başlar, sonrasında bazı içeriklerle devam eder ve son olarak bitiş tag'i ile bitir.
Örnek verecek olursak: <tagismi> İçerik bla bla.... <tagismi>
HTML öğesi başlangıç tag'inden bitiş tag'ine kadar olan her şeydir:
<h1> İlk başlığım <h1>
<p> ilk paragrafım <p>
Başlangıç tag'i | İçerik | Bitiş tag'i |
<h1> | İlk başlığım | <h1> |
<p> | İlk paragrafım | <p> |
<br> | boş | boş |
NOT: Bazı HTML öğeleri içeriğe sahip değildir. (<br> gibi). Bu öğeler boş öğeler olarak adlandırılır. Boş öğeler bitiş tag'ine sahip değildirler.
İnternet tarayıcılarının(Chrome, Mozilla, Opera, Brave) amacı HTML dökümanlarını okumak ve bu dökümanların çıktısını doğru şekilde verebilmektir.
Bir tarayıcı HTML etiketlerini görüntülemez, ancak bunları belgenin nasıl görüntüleneceğini belirlemek için kullanır:
Daha açıklayıcı olmasından bir örnek yapalım.
HTML:
[CODE]<html>
<head><title>Sayfanın Başlığı</title>
</head>
<body><h1>Bu ilk başlığımız</h1>
<p>Buraya içeriğimizi yazıyoruz. Merhaba THT</p>
<p>Yine içerik yazıyoruz. Ben vancoondehni ve bu HTML öğrenme amaçlı oluşturduğum konu</p>
</body>
</html>Böyle bir kod yazdık diyelim. Bu kodda bir sürü etiket(tag) var değil mi? Peki internet sitesi görünümünde bu tagler görünecek mi?
Hemen bakalım:
Bir not defteri açıyorum ve bu kodları not defterine kaydediyorum. Sonrasında not defterinin ismini deneme.html olarak kaydediyorum.
Hemen bakalım:
Bir not defteri açıyorum ve bu kodları not defterine kaydediyorum. Sonrasında not defterinin ismini deneme.html olarak kaydediyorum.
NOT: <body> bölümünün içindeki içerik (yukarıdaki beyaz alan) bir tarayıcıda görüntülenecektir. <title> öğesinin içindeki içerik, tarayıcının başlık çubuğunda veya sayfa sekmesinde gösterilecektir.
HTML Dökümanları
- Tüm HTML Dökümanları <!DOCTYPE html> ifadesi ile başlamak zorundadır.
- HTML Dökümanının kendisi <html> ile başlayıp <html> ile biter.
- HTML Dökümanında görülen kısım <body> ile <body> arasındaki kısımdır.
<!DOCTYPE> Yapısı
<!DOCTYPE> yapısı dökümanın türünü belirtmek için kullanılır. Bu yapı tarayıcının, internet sitesini doğru şekilde çıktı vermesi için yardımcı olur.
<!DOCTYPE> yapısı fark duyarlılığına sahip değildir.(case sensitive değil) Büyük veya küçük harfle yazılması önemli değil demek oluyor..
<!DOCTYPE html>
<!DOCTYPE> yapısı fark duyarlılığına sahip değildir.(case sensitive değil) Büyük veya küçük harfle yazılması önemli değil demek oluyor..
<!DOCTYPE html>
HTML Başlıkları
HTML başlıkları <h1> ile <h6> arasındaki değişkenlerle tanımlanır.
<h1> en önemli başlığı temsil ederken, <h6> en az değerli olan başlığı temsil eder.
Bir örnekle gösterecek olursak:
HTML:
[CODE]<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>Yukarıdaki kodun çıktısı aşağıdaki şekildedir:
HTML Paragrafları
- HTML paragrafları <p> ile tanımlanır.
Örneğin: <p>Bu bir paragraftır.</p>
HTML Linkleri
- HTML linkleri <a> tag'i ile tanımlanır.
Örneğin: <a href="https://www.turkhackteam.org/">Bu bir bağlantıdır</a>
Bu bağlantının varış yeri href eklentisi ile spesifik bir hale getirilmiştir.
HTML Renkleri
- HTML renkleri <img> tag'leri ile tanımlanır.
Bir sitenin HTML Kaynak kodları nasıl görülür?
Bir HTML sitesinde, siteye sağ click ile tıklayın. "Kaynak kodu görüntüle(View source code)" kısmına tıklayın. Sonrasında kaynak kodlar açılacaktır.
HTML Elementi(Öğesi) nedir?
Bir HTML öğesi bir başlangıç tag'i ile başlar, sonrasında bazı içeriklerle devam eder ve son olarak bitiş tag'i ile bitir.
Örnek verecek olursak: <tagismi> İçerik bla bla.... <tagismi>
HTML öğesi başlangıç tag'inden bitiş tag'ine kadar olan her şeydir:
<h1> İlk başlığım <h1>
<p> ilk paragrafım <p>
Başlangıç tag'i | İçerik | Bitiş tag'i |
<h1> | İlk başlığım | <h1> |
<p> | İlk paragrafım | <p> |
<br> | boş | boş |
NOT: Bazı HTML öğeleri içeriğe sahip değildir. (<br> gibi). Bu öğeler boş öğeler olarak adlandırılır. Boş öğeler bitiş tag'ine sahip değildirler.
İç içe HTML Öğeleri(Nested HTML Elements)
- HTML öğeleri iç içe yazılabilir.
- Tüm HTML belgeleri iç içe HTML öğelerinden oluşur.
Nasıl yani? Daha açıklayıcı olur musun? Tabi olayım.
HTML:
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>Boş HTML Öğeleri
- İçeriği boş olan HTML öğelerine boş HTML öğeleri diyoruz.
<br> tag'i bir satır boşluk bırakır.
<br> boş bir öğe olduğu için bitiş tag'ine ihtiyaç yoktur.
Örnek verecek olursak:
HTML:
<html>
<body>
<p>Bu <br> boşluk bulunduran bir paragraftır.</p>
</body>
</html>Çıktı:
HTML Büyük/Küçük Harfe Duyarlı Değildir
- HTML etiketleri büyük/küçük harfe duyarlı değildir: <P>, <p> ile aynı anlama gelir.
- Küçük veya büyük harfle yazmanız bir şeyi değiştirmez fakat W3C kodların küçük harfle yazılması taraftarıdır. Alışkanlık olarak küçük harfle yazmanız daha yararlı olacaktır.
HTML Özellikleri
- HTML özellikleri, HTML öğeleri(element) hakkında ek bilgi sağlar.
- Tüm HTML öğelerinin özellikleri olabilir.
- Özellikler her zaman başlangıç etiketinde belirtilir
- Özellikler genellikle ad/değer çiftleri halinde gelir. Örneğin: name="value
href Özelliği
<a> etiketi bir hyperlink'i tanımlar. href özelliği, bağlantının gittiği sayfanın URL'sini belirtir:
Örnek verecek olursak: <a href="https://www.turkhackteam.org">TurkHackTeam'i Ziyaret Et</a>
src Özelliği
<img> etiketi, bir HTML sayfasına bir resim gömmek için kullanılır. src özelliği, görüntülenecek görüntünün yolunu belirtir:
Örnek verecek olursak: <img src="img_girl.jpg">
URL'yi src özelliğinde belirtmenin iki yolu vardır:
1. Mutlak URL(Absolute URL) - Başka bir web sitesinde barındırılan harici bir resme bağlantılar. Örnek: src="https://www.w3schools.com/images/img_girl.jpg".
Notlar: Harici görseller telif hakkı kapsamında olabilir. Kullanmak için izin almazsanız, telif hakkı yasalarını ihlal ediyor olabilirsiniz. Ayrıca, harici görüntüleri kontrol edemezsiniz; aniden kaldırılabilir veya değiştirilebilir.
2. Göreceli URL(Relative URL) - Web sitesinde barındırılan bir resme bağlantılıdır. Burada URL, alan adını içermez. URL eğik çizgi olmadan başlıyorsa, geçerli sayfaya göre olacaktır.
Örnek: src="img_girl.jpg".
URL bir eğik çizgi ile başlıyorsa, etki alanına göre olacaktır.
Örnek: src="/images/img_girl.jpg".
Öneri: Göreli URL'leri kullanmak neredeyse her zaman en iyisidir. Etki alanını değiştirirseniz bozulmazlar.
widht ve height Özellikleri
<img> etiketi görüntünün genişliğini ve yüksekliğini (piksel olarak) belirten widht ve height özelliklerini de içermelidir:
Örnek verecek olursak: <img src="img_girl.jpg" width="500" height="600">
alt Özelliği
<img> etiketi için gerekli alt özelliği, resim herhangi bir nedenle görüntülenemiyorsa, resim için alternatif bir metin belirtir. Bunun nedeni, yavaş bağlantı veya src özelliğindeki bir hata ya da kullanıcının bir ekran okuyucu kullanması olabilir.
Örnek: <img src="img_girl.jpg" alt="Girl with a jacket">
style Özelliği
style özelliği, bir öğeye renk, yazı tipi(font), boyut gibi stiller eklemek için kullanılır.
Örnek: <p style="color:red;">Bu kırmızı bir paragraftır.</p>
lang Özelliği
Web sayfasının dilini bildirmek için her zaman <html> etiketinin içine lang özelliğinizi eklemelisiniz. Bu, arama motorlarına ve tarayıcılara yardımcı olmak içindir.
Örnek:
HTML:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>title Özelliği
title özelliği, bir öğe hakkında bazı ek bilgileri tanımlar.( Daha açıklayıcı olursak sss ifadesini tıklanabilir yani başka sayfaya gönderebilir bir hale getirir.)
title özelliğinin değeri, fareyi öğenin üzerine getirdiğinizde bir araç ipucu olarak görüntülenecektir:
Örnek: <p title="I'm a tooltip">Bu bir paragraftır.</p>
Bölüm Özeti
- Tüm HTML öğelerinin özellikleri olabilir
- <a> öğesinin href özelliği, bağlantının gittiği sayfanın URL'sini belirtir.
- <img> öğesinin src özelliği, görüntülenecek görüntünün yolunu belirtir.
- <img> öğesinin width ve height özellikleri, görüntüler için boyut bilgisi sağlar.
- <img> öğesinin alt özelliği, bir resim için alternatif bir metin sağlar.
- style özelliği, bir öğeye renk, yazı tipi, boyut ve daha fazlası gibi stiller eklemek için kullanılır.
- <html> etiketinin lang özelliği, Web sayfasının dilini bildirir.
- title özelliği, bir öğe hakkında bazı ek bilgileri tanımlar.
Devamını parça parça ekleyeceğim. Umarım faydalı olmuştur.
Son düzenleme:
