HTML Dosyası Nedir?
HTML, Hyper Text Markup Language’in kısaltmasıdır.
HTML çeşitli anlamlara gelen kodlamalar (tag) ve düz metinden oluşur.
Bu kodlar ancak bir Web Browser (Internet Explorer, Firefox) tarafından anlamlı hale getirilebilir.
Bu kodla yazılmış dosyaların uzantıları genellikle html ya da htm’dir.
HTML, en basit yolla bir not defteri ile yazılabilir.
Denemek İster Misiniz?
Bir not defteri açın ve aşağıdaki yazılanları bu not defterine yazıp deneme.html olarak kaydedin. Sonra da bu dosyayı açın.
Benim Sayfam Bu benim ilk sayfam…
Bu benim ilk sayfam…
HTML’ye GENEL BAKIŞ
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.
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:
ELEMENTLER
HTML 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: metin…
Html nedir?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:
,
Bu kodlar büyük-küçük harf fark etmeden işler. Yani ile 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:
Bu bir kalın yazıdır…
Değişmez Sayfa Yapısı
Bir HTML dosyası her zaman aşağıdaki şekilde kodlanmalıdır:
Sayfa Başlığı (**** etiketler, scriptler, RSS yolları ve CSS dosyası) (Diğer tüm elementler ve düz metin)
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..
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.
BASİT KODLAR
Başlık Kullanma
Başlıklar
‘den
‘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…
H1 Başlık
H2 Başlık
H3 Başlık
H4 Başlık H5 Başlık H6 Başlık
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
Html nedir?Paragraf yeni bir satıra başlangıcı ifade eder. Bunu HTML dilinde ile başlatır ve ile bitiririz. Aynı başlık yapısında olduğu gibi paragraflardan sonra da kendiliğinden satır atlar.
Bu bir paragraf örneği.. Bu da başka bir paragraf örneği..
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 (
) ve **** dışında … gibi kullanılmalı. Aksi takdirde sayfa düzeninde bozulmalar oluşabilir.
Satır Atlamak
Html nedir?Bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda, HTML dilinde satır atlamak için
tagını kullanırız.
Bu bir
paragraf ve satır atlama
örneği..
Bu bir paragraf ve satır atlama örneği..
Temelde
ile
arasında fark yoktur. Fakat (/) eklenmesinin nedeni, satır atlama kodunun bir kapanış tagı olmamasıdır (yani
şeklinde bir kullanım olamaz). W3C Standartlarına göre
daha doğru bir kullanımdır (XHTML gereği).
ÖZELLİKLER
Html nedir?Daha önceden de söylediğimiz gibi, HTML kodları çeşitli özellikleri desteklemekte ve bunları ozellik=”deger” tarzı bir kullanımla belirtmekteydik. Şimdi bunu örnekleyelim:
Ortalanmış Bir Başlık
H1 Başlık
Align özelliği h1, div, td, p gibi anahtarlarda desteklenen sayfa düzeni özelliğidir. Bu değer left (sola), right (sağa) ve center (ortalanmış) olabilir.
Başka bir örnek, tablo kenarlığını tarayıcıya anlatmak:
– bir tablo başlattığımızı anlattık.
– bir tablo başlattığımızı, aynı zamanda bu tablonun kenarlığı olmadığını (0) anlattık.
Bir özelliği yazarken tırnak işareti ya da ayıraç kullanacaksak dikkat etmemiz gereken nokta kullanmadığımız karakterle özelliği belirtmek. Örneğin:
BİÇİMLENDİRME
Yazı Tipi, Yazı Boyutu ve Renk Seçimi
Html nedir?Bunun için kodunu kullanıyoruz. Örneği inceleyelim:
Bu 1. örnek yazı..
Bu 2. örnek yazı..
Bu 3. örnek yazı..
Bu 1. örnek yazı.. Bu 2. örnek yazı.. Bu 3. örnek yazı..
BAĞLANTILAR
Bir HTML belgesinde bağlantı (link) verme işini koduyla yapmaktayız. Link verdiğimiz kelime ortaya gelecek şekilde yine ile bağlantı verme işini sonlandırmaktayız.
Html nedir?Bu şekilde başka bir sayfaya ya da web sitesie bağlantı veririz. Aynı zamanda bu yolla bir müzik dosyası, bir zip arşivi vb. de link vermeniz mümkün.
Aşağıda sitenin bir sayfasına, başka bir siteye, mail adresine ve bir dosyaya link örnekleri görmekteyiz. Bunları inceleyelim:
Kod:
HTML Dersleri için buraya tıklayın (Sayfa) Ana sayfa için buraya tıklayın (Site). Bize e-mail göndermek için buraya tıklayın (E-mail). Site logosunu görmek için buraya tıklayın (GIF resim dosyası).
Html nedir?Dikkat: Bir siteye link verirken Web Hosting şeklinde ya da siteadresi.com şeklinde yazarsanız link yine sayfanızda bu bağlantıyı arar. Bunun için başka bir siteye link verirken mutlaka http:// ile başlanmalıdır.
Bağlantıyı Yeni Pencerede Açmak
Bunun için target=”_blank” özelliğini kodumuza ekleriz. Böylece bağlantı sayfamızda değil yeni bir pencerede açılacaktır:
Sayfa İçi Bağlantılar
Html nedir?;Bazı durumlarda (özellikle uzun sayfalarda) sayfanın belirli bir bölümüne link vermek gerekebilir. Bunun için name=”” özelliğinden yararlanırız. Böyle durumlarda href=”” özelliği kullanılmaz.
Öncelikle sayfa içinde bağlantı vereceğimiz yere giderek şeklinde yer imimizi belirtiyoruz. Böylece sayfanın bu kısmını işaretledik. Şimdi bu işarete link vermek için sayfa içerisinde başka bir yerde (en aşağıda ya da en yukarıda olabilir) (metin) şeklinde işaretlediğimiz yere link veriyoruz.
TABLOLARLA ÇALIŞMAK
Bir HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterli:
Tabloya başlamak. Satıra başlamak. Sütuna başlamak.
satır 1, sütun 1 satır 1, sütun 2 satır 2, sütun 1 satır 2, sütun 2
Html nedir?;Burada dikkat edilmesi gereken birkaç nokta var. Birincisi mutlaka satırlardaki sütun sayıları eşit olmalıdır. Eğer iki sütunu birleştireceksek colspan=”” ya da iki satırı birleştireceksek rowspan=”” özelliğini td kodu içerisinde kullanarak tırnak işareti arasına kaç sütun ya da satır birleştiğini yazmamız gereklidir.
Tablo Özellikleri
border=”0″ Tablo kenarlığı boyutu. cellspacing=”0″ Sütunlar arası kenarlık boşluğu. cellpadding=”0″ Satırlar arası kenarlık boşluğu. width=”genislik” Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir. class=”stil” Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).
TD (Sütun) Özellikleri
align=”hiza” Kutu hizası, left, right, center kullanılabilir. width=”genislik” Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir. height=”yukseklik” Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir. class=”stil” Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).
NOT: Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.
LİSTELEME
Madde İşaretleri
Klasik listeleme şeklidir. Liste
- ile başlar ve
ile biter. Arasına isearasına alınacak şekilde maddeler yerleştirilir:
- Çay
- Kahve
- Kola
- Çay
- Kahve
- Kola
NOT: Sadecekullanarak da listeme yapılabilir. Fakat bu şekilde kullanılırsa maddeler hemen satır başlangıcında görünecektir.
Numaralandırma
Eklenen nesneleri numaralandırarak sıralar. Bir öncekinden farklı olarak liste
- ile başlar ve
ile biter. Arasına isearasına alınacak şekilde maddeler yerleştirilir:
- Çay
- Kahve
- Kola
- Çay
- Kahve
- Kola
Kategori Şekilde Listeleme
Html nedir?;Bu şekilde bir listeleme kullanarak maddelerin altına açıklama yazılabilir. Liste ile başlar ve ile biter. Arasına ise 1. dereceden yakın , 2. dereceden yakın kullanılarak arasına sıralanacak nesneler alınır.
Kahve Kahverengidir Sıcaktır Süt Beyazdır
KahveKahverengidirSıcaktırSütBeyazdır
FORM NESNELERİ
Html nedir?;Formları site ziyaretçileri ya da kullanıcılarından bilgi alma amaçlı kullanırız. Onlardan düz metin, şifre ve seçim kutuları gibi nesneler oluşturarak bilgiler alırız. Bir form alanı ile başlar ve ile biter. Öncelikle bilgi amaçlı yerleştireceğimiz form nesnelerini tanıyalım.
Yazı Alanları ve Form Gönderme
Bu bölümde kısa metinler, uzun metinler ve şifre kutularını tanıyacağız.
Kullanıcı Adı:
Şifre:
name=”isim” – Form için bir isim belirleyin, bu isim bilgileri değerlendirirken yardımcı olur.
action=”dosya” – Formdan alınan bilgiler hangi dosyaya gönderilecek yazılır.
method=”post” – Hangi yöntemle formun teslim edileceği. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.
type=”tür” – Nesnenin türü, yukarıda text ile düz metin, password ile şifre kutusu, submit ile formu gönderme butonu olduğunu belirttik.
size=”boyut” – Nesnenin uzunluğu sadece type değeri text ya da password ise geçerlidir.
name=”isim” – Forma isim verdiğimiz gibi nesnelere de isim vermeliyiz. Bilgileri gönderdiğimiz dosyadan veriyi alırken buradaki isimden yola çıkarız.
value=”deger” – Metin kutusunda ya da butonda yazacak yazıyı buradan belirleriz.
Html nedir?;Görüldüğü üzere type=”” bize form nesnesini şekillendirme şansı veriyor. Bazı durumlarda kullanıcıdan uzun bilgi almamız gerekebilir. Bu durumda kodunu kullanarak metin kutusu yapabiliriz.
Yorumunuzu Yazın:
Yorum Kutusu
cols=”sutun sayısı” Sütun sayısı.
rows=”satır sayısı” Satır sayısı.
Seçim Kutuları
Yine komutu ile tür bölümüne radio yazarak çoktan seçmeli bir form nesnesi oluşturulabilir:
Erkek
Kız
NOT: Sadece bir seçim yapılabilmesi için mutlaka ilgili seçeneklerde name=”” değeri aynı olmalıdır.
Html nedir?Eğer birden fazla nesne seçebilmelerini sağlayacaksak bu kez checkbox türünden yararlanırız.
Arabam var.
Evim var.
Açılır Seçim Kutusu
Seçim kutusu eklemenin diğer bir yolu da kodudur. Bunun kullanımı aşağıdaki gibidir.Kod: Beyaz Kırmızı Siyah
ARKA PLAN KULLANMAK
Html nedir?;Daha önceden HTML belgesinin klasik bir formatı olduğunu ve bunun dışına çıkılmaması gerektiğini söylemiştik. Bahsettiğimiz kodlar arasında ‘ye ekleyeceğiniz bgcolor=”” özelliği ile html belgesinin arkaplan rengini belirleyebilirsiniz:
Bu özellik içerisine yazılan renk kodları ingilizce, 16’lık ya da RGB değerlerinde belirtilmelidir. Bunlara bir resim editörü yardımıyla ulaşabilirsiniz (Photoshop tarzı).
Kod:
Eğer arkaplanda bir resim kullanacaksak bu kez aynı kod için background=”resim” şeklinde bir özellik kullanıyoruz
Burada belirtilen resim arkaplanda döşeli olarak çıkacaktır. Bu iki özelliği aynı zamanda Tablo sütunları ve DIV layerlar gibi birçok alanda kullanabilirsiniz.
