Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

HTML ve Uzaktan E ğ itim Materyali Hazırlama Teknikleri.

Benzer bir sunumlar


... konulu sunumlar: "HTML ve Uzaktan E ğ itim Materyali Hazırlama Teknikleri."— Sunum transkripti:

1 HTML ve Uzaktan E ğ itim Materyali Hazırlama Teknikleri

2 INTERNET

3 Fırat Üniversitesi Enformatik Bölümü 3 INTERNET  Internet a ğ lar arası a ğ demektir.  Web, Internet'e ba ğ lanan tüm bilgisayarların oluşturdu ğ u bir a ğ dır.  Internet, binlerce omurgalar arası ba ğ,on binlerce hizmet sa ğ layıcıdan oluşan bir sistemle milyonlarca kişiye hizmet sunuyor.  İ ki veya daha fazla bilgisayar arasında iletişim kurmak için her şeyden önce bu bilgisayarları ortak bir dil konuşur hale getirmek zorundayız.  Bilgisayarlar arasındaki ortak iletişim diline “protokol” denir.

4 Fırat Üniversitesi Enformatik Bölümü 4 INTERNET  İ nternete ba ğ lı bir bilgisayarın web sitelerinde gezinti yapabilmesi için kullanılan programlara web browser denilir. yaygın olarak kullanılan web browserlar: İ nternet Explorer, Mozilla FireFox, Netscape Navigator, Opera sayfanın bir adresi vardır.  Internet' de her sayfanın bir adresi vardır. Web adresleri, ulaşmak istedi ğ iniz bilginin hangi sunucu üzerinde bulundu ğ unu gösterir.Yani sayfanın web’de tam olarak nerede depolandı ğ ını gösterir.  Web adreslerinde sitenin adı ve sitenin hangi tür kuruma ait oldu ğ unu gösteren kısım de ğ işir. Bazı sitelerin sonun da ülke kısaltmaları vardır.

5 Fırat Üniversitesi Enformatik Bölümü 5 Örnek Web Adresleri Com : Ticari kuruluşlar Org : Ticari olmayan kuruluşlar Edu : Üniversiteler Gov : Devlete ait kurumlar Mil : Askeri kurumlar Net : İ nternetle ilgili kurumlar

6 Web Sitesi

7 Fırat Üniversitesi Enformatik Bölümü 7 Web Sitesi Niçin Oluşturulur?  Dünya çapında tanınmak  Reklam ve Satış  E ğ lence Ve Kültür  Haber  Bilgileri Paylaşmak  İ letişim

8 Fırat Üniversitesi Enformatik Bölümü 8 Web Sitesinin Planlanması  Web Sitesinin amacı belirlenmesi  Sitenin içeri ğ ine karar verilmesi  İ çeri ğ in düzenlenmesi  Sayfa Düzeninin(Tasarımının) Belirlenmesi  Ana Sayfanın Oluşturulması  Bilgilerin Yazılması

9 Fırat Üniversitesi Enformatik Bölümü 9 Web Sitesinin Amacının Belirlenmesi  Web sitesi tasarımındaki ilk adım web sitesiyle neyi ifade etmek istedi ğ imizden emin olmaktır. Web sitesi oluşturmaya başlamadan önce;  Hedef kitle belirlenmeli  Amaç ifade edilebilmeli  Sitenin ana başlıları belirlenmeli  Ana başlıkların içeri ğ i ile ilgili bilgi ve birikime sahip olunmalı  Web sitesine konulacak belge ve grafik kaynakları arşivlenmeli

10 Fırat Üniversitesi Enformatik Bölümü 10 Sitenin İ çeri ğ ine Karar Verilmesi  Sitede neyi tanıtmak istedi ğ imize karar vermeliyiz.  Örnekler  Bir ö ğ retmen ö ğ renci notları ve ders notlarıyla ilgili bilgiler verebilir  Bir ressam yaptı ğ ı resimleri taratıp sayfasında tanıtabilir.  Bir e ğ itim materyalinin internet ortamından yayılabilir.

11 Fırat Üniversitesi Enformatik Bölümü 11 İ çer i ğ i n Düzenlenmesi  Web sitesinin kaç sayfadan oluşaca ğ ına karar vermeli ve içerik bu sayfalar arasında bölüştürülmelidir.  Her sayfaya, içindeki bilgileri yansıtan bir başlık verilmelidir. Örne ğ in : kendim, ailem, hobilerim

12 Fırat Üniversitesi Enformatik Bölümü 12 Uzunlu ğ u Ne Olacak  Bir sayfaya çok bilgi sıkıştırılmamalıdır. Çok uzun ve karmaşık bilgiler insanların dikkatini da ğ ıtacaktır.  Hiçbir sayfa boş yada ba ğ lantılar kırık olmamalıdır.

13 Fırat Üniversitesi Enformatik Bölümü 13 Sayfa Düzeninin Belirlenmesi  Web sitesi önce ka ğ ıt üzerine tasarlanırsa tasarımcı için kolaylık sa ğ lar. Dolayısıyla her sayfa ve bu sayfalarda yer alacak metinler resimlerin nerelere yerleştirilece ğ i önceden belirlenmelidir.

14 Fırat Üniversitesi Enformatik Bölümü 14 Ana Sayfanın Oluşturulması ana sayfa  Hazırlanacak web sitesi içinde nelerin bulunaca ğ ına karar verildikten sonra “ana sayfa” planlanmalıdır. sitede neler bulundu ğ u  Ziyaretçiler, sitede neler bulundu ğ u ilgili bilgileri bu sayfadan edinecektir. ne zaman oluşturuldu ğ ugüncellendi ğ i  Ana sayfa içerisinde sitenin ne zaman oluşturuldu ğ u ve güncellendi ğ i ilgili bilgilerde yer alabilir. tasarımı aynı olmalıdır  Site içerisindeki her sayfanın tasarımı aynı olmalıdır. Site Haritası  Her sitede mutlaka bire “Site Haritası” olmalıdır.

15 Fırat Üniversitesi Enformatik Bölümü 15 Bilgilerin Yazılması  Web sitesi ka ğ ıt üzerinde planlandıktan sonra içinde yer alacak bilgiler bilgisayara girilmeye başlanabilir.  Bunun için kullanılması gereken program, web sitesinin hangi yöntemle oluşturulaca ğ ına göre de ğ işir.  E ğ er HTML kullanılacaksa bilgileri girmek için herhangi bir sözcük işlemci yada web düzenleyicisi kullanılabilir.  Hangi yöntem kullanılırsa kullanılsın sayfaların her biri için ayrı ayrı belgeler oluşturulmalıdır.

16 Fırat Üniversitesi Enformatik Bölümü 16 Tasarıma Başlamak tek bir klasörde  Her bir web sayfasına başlamadan önce tüm veriler tek bir klasörde toplanıp sayfa tek bir klasörde tasarlanmalıdır. Türkçe karakterler  Kayıt yapılırken dosya ve klasör isimlerinde Türkçe karakterler kullanılmamalıdır..htm.html  Oluşturulan sayfalar kaydedilirken mutlaka.htm veya.html uzantılı olarak kaydedilmelidir.  Ana sayfayı oluşturan belgenin ismi index.htm olmalıdır.

17 Uzaktan E ğ itim Materyali Oluşturmak

18 Fırat Üniversitesi Enformatik Bölümü 18 Amaç  E ğ itimi kolaylaştırmak: Zaman ve mekan sınırlaması olan ö ğ rencilere ö ğ renim imkanı sa ğ lamak,  Ö ğ renim maliyetlerini azaltmak: Daha fazla ö ğ renciye hitap ederek, e ğ itim-ö ğ retim maliyetlerinin azaltmak,  Yetişmiş eleman sıkıntısını azaltmak: Alanında ün yapmış araştırmacı ve e ğ itimcilerin daha büyük kitlelere ders vermelerini sa ğ lamak, Türkiye’de genç nüfusun sadece %11.5 ‘i yüksek ö ğ retimden faydalandı ğ ı düşünülürse önem dahada ortaya çıkacaktır.  Özürlülere e ğ itim imkanı sunmak: Klasik yüz-yüze e ğ itimi bedensel özrü nedeniyle alamayan kişilere e ğ itim imkanı sunmak.

19 Fırat Üniversitesi Enformatik Bölümü 19 Uzaktan Eğitim Modelleri Eşzamanlı (senkron) Uzaktan EğitimEşzamansız (asenkron) Uzaktan Eğitim InteraktifPasifInteraktifPasif Ders aynı anda öğrencilere iletilir ve öğrenciler aynı anda soru sorabilir. Ders aynı anda öğrencilere iletilir, ancak öğrenciler ders seansı sırasında soru soramazlar. Önceden hazırlanmış ders notlarına öğrenciler dilediği zaman ve tekrarlı olarak ulaşırlar. Öğrenciler yoluyla soru gönderebilirler. Önceden hazırlanmış ders notlarına öğrenciler dilediği zaman ve tekrarlı olarak ulaşabilir, ancak öğrenciler soru soramazlar.

20 Fırat Üniversitesi Enformatik Bölümü 20 Web Tabanlı E ğ itim  Web-tabanlı bir ders uygulamasının e ğ itim içeri ğ inin, e ğ itimi alacak kişilerin ihtiyaçlarını ve beklentilerini karşılayabilmesi ve bu do ğ rultuda hedeflenen amaca yönelik hizmet etmesi için 5 temel bileşene sahip olması gerekmektedir.

21 Fırat Üniversitesi Enformatik Bölümü 21 Web Tabanlı E ğ itim  İ yi tanımlanmış e ğ itim hedeflerinden (Learning Objectives),  E ğ itim içeri ğ ini oluşturan modüler içerik parçacıklarından (Learning Objects),  Belirlenen hedeflere ulaşmak için kullanılan etkileşimlerden (Interactions),  Hedeflere ulaşılıp ulaşılmadı ğ ını denetleyecek de ğ erlendirmelerden (Assesments),  Gezinimlerden (Navigations) oluşmaktadır.

22 HTML

23 Fırat Üniversitesi Enformatik Bölümü 23 HTML Nedir?  HTML : Hyper Text Markup Language  ( Hareketli-Metin İ şaretleme Dili )  HTML basitçe, browserlarla görebilece ğ imiz, internet dokümanları oluşturmaya yarayan bir çeşit dildir.  Dosya uzantısı.htm veya.html olmalıdır.  HTML, programlama dilleri (pascal, basic,..) gibi bir programlama mantı ğ ı taşımadı ğ ından ö ğ renilmesi gayet kolay bir dildir.  Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandı ğ ımız komutlar dizisi diyebiliriz.

24 Fırat Üniversitesi Enformatik Bölümü 24 HTML' DE Temel Unsurlar  HTML’ DE her şey metin tabanlı ve bir HTML dokümanı oluşturmak için ihtiyacınız olan şey bir editördür. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un Notepad'i ile dahi halledebilirsiniz.  Piyasada iki tip editör bulunuyor :  Birisi metin tabanlı,kod yazmayı gerektiren fakat bunun yanı sıra rutin bazı işlemleri kolaylaştıran editörler (HomeSite, HotDog...)  Di ğ eri 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...).

25 HTTP Protokolü

26 Fırat Üniversitesi Enformatik Bölümü 26 HTTP ve TCP/IP ortak bir protokole  Internet üzerinde verilerin aktarılması için ortak bir protokole ihtiyaç vardır.  Bu protokol HTTP ve TCP/IP dir.

27 Fırat Üniversitesi Enformatik Bölümü 27 HTTP ve TCP/IP  Bir web sayfasının ziyaretçinin ekranına kadar kat etti ğ i yolda çeşitli protokoller (kurallar) vardır. Bunların başında bir bilgisayar a ğ ı olan Internet’in ulaştırma kuralları HTTP (HyperText Transfer Protocol – Hareketli Metin Aktarma Kuralları) geliyor.

28 Fırat Üniversitesi Enformatik Bölümü 28 Web sayfaları tasarlarken dikkat edece ğ imiz unsular  Ziyaretçinin kullandı ğ ı tarayıcı yazılımı (Internet Explorer, Netscape Navigator) olmalıdır.

29 Fırat Üniversitesi Enformatik Bölümü 29 HTTP ve TCP/IP  Web sayfalarını içeren bilgisayar, Web ilişkisinde Server (Sunucu) olarak adlandırılır.  Ziyaretçinin bilgisayarı ise Client ( İ stemci) olarak adlandırlır.  Sunucu bilgisayarlarla, istemci bilgisayarlar arasındaki ilişkiyi (Server- Client ilişkisi) düzenleyen kurallara TCP/IP (Transmission Control Protocol / Internet Protocol – Aktarma Denetim Kuralları / Internet Kuralları) adı verilir.

30 Fırat Üniversitesi Enformatik Bölümü 30 HTTP ve TCP/IP  Internet kurallarının IP bölümü, iki bilgisayar arasındaki ba ğ lantının do ğ ru kanallardan kurulmasını, kesildi ğ inde yeniden kurulmasını sa ğ lar. TCP bölümü ise kurulan ba ğ lantı sayesinde gelen bilginin do ğ ru anlaşılmasını sa ğ lar.  Internet’te aranan kaynak URL (Universal Resource Locator – Evrensel Kaynak Yolu Belirleyici) denilen adres sistemini kullanarak bulunur.

31 HTML

32 Fırat Üniversitesi Enformatik Bölümü 32 İ lk sayfam  Notepad'i açın ve şunları yazın:  Dosyayı “sayfa1.htm” olarak kaydedin.

33 Fırat Üniversitesi Enformatik Bölümü 33 İ lk sayfam  Sayfa1.htm dosyasını açtı ğ ınızda varsayılan browserınız (Internet Explorer, Netscape Navigator gibi) tarafından görüntülenecektir.

34 Fırat Üniversitesi Enformatik Bölümü 34 İ lk sayfam  Şimdi de bu belgeyi nasıl oluşturdu ğ umuzu birlikte inceleyelim :  Bir şey dikkatinizi çekti mi? İ ngilizce bir takım kelimeler var ve bu kelimeleri küçük sembolleri arasına yazdık. Bu ifadelere tag (etiket) deniyor. 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şaretiyle 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.

35 Fırat Üniversitesi Enformatik Bölümü 35 İ lk sayfam  Burada kullandı ğ ımız etiketler ve anlamları şöyle:

36 Fırat Üniversitesi Enformatik Bölümü 36 İ lk sayfam  Hazırladı ğ ımız sayfada dikkat ederseniz sadece temel etiketleri kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık. Bu yüzden.... arasına yazdı ğ ımız Sayfama Hoş geldiniz yazısı browser'ın varsayılan metin ayarlarıyla gösteriliyor.  İ şin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoş geldiniz yazıp kaydetsek ve browser'da böyle görüntülesek de aynı neticeyi elde edecektik.

37 Metin Biçimleme

38 Fırat Üniversitesi Enformatik Bölümü 38 Metin Biçimleme  Bu bölümde ö ğ renece ğ imiz etiketler :  Başlık etiketleri:,...  Paragraf etiketi:...  Ortalama:...  Di ğ er etiketler:...,...,...

39 Fırat Üniversitesi Enformatik Bölümü 39 Metin Biçimleme  HTML'de metin stillerini üç şekilde belirleyebiliriz: etiketle  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. stillere  Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. stil dosyası  HTML dosyasının dışında başka bir stil dosyası oluşturarak stil için bu dosyayı kullanma. Kısaca CSS. Bu teknik bize örne ğ in yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor.

40 Fırat Üniversitesi Enformatik Bölümü 40 Metin Biçimleme  Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metotlarda 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.  Burada konumuz birinci metoda göre biçimlendirmeyi ö ğ renmek

41 Fırat Üniversitesi Enformatik Bölümü 41 Metin Biçimleme  Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şu kodları yazıyoruz :

42 Fırat Üniversitesi Enformatik Bölümü 42 Metin Biçimleme  Dosyayı “sayfa2.htm” olarak kaydedin.  Kaydetti ğ imiz dosyayı açtı ğ ımızda :

43 Fırat Üniversitesi Enformatik Bölümü 43 Metin Biçimleme  Sayfanın işleyişine baktı ğ ımızda, önce her zaman yapmamız gerekti ğ i gibi,, etiketlerini yerleştirdik.  Sayfa başlı ğ ı olarak "Başlık Etiketleri"ni seçtik ve sayfanın gövde kısmına istedi ğ imiz metinleri yazdık ve bu metinleri 'den 'ya kadar olan biçimlendirme etiketlerinin arasına aldık.  Browser metin biçimleme etiketleri olan... etiketleri arasındaki kelimelere belirli büyüklükler verdi.

44 Fırat Üniversitesi Enformatik Bölümü 44 Metin Biçimleme  Di ğ er etiketleri toplu olarak kullanarak yeni bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun:

45 Fırat Üniversitesi Enformatik Bölümü 45 Metin Biçimleme  Dosyayı “sayfa3.htm” olarak kaydedin.  Kaydetti ğ imiz dosyayı açtı ğ ımızda :

46 Fırat Üniversitesi Enformatik Bölümü 46 Metin Biçimleme  Etiketleri kullanma mantı ğ ını anladınız herhalde. Biçimlendirmek istedi ğ imiz metnin başına ilgili etiketi yazıyoruz ve metnin sonunda da ilgili etiketi sonlandırıyoruz.  Etiket biz sonlandırmadı ğ ımız müddetçe etkisini göstermeye devam ediyor.

47 Fırat Üniversitesi Enformatik Bölümü 47 Metin Biçimleme  Yeni ö ğ rendi ğ imiz kodlara bir göz atalım:

48 Fırat Üniversitesi Enformatik Bölümü 48 Metin Biçimleme Başladı ğ ınız etiketi sonlandırmayı sakın unutmayın !  Bir html dökümanını açtı ğ ımızda ve ekran üzerinde farenin sa ğ tuşuna tıklayıp, kayna ğ ı görüntüle / view source 'u seçti ğ imizde Internet Explorer için Notepad, Netscape için kendi Source Viewer'ı açılacak ve bize o sayfanın kodunu gösterecektir.

49 Fırat Üniversitesi Enformatik Bölümü 49 Metin Biçimleme

50 Fontlar

51 Fırat Üniversitesi Enformatik Bölümü 51 Fontlar  Font etiketinin kullanımı : ...  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 de ğ eri)  Bunlara font etiketinin parametreleri diyoruz.

52 Fırat Üniversitesi Enformatik Bölümü 52 Fontlar  etiketinin yanısıra ö ğ renece ğ imiz bir di ğ er etiket etiketi. Önce bu etiketin kullanımını görece ğ iz. etiketi bir bakıma enter tuşunun görevini görüyor.  Bunu biraz açıklayalım; 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 farketmeyecektir. Bu yüzden metinleri bölmek, yani ikinci satıra atmak için etiketini kullanıyoruz.  İ stisnai etiketlerden birisi bu, etiketi sonlandırılmıyor.

53 Fırat Üniversitesi Enformatik Bölümü 53 Fontlar  Buna bir örnek verelim :

54 Fırat Üniversitesi Enformatik Bölümü 54 Fontlar  Yukarıdaki örne ğ imizde "pazartesi, salı ve çarşamba"yı yazarken Enter tuşu ile bir alt satıra geçmemize ra ğ men browser bunu gözönüne almayarak tüm metni bir satırda yazdı.  Fakat ikinci sefer ay adlarını tek bir satıra yazdı ğ ımız halde bu kez browser aradaki etiketine bakarak bir sonraki metni satır başına aldı. Buradan da anlaşıldı ğ ı üzere Enter tuşu etkisini etiketiyle veriyoruz.  Bu etiketin bir özelli ğ i de sonlandırılmaması.

55 Fırat Üniversitesi Enformatik Bölümü 55 Fontlar  E ğ er kullanmak istedi ğ iniz font bilgisayarınızda yüklü de ğ ilse font etiketi ile biçimlemek istedi ğ iniz metin browser'ın varsayılan fontu ile gösterilecektir.  Bu yüzden önce sisteminizde yüklü olan fontları inceleyin (Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan yazıtiplerini açarak inceleyebilir ve be ğ endiklerinizi kullanabilirsiniz.

56 Fırat Üniversitesi Enformatik Bölümü 56 Fontlar  Şimdi font etiketinin kullanımını bir örnekle inceleyelim :

57 Fırat Üniversitesi Enformatik Bölümü 57 Fontlar  Her zamankinden farklı olarak ve ilk defa sayfamızda renk kullandık.  Örnekte de gördü ğ ünüz gibi bu işi renk kodlarıyla yaptık.

58 Fırat Üniversitesi Enformatik Bölümü 58 Fontlar  Aslında renkli yazmanın bir yolu daha var o da renk kodu yerine rengin ingilizce adını yazmak (color="red" gibi).  Kırmızı-red  Mavi-blue  Siyah-black  Sarı-yellow  Lacivert-navy  Yeşil-green

59 Listeler

60 Fırat Üniversitesi Enformatik Bölümü 60 Listeler  HTML bize üç tip liste hazırlama imkanı veriyor.  Bunlar :  Sıralı listeler (ordered list)  Sırasız listeler (unordered list)  Tanımlama listeleri (definition list)  Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı sa ğ lar.  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.

61 Fırat Üniversitesi Enformatik Bölümü 61 Sıralı Listeler  Liste içine alınacak metinler... etiketleri arasına alınarak yazılır. Bu etiketler listenin başladı ğ ını ve bitti ğ ini belirtir.  Listenin maddelerinin başına ise (list item) etiketini getiriyoruz. Bu etikette tıpkı etiketi gibi sonlandırılmıyor.  etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayaca ğ ını (type) yada hangi rakam/harfle başlayaca ğ ını (start) belirtebiliyoruz.

62 Fırat Üniversitesi Enformatik Bölümü 62 Sıralı Listeler

63 Fırat Üniversitesi Enformatik Bölümü 63 Sıralı Listeler  Listeleri buradaki örnekte oldu ğ u gibi iç içe hazırlamak ta mümkün.  Dikkat edece ğ imiz nokta, işe etiketi ile başlayıp liste maddelerinin her birisinin başına etiketini getirmek ve listelemeyi bitirmek istedi ğ imiz yerde etiketini yazmak.  Liste içinde yeni bir liste oluşturmak istedi ğ imizde listelenecek maddeden sonra tekrar etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz.  Type parametresinde kullanabilece ğ imiz de ğ erler şunlar olabilir; sayılar,harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi)

64 Fırat Üniversitesi Enformatik Bölümü 64 Sırasız Listeler  Bu tip listede de mantık aynı.  Fark, listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar,kareler kullanabilmemiz.  etiketi yerine etiketini kullanıyoruz, liste maddeleri için kullandı ğ ımız etiketi burada da geçerli.  için kullanılabilecek parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare).

65 Fırat Üniversitesi Enformatik Bölümü 65 Sırasız Listeler

66 Fırat Üniversitesi Enformatik Bölümü 66 Tanımlama Listeler  Bu listelemede kullanılan etiketler şöyle;...,,  Listenin maddelerini belirtmek için kullandı ğ ımız etiketinin yerini burada ve etiketleri alıyor.  Aynı şekilde... veya... etiketleri arasına aldı ğ ımız listeyi bu sefer... arasına yazıyoruz.

67 Fırat Üniversitesi Enformatik Bölümü 67 Tanımlama Listeler

68 Fırat Üniversitesi Enformatik Bölümü 68 Tanımlama Listeler  Yazdı ğ ımız kodu browser’dan açtı ğ ımızda :

69 Renkler

70 Fırat Üniversitesi Enformatik Bölümü 70 Renkler  Metin renklendirmeyi yüzeysel olarak fontlar konusunda ö ğ rendik. Şimdi daha ayıntılı olarak ve bu işin mantı ğ ına inerek yeniden ele alaca ğ ız. Aynı zamanda sayfamıza artalan rengi vermeyi ö ğ renece ğ iz.  Bu bölümde ö ğ renece ğ imiz konular:  Renk kodları  Artalanı renklendirmek

71 Fırat Üniversitesi Enformatik Bölümü 71 Renk Kodları  Fontlar konusunda, metnin rengini belirlerken etiketini kullanmıştık ve color komutunun karşısına rengin ingilizce karşılı ğ ını yazabiliriz demiştik.  Fakat bunun daha karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu girmek. Önce sayı düzenleri nedir nasıl olur ona bakalım.  Günlük hayatımızda kullandı ğ ımız sayı sistemine 10'luk sayı sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan oluşan sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanısıra di ğ er sayı sistemleri de vardır.  Bunlardan bilgisayar alanında kullanılan iki tanesi ikili (binary) ve onaltılı (hexadecimal) sayı sistemleridir.

72 Fırat Üniversitesi Enformatik Bölümü 72 Renk Kodları  İ kili sayı sistemi nasıl olur? Bildi ğ iniz gibi günlük hayatta kullandı ğ ımız 10'lu sayı sisteminde 0-9 arası toplam 10 rakam vardır.  Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var (bunlar 0 ve 1) ve tüm sayılar bu iki rakamı kullanarak ifade edilebilir, nasıl mı? İ şte burada işin içine matematik giriyor. Kısa ve öz olarak belirtmek gerekirse 10'luk düzendeki bir sayıyı ikilik düzene çevirmek için o sayı devamlı olarak 2'ye bölünür ve kalanlar soldan sa ğ a do ğ ru yanyana yazılır.

73 Fırat Üniversitesi Enformatik Bölümü 73 Renk Kodları  Gelelim asıl konumuz olan 16'lık sayı sistemine. Bu sayı sisteminde de toplam 16 rakam var bunlar :  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).

74 Fırat Üniversitesi Enformatik Bölümü 74 Renk Kodları  Buna göre :  # siyah  #FF0000 kırmızı  #00FF00 yeşil  #0000FF mavi  #FFFFFF beyaz.  Di ğ er renkleri sayıları de ğ iştirerek kendiniz deneyebilirsiniz.

75 Fırat Üniversitesi Enformatik Bölümü 75 Artalanı Renklendirmek  Bu renklerle yalnızca metinleri de ğ il sayfamızın artalananını da renklendirebiliriz.  Bunun için etiketini kullanıyoruz. Daha do ğ rusu sayfamızın gövdesini belirtmek için yazdı ğ ımız etiketini, şeklinde de ğ iştiriyoruz. Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !

76 Fırat Üniversitesi Enformatik Bölümü 76 Artalanı Renklendirmek

77 Fırat Üniversitesi Enformatik Bölümü 77 Artalanı Renklendirmek  Yazdı ğ ımız kodu browser’dan açtı ğ ımızda :

78 Resimler

79 Fırat Üniversitesi Enformatik Bölümü 79 Resimler  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)  Resim ekleme işi gayet kolay. Yapmamız gereken browser'a sayfaya koyaca ğ ı resmin nerede oldu ğ unu göstermekten ibaret. Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunlu ğ unu belirtmeniz sizin faydanıza olacaktır. Kullanaca ğ ımız etiket şu şekilde olacak;   Burada x resmin enini y ise boyunu belirtiyor. Bu bilgileri, resmi herhangi bir grafik editörüyle açarak ö ğ renebilirsiniz.

80 Fırat Üniversitesi Enformatik Bölümü 80 Resimler  Örne ğ in bu sevimli kediyi sayfamıza ekleyelim, peki işte size bir soru: bu resmin nerede oldu ğ unu browser'a nasıl izah ederiz?  Diyelim ki resmimizin adı kedi.gif eni 65, boyu da 91 piksel, e ğ er bu resim html sayfamızla aynı dizinde duruyorsa sorun yok, kod aynen şu şekilde olmalı: 

81 Fırat Üniversitesi Enformatik Bölümü 81 Resimler  Fakat siz diyorsunuz ki; benim birden çok eklemek istedi ğ im resmim var ve bunları resim adlı bir alt klasörde topladım.  Bu durumda browser'ınız o an çalışan html dosyasının bulundu ğ u klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanaca ğ ız :  Bölü işaretinin yönüne dikkat edin. Bu Windows'ta ya da Dos'ta dizinler için kullandı ğ ımız ters bölü işaretinin tersi, yani normal bölü işareti. HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır. Ziyaret etti ğ iniz Internet adreslerini hatırlayın.

82 Fırat Üniversitesi Enformatik Bölümü 82 Resimler  Alt dizine ulaşabildik. Fakat üst dizinlere nasıl ulaşaca ğ ız? O da kolay. Bu seferde html dosyamızı bir klasör oluşturup o klasörün içine koyalım, mesela klasörün adı da html olsun. Kedicik bulundu ğ u resim klasöründe kalsın. Son durum şöyle olacak;  c:\html_ders\html\deneme.htm yolunda html dosyamız,  c:\html_ders\resim\kedi.gif yolunda resim var.  İ zlememiz gereken yol şöyle: browser deneme.htm dosyasının bulundu ğ u klasörü kök dizin kabul etti. Önce bir üst dizine çıkmalıyız ardından resim dizinine girmeliyiz. Üst dizine çıkmayı../ ifadesiyle belirtiyoruz. 

83 Fırat Üniversitesi Enformatik Bölümü 83 Resimler   Bu şekilde ardarda../ ifadesiyle istedi ğ imiz kadar üst dizine geçebiliriz.  E ğ er iki üste geçeceksek../../ ifadesi işimizi görecektir.

84 Fırat Üniversitesi Enformatik Bölümü 84 Resmi Hizalama  Resim artık sayfamızda, fakat daima hep solda duruyor. Bir hizalama (align) komutuyla resmi sa ğ a (right), ortaya (center) ya da sola (left) alabiliriz.  Bir metinle kullandı ğ ınızda ise buradaki gibi bir sonuç alabilirsiniz, hizalama komutu resmi bu sefer metni gözönüne alarak hizalayacaktır. 

85 Fırat Üniversitesi Enformatik Bölümü 85 Artalana Resim Koyalım  Artalanı renklendirmeyi ö ğ renmiştik: ifadesiyle bu işi kolayca yapıyorduk. Bu ifadeyi şu şekilde yazarsak resmimiz artalana döşenecektir.   background ifadesinin karşısına yukarıda anlattı ğ ımız kurallar çerçevesinde istedi ğ imiz resmi koyabiliriz. Fakat bu sefer en ve boy ifadesini kullanmamıza gerek yok. Seçti ğ imiz resim browser tarafından tüm sayfayı kaplayacak şekilde sayfaya yerleştirilecektir.

86 Fırat Üniversitesi Enformatik Bölümü 86 Resme alternatif metin eklemek  Resimlere alternatif olarak metin yazılabilir. Ziyaretçi e ğ er browser'ını sadece metinleri göstermek üzere ayarlamışsa, resim yerine alternatif açıklama görüntülenecektir.  alt="..." parametresiyle açıklama ekliyoruz, bu açıklama aynı zamanda kullanıcı fare imlecini resim üzerine getirdi ğ inde sarı bir çerçeve içinde görüntülenir. 

87 Fırat Üniversitesi Enformatik Bölümü 87 Resimler  Gökyüzünü artalana koyalım, dünyayı da ortalanacak şekilde sayfaya yerleştirelim.

88 Ba ğ lantılar

89 Fırat Üniversitesi Enformatik Bölümü 89 Ba ğ lantılar ...  Geldik HTML'de en önemli unsurlardan birisi olan ba ğ lantılara.  Ba ğ lantılar sayesinde hazırladı ğ ımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir tıklama bizi istedi ğ imiz yere götürecektir.  HTML'de metinlere ve resimlere ba ğ lantı kazandırmak mümkündür.  Ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri,.. bunların hepsine ba ğ lantı kazandırmak mümkün.  Hatta yapaca ğ ımız ba ğ lantı sayfa içinde, yani dahili bir ba ğ lantı da olabilir.

90 Fırat Üniversitesi Enformatik Bölümü 90 Ba ğ lantılar  Şimdi yapmak istedi ğ imiz ba ğ lantıya göre kullanaca ğ ımız komutları inceleyim : ...  Bu komutla oluşturdu ğ umuz ba ğ lantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sundu ğ unuz bir dosyaya ulaşmasını sa ğ layabilirsiniz. Yani bu tanıma göre bildi ğ imiz ba ğ lantıları oluşturmak mümkün. ... 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.

91 Fırat Üniversitesi Enformatik Bölümü 91 Ba ğ lantılar  buraya tıklandı ğ ında meyve resmi açılacak  Birinci örnekte "buraya tıklandı ğ ında meyve resmi açılacak" yazısına ba ğ lantı özelli ğ i kazandırdı ğ ımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdi ğ inde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladı ğ ında browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve.gif resmini açacaktır. Tabii ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır.

92 Fırat Üniversitesi Enformatik Bölümü 92 Ba ğ lantılar  midi dosyalarını çekmek için tıklayın  İ kinci örnekte aynı şekilde "sıkıştırılmış midi dosyalarını çekmek için tıklayın" yazısına ba ğ lantı özelli ğ i kazandırdık. Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte meyve.gif'e tıklandı ğ ında browser resmi açacaktır fakat bu örnekte browser kullanıcıya midi.zip dosyasını açmak mı yoksa diske kaydetmek mi istedi ğ ini soran bir pencere açar. Bunun sebebi browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyememesidir.

93 Fırat Üniversitesi Enformatik Bölümü 93 Ba ğ lantılar  2.sayfaya gitmek için tıklayın  Yine üçüncü örne ğ imizde oluşturdu ğ umuz linke tıklandı ğ ında aynı dizinde bulunan sayfa isimli başka bir html dökümanı açılacaktır.  kedi resmi işte çok güzel bir karanfil otomobil resimleri  Bu 3 örnekte altdizinlere/üstdizinlere verilen ba ğ lantıya örnekler görüyorsunuz, resimler konusunda gördü ğ ümüz kurallar burada da geçerli.

94 Fırat Üniversitesi Enformatik Bölümü 94 Ba ğ lantılar  tıklayın sitemi ziyaret edin  İ nternet adresine giden link örne ğ i.  tıklayın dosyaları indirin  Bu ise bir ftp adresine verilen link örne ğ i.  mail atın  Buradaki linke tıklandı ğ ında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdi ğ imiz mail adresi otomatik olarak yazılacaktır.

95 Fırat Üniversitesi Enformatik Bölümü 95 Ba ğ lantılar ... ve...  Sayfa içi (dahili) linkleri bu komutu kullanarak hazırlayabiliriz.  Örne ğ in sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istedi ğ i başlı ğ a tıkladı ğ ında ilgili konu açılsın.  Böyle bir sayfa hazırlamak için yapaca ğ ımız şeyler : 1 - "tıklandı ğ ında" açılacak konuyu işaretlemek browser'a, hazırlayaca ğ ımız menüye "tıklandı ğ ında" bu işaretli konuya gitmesini bildirmek....

96 Mustafa ULAŞ Fırat Üniversitesi Enformatik Bölümü 96 Ba ğ lantılar

97 Fırat Üniversitesi Enformatik Bölümü 97 Ba ğ lantılar  Diyelim ki kullanıcı sayfadaki bir linki tıkladı ğ ında, başka bir sayfanın belli bir bölümünün açılmasını istiyoruz.  Bunun için linke tıklandı ğ ında açılacak yazıyı... ile işaretledikten sonra ba ğ lantı etiketini şu şekilde yazıyoruz:

98 Fırat Üniversitesi Enformatik Bölümü 98 Resimlere ba ğ lantı özelli ğ i kazandırmak  Bunun için resmi yerleştirmek için kullandı ğ ımız: etiketini... etiketinin arasına alıyoruz.  resim.gif tıklanacak resmi, sayfa1.htm resme tıklandı ğ ında açılacak sayfayı gösteriyor.  Border komutu ise resimde ba ğ lantı özelli ğ i oldu ğ unu belirten çerçeveyi kontrol ediyor, 0 (sıfır) de ğ eri bu çerçeveyi tamamen yok eder. Bu komutu de ğ işik sayılarla deneyebilirsiniz.

99 Fırat Üniversitesi Enformatik Bölümü 99 Target parametresi  Ba ğ lantının açılaca ğ ı pencereyi belirtmek için target parametresi kullanılır. ...

100 Tablolar

101 Fırat Üniversitesi Enformatik Bölümü 101 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.

102 Fırat Üniversitesi Enformatik Bölümü 102 Tablolar

103 Fırat Üniversitesi Enformatik Bölümü 103 Tablolar  Tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz (thead). Her sütun için de kendi başlı ğ ını oluşturmak mümkündür. Tablonun sona erdi ğ i satırdan sonraki satıra açıklama koyabiliriz (caption). Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:

104 Fırat Üniversitesi Enformatik Bölümü 104 Tablolar  Şimdi basit bir tablo yapmak için gerekli etiketleri ö ğ renelim. Öncelikle... etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. etiketi ile satırları, etiketi ile de sütunları oluşturuyoruz.

105 Fırat Üniversitesi Enformatik Bölümü 105 Tablolar

106 Fırat Üniversitesi Enformatik Bölümü 106 Tabloda başlık ve gövde  Tablolar da HTML sayfasında oldu ğ u gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlı ğ ı gövdeyi etiketleri arasına yazarız. etiketi ile ikinci bir açıklama vermek mümkündür.  Sütun başlıklarına gelince, her bir başlık etiketi ile belirtilir ve bunlar etiketinde oldu ğ u gibi... arasına yazılır.  Tabloda satır ve sütunları belirten ve etiketleri... arasına alınır.

107 Fırat Üniversitesi Enformatik Bölümü 107 Tablolar

108 Fırat Üniversitesi Enformatik Bölümü 108 Parametreler   border parametresi çerçevenin kalınlı ğ ını belirtir. border=0 çerçevenin görünmemesini sa ğ lar.

109 Fırat Üniversitesi Enformatik Bölümü 109 Parametreler  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.

110 Fırat Üniversitesi Enformatik Bölümü 110 Parametreler  cellspacing parametresi hücreler arası marjı belirler.

111 Fırat Üniversitesi Enformatik Bölümü 111 Parametreler  align parametresi tabloyu hizalamada kullanılır.  align=left sola,  align=right sa ğ a dayalı yapar,  align=center ortalar.

112 Fırat Üniversitesi Enformatik Bölümü 112 Parametreler  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.

113 Fırat Üniversitesi Enformatik Bölümü 113 Parametreler

114 Fırat Üniversitesi Enformatik Bölümü 114 etiketi için parametreler etiketi için parametreler   bgcolor parametresi hücreyi renklendirmede kullanılır.

115 Fırat Üniversitesi Enformatik Bölümü 115 etiketi için parametreler etiketi için parametreler  background parametresi ile hücreye grafik-artalan yerleştirebiliriz.

116 Fırat Üniversitesi Enformatik Bölümü 116 etiketi için parametreler etiketi için parametreler  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.

117 Fırat Üniversitesi Enformatik Bölümü 117 etiketi için parametreler etiketi için parametreler

118 Fırat Üniversitesi Enformatik Bölümü 118 etiketi için parametreler etiketi için parametreler

119 Fırat Üniversitesi Enformatik Bölümü 119 etiketi için parametreler etiketi için parametreler  align parametresi hücre içinde yatay hizalama yapar.

120 Fırat Üniversitesi Enformatik Bölümü 120 etiketi için parametreler etiketi için parametreler  valign parametresi hücre içinde düşey hizalama yapar.

121 Fırat Üniversitesi Enformatik Bölümü 121 Hücreleri Birleştirme   Aynı satırdaki hücreleri birleştirmek için colspan,  Aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz.  Aşa ğ ıdaki gibi bir tablo yapımız olsun :

122 Fırat Üniversitesi Enformatik Bölümü 122 Hücreleri Birleştirme  A ve B hücrelerini birleştirmek için A hücresine ait etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait B etiketini siliyoruz.  E F ve G hücrelerini birleştirmek için E hücresine ait etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait F, G etiketlerini siliyoruz.

123 Fırat Üniversitesi Enformatik Bölümü 123 Hücreleri Birleştirme  Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait I etiketini siliyoruz.  C G ve K hücrelerini birleştirmek için C hücresine ait etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait G, K etiketlerini siliyoruz.

124 Çerçeveler

125 Fırat Üniversitesi Enformatik Bölümü 125 Çerçeveler  Çerçeve (frame) ’yi bir browser penceresinden birden fazla web sayfasını görüntülemek olarak tanımlayabiliriz.  Çerçeveler (frames), HTML'e sonradan eklenmiş bir özelliktir. Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri destekler.  Ç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.  Görüntülenen sayfalardan birindeki linkin tıklanması ile başka bir çerçevedeki içeri ğ i de ğ iştirebiliriz.

126 Fırat Üniversitesi Enformatik Bölümü 126 Çerçeveler  Örne ğ imizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm dosyasını, di ğ erinde htm2.htm dosyasını görüntülemesini bildiriyor.

127 Fırat Üniversitesi Enformatik Bölümü 127 Çerçeveler

128 Fırat Üniversitesi Enformatik Bölümü 128 Çerçeveler  etiketi ile htm1.htm dosyasının artalan rengi kırmızı, htm2.htm dosyasının artalanı ise mavi yapılmış, kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmıştır.

129 Fırat Üniversitesi Enformatik Bölümü 129 ...  Çerçeve oluşturmada kullandı ğ ımız etiket frameset,  cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olaca ğ ını belirtiyor,  row yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır.

130 Fırat Üniversitesi Enformatik Bölümü 130 ...  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,  * 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.

131 Fırat Üniversitesi Enformatik Bölümü 131 ...  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.  etiketi çerçevelere, ba ğ lantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sa ğ lıyor. src pencerede görüntülenecek html dosyasının yerini gösteriyor.  Açılacak çerçeve sayısı kadar etiketi kullanıyoruz.

132 Fırat Üniversitesi Enformatik Bölümü 132 ...  Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik.  İ şte noframes kısmı bu browserlara hitap ediyor.  body kısmını bu eski browserlar görüntüleyebiliyor. Buraya örne ğ in sayfanın çerçeve kullanılarak yapıldı ğ ını gösteren bir mesaj yazılabilir, böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerekti ğ ini hatırlatabilirsiniz. FRAMESET etiketini HTML dosyanızın... etiketleri arasında kullanmayı unutmayın !

133 Fırat Üniversitesi Enformatik Bölümü 133 ...  FRAMESET etiketi ile kullanabilece ğ imiz di ğ er parametreler şunlar;  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.

134 Fırat Üniversitesi Enformatik Bölümü 134 ...  FRAME etiketi ile kullanabilece ğ imiz parametreler;  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.

135 Fırat Üniversitesi Enformatik Bölümü 135 Daha karmaşık çerçeveler  Yan yana sütünlar ya da alt alta satırlar görünümünde çerçeveler açmayı ö ğ rendik peki tablolarda gördü ğ ümüz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün.  Bu etkiyi sa ğ lamak için FRAMESET etiketini açıp kaynak dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz, içiçe açtı ğ ımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz.

136 Fırat Üniversitesi Enformatik Bölümü 136 Daha karmaşık çerçeveler

137 Fırat Üniversitesi Enformatik Bölümü 137 Daha karmaşık çerçeveler

138 Fırat Üniversitesi Enformatik Bölümü 138 Daha karmaşık çerçeveler

139 HTML ve Uzaktan E ğ itim Materyali Hazırlama Teknikleri


"HTML ve Uzaktan E ğ itim Materyali Hazırlama Teknikleri." indir ppt

Benzer bir sunumlar


Google Reklamları