Web Tasarımı Ünite -6

Giriş

HTML (HyperText Markup Language), web sayfalarının oluşturulmasında kullanılan temel işaretleme dilidir. Web sayfalarının kullanıcılarla etkileşime girmesini sağlayan form ve çerçeve etiketleri, web tasarımının önemli bileşenlerindendir. Bu makalede, HTML çerçeve ve form etiketlerinin kullanımı, işlevleri ve web tasarımındaki önemi ele alınacaktır.

HTML Form Etiketleri

HTML form etiketleri, kullanıcıların veri girişi yapmasını sağlayan etiketlerdir. Formlar, web sayfalarının etkileşimli hale gelmesini sağlar ve kullanıcılardan bilgi toplamak için kullanılır. En yaygın form etiketleri arasında <form>, <input>, <label>, <select> ve <textarea> bulunur.

<form> Etiketi

<form> etiketi, bir formun başlangıcını ve sonunu belirler. Bu etiket, form verilerinin gönderileceği sunucu adresini ve hangi HTTP metodunun kullanılacağını belirtir. <form> etiketi, tüm form öğelerini kapsar ve formun temel yapısını oluşturur.

<input> Etiketi

<input> etiketi, kullanıcıdan veri almak için kullanılır. Bu etiket, metin kutuları, radyo düğmeleri, onay kutuları ve gizli alanlar gibi çeşitli türlerde girdi öğeleri oluşturur. “type” parametresi, girdi türünü belirler ve “name” parametresi, girdi öğesinin adını tanımlar.

<label> Etiketi

<label> etiketi, form öğelerine etiket eklemek için kullanılır. Bu etiket, kullanıcıların hangi girdi öğesi ile etkileşime gireceğini belirlemelerini kolaylaştırır. <label> etiketi içinde kullanılan “for” parametresi, etiketin hangi girdi öğesi ile ilişkili olduğunu belirtir.

<select> ve <textarea> Etiketleri

<select> etiketi, kullanıcıya açılır liste sunar ve seçenekler arasından birini seçmesini sağlar. <textarea> etiketi ise, kullanıcıların uzun metinler girmesi için çok satırlı metin kutusu oluşturur. Bu etiketler, formların esnekliğini ve kullanım kolaylığını artırır.

HTML Çerçeve Etiketleri

HTML çerçeve etiketleri, web sayfalarını bölümlere ayırmak ve aynı sayfada birden fazla HTML belgesi görüntülemek için kullanılır. Çerçeveler, sayfa düzenini yönetmek ve kullanıcı deneyimini iyileştirmek için önemlidir. Temel çerçeve etiketleri arasında <frameset>, <frame> ve <noframes> bulunur.

<frameset> Etiketi

<frameset> etiketi, bir sayfanın çerçevelere bölünmesini sağlar. “rows” ve “cols” parametreleri, çerçevelerin yatay ve dikey olarak nasıl bölüneceğini belirler. Bu etiket, <frame> etiketlerini kapsar ve çerçeve yapısını tanımlar.

<frame> Etiketi

<frame> etiketi, her bir çerçeve içeriğini tanımlar. “src” parametresi, çerçevede görüntülenecek belge veya URL’yi belirtir. Ayrıca, “name” parametresi, çerçeveye bir ad vererek diğer çerçevelerden bağlantı kurulmasını sağlar.

<noframes> Etiketi

<noframes> etiketi, çerçeveleri desteklemeyen tarayıcılarda görüntülenecek alternatif içeriği tanımlar. Bu etiket, kullanıcıların çerçeve desteklemeyen tarayıcılarda da bilgiye erişimini sağlar.

Sonuç

HTML çerçeve ve form etiketleri, web sayfalarının etkileşimli ve kullanıcı dostu hale gelmesini sağlar. Formlar, veri toplama ve kullanıcı etkileşimi için kritik öneme sahipken, çerçeveler sayfa düzenini yönetmekte kullanılır. Bu etiketlerin doğru ve etkili kullanımı, profesyonel ve fonksiyonel web siteleri oluşturmanın anahtarıdır.

1- Web’te sayfalar arasında veri iletimi sürecinde istek ve cevap mantığı işlemektedir. Buna göre bir sayfa üzerinden istekte bulunulur ve sunucu vasıtasıyla isteklere cevap verilir. Bu sırada bazı metodlardan yararlanılır. Aşağıdakilerden hangisi bu metodlar arasında yer almaz?

A) cut
B) put
C) delete
D) get
E) post

Cevap: A) cut

Açıklama: HTTP istek ve cevap sürecinde yaygın olarak kullanılan metotlar arasında GET, POST, PUT ve DELETE bulunur. “cut” metodu HTTP protokolünde mevcut değildir.

2- Kullanıcıya açılır liste şeklinde seçenekler sunulup, bu seçenekler arasından tercih yapması istenildiğinde kullanılan form öğesi aşağıdakilerden hangisidir?

A) radyo düğmesi-radio button
B) onay kutucuğu-checkbox
C) liste-list
D) açılır liste-select list
E) girdi-input

Cevap: D) açılır liste-select list

Açıklama: Kullanıcıya açılır liste şeklinde seçenekler sunmak için HTML’de <select> etiketi kullanılır. Bu etiket, birden fazla seçenek arasından birini seçmeyi sağlar.

3- Web sayfalarında her bir girdi öğesine ilişkin başlık metinlerini eklemek ve başlık ile ilgili girdi öğesi arasında bağlantı kurulmasını sağlamak üzere kullanılan etiket hangisidir?

A) <head>
B) <input>
C) <label>
D) <id>
E) <for>

Cevap: C) <label>

Açıklama: <label> etiketi, form elemanlarına başlık eklemek ve başlık ile ilgili girdi öğesi arasında bağlantı kurmak için kullanılır. Bu, kullanıcı deneyimini ve erişilebilirliği artırır.

4- “İlgili olduğu girdi öğesinin (onay kutucuğu, radyo düğmesi vb.) tıklanma alanı çok küçük ise bu öğelere tıklamak yerine _________ etiketi ile tanımlanan başlığa tıklamak da seçim gerçekleştirilmesini sağlamaktadır” cümlesindeki boşluğa gelecek etiket aşağıdakilerden hangisidir?

A) <head>
B) <input>
C) <submit>
D) <form>
E) <label>

Cevap: E) <label>

Açıklama: <label> etiketi, ilgili olduğu girdi öğesinin tıklanma alanını genişletir ve kullanıcıların küçük tıklama alanlarına daha kolay erişmesini sağlar.

5- Bir form içerisinde <input> etiketi ile girdi öğesi eklenmek istendiğinde bu öğenin hangi form alt girdi öğesi olacağını belirlemek üzere kullanılan parametre aşağıdakilerden hangisidir?

A) for
B) id
C) size
D) type
E) post

Cevap: D) type

Açıklama: <input> etiketinde “type” parametresi, form öğesinin türünü belirler (örneğin, text, password, radio, checkbox vb.). Bu, HTML form öğelerinin çeşitli türlerini tanımlamak için kullanılır.

6- <label> etiketi ile tanımlanan HTML öğesinin ilgili olduğu girdi öğesi (input) ile bağlantı kurulmasını sağlayan ve <label> etiketi içerisinde kullanılan parametre aşağıdakilerden hangisidir?

A) for
B) id
C) size
D) type
E) post

Cevap: A) for

Açıklama: <label> etiketi içinde kullanılan “for” parametresi, etiketin hangi girdi öğesi ile ilişkili olduğunu belirtir. Bu, kullanıcıların ilgili girdi öğesine kolayca erişmesini sağlar.

7- <input> girdi öğesi ve <label> etiketi ile tanımlanan ilgili HTML öğesi arasında bağlantı kurulmasını sağlayan ve <input> etiketi içerisinde kullanılan parametre aşağıdakilerden hangisidir?

A) for
B) id
C) size
D) type
E) post

Cevap: B) id

Açıklama: <input> etiketinde kullanılan “id” parametresi, bu girdi öğesinin benzersiz bir kimliğini tanımlar ve <label> etiketindeki “for” parametresi ile ilişkilendirilir.

8- Bir form üzerinde veri girişinin boş geçilmemesini sağlayan bir diğer ifade ile veri girişini zorunlu kılan ve <input> etiketi içerisinde kullanılan değer aşağıdakilerden hangisidir?

A) readonly
B) disabled
C) multiple
D) must
E) required

Cevap: E) required

Açıklama: “required” parametresi, bir form alanının doldurulmasının zorunlu olduğunu belirtir. Bu parametre, kullanıcıların belirli bir alanı boş bırakmasını engeller.

9- Bir çerçeve setini sütun bazlı bölümlemek için hangi parametreye değer(ler) vermek gerekir?

A) “width”
B) “rows”
C) “cols”
D) “height”
E) “weight”

Cevap: C) “cols”

Açıklama: HTML’de bir çerçeve setini sütun bazlı bölümlemek için “cols” parametresi kullanılır. Bu parametre, çerçeve setinin dikey olarak bölünmesini sağlar. Örneğin, <frameset cols=”25%, 75%”> şeklinde tanımlandığında, çerçeve seti dikey olarak iki sütuna bölünür ve ilk sütun sayfanın %25’ini, ikinci sütun ise %75’ini kaplar.

Açıklama-2: Auzef ders kitabında cevap A) “width” oalrak geçiyor.kitapta bu konuda bir hata olabilir. HTML’de bir çerçeve setini sütun bazlı bölümlemek için doğru parametre “cols” olmalıdır. “width” parametresi, çerçeve veya diğer HTML öğelerinin genişliğini ayarlamak için kullanılır, ancak çerçeve setini sütun bazlı bölmek için kullanılmaz.

10- Her etiket her web tarayıcı tarafından desteklenmeyebilir. Bu noktada eğer <frameset> ile oluşturulmuş bir web sayfası bu etiketi desteklemeyen bir tarayıcıda görüntülenmek istenirse sorun yaşanacaktır. Böyle bir durumda kullanıcıya hata mesajı göstermek üzere aşağıdaki etiketlerden hangisi kullanılır?

A) <frameset>
B) <frames>
C) <frame>
D) <noframe>
E) <iframe>

Cevap: D) <noframe>

Açıklama: etiketi, etiketini desteklemeyen tarayıcılarda görüntülenecek içerik veya hata mesajı sağlamak için kullanılır.