Frame ereve Kullanm Frame ereve Kullanm ereve frame

Frame (Çerçeve) Kullanımı Çerçeve (frame) ’yi bir browser penceresinden birden fazla web sayfasını görüntülemek

Frame (Çerçeve) Kullanımı Aşağıdaki etiketleri kullanarak ana frame penceresini oluştururuz. İLK ETİKET SON ETİKET

<FRAMESET> Etiketi Çerçeveli belge oluşturacağımız zaman, çerçevenin yapısını belirtmek için <FRAMESET> ve <FRAME> etiketlerini

<FRAMESET> Etiketi Aşağıdaki tabloda bir web sayfasının çerçevesinin nasıl tanımlanacağının birkaç örneği vardır. <FRAMESET

<FRAME> Etiketi <FRAMESET> ile çerçeve sayfası tanımlandıktan sonra her bir çerçeve penceresinin kaynağını belirtmeliyiz.

Çerçeveler Örneğimizde 3 adet html dosyası var. Bunlardan frame. htm dosyası çerçeve komutlarını içeriyor.

Çerçeveler <body bgcolor=". . . "> etiketi ile htm 1. htm dosyasının artalan rengi

<frameset>. . . </frameset> Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin yana

<frameset>. . . </frameset> cols="*, *" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz.

<frameset>. . . </frameset> Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz.

<frameset>. . . </frameset> Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik. İşte noframes kısmı

<frameset>. . . </frameset> FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar; frameborder=". . .

<frameset>. . . </frameset> FRAME etiketi ile kullanabileceğimiz parametreler; marginwidth=". . . " marginheight=".

Daha karmaşık çerçeveler Yan yana sütünlar ya da alta satırlar görünümünde çerçeveler açmayı öğrendik

Çalışma: Uygulamada en az üç çerçeveden oluşan sayfa hazırlanıp sol çerçevede linkler olacak ve

Çerçeveler <NOFRAME> Etiketi Eğer Web Tarayıcısı FRAME i desteklemiyorsa alternatif gösterilecek sayfa bu etiket

Çerçeveler <IFRAME> Etiketi Bu tag ile HTM kodları arasına bir çerçeve açılıp bu çerçevede

$Çerçeveler Örnek: <BODY> <IFRAME src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="http: \www. firat. edu. tr" align="center" height=“ 300" width=“ 400"$

HTML Formları HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir.

HTML Formları <FORM> Etiketi Bir form oluşturmak için <form>…</form> etiketleri arasına istenilen kontroller input

HTML Formları Kontrol Tipleri HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri ile

HTML Formları Password <INPUT TYPE=“password”> Yukarıdaki gibi string ifade girişi yapılır. Bununla birlikte yazılan

HTML Formları Check. Box <INPUT TYPE=“checkbox”> Kullanıcının doğru/yanlış (true/false) şeklinde mantıksal değer girmesinde kullanılır.

HTML Formları Radio. Button <INPUT TYPE=“radio”> Özel bir seçenek listesinden saçim yapma imkanı sağlar.

HTML Formları Submit <INPUT TYPE=“submit”> <FORM> etiketinin ACTION özelliğinde belirtilen URL ye form bilgilerini

HTML Formları Button <INPUT TYPE=“button”> İstemc-tarafı (Client-Side) scriptlerinden Java. Script ya da VBScript i

HTML Formları <INPUT> Etiketi Bu HTML etiketi ile birden fazla kontrol çeşidi oluşturuyoruz. Her

HTML Formları <TEXTAREA> Etiketi Çok satırlı metin kutusu oluşturmada kullanılır. Kullanımı: <TEXTAREA name=”adi” rows=”m”

HTML Formları <SELECT> ve <OPTION> Etiketleri Kontrolü oluşturmak için <SELECT> ve </SELECT> etiketi kullanılır.

HTML Formları <SELECT> Özellikleri: ÖZELLİK NAME SIZE MULTIPLE AÇIKLAMA Yukarıda yazmıştık Gösterilecek satır sayısını

HTML Formları Örnek: form 1. htm <HTML> <HEAD> <TITLE> Müşteri Kayıt Formu </TITLE> </HEAD>

HTML Formları <TR> <TD><B> Soyadı : </B></TD> <TD><INPUT type="text" name="txt. Soyadi" size="30"></TD> </TR> <TD><B>E-Mail

HTML Formları <TR> <TD><B> Şehir, Ülke, Posta Kodu : </B></TD> <TD><INPUT type="text" name="txt. Sehir"

HTML Formları <TD><SELECT name="cbox. Yas" size="1"> <OPTION value="0"> 0 - 11</OPTION> <OPTION value="1">12 -

HTML Formları <TD> <INPUT type="radio" name="rad. Mail. Listesi" checked value="evet"> Evet <INPUT type="radio" name="rad.

HTML Formları Uyarı: Formlar, server-side (sunucu-tarafı) CGI veya ASP programlarına teslim edilirler. Dolayısıyla bu

Stil Sayfaları (CSS) Stil sayfaları web sayfası tasarımcılarının, sayfa görünümlerini daha hareketli hale getirmelerini

Stil Sayfaları (CSS) Bu iki örnek arasında görünürde bir fark yoktur, fakat tasarım yapılırken

Stil Sayfaları (CSS) Sayfamızda bir bölümü kırmızı, Comic Sans MS fontu ve 12 punto

Stillerin Etiketlerde Kullanımı <HEAD>. . </HEAD> etiketleri arasında <HTML> <HEAD> <STYLE> <!-P { font-size:

Stillerin Etiketlerde Kullanımı <BODY> <H 1> bu yeni stilde H 1 başlıktır</H 1> Burası

Stillerin Etiketlerde Kullanımı Örnek: <HTML> <HEAD> <STYLE> <!- P { font-size: 8 pt; font-family:

Stillerin Etiketlerde Kullanımı <body> <h 1>Yeni Sayfa başlığımız</h 1> Bu bölümde kullanılan stil standart

Seçiciler (Selectors) Seçiciler bize oluşturduğumuz <h 1>, <h 2>. . . gibi etiketlerin mevcut

Id Selectors(Id Seçicileri) Id seçicilerini tanımlayıcı adlarının önündeki “#“ işaretinden tanırız. HTML belgesinde kendi

Class Selectors (Sınıf Seçicileri) Bu seçiciyi sayfanızdaki h 1 gibi etiketlerin tümünün aynı olmasını

Stillerin Bağımsız Olarak Kullanımı Stilleri etiketlere ait olarak değil de bağımsız olarak kullanmak için

Stillerin Bağımsız Olarak Kullanımı Şimdi etiketler içerisinden class dosyalarının nasıl çağrıldığına bir bakalım. <p

Stillerin Farklı Sayfalarda Kullanımı Stilleri farklı sayfalarda kullanmak için stillerimizi bir metin dosyası olarak

Stillerin Farklı Sayfalarda Kullanımı Örnek: <STYLE> <!- . stil{ font-size: 8 pt; font-family: verdana;

Stillerin Farklı Sayfalarda Kullanımı Örnek: deneme. html <SPAN> etiketi: Bu etiket stilsiz <HTML> kullanılırsa

Stillerle Fontların Kullanımı Fonlarla ilgili parametreler background=red; font-weight=bold (kalın)|none (normal yazı); font-style=italic|none; text-decoration=underline(altı çizili)|overline

Stillerle Fontların Kullanımı Örnek: STYLE> <!- . stil{ color: green; font-family: verdana; font-size: 8

Stillerle Fontların Kullanımı Örnek: <HTML> <HEAD> <LINK rel=stylesheet href=“stil. css” type=“text/css”> </HEAD> <body> Body

Stillerle BODY Etiketinin Varsayılan Değerini Değiştirme Örnek: <HTML> <HEAD> <STYLE> <!— BODY{ background: #000000;

Stillerle BODY Etiketinin Varsayılan Değerini Değiştirme <HTML> <head> <STYLE> <!-- BODY {background: white; }

Stillerin Link Düzenlemeleri İçin Kullanılması Link stilleri kullanılacaktır. oluşturulurken dört parametre a: link :

Stillerin Link Düzenlemeleri İçin Kullanılması <style> A: link { color : renk; text-decoration :

Stillerin Link Düzenlemeleri İçin Kullanılması <html> <head> <style> A: link { color : Yellow;

Stiller İle Sayfanın Her Noktasının Kullanılması Sayfa tasarımı yaparken en çok sıkıntı çekilen konulardan

Stiller İle Sayfanın Her Noktasının Kullanılması position: absolute|reletive; absolute: sayfanın en başından geçerli noktayı

Stiller İle Sayfaya 3. Boyut Verme Bu bölümde sayfamıza derinlik vermeyi göreceğiz. Bir web

Stiller İle Sayfaya 3. Boyut Verme <HTML> <HEAD> <STYLE> <!- #bolum 1{ position: absolute;

Stiller İle Sayfaya 3. Boyut Verme Şimde de bu örnek üzerinde z-index parametrelerini değiştirerek

Slides: 76

Download presentation

Frame (Çerçeve) Kullanımı

Frame (Çerçeve) Kullanımı Çerçeve (frame) ’yi bir browser penceresinden birden fazla web sayfasını görüntülemek olarak tanımlayabiliriz. Çerçeveler (frames), HTML'e sonradan eklenmiş bir özelliktir. Microsoft Internet Explorer 3. 0 ile Netscape Navigator 2. 0 ve üstü sürümleri frameleri destekler. Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir. Görüntülenen sayfalardan birindeki linkin tıklanması ile başka bir çerçevedeki içeriği değiştirebiliriz.

Frame (Çerçeve) Kullanımı Aşağıdaki etiketleri kullanarak ana frame penceresini oluştururuz. İLK ETİKET SON ETİKET <FRAMESET> </FRAMESET> Çerçeveli sayfayı belirtmede kullanılır. <FRAME> yok Bir çerçeve sayfası için ad ve kaynak belirtmede kullanılır. <NOFRAME> </NOFRAME> AÇIKLAMA Çerçeveyi desteklemeyen browserların göstereceği alternatif sayfa bu etiket arasına yazılır.

<FRAMESET> Etiketi Çerçeveli belge oluşturacağımız zaman, çerçevenin yapısını belirtmek için <FRAMESET> ve <FRAME> etiketlerini kullanırız. <FRAMESET> i kullanarak çerçeveleri satırlar ve sütunlar olarak ya da her ikisini kullanacak şekilde tanımlayabilirsiniz. <FRAMESET> etiketi iki tane özelliğe sahiptir; COLS: Sütun çerçevenin sayısını ve büyüklüğünü belirler ROWS: Satır çerçevenin sayısını ve büyüklüğünü belirler. Aşağıdaki üç metottan birini kullanarak satır ve sütunları tanımlayabiliriz. Sayfa yüksekliği ve genişliğinin bir yüzdesi olarak (“ 50%” gibi) Piksel cinsinden sabit bir sayı ile (“ 100” gibi) Kullanılabilir boşluğun kalanını kullanarak (“*” ile)

<FRAMESET> Etiketi Aşağıdaki tabloda bir web sayfasının çerçevesinin nasıl tanımlanacağının birkaç örneği vardır. <FRAMESET COLS=“ 100, *”> Üç sütunlu çerçeve; ilk ikisi 100 piksel genişliğinde, üçüncüsü ise kalan boşluğun tamamı büyüklüğünde. <FRAMESET COLS=“ 100, 30%, *”> Üç sütunlu çerçeve; birincisi 100 piksel, ikincisi browserın %30 u ve üçüncüsü de kalan boşluğun tamamı büyüklüğünde. <FRAMESET ROWS=“ 20%, *, 30%”> Dört satırlı çerçeve; birincisi web tarayıcısının %20 si yüksekliğinde, ikincisi kullanılabilecek alanın tamamı, üçüncüsü ise tarayıcının %30 u yüksekliğindedir. Not: <FRAMESET> etiketi <BODY> ve <HEAD> etiketinin dışında kullanılması nedeni ile diğer çoğu etiketlerden farklıdır.

<FRAME> Etiketi <FRAMESET> ile çerçeve sayfası tanımlandıktan sonra her bir çerçeve penceresinin kaynağını belirtmeliyiz. Bunu da <FRAME> etiketi ile yaparız. Özellikleri; ÖZELLİK NAME SRC FRAMEBORDER NORESIZE SCROLLING AÇIKLAMA Pencerenin adını belirler Pencerede gösterilecek kaynak dosyayı belirler Piksel olarak Çerçeve kalınlığı Bu özellik yazıldığında çullanıcı çerçeveyi boyutlandıramaz. Kaydırma çubuğunun olup olmayacağına işaret eder. Auto, Yes ya da No değerlerini alabilir. Varsayılan Auto dur. <FRAMESET> etiketinin içerisinde her bir satır ya da sütun çerçeve için <FRAME> etiketini kullanmak gerekir.

Çerçeveler Örneğimizde 3 adet html dosyası var. Bunlardan frame. htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm 1. htm dosyasını, diğerinde htm 2. htm dosyasını görüntülemesini bildiriyor.

Çerçeveler

Çerçeveler <body bgcolor=". . . "> etiketi ile htm 1. htm dosyasının artalan rengi kırmızı, htm 2. htm dosyasının artalanı ise mavi yapılmış, kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmıştır.

<frameset>. . . </frameset> Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin yana sütunlar şeklinde olacağını belirtiyor, rows yazarsak çerçeveler alta satırlar görünümünde açılacaktır.

<frameset>. . . </frameset> cols="*, *" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz. Buraya örneğin cols="140, 500" gibi sayı yazılabilir, cols="25%, 75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir, * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır. cols="140, *" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor.

<frameset>. . . </frameset> Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz. cols=". . " ifadesine iki değer (ya da yıldız) verirsek bu iki pencere aç anlamındadır, 3 değer 3 pencere açar. <frame name=". . . " src=". . . "> etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor. src pencerede görüntülenecek html dosyasının yerini gösteriyor. Açılacak çerçeve sayısı kadar <frame name=". . . " src=". . . “> etiketi kullanıyoruz.

<frameset>. . . </frameset> Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik. İşte noframes kısmı bu browserlara hitap ediyor. body kısmını bu eski browserlar görüntüleyebiliyor. Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir, böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz.

<frameset>. . . </frameset> FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar; frameborder=". . . “ (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler. FRAMESET etiketini HTML dosyanızın </head>. . . <body> etiketleri arasında kullanmayı unutmayın !

<frameset>. . . </frameset> FRAME etiketi ile kullanabileceğimiz parametreler; marginwidth=". . . " marginheight=". . . " (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler. scrolling=". . " (yes, no, auto) Kaydırma çubuklarının durumunu belirler. noresize Pencere boyutlarının sabit olmasını sağlar.

Daha karmaşık çerçeveler Yan yana sütünlar ya da alta satırlar görünümünde çerçeveler açmayı öğrendik peki tablolarda gördüğümüz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün. Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynak dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz, içiçe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz.

Daha karmaşık çerçeveler

Çalışma: Uygulamada en az üç çerçeveden oluşan sayfa hazırlanıp sol çerçevede linkler olacak ve target özelliğinin farklı değerleri bu örnek üzerinde denenecek…

Çerçeveler <NOFRAME> Etiketi Eğer Web Tarayıcısı FRAME i desteklemiyorsa alternatif gösterilecek sayfa bu etiket arasında oluşturulacak olan <BODY> etiket bloğuna yazılır. <HTML> <HEAD> <title>Çerçeveler </title> </HEAD> <frameset cols="200, *"> <frame name="sol" src="sol. htm"> <frame name="sag" src="ana. htm"> </frameset> <noframes> <BODY> <h 2>Browserınız çerçeveleri desteklemiyor</h 2> </BODY> </noframes> </HTML>

Çerçeveler <IFRAME> Etiketi Bu tag ile HTM kodları arasına bir çerçeve açılıp bu çerçevede başka bir sayfa gösterilebilir. Özellikleri: ÖZELLİK SRC WIDTH HEIGHT SCROLLING FRAMEBORDER ALIGN AÇIKLAMA Çerçevede gösterilecek kaynak web sayfası Çerçevenin genişliği Çerçevenin yüksekliği Kaydırma çubuğu durumu (yes, no, auto) Çerçevenin kalınlığı Çerçevenin sayfadaki hizalaması

$Çerçeveler Örnek: <BODY> <IFRAME src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="http: \www. firat. edu. tr" align="center" height=“ 300" width=“ 400"$

Çerçeveler Örnek: <BODY> <IFRAME src="http: \www. firat. edu. tr" align="center" height=“ 300" width=“ 400" frameborder="1" scrolling="yes"> </IFRAME> </BODY> </HTML>

HTML Formları

HTML Formları HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir. Formlar, web sayfası tasarlayan kişi veya şirketlerle internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. Formlar iki yönlü olarak çalışır; web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar. Formları bilgi girişinin haricinde bilgi gösterme maksadı ile de kullanabiliriz.

HTML Formları <FORM> Etiketi Bir form oluşturmak için <form>…</form> etiketleri arasına istenilen kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği form etiketinin içinde gösterilir. Genel kullanım; <FORM ACTION=url METHOD=get- post TARGET=pencere> …. . </FORM> Özellikleri: ÖZELLİK ACTION AÇIKLAMA Formun onay buttonuna basıldığında form bilgilerinin gönderileceği URL yi belirtir. METHOD Formun bilgilerinin hangi metotla Server’a gönderileceğini tutar. Get ya da Post olabilir. Varsayılan Get tir. Çok fazla veri gönderileceği zaman çoğunlukla Post metodunu kullanırız. Get metodunda form ile gönderilen veriler URL nin sonuna eklenir. TARGET Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir.

HTML Formları Kontrol Tipleri HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri ile oluşturulur. KONTROL YAZIM ŞEKLİ Text. Box <INPUT TYPE=“text”> Kullanıcının tek satırdan oluşan string değer girmesinde kullanılır.

HTML Formları Password <INPUT TYPE=“password”> Yukarıdaki gibi string ifade girişi yapılır. Bununla birlikte yazılan karakterler yerine “*” karakteri gösterilir. Hidden <INPUT TYPE=“hidden”> Formla birlikte taşınan bu alandaki bilgi kullanıcıdan gizlenir. File <INPUT TYPE=“file”> Forma eklenen kullanıcının bir dosyasının ismini girmesine izin verir.

HTML Formları Check. Box <INPUT TYPE=“checkbox”> Kullanıcının doğru/yanlış (true/false) şeklinde mantıksal değer girmesinde kullanılır.

HTML Formları Radio. Button <INPUT TYPE=“radio”> Özel bir seçenek listesinden saçim yapma imkanı sağlar. Radibuttonların name özelliğine aynı değerler verilerek sınıflandırılabilir.

HTML Formları Submit <INPUT TYPE=“submit”> <FORM> etiketinin ACTION özelliğinde belirtilen URL ye form bilgilerini göndermede kullanılır. Reset <INPUT TYPE=“reset”> Bütün form kontrollerini sıfırlamada kullanılır. Formun sayfa ilk yüklendiğindeki eski halini almasını sağlar. Image <INPUT TYPE=“image”> Tıklandığında Mouse imlecinin X ve Y koordinatlarını göndererek grafiksel onay buttonu yapmada kullanılır.

HTML Formları Button <INPUT TYPE=“button”> İstemc-tarafı (Client-Side) scriptlerinden Java. Script ya da VBScript i tetikleyebilecek komut düğmesi oluşturur. Text. Area <TEXTAREA> Çok satırlı metinlerin girilmesine imkan sağlayan bir kontroldür. Combo. Box <SELECT size=“ 1”> Kullanıcıya açılan bir listeden hazır seçenekler sunar. List. Box <SELECT size=“n”> Kullanıcıya liste şeklinde hazır seçenekler sunar. Buradaki “n” List. Box ın kaç satırlı olacağını belirtir.

HTML Formları <INPUT> Etiketi Bu HTML etiketi ile birden fazla kontrol çeşidi oluşturuyoruz. Her bir çeşidin hangi özelliklere sahip olduğu be bu özelliklerinin anlamları: ÖZELLİK KULLANAN KONTROL TYPE hepsi NAME Hepsi CHECKED Text, password, hidden, radio, submit, reset, button Text, password, file Checkbox, radio SRC image ALIGN image VALUE SIZE MAXLENGTH AÇIKLAMA Kontrolün çeşidini belirtir. Varsayılan Text tir. Kontrolün adını belirtir. Kontrolün adı formun ACTION özelliğinde belirtilen URL ye kontrolde yazılı olan değeri taşır. . Text, password ve hidden kontrolleri için birinci değeri, radio ve checkbox kontrolleri için seçildiğinde gidecek olan değeri, submit, reset ve button kontrollerinde ise kontrolün başlığını (caption) belirtir. Kontrolün gösterebileceği karakter uzunluğu Kullanıcının gireceği maksimum karakter sayısı Eğer yazılırsa başlangıçta kontrolün seçili olmasını sağlar. Resmin kaynağını gösterir. Resmin hizalanmasını belirtir. (left, right, top, middle ya da bottom olabilir. )

HTML Formları <TEXTAREA> Etiketi Çok satırlı metin kutusu oluşturmada kullanılır. Kullanımı: <TEXTAREA name=”adi” rows=”m” cols=”n”> Sayfa yüklendiğinde kontrolde gözükecek olan metin </TEXTAREA> Özellikleri: ÖZELLİK AÇIKLAMA NAME Yukarıda yazmıştık ROWS Ekranda gösterilecek satır sayısı COLS Ekranda gösterilecek sütun sayısı (karakter sayısı olarak)

HTML Formları <SELECT> ve <OPTION> Etiketleri Kontrolü oluşturmak için <SELECT> ve </SELECT> etiketi kullanılır. Bu kontrollerde gözükecek her bir seçenek <OPTION> etiketi ile oluşturulur. Kullanımı: <SELECT name=”adı” size=”n”> <OPTION value=”değer 1”> Gözüken Metin 1</OPTION> <OPTION value=”değer 2”> Gözüken Metin 2</OPTION> </SELECT> Eğer size>1 ise kontrol List. Box stilinde gözükür. Size=1 ise (varsayılan budur) Combo. Box (Drop-Down Menu) stilinde gözükecektir.

HTML Formları <SELECT> Özellikleri: ÖZELLİK NAME SIZE MULTIPLE AÇIKLAMA Yukarıda yazmıştık Gösterilecek satır sayısını belirtir. Eğer yazılırsa çoklu seçime izin verir. Sadece List. Box görünümünde etkilidir. <OPTION> Özellikleri: ÖZELLİK VALUE SELECTED AÇIKLAMA Seçimin yapılması durumunda formun göndereceği değer Bunu yazdığımız <OPTION> etiketi değeri sayfa yüklendiğinde seçilmiş durumdadır.

HTML Formları Örnek: form 1. htm <HTML> <HEAD> <TITLE> Müşteri Kayıt Formu </TITLE> </HEAD> <BODY text="#0000 FF"> <H 2><FONT color="#FF 0001"> Müşteri Kayıt Formu</FONT></H 2> <H 3> <FORM action="hedefdosya. htm" method="post" name="frm. Musteri"> <TABLE> <TR> <TD> <B> Adı : </B></font></TD> <TD><INPUT type="text" name="txt. Adi" size="30"></TD> </TR>

HTML Formları <TR> <TD><B> Soyadı : </B></TD> <TD><INPUT type="text" name="txt. Soyadi" size="30"></TD> </TR> <TD><B>E-Mail : </B></TD> <TD><INPUT type="text" name="txt. Email" size="30"></TD> </TR> <TD><B>Adres : </B></TD> <TD><INPUT type="text" name="txt. Adres" size="43"></TD> </TR>

HTML Formları <TR> <TD><B> Şehir, Ülke, Posta Kodu : </B></TD> <TD><INPUT type="text" name="txt. Sehir" size="20"> <INPUT type="text" name="txt. Ulke" size="20"> <INPUT type="text" name="txt. Posta. Kodu“ size="10"> </TD> </TR> <TD><B>Açıklama : </B></TD> <TD><TEXTAREA name="textarea. Aciklama" rows="2” cols="30">Buraya Herhangi Bir Açıklama Yazınız. </TEXTAREA></TD> </TR> <TD><B>Yaş : </B></TD>

HTML Formları <TD><SELECT name="cbox. Yas" size="1"> <OPTION value="0"> 0 - 11</OPTION> <OPTION value="1">12 - 19</OPTION> <OPTION value="2">20 - 29</OPTION> <OPTION value="3">30 - 39</OPTION> <OPTION value="4">40 + </OPTION> </SELECT></TD> </TR> <TD><B>Çalışmalarımızı Başarılı Buluyor Musunuz? : </B></TD>

HTML Formları <TD> <INPUT type="radio" name="rad. Mail. Listesi" checked value="evet"> Evet <INPUT type="radio" name="rad. Mail. Listesi” value="hayir"> Hayır </TD> </TR> <TD><INPUT type= "submit" name="kaydet” value="Kaydet"></TD> <TD><INPUT type="reset" name="temizle” value="Temizle"></TD> </TR> </TABLE> </FORM></H 3> </BODY> </HTML>

HTML Formları

HTML Formları Uyarı: Formlar, server-side (sunucu-tarafı) CGI veya ASP programlarına teslim edilirler. Dolayısıyla bu formları ileride daha detaylı ASP programlarında test edeceğiz.

HTML Formları Uygulama

CSS (Cascading Style Sheets) Kullanımı

Stil Sayfaları (CSS) Stil sayfaları web sayfası tasarımcılarının, sayfa görünümlerini daha hareketli hale getirmelerini sağlayan . css uzantılı dosyalardır. Css kullanırken kullanacağımız etiket <STYLE> dir. Bu etiketin bir çok kullanım şekli ve kullanım alanı bulunmaktadır. Örnek <P> etiketi içinde olan yazıların yeşil, punto büyüklüğü 10, font verdana olsun. <P style=“font: 10 pt verdana; color=green”> ifadeler</P> Şeklinde bir kullanım yeterli olacaktır. Yapılan işlemin normal HTML komutları ile yazılması; <Font size=2 face= verdana color =green> font tagı ile yapılan örnek</font>

Stil Sayfaları (CSS) Bu iki örnek arasında görünürde bir fark yoktur, fakat tasarım yapılırken olacaktır. Sayfamızda bazı bölümleri farklı göstermek istiyorsak her bir bölüm için font etiketini kullanmamız gerekecektir. Fakat sadece basit bir tanımlama ile sayfanın hatta sitenim her sayfasında bu yeni stilinizi kullanabilirsiniz. Şimdi farklı örnekler ile STYLE etiketini tanımaya çalışalım.

Stil Sayfaları (CSS) Sayfamızda bir bölümü kırmızı, Comic Sans MS fontu ve 12 punto büyüklüğüne gösterelim <div style=“font: 12 pt Comic Sans MS; color=red”; >bu bölüm diğer bölümlerden farklı görünecektir. </div> Yeni başlayan paragraftaki yazılar farklı olsun; <P style=“color: #12 ddfa; ”>bu yazı mavidir. </P> Yeni linkimiz dikkat çekmeli siyah üzerine beyaz yazı <A style “color: white; backround: black; ”href=“#”>Siyah zemin beyaz link</A> Örnekler çoğaltılabilir.

Stillerin Etiketlerde Kullanımı <HEAD>. . </HEAD> etiketleri arasında <HTML> <HEAD> <STYLE> <!-P { font-size: font büyüklüğü pt; font-family: font tipi; color: kullanılacak renk; } H 1 { font-size: font büyüklüğü pt; font-family: font tipi; color: kullanılacak renk; } --> </STYLE> </HEAD>

Stillerin Etiketlerde Kullanımı <BODY> <H 1> bu yeni stilde H 1 başlıktır</H 1> Burası Body tagının standart stilidir. <P> bu yeni stilde paragraftır </P> Burası Body tagının standart stilidir. <P> burada yine yeni stilde paragraf görülecektir </P> </BODY> </HTML>

Stillerin Etiketlerde Kullanımı Örnek: <HTML> <HEAD> <STYLE> <!- P { font-size: 8 pt; font-family: verdana; color: green; } H 1 { font-size: 14 pt; font-family: times; color: red; } DIV { font-size: 10 pt; color: aqua; } A{ font-size: 9 pt; font-family: tahoma; color: #5010 dd; } --> </style> </head>

Stillerin Etiketlerde Kullanımı <body> <h 1>Yeni Sayfa başlığımız</h 1> Bu bölümde kullanılan stil standart stildir. <p>Paragraf kullanıyoruz </p> Bu bölümde kullanılan stil standart stildir. <div> div tagında değişiklik yaptık. Fakat sadece font büyüklüğü ve renk değişti</div> <a href="javascript: window. close()">Pencereyi kapat</a> </body> </html>

Stillerin Etiketlerde Kullanımı

Seçiciler (Selectors) Seçiciler bize oluşturduğumuz <h 1>, <h 2>. . . gibi etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni özellikler ekleme olanağı verdiği gibi istediğimiz bir kelimeye style özellikleri atayıp istediğimiz zaman çağırmamızı da sağlar. İki çeşit seçici vardır. Bunlar, Id seçicisi ve sınıf seçicisi.

Id Selectors(Id Seçicileri) Id seçicilerini tanımlayıcı adlarının önündeki “#“ işaretinden tanırız. HTML belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir HTML etiketine stil vermekte kullanılır.

Class Selectors (Sınıf Seçicileri) Bu seçiciyi sayfanızdaki h 1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanabilirsiniz. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri değiştirebilirsiniz.

Stillerin Bağımsız Olarak Kullanımı Stilleri etiketlere ait olarak değil de bağımsız olarak kullanmak için bir class dosyası şeklinde hazırlanmalıdır. Bunun için etiket adı yerine. stiladı şeklinde bir tanımlama yapılır. Bu şekilde bir stil oluşturalım. <STYLE> <!- . stil 1{ font-size: 8 pt; font-family: verdana; color: green; } . stil 2 { font-size: 14 pt; color: blue; } --> </style>

Stillerin Bağımsız Olarak Kullanımı Şimdi etiketler içerisinden class dosyalarının nasıl çağrıldığına bir bakalım. <p class=“stil 1”> Yazılacak yazı </p> <DIV class=stil 2”> Yazılacak yazı </DIV> <A class=stil 1” href=“#”>Link </A>

Stillerin Farklı Sayfalarda Kullanımı Stilleri farklı sayfalarda kullanmak için stillerimizi bir metin dosyası olarak yazıyoruz ve uzantısını. css vererek kaydediyoruz. Daha sonra bu stilleri kullanmak istediğimiz sayfada head etiketleri arasında bu dosyaya link veriyoruz. <LINK rel=stylesheet href=“stillerim. css” type=“text/css”>

Stillerin Farklı Sayfalarda Kullanımı Örnek: <STYLE> <!- . stil{ font-size: 8 pt; font-family: verdana; color: green; } . stil 1 { font-size: 14 pt; font-family: times; color: red; } . stil 2{ font-size: 10 pt; color: aqua; } . stil 3{ font-size: 9 pt; font-family: tahoma; color: #5010 dd; } . stil 4 { font-family: impact; } --> </style> Bu dosyayı stillerim. css olarak kaydedelim.

Stillerin Farklı Sayfalarda Kullanımı Örnek: deneme. html <SPAN> etiketi: Bu etiket stilsiz <HTML> kullanılırsa hiçbir etkisi <HEAD> yoktur. CSS <LINK rel=stylesheet href=“stillerim. css” type=“text/css”> kullanılarak metinler </HEAD> üzerinde biçimlendirme yapabiliriz. <body> <h 1 class=“stil 1”>Yeni Sayfa başlığımız. stil 1</h 1> Bu bölümde kullanılan stil standart stildir. <P class=“stil ”>Paragraf kullanıyoruz. stil </P> Bu bölümde kullanılan stil standart stildir. <div class=“stil 3”> Div tagında stil değişikliği yaptık. stil 3 </div> <SPAN class=“stil 4”> Yine SPAN tagında değişiklik var. stil 4 </SPAN> </BODY> </HTML>

Stillerle Fontların Kullanımı Örnek: STYLE> <!- . stil{ color: green; font-family: verdana; font-size: 8 pt; font-style: none; font-weight: bold; background: yellow; } . stil 1{ background: pink; font-family: impact; text-align: center; } --> </style>

Stillerle Fontların Kullanımı Örnek: <HTML> <HEAD> <LINK rel=stylesheet href=“stil. css” type=“text/css”> </HEAD> <body> Body tagının normal stili <p class=“stil 1”>İlk paragrafımız. stil 1</h 1> <P class=“stil ”>ikinci paragraf. stil </P> Bu bölümde kullanılan stil standart stildir. <div class=“stil”> Div tagında stil değişikliği yaptık. stil </div> <SPAN class=“stil 1”> Yine SPAN tagında değişiklik var. stil 1 </SPAN> </BODY> </HTML>

Stillerle BODY Etiketinin Varsayılan Değerini Değiştirme Örnek: <HTML> <HEAD> <STYLE> <!— BODY{ background: #000000; color: #ffffff; font-family: verdana; font-size: 10 pt; font-weight: bold; text-decoration=none; margin-left: 30 px; margin-right: 50 px; margin-top: 27 px; } --> Body etiketi için tanımlanan yeni değerler sayfada etkin olarak kullanılacaktır. Normal olarak sayfalar sol en köşeden itibaren yazmaya başlanır. Sayfaya kenarlıklarına boşluk vermek için margin ifadesi kullanılır.

Stillerle BODY Etiketinin Varsayılan Değerini Değiştirme <HTML> <head> <STYLE>  </STYLE> <title>Style Sheet Kullanımı</title> </head> <BODY> <H 1>Bu bir başlık! 24 punto, Arial ve Kalın. </H 1> <p>Üzeri sarı işaretleyici ile çizilmiş alelade bir yazı. </p> <a href="deneme. htm”> Linklerin altının çizilmemesini bu yolla sağlayabilirsiniz. </a>

Stillerin Link Düzenlemeleri İçin Kullanılması Link stilleri kullanılacaktır. oluşturulurken dört parametre a: link : Sayfada bulunan bir link renk ve durumu a: active : Link tıklandığında alacağı renk ve durum a: visited : Ziyaret edilmiş bir linkin alacağı renk ve durum a: hover : Fare ile linkin üzerine gelindiğinde özelliklerinin işleme konulması. Örneğin fare linkin üzerine geldiğinde altı çizili olması isteniyorsa hover kısmında underline seçilmelidir. Üstü çizili olması için overline seçilmelidir. Hem altı hem üstü çizili olması için iki tane hover kullanılmalıdır. color : Linklerin, ziyaret edilen linklerin. . renk özelliğinin ayarlanması burada yapılır. text-decoration: none seçilirse ilgili linkin altı çizili özelliği ortadan kalkar. underline seçilirse ilgili linkin altı çizili özelliği devam eder.

Stillerin Link Düzenlemeleri İçin Kullanılması <style> A: link { color : renk; text-decoration : none|underline font-size: 10 pt; color: red; } A: active { color : renk; text-decoration : none|underline } A: visited { color : renk; text-decoration : none|underline } A: hover { color : renk; text-decoration : none| underline| overline } </style>

Stillerin Link Düzenlemeleri İçin Kullanılması <html> <head> <style> A: link { color : Yellow; text-decoration : none } A: active { color : Yellow; text-decoration : none } A: visited { color : White; text-decoration : none } A: hover { color : Yellow; text-decoration : overline } </style> <title>Ornek. html</title> </head> <body bgcolor=”#000080”> <a href=”http: //www. firat. edu. tr”>Fırat Üniversitesi</a> </body></html>

Stiller İle Sayfanın Her Noktasının Kullanılması Sayfa tasarımı yaparken en çok sıkıntı çekilen konulardan biri bir elamanı sayfanın istenilen noktasına yerleştirememektir. CSS sayfaya noktasal olarak ulaşmaya izin verir. Örneğin Sayfanın alt kısımlarında iken ortaya yazı yazdırılabilir. <P style=“font: 14 pt times; position: absolute; top: 150 px; left: 100 px; width; 200 px”>deneme</P>

Stiller İle Sayfanın Her Noktasının Kullanılması position: absolute|reletive; absolute: sayfanın en başından geçerli noktayı alır. reletive: sayfanın en son yazılan elamanının bulunduğu noktayı başlangıç olarak alır. top: belirlenen başlangıç noktasından belirtilen pixel kadar aşağı yazar. left: başlangıç noktasında sağa doğru belirtilen pixel kadar uzaklığa yazar. width: yazılacak yazı için maksimum genişlik belirler ve bu genişlik aşıldığı zaman bir alt satıra geçer.

Stiller İle Sayfaya 3. Boyut Verme Bu bölümde sayfamıza derinlik vermeyi göreceğiz. Bir web sayfası hazırlanırken sayfamıza düzen verirken sayfayı yatay ve dikey olarak düşünüyoruz. Bu koordinat sisteminde x ve y olarak ifade edilen iki boyuta denk gelir. Üçüncü boyut ise derinliktir. Derinliğe koordinat sisteminde z ismi verilir. Verilen parametrelerden yararlanılarak üçüncü boyutun özellikleri web sayfalarında kullanılabilir. z-index parametresi derinlik olarak yeni stile bir değer verir. İki stil hazırladığımızda z-index değeri büyük olan üstte görünecektir. Aşağıdaki kodlar iki stilin birlikte kullanılmasını gösteriyor.

Stiller İle Sayfaya 3. Boyut Verme <HTML> <HEAD> <STYLE> <!- #bolum 1{ position: absolute; top: 10 px; left: 20 px; z-index: 0; } #bolum 2{ position: absolute; top: 10 px; left: 20 px; z-index: 1; } --> </STYLE> </HEAD> <BODY> <SPAN id=“bolum 1”> <IMG src=“cizgi 1. gif” alt=“cizgi 1”> </SPAN> <SPAN id=“bolum 2”> <IMG src=“cizgi 2. gif” alt=“cizgi 2”> </SPAN> </BODY></HTML>

Stiller İle Sayfaya 3. Boyut Verme

Stiller İle Sayfaya 3. Boyut Verme Şimde de bu örnek üzerinde z-index parametrelerini değiştirerek aynı örneği tekrar görelim </STYLE> <HTML> <HEAD> <STYLE> </HEAD> <!- <BODY> #bolum 1{ <SPAN id=“bolum 1”> position: absolute; <IMG src=“cizgi 1. gif” alt=“cizgi 1”> top: 10 px; </SPAN> left: 20 px; <SPAN id=“bolum 2”> z-index: 1; <IMG src=“cizgi 2. gif” alt=“cizgi 2”> } </SPAN> </BODY></HTML> #bolum 2{ position: absolute; top: 10 px; left: 20 px; z-index: 0; } -->

Stiller İle Sayfaya 3. Boyut Verme