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.

(1)

B İ LG İ SAYAR 4

YARD. DOÇ. DR. MEHTAP YALÇINKAYA MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ

5. ve 6. DERS – Listeler ve Resim Ekleme (HTML Giriş)

(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

(4)

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

SIRALI LİSTELER

(5)

Örnek (solda yalnız body (gövde) bölümünü verildi)

SIRALI LİSTELER

(6)

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.

SIRASIZ LİSTELER

(7)

SIRASIZ LİSTELER

(8)

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.

TANIMLAMA LİSTELERİ

(9)

TANIMLAMA LİSTELERİ

(10)

WEB SAYFASINA RES İ M EKLEMEK-HATIRLATMA

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.

RESİM FORMATLARI

(11)

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.

<HTML>

<HEAD>

</HEAD>

<H1 align="center">İstanbul Üniversitesi<BR>

<IMG> Etiketinin Kullanımı

Örnek: 011_resim1.html

(12)

WEB SAYFASINA RES İ M EKLEMEK

HTML ’nin çoğu taglarından farklı olarak <IMG> etiketinin kapama etiketi yoktur. Bazı özellikleri şunlardır;

<IMG> Etiketinin Özellikleri

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)

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.

Align Özelliği

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.

(14)

WEB SAYFASINA RES İ M EKLEMEK

<HTML>

<HEAD>

</HEAD>

<IMG src="nukegif.gif" align="left">

<H1>Resmin Align Özelliği</H1>

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)

WEB SAYFASINA RES İ M EKLEMEK

<HTML>

<HEAD>

</HEAD>

<IMG src="nukegif.gif" align="left">

<H1>Resmin Align Özelliği</H1>

Bakalım resimden sonra yazmış olduğumuz metinler nereyeyerleştiriliyor.

</BODY>

</HTML>

(17)

WEB SAYFASINA RES İ M EKLEMEK

Resmin boyutlarını pixel olarak bildirmek için kullanılır.

Height ve Width Özellikleri

<HTML>

<HEAD>

</HEAD>

<BODY>

<H2>Orantılı Olarak Küçültülürse</H2>

<IMG src="nukegif.gif" width="200" height="180">

<H2>Orantısız Olarak Küçültülürse</H2>

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

<img src="../../otomobiller/rover.jpg">

bizi iki dizin üste çıkartır.

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=http://www.webteknikleri.com/logo.gif>

(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

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