HTML Hyper Text Markup Language (Hareketli-Metin İşaretleme Dili) Kısaca, internet dökümanları oluşturmaya yarayan bir çeşit dildir.
HTML'de Temel Unsurlar HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör. Sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un Notepad'i ile halledebilirsiniz. Piyasada iki tip editör bulunuyor. 1- Metin tabanlı, kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran editörler (HotDog, HomeSite..) 2- WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion,..). NOT: Biz bu derste Windows'un Notepad'i kullanacagız. Bu işlerin nasıl yapıldığını öğrendikçe ilerde siz de görsel editörlere geçebilirsiniz. Çünkü bir yerde istenmedik sonuçlar çıkabilir ve kodlara müdahele etmeniz gerekebilir. Üstelik görsel editörler bazen istenmeyen kodlar ekliyorlar, bu da döküman boyutunun büyümesi demektir.
İlk HTML sayfamızı yapıyoruz Öncelikle çalışmalarınızı saklamak için kullanacağınız boş bir klasör oluşturup uygun bir ad verin, (mesela html_ders olsun). 2. Şimdi de bu klasörü açıp yeni bir metin belgesi oluşturun (sağ fare/Yeni/Metin belgesi). 3. Dosyayı çift tıklayarak açın ve içine şunları yazın: <html> <head> <title> İlk Sayfam </title> </head> <body> Sayfama Hoş geldiniz </body> </html>
. 4. Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet...). Dosya ya htm uzantılı bir isim verin (örnegin, "sayfa1.htm" , tırnaklar dahil) ve Tamam'a basın. Notepad'i kapatın, otomatik olarak sayfa1.htm web sayfanız oluşacaktır. Artık metin dosyasını silebilir ve oluşan yeni sayfa1.htm dosyasını açabilirsiniz. NOT: Budan sonra Web sayfamızda değişiklik yapmak için (Görümüm/Kaynak) ile metin dosyamıza tekrar gidiniz, istediğiniz değişikliği yapınız ve kaydediniz. Daha sonra Web sayfanıza dönün ve (Görümüm/Yenile) ile değişikliği görünüz.
Ve sayfanızın Görüntüsü
Bir şey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve bu kelimeleri küçük < ve büyük > sembolleri arasına yazdık. Bu ifadelere tag (etiket) denir. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işareti / ile tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda.
Burada kullandığımız etiketler ve anlamları şöyle <html>...</html> Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır. <head>...</head> etiketleri arasına sayfa hakkında bilgiler yazıyoruz, title gibi etiketler burada yeralıyor. Buraya yazılanlar sayfada gözükmez. <title>...</title> Title sayfanın başlığını belirtiyor. Burada yazılanlar browser'ın üst tarafında browser adıyla beraber gösteriliyor. <body>...</body> arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu tagler arasında yer alıyor.
HTML'de metin stillerini üç şekilde belirleyebiliriz: Metin Biçimleme HTML'de metin stillerini üç şekilde belirleyebiliriz: Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna in-line (satır içi) biçimlendirme denir. Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme) HTML dosyasının dışında başka bir stil dosyası oluşturarak stil için bu dosyayı kullanma. Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor. Not: Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekliyorlar.
Birinci metoda göre biçimlendirmeyi kotları <center>....</center> Aradaki metinleri sayfaya göre ortalar. (center) <b>....</b> Aradaki metni koyu (bold) yazar. <i>....</i> Aradaki metni eğik (italic) yazar. <u>....</u> Aradaki metni altı çizili (underline) olarak yazar. <hn>....<hn> Başlık (heading) etiketi. h1 en büyük, h6 en küçük. <p>....</p> <p ailgn=left, right, center>....</p> Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında, takip eden metin bir satır boşluk bırakılarak ve satır başına yazılır. Align ile paragraf şekillendirilir.
Örnek <html> <head> <title>Başlık Etiketi</title> </head> <body> <h1> <center> Sayfama Hoşgeldiniz </center> </h1> <p>HTML etiketleri ile, </p> Yazıları <b>koyu </b> <i>italik </i> ve <u>altı çizili </u> olarak yazabiliyorum </body> </html>
<br> ve <hr> etiketleri <br> enter tuşunun görevini görüyor. Metinleri bölmek, yani ikinci satıra atmak için kullanılır HTML'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için Enter tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları ve metinleri tek satırda dahi yazsanız browser açısından fark etmeyecektir eğer <br> kullanılmazsa. <br clear=left, right, all> paragraf şekillendirilir. <nobr> satır başını engeller. <wbr> kelimeyi böler <hr> çizgi çizilir <hr ailgn=left, right, center>....</p> çizgi şekillendirilir <hr size=“4”, widh=“4” > (pixel cinsinden) kalınlık ve boyutu değiştirilir <hr widh=“50%” > sayfa genişliğinin yüzdesi çizer <hr noshade> 3 boyutlu görünmez Not: Dikkat edilirse <br> ve <hr> etiketleri sonlandırılmıyor. Bundan sonra bütün ölçüler pixel cinsinden olacak
Örnek <html> <head> <title>BR etiketi</title> </head> <body> Pazartesi Salı çarşamba<br> ocak<br> şubat<br> mart<br> nisan </body> </html>
Listeler HTML’de üç tip liste hazırlama vardır Sıralı listeler (ordered list) Sırasız listeler (unordered list) Tanımlama listeleri (definition list) NOT: Sıralı listeler rakam veya harf yada her ikisini iç içe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır
1. Sıralı Listeler Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise <li> (list item) etiketini getiriyoruz. Bu etiket sonlandırılmıyor. parametreler ekleyebiliyoruz. Bunlar: <ol type=A, a, I, i, 1> listemizin sayılar,harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi) ilemi başlayacağını (type), hangi rakam/harfle başlayacağını (start) belirtebiliyoruz. <ol Compact > Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.
Örnek (solda yalnız body (gövde) bölümünü verildi) <ol type="1"> <li>Kimya <ol type="a"> <li>İnorganik <li>Analitik </ol> <li>Fizik <ol type="a"> <li>Dinamik <li>Statik </ol> <li>Matematik <ol type="a"> <li>Sayılar <li>Diğer <ol type="i"> <li>Türev <li>İntegral </ol> </ol> </ol> Kimya Organik İnorganik Analitik Fizik Dinamik Statik Matematik Sayılar Diğer Türev İntegral
2. Sırasız Listeler Burada sıralı listelemeye benzer şekilde listeleme yaparken <ul> etiketi kullanılarak maddelerin başına küçük şekiller getirilir. liste maddeleri için kullandığımız <li> etiketi burada da geçerlidir. kullanılabilecek parametreler, <ul type=disk, cirle, square> -- disc (içi dolu daire), -- circle (içi boş daire), -- square (içi dolu kare). <ul Compact > Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip Olmasını sağlıyor.
Örnek (solda yalnız body (gövde) bölümünü verildi) <ul type="disc"> <li>Kimya <ul type="square"> <li>İnorganik <li>Analitik </ul> <li>Fizik <ul type="square"> <li>Dinamik <li>Statik </ul> <li>Matematik <ul type="square"> <li>Sayılar <li>Diğer <ul type="circle"> <li>Türev <li>İntegral </ul> </ul> </ul> Kimya ■ Organik ■ İnorganik ■ Analitik Fizik ■ Dinamik ■ Statik Matematik ■ Sayılar ■ Diğer o Türev o İntegral
Tanımlama Listeleri Benzer şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz. Listenin maddelerini belirtmek için kullandığımız <li> etiketinin yerini burada <dd> (terim için) ve <dt> (tanım için) etiketleri alıyor. Yine parametre olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.
örnek Neler öğrendik? HTML nedir? HTML’nin ne olduğunu halen öğrenemedinizmi, ere ere erer eger ertet er ewrte ertggt regt Listeler Listeleri şimdi size anlatayım wer ewrte ert erwtre erwte ewte ewrte ewrte wert ewrtrew rewt reg rwetr rtrt rtyg rthrt rweg ewrtre <h2> Neler öğrendik?</h2> <dl compact> <dt><h4> HTML nedir?</h4> <dd>HTML’nin HTML’nin ne olduğunu halen öğrenemedinizmi, ere ere erer ger ertet er ewrte ertggt regt <dt><h4> Listeler</h4> <dd>Listeleri şimdi size anlatayım wer ewrte ert erwtre erwte ewte ewrte ewrte wert ewrtrew rewt reg rwetr rtrt rtyg Rthrt rweg ewrtre </dl>
16'lık sayı düzeninde renk kodu girmek Renkler 16'lık sayı düzeninde renk kodu girmek 16'lık sayı sisteminde de toplam 16 rakam var bunlar; 0 1 2 3 4 5 6 7 8 9 A B C D E F [10'un karşılığı A ... 15'in karşılığı F'dir.] Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-blue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir). Buna göre; #000000 siyah, #FF0000 kırmızı, #00FF00 yeşil, #0000FF mavi, #FFFFFF beyaz'dır. Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz. Bütüün renkler ve kodları için: http://muhacirinsitesi1.sitemynet.com/renkkod.html
Renk Kodları #000080=navy(lacivert) #008000=green(yeşil) #00FF00=lime(parlak yeşil) #800000=maroon(vişne çürüğü) #808000=olive(zeytuni yeşil) #C0C0C0=silver(gümüşi gri) #FF00FF=fuchsia(parlak pembe) #FFFFFF=white(beyaz) #000000=black(siyah) #0000FF=blue(mavi) #008080=teal(koyu yeşil) #00FFFF=aqua(turkuaz) #800080=purple(mor) #808080=gray(gri) #FF0000=red(kırmızı) #FFFF00=yellow(sarı)
Fontlar Font etiketinin kullanımı; <font face="..." size="..." color="...">...</font> face = yazıtipinin adı (arial, tahoma, verdana, ...) size= yazının büyüklüğü (1-7 arası) color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk kodları) Bunlara font etiketinin parametreleri diyoruz.
örnek <html> <head> <title>Renkler ve Mevsimler</title> </head> <body> <font face="tahoma" size="5" olor="#008000"> İlkbahar </font> <br> <font face="verdana" size="5" color="#ff0000"> Yaz <font face="arial" size="5" color="#ffff00"> Sonbahar <font face="comic sans ms" size="5“ color="#0000ff"> Kış </font> <br> </body> </html>
Resimler Bu konuda sayfamıza ve artalana nasıl resim ekleyebileceğimizi öğreneceğiz. Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yok. (telif hakları kanunu dışında tabi) Şimdi kedi.gif isimli kediyi sayfamıza yerleştirelim. <img src=“kedi.gif"> klasörümüzün içinde <img src=“resimler\kedi.gif"> klasörümüzün içindeki resimler klasöründe <img src=“kedi.gif" width=“65" height=“95"> Her ne kadar şart olmasa da resmin en ve boy belirtilebilir. <img src=“kedi.gif" hsapace=“?" vspace=“?"> resmin yanlarındaki boşluklar belirlenir. <img src=“kedi.gif" border=“?"> resmin çerçevesinin boyutunu belirlenir. 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. <img src=“kedi.gif" align=top, bottom, middle, left, right> resimlerin nereye yerleşeceği belirtilir. <img src=“kedi.gif" align=texttop, absbottom, absmiddle, baseline> resimlerin yazıların neresine yerleşeceği belirtilir. <img src=“kedi.gif" alt=“van kedisi”> Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer browser'ını sadece metinleri göstermek üzere ayarlamışsa, resim yerine alternatif açıklama (van kedisi) görüntülenecektir. Bu açıklama aynı zamanda kullanıcı fare imlecini resim üzerine getirdiğinde sarı bir çerçeve içinde görüntülenir. NOT: Resimlere sağ tıklayıp (Resmi farklı kaydet../Save image as..) seçeneğiyle harddiskinize kaydedebilirsiniz
Artalanı renklendirme ve resim yerleştirme Sayfamızın artalananını renklendirmemiz için sayfamızın gövdesini belirtmek için yazdığımız <body> etiketini, <body bgcolor=#xxxxxx> şeklinde değiştiriyoruz. Sayfamızın artalananını yazılarının renklerini ayarlama <body bgcolor="white" text="black"> Sayfamızın artalananına resim yerleştirmek için ise <body>etiketini <body background=“kedi.gif"> şeklinde değiştiririz. ( Burada en ve boy ifadesini kullanmamıza gerek yok. Seçtiğimiz resim browser tarafından tüm sayfayı kaplayacak şekilde sayfaya yerleştirilecektir)
örnek <body bgcolor="#666dfe" background="bulut.jpg"> <center> <img src="world.gif" width="360" height="170" alt="harita"> </center>
Örnek
<a href="....">...</a> Bağlantılar Yapmak istediğimiz bağlantıya göre kullanacağımız komut: <a href="....">...</a> <a>...</a> etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir. Sayfamızın bağlantılarının renklerini ayarlayabiliriz <body link="navy" vlink="maroon" alink="red"> link, ziyaret edilmemiş sayfa lingin rengi vlink, ziyaret edilmiş sayfa linginin rengi alink, üzerine kliklenmiş sayfa linginin rengi NOT: Browser htm, txt, jpg, gif, pdf, ps... uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyemez. İkinci tip dosyalarda kullanıcıya dosyayı açmak mı yoksa diske kaydetmek mi istediği sorulacaktır.
Bağlantı Türleri Yeni bir sayfaya bağlanabiliriz <a href=“bizimkoy.htm">Bizim Köy</a> Bir internet adresine bağlanabiliriz (link verebiliriz) <a href="http://www.gop.edu.tr/">GOPÜ</a> Bir dosyaya ulaşabilir <a href=“odev.pdf">Ödevlerim</a> Resimlere bağlantı yapabilir <a href="resim/kedi.jpg"> Kedim </a> Dosya indirmek için bir ftp adresine link verilebilir <a href="ftp://ftp.keyinfo.ofisi.com/"> tıklayın dosyaları indirin </a> Kullanıcının mail programı açmak ve mail'in send to (kime) kısmına verdiğimiz mail adresini otomatik olarak yazdırılabilir <a href="mailto: ncagman@gop.edu.tr”> mail atın </a>
Resimlere bağlantı özelliği kazandırmak Resimlere bağlantı özelliği vermek için resmi yerleştirmek için kullandığımız: <img src=“kedi.gif"> etiketini <a href>...</a> etiketinin arasına alıyoruz. örnek <a href="sayfa1.htm"><img src=“kedi.gif"></a> Burada, kedi.gif tıklanacak resmi, sayfa1.htm resme tıklandığında açılacak sayfayı gösteriyor.
<a href="..." target="...">...</a> Target parametresi Açılacağı pencereyi belirtmek için kullanılan target parametresinin kullanımı : <a href="..." target="...">...</a> target="_blank” Bağlantı yeni bir pencerede açılır. target="_self” Bağlantı aynı pencere içerisinde açılır. target="_top“ Bağlantı aynı pencere içerisinde en üstten itibaren açılır. target="_parent“ Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. target="çerçeve adı“ Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar. ("Çerçeveler" konusunda tekrar değineceğiz.)
Tablolar Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz.
Tablo <html> <head> <title>HTML' de Tablolar...</title> </head> <body> <table cellpadding="4" cellspacing="2" border="1" align="center"> <tr> 'Bu tablomuzun birinci satırı (Başlık satırı) <th> </th> 'Tablomuzun birinci satırındaki ilk hücre <th> </th> 'Tablomuzun birinci satırındaki 2. hücre <th> </th> 'Tablomuzun birinci satırındaki 3. hücre </tr> <tr> <td> </td> </table> </body> </html>
Tablo <html> <head> <title>HTML' de Tablolar...</title> </head> <body> <table cellpadding="4" cellspacing="2" border="1" align="center"> <tr> <th>Dil</th> <th colspan="7">Günler</th> </tr> <td>Türkçe</td> <td>Pazartesi</td> <td>Salı</td> <td>İngilizce</td> <td>Monday</td> <td>Tuesday</td> </table> </body> </html>
<table>...</table> Tablo Yapımı <table> <tr> <td>Hücre1</td> <td>Hücre2</td> </tr> </table> <table> <tr> <td>Hücre1</td> <tr> </tr> <td>Hücre2</td> </tr> Basit bir tablo yapmak için gerekli etiketler <table>...</table> satırları <td> sütunları <tr> etiketi ile oluşturuyoruz. Hücre 1 Hücre 2 Hücre 1 Hücre 2
Tablo Parametreleri <table border="..." cellpading="..." cellspacing="..." align="..." width="..." height="..."> border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar. cellspacing parametresi hücreler arası marjı belirler align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.
<td> etiketi için parametreler <td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> bgcolor parametresi hücreyi renklendirmede kullanılır background parametresi ile hücreye grafik-artalan yerleştirebiliriz width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz.En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır align parametresi hücre içinde yatay hizalama yapar valign parametresi hücre içinde düşey hizalama yapar
Hücreleri Birleştirme <td colspan=".." rowspan=".."> aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz.
Çerçeveler Çerçeveler (frame), HTML'e sonradan eklenmiş bir özelliktir. Bu yüzden eski sürüm browser'lar çerçeve kullanılmış bir sayfayı görüntüleyemezler. (Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri destekliyor). Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir. Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir.
Örnek frame.htm dosyası: <html> <head> <title>Çerçeveler</title> </head> <body> <noframes> <frameset cols="*,*"> <frame name="sol" src="htm1.htm"> <frame name="sag" src="htm2.htm"> </frameset> </noframes> </body> </html> htm1.htm dosyası: <html> <head> </head> <body bgcolor="red"> <font size="7" color="#ffffff">htm1.htm</font> </body> htm2.htm dosyası: <html> <head> </head> <body bgcolor="blue"> <font size="7" color="#ffffff">htm2.htm</font> </body>
FRAME in parametreleri marginwidth="..." marginheight="..." (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler. scrolling=".." (yes, no, auto) Kaydırma çubuklarının durumunu belirler. noresize Pencere boyutlarının sabit olmasını sağlar.
FRAMESET in parametreleri Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, buraya row yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır. cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz, buraya örneğin cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor. Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz. cols=".." ifadesine iki değer (ya da yıldız) verirsek bu iki pencere aç anlamındadır, 3 değer 3 pencere açar. frame name="..." src="..." etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor (bu konuya sonra değineceğiz). src pencerede görüntülenecek html dosyasının yerini gösteriyor.
FRAMESET in diğer parametreleri frameborder="..." (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler. border="..." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler
Örnekler <frameset rows="*,*" cols="*,*"> <frame name="a" src="htm1.htm"> <frame name="b" src="htm2.htm"> <frame name="c" src="htm3.htm"> <frame name="d" src="htm4.htm"> </frameset> <frameset cols="150,*"> <frame name="a" src="htm1.htm"> <frameset rows="100,*"> <frame name="b" src="htm2.htm"> <frame name="c" src="htm3.htm"> </frameset> </frameset>
Örnekler <frameset rows="*,*,*"> <frame name="a" src="htm1.htm"> <frameset cols="*,*"> <frame name="b" src="htm2.htm"> <frame name="c" src="htm3.htm"> </frameset> <frame name="d" src="htm4.htm"> </frameset> <frameset rows="50%,50%"> <frameset cols="*,*"> <frame name="a" src="htm1.htm"> <frame name="b" src="htm2.htm"> </frameset> <frame name="c" src="htm3.htm"> </frameset>