Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için"

Gözde Giray
8 yıl önce
İzleme sayısı:

1 HTML Ders 8

2 Kayan Çerçeveler Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için <IFRAME NAME="content_frame" width="400" height="244" SRC="fframe.htm">Web sayfasının bu kısmında kayan çerçeve kullanılmaktadır! </IFRAME> kullanılır. Bu özelliği desteklemeyen tarayıcılar Web sayfasının bu kısmında kayan çerçeve kullanılmaktadır! yazısını görüntüleyeceklerdir. html örnekler\örnek19.html

htm">Web sayfasının bu kısmında kayan çerçeve kullanılmaktadır! </IFRAME> kullanılır.

3 Marquee Yazı Kaydırma Web sayfasının sağ kısmından sol kısmına doğru kayan yazı göstermek için kullanılır. <MARQUEE>Bu yazı sağdan sola doğru yavaşça hareket etmektedir. </MARQUEE> <MARQUEE BEHAVIOR="ALTERNATE" SCROLLAMOUNT="50" SCROLLDELAY="8">Bu yazı sağdan sola gidip gelmektedir.</marquee> <MARQUEE BEHAVIOR="SLIDE">Bu yazı sağdan sola doğru kayacak ve sağ tarafa dayalı kalacaktır.</marquee> Bu özelliği desteklemeyen tarayıcılar sadece yazıyı görüntüleyecektir. BU ARADA <BLINK> ve <MARQUEE> kullanımı tavsiye edilmemektedir. html örnekler\örnek19b.html

</MARQUEE> <MARQUEE BEHAVIOR="ALTERNATE" SCROLLAMOUNT="50" SCROLLDELAY="8">Bu yazı sağdan sola gidip gelmektedir.

4 Meta HTML dosyasındaki <head> bölümü içinde tanımlanan bu takı tarayıcıya ve arama motorlarına sayfamız hakkında bilgi verir. name= veri_tipi Bu bölümde author, description ve keywords özellikleri tanımlanır. equiv= veri_tipi Bu bölümde refresh, expires, content ve content-style-type özellikleri tanımlanır. <meta name= author content= Linux.org.tr web Grubu > <meta name= description content= Türkiye Linux Kullanıcıları Grubu Web Sayfası > <meta name= keywords content= linux, unix, bsd, openbsd, freebsd, programlama, serbestyazılım, sunucu, internet >

equiv= veri_tipi Bu bölümde refresh, expires, content ve content-style-type özellikleri tanımlanır. <meta name= author content= Linux.org.

5 Meta - 2 Sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır. <meta http-equiv= refresh content= 5; URL= > GMT saat sistemine göre belirtilen saat ve tarihte geçerliliğini yitirecektir (silinecektir). <meta http-equiv= expires content= Wed, 25 Feb :00:00 GMT > Belgemizde kullanılan CSS (Cascading Style Sheet) dosyamızın text dosyası olduğunu belirtir. <meta http-equiv= content-style-type content= text/css >

tr/ > GMT saat sistemine göre belirtilen saat ve tarihte geçerliliğini yitirecektir (silinecektir).

6 Türkçe Karakterler <meta http-equiv= Content-Type content= text/html; charset= > <meta http-equiv= Content-Type content= text/html; charset=windows-1254 > Kod parçası yardımıyla Türkçe karakterlerin web sayfamızda doğru gözükmesi sağlanmaktadır. html örnekler\örnek16.html

$web sayfamızda doğru gözükmesi sağlanmaktadır. html örnekler\örnek16.$

7 Özel Karakterler Tag < > & " &#nnn; Tanımı < (less than symbol) > (greater than symbol) & (ampersand) " (double quote) Registered Trademark [TM] Copyright [c] ASCII code (where nnn is the value)

8 Formlar & Metin Alanları Formlar yardımıyla kullanıcılardan etkileşimli veri girişi sağlayan alanlar oluşturulur. Pek çok web sitesinde; bazı programları çekmeden önce isminizi ve e-posta adresinizi girmeniz gerekir veya küçük anketler olur onları doldurmanız istenir, gezdiğiniz web sitesi hakkındaki görüşleriniz sorulur vs. Siz de web sitenize bu ve benzeri pek çok amaç için kullanılabilecek formlar yerleştirebilirsiniz.

Pek çok web sitesinde; bazı programları çekmeden önce isminizi ve e-posta adresinizi girmeniz gerekir veya

9 Dikkat!!! ACTION parametresi form içerisine girilen verilerin işleneceği uygulamanın URL sini içermektedir. <FORM ACTION=" >... </FORM> Ne yazık ki <FORM> işaretinin ACTION parametresine e-posta adresinizi yazmanız her zaman için form içeriğinin size ulaşacağını garanti etmez. Size e-posta gelebilmesi için sayfanızdaki formu dolduran kişilerin web tarayıcılarındaki e-posta sunucu ayarları doğru yapılmış olmak zorundadır ki bazen bu ayarlar yapılmamış veya yanlış olabiliyor. Burada kesin çözüm CGI programları kullanmak ki bunun için web hosting hizmeti aldığınız kuruluşa danışmanız gerekiyor.

.. </FORM> Ne yazık ki <FORM> işaretinin ACTION parametresine e-posta adresinizi yazmanız her zaman için form içeriğinin size ulaşacağını garanti etmez.

10 Verileri İletme Metotları <FORM> takısı içerisinde kullanılar method özelliği verilerin işlenmek için hangi metot ile gönderileceğini belirler. Bu işlem için iki değişik yol vardır: POST ve GET metotları.

hangi metot ile gönderileceğini belirler.

11 Metin Alanları Form hazırlarken kullanılan alanlar Metin satırı (<INPUT TYPE="TEXT >) Metin alanları (<TEXTAREA >) Radyo düğmeleri (<INPUT TYPE="RADIO >), İşaret kutucukları (<INPUT TYPE="CHECKBOX" >) Kombo kutuları (<SELECT NAME="liste >) Şifre satırı (<INPUT TYPE="PASSWORD >) Dosya yükleme (< INPUT TYPE ="file >) Çerçeve kutusu (<FIELDSET STYLE= PADDING: 2">) Gelişmiş düğme (<BUTTON NAME="B1"> ) Resim (<input src="getaway.jpg" type="image"> Etiket (<label>demene</label>) Saklanmış alan (<INPUT TYPE= HIDDEN >)

satırı (<INPUT TYPE="PASSWORD >) Dosya yükleme (< INPUT TYPE ="file >) Çerçeve kutusu (<FIELDSET STYLE= PADDING: 2">) Gelişmiş

12 Metin Alanı <TEXTAREA> işareti, boyutlarını COLS (en) ve ROWS (boy) parametreleriyle belirleyebileceğimiz, içine yazı yazılabilecek bir alan tanımlamamızı sağlıyor. Bu alana yazılan yazı, alanın fiziksel sınırlarını aşınca otomatik olarak kaydırma çubukları çıkacaktır. Böylece alanın fiziksel boyutlarıyla sınırlanılmadan istenildiği kadar yazı yazılabilir. WRAP parametresi bir satırın sonuna gelindiğinde satırın otomatik olarak bölünüp bölünmeyeceğini belirler. Yazılanların Enter'a basılmadığı sürece sağa doğru uzayıp gitmesini istemiyorsanız her zaman için "soft" değerini kullanın. html örnekler\örnek20.html

Böylece alanın fiziksel boyutlarıyla sınırlanılmadan istenildiği kadar yazı yazılabilir.

13 Metin ve Şifre Satırı <INPUT TYPE=TEXT> ile metin satırları tanımlıyoruz. NAME parametresiyle her birine bir isim veriyoruz. SIZE parametresi ise satırın görünür boyutunun kaç karakter olacağını belirliyor. Her ne kadar görünür boy çoğu zaman çok uzun olamasa da MAXLENGTH parametresiyle maksimum kaç karakter girilebileceğini belirleyebilirsiniz. Böylece satırın görünür boyunu aşan girdiler kaydırılarak gösterilecektir. Eğer metin satırına yazılan karakterlerin görünmesini istemiyorsanız TYPE parametresinin değerini PASSWORD yapın. Böylece her yazılan karakter yerine bir yıldız görüntülenecektir. Adından belli olduğu üzere bu özel metin satırı genellikle şifre girişleri için kullanılır. html örnekler\örnek21.html

Her ne kadar görünür boy çoğu zaman çok uzun olamasa da MAXLENGTH parametresiyle maksimum kaç karakter girilebileceğini belirleyebilirsiniz.

14 Radyo Düğmeleri Radyo düğmeleri, sunulan bir dizi seçenekten sadece bir tanesini seçmenize izin veren form öğeleridir. Örneğin Bu dersi anlatan hocanızdan memnun musunuz?" sorusuna hem evet hem de hayır yanıtını veremezseniz. Radyo düğmeleri web sitelerinde sık sık görmeye alıştığımız oylamalarda yoğun olarak kullanılır; seçeneklerden bir tanesini seçer ve Gönder düğmesine basarsınız. Radyo düğmesini seçili yapmak için <INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Zaten_Var" CHECKED> Örnek olarak biz de basit bir oylama/anket yapalım. html örnekler\örnek22.html

Radyo düğmeleri web sitelerinde sık sık görmeye alıştığımız oylamalarda yoğun olarak kullanılır; seçeneklerden bir tanesini seçer ve Gönder

15 İşaret Kutucukları İşaret kutucukları, radyo düğmelerinin aksine birden çok seçenek seçmenize izin verirler. Örneğin "Dışarıda yemek yerken tercih ettiğiniz yiyecekler:" sorusuna birden çok yanıt verebilirsiniz. Yanıtı birden çok olabilen sorular için işaret kutucukları kullanılmalıdır. İşaret kutucuklarını oluşturmak için <INPUT TYPE=CHECKBOX> ile başlayan satırları kullanıyoruz. Dikkat ederseniz bu satırlar herhangi bir VALUE değeri içermiyorlar; bunun yerine her bir işaret kutucuğunun kendine ait bir ismi var. CHECKED parametresi istediğiniz seçeneğin otomatik olarak seçili gelmesini sağlar. Radyo düğmelerinin aksine birden çok seçeneği otomatik olarak seçebilirsiniz. html örnekler\örnek23.html

Yanıtı birden çok olabilen sorular için işaret kutucukları kullanılmalıdır. İşaret kutucuklarını oluşturmak için <INPUT TYPE=CHECKBOX> ile başlayan satırları kullanıyoruz.

16 Kombo Kutuları Kombo kutuları, sayfayı uzanıp giden seçeneklerle doldurmak istemediğiniz zamanlarda çok yararlı olur. Bir kombo kutusu, yanındaki ok işaretine tıklandığında açılan ve içerdiği seçeneklerden birini seçmenize izin veren özel bir form öğesidir. Kombo kutusunu tanımlamak için <SELECT> ve <OPTION> işaretlerini kullanıyoruz. <SELECT> işareti kombo kutusunun tümüne karşılık geliyor ve NAME parametresiyle isimlendirilmesi gerekiyor. <OPTION> işareti ile ise kombo kutumuzda yer alacak her bir seçeneği belirliyoruz. Buradaki --Modem-- yazılı satırın bir VALUE parametresine sahip olmadığına dikkat edin. html örnekler\örnek24.html

Kombo kutusunu tanımlamak için <SELECT> ve <OPTION> işaretlerini kullanıyoruz.

17 Örnek Form Yandaki form doldurulup ilgili Submit Query düğmesine basıldığında bu veriler işlenecekleri uygulama içerisine gönderilirler. Bu işlem sonucunda http protokolü bir kısmı arka sayfada verilen veri transferini gerçekleştirir. örnekform1.html

18 Tarayıcının gönderdiği istek POST /cgi-bin/banking.pl HTTP/1.0 Content-Length: 154 Accept: image/gif... (more headers ) acct= &pin=0545&transaction=account+balanc es&verify_by_mail=yes&info=cds,autoloans&comments =What+use+is+this+without+withdrawals+and+deposits% 21%21

.. (more headers ) acct=11732432&pin=0545&transaction=account+balanc

19 Alanlar - Özet Alan Tipi Tanımlama text Hidden image password textarea select option submit reset Normal tek satırlık giriş Kullanıcı girişi için kullanılmaz, sunucudan alındıktan sonra formu izlemek için kullanılır. Üzerine resim konulan düğme Yazılanı göstermeyen kullanıcı girişi için Çok satırlı giriş Açılabilir veya kaydırılabilir seçim listesi Tamamlanan formu sunucuya gönderir Form içeriğini temizler html örnekler\örnek14.html

Üzerine resim konulan düğme Yazılanı göstermeyen kullanıcı girişi için Çok satırlı giriş Açılabilir veya

20 CGI Scripts HTML text, grafik ve diğer elemanları birleştirme ve görüntülenmesini sağlamasına rağmen yordamsal programlama için herhangi bir destek sağlamaz. HTML formları gibi ortamlar tarafından sağlanan verileri işlemek için CGI programları ve Scriptlerin kullanılmasına ihtiyaç vardır. CGI Common Gateway Interface- sunucuda bulunan programların web sayfası ile etkileşimde bulunmasına imkan tanımak için geliştirilmiş bir standarttır. Çoğu CGI programı UNIX shell script veya Perl gibi dillerde yazılır. Bunlar aynı zamanda C/C++ gibi derlenen dillerde de yazılabilir.

HTML formları gibi ortamlar tarafından sağlanan verileri işlemek için CGI programları ve Scriptlerin kullanılmasına ihtiyaç vardır.

21 CGI Scripts CGI scriptlerini çalıştırmak için üç farklı yol vardır. <A HREF=" <IMG SRC=" <FORM ACTION=" METHOD="POST"> Anchor üzerine tıklandığında CGI scripti çalıştırılır. Web sayfası yüklendiğinde image cgi scripti çalıştırır. Submit düğmesi üzerine tıklandığında form olayı çalıştırılır.

Benzer belgeler

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre