T.C. BĐLECĐK ÜNĐVERSĐTESĐ. web.ttnet.net.tr/users/telser1/bu/ WEB SAYFALARININ FRONTPAGE 2003 YARDIMIYLA HAZIRLANMASI 2008-BĐLECĐK

Transkript

1 T.C. BĐLECĐK ÜNĐVERSĐTESĐ web.ttnet.net.tr/users/telser1/bu/ (Doküman bu adresten.pdf formatında alınabilir) WEB SAYFALARININ FRONTPAGE 2003 YARDIMIYLA HAZIRLANMASI 2008-BĐLECĐK 1

2 ĐÇĐNDEKĐLER 1. Web Nedir? URL Nedir? HTML Nedir? Microsoft Frontpage 2003 Programı Şablondan Çerçeveli Sayfanın Eklenmesi Web Sayfası Alt Klasörleri Đnternet Sayfalarında Linklerin/Köprülerin Kullanılması Đnternet Adreslerine Köprülerin Eklenmesi Dosyalar Đçin Köprülerin Eklenmesi Adreslerine Köprülerin Eklenmesi Sayfalara Resim Eklenmesi Sayfalara Arkaplan ve Tema Eklenmesi Web Sayfasının Đnternet Ortamına Aktarılması Anadolu Üniversitesindeki Web Ortamına Dosya Transferi Win-Ftp Pro Kullanımı TTNET Web Sitesine Dosya Transferi Đnternet Explorer Ftp Programı Örnek Web Sayfası Görünümü Metin Editörleri Yardımıyla HTML Sayfalarının Hazırlanması Metin Editörü Đle Sayfaların Genel Özellikleri Metin Editörü Đle HTML Dosyasının Oluşturulması Metin Özelliklerini Tanımlamak Amacıyla Kullanılan Etiketler Madde Đmleri ve Listeleme Köprüler Metinlerde Kullanılan Köprüler Resimlerde Kullanılan Köprüler Download Dosyası Đçin Köprü HTML Dosyası Đçin Köprü Đçin Köprü Çoklu Bağlantıları Đçin Köprü

3 Bağlantıları Đçin Konu ve Adresi Otomatik Köprüler Çerçeveler Köprülerin Đstenen Çerçeve Đçinde Görüntülenmesi Đki Sütunlu Çerçeve Đki Satırlı Çerçeve Kullanımı Bir Satır ve Đki Sütunlu Çerçeve Kullanımı Đki Sütun Bir Satırlı Çerçeve Kullanımı Đki Sütun Đki Satırlı Çerçeve Kullanımı Web Nedir? Web ya da WWW (World Wide Web); yazı, resim, grafik, ses, film ve animasyon gibi pek çok faklı yapıdaki verilere etkileşimli bir şekilde ulaşmamızı sağlayan bir çoklu hiper ortam sistemidir. Hiper ortam bir dökümandan başka bir dökümanın çağrılmasına imkan verir. Bu ortamda köprüler/linkler söz konusudur. Köprü/link bir verinin başka bir veriyi çağırabilmesidir. Linkler aynı döküman içinde olabildiği gibi, fiziksel olarak farklı bir ortama da olabilir. Bütün bu farklı yapıdaki veriler uygun bir standart ile bir arada kullanılıp bir web listeleyicisinde görüntülenebilir. Kısaca web yerel ve genel ağlar üzerinden bilgilere ulaşmayı ve onların paylaşımını sağlayan bir metoddur. Web bilgilerin paylaşımını sağlayan protokoller ve araçlar kümesidir. Web genel olarak üç mekanizma üzerine kurulmuştur. - Web'deki kaynakların konumunu gösteren bir isim (örn.url) -Web üzerindeki kaynaklara erişim için protokoller (örn.http) -Kaynaklar arasında kolay gezinmeyi sağlayan hiper metin (örn.html) 2. URL Nedir? HTML dökümanı, resim, video klip, program gibi Web üzerindeki her kaynak URL ya da Universal Resource Identifier olarak adlandırılan bir adrese sahiptir. URL üç bölümden oluşmaktadır. - Kaynağa erişim için kullanılan mekanizmanın adı - Kaynağı bulunduran makinanın adı - Bir yol tanımıyla verilen kaynağın adı gibi bir URL adresi şöyle okunabilir. HTTP protokolünden geçen, makinası üzerinde bulunan /SC/ dizininden erişilebilen Rechtml50 adlı mevcut bir döküman söz konusudur. Bir HTML dökümanında URL; 3

4 - Bir dökümanın ya da kaynağın bir başka döküman ya da kaynağa bağlantısı için, - Bir HTML sayfasına apletler, nesneler ve imajlar yerleştirilebilmesi için - Hazırlanan bir formu gönderme işlemi için, - Bir dış referansı aktarmak için, gibi işlemler amacıyla kullanılır. 3. HTML Nedir? Web sayfaları HTML adı verilen özel bir formatlama dili kullanılarak yapılır. HTML, Hiper Text Markup Language kelimelerinden oluşan özel bir anlamlandırma dilidir. HTML'nin kullanım kolaylığı ve sempatikliği sayesinde web dökümanları kolaylıkla oluşturulabilir ve bu dökümanlar geniş bir okuyucu kitlesine ulaştırılabilir. HTML, bir sayfa yapısı dili olarak tasarlanmamıştır. Paragraflar, listeler gibi bir döküman bölümlerinin yapısal kısımlarını belirtmek için kullanılan özel bir dildir. HTML dökümanlarını sunan programlar (web browser), HTML'yi okunabilir bir formda gösterir.bu organizasyon bir HTML browser 'ındaki formatlanmış görünümün, HTML kodundaki dökümanın yapısal görünümünden ayrılmasına izin verir.pratikte bir dökümanın görünümünü kontrol etmek için HTML'de kullanılabilen pek çok dil yapısı vardır. HTML dökümanlarının tümü ASCII karakterlerden oluşan ve herhangi bir editörde yazılabilen metinlerden oluşmuştur. Unix üzerinde Pico, Vi, Dos altında MSDOS Edit ya da bir Windows Notdefteri gibi herhangi bir metin editörü kullanılarak HTML dökümanları hazırlanabilir. HTML editörleri genel anlamda iki grupta toplanır. Đlk gruba giren editörler HTML komutlarını menüler ya da bazı butonlar yardımıyla döküman içine yazmayı ilgili ortamları kolayca oluşturmayı sağlar. Bu tip editörlerin hemen hepsi kolay web sayfası hazırlama sihirbazları sunarlar. Böylece bazı boşlukları doldurarak basit bir web sayfası kolayca oluşturulabilir. Bu tür editörlerin çoğu bazı temel JavaScript programları/özellikleri ekleme ya da hareketli Gif resimlerini kolayca hazırlamayı sağlayabilirler. Bu editörlere örnek olarak HotDogPro, HomeSite, WebEdit,..gibi prgramlar verilebilir. Đkinci gruba giren editörler ise günümüz Microsoft Word gibi kelime işlemci programları ile yazıldığı anda tüm formatlama özellikleri ile birlikte görüntülenebilen türden "görsel HTML editörleri" dir. Bu tip editörlerin çoğu HTML kodlarına da müdahale edilebilmesine olanak sağlar. Bu programlar da yardım, kolay sayfa hazırlama sihirbazları, web sunucusuna dosya gönderebilme gibi özellikleri sunarlar. Çeşitli Java Script programları/komutları ekleme ya da hareketli Gif resimlerini kolayca hazırlamayı sağlayabilecek özellikler de bu programlarda kullanılabilir. Sık kullanılan web istemcilerinden olan Netscape Navigator bünyesi içinde yer alan "Composer" bu tür editörlere örnek olarak verilebilir. 4

5 Tablo hazırlama, çerçeveler ile çalışma ve form hazırlama gibi yüksek oranda HTML kodlaması gerektiren uygulamalar görsel editörlerde kolaylıkla yapılabilmektedir. Sayfa içine linkler yerleştirilmesi ile birlikte çeşitli formatlama özelliklerini verme bu tip editörlerle kolaydır. Görsel editör özelliği ile birlikte, düz HTML kodlarını değiştirebilmeye imkan veren editörler yaygınlaşmaktadır. Böylece görsel editörlerle yapılamayan bazı işlemler dökümanın HTML kodları üzerinde değişiklikler yapılarak halledilebilmektedir. Çalışmanın devamında web sayfalarının kolaylıkla hazırlanmasına örnek oluşturabilecek Microsoft Frontpage programı hakkında temel bilgiler verilecektir. 4. Microsoft Frontpage 2003 Programı Frontpage 2003 programını çalıştırmak için programlar menüsü altında bulunan Microsoft Office klasörü içindeki Microsoft Office Frontpage 2003 simgesine fare ile tıklanır. Bu program ile hazırlanan *.htm veya *.html web sayfalarının görüntülenmesinde Internet Explorer programı veya Netscape Navigator gibi programlar kullanılır. simgesi ile Frontpage programı çalıştırılabilir. 5

6 Frontpage 2003 çalıştırıldığı zaman görünümü aşağıdaki gibidir. simgesi ile Đnternet Explorer programı çalıştırılır. Đnternet Explorer çalıştırıldığı zaman görünümü aşağıdaki gibidir. 5. Şablondan Çerçeveli Sayfanın Eklenmesi Web sayfaları için kullanışlı olduğunu düşündüğümüz ve kullanımını örneklemek için çerçeveli bir sayfa tasarımı seçilmiştir. Bunun için; Dosya menüsünden Yeni satırına tıklandıktan sonra, 6

7 tıklanır. Sağ penceredeki menü aşağıdaki gibi değişir. Bu menüde ek sayfa şablonlarına Ek sayfa şablonlarına tıklandıktan sonra aşağıdaki gibi gelen menüden ÇERÇEVE SAYFALARI seçilir. Gelen listede Başlık ve içindekiler bulunur ve TAMAM butonuna tıklanır TAMAM butonuna tıklandığında üç çerçeve içeren bir index.htm sayfası ekrana getirilir. Đndex.htm dosyası içindeki çerçevelerin kullanılacağı sayfaların oluşturulması için YENĐ SAYFA yazan butonlara tek tek tıklanılır. 7

8 YENĐ SAYFA butonlarına tıklandığında görünüm aşağıdaki gibi olur ve web sayfası çerçeveli olarak görüntülenmiş olur. Çerçeve tanımlamaları oluşturulduktan sonra Dosya menüsü/farklı kaydete tıklandığında sırasıyla çerçeveler sayfası index.htm(bu isim standarttır), üstteki çerçeve ust.htm, soldaki çerçeve sol.htm sağdaki çerçeve ise sag.htm olarak kaydedilir.***not: Dosya isimlerinde küçük harf kullanılması ve Türkçe karakterler kullanılmaması önerilir.*** 8

9 6. Web Sayfası Alt Klasörleri Zorunlu olmamak şartıyla düzenli olması açısından dosyalar cinslerine göre farklı klasörlere kaydedilebilir. Yukarıda da belirtildiği gibi klasör ve dosya isimlerinde küçük harfler kullanılmalıdır. Çünkü bazı işletim sistemlerinde büyük ve küçük harfler farklı değerlendirildiğinden web sitesinde aksaklıklar yaşanabilir. root (index.htm) (ust.htm) (sol.htm) sag.htm) dokuman resim download english Yukarıdaki örnek klasör yapısı incelenecek olursa gibi bir internet adresini Đnternet Explorer adres çubuğuna yazıp ENTER tuşuna bastığımızda Đnternet Explorer bu internet adresindeki index.htm, index.html veya bazı siteler için geçerli olabilecek default.htm dosyasını arar. Bu dosyalardan biri varsa ilk görüntülenecek sayfa olarak bunlar tercih edilir. Bunlardan hiç birisi bulunamazsa çoğu web sitelerinde dosya listesi ekrana gelir. Đnternet adresindeki en alt klasörü ROOT klasörü olarak adlandırılır. index.htm başlangıç dosyası mutlaka bu klasörde bulunmalıdır. Web sayfasında kullanılan *.htm sayfaları dokumanlar klasörüne, ortak kullanımdaki resimler resim klasörüne, tercihen sıkıştırılmış dosyalar download klasörüne kaydedilebilir. Ders notları için dersler klasörü altında da her derse ait yeni klasörler açılarak kullanılabilir. 7. Đnternet Sayfalarında Linklerin/Köprülerin Kullanılması Microsoft Frontpage 2003 programında web sayfaları hazırlanırken yazıların veya resimlerin üzerine fare ile tıklandığında internet adresleri veya *.htm dosyaları açılabilir. Bu amaçla resim veya yazılar ile ilişkili köprüler oluşturulabilir Đnternet Adreslerine Köprülerin Eklenmesi "Bilecik Üniversitesi" yazılı bir metne köprü eklemek için önce bu metin fare ile seçilir. Sonra farenin sağ tuşuna basılarak aşağıdaki menü ekrana getirilir ve buradan Köprü komutuna tıklanır. Bilecik Üniversitesi 9

10 Komuta tıklandığında aşağıdaki köprü ekle iletişim kutusunda Adres: yazan yere Bilecik Üniversitesi yazısına tıklanıldığında açılacak internet adresi yazılır. Burada yazıldı. Bu internet adresinin gösterileceği yer adı ana olan sağ çerçeve bölgesi olarak seçilmiştir. Bu amaçla Hedef Çerçeve butonu ile ekrana gelen aşağıdaki bölümde sağdaki çerçeve kısmına fare ile tıklanır ve Tamam seçilir.. Bu işlemle sol pencerede Bilecik Üniversitesi yazısına tıklandığında sağ pencerede üniversitenin web sayfası açılır. Tamama tıkladığınızda seçilen metin altı çizili bir metin haline dönüşecektir. Bu görünüm bu metinde bir köprü olduğunu ve fare ile üzerine tıklanıldığında köprüde tanımlanan internet adresinin gösterileceği anlamını taşır. Görünüm açısından metindeki altçizgi formatı istenirse kaldırılabilir Dosyalar Đçin Köprülerin Eklenmesi Bilgisayarınızda herhangi bir klasörde bulunan başka bir html sayfasını köprü ile çağırmak mümkündür. Bu amaçla köprünün tanımlanacağı metin veya resim seçildikten sonra aynı şekilde farenin sağ tuşu ile gelen menüde köprüye tıklanır. Web ortamına kaydedilen bu 10

11 dosyalara aynı klasör yapısındaki web ortamından hatasız olarak çağrılabilir. Örnek olarak aşağıdaki şekilde dokuman klasöründe bulunan bdevre.doc dosyası köprü tarafından çağrılmaktadır. Burada dosya uzantısı htm yerine doc olduğundan doğrudan görüntülenmeyerek bu dosya için kaydet veya aç uyarısı gelecektir, download verecektir. Đnternet adresine köprü eklemede olduğu gibi dosyalar için de hedef çerçeve bölümünden dosyaların görüntüleneceği çerçeve bölümü/görüntülenme şekli seçilebilir Adreslerine Köprülerin Eklenmesi köprüsü eklemek için Köprü ile ilişkilendirilecek kelime veya resim fare ile seçildikten sonra (burada metni) farenin sağ tuşuna tıklandığında köprü veya aşağıdaki köprü düzenle iletişim kutusu ekrana getirilir. Burada e-posta adresi şeklinde yazılmıştır. Bu iletişim kutusunda linkin tanımlanılacağı metin kutusuna; 1. şeklinde bir mail adresi yazılabilir. Böyle bir linke fare ile tıklanıldığında mesaj gönderme kutusu mesaj gönderilecek kişinin adresi yazılı 11

12 olarak ekrana gelir. Linki kullanan kişi SUBJECT ve MESAJ kısımlarını doldurup mesajı gönderebilir. 2. şeklinde olan bir link tanımı ile de SUBJECT kısmının otomatik olarak "DERS=Bilgisayar" olarak hazırlanması sağlanmış olur. 3. şeklinde mail adresleri arasına virgüller konularak mesajın gönderileceği kişilerin tümünün adreslerinin otomatik olarak yazılması sağlanabilir. Linki kullanan kişi mesajın gönderileceği grubun veya sınıfın e- mail adreslerini bilmek veya yazmak zorunda kalmaz Sayfalara Resim Eklenmesi Sayfalara resim eklemek için Ekle menüsünden Resim/Dosyadan komutuna tıklanır ve belirtilen klasördeki resimler seçilir Sayfalara Arkaplan ve Tema Eklenmesi Sayfalara arkaplan/duvarkağıdı eklemek için Biçim menüsü/arkaplan veya sayfada farenin sağ butonuna tıklanarak ekrana gelen menüden Sayfa Özellikleri/Biçimlendirme seçilir. Sadece renk vermek için dialog kutusundaki Renkler/Arkaplan kısmı değiştirilir. Arkaplan resmi/duvarkağıdı eklemek için Arka Plan Resmi işaretlenirve Gözat butonu ile duvarkağıdı dosyası seçilir ve Tamam a basılır. Sayfalara Tema eklenmesi için Biçim menüsünden TEMA ya tıklanır ve sağ tarafa eklenen Tema Seç penceresinden istenilen Tema seçilir. 8. Web Sayfasının Đnternet Ortamına Aktarılması Web sayfalarının internet ortamına aktarılması aşamasında benzer ortamlar için brii dosya transferi örneği olması açısından dosyaların Anadolu Üniversitesi web ortamına aktarılması ve genel dosya transferine örnek olması açısından Win-FTP Pro programının kullanılması gösterilmiştir Anadolu Üniversitesindeki Web Ortamına Dosya Transferi Đnternet Explorer programında adres çubuğuna ftp://tturkyilmaz@home.anadolu.edu.tr/ yazılır. Burada kullanıcı adı (tturkyilmaz) ile karakterinden sonra Anadolu üniversitesinin ftp adresi yazılmıştır. 12

13 Enter tuşuna basıldıktan sonra kullanıcı adını ve şifresini soran bir iletişim kutusu ekrana gelir. Burada üniversiteye ait kullanıcı adı ve şifre yazıldıktan sonra Oturum Aç butonuna tıklanır. Oturum açıldıktan sonra web dosyalarınızı bilgisayarınızdan fare ile kopyala ve yapıştır işlemleri ile server a kaydedebilirsiniz. 13

14 8.2. Win-Ftp Pro Kullanımı Win-ftp pro programı çalıştırılıp connect butonuna tıklanıldığında kullanıcı bilgilerinin ve internet adres ve özelliklerinin bulunduğu bir iletişim kutusu ekrana gelir. Aşağıdaki bilgiler Anadolu Üniversitesi için girilmiştir. Bu iletişim kutusu doldurulduktan sonra Tamam Butonuna tıklamadan önce startup sekmesine tıklanır. Startup sekmesinde "Initial Remote Host Directory" kayıt yapılacak web adresinde bulunan bir klasörü işaret eder. "Initial Local Directory" ise kullanıcının bilgisayarında bulunan bir klasörü ifade eder. Böylece her bağlantıda bu konumları ayarlamak gerekmez. Bu bilgiler tamamlandıktan sonra Tamam butonuna tıklanır. 14

15 Bağlantı yapıldıktan sonra web sitesi dosyaları seçilir ve sağ oka fare ile tıklanır. Dosya Transferi tamamlandıktan sonra Explorer adres çubuğuna adresi yazılarak web sayfasının çalışıp çalışmadığı kontrol edilir. Uyarı: Metin dosyalarının ASCII veya Binary, resim biçiminde olan dosyaların ise Binary seçimi ile transfer edilmesi gerekir. *** Aksaklıklar varsa dosya adlarındaki Türkçe karakterler kaldırılır. Büyük harflerin tümü küçük harflerle değiştirilir. Boşluk karakterleri varsa _ alt çizgi işareti ile değiştirilir. Dosya transferinden sonraki görünüm aşağıdaki gibi olmalıdır. Aynı şekilde TTNET web sitesine dosya transferi de örnek olarak verilmiştir. 9. TTNET Web Sitesine Dosya Transferi Internet Explorer ve FTP programı ile olmak üzere iki şekilde de yapılabilir. 15

16 9.1. Đnternet Explorer Adres çubuğuna yazılarak dosya yükleme ortamına geçilir. Bu yazılımda kullanıcı adı telser1 ve ttnete web yükleme uzantısı şeklindedir. Enter tuşuna basıldığında şifre sorulacak daha sonra dosya yükleme ortamına geçilecektir. Burada dosya ve klasör işlemleri fare ve klavye kullanılarak yapılabilecektir Ftp Programı Ftp programında hostname kısmına web.ttnet.net.tr ve User Id kısmına kullanıcı adı ve şifreler yazılır. Tamam butonuna tıklanarak ttnet web server ına bağlantı yapılmış olur. Diğer dosya transfer kısımları FTP Pro programının örneklenmesi bölümünde verilmiştir. 16

17 10. Örnek Web Sayfası Görünümü 11. Metin Editörleri Yardımıyla HTML Sayfalarının Hazırlanması Kullanıcı bir HTML editörü bulunmadığı zaman veya HTML editöründe yapamadığı işlemler için HTML dosyalarını bir metin editörü ile hazırlayıp düzenleyebilir. Bu amaçla dos editörü, Notepad veya metin kaydı yapılmak şartıyla kelime işlemci programları kullanılabilir. Dosya uzantısı *.htm veya *.html şeklinde olmak zorundadır Metin Editörü Đle Sayfaların Genel Özellikleri <head> <title>anadolu Üniversitesi</title> </head> <body bgcolor=yellow> <img src="amblem.gif" width="400" height="200"> Sayfa başlığı <head>...</head> etiketleri arasına yazılır. Arka alan rengini tanımlamada kullanılır Arka alanda bir resmin görüntülenmesi Metin Editörü Đle HTML Dosyasının Oluşturulması Bir HTML sayfa yapısı aşağıdaki gibidir. <html> <head> <title>anadolu Üniversitesi</title> </head> 17

18 <body> <P> <CENTER> T.C. <BR> ANADOLU ÜNĐVERSĐTESĐ <BR> Öğrenci Bilgileri<BR> </CENTER> </P> <form> Đsim :<BR> <input type=text value=ahmet CAN name=o1> <BR> No:<BR> <input type=text value= name=o2> </form> </body> </html> "<" simgesi ile başlayıp ">" ile biten sözcüklere HTML etiketleri denir. <...> şeklinde açılan bir HTML etiketi </...> şeklinde sonlandırılır. Yukarıdaki HTML sayfasında kullanılan etiketlerin anlamları aşağıdaki gibidir. HTML etiketi ANLAMI <html>...</html> HTML dosyaları bu etiketle başlar ve bu etiketle sonlandırılır <head>...</head> Etiketleri arasına sayfanın genel bilgileri yazılır. <title>...</title> <head>...</head> etiketleri arasında yer alıp HTML sayfasının sayfa başlığının tanımlandığı etikettir. <body>...</body> HTML sayfasının ana bölümü olup sayfa içinde görülen bilgiler bu etiketler arasında yer alır. <P>...</P> Bu etiketler arasına paragraf yazılır <BR> Yeni satır anlamı taşır <CENTER>...</ CENTER > Bu etiketler arasına ortalı format uygulanır. <FORM>...</FORM> Bu etiketler arasına metin kutusu buton gibi form nesneleri tanımlanabilir. Bu nesneler form etiketleri arasında kullanılmadığı zaman görüntülenmez Metin Özelliklerini Tanımlamak Amacıyla Kullanılan Etiketler HTML etiketi <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6> <font size=1...</font> ANLAMI Sayfa içinde kullanılan başlık etiketleridir. H1 için font büyüklüğü 24, H2 için font büyüklüğü 18, H3 için font büyüklüğü 14, H4 için font büyüklüğü 12, H5 için font büyüklüğü 10, H6 için font büyüklüğü 8 şeklinde başlık yazıları tanımlamaya olanak tanır. Size 1 ile 7 arasında değişir Size 1:8, Size 2:10, Size 3:12, Size 4:14, Size 5:18, Size 6:24, Size 7:36 <font face=arial>...</font> <font color=red>...</font> Font tipinin arial olması sağlanır Font renginin tanımlanmasını sağlar. Red, 18

19 yellow, cyan, green, blue, white, pink, magenda ve black gibi renk adları kullanılabilir. <b>...</b> Bu etiketler arasında font koyu olarak kullanılır <i>...</i> Bu etiketler arasında font italik(eğik) olarak kullanılır <u>...</u> Bu etiketler arasında font altı çizgili olarak kullanılır <b><i><u>...</u><i><b> Bu etiketler arasında font koyu, italik ve altı çizgili olarak kullanılır <center>...</center> Paragrafın ortalı yazılmasını sağlar <p align=right>...</p> Paragrafın sağa yaslı yazılmasını sağlar <p align=left>...</p> Paragrafın sola yaslı yazılmasını sağlar <p align=justify>...</p> Paragrafın iki yana yaslı yazılmasını sağlar Madde Đmleri ve Listeleme <ol type=1>...</ol> Rakamlar ile numaralandırılan listeler tanımlama imkanı verir <ol type=i>...</ol> Romen rakamı ile numaralandırılan listeler tanımlama imkanı verir <ol type=i>...</ol> Romen rakamı ile numaralandırılan listeler tanımlama imkanı verir <ol type=a>...</ol> Büyük harflerle sıralanan listeler tanımlama imkanı verir <ol type=a>...</ol> Küçük harflerle sıralanan listeler tanımlama imkanı verir <ul type=a>...</ul> Sıralı liste oluşturmak amacıyla kullanılır <dl>...</dl> Tanım listesi oluşturmada kullanılır <dt> Girinti yok <dd> Girinti var Köprüler Üzerine fare ile tıklanan yazı ve resim gibi elemanların HTML sayfalarına, HTML sayfalarındaki bir konuma veya Đnternet adreslerine bulunan web sitelerine ulaşımı sağlar Metinlerde Kullanılan Köprüler <a href= Anadolu Üniversitesi </a> Resimlerde Kullanılan Köprüler <a href= img src=amblem.gif </a> Download Dosyası Đçin Köprü <a href=ornekler.zip> Download ORNEKLER.ZIP </a> Anadolu Üniversitesi yazısının tanımlanması ve bu metine Anadolu üniversitesi linkinin eklenmesi Amblem.gif resiminin görüntülenerek bu resme Anadolu üniversitesi linkinin eklenmesi Anadolu Üniversitesi yazısının tanımlanması ve bu metine Anadolu üniversitesi linkinin eklenmesi 19

20 HTML Dosyası Đçin Köprü <a href=html1.htm> Htm1 dosyasını aç </a> Htm1 dosyasını aç yazısının tanımlanması ve bu metine lokal html1.htm dosyasının bağlanması Đçin Köprü <a Mesaj Gönder </a> Mesaj Gönder yazısının tanımlanması ve bu metine tıklanıldığında mesajın gönderileceği adresin yazılı olarak mesaj kutusunun açılması Çoklu Bağlantıları Đçin Köprü <a "> Mesaj Gönder </a> Mesaj Gönder yazısının tanımlanması ve bu metine tıklanıldığında mesajın gönderileceği adreslerin yazılı olarak mesaj kutusunun açılması Bağlantıları Đçin Konu ve Adresi Otomatik Köprüler <a = Ders Notları"> mesaj gonder</a> Mesaj Gönder yazısının tanımlanması ve bu metine tıklanıldığında mesajın gönderileceği adresin ve konusunun yazılı olarak mesaj kutusunun açılması Çerçeveler HTML sayfalarında çerçevelerin kullanılabilmesi için en az üç adet HTML sayfası oluşturulması gerekir. Bu sayfalar çerçeve tanımlarının bulunduğu "index.html" ve bu sayfa içinde en az iki adet tanımlanabilen çerçevelere kaynak olarak kullanılan "sol.html" ve "sag.html" sayfaları olabilir. Burada sayfalara verilen adlar herhangi bir ad olarak kullanılabilir. Sayfa adlarında kullanılan isimlerin büyük veya küçük harf olmasına dikkat edilerek tanımlamalar yapılmalıdır. Çerçeve tanımlarının çalışması için bulunduğu HTML dosya içersinde </head> ve <body> etiketleri arasında yer alması gereklidir. <frameset cols=20%,80% borders=2> Çerçeve tanımının yapıldığı sayfanın ilk kısmı %20 ve ikinci kısmı %80 oranlarda olacak şekilde iki sütuna böler. "Border" ile çerçevelerin kalınlıkları tanımlanır. "Border=0" olması durumunda çerçeve çizgileri görüntülenmez. 20

21 <frame src=sol.html name=sol> Đlk çerçevede gösterilecek dosyanın "sol.html" dosyası olması ve adının da "sol" olarak tanımlanması <frame src=sag.html name=sag> Đkinci çerçevede gösterilecek dosyanın "sag.html" dosyası olması ve adının da "sag" olarak tanımlanması </frameset> Çerçeve tanımlarının kapatılması <frameset rows=20%,80% borders=1> Çerçeve tanımlarının satırlar formatında başlatılması Çerçeve tanımları iç içe yazılabilir. Her çerçeve tanımı bulunduğu bölgeyi tanımlandığı oranda iki bölgeye ayırır. Bir çerçeve içinde bulunan bir linkin gösterileceği yer "target=sag" şeklinde çerçevenin adı kullanılarak yapılır. Link çerçeveler yerine yeni bir sayfa açılarak gösterilecekse "target=_blank" şeklinde bir hedef kullanılmalıdır Köprülerin Đstenen Çerçeve Đçinde Görüntülenmesi Bu amaçla "target" kullanılır. <a href=" OSYM</a> href=" adresinde bulunan index.html dosyasını linkin tanımlı olduğu sayfada göster. <a href=" target="sag"> OSYM</a> href=" adresinde bulunan index.html dosyasının adı "sag" olan çerçeve içinde göster <a href=" target="_blank"> href=" OSYM</a> adresinde bulunan index.html dosyasının yeni bir sayfa açarak göster Yukarıdaki link tanımların "sol.html" dosyası içinde bulundurulabilir. Böylece solda bulunan linkler target="sag" tanımlamasından dolayı sağda bulunan adı "sag" olan çerçeve içinde gösterilir Đki Sütunlu Çerçeve Index.html sayfasının içeriği; <HTML> <HEAD> <TITLE>Anadolu Üniversitesi</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME SRC="sol.html" NAME="sol"> <FRAME SRC="sag.html" NAME="sag"> </FRAMESET> <BODY> </BODY> </HTML> Đki sütunlu çerçeve oluşturur sol sag Đki Satırlı Çerçeve Kullanımı Index.html sayfasının içeriği; <HTML> <HEAD> <TITLE>Anadolu Üniversitesi</TITLE> </HEAD> Đki satırlı çerçeve oluşturur 21

22 ust <FRAMESET rows="20%, 80%"> <FRAME SRC="ust.html" NAME="ust"> <FRAME SRC="alt.html" NAME="alt"> </FRAMESET> alt <BODY> </BODY> </HTML> Bir Satır ve Đki Sütunlu Çerçeve Kullanımı Index.html sayfasının içeriği; <HTML> <HEAD> <TITLE>Anadolu Üniversitesi</TITLE> </HEAD> <FRAMESET rows="20%, 80%"> <FRAME SRC="ust.html" NAME="ust"> <FRAMESET cols="20%, 80%"> <FRAME SRC="sol.html" NAME="sol"> <FRAME SRC="sag.html" NAME="sag"> </FRAMESET> </FRAMESET> <BODY> </BODY> </HTML> Bir satır ve iki sütunlu çerçeve oluşturur ust sag sol Đki Sütun Bir Satırlı Çerçeve Kullanımı Index.html sayfasının içeriği; <HTML> <HEAD> <TITLE>Anadolu Üniversitesi</TITLE> </HEAD> <FRAMESET rows="20%, 80%"> <FRAMESET cols="20%, 80%"> <FRAME SRC="sol.html" NAME="sol"> <FRAME SRC="sag.html" NAME="sag"> </FRAMESET> <FRAME SRC="alt.html" NAME="alt"> </FRAMESET> Đki sütun ve bir satırlı çerçeve oluşturur sol sag alt <BODY> </BODY> </HTML> 22

23 Đki Sütun Đki Satırlı Çerçeve Kullanımı Index.html sayfasının içeriği; <HTML> <HEAD> <TITLE>Anadolu Üniversitesi</TITLE> </HEAD> Đki sütunlu iki satırlı çerçeve oluşturur sol sag <FRAMESET rows="20%, 80%"> <FRAMESET cols="20%, 80%"> <FRAME SRC="sol.html" NAME="sol"> <FRAME SRC="sag.html" NAME="sag"> </FRAMESET> <FRAMESET cols="20%, 80%"> <FRAME SRC="ust.html" NAME="ust"> <FRAME SRC="alt.html" NAME="alt"> </FRAMESET> </FRAMESET> <BODY> </BODY> </HTML> ust alt 23