KODSİSTEMİ

Site açmadan önce

1.       Benim de bir web sayfam olabilir mi? Bunun için nelere ihtiyacım var?

Internet erişimi olan herkesin bir web sayfası olabilir. Web üzerinde gezinirken rastladıklarınıza benzer sayfalar yapabilmeniz için ilk öncelikle bu sayfaları koyabileceğiniz bir "web sunucusu" olması lazım. Bu sunucular, dışardan insanların, netscape, msie vb gibi web istemcileri kullanarak ilgili sayfaları görmesini sağlayan bilgisayarlardır ve bunların üzerlerinde çalışan özel sunucu programlar (httpd) vardır. Internet Servis Sağlayıcı şirketlerin hemen hemen hepsi kullanıcılarına kişisel web sayfası hizmeti veriyorlar. Bu yüzden, internet erişiminiz varsa, muhtemelen, kendinize web sayfası yapabilmeniz için artık hazırsınız demektir.

Web sayfaları sunucu bilgisayarda özel bazı dizinler altına konmalı. Hangi dizin altına konulması gerektiğini de servis sağlayıcınızdan öğrenmelisiniz. Ayrıca, internet servis sağlayıcınızdan, dışardan kişilerin sayfalarınıza erişebilmesi için yazmaları gereken tam URL satırını da almalısınız.
Hazırladığınız sayfaları
Bazı servis sağlayıcılar hazırladığınız sayfaları sizden e-posta ile isteyebilir ve kendileri web sunucusuna yerleştirebilirler.

--------------------------------------------------------------------------------

2. Bir Web Sayfası Neye Benzer? HTML Nedir?

Web sayfaları, 6. Bölüm'de de görüldüğü gibi, HTML adı verilen özel bir formatlama dili kullanılarak yapılır. HTML, Hypertext Markup Language için uydurulan bir kısaltmadır. HTML, sayfalara yazacağınız bilgilerin formatlarını (yazı rekleri, büyüklükleri, paragraf biçimleri vb gibi), sayfalar arasındaki kompozik geçiş bağlantılarını vb verebileceğiniz vb bazı komutlar içerir. Bunu küçük bir örnekle açıklayalım :
<HTML>
<BODY>

<CENTER><B><FONT COLOR="#FF0000">
<FONT SIZE=+3>
Ev Sayfama Hoş Geldiniz
</FONT>
</FONT></B></CENTER>

<BODY>
</HTML>


Sağdaki başlık, bir web sayfasına bağlandığımızda web istemcimiz ile gördüğümüz şekil olsun. Bunu üreten ise, aslında, solda görülen HTML kodu. Yani, web istemcileri ile gördüğümüz cicili-bicili sayfalar aslinda, birtakım web sunucularında tutulan, HTML kodlarından (ayrıca diğer bazı yardımcı elemanlardan) ve vermek istediğimiz bilgilerden oluşan düz yazı (ASCII) dosyalar!!. Soldaki kısımda görülen < > işaretleri arasındaki komutlar HTML belirteçleri, ya da HTML komutları olarak bilinir. HTML sayfaları
<BODY> .... </BODY> arasına yazılan bilgiler/komutlarla (HTML kodu/kaynak programı) oluşturulur.
Yukarıdaki örnekte, <CENTER>, <FONT>, <B> örnek HTML belirteçleri/komutlarıdır. HTML kodu içinde bırakılan boşlukların hiçbir önemi yoktur. Asıl olan, HTML belirteçleri ile verilen biçimlendirme ortamlarıdır. Aşağıda, genel bir web sayfası formu görülmektedir :

<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 bilgisi (dil, code page vb) vb. dir.
</HEAD>
Döküman genelinde öncelikle yüklenmesi istenen JavaScript, VBScript kodları da bu alana yazılabilir.

<BODY>

Bu alana, doğrudan web sayfasında görülen her türlü düzyazı, formatlama bilgileri, diğer komutlar vb. yazılır.

</BODY>

</HTML>



Netscape Navigator, Microsoft Internet Explorer, Mosaic, Lynx ve Opera gibi web istemcileri (tarayicilari) ise bu HTML kodlarini yorumlayarak sonucta web sayfalarının görünen biçimlerini oluştururlar. Döküman formatlama özellikleri düşünüldüğünde, HTML'yi bir kelime işlemci gibi düşünmek te olası. Ancak bir farkla : HTML her bilgisayar ortamında, her türlü web tarayıcısı ile hep benzer sayfa biçileri oluşturur ve sunar. HTML'nin döküman formatlama (biçimleme) dışında sunduğu en önemli özelliklerden biri de dökümanlar içinde ve dökümanlar arası kurulabilecek bağlantılardır (link). Bu haliyle, dökümanlar arası gezinmek ve bilgiler arasında dolaşmak mümkün olur.

6. Bölüm'de anlatıldığı gibi, web istemciniz ile bağlandığınız sayfanın kaynak kodunu (yani HTML halini) istemcinizin "View" manüsü altındaki Page Source (Microsoft IE için sadece "Source") ile görebilirsiniz. Yani, Web istemcilerinizde gördüğünüz sevimli sayfalar aslında tamamen ASCII karakterlerden oluşan "metin dosyalarıdır".

HTML'nin sağladığı bazı önemli özellikler şunlardır :

Web sayfalarındaki yazılara değişik formatlar verilebilir (koyu renk yazı, italik yazı, yazı ortalama, renk verme, değişik boyutlarda yazma gibi),
Tablo, Liste, Adres Alanı, sabit genişlikli yazı alanı vb gibi özel biçimler oluşturulabilir,
Web sayfalarında "frame" adı verilen, ve birbirleri ile ilişkilendirilebilen alt-kısımlar oluşturulabilir.
Değişik tipteki menü yapıları ile kullanıcının etkileşimli bir şekilde seçebileceği veri giriş sistemleri kullanılabilir,
Ses, grafik, animasyon gibi uygulamaların web sayfalarından çalıştırılabilmesi için gerekli ortamlar sağlanabilir,
Java, JavaScript, VB Script gibi programlama dilleri ile web içeriklerinin etkileşimli kullanımı için gerekli ortamları sağlar,
Sunucu tarafında çalışan CGI programları ile we içeriklerinin etkileşimli kullanımını sağlar (şifre uygulamaları, sayaç uygulamaları vb gibi).
HTML standartları sürekli güncellenmektedir. Konu hakkında, http://www.w3.org adresinden daha ayrintili bilgi alinabilir. Şu anki mevcut standart HTML 3.2 (Eylül 1997). HTML 4.0 standartı üzerinde çalışılıyor.


--------------------------------------------------------------------------------

3. Bir web sayfasında görülebilecek tipik elemanlar nelerdir?


Web'de gezinmişseniz bilirsiniz. Sayfalara bağlandığınızda, karşınıza oldukça değişik türden bilgi ve bu bilgileri size sunan sayfa elemanları geliyor. Aslında bu, web'in sağladığı en büyük özelliklerden birisi. Yani, birbirinden çok farklı türden bilgiye aynı platformda ve kompozit bir şekilde ulaşmak!!

HTML sayfaları, grafik, animasyon, film, müzik, arkaplan müzikleri gibi hergeçen gün artan oranlarda desteklenen bileşenler de içerirler. Bunun yanında, kullanıcıların etkileşimli bir şekilde doldurabilecekleri formlar, kullanıcının yönlendirebileceği ve içeriğini değiştirebileceği dizaynlar (dinamik html) da içerir. web sayfaları yapısı ve web istemci teknolojisi, standart olmayan veri yapılarının da web üzerindeki diğer bilgilerle entegrasyonuna "plug-in" denilen yardımcı programlar vasıtasıyla izin verirler.



--------------------------------------------------------------------------------

4. Sayfa içeriği nasıl saptanır? Ön dizayn yapmanın getirebileceği avantajlar Nelerdir? Nelere dikkat edilmeli?

Web sayfasında hangi bilgilerin yer alacağını saptamak ilk yapılması gerekenlerden. Sayfanızı hazırlamadaki amacınız ne? Kendinizi tanıtmak mı? Bir ürünü mü tanıtmak? Ya da, sevdiğiniz bir sanatçı ile ilgili bir sayfa mı yapmak istiyorsunuz?? Daha sonra, 1-2 hafta süreyle web'de gezinin. Sizinkine benzer içerikli sayfalarla mutlaka karşılaşırsınız. Buradan, iyi ya da kötü tasarımın ne olduğu konusunda kafanıda fikirler oluşacaktır. Öte yandan, normal bir internet kullanıcısının profesyonel bir grafik ya da web sayfası tasarımsıcı olmasını da bekleyemeyiz.. Bu yüzden, ilk sayfanız çok sade görünümlü olabilir. Herzaman, web sayfasının içerdiği bilgilerin önemli olduğunu ve sayfa düzeninin de bu bilgilere kolayca erişimi sağlayacak şekilde olmasının getireceği kolaylıklar ve avantajları akılda bulundurun. Eğer web sayfalarınızda birden çok konuyu işleyecekseniz, buna göre ilgili dosyaların sabit diskte bulunması gereken dizin yapılarını saptamak ta yapılması gereken ilk işlerden biri olmalı. Her farklı sayfanın farklı bir dizinde saklanması sayfa organizasyonunu kolaylaştırır.

Belirli bir konuda hazırlanmış iyi web sayfaları, öncelikle, buraya bağlanan insanların mümkün olduğunca zahmetsiz ve kısa yoldan isteklerine ulaşmalarını sağlamalıdır. Ayrıca, konunun dışına taşmadan, verilmek istenen anlatılmalıdır. Hiç kimse, ekranlar dolusu uzunlukta yazılardan oluşan bir siteyi okumak istemez. Bu genellikle çok sıkıcı olur.

Web sayfasında ne kadar grafik/resim/ses vb olacağı, bu dosyaların büyüklüklerinin belirlenmesi de çok önemli. Hiç kimse, bağlandığı bir web sayfasında 100lerce kilobyte tutan bir resim ya da animasyon dosyasının yüklenmesini beklemek istemez. Web sayfalarında resim ve animasyon kullanımı sayfanın çekiciliğini arttırsa da, unutmayın ki bu sayfalara ulaşacak kişilerin internet bağlantı hızları 14.4kbps modem bağlantısı düzeyinde de olabilir.




--------------------------------------------------------------------------------

5. Tipik bir web sayfası düzeni nasıldır?

Tipik bir web sayfası aslında tam anlamıyla hiyerarşik bir yapıdadır. Bu modüler yapı, sayfalara yeni bilgiler ve sayfalar eklenmesini kolaylaştırır.



--------------------------------------------------------------------------------

6. Web Sayfası Hazırlamak zor mudur? Özel bir editöre ihtiyacım var mı?

Web sayfası hazırlamak başta tahmin edildiği gibi ya da sanıldığı kadar zor değildir. Bu işi kolaylaştıran birçok araç var.

Aslında, HTML dökümanlarının tamamı ASCII karakterlerden oluşan ve herhangi bir editörde yazılabilen metinlerden oluşmuştur. UNIX üzerinde pico, vi; DOS altında MSDOS Edit ya da bir windows textpad veya sevdiğiniz herhangi bir metin editörü kullanarak HTML dökümanlarınızı hazırlayabilirsiniz. Yani, hiç bir özel editöre ihtiyacınız yok. Ancak, HTML format belirteçlerini hatırlamak ayrı bir dert, yazmak ayrı bir dert.. Yüzlerce HTML belirteçini hatırlamak profesyonel bir tasarımcı için bile gerçekten çok zor.

Bunu berteraf eden bazı yardımcı bilgisayar programları var. Bunlara, "HTML Editörleri" denir. HTML editörleri 2 grupta toplanır :

Ilk gruba giren editörler, HTML komutlarını menüler ya da bazı butonlar yardımıyla döküman içine yazmanızı, ilgili ortamları kolayca oluşturmanızı sağlar. Bu editörlerden bazıları, yazdığınız HTML kodunun sonuçlarını bir "preview" pencereden görmenizi sağlarlar. Hemen hepsi, tüm HTML belirteç ve komutlarının anlatıldığı yardım dosyaları sunarlar. Bazılarında (genellikle ingilizce) heceleme (spell-check) özelliği vardır. Hazırladığınız sayfaların içinde kullandığınız resim linklerini, diğer sayfa linklerini vb istatistik tablolar olarak size gösterebilirler ve bu şekilde dizaynda yardımcı olurlar.
Bu tip editörlerin hemen hepsi, kolay web sayfası hazırlama sihirbazları (wizard) sunarlar. Böylece, bazı boşlukları doldurarak basit bir web sayfasını kolayca oluşturabilirsiniz. Ayrıca, hemen hemen tüm editörler, hazırladığınız sayfaları bir web sunucusuna (FTP ya da HTTP protokolü ile) gönderebilmek için gerekli araçları (web publishing) da içerirler. Bu editörler, çoğunlukla, dökümanınız içinde kullandığınız HTML komutlarını farklı renklerde göstererek sayfanızın oluşturulma sürecini kolaylaştırırlar.

Çoğu editör, bazı temel JavaScript programları/özellikleri ekleme ya da hareketli GIF resimlerini (animated GIF) kolayca hazırlamanızı sağlayabilirler.

Bu editörlerden bazıları, hazırladığınız web sayfalarındaki HTML kodlarını kontrol edebilirler ve hatalı/eksik kullanımları saptayabilirler. Bunları yapan bazı yardımcı programları da http://www.halsoft.com/web-lint adresinde bulabilirsiniz.

Bu editörlerden en popülerlerinden bazıları HotDog Pro (http://www.sausage.com), HomeSite, Web Edit, HotMetal ve DiDo 'dur. Bunlar ve benzeri diğer editörlere (Windows, Mac ve OS/2 için) Raksnet Tucows yansısından kolayca ulaşabilirsiniz. Adresi : http://tucows.raksnet.com.tr/tucows.
http://www.zdnet.com/~pcweek/navigator/htmled.html adresinde deHTML editörleri ile ilgilibilgilere ve bu programların bulunduğu diğer adreslere erişebilirsiniz.


İkinci gruba giren editörler, günümüz windows kelime işlemci programları gibi (word, wordperfect vb), yazdığınız anda tüm formatlama özellikleri ile birlikte görebildiğiniz (WYSIWYG - what you see is what you get) türden "görsel HTML editörleri"dir. Bu programlar kullanılarak, karmaşık HTML kodlarına bulaşmadan oldukça iyi sayfalar oluşturabilirsiniz. Bu tip editörlerden bazıları, aynı anda doğrudan HTML koduna da müdahele edebilmenize olanak tanır.
HTML yardımı, kolay sayfa hazırlama sihirbazları, heceleme, web sunucusuna dosya gönderebilme gibi özellikleri bu programlar da, genellikle, sunarlar. Benzer şekilde, buton hazırlama, JavaScript programları/komutları ekleme ya da hareketli GIF resimlerini (animated GIF) kolayca hazırlamanızı sağlayabilecek özellikler de bu programlarda son günlerde sıkça karşılaştığımız özelliklerden. Popüler web istemcilerinden olan Netscape Navigator (4.x) bünyesi içinde yer alan "Composer" bu tür bir editör. Eğer Netscape 3.x kullanıyorsanız web editörü bu ürünün Gold sürümünde.

Popüler görsel editörlerden bazları ve alabileceğiniz adresler şöyle : Microsoft Front Page (http://www.microsoft.com) ; Symantec Visual Page (http://www.symantec.com); Adobe Page Mill (http://www.adobe.com); Claris Home Page (http://www.claris.com). Ayrıca, Microsoft Internet Explorer 4.x surumu ile birlikte "Front Page Express" adıyla, orijinal ürünün daha basit bir sürümü de ücretsiz dağıtılmaktadır. Programlar genellikle Windows (95/NT) ve Mac (PowerPC) altında çalışmaktadır. Bunlar ve benzeri diğer editörlerin çoğuna (Windows, Mac ve OS/2 için) Raksnet Tucows yansısından kolayca ulaşabilirsiniz. Adresi : http://tucows.raksnet.com.tr/tucows.
http://www.zdnet.com/~pcweek/navigator/htmled.html adresinde deHTML editörleri ile ilgili diğer bazı bilgilere ve bu programların bulunduğu diğer adreslere erişebilirsiniz.


Görsel editörlerin sundukları imkanlar, çoğu web sayfası hazırlama işi için yeterli görünmektedir. Özellikle; tablo hazırlama, frame'ler ile çalışma, form hazırlama gibi yüksek oranda HTML kodlaması gerektiren uygulamalar çok kolay yapılabilmektedir. Sayfa içinde bağlantı (link) oluşturma, temel formatlama özelliklerini verme bu tip editörlerle kolaydır. Özellikle, hem görsel editör özelliği sunan, hem de düz HTML kodunu değiştirebilmenize olanak tanıyan editörler hergeçen gün yaygınlaşmaktadır. Böylece, görsel editörlerle yapamadığınız bazı işleri bütünleşik bir şekilde, dökmanın HTML hali üzerinde değişiklikler yaparak halledebilirsiniz.


--------------------------------------------------------------------------------

7. Hiç HTML bilmeden görsel editörlerle web sayfası hazırlayabiliyorum. HTML'ye yine de ihtiyacım var mı?

Bu sayfanızın içeriğine bağlı. Görsel editörler; tablo, frame, her türlü formatlama, resim/ses vb ekleme gibi özellikleri sağlarlar ve bunlar ortalama bir web sayfası için yeter. Ancak, özellikle yeni HTML komutları, Java Appletleri, bazı CGI teknikleri vb eklemek için sayfanızın HTML şekli üzerinde biraz çalışmanız gerekebilir.

Ayrıca, HTML felsefesini anlamak ve formatlama ortamlarını öğrenmek yazdığınız sayfaya herhaliyle hakim olmak demektir. Bağlandığınız sitelerdeki sayfa içeriklerini anlamak ve bazı teknikleri öğrenmek için de biraz HTML bilmek sonuçta yararlıdır.



--------------------------------------------------------------------------------

8. HTML dilinin en temel elemanı : Döküman biçimleme belirteçleri (TAG)

HTML'nin en temel işlevi, yazdığınız bir dökümana biçim vermektir (yazı karakterini, rengini, büyüklüğünü değiştirmek; paragraf eklemek; resim eklemek vb gibi). Bu, kullanılan bazı biçimlendirme (formatlama) belirteçleri/komutları kullanılarak yapılır. Söz gelimi; sayfamızda "merhaba" kelimesinin koyu renkli görünmesini isteyelim. Bu durumda, <BODY> ... </BODY> arasına;

<B>deneme</B>

yazmalıyız. Bu ise, bir web istemcisinde görüntülendiğinde, deneme şeklinde bir sonuç üretir. Bu basit örnek aslında HTML dilinin en temel kuralı hakkında tüm ipuçlarını vermektedir : Bir HTML döküman hazırlamak, temel olarak, öncelikle sayfada görünmesini istediğimiz düzyazı bilgileri yazmak; sonrasında da bu yazının istediğimiz yerlerinde uygun belirteçler (TAG) kullanarak istediğimize uygun bir görünüm kazandırmaktır.

Tüm HTML belirteçleri < karakteri ile başlar ve > karakteri ile biter ve bu HTML dökümanını gösterecek Netscape, MSIE gibi web istemcilerine, yazıyı koyu göstermek, italik yapmak, bir resim göstermek vb türünden özel birşeyler yaptırır. < > arasına ise, ilgili belirteç komutu ve bazen de birtakım ilave parametreler (seçenekler) gelir. Sözgelimi yukarıdaki örnekte, <B> belirteçi, kendinden sonra yazılan yazıların web istemcilerinde KOYU RENK görünmesini bildirir.

Genellikle HTML belirteçleri çift halinde kullanılır (ancak bu kuralın istisnaları da vardır). Yukarıdaki örneğe tekrar dönecek olursak, <B> belirteçinin çifti </B> dir. Böylece, yazının belli bir kısmına (yani, sadeec <B> ..... </B> arasına yazdığımız kısmına) biçimlendirme yapmak mümkün olur. Her belirteçin çifti, isminin başına bir ayıraç (/) konarak elde edilir ve yine < > arasına yazılır.

Herhangi bir HTML belirteçinin genel formatı şöyledir :

<belirteç-adı seçenek1="değer1" seçenek2="değer2" seçenek3="değer3"......... >

Bilgileri yazmada küçük/büyük harf ayırımı yoktur. Ancak, tüm HTML belirteçlerini ve seçenek adlarını büyük harfle; değerleri ise küçük harfle yazmak oldukça yaygın bir alışkanlıktır.

HTML, dökümanlar üzerinde kullanılabilecek yüzlerce belirteç içerir. Bu da, web editörlerinin sayfa hazırlamada ne kadar yararlı araçlar olduğunu göstermektedir. En baştaki örneğe tekrar dönelim :

<FONT SIZE=+3>
Ev Sayfama Hoş Geldiniz
</FONT>

<FONT> belirteçi, kendisinden sonra gelen karakterlerin yazı büyüklüğü, rengi, tipi vb ile ilgili değişiklikler yapabilmemizi sağlar. Dikkat edilirse, belirteç adından sonra bir seçenek kullanılmış. Biçilendirme sadece dökümanın belli bir kısmına uygulanmak istendiğinden, ilgili belirteç, çifti olan </FONT> ile kapatılmış. Kapatma belirteçinde, sadece belirteçin adı ve sol tarafına ayıraç işareti (/) konur.

Bir başka örnek verelim :

<img src="sad.gif">
Bu örnekte de, web sayfasının bulunduğu dizindeki sad.gif isimli resim dosyasının sayfa üzerinde, bu komutun yazıldığı bölümde, görüntülenmesi isteniyor. Bunun sonucunda ise


görülecektir. Tabii bunun için, ilgili resim dosyasının, html sayfanızı sakladığınız dizinde bulunması lazım. Okuduğunuz dökümanın ilerleyen bölümlerinde önemli HTML belirteçleri ve önemli kullanımları ile ilgili bilgiler de verilecek.




--------------------------------------------------------------------------------

9. HTML dökümanın genelinde etkili ve sayfada doğrudan görülmeyen belirteçler

Baştaki tabloda da belirtildiği gibi, bir HTML döküman, <BODY> </BODY> arasına yazılır. Baştaki <HEAD> .. </HEAD>
arasına yazılan belirteçler tüm döküman üzerinde etkilidir ve web istemcileri tarafından doğrudan görüntülenmezler.
Bunlardan en önemlisi, yazılan HTML dökümana isim vermekte kullanılan <TITLE>'dır. Bu belirteç, hazırlanan web sayfasına bir isim verilebilmesini sağlar. Böylece, sayfayı yükleyen birisi, <TITLE> ile verilen isim bilgisini (sayfanın konusunu içeren bir tanımlama) kendi istemcisinin tanımlama satırında görür. Aşağıda, bu belirteçin örnek bir kullanımı görülmektedir.

<HTML>
<HEAD>
<TITLE> Orhan Gökçöl'ün Web Sayfası </TITLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>

Bu alanda kullanılabilecek ikinci önemli belirteç <META> 'dır. Kullanımda, kendisinden sonra bir seçenek adı verilerek kullanılır. Bu belirteç kullanılarak verilen bilgiler çok çeşitli olabilir. Söz gelimi, web sayfaları üzerinde dolaşan arama motorları, sayfaların bu kısmındaki <META> belirteçlerine bakarak sayfaları gruplar. Bu kullanımda, <META> ile birlikte, sayfanızdaki içeriği yansıtan bazı anahtar kelimeler ve tanımlamalar verebilirsiniz. Aşağıda bununla ilgili bir örnek görülmektedir :

<META NAME="Description" CONTENT="Web sayfasi hazirlamak icin bazi kisa bilgiler">
<META NAME="KeyWords" CONTENT="html, htm, kisisel web sayfasi, web">
<META NAME="Author" CONTENT="Orhan Gokcol">


Meta belirteçinin önemli bir kullanımı da, sayfadaki yazıların hangi "dil ailesi"ne ait karakterlerle yazıldığını belirtmek içindir. Türkçe, Latin5 dil ailesindedir. Buna ait standart tanimlamasi ise iso-8859-9 olmaktadır. Aşağıda buna ait bir kullanım gösterilmiştir.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">




--------------------------------------------------------------------------------

10. HTML Döküman İçinde Link Kullanımı

Web sayfalarının en önemli özelliklerinden birisi, kolayca başka sayfalara ve dökümanlara geçiş yapılabilinmesidir. Bu,
<A> belirteçi kullanılarak yapılır. Aşağıdaki örneği inceleyelim :

Ana sayfaya dönmek için <A HREF="http://www2.itu.edu.tr/~gokcol/css/index.html"> buraya </A> fare ile tıklayınız.


Bunun bir web istemcisindeki görüntüsü ise aşağıdaki gibi olacaktır :

Ana sayfaya dönmek için buraya fare ile tıklayınız.


Örnekte, "buraya" kelimesine index.html dosyası bağlanmıştır. Böylece, "buraya" kelimesinin üstüne gelip fare ile tıkladığınızda,
http://www2.itu.edu.tr/~gokcol/css/index.html yüklenecektir.Bu ve benzeri URL lere bağlantı tanımlarken, bağlantı kurmak istediğimiz kelimenin soluna <A HREF="tam-url-adı"> yazıyoruz. Bağlantı kelimesinden sonra ise, </A> ile belirteçi kapatıyoruz. Yukarıdaki örnekte, eğer index.html dosyası aynı dizinde ise, uzun uzun URL'i yazmak yerine doğrudan <A HREF="index.html> yazmak ta yeterlidir. Bu yolla, her türlü URL kullanılabilir (ftp, http, e-posta, gopher, wais). Aşağıda kullanımla ilgili bazı örnekler var :
Bana <A HREF="mailto:gokcol( at )sariyer.cc.itu.edu.tr> e-posta göndermek </A> ister misiniz?
Bana e-posta göndermek ister misiniz?
CSS'nin ZIP halini almak için <A HREF="css25.zip"> buraya </A> tıklayınız.
CSS'nin ZIP halini almak için buraya tıklayınız.
ODTÜ FTP <A HREF="ftp://ftp.metu.edu.tr/simtel"> Simtel Arşivi </A>
ODTÜ FTP Simtel Arşivi


İstenildiği kadar bağlantı aynı anda kullanılabilir.

Bir diğer kullanımda, eğer istenirse, bir URL adresine değil de herhangi bir dosyaya da bağlantı yapılabilir. İlgili bağlantı fare ile tıklandığında, eğer o dosya tipi web sunucusu ve sizin web istemciniz tarafından bilinen bir tipse, o zaman ekranda sonucu görürsünüz. Söz gelimi, düzyazı dosyalar (TXT), Resim dosyaları (GIF, JPG, JPEG, PNG, XBM) böyledir.
<A HREF="sad.gif"> Buraya tıklarsanız </A> üzgün bir surat göreceksiniz.


Eğer ilgili dosya bilinmeyen bir tipte ise, o zaman bu bağlantı tıklandığında, kullanıcının web istemcisi o dosyayı "diske saklamak" ya da bir uygulama programıyla açmak şeklinde iki seçenek sunar. Bazı dosya tipleri ise, web istemcilerine yüklenen yardımcı "plug-in" ler ile işlenebilir. Bunlardan en popülerleri ses formatları (AU, WAV, MID); video formatları (RM, MOV, AVI) ve bazı özel tipte dosyalardır (AutoCAD çizim dosyaları gibi).

Bir Resim Dosyasının Bağlantı Elemanı Olarak Kullanılması :

Bazen bir resim dosyası da bağlantı elemanı olabilir. Böylece, kullanıcı ilgili resmi fare ile tıklayarak belirtilen yeni dosyaya ulaşır. Bunu bir örnekle görelim :

Mail göndermek için zarfın üzerini tıklayın..... <A HREF="mailto:gokcol( at )sariyer.cc.itu.edu.tr"><IMG SRC="envelope.gif" HEIGHT=20 WIDTH=28 BORDER=0></A>
Mail göndermek için zarfın üzerini tıklayın......


Dikkat edilirse, bağlantı yapılacak yerde, <IMG SRC="envelope.gif" HEIGHT=20 WIDTH=28> kullanıldı. <IMG>, tek başına kullanılan bir belirteçtir ve başka parametreler de alabilir. Yukarıdaki örnekte, resmin eni ve boyu piksel cinsinden veriliyor. Ayrıca, resmin çevresinde bir belirgin sınır (BORDER) verilmek isteniyorsa 0 yerine daha büyük bir değer kullanılmalı.

Döküman İçi Bağlantılar :

Bir metin üzerinde belirli bölgelere ulaşmak için yine belirteçler kullanılabilir. Şu an okuyor olduğunuz döküman, buna bir örnektir. Aşağıdaki satırları inceleyelim :

<A HREF="#1">Benim de bir web sayfam olabilir mi? Bunun için nelere ihtiyacım var?</A>
<A HREF="#2">Bir web sayfası neye benzer? HTML nedir?</A>
<A HREF="#3">Bir web sayfasında görülebilecek tipik elemanlar nelerdir?</A>

Yukarıdaki satırlar bir web istemcisinde şöyle görünecektir :

Benim de bir web sayfam olabilir mi? Bunun için nelere ihtiyacım var?
Bir web sayfası neye benzer? HTML nedir?
Bir web sayfasında görülebilecek tipik elemanlar nelerdir?

Burada, HREF ile verilen aslında, dökümanın sizin belirlediğiniz bir kısmı. Söz gelimi, ilk satırı ele alacak olursak, kullanıcı buraya fare ile tıkladığında dökümanda "1" belirteci ile verilen kısma gidiliyor. Burası ise,

<A NAME="1"></A> Benim de bir web sayfam olabilir mi? Bunun için nelere ihtiyacım var?
<P>Internet erişimi olan herkesin bir web sayfası olabilir.&nbsp; Web üzerinde gezinirken rastladıklarınıza benzer sayfalar yapabilmeniz için ilk öncelikle



şeklinde. Yani, bir bağlantıya tıklandığında döküman içinde nereye gelinmesi isteniyorsa, ilgili yere
<A NAME="belirteç-adı"></A> şeklinde bir tanımlama yapıyoruz. Buna "Anchor" (belirteç?) denir. Belirteç adlarının illa ki sayılar olması gerekmez. tek karakterden oluşması da gerekmez. Kendinizin belirleyeceği herhangi bir isim olabilir.

Eğer, bir döküman içinden başka bir dökümanın "belirteç kullanılarak tanımlanmış" bir bölümüne bağlantı verilmek isteniyorsa, bu durumda da, HREF="diğer_döküman_ismi#parça_ismi" şeklinde bir kullanım uygulanır.




--------------------------------------------------------------------------------

11. Temel HTML Komutları/Belirteçleri

Metin Formatlama Belirteçleri :

Bir HTML döküman hazırlarken, satırlar ya da kelimeler arasında istediğiniz kadar boşluk bırakabilirsiniz. Kodu takip etmeyi kolaylaştırmak için HTML komutlarını metinden boşluklarla ayırabilirsiniz. Bunun dökümanın web istemcisi üzerindeki görünümünde hiç bir fonksiyonu olmayacaktır.

Döküman içinde, yeni bir paragrafa başlarken, <P> belirteçini kullanmalısınız. Bu belirteçi çokça kullanacaksınız SmileHTML dökümanlarında <P> belirteç kullanmadıkça bir cümle herhangi bir yerinden ayrılıp kalan kısmı altta görünebilir, birden fazla boş satır tek satır olarak algılanır. Bir web tarayıcısı satır sonlarını ve boş satırları gözardı edeceğinden, paragrafları mutlaka < p> belirteci ile ayırmalısınız.

Eğer bir satırı belli bir yerinden bölmek istiyorsanız <BR> belirteçini kullanmalısınız. Aşağıda bunlarla ilgili küçük bir örnek var :

<P>Burada yeni bir paragraf başladı. Ben satırın burada <BR>
bölünmesini istiyorum.
Eğer <P> kullanılmasa idi, ilgili metin bir üstteki bilgilerle birleşecekti. <BR> kullanılmasaydı, henüz satır bitmediği için, alt satıra geçilmeyecekti. Hem <P>, hem de <BR> belirteçleri tek kullanılır, çiftleri yoktur.
Aşağıdaki tabloda, sık kullanılan bazı metin formatlama belirteçleri görülmektedir. Belirteçler iç içe kullanılabilir, ancak birbirlerini kesmemelidirler. Bu belirteçleri kullanırken, belirtecin etkimesi istenen yazı <> .. </> arasına alınır. Söz gelimi,
<i> Bu yarı italik </i> şeklindeki bir HTML kodu, "Bu yazı italik" şeklinde bir sonuç üretecektir.

<i> </i> Yazıyı italik yapar.
<tt> </tt> Yazıyı sabit gernişlikli yapar (daktilo harfleri gibi).
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> Bu belirteçler, döküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini tanımlar. Sayı arttıkça yazı büyüklüğü azalır. Bunların yerine, daha esnek <FONT> </FONT> belirteci de kullanılabilir. Bu kullanımda, <FONT SIZE=-2> 'den <FONT SIZE=+2> ye kadar yazı büyüklüklerü verilebilir.
<hr> Yatay bir çizgi oluşturur. <hr SIZE=4 WIDTH= "50%"> şeklinde, daha kalın ve dar bir çizgi de yapılabilir.
<center> </center> Yazı ve resimleri sayfada ortalar .
<blockquote> </blockquote> Yazıyı hem sağdan, hem soldan birmiktar içeri kaydırır.
<pre> </pre> Bu belirteçler arasına yazılan her şey, yazıldığı gibi ekrana çıkar. Boşluklar, tab'ler, satır bölmeleri vb. korunur.

HTML Döküman İçinde Açıklama Satırları :

HTML Döküman İçinde, kodu takip etmede kolaylıklar sağlayacak bazı açıklama satırları konabilir. Döküman içinde herhangi biryerde, "<!--" ve "-->" belirteçleri arasında kalan hiçbirşey web istemcileri tarafından dikkate alınmaz.Örnek;

<!-- Bu bir açıklama satırıdır ve web istemcisinde görüntülenmez -->



--------------------------------------------------------------------------------

12. Sayfa Arka Plan resimleri/renkleri ve Metin İçinde Renk Kullanımı

HTML sayfalarınızın arka planında isterseniz bir resim olabilir. Ya da, sayfa arkaplanını sizin istediğiniz bir renk yapabilirsiniz. Bu, döküman başlangıcındaki <BODY> belirtecine bazı seçenekler ekleyerek yapılır. Sözgelimi şu an okuduğunuz dökümanın arkaplanı aslında, "chalk.gif" isminde bir resim dosyası. Bu,
<BODY BACKGROUND="chalk.gif"> şeklindeki bir kullanımla sağlandı. Eğer arkaplan renginin kırmızı olmasını isteseydik o zaman da, <BODY BGCOLOR="#FF0000"> dememiz gerekecekti. Buradaki FF0000, kırmızının, RGB renk ayrım sistemindeki hekzadesimal (16-lik sistem) karşılığı.

Aslında, HTML döküman içinde bazı şeylerin renklerini kontrol edebiliyoruz :

<body> belirtecinde, bgcolor, text, link, vlink, ve alink seçenekleri sırasıyla sayfa arkaplan rengi, sayfadaki yazıların rengi, henüz kullanıcının ziyaret etmediği bağlantı elemanları (link), ziyaret edilmiş bağlantı elemanları ve aktif bağlantı elemanlarını (yani, tam bir bağlantının üzerine fare ile tıkladığınızdaki renk) tanımlar.
Sayfa içinde herhangi bir yazının rengini değiştirmek için <font> belirteci, color seçeneği ile birlikte kullanılır (<FONT color="#FF0000"> ... </FONT> gibi).
Renk değerleri verilirken şu şekilde hareket edilir :
Genel renk tanımı : "#RRGGBB" dir. Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Bu sayılar yerine aşağıdaki renk tanımlama kelimeleri de kullanılabilir : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow)

--------------------------------------------------------------------------------

13. Listeler


Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.

Düz (Numarasız) listeler
Düz liste (unordered lists, <ul>) oluşturmak için,
Listeye başlamak için belirteç açılır. <ul>
Liste elemanlarını teker teker girerken başına <li> belirteci girilir. Kapatmak için </li> belirtecine gerek yoktur.
Listeyi bitirmek için belirteç kapatılır. </ul>
Örnek olarak,
<ul>
<li> Elma
<li> Armut
</ul>
Örnek, ekranda şu şekilde görülür :
Elma
Armut
<li> belirteçleri içinde paragraflar, diğer dökümanlara bağlantılar, ve diğer belirteçleri kullanabilirsiniz.
Numaralı Listeler
Numaralı listeler (ordered lists <ol>), düz listelerden farklı olarak, <ul> belirteci yerine <ol> kullanırlar. Ekrandaki liste elemanlarının başına 1'den başlayarak sayılar eklenir. Aşağıdaki HTML kodu,
<ol>

<li> Linux İşletim Sistemi
<li> Linux'un desteklediği donanımlar
</ol>
ekrana şunları yazar:
Linux İşletim Sistemi
Linux'un desteklediği donanımlar
Tanımlı Listeler
Genellikle birden fazla başlığı olan, her başlık altında kısa bir metin içeren yazılar, tanımlı listeler ile oluşturulur. Tanımı yapılacak başlık, <dt> ile belirtilir, <dd> ile başlık altına metin girilir. Tüm liste, <dl> ile </dl> arasına alınır.
<DL>
<DT> Kişisel Kullanım
<DD> Linux evinde veya işinde UNIX işletim sistemi altında çalışmak
isteyenler için ideal bir platformdur.

<DT> Internet Sunucusu
<DD> Linux doğrudan TCP/IP desteği ile gelmektedir.

</DL>
Ekrandaki çıktı şu şekilde görünür:
Kişisel Kullanım
Linux evinde veya işinde UNIX işletim sistemi altında çalışmak isteyenler için ideal bir platformdur.
Internet Sunucusu
Linux doğrudan TCP/IP desteği ile gelmektedir.
İçiçe Listeler
Tüm liste çeşitleri, 3'den fazla bölüm kullanmadıkça içiçe yazılabilir. Örnek olarak,
<ul>

<li> İstanbul'un büyük semtleri
<lu>
<li> Beyoğlu
<li> Bakırköy
<li> Kadıköy
</lu>

<li> Ankara'nın belli başlı yerleşim birimleri
<lu>

<li> Kızılay
<li> Ulus
</lu>

</lu>
Ekrandaki görüntüsü,
İstanbul'un büyük semtleri
Beyoğlu
Bakırköy
Kadıköy
Ankara'nın belli başlı yerleşim birimleri
Kızılay
Ulus

--------------------------------------------------------------------------------

14. Basit Tablolar

HTML, her türlü tablo kullanımına olanak tanır. Tablolar, bilgileri matris düzeninde, birçok hücreler tanımlayarak bunların içinede verebilmemizi sağlar. Ayrıca, hazırladığımız dökümanın kolonlar halinde ya da, belirli hizalarda yapışık şekilde (align) görünmesini de sağlarlar. HTML standartları gelişim süreci içinde tablo tanımlama belirteci de bazı değişikliklere uğradı.
Döküman içinde tablo oluştururken aşağıdaki işlemler takip edilir :

Tablolar, <table> belirteci ile tanımlanır.
<table> belirteci, tablo kaç satır ise, o kadar sayıda arka arkaya <tr> belirteci içerir
Her <tr> belirteci, o satırda kaç kolon varsa o kadar <td> belirteci içerir.
<td> belirteci ile tanımlı hücrelere her türlü bilgi (yazı, link, resim, liste, ve hatta başka bir tablo) gelebilir.
Tablo içinde satırlar yukardan aşağıya, sütunlarla oluşturulan hücreler ise soldan sağa tanımlanır. Eğer satırlar ve sütunlar arasında satır/sürun çizgilerinin de görünmesi isteniyorsa, <table> belirteci ile birlikte "border" seçeneği kullanılır.
Aşağıdaki örneği inceleyelim :


<table border> 1. tablo belirteci başlangıcı
<tr> 1. satır başlangıcı
<td>Ankara</td> 1. satır 1. sütun
<td>İstanbul</td> 1. satır 2. sütun
</tr> 1. satır sonu
<tr> 2. satır başlangıcı
<td>Eskişehir</td> 2. satır 1.sütun
<td>Şanlı Urfa</td> 2. satır 2. sütun
</tr> 2. satır sonu
</table> 1. tablo belirteci sonu
Yukarıdaki kod, bir web istemcisinde görüntülendiğinde aşağıdaki tablo oluşacaktır :
Ankara İstanbul
Eskişehir Şanlı Urfa

Istenirse, tablolar için tablo arka plan rengi ya da, her bir hücre ya da satıra bgcolor seçeneği <table>, <tr>, <th>, ve <td> belirteçleriyle kullanılarak verilebilir. Standart html editörlerinin hepsi de, kolay tablo oluşturmak için birtakım tablo sihirbazları sunmaktadırlar.

Tablolar ile ilgili daha ayrıntılı bilgiler bu dökümanın sonraki sürümlerinde verilecektir.



--------------------------------------------------------------------------------

15. Form kullanımı


Formlar, web sayfalarında kullanıcıların doğrudan bilgi girip sayfanın bulunduğu web sunucusuna ya da başka yerlere bunları gönderebildikleri mekanizmalardır. Bir on-line alışveriş merkezinden ürün seçmek, para ödemek, ya da bir ankete cevap verip sonucu göndermek vb gibi birçok iş <FORM> belirteci kullanılarak yapılır. Kullanımla ilgili ayrıntılı bilgiler CSS'nin ilerleyen sürümlerinde verilecektir.




--------------------------------------------------------------------------------

16. HTML döküman içinde sayaç kullanımı

Sayaçlar, sayfalarınızın kaç kez ziyaret edildiğini saptayan ve sunucu tarafıda çalışan CGI programlardır. Kullanımla ilgili ayrıntılı bilgiler CSS'nin ilerleyen sürümlerinde verilecektir.



--------------------------------------------------------------------------------

17. HTML döküman içinde basit JavaScript kullanımı

Kullanımla ilgili ayrıntılı bilgiler CSS'nin ilerleyen sürümlerinde verilecektir.



--------------------------------------------------------------------------------

18. Sayfamı hazırlarken Türkçe karakterler kullanmalı mıyım? Nasıl?

Sayfalarınızda kullandığınız Türkçe karakterler eğer iso-8859-9 kod tanımlamasına uygunsa popüler 2 web istemcisi netscape ve msie tarafından sorunsuz görüntülenebilmektedir. Daha fazla ayrıntı daha sonraki sürümlerde verilecektir.



--------------------------------------------------------------------------------

19. Hazırladığım sayfa her web istemcisinde aynı görünecek mi? Bu konuda nelere dikkat etmeliyim?

Eğer sayfalarınızda standart HTML kullanmışsanız, tüm istemcilerde aynı görünmemesi için hiç bir sebep yok. Ancak;

Eğer sayfalarınıza, lynx ya da benzeri bir metin tabanlı web istemcisi (tarayıcısı) ile birisi bakarsa, resimleri göremeyecektir.
Sayfalarınızda, sadece özel bir istemcinin anlayabileceği bazı ek HTML belirteçleri kullanmışsanız yine bazı kötü sürprizlerle karşılaşabilirsiniz..


--------------------------------------------------------------------------------

20. Web sayfası hazırlama ve HTML ile ilgili daha ayrıntılı dökümanlara nasıl/nereden ulaşabilirim?

Aşağıda, HTML ve Web ile ilgili bazı Türkçe ve Ingilizce kaynaklar listelenmiş durumda. Özellikle HTML Premier ve bunun Türkçe Sürümü size çok yararlı olacaktır.

Programcılar için Temel WWW sayfası hazırlama : http://yardim.bilkent.edu.tr/WWW/gorkem.html
HTML Premier : http://www.ncsa.uiuc.edu/General/Internet/WWWW/HTMLPrimer.html
Web Hakkında Bilmek İstediğiniz Her Şey : http://cclub.metu.edu.tr/www
HTML Reference Manual : http://www.sandia.gov/sci_compute/html_ref.html
HTML Made Easy : http://www.jmarshall.com/easy/html/testbed.html
How to Write HTML Files : http://www.ucc.ie/info/net/htmldoc.html
WWW HandBook : http://web.bilkent.edu.tr/WWW/handbook/



--------------------------------------------------------------------------------

21. Web sayfası içinde kullanabileceğim küçük "resimcikler"i (gif ve animated gif) nereden alabilirim? Kendim de oluşturabilir miyim? Nasıl?

Bu tip resimleri oluşturmanın birkaç yolu var :Kendiniz bir resim editörüyle oluşturabilirsiniz. Varolan bazı resimleri yine editörler yardımıyla değiştirebilirsiniz ya da kağıt ortamından "Scanner" yardımıyla bulduğunuz/çizdiğiniz resimleri bilgisayar ortamına aktarabilirsiniz. Özellikle küçük logolar, bazı yazı efektleri vb kolayca oluşturulabilir.

Öte yandan, bu resimcikleri bulabileceğiniz siteler de mevcut. İşte bunlardan bazıları :

http://www.ehb.itu.edu.tr/docs/html/index.html : Sevgili KaGan'in internmet'ten derledigi yüzlerce resimcik ve anime gif'leri bulabileceginiz bir adres. Resimcikler kategorilere ayrılmış (butonlar, arka plan resimleri, çizgiler vb gibi). Bir bakın, pişman olmazsınız..
http://www.candor.com/grabagif/buttons.htm : Bu sitede bazı buton resimcikleri bulabilirsiniz.
http://diogenes.baylor.edu/WWWproviders/Library/BeyondLib/clipart.html : Resimcikler ve anime gif resimleri ile ilgili internet üzerinde bulabileceğiniz her türlü bilgi özetlenmiş. Bir çok siteye link var. İyi bir başlangıç noktası.
http://www.bmlive.com/gifs/ : Blue Marble Gif Archive..
http://www.barrysclipart.com/ : Bir başka devasa site daha. Birçok resimcik var.
http://www.serve.com/HomepageExtras/anigif/ :Anime Gif'ler bulabileceğiniz küçük ama güzel bir site.
http://www.newcreations.net/3d/ : konuyla ilgili bir çok shareware/freeware programları bulabileceğiniz linkler...




--------------------------------------------------------------------------------

22. Bağlandığım bir web sayfasının HTML kodunu nasıl alabilirim?

Bunun için, sayfa yüklendikten sonra, web istemcisinizin "File" menüsünden "Save (As)" seçeneği ile dosyayı kendi bilgisayarınıza kaydedebilirsiniz. Ancak, bu durumda sadece HTML kodu almış olursunuz. Sayfadaki resimler ve link bilgileri gelmez. Bunların da gelmesini istiyorsanız 6. Bölüm'de açıklandığı gibi sayfayı herşeyiyle almalısınız.




--------------------------------------------------------------------------------

23. Sayfamın HTML kodunu başkalarının görmesini engelleyebilir miyim?

Malesef hayır.



--------------------------------------------------------------------------------

24. Web sayfamda internetteki diğer sayfalardan aldığım bilgileri (yazı, resim vb) serbestçe kullanabilir miyim?

Özellikle resimcik ve anime gif'leri, ya da genel amaçlı Java Script-leri, eger ilgili sayfada aksi bir ibare yoksa, kullanabilirsiniz. Bunların hemen hemen tamamı zaten artık anonim olmuş ve ilk kimin yaptığı bilinmiyor. Ancak, bir sayfadan, o sayfanın yazarına ait bir bilgiyi, dökümanı, grafiği -herhangi birşeyi- izin almadan kullanmamalısınız.



--------------------------------------------------------------------------------

25. Web sayfasında kullandığım resimler için hangi formatı tercih etmeliyim? GIF mi, JPEG mi?

Standart GIF, en fazla 256 renge müsade eder. Eğer resminizin daha çok renkli görünmesini istiyorsanız JPG tercih etmelisiniz. Öte yandan, 256 renk çoğu uygulamalar için yeterlidir. 256 renk için de, JPG sıkıştırması ile, GIF formatına göre daha küçük dosyalar elde edilebilir. Sonuçta, küçük dosyalar için (1-5kbyte civarında) GIF kullanımı yaygındır. Dosya boyu 20-30kbyte'ı geçmeye başladı mı genellikle JPG tercih ediliyor.




--------------------------------------------------------------------------------

26. Bir web sayfası yaptım. Diğer insanların bundan nasıl haberi olacak?

Bunun birkaç yolu var. Eğer sayfanızda işlediğiniz bir konu varsa (pop müzük ya da bilgisayar programlama veya başkabirşey..) bununla ilgili listeler ve tartışma öbeklerine sayfanızın varlığından sözeden mesajlar atabiliriniz. Ayrıca, gönderdiğiniz her e-posta'nın sonuna isminizden sonra web sayfanızın adresini yazabilirsiniz. Bu yolla daha çok insanın bilgisi olacaktır. Ayrıca, AltaVista, LyCos gibi popüler arama motorlarına sayfanızı kaydettirebilirsiniz. Bunun için 7. Bölüm'de ilgili yerleri okumalısınız.



--------------------------------------------------------------------------------

27. Bedava "kişisel web sayfası hizmeti" veren yerler var mı?

Evet var, ve bunların sayıları her geçen gün artmaktadır. Bu siteler, genellikle, bir web listeleyicisi (istemci, browser, tarayıcı) ile erişilebilen bir kullanıcı ara yüzü ile, kişilere kendi ev sayfalarını hazırlama ve saklama servisi vermektedir. Böyle merkezler, daha çok reklam gelirleri ve bazı sponsorluklar yolu ile bu servisleri bedavaya verebilmektedir. Web ortamının, her geçen gün, ticari amaçlı olarak daha fazla kullanılacağını düşünürsek, burada bu servislerin argümanı : "üyelerine bazı paralı servislerin ve ürünlerin kataloglarını tanıtmak, reklamını yapmak" şeklinde olabilir. Nedeni ne olursa olsun en önemlisi, bu servisin bedava olması. Burada da, bedava e-posta hesap servislerinde olduğu gibi, çok önemli potansiyel güvenlik problemleri var. Önümüzdeki aylarda bu konuda da hararetli tartışmalar olabilir. Eğer kişisel web sayfanız yoksa aşağıdaki adresleri bir deneyin.

Geocities : http://www.geocities.com/
Tripod : http://www.tripod.com/
Angel Fire : http://www.angelfire.com
Home Pages for Homeless : http://www.homeless.com/
CRHome Student Web : http://www.crhome.com/
Free Town : http://www.freetown.com/
NorthWest Voyager : http://www.nwvoyager.com/
Hompage Central : http://www.i-exposed.com/freehp/
WebSight Magazine Free Home Page : http://free.websight.com/free/
Net Hosting : http://www.nethosting.com/
Paradigm-Net Free Home Page : http://www.paradigm-net.com/home/free.htm
PHooL Communications : http://phool.dhinternet.com
Info Chase : http://www.infochase.com
Inca : http://www.inca.de/
Bu servisleri, kötü kullanım ile suistimal etmemek ve kullanım kurallarına uymak ta bir internet etiğidir. Tabii ki en iyisi, web sayfanızın bulunduğunuz sitede olması. Web sayfası servisi artık standart bir internet hizmeti haline geldi. Hemen heme tüm İSS şirketler ve üniversitelerin çoğu kullanıcılarına bu hizmeti vermektedirler.


--------------------------------------------------------------------------------

28. Diğer formatlarda (Word DOC, (La)TeX, PPT vb) hazırlanmış dosyaları hemen HTML'ye dönüştürebilir miyim?

Microsoft Word ve Power Point, yeni sürümüyle birlikte (Word 97, PowerPoint 97), hazırladığınız dökümanları HTML olarak kaydetmenize izin veriyor. Diğer Word sürümleri için de HTML Assistant adında bir yardımcı program var. La(TeX) ile hazırlanan dökümanları ise hemen hemen bire-bir html'e dönüştürmek mümkün. Bu konuda programlar ve daha fazla bilgi arıyorsanız;

HTML Converters : http://union.ncsa.uiuc.edu/HyperNews/get/www/html/converters.html
(La)TeX -> HTML Dönüştürücü (dos,win'95, Mac, unix) : http://hutchinson.belmont.ma.us/tth/tth.html

adreslerinde çok iyi başlangıç noktaları var.




--------------------------------------------------------------------------------

29. Web sayfamı başkaları silebilir mi? Ya da değiştirebilir mi?


Bunun olabilmesi için birilerinin sizden izinsiz bilgisayarınıza girmesi lazım. Bu da sistem güvenliği ile ilgili bir sorun. Dosyalarınız bir Unix makine üzerindeyse, bununla ilgili olarak 15. Bölüm'de dosya izinleri kısmını okuyabilirsiniz.




--------------------------------------------------------------------------------


30. Sayfa hazırlamada gözönüne alınması yararlı olabilecek bazı diğer ipuçları

Mutlaka ana web sayfanızın sonuna kendi e-mail adresinize bir bağlantı ekleyin. Böylece insanların size ulaşmalarını ve sayfa hakkındaki muhtemel görüşlerini size iletebilmelerini kolaylaştırmış olursunuz. Söz gelimi,
Her türlü görüş ve öneriler için e-mail adresim : <a href="mailto:isim( at )domain.com.tr"> isim( at )domain.com.tr </a>
şeklindeki bir satır oldukça işe yarar.

Hazırladığınız sayfalara, mümkünse birkaç farklı web istemcisi ile (netscvape, msie, mosaic, opera gibi) bakın. Istemcinizin görüntü penceresini küçülterek (window resize) sayfanızın nasıl göründüğünü kontrol edin. Tablolar kayıyor mu? Paragraflar ne alemde?
Mutlaka sayfalarınızdaki tüm linkleri kontrol edin. Acaba yanlışlıkla kendi yerel diskinizdeki bir dosyaya bağlantı yapmış olabilir misiniz??? Unutmayın, tüm bağlantıları "bağıl" yapmak herzaman en iyisidir.
Bir arkadasşınıza sayfanız hakkında fikrini sorun.
Sayfalarınıza, grafik, renk vb özellikleri kısıtlı bilgisayarlardan da erişilebileceğini düşünerek biraz dikkatli olun. Sayfanıza herhangi bir istemci ile (sozgelimi, metin tabanli lynx ile) erişen birisinin sayfayı (resimleri/renkleri göremese bile) takip edebilmesi lazım.
Eğer ana sayfanıza bağlı birden çok sayfa tasarlamışsanız, bu sayfalar arasında rahatça dolaşılabilmesi için gerekli tedbirleri alın (sayfalar arası bağlantılar ve uygun yerlerde verilecek ana sayfaya dönüş bağlantıları gibi)
Eğer <img> belirteci kullanıyorsanız, mutlaka "alt", "width", ve "height" seçeneklerini de ekleyin. "alt" seçeneği, bu resmi gösteremeyen istemciler için alternatif bir yazıyı ekrana getirir. "width" ve "height" ise, resmin piksel cinsinden genişlik ve uzunluğunu verir. Bu bilgileri vermezseniz, resim yüklenmesi bitmeden sayfanın kalan yazı kısımları görüntülenmez. Eğer verirseniz, resim yükleniyorken, sayfanızın ziyaretçisi aynı anda ziyaretçi yazıları da görebilir.
HTML kodunu anlaşılır ve kolayca takip edilebilir şekilde yapın. Sonuçta, siz ya da bir başkası aynı satırları tekrar elden geçirmek zorunda kalabilir. Yoksa, siniz krizleri geçirebilirsiniz.
Ziyaret ettiğiniz web sitelerindeki iyi ve kötü tasarlanmış sayfa tarzları sizin kendi stilinizi ve kendi sayfa organizasyonunuzu geliştirmenizde yardımcı olacaktır.

 

HTML'YE GİRİŞ
HTML, HyperText Markup Language, tarayıcı (browser)'lardan görebileceğimiz (Internet Explorer, Netscape gibi) internet dokümanlarını yaratmaya yarayan bir işaretleme dilidir. İnternet üzerindeki tüm sayfaların kaynağı HTML'dir. Tarayıcı olmadan HTML kodları birşey ifade etmez.

HTML dokümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.HTML, *.sHTML gibi uzantılarla kaydedilir. Bunun için notepad, pico, wordpad gibi editörler yeterlidir. Bunların yanında Frontpage, Dreamweaver, Homesite gibi bu iş için hazırlanmış ve kodlamayı kolaylaştıran programlar da vardır.

Her HTML dokümanı <HTML> ile başlar ve </HTML> ile biter. <> şeklinde görülen komutlara etiket (tag) adı verilir. Bir HTML dokümanı iki ana kısımdan oluşmaktadır:<head> . . . </head> etiketi arasında yer alan Başlık bölümü; <body> . . . </body> etiketleri arasında yer alan Gövde Bölümü. Başlık bölümü içine <title>. . . </title> etiketi konulur. title, tarayıcımızın en üstünde gözükür ve oluşturulan sayfanın başlığıdır.

Örnek:



Eğer hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, , ş, ö, ü) düzgün görünmesi için Başlık kısmı içerisine aşağıdaki meta etiketi eklenir. Meta etiketleri için detaylı bilgiye buradan ulaşabilirsiniz.

<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">

title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde' ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız.

Herhangi bir web sayfasının HTML kodunu görmek istediğimiz zaman, farenin sağ tuşuna tıklayıp view source/kaynağı görüntüle seçeneğini seçeriz.

Bir etiketin nasıl davranması gerektiği hakkında bilgi içeren etiketin içindeki metne Değişken denir. Aşağıdaki örnekte body etiketinin içindeki bgcolor ifadesi değişkendir ve arkaplan rengini belirler. Çoğu etiket isteğe bağlı olarak ya da gerektiği için bağımsız değişkenleri kabul eder.

<body bgcolor="yellow">

Çift taraflı etiketler içiçe geçebilirler ama dikkat edilmesi gereken nokta en son açılan etiketin en önce kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir.

<b><i>Bu bir yanlış örnektir. </b></i>
<b><i>Doğrusu budur. </i></b>

<br> ve <hr> gibi tek taraflı etiketler , <br /> ve <hr /> şeklinde yazılmalıdır.

Başa Dön


--------------------------------------------------------------------------------

BASİT HTML ETİKETLERİ

Başlıklar:

6 çeşit başlık vardır:<h1>, <h2>, . . . <h6>. Bunlardan en büyüğü <h1>, en küçüğü ise <h6>'dır.

HTML etiketi Etiketin Web Sayfasındaki görüntüsü


<h1>H1 ile yapılan başlık</h1>
<h2>H2 ile yapılan başlık</h2>
<h3>H3 ile yapılan başlık</h3>
<h4>H4 ile yapılan başlık</h4>
<h5>H5 ile yapılan başlık</h5>
<h6>H6 ile yapılan başlık</h6>

H1 ile yapılan başlık
H2 ile yapılan başlık
H3 ile yapılan başlık
H4 ile yapılan başlık
H5 ile yapılan başlık
H6 ile yapılan başlık

Paragraflar, Satır boşlukları ve Yatay Çizgiler:

Paragraflar <p> etiketiyle oluşturulur. Paragraf metni <p> ile </p> arasında yer alır. Örneğin:

<p>Bu bir paragraftır. </p>

Paragraf başlatmadan bir satır boşluğu yaratmak için <br/> etiketi kullanılır. Örneğin:

<p>Paragrafın ilk satırı. <br />Paragrafın ikinci satırı. </p>

Sayfaya (aşağıdaki gibi) yatay çizgi eklemek için <hr> etiketini kullanırız.


--------------------------------------------------------------------------------
HTML etiketi Etiketin Web Sayfasındaki görüntüsü


<p>Birinci paragraf</p>
<p>İkinci paragraf </p>
<p>Üçüncü paragraf
<br />Alt satır </p>
<hr />

Birinci paragraf

Ikinci paragraf

Üçüncü paragraf
Alt Satır

--------------------------------------------------------------------------------


Başa Dön


--------------------------------------------------------------------------------

METİNLER

<font color="red" face="arial" size="3">. . </font>

Color yazı karakterinin rengini, face yazi tipini (arial, verdana, tahoma gibi), size da boyutunu belirler. Size değişkeninde kullanılan rakam 1'den 7'ye kadardır.

<font> etiketi HTML 4. 0 'da desteklenmemektedir ama yine de taracıyıcılar <font> etiketi ile yapılmış biçimlendirmeyi destekler. Hala pek çok web sayfasında <font> etiketi kullanılmaktadır. Başlangıç seviyesi için <font> etiketi kullanmak yeterliyken ilerki seviyeler için stilleri kullanmanız tavsiye edilir. (Bkz: Gelişmiş HTML Dersi Stiller ve Satır İçi Kapsayıcıları Başlıkları)

Font etiketi ile birlikte aşağıdaki tabloda verilen etiketleri kullanarak sayfanızdaki metinleri biçimlendirebilirsiniz.

Etiket Açıklama Uygulama
<b>. . </b> Kalın biçimlendirme Metin
<i>. . </i> İtalik biçimlendirme Metin
<u>. . </u> Altı çizgili biçimlendirme Metin
<sup>. . </sup> Üst simge X2
<sub>. . </sub> Alt simge H2
<code>. . </code> Bilgisayar kodu biçimi Metin
<blockquote>. . </blockquote> Alinti biçimi Metin

Not: Metin biçimlerken başladığınız etiketi kapatmayı unutmayın.

Renkler :

HTML dokümanlarında renkler ya İngilizce isimleriyle, ya da 16'lık sayı düzenindeki "hexadecimal" değerleriyle belirtilir.
En sık kullanılan ve hemen hemen bütün tarayıcıların desteklediği 16 renk aşağıdakilerdir:

Renk Renk adi: Renk Renk adi:
aqua black
blue fuchsia
gray green
lime maroon
navy olive
purple red
silver teal
white yellow

Web renkleri ile ilgili ayrıntılı bilgiyi buradan bulabilirsiniz.

Örnek :

<body bgcolor="green">

Bu örnekte sayfanın arkaplan rengi yeşil olur.

<body bgcolor="#008000"> aynı sonucu verir.

Örnek :

<font color="#4B0082"> Font rengi "indigo" oldu. </font> Etiketi kapattığımız için tekrar normale döndü.

Başa Dön


--------------------------------------------------------------------------------

LİNKLER:

Linkler <a>. . . </a> etiketi içinde, href="" komutuyla belirtilir.

Örnek:

<a href="http://www.metu.edu.tr" target="_blank">ODTÜ Ana Sayfası</a>

ODTÜ Ana Sayfası

Bu örnekte bir de target değişkeni verilmiştir. Adresi verilen web sayfasının başka bir pencerede açılmasını isterseniz target="_blank" komutunu eklemeniz gerekir. Aynı pencerede açılmasını isterseniz ilgili değişkeni target="_top" şeklinde yazabilirsiniz. Hiç bir şey yazılmazsa da sayfa aynı pencerede açılır.

title değişkenini kullanarak da fare linkin üzerine geldiğinde gözükecek link açıklamasını ekleyebilirsiniz. Aşağıdaki örnekte fareyle linkin üzerine gelip beklerseniz Orta Doğu Teknik Üniversitesi yazısını göreceksiniz.

<a href="http://www.metu.edu.tr" target="_blank" title="Orta Doğu Teknik Üniversitesi" >ODTÜ Ana Sayfası</a>

ODTÜ Ana Sayfası

Eğer hazırladığınız dokümanlar arasında bir bağlantı kurmak istiyorsanıiz, <a> etiketini aşağıdaki gibi kullanmalısınız.

<a href="dosyaadi.HTML">Önceki sayfa</a>

Bir e-posta adresine link vermek istiyorsanız:

<a href="mailto:mail( at )mail.com.tr">E-posta atmak için tıklayın. </a>

E-posta atmak için tıklayın.

Bu linke tıklandığında bilgisayarda kurulu varsayılan e-posta okuma programı açılır ve gönderilecek adres bölümünde etiket içinde belirtilen adres yazar.

Aynı doküman içinde bağlantı kurmak istersek tutturucu noktaları (anchor points) kullanırız. Tutturucu HTML sayfasında bir yer işaretidir. İsmi ile bir bölgeyi belirler ve bu tutturucuya bir link verebilirsiniz. Bu sayfadaki her konu başlığına bir tutturucu belirlenmiştir. Sayfa başındaki listede herhangi bir başlığa tıkladığınızda sayfa içindeki ilgili konu başlığına gider. Örnek olarak Resim Ekleme bölümüne gitmek için buraya tıklayabilirsiniz. Tutturucuların kullanımı aşağıdaki gibidir.

Linkler başlığına aşağıdaki gibi bir tutturucu belirleriz.

<a name="link">Linkler</a>

Sayfanın herhangi bir bölümünde yukarıda belirlediğimiz tutturucuya aşağıdaki gibi link veririz

<a href="#link">Linklere git</a>

Sağ tarafta bulunan Başa Dön linkleri de bu şekilde hazırlanmıştır.

Başa Dön


--------------------------------------------------------------------------------

RESİM EKLEME

Resim ekleme:

<img src="resim.jpg" />

şeklinde olur. Dikkat etmemiz gereken kulanacağımız resmin dizin yapısıdır.

Bağımsız Değişkenler :

<img src="" width="" height="" border="" alt="" />

alt: Resme açıklama vermemizi sağlar. Fareyi resmin üstüne getirdiğimizde, alt değişkeninde yazılan açıklama ekranda çıkar. Eğer resim açılmazsa, onun yerine açıklama görünür.

src : Resim dosyasının kaynağını belirtir.

** Eğer web sayfasının arka planında bir imajın çıkması istenirse:

<body background="resim.jpg"> şeklinde yazılır.

Resimleri linke dönüştürmek için <a> etiketi ile <img> etiketini içiçe kullanırız.

<a href="http://www.metu.edu.tr" target="_blank"><img src="odtu.jpg" /></a>

Not: Resimlerin width ve height değişkenlerini belirtmeniz sayfanızın yüklenirken şeklinin bozulmasını önler.

Başa Dön


--------------------------------------------------------------------------------

LİSTELER:

Üç çesit liste vardır:
i. Sıralı Liste(Ordered List):

Örnek: HTML etiketi Etiketin Web Sayfasındaki görüntüsü
<ol type="1">Çerezler:
<li>Kavurga
<li>Çekirdek
<li>Mısır
<li>Cips
</ol>
<ol type="a">Içkiler:
<li>Bira
<li>Votka
<li>Şarap
<li>Viski
<li>Rakı
</ol> Çerezler:
Kavurga
Çekirdek
Mısır
Cips
Içkiler:
Bira
Votka
Şarap
Viski
Rakı



Örnekte görüldüğü gibi type değişkeni sıralı listenin türünü belirler. Type değişkeni için aşağıdaki değerlerden biri kullanılabilir:

type: {1, a, A, I, i}

Listeyi start değişkeni ile istediğimiz sayıdan baslatabiliriz:

Örnek: HTML etiketi Etiketin Web Sayfasındaki görüntüsü
<ol start="199">Çerezler:
<li>Kavurga
<li>Çekirdek
<li>Mısır
<li>Cips
</ol> Çerezler:
Kavurga
Çekirdek
Mısır
Cips



ii. Sırasız Liste(Unordered List):

Örnek: HTML etiketi Etiketin Web Sayfasındaki görüntüsü
<ul type="circle">Çerezler:
<li>Kavurga</li>
<li>Çekirdek</li>
<li>Mısır</li>
<li>Cips</li>
</ul>
<ul type="disc">Içkiler:
<li>Bira</li>
<li>Votka</li>
<li>Şarap</li>
<li>Viski</li>
<li>Rakı</li>
</ul> Çerezler:
Kavurga
Çekirdek
Mısır
Cips
Içkiler:
Bira
Votka
Şarap
Viski
Rakı



Benzer şekilde burada da type değişkeni sırasız listenin işaretini belirler. Type değişkeni için aşağıdaki değerlerden biri kullanılabilir:

type:{square, disc, circle}

iii. Tanımlama Listeleri (Definition List):

Örnek: HTML etiketi Etiketin Web Sayfasındaki görüntüsü
<dl>
<dt>Karbonhidrat ve ben
<dd>En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım. </dd></dt>
<dt>Sebze ve ben
<dd>Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. </dd></dt>
<dt>Et ve ben
<dd>Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. Balık seçerim ama. </dd></dt>
</dl> Karbonhidrat ve ben
En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım.
Sebze ve ben
Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir.
Et ve ben
Et seven bir insanımdır. Her çesit kebabı afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. Balık seçerim ama.


Başa Dön


--------------------------------------------------------------------------------

TABLOLAR

Tablolar <table>. . . . </table> etiketleri arasında oluşturulur. <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi kullanılır.

Örnek :

<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td>4. hücre</td><td>5. hücre</td><td>6. hücre</td></tr>
</table>

1. hücre 2. hücre 3. hücre
4. hücre 5. hücre 6. hücre


Bağımsız Değişkenler:

<table border="" cellpadding="" cellspacing="" width="" height="" bgcolor="" align="" valign="">
<td height="" width="" bgcolor="" align="" valign="" colspan="" rowspan="">

border : Çerçevenin kalınlığını belirler. border="0" dersek tabloda çerçeve bulunmaz, bu miktarı arttırdıkça çerçevenin kalınlığı da artar.

cellpadding , cellspacing : Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların uzaklığı ise cellspacing değişkeni ile belirtilir.

bgcolor: <table bgcolor="red"> şeklinde kullanarak bütün tablo ya da <td bgcolor= "red"> şeklinde sadece tek bir hücre renklendirilir.

align : Hücredeki elemanın yatay konumunu belirler ve "right, left, center" opsiyonları ile kullanılır.

valign : Hücre elemanının düşey konumunu belirler ve opsiyonları "top, bottom, middle"dır.

colspan , rowspan : Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait <td>. . </td> etiketi silinir.

Örnek :

<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td rowspan="2">4. hücre</td><td colspan="2">5. hücre</td></tr>
<tr><td>6. hücre</td><td>7. hücre</td></tr>
</table>

1. hücre 2. hücre 3. hücre
4. hücre 5. hücre
6. hücre 7. hücre
S
--------------------------------------------------------------------------------

FORMLAR

Formlar <form>. . . </form> etiketleri arasında oluşturulur. Form bilgilerini action değişkeninin içine yazdığınız dosyaya veri olarak gönderebilirsiniz. Formlar sayesinde anket ve geribildirim uygulamaları hazırlayabilirsiniz. Ayrıntılı bilgi için buraya tıklayın.

Örnek:

<form name="kimlik" action="gonder.php" method="get">
Isim/soyad : <input type="text" size="20" name="isim"><br>
Doğum yeri : <input type="text" size="20" name="dogumyer" ><br>
Doğum tarihi : <input type="text" size="10" name="dogumtarih" ><br>
Cinsiyet : <input type="radio" name="cins" value="erkek" > Erkek <input type="radio" name="cins" value="kiz"> Kiz<br>
Hobiler:<br>
<input type="checkbox" name="muzik" >Müzik dinlemek<br>
<input type="checkbox" name="manti" >Manti açmak<br>
<input type="checkbox" name="bungee" > Bungee Jumping<br>
<input type="checkbox" name="aikido">Aikido<br>
<input type="checkbox" name="halay">Halay çekmek<br>
<input type="checkbox" name="diger">Diğer :<br>
<textarea rows="4" cols="30" name="diger"></textarea><br>
Şifrenizi giriniz:<br>
<input type="Password" size="15"><br>
<input type="submit" value="GÖNDER"> <input type="reset" value="SIL">
</form>

Isim/soyad :
Doğum yeri :
Doğum tarihi :
Cinsiyet : Erkek Kiz
Hobiler:
Müzik dinlemek
Mantı açmak
Bungee Jumping
Aikido
Halay çekmek
Diğer :

Şifrenizi giriniz:




action: Formun gönderileceği adresi belirtir.
method="get":Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır.
method="post":Formdaki bilgiler bir adrese postalanacaksa kullanılır.
type="text" : Tek satırlık bir metin alanı açar.
size="" :Bu metin alanının boyutunu belirler.
type="checkbox" : Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar.
type="radio" : Tek seçenekli bir sorunun tek yanıtı alınır.
type="submit" : formu action'la belirtilen dosyaya yönlendiren bir buton yaratır.
type="reset" :Bu butona basınca form boş hale gelir
type="password" : Bir password alanı olusturur. Buraya girilen her karakter * şeklinde görünür.
<textarea rows="" cols=""> :type="text" gibi tek satırlı değil de çok satırlı bir metin alanı istiyorsak bu etiketi kullaniriz. cols metin alanının uzunluğunu, rows ise yüksekliğini pixel cinsinden verir.

Listeleme:

Select ve option etiketlerini kullanarak seçimlik liste (menü) oluşturabiliriz. Option etiketi ile belirtilen her bir değer listenin bir elamanını oluşturur ve fareyle seçilen bu elemanlardan biri select etiketinde belirtilen değişkenin değeri haline gelir.

Örnek:

<select name="otolar">
<option>Alfa Romeo</option>
<option>BMW</option>
<option>Peugeot</option>
<option>Renault</option>
<option>Seat</option>
<option>Lada</option>
</select>

 

Bugün 23 ziyaretçi (101 klik) kişi burdaydı!
Sola Kaydır

KODSİSTEMİ© 2008-2012 © www.kodsistemi.tr.gg tarafından düzenlenmiştir.

Aşağı doğru inen reklamı sola kaydırmak için reklamın altındaki butonu tıklayın reklam sola geçer. Soldayken yaptığınızda sağa geçer.

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol