bölüm · 4. bölüm prof. dr. İsmail rakıp karaş [email protected] dersin course page: ...

(Son Güncelleme: 18.02.2019)

HTML4. Bölüm

Prof. Dr. İsmail Rakıp Karaşwww.ismailkaras.com

[email protected]

Dersin Course Page: http://212.ismailkaras.com

Lütfen mobil cihazlarınızın sesini (titreşim de dahil) TAMAMEN KAPATINIZ.

Ç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 stillpreferred since the advantage of multi-page integration in onescreen of a browser. Because of this, this method should be learned.

• It is possible to prepare manyweb pages within the one frame. It can be visualised differentHTML files in one page.

228.ismailkaras.com

Örnek / Exp:

A.htm

B.htm

C.htm

Ana.htm

228.ismailkaras.com

Ç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 similarwith the tables. Theyhave the columnsand rows too.

• To prepare a framedHTML page meanscreating the numberof the frames plusone (+1) HTML files.

228.ismailkaras.com

Ö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" noresize scrolling="no">

<frame name="co2" src="cer02.htm" marginheight="5" marginwidth="5" noresize scrolling="no">



</frameset>

228.ismailkaras.com

Ç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 messagewill be visualised inside of each of the columns: “This page cannot be viewed”

228.ismailkaras.com

Ş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.

<frameset cols="25%,25%,25%,25%">

<frame name="col" src="cer01.htm" marginheight="5" marginwidth="5" noresize scrolling="no">




</frameset>

Please check the below code out. And try tounderstand. In the first line, a frameset is defined. “Cols” means the column frames. Thereare 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 areabsent yet, the browser cannot find them andvisualised.

228.ismailkaras.com

Ş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:

<html>

<head>

<title>Çerçeve 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

</head>

<body bgcolor="#C0C0C0">

<p align="center"><big><big><big><strong>Çerçeve: 1</strong></big></big></big></p>

</body>

</html>

<html>

<head>



</head>

<body

bgcolor="#00FFFF ">


</body>

</html>

<html>

<head>



</head>

<body bgcolor="#FF0000">


</body>

</html>

<html>

<head>



</head>

<body

bgcolor="#00FF00 ">


</body>

</html>

cer01.htm cer02.htm cer03.htm cer04.htm

228.ismailkaras.com

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. Thesefour frames receives their content from different HTML files we created.

228.ismailkaras.com

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.

228.ismailkaras.com

Ş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 verticaland two horizontal frames to thepage. 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:

228.ismailkaras.com

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>

228.ismailkaras.com

<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>

228.ismailkaras.com

<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>

228.ismailkaras.com

bölüm · 4. bölüm prof. dr. İsmail rakıp karaş [email protected] dersin course page: ...

Documents