Web Programlama -I 2023-2024 Final Soruları

Özet

Bu makale, web programlama ve internet teknolojilerinin tarihsel gelişimini ve günümüzdeki uygulamalarını incelemektedir. HTML, CSS ve JavaScript gibi temel web teknolojilerinin yanı sıra, modern web geliştirme araçları ve yöntemleri de ele alınmaktadır. Ayrıca, bu teknolojilerin eğitimdeki yeri ve önemi de tartışılmaktadır.

Giriş

Web programlama, internetin yaygınlaşmasıyla birlikte büyük bir önem kazanmıştır. Web siteleri, başlangıçta sadece bilgi sunmak amacıyla tasarlanmışken, günümüzde interaktif ve dinamik uygulamalar haline gelmiştir. Bu gelişim, HTML, CSS ve JavaScript gibi temel web teknolojilerinin evrimiyle mümkün olmuştur.

HTML ve CSS

HTML (Hypertext Markup Language) ve CSS (Cascading Style Sheets), web sayfalarının yapısını ve stilini belirlemek için kullanılan iki temel teknolojidir. HTML, web sayfasının içeriğini tanımlar ve tarayıcıya nasıl görüntüleneceğini söyler. CSS ise bu içeriğin stilini ve düzenini belirler.

Örnek olarak, bir web sayfasının arka plan rengini yeşil ve yazı fontunu Arial olarak ayarlamak için aşağıdaki CSS kodu kullanılabilir:

<style> body { background-color: green; font-family: Arial; } </style>

JavaScript ve Dinamik İçerik

JavaScript, web sayfalarına dinamik ve etkileşimli özellikler eklemek için kullanılan bir programlama dilidir. Kullanıcıdan veri almak, bu veriyi işlemek ve kullanıcıya geri bildirimde bulunmak için kullanılır. Örneğin, bir web sayfasında kullanıcıdan bir sayı değeri almak ve bu değeri işlemek için aşağıdaki JavaScript kodu kullanılabilir:

var sayi = prompt(“Sayı =”); var sayiInt = parseInt(sayi);

Modern Web Teknolojileri

Günümüzde, web geliştirme daha karmaşık ve gelişmiş hale gelmiştir. HTML5, CSS3 ve modern JavaScript kütüphaneleri (örneğin, React, Angular, Vue.js) web geliştiricilerine daha güçlü ve esnek araçlar sunmaktadır. Ayrıca, responsive design ve mobil uyumlu tasarımlar da web geliştirme sürecinin önemli bir parçası haline gelmiştir.

Örneğin, HTML5 ile gelen yeni etiketlerden biri olan <video> etiketi, web sayfalarına video eklemek için kullanılır:

<video src=”video.mp4″ controls>Videonuzu burada oynatın</video>

Sonuç

Web programlama ve internet teknolojileri, sürekli gelişen ve yenilenen bir alan olmaya devam etmektedir. Temel HTML, CSS ve JavaScript bilgisi, modern web geliştirme araçları ve yöntemleri ile birleştiğinde, web geliştiricilerine güçlü ve dinamik web uygulamaları oluşturma olanağı sağlar. Bu teknolojilerin eğitimdeki önemi de giderek artmakta ve öğrencilerin bu konularda bilgi sahibi olması, gelecekteki kariyerleri için büyük bir avantaj sağlamaktadır.

1. Web sayfasının arka plan rengini yeşil, yazı fontunu ise Arial olacak şekilde tanımlamak için aşağıdaki CSS kodlarından hangisi kullanılmalıdır?

A) body { background-color : green; font-family : Arial; }

B) body { background-color : green; font : Arial; }

C) body { bgcolor : green; font-family : Arial; }

D) body { background : green; font-family : “Arial”; }

E) body { color : green; font : Arial; }

Cevap : A) body { background-color : green; font-family : Arial; }

Açıklama : Bu kod, body etiketinin arka plan rengini yeşil yapar ve yazı tipini Arial olarak ayarlar.

2. Web sayfasına eklenen resim.jpg adlı görselin kullanıcı tarafından boyutunun değiştirilmesine izin vermek için kullanılan HTML kodu aşağıdakilerden hangisidir?

A) <div contenteditable=”true”> <img src=”resim.jpg”> </div>

B) <div contenttable=”true”> <img src=”resim.jpg”> </div>

C) <div contenttable=”false”> <img src=”resim.jpg”> </div>

D) <div contenttable=”true”> <img href=”resim.jpg”> </div>

E) <div contenteditable=”false”> <img href=”resim.jpg”> </div>

Cevap : A) <div contenteditable=”true”> <img src=”resim.jpg”> </div>

Açıklama : contenteditable=”true” özelliği ile kullanıcıların resmin boyutunu değiştirmesine izin verilir.

3. Aşağıdakilerden hangisinde tarih ve saat seçim paleti oluşturacak HTML kodu doğru şekilde verilmiştir?

A) <input type=”time” name=”tarih”>

B) <input type=”date-time” name=”tarih”>

C) <input type=”date” name=”tarih”>

D) <input type=”datetime-local” name=”tarih”>

E) <input type=”datetime-hour” name=”tarih”>

Cevap : D) <input type=”datetime-local” name=”tarih”>

Açıklama : datetime-local, HTML5’te tarih ve saat seçimi için kullanılır.

4. İşletim sistemi, dosya yönetimi konusunda aşağıdaki aktivitelerin hangisinden sorumlu değildir?

A) Dosya yaratma ve silme

B) Dosyalar ve dizinler üzerinde değişiklik yapabilmek için temel yetenekleri destekleme

C) Dosyadaki renkleri düzenleme

D) Dizin oluşturma ve silme

E) Dosyaların yedeklerini sabit diske alabilme

Cevap : C) Dosyadaki renkleri düzenleme

Açıklama : İşletim sistemleri dosya renklerini düzenlemez, bu uygulama yazılımlarının işidir.

5.

var sayi = prompt(“Sayı =”); satırı ile kullanıcıdan alınan tam sayı değeri üzerinde matematiksel işlem uygulayabilmek için önce hangi kod satırı yazılmalıdır?

A) parseFloat(sayi);

B) parseInteger(sayi);

C) var sayiInt = parseInt(sayi);

D) var sayiInt = parseString(sayi);

E) var sayiInt = toString(sayi);

Cevap : C) var sayiInt = parseInt(sayi);

Açıklama : parseInt(), bir stringi tam sayıya dönüştürmek için kullanılır.

6. Aşağıdakilerden hangisi HMTL5 ile gelen yeni etiketlerden biri değildir?

A) <div>

B) <header>

C) <footer>

D) <video>

E) <audio>

Cevap : A) <div>

Açıklama : <div> etiketi HTML4’ten beri bulunmaktadır.

7. IMAP ile POP3 arasındaki temel fark aşağıdakilerden hangisidir?

A) IMAP okumak istediğiniz e-postayı doğrudan bilgisayarınıza indirirken POP3 siz isterseniz bilgisayarınıza indirir.

B) POP3 okumak istediğiniz e-postayı doğrudan bilgisayarınıza indirirken IMAP siz isterseniz bilgisayarınıza indirir.

C) İkisi de dosya aktarım protokolüdür. IMAP dosyaları sadece okumanıza izin verirken POP3 dosyaları isterseniz bilgisayarınıza indirmenize izin verir.

D) POP3 dosya paylaşım protokolü, IMAP ise e-posta protokolüdür.

E) İkisi de dosya aktarım protokolüdür. POP3 dosyaları sadece okumanıza izin verirken IMAP dosyaları isterseniz bilgisayarınıza indirmenize izin verir.

Cevap : B) POP3 okumak istediğiniz e-postayı doğrudan bilgisayarınıza indirirken IMAP siz isterseniz bilgisayarınıza indirir.

Açıklama : POP3 e-postaları bilgisayara indirir, IMAP ise sunucuda tutar.

8. Bir tabloda üç kolonu birleştiren HTML kodu aşağıdakilerden hangisidir?

A) <table colspan=”3″>

B) <th> colspan=”3″ </th>

C) <td colspan=”3″>

D) <tr colspan=”3″>

E) <table column=”3″>

Cevap : C) <td colspan=”3″>

Açıklama : <td> etiketi tablo hücresini temsil eder ve colspan özelliği kolonları birleştirir.

9. Video ya da audio nesnesi ile sayfaya eklenen medya dosyasının, sayfa yüklendiğinde ön belleğe alınmasını sağlayan özellik aşağıdakilerden hangisidir?

A) Download

B) Upload

C) Postload

D) Preload

E) Load

Cevap : D) Preload

Açıklama : Preload, sayfa yüklendiğinde medya dosyasının ön belleğe alınmasını sağlar.

10. Aşağıdakilerden hangisi XML’nin olumlu özelliklerinden biri değildir?

A) Esnektir, başka diller tanımlanabilir.

B) Özellikle sayısal data için çok iyi sonuçlar verebilir.

C) İnternet tarayıcısı gibi basit araçlarda bile gösterilebilir.

D) İnsanların okuyabileceği bir dildir.

E) Lisans sorunu yoktur, platform odaklı olmayan ve çok desteklenen bir dildir.

Cevap : B) Özellikle sayısal data için çok iyi sonuçlar verebilir.

Açıklama : XML, sayısal veriler için en iyi sonuçları vermeyebilir, JSON bu konuda daha etkilidir.

11.

Yukarıdaki javascript kodları çalıştığında ekranda nasıl bir çıktı görünür?

A) 9 8 7 6 5

B) 9 7 6 5

C) 9 7 6

D) 10 9 7 6 5

E) 10 9 8 7

Cevap : B) 9 7 6 5

Açıklama : continue ifadesi %4 kalan 0 olan değerlerde döngüyü atlar.

12. Bir resmin üzerinde merkez noktası (x,y) = (119,153) ve çapı 22 olan daire şeklindeki alanı işaretleyip o alana tıklandığında http://www.daire.com.tr adresine gitmeyi sağlayan kod aşağıdakilerden hangisidir ?

A) <AREA shape=”rect” coords=”119,22,153″ href=”http://www.daire.com.tr/”&gt;

B) <AREA shape=”circle” points=”119,153,22″ src=”http://www.daire.com.tr/”&gt;

C) <AREA shape=”square” coords=”119,153,22″ href=”http://www.daire.com.tr/”&gt;

D) <AREA shape=”poly” href=”153,22,119″ src=”http://www.daire.com.tr/”&gt;

E) <AREA shape=”circle” coords=”119,153,22″ href=”http://www.daire.com.tr/”&gt;

Cevap : E) <AREA shape=”circle” coords=”119,153,22″ href=”http://www.daire.com.tr/”&gt;

Açıklama : shape=”circle” ve coords=”119,153,22″ daire şekilli alanı tanımlar.

13. <font color=”rgb(255,0,0)”> Kırmızı </font> satırı browser’da açıldığında ekranda aşağıdakilerden hangisi görünür?

A) Kırmızı renkli yazılmış Kırmızı kelimesi görünür.

B) Mavi renkli yazılmış Kırmızı kelimesi görünür.

C) Mavi renkli yazılmış font kelimesi görünür.

D) Kırmızı renkli yazılmış font kelimesi görünür.

E) Yeşil renkli yazılmış Kırmızı kelimesi görünür.

Cevap : A) Kırmızı renkli yazılmış Kırmızı kelimesi görünür.

Açıklama : rgb(255,0,0) kırmızı rengi temsil eder.

14. Aşağıdaki XML etiket isimlendirmelerinden hangisi yanlıştır?

A) <h1>

B) <Ad Soyad>

C) <Sayi1>

D) <yas>

E) <Note>

Cevap : B) <Ad Soyad>

Açıklama : XML etiket isimleri boşluk içeremez.

15. Resim göstermeyi desteklemeyen tarayıcılardan kaynaklı ya da farklı nedenlerle resmin yüklenememesi durumunda resmin yerinde gözükecek olan metni ayarlamak için kullanılan özellik aşağıdakilerden hangisidir?

A) Width

B) Img

C) Alt

D) Src

E) Align

Cevap : C) Alt

Açıklama : Alt özelliği resim yüklenemediğinde gösterilecek metni tanımlar.

16. Formda girilen bilgilerin url bar’da görünmeden action_page.aspx dosyasına gönderilmesi için yazılması gereken satır aşağıdakilerden hangisidir?

A) <form src=”action_page.aspx” method=”get”>

B) <form action=”action_page.aspx” send=”post”>

C) <form action=”action_page.aspx” method=”get”>

D) <form action=”action_page.aspx” method=”post”>

E) <form src=”action_page.aspx” method=”post”>

Cevap : D) <form action=”action_page.aspx” method=”post”>

Açıklama : Method=”post”, form verilerini URL’de göstermeden gönderir.

17. Kullanıcının birçok seçenek içerisinden sadece bir tanesini seçebilmesine olanak tanıyan form nesnesi aşağıdakilerden hangisidir?

A) Reset

B) Checkbox

C) Submit

D) Radio

E) Textbox

Cevap : D) Radio

Açıklama : Radio butonları, kullanıcıya birden fazla seçenek arasından sadece birini seçme olanağı sağlar.

18. Üçleme koşulu ( ? : ) aşağıdaki yapılardan hangisi ile benzer bir kontrol mantığına sahiptir?

A) While

B) For

C) Do – While

D) If

E) If – Else

Cevap : E) If – Else

Açıklama : Üçleme koşulu, if-else yapısının kısa bir biçimidir.

19. Javascript kodları hangi etiket(ler) arasına yazılabilir?

A) <body>

B) <head> ve <meta>

C) <meta>

D) <title> ve <head>

E) <body> ve <head>

Cevap : E) <body> ve <head>

Açıklama : Javascript kodları genellikle <body> ve <head> etiketleri arasında yazılır.

20. Bir div’in arka plan rengini daire şeklinde, kırmızı, sarı ve mavi renkler arasında geçişler olacak şekilde düzenleyen ID tanımlamasının CSS kodu aşağıdakilerden hangisidir?

A) div { background:radial-gradient(circle, red, yellow, blue); }

B) #div { background:linear-gradient(circle, red, yellow, blue); }

C) .div { background:linear-gradient(circle, red, yellow, blue); }

D) .div { background:radial-gradient(circle, red, yellow, blue); }

E) #div { background:radial-gradient(circle, red, yellow, blue); }

Cevap : E) #div { background:radial-gradient(circle, red, yellow, blue); }

Açıklama : Radial-gradient dairesel bir geçiş efekti oluşturur ve ID tanımlaması #div ile yapılır.

@lolonolo_com