HTML (T-17)

Tanıtım

Bu kurs, HTML belgesi oluşturmayı içerir.

Kimler Almalı?

Web sayfası hazırlamak ve yayınlamakla ilgili olan herkes.

Ne Kazandıracak?

Kurs bitiminde katılımcılar şu yetenekleri kazanabileceklerdir: 
• HTML dilini kullanarak bir Web sayfası oluşturmak. 
• HTML etiketlerini öğrenmek. 
• Sayfa Tasarımı. 
• Tablolar Tasarlamak. 
• Formlar Tasarlamak. 
• Stil Sayfalarını Kullanmak. 

Gerekli Ön Bilgi ve Deneyim

Kursa katılmak isteyen kişilerin bilmesi gerekenler: 
Windows İşletim Sistemini deneyimi olan ve Web sayfası tasarlamak isteyen herkes.

Gerekli Materyaller

Katılımcılar şu materyallerle çalışacaktır: 
Kurs kitabı, çalışma disketleri.
Uygulama ortamı:
• Microsoft Windows 98 ya da Windows 2000 İşletim Sistemi 

Kurs Planı

Hafta 1: Temel Bilgiler 
• Temel Kavramlar. 
• Bir HTML Belgesinin Mantıksal ve Fiziksel Yapısı. 
• Web Tasarım ve Web Yayıncılığı İşlemleri. 
Uygulama: Kurs notlarında belirtilen uygulamalar.
Hafta 2: HTML Belgesi Oluşturmak
• HTML Belgesinin Yapısı 
• Ana Etiketler. 
• Bağlantı ve Adresleme. 
• Resim Dosyalarını Kullanmak. 
Uygulama: Kurs notlarında belirtilen uygulamalar
Hafta 3: Sayfa Tasarımı
• Font Kullanımı. 
• Arka Plan Düzenlemek. 
• Tablo Tasarlamak. 
Uygulama: Kurs notlarında belirtilen uygulamalar.
Hafta 4: Çerçeve Yaratmak
• Çerçeve Düzenlemek. 
• Çerçeve Türleri. 
Uygulama: Kurs notlarında belirtilen uygulamalar.
Hafta 5: Stil Sayfaları
• Stil Sayfaların Özellikleri. 
• Stil Sayfalarını Kullanmak. 
Uygulama: Kurs notlarında belirtilen uygulamalar.
Hafta 6: Formlar
• Form Tasarlamak. 
• Form Etiketleri. 
• Form Olayları. 
Uygulama: Kurs notlarında belirtilen uygulamalar.

Takip Kılavuzu

1. Bölümleri haftalık süre içinde okuyun:
Her hafta bir bölüm olmak üzere site üzerinden dokümanları okuyun. Anlamadığınız konuları diğer kaynaklardan araştırın ya da sitedeki forumlarda tartışın.
2. Gözden geçirme sorularını yapın:
Bölümlerin sonunda verilen gözden geçirme sorularını yapıp yapmadığınızı kontrol edin.
Yapamadığınız soruları diğer kaynaklardan araştırın ya da sitedeki forumlarda tartışın.
3. Uygulamalarda belirtilen işlemleri düzenleyeceğiniz bir test ortamında yapmaya çalışın.
Kursumuz uygulama konusundaki çalışmaları tamamıyla size bırakıyor. Ancak birçok konunun anlam kazanması için uygulanması mutlaka gerekmektedir.
4. Kurs sonunda verilen Başarı Belgesini almak için verilen testi yapın ve yollayın

















Hafta 1: Temel Bilgiler 
• Temel Kavramlar. 
• Bir HTML Belgesinin Mantıksal ve Fiziksel Yapısı. 
• Web Tasarım ve Web Yayıncılığı İşlemleri. 
Uygulama: Kurs notlarında belirtilen uygulamalar.
Hafta 2: HTML Belgesi Oluşturmak
• HTML Belgesinin Yapısı 
• Ana Etiketler. 
• Bağlantı ve Adresleme. 
• Resim Dosyalarını Kullanmak. 
Uygulama: Kurs notlarında belirtilen uygulamalar
Hafta 3: Sayfa Tasarımı
• Font Kullanımı. 
• Arka Plan Düzenlemek. 
• Tablo Tasarlamak. 
Uygulama: Kurs notlarında belirtilen uygulamalar.
Hafta 4: Çerçeve Yaratmak
• Çerçeve Düzenlemek. 
• Çerçeve Türleri. 
Uygulama: Kurs notlarında belirtilen uygulamalar.
Hafta 5: Stil Sayfaları
• Stil Sayfaların Özellikleri. 
• Stil Sayfalarını Kullanmak. 
Uygulama: Kurs notlarında belirtilen uygulamalar.
Hafta 6: Formlar
• Form Tasarlamak. 
• Form Etiketleri. 
• Form Olayları. 
Uygulama: Kurs notlarında belirtilen uygulamalar








Hafta 1: Temel Bilgiler 
Amaçlar: 
• Temel Kavramları Açıklamak. 
• Bir HTML Belgesinin Mantıksal ve Fiziksel Yapısını Açıklamak. 
• Web Tasarım ve Web Yayıncılığı İşlemlerini Açıklamak. 
I. HTML Nedir? 
Her gün belki birkaç belki de binlerde Web sayfasına bakıyoruz artık. İşte HTML bu gördüğünün Web sayfalarının resmi dilidir. İnsanların bakacağı Web sayfalarını HTML dili kullanarak hazırlayabilirsiniz. 
HTML dili bir HTML belgesini oluşturur. Diğer bir deyişle bu HTML belgesi tarayıcı programlar aracılığıyla gördüğümüz Web sayfasıdır. 
HTML (HyperText Markup Language), tag (etiket) denilen özel etiketler kullanarak belgelerin biçimlendirildiği bir işaretleme dilidir. Bu belgeler, özellikle tarayıcı (browser) denilen programlar aracılığıyla görüntülenirler. HTML, Internet ve Intranet alanında belgelerin alışverişinde bir standart haline gelmiştir. 
1960’ların sonlarında Ted Nelson adlı bilgisayar uzmanı bugünkü Word Wide Web'in temeli olan hypertext kavramını bulmuştur. Hypertextler belgelerin içindeki metinlerin tarayıcıda (browser) nasıl görüneceğini ve işlevsel olacağını düzenleyen işaretlerdir. Ayrıca belgeler arasında bağlantı kurulmasına olanak sağlar. Örneğin belgenin bir kısmının koyu görülmesi ya da başlık olarak görünmesi için aşağıdaki biçimin kullanılması gibi: 
<H1> En Büyük Bizim Takım </H1> 
<H6> En Küçük Sizin Takım </H2> 
H1 etiketiyle biçimlenen karakterlerin tarayıcıdaki görüntü: 
En Büyük Bizim Takım 
En Küçük Sizin Takım 
A. HTML Belgesi Nedir? 
HTML yalnızca bir belge olarak düzenlenen ve görüntülenecek metini içeren bir text (metin) bir dokümandır. Bu nedenle HTML belgesi olarak adlandırılır. HTML veriler içine yerleştirilen etiketler, belgenin tarayıcı (browser) tarafından nasıl görüneceğini belirler. HTML belgesi, tarayıcı tarafında yorumlanır ve içeriğini kullanıcıya gösterir. 
B. HTML Dilinin Tarihi 
HTML, teknik olarak Standard Generalized Markup Language (SGML) dili ve Document Type Definition (DTD) olarak tanımlanır. SGML ilk olarak IBM tarafından 1960'ların sonlarında, değişik bilgisayar ortamlarında belge taşıma sorununa çözüm olarak GML (General Markup Language) olarak geliştirilmiştir. Zaman içinde GML, SGML olarak International Standards Organization (ISO) tarafından standart haline getirilmiştir. 
Bir SGML belgesi üç ana parçadan oluşur. İlk parça, etiket ile normal metni birbirinden ayırmak için hangi karakter setinin kullanılacağını tanımlar. İkinci parça, etiketlerin uygun olarak kullanılacağı belge tipini tanımlar. Üçüncü parça ise, belgenin asıl metnini ve etiketlerini içerir. Bu üç parçanın hepsi aynı fiziksel dosya içinde olmak zorundadırlar. Bütün HTML tarayıcıları aynı SGML karakter setini ve belge tipini kabul ederler, böylece kullanıcı yalnız metin içeriğini düşünür. 
HTML dilinin standardını sağlamak için W3C (WWW Consortium) adlı bir çalışma grubu çalışmaktadır. Ancak yine de HTML bir standarda kavuşamamıştır. HTML 4 adlı bir standart üzerinde çalışılmasına karşın henüz bütün tarayıcılar (Internet Explorer ve Netscape gibi) bu standartları desteklememektedirler. 
C. HTML Belgesinin Yapısı 
HTML belgesi (document), HTML işaretleme dili ile oluşturulur. Bu dosyanın uzantısı .htm ya da .html dir. HTML, Internet üzerinde bilgilerin paylaşımı için geliştirmiş bir biçimleme yöntemi ya da bir işaretleme dilidir. Internet tarayıcıları (Microsoft Internet Explorer gibi) bu belgeleri okuyarak kullanıcıya gösterir. HTML belgeleri, "< >" işaretleri arasında başlayan ve "</>" işaretleri arasında biten öğelerden oluşur. Bu işaretlerle yapılan tanımlamalara etiket (tag) denir.
<B> Bu yazılar koyu görülecek </B> 
Yukarıda örnekte dikkat edilecek olursa açılan <etiket >, <B> ile başlar ve </B> ile sonlanır. Bütün HTML etiketleri "<" ve ">" işaretleri arasına yazılır. Bazıları tek olarak kullanılır, <B> gibi, bazıları ise açma-kapama olarak kullanılırlar, <B> Dikkat! </B> gibi. 
Genel Biçimi: 
<Etiket başlangıcı> İçerik </Etiket sonu> 
Örnek Etiketler: 
Title etiketi
<TITLE> Örnek Web Sayfası</TITLE> 
Font Etiketi:
<FONT SIZE=10> Sayfamıza Hoş Geldiniz </FONT> 
Bir HTML Belgesinin Yapısı: 
<HTML> 
<HEAD> 
Bu alana, normal olarak Web sayfasında görüntülenmeyen bilgiler yazılır. Bunlar; sayfa başlığı, anahtar kelime tanımlamaları ve sayfa içeriğinde kullanılan karakter bilgisidir (dil, code page vb).
</HEAD> 

Sayfa genelinde öncelikle yüklenmesi istenen Java******************, VB****************** kodları da bu alana yazılabilir. Bunun dışında sayfa hakkında tanımlamalar yapılır. 

<BODY> 

Bu alana, doğrudan Web sayfasında görüntülenecek yazılar ve diğer biçimleme etiketleri yer alır. ASP kodları da yazılabilir. 
</BODY> 

</HTML>
Örnek 1: İlk HTML Belgesi 
<HTML> 
<HEAD> 
<TITLE> ÖRNEK FORM </TITLE> 
</HEAD> 
<body> 
<form name=tatil action=tatilkayit.asp method=post> 
Tarih: 
<input type=text Name= "tarih"> 
<br> 
Otel: 
<input type=text Name= "otel"> 
<br> 
Sure: 
<input type=text Name= "sure"> 
<br> 
<input type=submit Name= "kaydet" value="kaydet"></form>
</body> 
</HTML> 
D. Tarayıcılar (Browser) 
HTML belgesinin içinde yer alan etiketleri yorumlamak ve belgeyi görüntülemek için tarayıcılar kullanılır. Microsoft Internet Explorer© ve Netscape Navigator© programları birer tarayıcı programdır. İstemci bilgisayarda çalışan tarayıcı, yolu belirtilen HTML dosyasını görüntüler. Bu bir Intranet uygulamasının bir sayfası olabilir ya da Internet'e bağlı olan bilgisayarın, görüntülediği bir Web sitesi olabilir. 
Tarayıcı program içinde istenirse HTML kaynak kodları da görüntülenebilir. Örneğin, Internet Explorer için bu komut View mönüsünden Source komutuyla yapılır. Ayrıca Notepad gibi metin işleyici programlarla da HTML dosyalarını içeriği açılabilir. 
II. Gözden Geçirme Soruları 
1. HTML Nedir? Dil midir? Yoksa Web sayfası hazırlamak için kullanılan bir düzenleme biçimimidir.
2. HTML etiketlerinin (tag) görevi nedir?
3 Bir HTML belgesi dosyasını uzantısı nedir?
4. Bir HTML belgesinde bulunan ana etiketler nelerdir?

Hafta 2: HTML Belgesi Oluşturmak
• HTML belgesinin yapısını açıklamak.
• Ana etiketleri tanımak. 
• Diğer belge ve dokümanlarla bağlantı kurmayı açıklamak. 
I. HTML Belgesinin Yapısı
HTML belgesi (document), bir Web sayfası tasarımında gerekli görsel öğeleri göstermek için HTML etiketleriyle oluşturulan bir HTML dosyasıdır. 
Bir HTML belgesinin ana etiketleri vardır. Onlar belgenin belli kısımlarını belirtir. Örneğin HTML belgelerinin <HTML> etiketiyle başlaması gibi. Bunun dışında özellikler biçimleme etiketleri belgenin görünümünü düzenler. 
Bir HTML Belgesinin Yapısı: 
<HTML> 
<HEAD> 

Bu alana, normal olarak Web sayfasında görüntülenmeyen bilgiler yazılır. Bunlar; sayfa başlığı, anahtar kelime tanımlamaları ve sayfa içeriğinde kullanılan karakter bilgisidir (dil, code page vb).
</HEAD> 

Sayfa genelinde öncelikle yüklenmesi istenen Java******************, VB****************** kodları da bu alana yazılabilir. Kodlama için ************************> etiketi kullanılır. 
<body> 

Bu alana, doğrudan Web sayfasında görüntülenecek metinler ve diğer biçimleme etiketleri yer alır. ASP kodları burada da yazılabilir. 
</body> 
</HTML> 
Örnek : İlk HTML Belgesi

<HTML>
<HEAD>
<TITLE> ÖRNEK WEB SAYFASI </TITLE>
</HEAD>
<body>
<H1> Bizim Şirket </H1>
<br>
Faaliyetlerimiz: 
<br>
Ürünlerimiz: 
<br>
Şubelerimiz: 
<br>
Diğer Faaliyetlerimiz: 
<br>
</body>
</HTML>

NOT: <br> etiketi bir satır boşluk vermek için kullanılır. Diğer etiketler gibi eş olarak kullanılmaz. 
A. Bağlantı (Hyperlink) Yapmak
HTML dosyalarının en önemli özelliklerinden birisi; bir dosyadan diğerine geçiş yapmayı sağlayan bağlantılardır (links). Bir HTML dosyada istediğiniz kadar bağlantıya yer verebilirsiniz. 
Bağlantılar <A> etiketi ile yapılır. Anchor (çapa) anlamında gelen bu bağlantı etiketi değişik özellikler alarak kullanıcının bağlantı (link) yapmasını sağlar. 
Örnek:

<A HREF="URL"http://www.farukcubukcu.com"> Eğitim Sitesi </A>

Örnek : Bağlantıların Kullanılması

<HTML> 
<HEAD> 
</HEAD> 
<body> 
Örnek SAyfa
<p>
<a href="http://www.farukcubukcu.com">http://www.farukcubukcu.com</a>
</p> 

Bana yazmak için:
<a href="[[linkleri üyelerimiz görebilir.Üyeyseniz Mailinizi Onaylayın. Bağlantı adresi Sadece üyeler içindir!Buraya tıklayarak üyemiz olabilirsiniz...][[linkleri üyelerimiz görebilir.Üyeyseniz Mailinizi Onaylayın. Bağlantı adresi Sadece üyeler içindir!Buraya tıklayarak üyemiz olabilirsiniz...][[linkleri üyelerimiz görebilir.Üyeyseniz Mailinizi Onaylayın. Bağlantı adresi Sadece üyeler içindir!Buraya tıklayarak üyemiz olabilirsiniz...]</a> adresini tiklayin
</body> 
</HTML> 
Tarayıcıdaki görünümü: 
Bana e-posta göndermek için tıklayın. 
Bağlantılar sadece Internet adreslerine bağlanmayı değil, ayrıca metin ve grafik dosyalara bağlanmayı da sağlar. Örneğin .txt ya da gif, jpeg, gibi dosyalara bağlanmak ya da onları görüntülemek için bağlantılardan yararlanılabilir: 
<A HREF="resim.gif"> Resmi görmek için tıklayın </A> 

II. HTML Etiketleri
HTML belgeleri orijinal metin ve özel HTML etiketlerinden oluşur. Bu etiketler < > ile </ > işaretleri arasında yer alır. Örneğin bir paragrafın tarayıcıda tam olarak görünmesini sağlamak için <P> etiketinin kullanılması gerekir. Bu etiketi kullanmazsanız cümlenin gösteriminde parçalanma olabilir. 
Örnek Yapı:

<P> cümle </P>

Etiketlerin Genel Biçimi:

<etiket adı> değer ya da metin </etiket adı >

Örnek:

<B> Bizim Şirket </B>

Etiket adları genellikle büyük harfle yazılır. HTML sayfalarını biçimlemek için kullanabileceğiniz yüzlerce etiket vardır. Örneğin <BR> etiketi yeni bir satıra geçiş yapmak, <B> etiketi ise koyu yazmayı sağlar. 
A. Görünmeyen Etiketler
HTML etiketlerinin bazılarının biçimleme işlevi yoktur. Diğer bir deyişle bu etiketler yalnızca tanımlama amaçlı kullanılır: 
Örneğin <HEAD> ve </HEAD> etiketleri HTML belgesinin tanıtımını yapar, ancak tarayıcı tarafından görüntülenmez. 
Örnek: 

<HTML> 
<HEAD> 
<TITLE> XYZ Şirketi Web Sayfası </TITLE> 
</HEAD> 
<body> 
.... 
</body> 
</HTML>
Örnek: Karakter Seti Düzenlemesi 
Aşağıdaki iki satır HTML sayfasının Türkçe olarak görünmesini sağlar. 
<title> Ornek HTML Dosyası </title>
<************ ******************************="****************** ***-type" *********************="text/html; charset=ISO-8859-9">
<************ ******************************="****************** ***-Type" *********************="text/html; charset=windows-1254">
B. Ana Etiketler
Bir HTML belgesi içinde mutlaka olması gereken asıl çatıyı oluşturan üç tane temel etiket (eleman) vardır. Bu üç eleman, standardı oluşturabilmek için gerekli olan tek HTML elemanları durumundadırlar. 
<HTML> ... </HTML>
<HEAD> ... </HEAD>
<body> ... </body>
Bu etiketlere tanımlayıcı etiketler denir. Bu etiketler HTML belgesinin türünü belirler. Bu etiketler HTML DTD (document Type Definition) olarak da adlandırılırlar. 

C. Biçimleme Etiketleri
HTML belgeleri içindeki, harflerin tek başına değil de bir blok olarak biçimlenmesi için kullanılır. Kullanıldıklarında, <body> elemanının içinde olmalıdırlar.
Blok biçimleme etiketleri şunlardan oluşur:

<ADDRESS> ...</ADDRESS> Adres bölümünü biçimler.
<H1> ...</H1> Altı başlık düzeyini biçimler.
<HR> Boyutlanabilen, yatay bir çizgi atar.
<BR> BReak (yeni satıra geçiş). 
<P> ...</P> Metnin bir paragraf olduğunu ve yaslı olduğu tarafı belirtir.
<B> ...</B> Metnin koyu görüneceğini belirtir.
<PRE> ...</PRE> Daha önceden biçimlenmiş bir metni kullanmayı sağlar.
<BLOCKQUOTE> ...</BLOCKQUOTE> Diğer bir kaynaktan metin alır.
<CENTER> ...</CENTER> Metni sayfanın ortasına getirir.
<NOBR> Kelimelerin kesilmeyeceğini belirtir.
<WBR> Eğer gerekirse kelimenin kesilebileceğini anlatır.
<BASEFONT SIZE=...> Belge için varsayılan yazı tipini belirler.
<FONT…> ...</FONT> Yazı tipini, büyüklüğünü ve rengini tanımlar.
<DIV> ...</DIV> Metnin ortalanmasını, sağa ya da sola yaslanmasını sağlar.
<marquee> Kayan yazı sağlar.
<DFN> ...</DFN> Tanım yerleştirir.
<xmp> ...</xmp> Metin biçimleme.
<LISTING> ...</LISTING> Metin biçimleme.
<COMMENT> ...</COMMENT> Metne açıklama ekler.
<PLAINTEXT> Metin biçimleme.
D. Resimleri Kullanmak
HTML sayfalarında resim (image) kullanmak oldukça etkilidir. Bu işlem için iki etiket kullanılır: <img> ve <a>. 
Resimler genellikle bir dosya olarak sistemde durur. HTML belgesi içinde onların bağlantıları yapılır: 

<img src="C: esimaraba.jpg">
Bunun dışında Internet üzerindeki bir adresten de resimler alınabilir: 
<img src="http://www.farukcubukcu.com/calisma/resimler/araba.jpg">


Resmin Boyutunu Ayarlamak
<img> etiketiyle bir resmin genişliğini ve yüksekliğini ayarlamak için bir çift özellik kullanmak gerekir: Bunlar: width ve height. 
III. Uygulama
1. Bir Web sayfası üzerinde "En Büyük Bizim Takım" cümlesini değişik font, renk ve büyüklüklerde görüntüleyin. 
2. Bir Web sayfası üzerinde "En Büyük Bizim Takım" cümlesini sola, sağa ve ortalı olarak görüntüleyin. 
3. Bir Web sayfası üzerinde "En Büyük Bizim Takım" cümlesini H1, H2, gibi başlık stilleriyle biçimleyin. 
4. Bir Web sayfası üzerinde "En Büyük Bizim Takım" cümlesini <b> etiketiyle koyu yazdırın. 
IV. Gözden Geçirme
1. Her HTML belgesinde bulunan ana etiketler nelerdir?
2. HTML sayfasının ülke kodunu (dilini) düzenlemek için hangi etiketler kullanılır?
3. Diğer bir URL'e bağlantı nasıl sağlanır. 
4. Resimlerle çalışmak için hangi etiketleri kullanırız?
5. Resimlerimizi istediğimiz boyutta görüntülemek için ne yapabiliriz?
6. Resim kullanımında en önemli sorun; resimlerin sayfa üzerinde hizalanmasıdır.Bu konuda en yaygın çözüm, resimleri bir tablonun hücresinde görüntülemektir. Bunun dışında resimleri hizalamak için hangi etiketleri kullanabiliriz?

Resimler Sadece üyeler içindir!

"Bende bir elma, Sende de bir elma varsa;
Ben sana bir elma verirsem, Sen de bana bir elma verirsen:
İkimizin de de birer elması olur.
Fakat, bende bir bilgi, Sende bir bilgi varsa;
Ben sana bir bilgi verirsem, Sen de bana bir bilgi verirsen:
Bende iki bilgi, Sende de iki bilgi olur!" [Konfiçyüs]

Hafta 3: Sayfa Tasarımı
Amaçlar: 
• Font kullanımını açıklamak.
• Arka plan düzenlemesi yapmak. 
• Tablo kullanmayı açıklamak.
I. Sayfa Tasarımı
HTML dili, Web sayfası hazırlamanın resmi dilidir. Ancak Web sayfalarının içerik ve görsel bakımından etkili olabilmesi için, iyi bir şekilde tasarlanması gerekir. Tasarım temelde bütün HTML kursu boyunca öğreneceğimiz etiketler aracılığıyla yapılır. Örneğin sayfadaki bir metnin yazı tipi, rengi ve hizalaması sayfa tasarım konularını oluşturur. 
Bu hafta arka plan oluşturma, font kullanımı ve tablo kullanımı konularında bilgiler öğreneceğiz: 
A. Arka Plan (Backgroud) Yaratmak
Arka plan (zemin) oluşturmak için BACKCOLOR etiketi kullanılır:
Genel Biçimi: 

<body BGCOLOR="#rrggbb">

Metin ...........

</body>
NOT: "#rrggbb" kırmızı-yeşil-mavi tonların karışımından oluşan onaltılı (hexadecimal) bir sayıdır. 
Kırmızı Zemin: 
<html>
<head>
<************ ******************************="****************** ***-Language" *********************="tr">
<************ ******************************="****************** ***-Type" *********************="text/html; charset=windows-1254">
<************ name="GENERATOR" *********************="Microsoft FrontPage 4.0">
<************ name="ProgId" *********************="FrontPage.Editor.document">
<title>New Page 1</title>
</head>
<body bgcolor="#FF0000">
<b><font size="4">Bizim Şirket'e Hoş Geldiniz</font></b></p>
</body>
</html>

<body> etiketine <BACKGROUND> parametresi resimlerin, belgenin arka planı olarak kullanılmasını sağlanır. Şu anda kullanılan bütün tarayıcılarda bu arka plan resmi, metin alanının arkasına döşenerek kullanılır. 
Genel Biçimi: 

<body BACKGROUND="URL ya da PATH/Dosya.gif">
...
</body>
Tanımlanan Dosya_adı.gif resim dosyası, metin ve grafiklerin bulunduğu görünen alanın arkasında görünür. Kullanımı aynı Windows işletim sisteminde kullanılan Wallpaper (Duvarkağıdı)’a benzetilebilir.
Örnek: Zeminde Bitmap Dosyası Kullanmak

<html>
<head>
<************ ******************************="****************** ***-Language" *********************="tr">
<************ ******************************="****************** ***-Type" *********************="text/html; charset=windows-1254">
<************ name="GENERATOR" *********************="Microsoft FrontPage 4.0">
<************ name="ProgId" *********************="FrontPage.Editor.document">
<title>Yeni Sayfa </title>
</head>
<b><font size="4">Bizim Şirket'e Hoş Geldiniz</font></b></p>
</body>
</html>
B. Yazıtipini Değiştirmek
Web sayfalarında görüntülediğimiz metinlerinde değişik font ve büyüklükte olması için FONT etiketi kullanılır. 
Genel Biçimi: 

<FONT SIZE=Değer>

Örnek: 

<font size="4">Bizim Şirket </font>
Buradaki geçerli değer 1 ile 7 arasında olabilir. Default (varsayılan) değer ise 3’tür. İstenirse, ‘+’ ya da ‘-‘ işareti ile <BASEFONT SIZE …> elemanı yardımıyla göreceli olarak yazı tipi ayarlanabilir. 
Internet Explorer <FONT> etiketine, COLOR ve FACE parametrelerini ekleyerek, yazı tipini ve rengini değiştirme olanağına sahiptir. Netscape ise yalnız COLOR parametresini kabul eder.
COLOR=#rrggbb ya da COLOR=renk
COLOR parametresi, metnin ekranda hangi renk ile görüntüleneceğini tayin eder. #rrggbb olarak hexadecimal (onaltılı) şeklinde RGB kod sistemini temsil eder. alternatif olarak, 16 renk adı da kullanılabilir. 
Kullanılabilecek bazı renk adları: Black, Olive, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple.
Bütün bu renkler, <body> elemanının, BGCOLOR, TEXT, link ve Vlink parametrelerinde de aynı şekilde kullanılabilir. 
Örnek:

<FONT COLOR=#ff0000> Bu metin kırmızıdır </FONT>

ya da 

<FONT COLOR=Red > Bu metin de kırmızıdır </FONT>
C. Tablo Tasarlamak
Tablolar, genellikle verilerin tarayıcı üzerinde listelenmesinde yaygın olarak kullanılır. Özellikle metinlerin ve resimlerin kontrollü biçimde görüntülenmesi için yaygın olarak kullanılır: 
Tablo yaratmada kullanılan etiketler: 

<TABLE> ... </TABLE> Tablo başı ve sonu
<TR ...> ... </TR > Tablo içindeki satırlar
<TD ...> ... </TD> Hücreler
<TH ...> ... </TH> - Tablo başlığı hücresi
<CAPTION ...> ... </CAPTION > Tablo tanıtıcı yazısı
<THEAD> ... </THEAD> Tablonun başlığı
<Tbody> ... </Tbody> Tablonun gövdesi
<TFOOT> ... </TFOOT> Tablo alt başlığı
<COLgroup> ... </COLgroup> Kolon gruplarının hizalaması
<COL> ... </COL> Tek bir kolonun hizalaması
<TABLE BACKGROUND="..."> Tablonun arka alan resmi
<TH BACGROUND="..."> Tablo başlığı için arka plan resmi
<TD BACKGROUND="..."> Hücre için arka plan resmi
<TABLE FRAME="..."> Tablo çerçevesinin görünüşü
<TABLE RULES="..."> Tablo çizgilerinin görünüşü
İçinde hiçbir veri bulunmayan hücrelerin sınırları ekranda görüntülenmez. Bu durumlarda sınırların görünmesi için, hücre içine boş bir satır ya da kesilmeyen boşluklar yerleştirilir. (<TD> &nbsp;</TD> ya da <TD> <BR> </TD>)
Belge içinde tablo yaratırken şu işlemler yerine getirilir: 
• Tablolar, <table> etiketi ile tanımlanır. <table> ile başlar, en sonunda </table> ile biter. 
• <table> etiketi, tablonun satır sayısı kadar ard arda <tr> etiketi içerir. Her sütun için ise bir takım <td> kullanılır. 
• <td> etiketli hücrelere her türlü bilgi (yazı, link, resim, liste, ve hatta başka bir tablo) gelebilir. 
Tablo yapısına örnek: 
ADI SOYADI
AYŞE YILMAZ 
Ahmet Uzun 
Yukarıdaki tabloyu HTML ile şu şekilde kodlayalım: 
<table border> - tablo başlangıcı
<tr> 1. satir başlangıcı
<td>ADI </td> 1. satir 1. sütun
<td>SOYADI </td> 1. satir 2. sütun
</tr> 1. satir sonu
<tr> 2. satir başlangıcı
<td>AYŞE </td> 2. satir 1.sütun
<td>YILMAZ </td> 2. satir 2. sütun
</tr> 2. satir sonu
<tr> 3. satir başlangıcı
<td>Ahmet </td> 3. satir 1.sütun
<td>Uzun </td> 3. satir 2. sütun
</tr> 3. satir sonu
</table> - tablo sonu 
<TABLE> etiketi, tablonun başını ve sonunu belirler. Tablonun oluşması için gereklidir, çünkü diğer tablo elemanları bu elemanın içinde olmadan işlem görmezler. Varsayım olarak tabloların sınırları yoktur. 
Tablolar aşağıdaki örnekteki gibi verilerin düzenli olarak görüntülenmesi (listelenmesinde) yaygın olarak kullanılır. Aşağıdaki kodda bir ASP sayfası için veriyi sorgularken HTML tablosunun yaratıldığına dikkat edin: 
Örnek: Veritabanı Çıktılarının Bir Tablo Olarak Listelenmesi

<% @Language = VB****************** Codepage= 1254 %>
<HTML>
<!-- Ekrandan grubunu almak ve SQL Deyimi kullanmak-->
<HEAD>
<************ ******************************="****************** ***-type" *********************="text/html; charset=ISO-8859-9">
<************ ******************************="****************** ***-Type" *********************="text/html; charset=windows-1254">
<!-- yukaridaki iki satir türkçe çikti saglamak için -->
<TITLE> listeleme 1</TITLE>
</HEAD>

Müşteri Bilgileri:
<%
Set Con = Server.Createobject("ADODB.connection")
Set Rs = Server.Createobject("ADODB.recordset")
Con.Open="Provider=Microsoft.Jet.OLEDB.4.0 ; Data Source=c:datasirket.mdb"
Rs.Open "select * from musteriler", Con
Response.Write "<TABLE BORDER= '1'>"
Do While Not Rs.Eof
Response.Write "<TR> <TD>" & Rs("kodu") & "</TD> <TD>" & Rs("adisoyadi") & "</TD> <Td>" & Rs("adresi") & "</TD> </Tr>"
Rs.MoveNext
Loop
Response.Write "</TABLE>"
Rs.Close
%>
</body>
</HTML>

Tablo tasarımında kullanılan bazı etiketler: 
BORDER
Kullanıldığında, atanan değer tablonun bütün sınırları için geçerli olur. Kullanılmadığında ise tablonu biçbir sınırı olmaz. Fakat kolonlar arasında sınırlar için belli bir alan bırakılır. Bunun anlamı sınırlı genişlikleri ya da sınırsız genişlikleri aynıdır. 
BORDER=değer

CELLSPACING

Tablo içindeki hücrelerin arasındaki boşluğu belirler.

CELLPADDING

Hücrenin sınırı ile metin arasındaki uzaklığı verir.

<TABLE BORDER=0 CELL SPACING=0 CELL PADDING=0>
Olabilecek en sıkışık tablo biçimidir.

WIDTH

Tablonun istenen genişliğini belirtir. Belge genişliğinin yüzdesi ya da tam pixel olarak verilebilir. <TH> ve <TD> elemanları içinde de kullanılır.

HEIGHT

Tablonun istenen yüksekliğini belirtir. Belge genişliğinin yüzdesi ya da tam pixel olarak verilebilir. <TH> ve <TD> elemanları içinde de kullanılır.

ALIGN

Tabloyu sağa ya da sola hizalamak için kullanılır. Bu parametrenin kullanılması, metnin tablonun etrafına sarılmasını da sağlar.

VALIGN (Internet Explorer)

Tablo içindeki yazıların dikey hizasını belirler. top yada bottom değerlerini alabilir.

BGCOLOR (Internet Explorer)

Belirli renk adları ya da rrggbb olarak ile tablonun arka plan rengini belirler.

BORDERCOLOR (Internet Explorer)

Tablonun sınır rengini belirli renk adları ya da rrggbb olarak belirler. Ancak bu parametrenin çalışabilmesi için, daha önceden BORDER parametresi ile bir sınır değeri verilmiş olmalıdır.

<CAPTION> Etiketi

Tablonun açıklayıcı başlığını tanımlar. Bu başlık tabloyu yatay olarak ortalar. 

<COL> Etiketi

Yalnız Internet Explorer tarayıcısının desteklediği bu eleman tablo kolonlarının hizalanmasını sağlamak için kullanılır. 

ALIGN="center|justify|left|right"

Kolonun metin yatay hizalamasını belirler. Default olarak center değerini taşır.

SPAN

ALIGN parametresinin etkileyeceği kolon sayısını verir.
II. Uygulama</P< 
<HTML>
<HEAD>
<TITLE> ÖRNEK WEB SAYFASI </TITLE>
</HEAD>
<body>
<H1> Bizim Şirket </H1>
<br>
Faaliyetlerimiz: 
<br>
Ürünlerimiz: 
<br>
Şubelerimiz: 
<br>
Diğer Faaliyetlerimiz: 
<br>
</body>
</HTML>
1. Yukarıdaki HTML belgesinde metinleri belli bir font ve büyüklükte yazın: 
2. Belgenin zeminine bir gif ya da bmp resim yerleştirin. 
3. Şubelerimiz bölümüne aşağıdaki tabloyu koyun: 
Şubelerimiz: 
Şube İl İlçe 
A Ticaret İzmir Karşıyaka
B Ticaret İzmir Göztepe
C Ticaret İstanbul Kadıköy
D Ticaret İstanbul Taksim 

III. Gözden Geçirme
1. Web sayfalarınızda kaç renge yer verirdiniz?
2. Tablolar neden yaygın olarak kullanılmaktadır?
3. Bir tablo verileri kontrollü gösterdiği gibi, verilerin kontrollü olarak girilmesini de sağlar mı?

Resimler Sadece üyeler içindir!

"Bende bir elma, Sende de bir elma varsa;
Ben sana bir elma verirsem, Sen de bana bir elma verirsen:
İkimizin de de birer elması olur.
Fakat, bende bir bilgi, Sende bir bilgi varsa;
Ben sana bir bilgi verirsem, Sen de bana bir bilgi verirsen:
Bende iki bilgi, Sende de iki bilgi olur!" [Konfiçyüs]

Hafta 4: Çerçeve Yaratmak
Amaçlar: 
• Çerçeveleri tanımlamak.
• Çerçeve tanımları yapmak ve kullanmak. 
I. Çerçeve (Frame) Nedir?
HTML sayfası üzerinde; kendi içinde kontrol edilebilen ayrı bölümlere çerçeve (frame) denir. Çerçeveler, bir HTML sayfasını bağımsız olarak kontrol edilebilen değişik kısımlara böler. 
A. Frame (Çerçeve) Yaratmak
Frame'ler görüntü alanını parçalara bölerek her parçada değişik bir belge görüntülemek için kullanılırlar. Gelişmiş kullanımı olan çerçeve düzenlemesinin temel özelliklerini bu bölümde ele alacağız. 
Çerçevelerin özellikleri: 
• Her çerçeve kendi URL'ine sahiptir.
• Her çerçeveye bir ad verilebilir.
• Her çerçeve kullanıcı tarafından boyutlanabilir ve kendi kendine otomatik olarak boyutlayabilir.
Çerçevelerin kullanım alanlarından bazıları şunlardır: 
İçindekiler sayfası hazırlanarak, metin okunurken bir tarafta sürekli içerik görüntülenebilir.
Bir çerçevede kriter verilerek yapılan işlemler diğer çerçevede beraber görüntülenebilir.Sürekli görünmesi istenen mesajlar ya da araç çubuğu gibi bileşenler için kullanılabilir.
Bir çerçeve belgesi normal bir HTML belgesine çok benzer. Tek farkı içinde <body> etiketi yerine <FRAMESET> etiketinin kullanılmasıdır. Bu etiket bir alt HTML belgesi yaratmayı sağlar. 
Bir çerçeve oluşturmak: 

<HTML>
<HEAD>
</HEAD>
<FRAMESET>
...
</FRAMESET>
</HTML>
Çerçevenin yaratmak için <FRAMESET> etiketi kullanılır. Bu etiket kullanılmadan önce <body> etiketi kullanılmamalıdır, aksi takdirde çerçeve oluşturulamaz. <FRAMESET> etiketi içinde yalnızca <FRAMESET> etiketleri, <FRAME> ve <NOFRAME> etiketleri kullanılabilir. 
<FRAMESET> ile kullanılabilecek parametreler şunlardır:

<FRAMESET ROWS="değer">
Virgülle ayrılmış değerler girilerek çerçeveyi oluşturacak alanların satır olarak yükseklikleri tanımlanır. Bu değerler pixel olarak verilebileceği gibi, 1 ile 100 arasındaki bir yüzde ile ya da göreceli boyutlar olarak tanımlanabilir. Burada belirtilen satır sayısı, yaratılacak olan çerçeve sayısını da belirleyecektir. 
NOT: Bu dokümanlar Faruk Çubukçu tarafından hazırlanmıştır. Ticari amaçlı olarak kullanılmaz. Daha fazla bilgi için [[linkleri üyelerimiz görebilir.Üyeyseniz Mailinizi Onaylayın. Bağlantı adresi Sadece üyeler içindir!Buraya tıklayarak üyemiz olabilirsiniz...] adresine bakınız. 
Değer
Girilen herhangi bir sayı pixel kadar sabit aralık olarak işlem görecektir. Tehlikeli olan kullanıcının penceresi boyut değiştirdiğinde frame boyutunun değişmemesidir. Eğer aralıklardan biri pixel olarak kullanıldığında, diğer satır aralıklarının yüzde olarak verilmesi daha kullanışlı olacaktır. Aksi taktirde satırlar işlem görürken birbirleri üzerine binerler. 
Değer%
1 ile 100 arasında bir sayı verilebilir. Eğer toplam değer 100'den fazla ise, bütün yüzdeler aynı oranda azalacaktır. Eğer değerler toplamı 100'den az ise ve bir göreceli değer atanmışsa, fazla kalan boşluk göreceli değere eklenir. Göreceli bir değer olmadığı durumlarda, bütün yüzdeli değerler orantılı olarak arttırılır. 
Değer*
"*" değeri göreceli değer verilirken, satırın geriye kalan bütün alanı kapsaması için kullanılır. Eğer "*" işareti önünde bir sayı varsa, satır diğer göreceli değerlerden daha büyük olacaktır. Örneğin; "2*,*" yazıldığında, ilk satır bütün alanın 2/3'ünü, diğer satır ise 1/3ünü alacaktır.
Örnek:
ROWS="satırların yüksekliğini veren değerler listesi"
<FRAMESET ROWS="20%,60%,20%"
Birinci ve son satır arkadaki satırdan daha küçük olacaktır.
<FRAMESET ROWS="100,*,100"
Birinci ve son satır sabit aralıklı, ortadaki satır ise geriye kalan aralığı kullanır.
COLS="Kolon genişliğini veren değerler listesi"
Satırların değerleri verilirken kullanılan formatın aynısı kullanılarak kolonların genişlikleri tanımlanır. 
<FRAMESET COLS="250,*">

<FRAME> Etiketi

Bir frameset içindeki tek bir frame'i tanımlar. <FRAME> elemanı taşıyıcı olmadığı için kapama elemanı yoktur. 6 tane parametresi vardır. 
SRC="URL"

Tanımlanan frame içinde görüntülenecek belgenin adresini tanımlar. Bu parametre olmadan, frame boş olarak görünecektir.
NAME="Pencere adı"
Diğer belgeler tarafından hedef olarak gösterilebilen frame adını belirtir. (Bu olay genelde aynı belgedeki diğer frame'ler tarafından yapılır.) İstenirse kullanılmayabilir. Varsayılan değer olarak bütün frame'ler adsızdır.
Adlar alfanümerik bir karakter ile başlamalıdır. Atanacak değerler dışında önceden tanımlanmış bir kaç hazır ad vardır. 
_blank Belirlenen linki her zaman yeni ve adsız bir pencere içinde açar.

_self Belirlenen linki her zaman kendi üzerine yükler.

_parent Belirlenen linki parent (ana) pencere üzerine yükler. Parent pencere yoksa kendi üzerine yükler.

_top Belirlenen linki en yüksek dereceli pencereye yükler. En yüksek pencere kendisi ise kendi üzerine yükler.
MARGINWIDTH="değer"

Frame üzerinde marjin ayarlaması yapmak istendiğinde kullanılır. Frame'in sol ve sağ marjinlerini pixel olarak tanımlar.
MARGINHEIGHT="değer"

Frame üzerinde marjin ayarlaması yapmak istendiğinde kullanılır. Frame'in üst ve alt marjinlerini pixel olarak tanımlar.
SCROLLING="yes|no|auto"

Frame'in kaydırma çubuğu alıp almayacağını belirtir. Yes değeri her zaman bir kaydırma çubuğuna sahip olacaktır. No değeri verilirse hiçbir zaman görünür duruma gelmeyecektir. Auto değeri ise kaydırma çubuğunun gerekli olduğu zaman görünmesini sağlar.
NORESIZE

Frame penceresinin kullanıcı tarafından tekrar boyutlandırılamayacağını belirtir. Dikkat edilmesi gereken durum, bir frame boyutlandırılamaz duruma getirildiğinde, o frame'in etrafındaki frame'lerde aynı duruma gelecektir.
FRAMEBORDER="yes|no"

Internet Explorer tarafından kullanılan bu parametre, frame sınırlarının görünmesini ya da gizlenmesini sağlar. 
FRAMESPACING="değer"

Yine yalnız Internet Explorer tarafından kullanılan bu parametre, sınırlara değişik görünüş kazandırmak için kullanılır.
<NOFRAMES>

Tarayıcının frame'leri gösteremediği durumlarda bu parametreler arasındaki frame elemanlarını dikkate alınmamasını sağlar.

Örnek: Frame Örneği


Aşağıdaki HTML belgesi üç çerçeve oluşturmaktadır: 

<html>
<head>
<title>New Page 1</title>
<************ name="GENERATOR" *********************="Microsoft FrontPage 4.0">
<************ name="ProgId" *********************="FrontPage.Editor.document">
</head>
<frameset rows="115,*" framespacing="0" border="0" frameborder="0">
<frame name="banner" scrolling="no" noresize target="*********************s" src="up.htm">
<frameset cols="182,*">
<frame name="*********************s" target="main" src="left.htm">
<frame name="main" src="right.htm">
</frameset>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Aşağıdaki örnekte bir ana mönü frame'i ve onun çağırdığı bir alt mönü HTML dosyasıyla mönü seçeneklerinin seçilmesi sağlanmaktadır. 

Ana Mönü: 

<html>
<frameset cols="150,*">
<frame name="*********************s" target="main" src="malzeme_altmenu.htm">
<frame name="main" src="malzeme_bos.htm">
<noframes>
<body>
<p> Çerçeveli sayfa.</p>
</body>
</noframes>
</frameset>
</html>

Menü seçenekleri: Altmönü: 
<html>
<head>
<base target="main">
</head>
<body BGCOLOR="#aaffbb">
<BR>
<a href="malzeme_ana_giris_formu.htm">Malzeme Ana Kartı Giri?i</a>
<BR>
<BR>
<a href="malzeme_hareket_giris_formu.htm">Malzeme Hareket Kartı Giri?i</a>
<BR>
<BR>
</body>
</html>
NOT: Frame örneği için program dosyalarımız arasındaki malzeme_menu.htm ve diğer malzeme_ ile başlayan örnekleri inceleyin. Bu dosyaları bildiğimiz gibi yayınevinin sitesinden ([[linkleri üyelerimiz görebilir.Üyeyseniz Mailinizi Onaylayın. Bağlantı adresi Sadece üyeler içindir!Buraya tıklayarak üyemiz olabilirsiniz...]) ya da yazarın e-mailinden (farukcubukcu@hotmail.com) temin edebilirsiniz. 

II. Uygulama
Şirketimizin Web sayfasını çerçeveli olarak oluşturalım: Web sayfasını ili bölüm olarak düşünün. Sol tarafta bir bölümde ana menü gibi seçenekler listelensin. Bu bölüm bir çerçeve olarak çalışsın. Yine bu bölümdeki menü seçeneklerine tıklandığında sağ tarafta (ikinci çerçevede) ilgili metinler görünsün. 
<HTML>
<HEAD>
<TITLE> ÖRNEK WEB SAYFASI </TITLE>
</HEAD>

<body>
<H1> Bizim Şirket </H1>
<br>
Faaliyetlerimiz: 
<br>
Ürünlerimiz: 
<br>
Şubelerimiz: 
<br>
Diğer Faaliyetlerimiz: 
<br>

</body>
</HTML>
III. Gözden Geçirme
1. Çerçeve kullanmanın yararları nelerdir?

Resimler Sadece üyeler içindir!

"Bende bir elma, Sende de bir elma varsa;
Ben sana bir elma verirsem, Sen de bana bir elma verirsen:
İkimizin de de birer elması olur.
Fakat, bende bir bilgi, Sende bir bilgi varsa;
Ben sana bir bilgi verirsem, Sen de bana bir bilgi verirsen:
Bende iki bilgi, Sende de iki bilgi olur!" [Konfiçyüs]

Hafta 5: Stil Sayfaları
Amaçlar: 
• Stil Sayfalarını tanımlamak.
• Stil Sayfalarını HTML belgelerine eklemeyi açıklamak. 
I. Stil Sayfaları
Cascading Style Sheets (CSS), HTML’nin en yeni özelliklerinden birisidir. HTML belgelerinin farklı görünmelerini sağlayan şablonlar oluşturmayı sağlar. Stil sayfaları bir etiketin değişik şekillerde uygulanmasını sağlar. 
A. <STYLE> Etiketi
Stil sayfaları <style> etiketiyle tanımlanır. 
Genel Biçimi: 
<STYLE> 
Etiket { stil belirtimi }
</STYLE> 
Stil bilgileri bir belgenin tamamı için kullanılabileceği gibi bir etiketin etkileyeceği alan için de yapılır: 
Style yaratma örneği: 

<HTML> 
<HEAD> 
<TITLE> Sıralı Liste </TITLE> 
<STYLE TYPE=”text/css”>
H1 {font.size:50pt;
Font-family: Times New Roman}
</STYLE>
</HEAD>
<body>
<H1> Sıralı Liste </H1> 
</body>
</HTML>
Cascading Style Sheet (CSS) standardı kod yazarına fontlar, boyutlar ve grafik işlemler üzerinde daha fazla kontrol sağlamasına olanak sağlar. CSS ayrıca formatlama bilgisini Web sayfasının içeriğinden ayırabilir. Style sheetler, HTML etiketlerinin görünümünü kontrol ederler. Ancak onları değiştirmezler. Style sheetler ayrıca style bilgisinin bir ya da daha çok HTML belgesine bağlanmasını sağlarlar. formatlama bilgisi belli bir tarayıcı için özel etiketlere ve standart HTML etiketlerine uygulanabilir. 

CSS bilgisi link edilerek ya da gömülerek belirtilebilir. Bir HTML belgesi bu yöntemlerden birisini kullanabilir. Bununla birlikte en yaygın kullanılan yöntem bağlantıdır (linking). 


Bir style sheet için yapılan bağlantıya örnek:

<link REL=STYLESHEET TYPE="text/css" HREF="./bizim.css">
Örnek : CSS Kullanımı 
<link REL="stylesheet" HREF="fcc.css" TYPE="text/css">
</HEAD>
<body>
<P class=yazi16 align=center>Kurs Kayıt Sayfası</P>
<P class=yazi10 align=center>Lütfen aşağıda kayıtlı olan alanları doldurunız ve gönder düğmesine basınız. Girmiş olduğunuz e-mail adresine
kayıt bilgileriniz gönderilecektir. İlginiz için teşekkür ederiz.</P>
<form action="kurskaydi2.asp" method=POST id=form1 name=form1>
<TABLE class=yazi10 WIDTH=75% ALIGN=center BORDER=1 CELLSPACING=1


CSS dosyaları aşağıdaki biçimde { işaretleri } arasında hazırlanır ve HTML belgelerinde bu format belgeleri işaret edilerek kullanılır. Yukarıdaki satır buna bir örnektir. 
Örnek: Bir CSS Dosyası 

CSS dosyası aşağıdaki biçimde hazırlanır ve CSS uzantılı olarak kaydedilir. Örneğin fcc.css. Tasarımda belli format adları ve onların özellikleri tanımlanır: 
body {font-family: Verdana, Arial, Helvetica;
}
p {font-family: Verdana, Arial, Helvetica;
}
.anabaslik {font-family: Arial, Helvetica;
font-size: 12pt;
line-height: 12pt;
margin-bottom: -10px;
top-margin: 5pt;
color: #330099;
font-weight:bold;
}
.Yazi10
{font-family: Verdana, Arial, Helvetica;
font-size: 11pt;
font-weight: normal;
text-decoration: none;
}
.Yazi16 
{font-family: Verdana, Arial, Helvetica;
font-size: 10pt;
font-weight: bold;
}

CSS dosyasındaki belirtimlerin HTML dosyasından kullanımı: 
Yukarıdaki CSS dosyası aşağıdaki HTML belgesinin formatlanmasında kullanılacaksa şu şekilde tanımlanır: 
Örnek: Bir CSS Dosyasının Kullanımı 
<HTML>
<HEAD>
<************ NAME="GENERATOR" *********************="Microsoft FrontPage 4.0">
<link REL="stylesheet" HREF="fcc.css" TYPE="text/css">
</HEAD>
<body>
<P class=yazi16 align=center>Kurs Kayıt Sayfası</P>
<P class=yazi10 align=center>Lütfen aşağıda kayıtlı olan alanları doldurunız ve gönder düğmesine basınız. Girmiş olduğunuz e-mail adresine
kayıt bilgileriniz gönderilecektir. İlginiz için teşekkür ederiz.</P>
<form action="kurskaydi2.asp" method=POST id=form1 name=form1>
<TABLE class=yazi10 WIDTH=75% ALIGN=center BORDER=1 CELLSPACING=1 CELLPADDING=1>
<TR>
<TD align=right width=25%><STRONG>Ad-Soyad:</STRONG></TD>
<TD width=75%><INPUT class=yazi10 type="text" id=TAdSoyad name=TAdSoyad size=50 MaxLength=200></TD>
</TR>
<TR>
<TD align=right><STRONG>e-Mail Adresi:</STRONG></TD>
<TD><INPUT class=yazi10 type="text" id=TEMail name=TEMail size=50 MaxLength=200></TD>
</TR>
<TR>
<TD align=right><STRONG>Katılmak istediğiniz Kurs:</STRONG></TD>
<TD><INPUT class=yazi10 type="text" id=TKurs name=TKurs size=50 MaxLength=200></TD>
</TR>
<TR>
<TD align=center colspan=2><INPUT class=yazi10 type="submit" value="Gönder" id=submit1 name=submit1></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
B. Dış Stil Sayfaları
Stil sayfası tanımlamalarının belge içinde yapılması ve kullanılmasına iç (internal) stil sayfası kullanımı denir. Bir de dış (external) stil sayfası kullanımı vardır. Bu tanımlamada stil sayfaları ayrı olarak hazırlanır ve HTML belgelerine bağlantı kurulan bir diğer belge gibi eklenir. 

Dış stil sayfası için olan kod iç stil sayfaları için olandan farklı değildir. Örneğin aşağıda bir dış stil sayfasının kullanımı yer almaktadır: 

<link REL="stylesheet" HREF="fcc.css" TYPE="text/css">
Örnekte: fcc.css adlı dış stil dosyası kullanılmaktadır. 
II. Uygulama
1. Önceki haftalarda yarattığımız şirket Web sayfasının biçimleme düzenlemelerini bir CSS aracılığıyla yapın. Örneğin belli bir font ve renk için tanımlamaları içeren bir stil sayfası. 
III. Gözden Geçirme
1. Stil sayfası kullanmanın yararları nelerdir?
2. İç ve dış stil sayfaları nelerdir?

Resimler Sadece üyeler içindir!

"Bende bir elma, Sende de bir elma varsa;
Ben sana bir elma verirsem, Sen de bana bir elma verirsen:
İkimizin de de birer elması olur.
Fakat, bende bir bilgi, Sende bir bilgi varsa;
Ben sana bir bilgi verirsem, Sen de bana bir bilgi verirsen:
Bende iki bilgi, Sende de iki bilgi olur!" [Konfiçyüs]

Hafta 6: formlar
Amaçlar: 
• form yapısını açıklamak. 
• form yaratmanın temel işlemlerini açıklamak.
I. form Kullanmak
Çoğu Web sayfasında özellikle bilgi girişi yapılır. Bilgi girişi için metin alanlar (text box), onay kutuları (check box) gibi kontroller kullanılır. Diğer bir deyişle veri girişi ve görüntülenmesi için kullanıcı arabirimi yaratmada en çok kullanılan şek form yaratmaktır. 
formlar metin kuruları, onay kutuları, seçim kutuları gibi kontrollerin kullanımına olanak tanırlar. 
Örnek: 
<HTML>
<HEAD>
<TITLE> ÖRNEK form </TITLE>
</HEAD>
<body>
<form name=tatil action=tatilkayit.asp method=post> 
Tarih:
<input type=text Name= "tarih">
<br>
Otel:
<input type=text Name= "otel">
<br>
Sure:
<input type=text Name= "sure">
<br>
<input type=submit Name= "kaydet" value="kaydet">
</form>
</body>
</HTML>
A. form Yaratmak
formlar, ziyaretçiden alınacak alanların HTML belgesi içinde tanımlanmasıyla yaratılır. Ana form etiketi <form > dır. 


Genel Yapısı: 

<form>

form alanları

</form>

Örnek: form ile bilgi almak. 
<HTML>
<body>
Adınızı girin: <BR>
<form ACTION="kayit.asp" METHOD="POST">
Adı Soyadı: <INPUT TYPE="Text" NAME="Adisoyadi"><BR>
Adresi: <INPUT TYPE="Text" NAME="Adresi"><BR>
Mesleği: <INPUT TYPE="Text" NAME="Meslegi"><BR>
Açıklama: <textarea NAME="mesaj" ><BR>
<INPUT TYPE="Submit" NAME="Dugme" VALUE="Gönder">
</body>
</HTML>
İPUCU: HTML alanlarının alınmasında tablo yapısı kullanılır. Böylece alanların form üzerinde dağılımı kontrol edilebilir. 
Yukarıdaki örnekte; adı soyadı bilgisinin girişi için bir metin alanı yaratmak için şu satır kullanılmıştır: 
Adı Soyadı: <INPUT TYPE="Text" NAME="Adisoyadi"> 
B. Text Box Kullanımı
Text Box (metin kutusu), HTML üzerinde bilgi girilen kutuların yaratılmasını sağlar. Projemizde yer alan adı, adresi, borcu vb gibi alanların girişi için birer metin kutusu tasarlanır. 
Genel yapısı: 

<INPUT TYPE="TEXT" NAME="ADI" SIZE="10">
HTML form üzerinde istenildiği kadar metin kutusu yaratılabilir. Ancak bu kutuların ve adlarının form üzerinde daha iyi bir şekilde görünmesi için tablo kullanılır. 
C. textarea Kullanımı
textarea alanı metin kutusuna göre daha geniş bir alana metin girilişi yapılır. Projelerimizde, görüşleriniz, açıklama gibi metin kutusuna göre daha geniş alana olan ihtiyacımızı metin alanı yaratarak giderebiliriz. 
Bu alanın genişliği belirtilen satır ve sütun sayısına göre ayarlanır: 
Genel Yapısı: 

<textarea NAME="GORUS" ROWS="5" COLS="30">
Örnekte, ziyaretçinin görüşlerinin yazılacağı bir metin alanı tasarlanmaktadır. Sütun sayısı kutusunun uzunluğunu, satır sayısı ise kaç satır olacağını belirtir. 
D. Radyo Düğmeleri
Seçenek düğmeleri (radio buttons) form üzerinde birden çok seçenekten yalnız birini seçmek için kullanılan bir denetimdir. 
Örneğin müşterinin grubunun seçimi: 
<input type="radio" name="tur" value="peşin" checked> Peşin
<input type="radio" name="tur" value="vadeli"> Vadeli
<input type="radio" name="tur" value="toptan"> Toptan
E. Onay Kutuları
Radyo düğmelerine benzer. Ancak onay kutuları birden çok sayıda işaretlenebilir. Örneğin bildiğiniz diller? gibi bir soruya yanıt olarak birden çok seçeneğin seçilmesi beklenebilir. Bu durumda radyo düğmeleri yerine onay kutuları (check boxes) kullanılır. 
Onay kutuları (check boxes), yine form üzerinde birden çok seçeneği değerlendirmek için kullanılan bir denetimdir. 
Örneğin müşterinin hangi bölge ya da bölgelerde faaliyet gösterdiğinin seçimi gibi: 
<input type="checkbox" name="bolge" value="EGE" > EGE BÖLGESİ
<input type="checkbox" name="bolge" value="MARMARA"> MARMARA BÖLGESİ
<input type="checkbox" name="bolge" value="AKDENİZ"> AKDENİZ BÖLGESİ
<input type="checkbox" name="bolge" value="İÇ"> İÇ ANADOLU BÖLGESİ
F. Liste Kutuları
Liste kutuları (list boxes), yine form üzerinde birden çok seçeneği değerlendirmek için kullanılan bir denetimdir. Liste kutularında seçenekleri listenin açılmasıyla görüntülenir ve listede yer alan bir elemanın seçilmesi sağlanır. 
Örneğin müşterinin faaliyet türünün seçilmesi:
<select NAME = "tur">
<OPTION selectED VALUE = "pesin" > PEŞİN </OPTION>
<OPTION VALUE = "vadeli" > VADELİ </OPTION>
<OPTION VALUE = "toptan" > TOPTAN </OPTION>

II. Uygulama
Şirketimiz Web sayfasını için aşağıdaki alanları olan bir anket formu tasarlayın: 
Şirketimiz Hakkındaki Görüşleriniz: 
ADI SOYADI: 
MESLEÃÂ�İ: 
ADRESİ: 
İLİ:
ŞİKAYETİ: 

TARİH: 
VARSA EK BİLGİLER: 
III. Gözden Geçirme
1. form kullanımıyla oluşan kullanıcı arabirimi kontrollerini sayınız?
2. Onay kutusu kullanımına örnek verin?
3. Radyo düğmesi kullanımına örnek verin?

Resimler Sadece üyeler içindir!

"Bende bir elma, Sende de bir elma varsa;
Ben sana bir elma verirsem, Sen de bana bir elma verirsen:
İkimizin de de birer elması olur.
Fakat, bende bir bilgi, Sende bir bilgi varsa;
Ben sana bir bilgi verirsem, Sen de bana bir bilgi verirsen:
Bende iki bilgi, Sende de iki bilgi olur!" [Konfiçyüs]