HTML NEDİR? NE İŞE YARAR?

Fauda · 1 Tem 2021

HTML NEDİR? NE İŞE YARAR? HTML SAYFASI OLUŞTURMA

Web sitesi nasıl yapılır diye merak edip sizde öğrenmeye karar verdiyseniz, ilk başlayacağınız yer Html olmalıdır. Bu yazımızda Html Nedir? Ne İşe Yarar? Html Giriş, Html Açılımı, Html Etiketleri (Tagları), Html Sayfası Oluşturma gibi konuların hepsinden bahsedeceğiz.
Diğer derslerde olduğu gibi yine en temelden başlayıp ileri seviyeye kadar öğreneceğiz. İlk olarak Html Nedir? ile başlayalım.

HTML NEDİR? NE İŞE YARAR?

Html, web sayfalarını yapmak için en temelde kullandığımız bir biçimlendirme dilidir. Html’in açılımı Hyper Text Markup Language‘dir.
Önemli HTML bir programlama dili değildir.
Web sitelerinde görmüş olduğunuz sayfalar aslında birer Html belgesidir. Sadece Html kodları kullanarak alışık olduğumuz gibi görselliği yüksek siteler yapamayız.
Çünkü Html ile sitenin temelini oluşturup daha sonra Css özelliklerini kullanarak sayfamızın tasarımını yapıyoruz. Şuan konumuz Html ama sadece Html kullanılarak yazılan buton ile Css özellikleri uygulanarak yazılan buton arasındaki farka bakalım.

Bu konuya değinmemin sebebi, Html derslerinde ilerledikçe neden yazdığımız kodlar alışık olduğumuz web sitelerine benzemiyor gibi aklınıza gelebilecek sorulara cevap vermek.

Html’e kaldığımız yerden devam edelim.

HTML SAYFA YAPISI

Html sayfalarının yapısı, en temelde şu şekildedir.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html Dersleri</title>
<style>
/* css kodları */
</style>
<script>
/* javascript kodları */
</script>
</head>
<body>
İÇERİK
</body>
</html>

radaki etiketlerin ne işe yaradığından bahsedecek olursak;

<!DOCTYPE html> : Dökümanın türünü belirtir. Burada sayfanın bir Html5 dökümanı olduğunu belirtiyor. Sayfanın en üstünde yazılmalıdır. Tarayıcıların sayfayı doğru görüntülemesini sağlar.

<html> : Tüm Html etiketlerini kapsar. Yani diğer etiketler bunun içerisine yazılır.

<head> : Sayfa ile ilgili bazı bilgilerin ( meta bilgileri, sayfa başlığı vb.. ) tanımlandığı etikettir.

<meta> : Sayfa açıklaması, sitenin yazarı, kullanılan karakter seti vb.. gibi bilgilerin tanımlandığı etikettir.

<title> : Sayfa başlığının verildiği etikettir.

<style> : Css kodlarının yazıldığı etikettir.

<script> : Javascript kodlarının yazıldığı etikettir.

<body> : Sayfa içeriklerinin yazıldığı etikettir. Tarayıcılar sadece buradaki içeriği bize gösterirler.

HTML ETİKETLERİ (HTML TAGLARI)

Sayfa üzerindeki her öğeye etiket denir. Html etiketleri şu şekilde yazılır.

⇒ <etiket-adı> İçerik </etiket-adı>

Örneğin bir p etiketi tanımlamak istiyorsak önce açılış etiketi (<p>) yazılır, sonra içerik kısmı yazılır, en son ise kapanış etiketi (</p>) yazılır.

Örnek olması için h1 ve p etiketi yazalım.

1
2
3
4

<h1>Html Nedir?</h1>
<p>Html, web sitelerini yapmak için en temelde kullandığımız bir dildir.</p>

⇒ Bazı etiketlerin kapanış etiketi yoktur.

Örneğin br, img etiketleri gibi.

1
2
3
4
5

Bu tür içeriği olmayan Html etiketleri boş etiket olarak adlandırılır.

⇒ Html etiketleri büyük – küçük harfe duyarlı değildir. Yani <p></p> ile <P></P> aynıdır. Fakat her zaman etiketleri küçük harfler ile yazmanız önerilir.

HTML ÖZNİTELİKLERİ

Html etiketlerine ek bilgiler vermek için kullandığımız ifadelerdir.

Öznitelikler nitelik : “değer” şeklinde yazılırlar ve her etiket için kullanılabilen öznitelikler farklılık gösterir.

Örneğin bir a etiketi tanımlayalım.

1
2
3

<a href="google.com

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

">Google</a>

Burada a etiketinin açılış etiketi içerisine yazmış olduğumuz href bir özniteliktir. Yani a etiketine bir ek bilgi vermiş olduk. (Bu linke tıklandığında gidilecek adres belirtildi.)

Bir Html sayfasının dilini belirtmek için, Html etiketinin lang özniteliğine değeri yazılır. Bunun belirtilmesi arama motorları için önemlidir.

1
2
3