- 7 Ağu 2015
- 5
- 0
:RpS_thumbsup: HTML Kodlarını Anlamak
Bu dili kodlamak için öncelikle HTML, XHTML, XML gibi dillerin temel yapı taşı olan elementlerin (aynı zamanda html kodu, html etiketi, html tagı olarak geçebilir) nasıl çalıştıkları hakkında bilgi vermek gerekir. Bu kodlar < ile başlayıp > ile biten anahtarlardır.
HTML Kodu
<html>
Tüm HTML belgesi bu şekil hazırlanmış kodlardan ve aralarında geçen metin (bunlar arama motorları tarafından ya da ziyaretçi tarafından çoğunlukla görülen düz metinler)'den oluşur. Bir HTML kodu ile ilgili bir özellik belirtilecekse tırnak işareti arasında özellik="değer" şeklinde yazılır:
HTML Kodu
<body bgcolor="black">
Hangi HTML tagının hangi işe yaradığı ve hangi özellikleri desteklediğini daha sonra anlatacağım göreceksiniz. Şimdi elementler hakkında biraz daha fazla bilgi edinelim...:RpS_thumbsup:
ELEMENTLER:
ÖzellikleriHTML dili tag, etiket adlarını verdiğimiz kodlamalardan oluşur.
Bu kodlar < ile başlayıp > ile biterler.
Bir kod genellikle iki parçadan oluşur. Bu elementin başladığı ve bittiği kodlardır. Element bittiği zaman bölü işareti (/) ile başlangıçtaki değerin yazılması yeterlidir. Örneğin: <b>metin...</b>
Tabi her kod bu duruma uymaz. Bazı kodlar için kapanma anahtarı kullanılmaz, onun yerine bu işaret başlangıç kodunun sonuna eklenir. Örneğin: <br />, <hr />
Bu kodlar büyük-küçük harf fark etmeden işler. Yani <b> ile <B> arasında fark yoktur. Buna karşın W3C standartları gereği küçük harf kullanmak daha yararlıdır.
Aşağıda başlayan ve biten bir kalın yazma elementi görmekteyiz:
HTML Kodu
<b>Bu bir kalın yazıdır...</b>
Değişmez Sayfa Yapısı
Bir HTML dosyası her zaman aşağıdaki şekilde kodlanmalıdır:
HTML Kodu
<html> <head> <title>Sayfa Başlığı</title> (**** etiketler, scriptler, RSS yolları ve CSS dosyası) </head> <body> (Diğer tüm elementler ve düz metin) </body> </html>
W3C Standardında bir HTML belgesinde bu kodlar olmazsa olmazdır. Sonuçta yerlerini ters yazsanız da ya da düz metin yazsanız da browser tarafından görünür fakat HTML ön bilgileri, sayfa başlığı, içeriğin bulunduğu yer tarayıcı tarafından görülmez ve hem arama motorları, hem ziyaretçi, hem de browser için bazı sıkıntılar doğurabilir..
Şimdi buradaki standart diyebileceğimiz kodlar ve aralarında geçen html kodlarını incelemeye başlayalım...
Basit Kodlar:
Bu bölümde H1-H2-H3-H4-H5-H6 olarak tabir ettiğimiz başlık yapısı (heading), paragraf açma ve satır atlamayı öğreneceğiz.
Başlık Kullanma
Başlıklar <H1>'den <H6>'ya kadar en büyükten en küçüğe doğru sıralanan ve sayfadaki yerine göre kullanacağımız, W3C standardında başlıklarımızdır. Bu başlıklardan sonra ayrıca bir satır atlanmaktadır...
HTML Kodu
<h1>H1 Başlık</h1> <h2>H2 Başlık</h2> <h3>H3 Başlık</h3> <h4>H4 Başlık</h4> <h5>H5 Başlık</h5> <h6>H6 Başlık</h6>
HTML Görünümü
H1 Başlık
H2 Başlık
H3 Başlık
H4 Başlık
H5 Başlık
H6 Başlık
Yukarıdaki örnekte H1'in değiştirildiğini görüyorsunuz. Daha sonra anlatacağımız CSS stil dosyaları ya da dosya içi stillemeler kullanarak başlık etiketlerinde (renk, boyut vs.) değişiklik yapmanın mümkün olduğunu göreceksiniz.
Paragraflar
Paragraf yeni bir satıra başlangıcı ifade eder. Bunu HTML dilinde <p> ile başlatır ve </p> ile bitiririz. Aynı başlık yapısında olduğu gibi paragraflardan sonra da kendiliğinden satır atlar.
HTML Kodu
<p>Bu bir paragraf örneği..</p> <p>Bu da başka bir paragraf örneği..</p>
HTML Görünümü
Bu bir paragraf örneği..
Bu da başka bir paragraf örneği..
NOT: Açılan bir kodu kapatmayı unutmayınız: Satır atlama (<br />) ve **** dışında <b>...</b> gibi kullanılmalı. Aksi takdirde sayfa düzeninde bozulmalar oluşabilir.
Satır Atlamak
Bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda, HTML dilinde satır atlamak için <br /> tagını kullanırız.
HTML Kodu
<p>Bu bir<br /> paragraf ve satır atlama<br /> örneği..</p>
HTML Görünümü
Bu bir
paragraf ve satır atlama
örneği..
Temelde <br> ile <br /> arasında fark yoktur. Fakat (/) eklenmesinin nedeni, satır atlama kodunun bir kapanış tagı olmamasıdır (yani </br> şeklinde bir kullanım olamaz). W3C Standartlarına göre <br /> daha doğru bir kullanımdır (XHTML gereği).
Not: Teşekkür butonunu unutmayın.
Bu dili kodlamak için öncelikle HTML, XHTML, XML gibi dillerin temel yapı taşı olan elementlerin (aynı zamanda html kodu, html etiketi, html tagı olarak geçebilir) nasıl çalıştıkları hakkında bilgi vermek gerekir. Bu kodlar < ile başlayıp > ile biten anahtarlardır.
HTML Kodu
<html>
Tüm HTML belgesi bu şekil hazırlanmış kodlardan ve aralarında geçen metin (bunlar arama motorları tarafından ya da ziyaretçi tarafından çoğunlukla görülen düz metinler)'den oluşur. Bir HTML kodu ile ilgili bir özellik belirtilecekse tırnak işareti arasında özellik="değer" şeklinde yazılır:
HTML Kodu
<body bgcolor="black">
Hangi HTML tagının hangi işe yaradığı ve hangi özellikleri desteklediğini daha sonra anlatacağım göreceksiniz. Şimdi elementler hakkında biraz daha fazla bilgi edinelim...:RpS_thumbsup:
ELEMENTLER:
ÖzellikleriHTML dili tag, etiket adlarını verdiğimiz kodlamalardan oluşur.
Bu kodlar < ile başlayıp > ile biterler.
Bir kod genellikle iki parçadan oluşur. Bu elementin başladığı ve bittiği kodlardır. Element bittiği zaman bölü işareti (/) ile başlangıçtaki değerin yazılması yeterlidir. Örneğin: <b>metin...</b>
Tabi her kod bu duruma uymaz. Bazı kodlar için kapanma anahtarı kullanılmaz, onun yerine bu işaret başlangıç kodunun sonuna eklenir. Örneğin: <br />, <hr />
Bu kodlar büyük-küçük harf fark etmeden işler. Yani <b> ile <B> arasında fark yoktur. Buna karşın W3C standartları gereği küçük harf kullanmak daha yararlıdır.
Aşağıda başlayan ve biten bir kalın yazma elementi görmekteyiz:
HTML Kodu
<b>Bu bir kalın yazıdır...</b>
Değişmez Sayfa Yapısı
Bir HTML dosyası her zaman aşağıdaki şekilde kodlanmalıdır:
HTML Kodu
<html> <head> <title>Sayfa Başlığı</title> (**** etiketler, scriptler, RSS yolları ve CSS dosyası) </head> <body> (Diğer tüm elementler ve düz metin) </body> </html>
W3C Standardında bir HTML belgesinde bu kodlar olmazsa olmazdır. Sonuçta yerlerini ters yazsanız da ya da düz metin yazsanız da browser tarafından görünür fakat HTML ön bilgileri, sayfa başlığı, içeriğin bulunduğu yer tarayıcı tarafından görülmez ve hem arama motorları, hem ziyaretçi, hem de browser için bazı sıkıntılar doğurabilir..
Şimdi buradaki standart diyebileceğimiz kodlar ve aralarında geçen html kodlarını incelemeye başlayalım...
Basit Kodlar:
Bu bölümde H1-H2-H3-H4-H5-H6 olarak tabir ettiğimiz başlık yapısı (heading), paragraf açma ve satır atlamayı öğreneceğiz.
Başlık Kullanma
Başlıklar <H1>'den <H6>'ya kadar en büyükten en küçüğe doğru sıralanan ve sayfadaki yerine göre kullanacağımız, W3C standardında başlıklarımızdır. Bu başlıklardan sonra ayrıca bir satır atlanmaktadır...
HTML Kodu
<h1>H1 Başlık</h1> <h2>H2 Başlık</h2> <h3>H3 Başlık</h3> <h4>H4 Başlık</h4> <h5>H5 Başlık</h5> <h6>H6 Başlık</h6>
HTML Görünümü
H1 Başlık
H2 Başlık
H3 Başlık
H4 Başlık
H5 Başlık
H6 Başlık
Yukarıdaki örnekte H1'in değiştirildiğini görüyorsunuz. Daha sonra anlatacağımız CSS stil dosyaları ya da dosya içi stillemeler kullanarak başlık etiketlerinde (renk, boyut vs.) değişiklik yapmanın mümkün olduğunu göreceksiniz.
Paragraflar
Paragraf yeni bir satıra başlangıcı ifade eder. Bunu HTML dilinde <p> ile başlatır ve </p> ile bitiririz. Aynı başlık yapısında olduğu gibi paragraflardan sonra da kendiliğinden satır atlar.
HTML Kodu
<p>Bu bir paragraf örneği..</p> <p>Bu da başka bir paragraf örneği..</p>
HTML Görünümü
Bu bir paragraf örneği..
Bu da başka bir paragraf örneği..
NOT: Açılan bir kodu kapatmayı unutmayınız: Satır atlama (<br />) ve **** dışında <b>...</b> gibi kullanılmalı. Aksi takdirde sayfa düzeninde bozulmalar oluşabilir.
Satır Atlamak
Bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda, HTML dilinde satır atlamak için <br /> tagını kullanırız.
HTML Kodu
<p>Bu bir<br /> paragraf ve satır atlama<br /> örneği..</p>
HTML Görünümü
Bu bir
paragraf ve satır atlama
örneği..
Temelde <br> ile <br /> arasında fark yoktur. Fakat (/) eklenmesinin nedeni, satır atlama kodunun bir kapanış tagı olmamasıdır (yani </br> şeklinde bir kullanım olamaz). W3C Standartlarına göre <br /> daha doğru bir kullanımdır (XHTML gereği).
Not: Teşekkür butonunu unutmayın.
Son düzenleme: