Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!
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> |
Örneğin br, img etiketleri gibi.
| 1 2 3 4 5 | <br /> <img /> |
⇒ 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> |
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 | <html lang="tr"></html> |
