Web Arayüz Programlama — Ünite 1 Soru-Cevap

Cern araştırmacılarından olan Tim Berners-Lee, HTML dilini 1989 yılında tasarlayıp 1991’de tüm dünyanın kullanımına sundu. HTML sayesinde bugün web sayfaları tarayıcılar tarafından kolaylıkla kullanılabilir hâle gelmiştir

Türkçeye Hiper Metin olarak çevrilen Hyper Text’in anlamı sadece yazı içermeyen belge olarak açıklanabilir.

Sadece HTML ile web sayfaları hazırlamak mümkündür. Bu web sayfaları Statik Web Sayfaları olarak adlandırılır.

Geliştirilen ilk HTML sürümü, metin kontrolleri ve resimler gibi temel ögeleri destekledi ve HTML 1.0 olarak adlandırıldı. İçeriğin tarayıcıda nasıl oluşturulacağı ile ilgili stil şablonları, tablolar, yazı tipi desteği gibi özellikleri desteklemiyordu.

email: Eklenen bu yeni etiket e-posta türünün giriş ögesidir. Bir form öge tipi olmasına rağmen form dışında da kullanılabilir. Giriş değerinin geçerli bir e-posta olup olmamasını kontrol eder.

password: Kullanıcıdan parola almak için kullanılan ögedir. Öge tipi “password” olarak seçildiyse kullanıcı parolasını girerken ekranda girdiği değerler gözükmez bunun yerine özel simgeleri gösterir.

audio etiketi: HTML5 ile uygulanan yeni bir ses etiketidir. Web sayfalarına ses dosyası eklemeye yardımcı olur. Bu ses dosyası web sayfasına entegre edilebilir ve oynatılabilir.

semantik (anlamsal) etiketler: Anlamsal şeklinde Türkçeye çevrilebilen “semantik” etiketler yapısal etiketler olarakta bilinir. Bu etiketler sayesinde oluşturulan komponentler birleştirilerek anlamlı HTML sayfalar tasarlanabilir. Örneğin başlık komponenti için <header> etiketi kullanılarak bununla alakalı tüm kodlar bu etiketin altında toplanabilir.

section etiketi: HTML sayfasındaki belirli bir bölümü anlamlandırmak için bu etiket kullanılabilir. Üstbilgi, altbilgi gibi bölümler olabilir.

Program geliştirme aşamasında programcıya yardım için birden çok amaca hizmet eden IDE (Integrated Development Environment) programları vardır. Diğer dillerde olduğu gibi Web Programlama için de geliştirilmiş IDE’ler bulunmaktadır.

VSC üzerine kurulan eklentiler ile birçok dil için destek vermektedir. VSC’yi https://code.visualstudio. com/Download adresinden işletim sisteminize uygun olan en son sürümü indirerek kurabilirsiniz. Programı kurduktan sonra “CTRL+SHIFT+E” tuşlarına basarak gezgin menüsüne girebilir ardından kendinize ait bir çalışma klasörü  oluşturabilirsiniz.

Yazılım projelerinde genelde farklı kişiler veya ekipler aynı proje üzerinde çalışmaktadır. Versiyon Kontrol Sistemi (VCS/ Version Control System) farklı kişiler tarafından geliştirilen dosyaların versiyonlamasını yaparak kişiler ve ekipler arasında senkronizasyonu mümkün kılar. Bu programlar sayesinde düzenleme, silme, ekleme, kopyalama gibi işlemler kayıt altına alınıp takip edilebilir. Gerekli olduğu durumlarda önceki versiyona dönebilmeye imkân sağlar.

En büyük etiket boyutu olan <h1> 2 em font büyüklüğüne sahipken en küçük olan <h6> 0,67 em font büyüklüğüne
sahiptir.

Paragraf etiketinden daha önce bahsettiğimiz gibi HTML sayfalarının içerisindeki paragrafları etiketlemek için <p> etiketi kullanılır. Tarayıcılar paragraf etiketlerinin öncesine ve sonrasına boşluk koyarak paragrafları ayırırlar.

Paragraf içerisinde arka planı vurgulamak istediğiniz kelimelere <mark></mark> etiketi uygularsanız metnin arka planını sarı ile işaretlendiğini göreceksiniz

Web sayfalarında resim göstermek için kullanılan <img> etiketi kapanış etiketi gerektirmeyen, resim yolunu içerisindeki alt özellikler yoluyla alan bir etikettir

Web sayfalarının birbirlerine linkler aracılığı ile bağlandığından bahsetmiştik. Dosyalar arasında geçiş yapmak için <a> etiketini kullanabiliriz. Bu etiketin içerisindeki href özelliği ile gidilecek sayfanın konumu belirtilir. Gidilecek sayfa kendi projenizde oluşturduğunuz sayfalardan olabileceği gibi internet üzerindeki başka bir sayfada olabilir.

Sayfa içerisindeki herhangi bir elemanı şekillendirirken diğerlerinden ayırmak için <span> etiketi kullanılır.

Ofis programlarında hazırlanan tablolara benzer yapıda tabloları HTML sayfalarında da hazırlamamız gerekebilir. Bunun için <table> etiketi bu amaçla hazırlanmıştır.

Web sayfalarınızda bazen farklı sayfaları bir çerçeve içerisinde göstermek isteyebilirsiniz. Örneğin bir youtube videosu veya bir haber sitesini sayfanızın bir köşesinde göstermek istediğinizde <iframe> etiketini kullanmanız gerekir.