DERS 5 ve 6 - İstanbul Üniversitesi

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
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.
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.
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">
SIRALI LİSTELER
Örnek (solda yalnız body (gövde) bölümünü verildi)
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.
SIRASIZ LİSTELER
Örnek (solda yalnız body (gövde) bölümünü verildi)
TANIMLAMA LİSTELERİ
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İ
Örnek (solda yalnız body (gövde) bölümünü verildi)
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.
WEB SAYFASINA RESİM EKLEMEK
<IMG> Etiketinin Kullanımı
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">İstanbul Üniversitesi<BR>
Moleküler Biyoloji ve Genetik Bölümü</H1>
</BODY>
</HTML>
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?)
WEB SAYFASINA RESİM EKLEMEK
Align Özelliği
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ı
WEB SAYFASINA RESİM EKLEMEK
Örnek: 012_resim2.html
<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>
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.
WEB SAYFASINA RESİM EKLEMEK
Örnek: 013_resim3.html
<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>
WEB SAYFASINA RESİM EKLEMEK
Height ve Width Özellikleri
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>
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">
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">
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>
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.
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)

Download Report