HTML 4. Bölüm. Doç. Dr. İsmail Rakıp Karaş Dersin Course Page:

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "HTML 4. Bölüm. Doç. Dr. İsmail Rakıp Karaş Dersin Course Page:"

Yonca Hayrettin
9 yıl önce
İzleme sayısı:

1 HTML 4. Bölüm Doç. Dr. İsmail Rakıp Karaş (Son Güncelleme: ) Dersin Course Page:

2 Çerçeveler (Frames) Çerçeve kullanımı her ne kadar günümüzde web tasarımında tercih edilmese de, farklı web sayfalarını tek bir sayfada gösterme özelliğinden dolayı kimi zaman kullanışlı olabilmektedirler. Bu açıdan çerçeve yapısını bilmek ve öğrenmekte fayda vardır. Çerçeveler sayesinde içi içe geçmiş web sayfaları hazırlamak mümkündür. Farklı HTMl dosyalarını birlikte tek bir sayfada gösterebilirsiniz. Although the usage of frames is not so common today, it is still preferred since the advantage of multi-page integration in one screen of a browser. Because of this, this method should be lerarned. It is possible to prepare many web pages within the one frame. It can be visualised different HTML files in one page.

3 Örnek / Exp: C.htm Ana.htm A.htm B.htm

4 Çerçeveler (Frames) Çerçevenin de, tablo gibi, yapısal unsurları vardır: Sütunlar ve satırlar. Çerçeveli bir HTML sayfası oluşturmak, aslında, çerçeve sayısı +1 kadar HTML sayfası oluşturmak demektir. Frames are similar with the tables. They have the columns and rows too. To prepare a framed HTML page means creating the number of the frames plus one (+1) HTML files.

5 Örnek/ Exp: Aşağıdaki HTML kodunu yazıp herhangi bir isimle htm dosyası olarak kaydedin ve tarayıcınızda çalıştırın: Try this code by typing to a text file and save as with htm extension: <frameset cols="25%,25%,25%,25%"> <frame name="col" src="cer01.htm" marginheight="5" marginwidth="5" <frame name="co2" src="cer02.htm" marginheight="5" marginwidth="5" <frame name="co3" src="cer03.htm" marginheight="5" marginwidth="5" <frame name="co4" src="cer04.htm" marginheight="5" marginwidth="5" </frameset>

6 Çalıştırdığınızda aşağıdaki gibi bir görüntü ile karşılaşacaksınız. Dikkat ederseniz tarayıcınızda dört ayrı dikey pencere oluştu ve her birinin içinde de o bilinen Sayfa görüntülenememektedir mesajı yer almaktadır. The result will be as below. There will be created four columns, but this message will be visualised inside of each of the columns: This page cannot be viewed

7 Şimdi tekrar HTML koduna göz atın. Ve yapıyı anlamaya çalışın. İlk satırda bir çerçeve seti tanımlanmış, cols denilerek sütun yapısında olması belirtilmiş. Ardından ardışık dört adet %25 ifadesi ile dört çerçeveden oluşacak bir yapı tanımlanmış. Sonraki satırlarda ise bu dört çerçevenin içini dolduracak olan cer01.htm, cer02.htm, cer03.htm, cer04.htm dosyalarına atıf yapılmış. Bu dosyalar henüz mevcut olmadığından kodu çalıştırdığımızda tarayıcımız dosyaları bulamıyor ve Görüntülenemedi mesajını bu yüzden alıyoruz. Please check the below code out. And try to understand. In the first line, a frameset is defined. Cols means the column frames. There are four consecutive perscentage in the same line. These means, four vertical frames should be created by the browser. In the following lines, it is referenced to the four different HTML files to be filled these four frames (cer01.htm, cer02.htm, cer03.htm, cer04.htm ). Since these four files are absent yet, the browser cannot find them and visualised. <frameset cols="25%,25%,25%,25%"> <frame name="col" src="cer01.htm" marginheight="5" marginwidth="5" <frame name="co2" src="cer02.htm" marginheight="5" marginwidth="5" <frame name="co3" src="cer03.htm" marginheight="5" marginwidth="5" <frame name="co4" src="cer04.htm" marginheight="5" marginwidth="5" </frameset>

8 Şimdi aşağıdaki kodlardan oluşan dört ayrı HTML dosyası oluşturun ve aşağıdaki gibi isimlendirin: This time create the these four HTML files and named as below: cer01.htm cer02.htm cer03.htm cer04.htm <html> <head> <title>çerçeve 1</title> <meta httpequiv="content-type" content="text/html; charset=windows- 1254"> </head> <body bgcolor="#c0c0c0"> <big>< big><big>çer çeve: 1</big></bi g></big> </body> </html> <html> <head> <title>çerçeve 2</title> <meta httpequiv="content-type" content="text/html; charset=windows- 1254"> </head> <body bgcolor="#00ffff "> <big>< big><big>çer çeve: 2</big></bi g></big> </body> </html> <html> <head> <title>çerçeve 3</title> <meta httpequiv="content-type" content="text/html; charset=windows- 1254"> </head> <body bgcolor="#ff0000"> <big>< big><big>çer çeve: 3</big></bi g></big> </body> </html> <html> <head> <title>çerçeve 4</title> <meta httpequiv="content-type" content="text/html; charset=windows- 1254"> </head> <body bgcolor="#00ff00 "> <big>< big><big>çer çeve: 4</big></bi g></big> </body> </html>

9 Başta oluşturduğunuz ana dosyayı ve sonraki dört dosyayı aynı klasörde tutarak ana dosyayı tekrar çalıştırın. Bu kez tarayıcınızda aşağıdaki gibi bir görüntü ile karşılaşacaksınız. Görüldüğü üzer dört çerçevenin her biri içeriğini farklı bir htm dosyasından almış oldu. When the main file created at first is run, this time the below view can be visualised. These four frames receives their content from different HTML files we created.

10 Bu kez ana dosyadaki cols ifadesini rows yapalım. Yeni görünümün dört satırdan oluştuğunu göreceksiniz: Let s change the cols word to the rows. And see the result as below.

11 Şimdi ise sayfamıza, iki dikey, iki de yatay çerçeve koyalım. Ana dosyadaki FRAMESET etiketini şu şekilde değiştirin. <frameset cols="50%,50%" rows="50%,50%"> Bu kez görüntü yandaki olacaktır: This time, let s put two vertical and two horizontal frames to the page. Change the frameset tag in the main file as: <frameset cols="50%,50%" rows="50%,50%"> The view of the page will be visualised as right side:

12 Aşağıdaki kodu deneyelim / Try below code: <FRAMESET COLS="25%,75%"> <FRAME SRC="cer01.htm" NORESIZE SCROLLING="auto"> <FRAMESET ROWS="20%,80%"> <FRAME SRC="cer02.htm" NORESIZE SCROLLING="auto"> <FRAME SRC="cer03.htm" NORESIZE SCROLLING="auto"> </FRAMESET> </FRAMESET>

13 <FRAMESET ROWS="50%,50%" frameborder="no"> <FRAMESET COLS="50%,50%"> <FRAME SRC="cer01.htm" NAME="cer1" frameborder="no" NORESIZE SCROLLING="NO"> <FRAME SRC="cer02.htm" NAME="cer2" frameborder="no" NORESIZE SCROLLING="NO"> </FRAMESET> <FRAME SRC="cer03.htm" NAME="cer3" frameborder="no" NORESIZE SCROLLING="NO"> </FRAMESET>

14 <FRAMESET ROWS="20%,60%,20%"> <FRAME SRC="cer01.htm" NORESIZE SCROLLING="no" NAME="cer01" MARGINWIDTH="0" MARGINHEIGHT="0"> <FRAMESET COLS="20%,80%"> <FRAME SRC="cer02.htm" NORESIZE SCROLLING="auto" NAME="cer02" MARGINWIDTH="0" MARGINHEIGHT="0"> <FRAME SRC="cer03.htm" NORESIZE SCROLLING="auto" NAME="cer03" MARGINWIDTH="0" MARGINHEIGHT="0"> </FRAMESET> <FRAME SRC="cer04.htm" NORESIZE SCROLLING="auto" NAME="cer04" MARGINWIDTH="0" MARGINHEIGHT="0"> </FRAMESET>

Benzer belgeler

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 11 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,