HTML

HTML

HTML Giriş, Çalışma Mantığı Neler Yapılır?

1.HTML"e GİRİŞ

HTML açılımı HyperText Markup Language olan,kullanıcılarına browserlar tarafından gorüntülenebilen web sayfalaları tasarlama imkanını sunan bir programlama dilidir(Belki metin biçimlendirme dili desek daha uygun olur).Fakat C/C++,Basic,Java gibi yüksek dereceli programlama dillerine kıyasla ögrenmesi çok kolaydır,tabi yapabilecekleri de bir o kadar kısıtlıdır.Tabi bu "kısıtlı" lafına aldanmayin,iyi bir HTML temeli uzerine biraz JavaScript ve CSS (ve tabi yaratıcılığınızı) ekleyerek,internette görup de kıskandiginiz birçok sayfayı yapabilecek hale gelebilirsiniz! Amacımız HTML oğrenmek olduğuna göre,HTML"i bir tanıyalım İlk olarak HTML ile yapılan web sayfalarının calışma mantıgına bir bakalım, sonra da HTML ile ne yapıp ne yapamayacagımızı öğrenelim:

1/1.HTML"in ÇALIŞMA MANTIĞI

HTML dilinde yazdiginiz kodları ücret karşılığı veya bedava hizmet veren servis sağlayıcınızın sunucusuna(server) yüklersiniz(upload); Bu sunucu sizin web sayfanızı internette yayınlar; Sitenize gelen ziyaretçilerin browserları bu kodları yorumlar ,böylece ziyaretçiler sayfayi görüntülemiş olur. Kendi yazdığınız kodları kendi browserınızla açarak da sayfanızın nasıl goründüğünü test edebilirsiniz. Bu mantığı konular ilerleyince daha iyi kavrayacaksınız.

 

1/2.HTML İLE NE YAPILABİLİR,NE YAPILAMAZ

HTML ile bir web sayfasında

Yapılabilecekler:Metin Biçimlendirme(Renk,font,vs),listeler,bağlantılar(link),resim kullanımı,tablolar,Çerçeveler,Formlar

 

Yapılamayacaklar:Etkileşimli,olaylara duyarlı sayfalar;formları işleyip degerlendiren programlar.

Yapılamayacaklardan ilkini Javascript,ikincisini CGI ,ASP, veya PHP kullanarak yapabilirsiniz. Bununla birlikte bir web sayfasının temelini her zaman HTML kodları oluşturur, Yani web tasarımı konusunda ilerlemek istiyorsanız,HTML bilginizin sağlam olması gereklidir!

Çerçeveler

11. ÇERÇEVELER (FRAME)

Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl içeriğini yerleştirmektir.

Fakat şunu da belirtmekte fayda var, birçok tasarımcı estetik açısından çerçevelere pek sıcak bakmaz; genelde üst üste tablolar kullanmayı tercih eder. Yine de pek sık kullanılmayan bu tekniği aklınızın bir yerinde tutun, belki faydalı olabilir...

Bir uyarı: Netscape 2.0 ve Explorer 3.0 altı browser"lar, çerçeveleri tanımazlar!

 

ÇERÇEVE TEKNİĞİNİN GENEL MANTIĞI

Çerçeve tekniğinde, ilk önce parent(ana) frame denilen bir sayfa oluşturmak gerekir. ... etiketlerinin parametreleri olan cols ve rows ifadeleri ile sayfayı dikey ve yatay olarak ne oranda bölmek istediğimizi browser"a bildiririz.  Src parametresi ile ana çerçevenin bölümlerinde görüntülenecek sayfaların adreslerini bildirdikten sonra, geriye biraz önce adreslerini bildirdiğimiz sayfaları uygun bir şekilde hazırlamak kalır. Şimdi bu biraz karışık ifadeyi bir örnekle daha iyi anlayalım,  sonra da   etiketini inceleyelim. 

 Önce ana pencereyi hazırlayalım:

< BR> 

 

Burada yaptığımız şey ana sayfayı soldan 150 piksel genişliğinde bölüp iki sayfa elde etmekten ibaret. Ayrıca browser"a soldan ilk bölüme (150 px olan bölüm) "menu.html", ikinci bölüme ise "esas.html" sayfalarını yerleştirmesini bildirdik. Burada dikkat edilmesi gereken nokta etiketinin ile etiketleri arasına yerleştirilmesidir. etiketleri içinde yer alan bölüm ise çerçeveden anlamayan eski sürüm browser"lar içindir. Şimdi aşağıdaki kodlardan ilkini "menu.html", ikincisini ise "esas.html"  adıyla ana pencereyi kaydettiğiniz dizine kaydedin.

 

  

 

  

Son olarak tekrar ana sayfayı açtığınızda (ismi önemli değil, yeter ki diğer iki sayfa ile aynı dizinde bulunsun!) sonuç böyle olacaktır:

Artık çerçevelerin mantığını anladığımıza göre bu tekniğin detaylarını inceleyelim...

 

 

11/2.   ve ETİKETLERİ

 

Aşağıda etiketinin parametrelerini görüyorsunuz :

rows

Safayı enine bölmenizi sağlar

cols

Sayfayı boyuna bölmenizi sağlar

cols ve rows parametreleri piksel değeri alabilecekleri gibi "%" cinsinden de değer alabilirler, örneğin:Daha önce kullandığımız "*" ifadesi ile bölünecek alanın genişliğini browser"a bırakabiliriz:Son olarak sayfayı üçe veya daha fazlaya da böşebiliriz:ifadesi ile ana pencereyi dörde böleriz.

frameborder

Ana sayfanın bölümleri arasında sınır çizgisi olup olmamasısını belirler.("yes", "no"; veya "1", "0" değerlerini alır)

border

Çerçeveler arasındaki sınırın kalınlığını piksel cinsinden belirler.

 

Şimdi de ; etiketinin parametreleri:

 

src

Bunu zaten biliyorsunuz, çerçeve içinde görüntülenecek sayfanın yeri

marginwidth

Sayfanın solundaki kenar boşluğunu belirtir

marginheight

Sayfanın üstündeki kenar boşluğunu belirtir

noresize

"1" veya "0" değerlerini alır, "1" verilirse pencere boyutları sabitlenir.

scrolling

"yes", "no", "auto" değerlerini alır, kaydırma çubuklarının durumunu belirler.

 

11/3. FRAME UYGULAMALARI

Aşağıda bazı çerçeve örnekleri ve bu örneklerin kodları verilmiştir: 

Formlar

12. FORMLAR

HTML"in bir metin şekillendirme aracı olduğunu söylemiştik. Form"lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz. Formlar ...etiketleri arasına yazılırlar. Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım.

 

12/1. FORM TÜRLERİ

 

Aşağıda form türlerini ve kullanılışlarını görüyoruz.:

text

maxlength: Yazılabilecek maksimum text uzunluğuvalue: varsayılan değersize: Px cinsinden alanın uzunluğu

<>

Ziyaretçinin ismi, telefonu gibi kısa bilgilerini almak için kullanılır.

password

Tüm parametrleri text ile aynıdır.

Lütfen şifre girin:

Lütfen şifre girin:

 Şifre almak için kullanılır, yazılan karakterler ekranda "*" şeklinde görüntülenir

textaraea

rows : Alanın karakter cinsinden yüksekliğicols : Alanın genişliği

Burası bir textarea!

Burası bir textarea!

...  Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini almak için kullanılır.

checkbox

checked: sayfa açıldığında "checked" ibaresi bulunan kutu işaretli olur.

seçenek 1seçenek 2

seçenek1seçenek2

Ziyaretçiye, verilen seçeneklerden birini, birkaçını veya hepsini seçme imkanı verir.

radio

checked: sayfa açıldığında " p olur.

seçenek1seçenek2seçenek2

seçenek1seçenek2seçenek2

Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkanı verir.

select

size: Select etiketinin karakter cinsinden boyutuselected: Görevi checked ifadesinin aynıdır.multiple: Ziyaretçinin birden çok seçim yapmasına olanak verir

seçenek1seçenek2seçenek3

...... Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir.

submit

value: Butonun üzerine yazılacak metin buraya yazılır

Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir

reset

value: Butonun üzerindeki metin

Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler.

button

value: Butonun üzerindeki metin

Düğmelere JavaScript ile bazı işlevler kazandırılabilir.

 

Tabloda belirtmedik ama form elemanlarında daha önceden bildiğimiz  name parametresi de kullanılabilir.

 

12/2. ETİKETİ

İşte etiketinin parametreleri ve bunların işlevleri:

 

method

"Get" veya "post" değerlerini alabilir. Method parametresinin değeri formu göndereceğiniz CGI programı açısından önemlidir. Eğer CGI kodları yazmayı bilmiyorsanız, birçok servis sağlayıcı size form"larınızın sonuçlarını e-mail"inize gönderme imkanı verir. Eğer böyle bir hizmetten yararlanacaksanız "post" metodunu seçmelisiniz.

action

Formu göndereceğiniz CGI programının adresini action parametresiyle bildirirsiniz. Eğer yukarıda bahsedilen hizmetten yararlanmak istiyorsanız, servis sağlayıcınızdan bu programın adresini öğrenmelisiniz. Örneğin bu adres ">action= "/cgi-bin/cgiemail">

 

12/3. FORM UYGULAMASI

Aşağıdaki örnekte bütün form unsurlarının kullanımını göreceksiniz. Bu örneği önce parça parça kendiniz yapmaya çalışın, gerektiğinde aşağıda verilen kodlardan yararlanın...

Bu siteye not verin!

Kullanıcı ismi

Parola

Cinsiyet EK

Bildiğiniz Uygulamalar

 

Sitenin içeriği

5, Çok zengin!4, Fazlasıyla yeterli3, Yeterli2, Yetersiz1, Çok kısıtlı

Sitenin tasarımı

<>

 

Bu siteye not verin!

Kullanıcı ismi 

Parola

Cinsiyet EK

Bildiğiniz Uygulamalar

HTMLJavaScriptCssAsp

Sitenin içeriği

5, Çok zengin!4, Fazlasıyla yeterli3, Yeterli2, Yetersiz1, Çok kısıtlı

Sitenin tasarımı

Harika!Oldukça iyiİyiİdare ederBerbat

HTML bölümünün burada sonuna geldik. Fakat tek başına HTML, çoğu zaman istediğimiz gibi sayfalar yapabilmek için yeterli olmaz. Artık internet"te yeralan sayfaların hemen hepsinde JavaScript kullanılmaktadır. Aşağıdaki link size daha dinamik sayfalar yapma olanağı sunan JavaScript bölümüne götürecektir.

 

 

Çerçevelerle çalışmaya başlamadan önce bilmeniz gereken önemli bir nokta:Hatırlarsanız bağlantılar konusunda  etiketinin target isimli bir parametresi olduğundan ve bu parametrenin "Çerçeveadı" değerini alabileceğinden bahsetmiştik. Bu parametre bize bağlantının belirttiği adresdeki sayfanın adını verdiğimiz çerçeve içinde açılmasını sağlar. Örneğin bu sayfadaki ikinci örneği ele alalım:"İstiyoruz ki sayfanın yeşil bölümü sayfamızın menüsü olsun. Ziyaretçi buradaki bağlantılara tıklayarak sitenin diğer sayfalarına ulaşsın, ama bu diğer sayfalar sarı bölümde görüntülensin." İşte aşağıdaki kod bunu sağlar:

Bu link saril bölümde görüntülenecek!

Gördüğünüz gibi çerçevelere verdiğimiz isimler (name) bu noktada önem kazanıyorlar

 

  GRAFİK WEB TASARIM GROUP

Döküman Arama

Başlık :

Kapat