1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

Html Dersleri 6- Frames (çerçeveler)

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 19 Mart 2017 tarihinde açılan konu

  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,730

    Özel Mesaj
    Herkese tekrardan merhabalar. Önceki HTML dersimizde form etiketleri ile ilgili pek çok bilgi öğrenmiştik.

    1.DERS
    2.DERS
    3.DERS
    4.DERS
    5.DERS (Önceki Ders)


    Bu dersimizde ise sayfamıza "frame" (çerçeve) eklemeyi öğreneceğiz. Hemen başlayalım...

    Frames
    Frame, çerçeve anlamına gelir ve HTML sayfamızın içine harici sayfalar eklememizi sağlar. Ancak bu, bildiğiniz "border" çerçevelerinden değildir. Bir "frame" oluştururken <body> etiketlerini silmemiz gerekir. Nedenini az sonra anlayacaksınız.
    HTML:
    <html>
    
     <head>
      <title>HTML DERS-6</title>
     <head>
     </html>
    Yani bu şekilde olması gerekiyor. Şimdi sayfamızı kaydedelim ve bir kenara koyalım. 4 adet klasik HTML sayfası oluşturalım.
    HTML:
    <html>
    
     <head>
      <title>Sayfa 1</title>
     <head>
     <body bgcolor="yellow">
      <h1>Burası Birinci Sayfa</h1>
     </body>
     </html>
    HTML:
    <html>
     <head>
      <title>Sayfa 2</title>
     <head>
     <body bgcolor="white">
      <h1>Burası İkinci Sayfa</h1>
     </body>
     </html>
    HTML:
    <html>
     <head>
      <title>Sayfa 3</title>
     <head>
     <body bgcolor="lightblue">
      <h1>Burası Üçüncü Sayfa</h1>
     </body>
     </html>
    HTML:
    <html>
     <head>
      <title>Sayfa 4</title>
     <head>
     <body bgcolor="red">
      <h1>Burası Dördüncü Sayfa</h1>
     </body>
     </html>
    4 adet sayfa oluşturduk şimdi. Burada kullandığımız "bgcolor" parametresini önceden öğrenmedik. Şimdi sadece mantığı kavramanız için böyle hazırladık. Bakalım ne yapmışız:


    [​IMG]

    [​IMG]

    [​IMG]

    [​IMG]



    Evet, bu hazırladığımız sayfaları sırasıyla "Sayfa 1.html", "Sayfa 2.html", "Sayfa 3.html" ve "Sayfa 4.html" olarak kaydedip biraz önceki sayfamızı tekrar açıyoruz.

    HTML:
    <html>
     <head>
      <title>HTML DERS-6</title>
     <head>
     </html>
    Bir frame oluşturmak için ilk olarak <frameset> etiketini açıyoruz.

    HTML:
    <html>
     <head>
      <title>HTML DERS-6</title>
     <head>
    
     <frameset>
    
    </frameset>
     </html>
    Etiketimize "cols" ve "rows" parametrelerini kullanarak. Sayfamızı parçalara bölüyoruz. Şöyleki; biraz önce 4 adet sayfa oluşturduk. Şimdi bu 4 sayfayı tek bir sayfada birleştireceğiz. "cols" ile sayfayı enine, "rows" ile boyuna böleceğiz. Örnek:
    HTML:
    <html>
     <head>
      <title>HTML DERS-6</title>
     <head>
    
     <frameset cols="50%, 50%" rows="50%, 50%">
    
    </frameset>
     </html>
    Sayfamızı enlemesine 2 eşit parçaya (50%, 50%) ve boylamasına 2 eşit parçaya yani toplamda 4 eşit parçaya böldük. Bunun dışında "frameborder" parametresi ile ekleyeceğimiz sayfaların çerçevesi olup olmadığını belirleyebiliriz ve "border" parametresi ile de eğer çerçeve ekleyeceksek çerçeve kalınlığını belirtebiliriz. Örnek:

    HTML:
    <html>
     <head>
      <title>HTML DERS-6</title>
     <head>
    
     <frameset cols="50%, 50%" rows="50%, 50%" frameborder="yes" border="10">
    
    </frameset>
     </html>
    Şu an bir şeyler yapmaktayız ancak ne yaptığımızı anlamadığınızı tahmin edebiliyorum. Çok az kaldı, şimdi anlayacaksınız.

    <frameset> etiketi içerisine 4 tane <frame> etiketi açıyorum ve önceki derslerde öğrendiğimiz "src" parametresi ile az önce oluşturduğum 4 sayfanın kaynağını belirtiyorum. Yani şöyle:

    HTML:
    <html>
     <head>
      <title>HTML DERS-6</title>
     <head>
    
     <frameset cols="50%, 50%" rows="50%, 50%" frameborder="yes" border="10">
      <frame src="Sayfa1.html"/>
      <frame src="Sayfa2.html"/>
      <frame src="Sayfa3.html"/>
      <frame src="Sayfa4.html"/>
     </frameset>
     </html>
    Şimdi ne yaptığımızı bir görelim:

    [​IMG]

    Gördüğünüz gibi az önce oluşturduğum 4 sayfayı bir sayfaya topladım. Şimdi bir noktaya değinmek istiyorum. Oluşturduğumuz resimde gördüğünüz gibi çerçeveler daha önceki derslerde gördüğümüz çerçevelerden daha farklı. Bu çerçeveleri biz imleç ile sürükleyip sayfa boyutlarını değiştirebiliyoruz. Örnek:

    [​IMG]


    Gördüğünüz gibi sayfadaki kaplama oranları değişti. Bunu yapmak için hiç bir kod kullanmadım. İmlecim ile çerçeveyi sürükledim. Eğer siz sayfanızın çerçevelerinin sabit kalmasını istiyorsanız "noresize" parametresini kullanabilirsiniz. Örnek:

    HTML:
    <html>
     <head>
      <title>HTML DERS-6</title>
     <head>
    
     <frameset cols="50%, 50%" rows="50%, 50%" frameborder="yes" border="10">
      <frame src="Sayfa1.html" noresize/>
      <frame src="Sayfa2.html" noresize/>
      <frame src="Sayfa3.html" noresize/>
      <frame src="Sayfa4.html" noresize/>
     </frameset>
     </html>
    Sadece "noresize" yazdık. Yanına başka bir şey eklememize gerek yok. Artık çerçevelerin sayfadaki kaplama oranını kafamıza göre değiştiremiyoruz. Son olarak <noframes> etiketini öğreneceğiz. Çok olmasa da bazı güncellenmemiş eski tarayıcılar "frame" etiketlerini desteklememekte. Bu durumda kullanıcıya alternatif bir sayfa göstermek için bu etiketi kullanıyoruz. Örnek:

    HTML:
    <html>
     <head>
      <title>HTML DERS-6</title>
     <head>
    
     <frameset cols="50%, 50%" rows="50%, 50%" frameborder="yes" border="10">
      <frame src="Sayfa1.html" noresize/>
      <frame src="Sayfa2.html" noresize/>
      <frame src="Sayfa3.html" noresize/>
      <frame src="Sayfa4.html" noresize/>
     <noframes>Tarayıcınız çok eski, lütfen güncelleyiniz.</noframes>
     </frameset>
     </html>
    Evet, bu konumuz "frames" bu kadardı. Kafanıza takılan bir yer varsa sorabilir, anlatımdan memnun kaldıysanız konuyu beğenebilir ve yorum yazabilirsiniz. :) Bir sonraki derste HTML5 ile ilgili bazı önemli ve işe yarayacak etiketleri öğreneceğiz ve büyük ihtimalle son konu olacak. HTML dili zor değil, tahmin ettiğinizden daha kolay ve şuana kadar olan konuları takip ettiyseniz çok büyük bir ilerleme kaydettiniz. Başarılar ve iyi forumlar... :)


     
  2. sadik27 Guest

    • Guest
    Katılım:
    14 Mart 2017
    Mesaj:
    2
    Alınan Beğeniler:
    1

    Özel Mesaj
    Sitemizi online nasıl yapıcazğız ?
     
  3. sadik27 Guest

    • Guest
    Katılım:
    14 Mart 2017
    Mesaj:
    2
    Alınan Beğeniler:
    1

    Özel Mesaj
    Bu sayfamızı nasıl online yapabiliriz ?
     
    ERVAH-I-EZEL bunu beğendi.
  4. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,730

    Özel Mesaj
    Bunun için sunucu dillerini öğrenmen gerekir. Ya php, ya da asp. "Ben öğreneceğim ama hangisini?" diyorsan şu konuyu inceleyebilirsin.
    http://forum.ayyildiz.org/konu/asp-net-ve-phpnin-Özellikleri.82068/

    Ayrıca bunlardan birini öğrenebilmek için temel düzey HTML öğrenmen gerektiğini unutma. ;)
     
    Orion-Pax ve turkey002200 bunu beğendi.
  5. alsamawi Atıldı

    • Guest
    Katılım:
    14 Ekim 2016
    Mesaj:
    14
    Alınan Beğeniler:
    18

    Özel Mesaj
    kodları türkçe yaparsam sıkıntı çıkarmı ?
     
    Taleks bunu beğendi.
  6. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,730

    Özel Mesaj
    Hangi kodlar? Biraz açıklar mısın?
     
    Orion-Pax ve turkey002200 bunu beğendi.
  7. alsamawi Atıldı

    • Guest
    Katılım:
    14 Ekim 2016
    Mesaj:
    14
    Alınan Beğeniler:
    18

    Özel Mesaj
    bütün hepsini Türkçe yapıcam sadece Türkçe yazıcak
     
    Taleks bunu beğendi.
  8. alsamawi Atıldı

    • Guest
    Katılım:
    14 Ekim 2016
    Mesaj:
    14
    Alınan Beğeniler:
    18

    Özel Mesaj
    mesela <head> başlığını <kafa> yazsam olurmu
     
    Taleks ve ERVAH-I-EZEL bunu beğendi.
  9. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,730

    Özel Mesaj
    Hayır devrem öyle olmuyor. Bunlar standart kodlar. Farklı bir dile çevrilemiyor maalesef.
     
    Orion-Pax, turkey002200 ve alsamawi bunu beğendi.
  10. alsamawi Atıldı

    • Guest
    Katılım:
    14 Ekim 2016
    Mesaj:
    14
    Alınan Beğeniler:
    18

    Özel Mesaj
    tamam saol
     
    Taleks ve ERVAH-I-EZEL bunu beğendi.
  11. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,730

    Özel Mesaj
  12. Rebell33 Guest

    • Guest
    Katılım:
    29 Nisan 2017
    Mesaj:
    10
    Alınan Beğeniler:
    14

    Özel Mesaj
    Devrem çok yardımcı oldun sağol var ol.
     
    Orion-Pax ve ERVAH-I-EZEL bunu beğendi.
  13. RePsaC Guest

    • Guest
    Katılım:
    29 Kasım 2016
    Mesaj:
    818
    Alınan Beğeniler:
    600
    Meslek:
    Tekstil

    Özel Mesaj
    Devrem eline sağlık :cool:
     
    Orion-Pax ve ERVAH-I-EZEL bunu beğendi.
  14. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,730

    Özel Mesaj
    Sağol devrem. :cool: (Her konudaki mesajın için de teşekkürler. :D)
     
    Orion-Pax, turkey002200 ve BAYULKEN bunu beğendi.
  15. AFRAN1453 Guest

    • Guest
    Katılım:
    29 Kasım 2017
    Mesaj:
    12
    Alınan Beğeniler:
    8

    Özel Mesaj
    Ellerine Saglik Devrem
     
    Orion-Pax ve ERVAH-I-EZEL bunu beğendi.
  16. turkey002200 Atıldı

    • Guest
    Katılım:
    17 Ağustos 2017
    Mesaj:
    587
    Alınan Beğeniler:
    482

    Özel Mesaj
    eline sağlık devrem
     
    ERVAH-I-EZEL bunu beğendi.
  17. The61 Guest

    • Guest
    Katılım:
    20 Temmuz 2017
    Mesaj:
    608
    Alınan Beğeniler:
    485

    Özel Mesaj
    Devrem senin sayende kodlamayı öğrendim
     
    Orion-Pax ve ERVAH-I-EZEL bunu beğendi.
  18. turkey002200 Atıldı

    • Guest
    Katılım:
    17 Ağustos 2017
    Mesaj:
    587
    Alınan Beğeniler:
    482

    Özel Mesaj
    ellerine sağlık devrem
     
  19. Excloosee Guest

    • Guest
    Katılım:
    3 Ocak 2021
    Mesaj:
    1
    Alınan Beğeniler:
    0

    Özel Mesaj
    Devrelerim HTML öğreniyorum , fotoğraflar açılmıyor . Mesela doğru mu yaptım diye kontrol etmek istiyorum o konuda takıldım .
     
  20. qenzy Guest

    • Guest
    Katılım:
    14 Ocak 2021
    Mesaj:
    10
    Alınan Beğeniler:
    10

    Özel Mesaj
    teşekkürler devrem işime yaradı
     
    Orion-Pax bunu beğendi.

Bu Sayfayı Paylaş