BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ 5. ve 6. DERS Listeler ve Resim Ekleme (HTML Giriş) YARD. DOÇ. DR.

Transkript

1 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ 5. ve 6. DERS Listeler ve Resim Ekleme (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA

2 LİSTELER HTML de üç tip liste hazırlama vardır Sıralı listeler (orderedlist) <ol> Sırasız listeler (unorderedlist) <ul> Tanımlama listeleri (definitionlist) <dl> 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. Kullandığınız stil hangisi olursa olsun. Maddelere <LI> ile işaret ederiz.

3 SIRALI LİSTELER 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> (listitem) 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 romenrakamları (i,ii,iii gibi) 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.

4 SIRALI LİSTELER type=1 A a I i Listeleme sisteminin rakamlardan oluşması için type="1 Büyük harflerden oluşması için, type="a Küyük harflerden oluşması için, type= a Büyük Romen rakamları için type="i ve Küçük Romen rakamları için type="i Listelemenin E harfinden başlaması için nasıl bir kod kullanmak gerekir? Bu durumda iki parametreye birden başvuruyoruz. Listede büyük harfler kullanılacağını bildirmek için type="a ve alfabenin 5. elemanı olan "E" den başlanması için start="5 komutlarını kullanmalıyız. <ol type="a" start="5">

5 SIRALI LİSTELER Örnek (solda yalnız body (gövde) bölümünü verildi)

6 SIRASIZ LİSTELER 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=disc, circle, square> --disc (içi dolu daire), --circle (içi boş daire), --square( içi dolu kare). <ul Compact> compact liste öğeleri arasındaki satır aralığının asgarî olmasını sağlıyor. Bu parametrenin kullanımında görüntünün değişmediğini görebilirsiniz. Bu parametre daha çok tanımlama listelerinde işe yarayabilecek bir parametredir.

7 SIRASIZ LİSTELER Örnek (solda yalnız body (gövde) bölümünü verildi)

8 Benzer şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi bu sefer arasına yazıyoruz. <dl>...</dl> Listenin maddelerini belirtmek için kullandığımız <li> etiketinin yerini burada ve etiketleri alıyor. TANIMLAMA LİSTELERİ <dd> (terim için) <dt> (tanım için) Yine parametre olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.

9 TANIMLAMA LİSTELERİ Örnek (solda yalnız body (gövde) bölümünü verildi)

10 WEB SAYFASINA RESİM EKLEMEK-HATIRLATMA RESİM FORMATLARI Web de kullanılan iki resim formatı vardır. Bunlar; GIF JPEG GIF (Graphics Interchange Format) genellikle küçük resimler ya da hareketli animasyonlar için kullanılır. Gif sıkıştırıldığında resmin kalitesinde bozulma olmaz. JPEG Genellikle büyük ebatlardaki resim formatıdır. Jpeg resimlerini sıkıştırdığımız ölçüde kalitesinde azalma olur. Yalnız bu bozulmalar insan gözü ile pek belli olmaz. Yeni browserların desteklediği yeni bir üçüncü tip resim formatı da PNG (Portable Network Graphics). Png formatı, Gif in yerine geçebilir.

11 <IMG> Etiketinin Kullanımı WEB SAYFASINA RESİM EKLEMEK Web sayfasına resim eklemek için < IMG > etiketi kullanılır. Resmin kaynağını < IMG src > özelliği ile, resim göstermeyi desteklemeyen tarayıcılarda resim yerine gösterilecek olan metin de < IMG alt > özelliği ile belirtilir. Örnek: 011_resim1.html <HTML> <HEAD> <TITLE>Bilg4 </TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY text="#0000cc"> <DIV align="center"><img src="i_u_amblem.gif" alt= İstanbul Üniversitesi Logosu"></DIV> <H1 align="center">istanbul Üniversitesi<BR> Moleküler Biyoloji ve Genetik Bölümü</H1> </BODY> </HTML>

12 WEB SAYFASINA RESİM EKLEMEK <IMG> Etiketinin Özellikleri HTML nin çoğu taglarından farklı olarak <IMG> etiketinin kapama etiketi yoktur. Bazı özellikleri şunlardır; src: Resmin bulunduğu dosya ve yol ismi alt: Resim göstermeyi desteklemeyen tarayıcılar ya da resim yüklenirken resmin yerinde gözükecek olan metindir. align: Resmin sayfada farklı hizalamada kullanılır. Left, right, top, middle veya bottom olabilir. hspace: Resmin etrafındaki yatay boşluk vspace: Resmin etrafındaki dikey boşluk height: pixel olarak resmin yüksekliği width: pixel olarak resmin genişliği border: Resmin etrafındaki çerçeve kalınlığıdır. 0 değeri verilerek çerçeve kaldırılabilir. (Bir resme hyperlink verildiğinde bu iyi bir yoldur. Neden?)

13 Align Özelliği WEB SAYFASINA RESİM EKLEMEK Sayfadaki diğer elemanlarla resmin nasıl hizalanacağını kontrol etmek için bu özelliği kullanırız. Varsayılan olarak tarayıcı resmi sola hizalar ve resimden sonra gelen eleman resmin yanına yerleşir. Top: Resimden sonra gelen metinlerin üst satırı resmin üstü ile hizalanır. Middle: Resimden sonra gelen metinlerin üst satırı resmin ortası ile hizalanır. Bottom: Resimden sonra gelen metinlerin üst satırı resmin altı ile hizalanır. Left: Resim sayfanın soluna hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin sağına yerleşir. Right: Resim sayfanın sağına hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin soluna yerleşir. Bakınız : bilgresimayar.html uygulama çalışması

14 Örnek: 012_resim2.html WEB SAYFASINA RESİM EKLEMEK <HTML> <HEAD> <TITLE> Bilg4 </TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY text="#0000cc"> <IMG src="nukegif.gif" align="left">   <H1>Resmin Align Özelliği</H1> Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. </BODY> </HTML>

15 WEB SAYFASINA RESİM EKLEMEK <BR clear= all > Etiketinin Kullanımı Bazen align özelliğine verdiğimiz değere göre metin resmin etrafını çevreler. Align özelliğini kaybetmesini istediğimiz yerde <br clear= all > etiketini kullanırız.

16 Örnek: 013_resim3.html WEB SAYFASINA RESİM EKLEMEK <HTML> <HEAD> <TITLE>Bilg4</TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY text="#0000cc"> <IMG src="nukegif.gif" align="left">   <H1>Resmin Align Özelliği</H1> Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereyeyerleştiriliyor. <br clear="all">  Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. </BODY> </HTML>

17 Height ve Width Özellikleri WEB SAYFASINA RESİM EKLEMEK Resmin boyutlarını pixel olarak bildirmek için kullanılır. Örnek: 014_resim4.html <HTML> <HEAD> <TITLE> Bilg 4 </TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY> <H2>Orantılı Olarak Küçültülürse</H2> <IMG src="nukegif.gif" width="200" height="180"> <IMG src="nukegif.gif" width="100" height="90"> <IMG src="nukegif.gif" width="50" height="45"> <H2>Orantısız Olarak Küçültülürse</H2> <IMG src="nukegif.gif" width="200" height="180"> <IMG src="nukegif.gif" width="200" height="90"> <IMG src="nukegif.gif" width="200" height="45"> </BODY> </HTML>

18 RESİMLER-PATH (YOL) KAVRAMI Şimdi nukegif.gif isimli resmi sayfamıza yerleştirelim. <img src= nukegif gif"> çalışma klasörümüzün içinde <img src= resimler\ nukegif gif"> çalışma klasörümüzün içindeki resimler klasöründe <img src= C:\belgelerim\ nukegif gif "> Bu kodun anlamı "C: adlı sabit diskte, kök dizinde bulunan 'belgelerim' klasörü içindeki ' nukegif gif ' dosyasını sayfaya yerleştir!" demektir. (Bu arada bölü işaretinin yönüne dikkat ediniz.) Fakat, işler her zaman böyle yürümez. Bedava veya paralı Internet alanı veren bir firmadan aldığımız yerin gerçekte Server'ın hangi sabit diskinin hangi klasöründe durduğunu bilmemiz çok zor hatta neredeyse imkansızdır. Ayrıca Internet'te bir öğeye, bulunduğu sabit disk ve bu diskteki yolla göndermede bulunmak güvenlik açısından da yanlış olur. Bu sebeplerden dolayı <img src=...> etiketini farklı bir şekilde kullanırız. Bu kullanım tarzında dikkat edilmesi gereken nokta o anda çalışan-görüntülenen HTML dosyasının sabit diskteki yerinin esas alındığıdır. Bu ne demek? Şu demek; şayet HTML dosyası ile grafik dosyası aynı dizin içerisindeler ise bu grafik dosyasına gönderme şu kodla yapılır: <img src= nukegif gif">

19 RESİMLER-PATH (YOL) KAVRAMI Diyelim ki bir otomobil sitesi hazırlıyorsunuz ve elinizde sayfanıza koymak istediğiniz onlarca otomobil resmi var. İstiyorsunuz ki bu onlarca resim dosyası diğer dosyalara karışmadan otomobiller adlı dizinde dursun. Bu dizinde bulunan bmw520i.jpg dosyasına erişmek için kullanacağımız kod şöyle olmalı: <img src="otomobiller/bmw520i.jpg"> Bu kod, "Şu anda çalışan HTML dosyasının bulunduğu klasörde 'otomobiller' diye bir dizin var; onun içinde de idealim olan otomobilin, bmw520i.jpg isimli bir dosyada resmi var; onu sayfaya koy!" anlamına geliyor. Bu şekilde iç içe bulunan klasörlerin her birine ulaşmamız mümkündür. <img src="otomobiller/bmw/bmw320i.jpg"> <img src="otomobiller/station/renault/toros.jpg">

20 RESİMLER-PATH (YOL) KAVRAMI İstediğimiz grafik dosyasına hangi alt klasörde olursa olsun ulaşabiliyoruz; peki üst klasörlere nasıl erişeceğiz? Bunun için kullanacağımız kod da 3 karakterden ibaret: "../". Kaynak belirtirken kullandığımız src parametresindeki her bir "../" ifadesi bizi bir üst klasöre götürür. Aynı şekilde istediğimiz kadar üst klasöre bu yolla ulaşabiliriz. <img src="../otomobiller/volvo.jpg"> Bunun anlamı; "Bir üst dizine çık, orada 'otomobiller' dizinini bul; içindeki volvo.jpg dosyasını al!" demektir. Aynı şekilde; bizi iki dizin üste çıkartır. <img src="../../otomobiller/rover.jpg"> Grafiklere, Internet adreslerini kullanarak ulaşmamız da mümkündür. Örneğin Web sayfamızda kullanmak istediğimiz bir sitenin logosunu o siteden almak istersek src parametresi karşılığına grafik dosyasının URL'ini yazarız <img src=

21 RESİMLER-PATH (YOL) KAVRAMI Bu konuyla ilgili bir kullanım şekli daha var. O da doğrudan bölü "/" işaretini kullanmaktır. Bu yöntem bizi doğruca kök dizine (root) götürür. Tabi eğer dosyalarınız Web Server'da ayrılmış bir klasörde durmuyorsa doğrudan sabit diskin kök dizinine ulaşırsınız. Web Server'da duran dosyalarda ise bu komut bizi sabit diskin değil, sitenin kök dizinine götürür. <img src="/otomobiller/peugeot.jpg"> komutu şayet sizin kendi bilgisayarınızda çalıştırılan bir HTML dosyasında ise c:\otomobiller\peugeot.jpg dosyasına ulaşırsınız. Fakat bu sayfa, gerçek Internet sitesinde ise, Web Server buradaki kök dizini sitenin kök dizini kabul edeceğinden ulaşacağınız dosya sitenize ayrılan dizinde aranır.

22 RESİMLER-HATIRLATMA Örnek (solda yalnız body (gövde) bölümünü verildi) <img src= nukegif.gif " width= 65" height= 95"> Her ne kadar şart olmasa da resmin en ve boy belirtilebilir. <img src= nukegif.gif hsapace=?" vspace=?"> resmin yanlarındaki boşluklar belirlenir. <img src= nukegif.gif border=?"> resmin çerçevesinin boyutunu belirlenir. 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. <img src= nukegif.gif align=top, bottom, middle, left, right> resimlerin nereye yerleşeceği belirtilir. <img src= nukegif.gif " align=texttop, absbottom, absmiddle, baseline> resimlerin yazıların neresine yerleşeceği belirtilir. <img src= nukegif.gif " alt= fisyon > Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer browser'ını sadece metinleri göstermek üzere ayarlamışsa, resim yerine alternatif açıklama (fisyon) 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. (Bkz Uygulama bilg4resimayar.html)