sigurd
New member
- Katılım
- 27 Ara 2007
- Mesajlar
- 241
- Reaction score
- 0
- Puanları
- 0
Web sayfasını tasarlamak için ne gereklidir?
Sadece web sayfası tasarlamak istediğimiz zaman bize bir text editörü yeterli olacaktır. Tabiiki bir bilgisayar üzerinde. Windows ortamında çalışanlar için Not Defteri yeterli bir programdır. Diğer işletim sistemleri içinde bu sistemlerde kullanılan text editörleri yeterli olacaktır.
Aslında web sayfası tasarlamak için çok sayıda program geliştirilmiştir. Bunlar webmaster için yardımcı programlardır ve sayfa tasarımındaki zorlukları en aza indirmek için tasarlanmışlardır. Biz bu bölümde bu programlardan bahsetmeyeceğiz. Çünkü HTML li öğrenmek için öncelikle tagları yazarak tam bir şekilde öğrenmek ve kullanımlarını kavramak zorundayız. Yazmak öğrenmek için iyi bir yöntemdir.
Yine bir web sayfası üzerinde kullanacağımız resimler içinde bir resim editörü kullanmamız gerekecektir. Kullanacağımızbu tür bir programın ismi önemli değildir. Sadece GIF ve JPG resim formatlarını işleyebilmeleri yeterlidir. Resim işleme programları genel olarak bu resim formatlarını desteklerler. Yinede bir program tavsiye etmek gerekirse dreamweaver ve photoshop kullanım kolaylığı ve özellikleri sebebiyle güzel programlardır. Deneme sürümü tam fonksiyonlu olarak 60 gün boyunca kullanılabilir. Bu programlara herhangi bir bilgisayar dergisinin verdiği CD lerden veya ulaşabilirsiniz.
Ayrıca bir web sayfası hazırlandığında bunun internette yayınlanması için kullanılan web servere gönderilmesi gerekmektedir. Bunun için bir FTP programı gereklidir. Bu program ile web server üzerinde işlemler yapabilir ve dosyalarımızı web serverimize gönderebiliriz.yine dergi CDlerinde kolaylıkla bulabilirsiniz.
Bu programları edindikten sonra HTML li öğrenmeye başlayabiliriz.
Web sayfasının yapısı
Genel olarak bir websayfasına html belgesi ( html dökümanı ) adı verilir. Html belgesinin kendine özgü yapısı vardır. Bir web sayfası hazırlarken bir bu yapıya uymak zorundayız. Bir html belgesi üç bölümden oluşmaktadır. Bunlar
Html bildirimi
Giriş tanımlama bölümü
Sayfa içeriği
Sırasıyla bu bölümlerin nasıl oluştuğunu görmeden önce html tagı kısaca tag kavramına değinelim.
Html belgesi içerisinde yapmak istediklerimizi belirten komutlara tag adı veriyoruz. Html tagları küçüktür ( < ) ve büyüktür ( > ) işaretleri arasına yazılırlar. Hemen her tagın bir başlangıç ve birde bitiş tagı vardır. Bitiş tagı ile başlama tagı arasındaki tek fark bitiş tagının önüne bölü ( / ) işaretinin gelmesidir. Örnek vermek gerekirse
<birhtmltagı> tagın etki yapacağı içerik </birhtmltagı>
Bu örnekte gördüğümüz herhangi bir tagın nasıl kullanılacağıdır. Tagın etki edeceği alan yazılan yere genel olarak tagdan etkilenecek içeriği yerleştireceğiz.
Html tagları büyük ve küçük harf duyarlı değildir. Bu nedenle istenirse büyük harf istenirse küçük harf veya bunların karışımı kullanılabilir.
Bu açıklamadan sonra şimdide html belgesinin yapısını inceleyelim.
HTML bildirimi
Hazırlanan sayfanın bir html belgesi olduğunu bunu gösterecek olan browsere ( Internet Explorer, Nestcape gibi ) bildirir ve ayrıca sayfanın başlangıcını ve bitişini belirtir. Sayfa içerisinde kullanılacak olan tüm taglar ve içerik bu bölüm içerisinde olmalıdır.
Html bildirimini <HTML> ile yapıyoruz. Bu tag belgenin başlangıcında olacaktır. Birde bu tagın bitiş tagı yani </HTML> bulunmaktadır. Buda belgenin son tagı olacaktır. Bir şema üzerinde gösterecek olursak :
<HTML>
...
kalan tüm içerik ve ve taglar bu bölümde olacaktır.
...
</HTML>
Bu tagın herhangi bir özelliği ve parametresi yoktur ve bu şekilde kullanılır.
Sayfa İçerik Bölümü
Sayfaya yerleştirmek istediğimiz tüm yazı, resim, ses gibi içeriği ve bunları düzenlemekte kullanacağımız tüm tagları bu bölüme yerleştireceğiz. Sunmak istediğimiz bilgilerin bulunduğu bu bölüm <BODY> ve </BODY> tagları arasında bulunur. Kısaca nasıl kullanacağımızı görelim
<HTML>
<HEAD>
...
belge tanımlama tagları burada bulunur.
...
</HEAD>
<BODY>
...
diğer kalan taglar ve içerik burada bulunur.
...
</BODY>
</HTML>
Bir websayfası tasarlarken kullanacağımız genel yapı bu şekildedir. Bu yapıyı içerik ve bu içeriği düzenleyeceğimiz taglar ile dolduracağız. Genel yapıyı verdikten sonra bazı hatırlatmalar yapalım.
Html belgesi harf ve konum duyarlı değildir. Herhangi bir yazı editörü ile yazılabilir. Tasarımı yaparken sayfaya yazıları nasıl yazdığınız önemli değildir. Size en anlamlı gelen şekilde yazıları ve tagları yazabilirsiniz. Düzenlemeleri ise taglar ile yapacağız.
Bu nedenle tüm tagları ve içeriği yanyana bir satıra yazabilir veya birkaç satıra bir cümleyi yayabiliriz. Bunlar sayfanın gösterileceği şekli browser ekranında değiştirmez.
Bir html belgesinde bir boşluk veya daha fazlasıda bir boşluk olarak kabul edilir.
HTML Dosya Yapısı
Bir html belgesi dosya olarak harddiske veya başka bir depolama birimine kayıt edilirken htm veya html uzantılı olarak kayıt edilir. Bunun anlamı hazırladığınız html belgesini kayıt ederken isim.html veya isim.html olarak kayıt etmeniz gerektiğidir.
Sadece isim olarak kayıt ederseiniz bu özellikle windows ortamında isim.txt olarak kayıt edilecek ve bir html dosyası yerine düxyazı dosyası olacaktır.
Html belgelerinin kayıt ederken verceğiniz isimlerde Türkçe karakter kullanmayın. Böyle bir durumda eğer Türkçe windows kullanıyorsanız deneme yaparken herhangi bir sorun çıkmaz. Fakat server üzerinde problemlere sebep olacaktır.
Html dosyalarını isimlendirken büyük/küçük harfleri ( ingiliz alfabesine göre ), alt çizgi ( _ ) , tire ( - ), ve rakamları kullanabilirsiniz.
Açıklama bölümleri
Bir html belgesi hazırlarken belli bölümlerin ne işe yaradığını belirtmek için bazı notları belge içerisine ekleyebiliriz. Ekleyeceğimiz bu notlar browser ekranında görünmeyecektir. Sadece sayfa kodlarını incelerken görülür.
Html belgesi içerisine <!-- ve --> tagları içerisine yerleştiriyoruz. Mesela :
<!-- bu bölüm bir açıklama satırıdır.
browser ekranında görüntülenmez ve sadece sayfanın
kodlarını incelerken görebilirsiniz. -->
Türkçe Karakter Kullanımı
Hazırladığınız sayfa içeriği Türkçe ise ve kullanılan browser Türkçe karakterleri kullanmıyorsa yani eğer browser öntanımlı olarak ingilizceyi kullanıyorsa Tükçe karakterleri doğru olarak göstermiyecektir. Bunun sonucu olarakta sayfanızın içeriği doğru görüntülenmeyecektir.
Bu nedenle sayfada kullanılan dilin Türkçe olduğunu ve Türkçe karakter setinin kullanıldığını belirtmek ve browserin Türkçe karakter setini kullanması gerektiğini bildirmek için şu meta tagı kullanacağız :
<META HTTP-EQUİV="Content-Type"
CONTENT="Text/html; charset=iso-8859-9">
Meta Tagların Kullanıldığı Bir Örnek
Bu gördüğümüz meta tagları bir örnek içerisine yerleştirelim :
<HTML>
<HEAD>
<TITLE> Meta tagların kullanımı </TITLE>
<META HTTP_EQUIV="Content-Type"
CONTENT="Text/Html; Charset="iso-8859-9">
<META NAME="Description"
CONTENT="Websayfalarında meta tagların kullanımını
anlatan örnek bir sayfa.">
<META NAME="Keywords"
CONTENT="Metataglar, html, websayfası, metatag kullanımı,
ornek ifade, sayfa tasarımı,">
<META NAME="Author" CONTENT="Selami Demir">
</HEAD>
<BODY>
Meta taglar web sayfasını tanımladığından önemlidirler.
Genel olarak aramamotorları gibi server programları için
kullanılırlar. Bu nedenle sayfa tanıtımında birinci
dereceden rol oynarlar. Ayrıca Türkçe karakter setinin
kullanılması gerektiğini meta tag ile browsere bildiririz.
</BODY>
</HTML>Yukarıdaki örneğimizi deneyerek sonucu görün. Aslında sayfa içeriğine hiçbir etki yapmadık. Sade Türkçe karakter setin kullanılması gerktiğinin dışında. Burada elinizde öntanımlı ingiliz karekter setinin kullanıldığı bir browser varsa mesela Netcape gibi bu tagı kaldırarak sonucun nasıl olduğunu görebilirsiniz.
Yukarıdaki örnek ifadelerin sonucunu görmek için meta taglar web sayfasını tanımladığından önemlidirler. Genel olarak aramamotorları vede bilgi vermek için kullanılırlar. Bu nedenle sayfa tanıtımında birinci dereceden rol oynarlar. Ayrıca Türkçe karakter setinin kullanılması gerektiğini meta tag ile browsere bildiririz.
Sonuç olarakMetataglar sayfa tanıtımında önemli yer tututarlar bu nedenlede mutlaka kullanılmaları gerekmektedir.
Daha başka meta taglar olmakla beraber burada bu tagları görmeyeceğiz. Yine daha başka başlık tagları da vardır mesela <BASEFONT>,<LINK> gibi. Fakat şimdilik bu tagları görmeyeceğiz. devamı gelcek
Sadece web sayfası tasarlamak istediğimiz zaman bize bir text editörü yeterli olacaktır. Tabiiki bir bilgisayar üzerinde. Windows ortamında çalışanlar için Not Defteri yeterli bir programdır. Diğer işletim sistemleri içinde bu sistemlerde kullanılan text editörleri yeterli olacaktır.
Aslında web sayfası tasarlamak için çok sayıda program geliştirilmiştir. Bunlar webmaster için yardımcı programlardır ve sayfa tasarımındaki zorlukları en aza indirmek için tasarlanmışlardır. Biz bu bölümde bu programlardan bahsetmeyeceğiz. Çünkü HTML li öğrenmek için öncelikle tagları yazarak tam bir şekilde öğrenmek ve kullanımlarını kavramak zorundayız. Yazmak öğrenmek için iyi bir yöntemdir.
Yine bir web sayfası üzerinde kullanacağımız resimler içinde bir resim editörü kullanmamız gerekecektir. Kullanacağımızbu tür bir programın ismi önemli değildir. Sadece GIF ve JPG resim formatlarını işleyebilmeleri yeterlidir. Resim işleme programları genel olarak bu resim formatlarını desteklerler. Yinede bir program tavsiye etmek gerekirse dreamweaver ve photoshop kullanım kolaylığı ve özellikleri sebebiyle güzel programlardır. Deneme sürümü tam fonksiyonlu olarak 60 gün boyunca kullanılabilir. Bu programlara herhangi bir bilgisayar dergisinin verdiği CD lerden veya ulaşabilirsiniz.
Ayrıca bir web sayfası hazırlandığında bunun internette yayınlanması için kullanılan web servere gönderilmesi gerekmektedir. Bunun için bir FTP programı gereklidir. Bu program ile web server üzerinde işlemler yapabilir ve dosyalarımızı web serverimize gönderebiliriz.yine dergi CDlerinde kolaylıkla bulabilirsiniz.
Bu programları edindikten sonra HTML li öğrenmeye başlayabiliriz.
Web sayfasının yapısı
Genel olarak bir websayfasına html belgesi ( html dökümanı ) adı verilir. Html belgesinin kendine özgü yapısı vardır. Bir web sayfası hazırlarken bir bu yapıya uymak zorundayız. Bir html belgesi üç bölümden oluşmaktadır. Bunlar
Html bildirimi
Giriş tanımlama bölümü
Sayfa içeriği
Sırasıyla bu bölümlerin nasıl oluştuğunu görmeden önce html tagı kısaca tag kavramına değinelim.
Html belgesi içerisinde yapmak istediklerimizi belirten komutlara tag adı veriyoruz. Html tagları küçüktür ( < ) ve büyüktür ( > ) işaretleri arasına yazılırlar. Hemen her tagın bir başlangıç ve birde bitiş tagı vardır. Bitiş tagı ile başlama tagı arasındaki tek fark bitiş tagının önüne bölü ( / ) işaretinin gelmesidir. Örnek vermek gerekirse
<birhtmltagı> tagın etki yapacağı içerik </birhtmltagı>
Bu örnekte gördüğümüz herhangi bir tagın nasıl kullanılacağıdır. Tagın etki edeceği alan yazılan yere genel olarak tagdan etkilenecek içeriği yerleştireceğiz.
Html tagları büyük ve küçük harf duyarlı değildir. Bu nedenle istenirse büyük harf istenirse küçük harf veya bunların karışımı kullanılabilir.
Bu açıklamadan sonra şimdide html belgesinin yapısını inceleyelim.
HTML bildirimi
Hazırlanan sayfanın bir html belgesi olduğunu bunu gösterecek olan browsere ( Internet Explorer, Nestcape gibi ) bildirir ve ayrıca sayfanın başlangıcını ve bitişini belirtir. Sayfa içerisinde kullanılacak olan tüm taglar ve içerik bu bölüm içerisinde olmalıdır.
Html bildirimini <HTML> ile yapıyoruz. Bu tag belgenin başlangıcında olacaktır. Birde bu tagın bitiş tagı yani </HTML> bulunmaktadır. Buda belgenin son tagı olacaktır. Bir şema üzerinde gösterecek olursak :
<HTML>
...
kalan tüm içerik ve ve taglar bu bölümde olacaktır.
...
</HTML>
Bu tagın herhangi bir özelliği ve parametresi yoktur ve bu şekilde kullanılır.
Sayfa İçerik Bölümü
Sayfaya yerleştirmek istediğimiz tüm yazı, resim, ses gibi içeriği ve bunları düzenlemekte kullanacağımız tüm tagları bu bölüme yerleştireceğiz. Sunmak istediğimiz bilgilerin bulunduğu bu bölüm <BODY> ve </BODY> tagları arasında bulunur. Kısaca nasıl kullanacağımızı görelim
<HTML>
<HEAD>
...
belge tanımlama tagları burada bulunur.
...
</HEAD>
<BODY>
...
diğer kalan taglar ve içerik burada bulunur.
...
</BODY>
</HTML>
Bir websayfası tasarlarken kullanacağımız genel yapı bu şekildedir. Bu yapıyı içerik ve bu içeriği düzenleyeceğimiz taglar ile dolduracağız. Genel yapıyı verdikten sonra bazı hatırlatmalar yapalım.
Html belgesi harf ve konum duyarlı değildir. Herhangi bir yazı editörü ile yazılabilir. Tasarımı yaparken sayfaya yazıları nasıl yazdığınız önemli değildir. Size en anlamlı gelen şekilde yazıları ve tagları yazabilirsiniz. Düzenlemeleri ise taglar ile yapacağız.
Bu nedenle tüm tagları ve içeriği yanyana bir satıra yazabilir veya birkaç satıra bir cümleyi yayabiliriz. Bunlar sayfanın gösterileceği şekli browser ekranında değiştirmez.
Bir html belgesinde bir boşluk veya daha fazlasıda bir boşluk olarak kabul edilir.
HTML Dosya Yapısı
Bir html belgesi dosya olarak harddiske veya başka bir depolama birimine kayıt edilirken htm veya html uzantılı olarak kayıt edilir. Bunun anlamı hazırladığınız html belgesini kayıt ederken isim.html veya isim.html olarak kayıt etmeniz gerektiğidir.
Sadece isim olarak kayıt ederseiniz bu özellikle windows ortamında isim.txt olarak kayıt edilecek ve bir html dosyası yerine düxyazı dosyası olacaktır.
Html belgelerinin kayıt ederken verceğiniz isimlerde Türkçe karakter kullanmayın. Böyle bir durumda eğer Türkçe windows kullanıyorsanız deneme yaparken herhangi bir sorun çıkmaz. Fakat server üzerinde problemlere sebep olacaktır.
Html dosyalarını isimlendirken büyük/küçük harfleri ( ingiliz alfabesine göre ), alt çizgi ( _ ) , tire ( - ), ve rakamları kullanabilirsiniz.
Açıklama bölümleri
Bir html belgesi hazırlarken belli bölümlerin ne işe yaradığını belirtmek için bazı notları belge içerisine ekleyebiliriz. Ekleyeceğimiz bu notlar browser ekranında görünmeyecektir. Sadece sayfa kodlarını incelerken görülür.
Html belgesi içerisine <!-- ve --> tagları içerisine yerleştiriyoruz. Mesela :
<!-- bu bölüm bir açıklama satırıdır.
browser ekranında görüntülenmez ve sadece sayfanın
kodlarını incelerken görebilirsiniz. -->
Türkçe Karakter Kullanımı
Hazırladığınız sayfa içeriği Türkçe ise ve kullanılan browser Türkçe karakterleri kullanmıyorsa yani eğer browser öntanımlı olarak ingilizceyi kullanıyorsa Tükçe karakterleri doğru olarak göstermiyecektir. Bunun sonucu olarakta sayfanızın içeriği doğru görüntülenmeyecektir.
Bu nedenle sayfada kullanılan dilin Türkçe olduğunu ve Türkçe karakter setinin kullanıldığını belirtmek ve browserin Türkçe karakter setini kullanması gerektiğini bildirmek için şu meta tagı kullanacağız :
<META HTTP-EQUİV="Content-Type"
CONTENT="Text/html; charset=iso-8859-9">
Meta Tagların Kullanıldığı Bir Örnek
Bu gördüğümüz meta tagları bir örnek içerisine yerleştirelim :
<HTML>
<HEAD>
<TITLE> Meta tagların kullanımı </TITLE>
<META HTTP_EQUIV="Content-Type"
CONTENT="Text/Html; Charset="iso-8859-9">
<META NAME="Description"
CONTENT="Websayfalarında meta tagların kullanımını
anlatan örnek bir sayfa.">
<META NAME="Keywords"
CONTENT="Metataglar, html, websayfası, metatag kullanımı,
ornek ifade, sayfa tasarımı,">
<META NAME="Author" CONTENT="Selami Demir">
</HEAD>
<BODY>
Meta taglar web sayfasını tanımladığından önemlidirler.
Genel olarak aramamotorları gibi server programları için
kullanılırlar. Bu nedenle sayfa tanıtımında birinci
dereceden rol oynarlar. Ayrıca Türkçe karakter setinin
kullanılması gerektiğini meta tag ile browsere bildiririz.
</BODY>
</HTML>Yukarıdaki örneğimizi deneyerek sonucu görün. Aslında sayfa içeriğine hiçbir etki yapmadık. Sade Türkçe karakter setin kullanılması gerktiğinin dışında. Burada elinizde öntanımlı ingiliz karekter setinin kullanıldığı bir browser varsa mesela Netcape gibi bu tagı kaldırarak sonucun nasıl olduğunu görebilirsiniz.
Yukarıdaki örnek ifadelerin sonucunu görmek için meta taglar web sayfasını tanımladığından önemlidirler. Genel olarak aramamotorları vede bilgi vermek için kullanılırlar. Bu nedenle sayfa tanıtımında birinci dereceden rol oynarlar. Ayrıca Türkçe karakter setinin kullanılması gerektiğini meta tag ile browsere bildiririz.
Sonuç olarakMetataglar sayfa tanıtımında önemli yer tututarlar bu nedenlede mutlaka kullanılmaları gerekmektedir.
Daha başka meta taglar olmakla beraber burada bu tagları görmeyeceğiz. Yine daha başka başlık tagları da vardır mesela <BASEFONT>,<LINK> gibi. Fakat şimdilik bu tagları görmeyeceğiz. devamı gelcek