img src= nukegif gif

Æ BİLGİSAYAR 4 Å
MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ
HTML DERS NOTLARI – 5.
5 DERS
DERS,
YARD. DOÇ. DR. MEHTAP YALÇINKAYA
01.04.2011
RENK
16'l k sayı dü
16'lık
düzeninde
i d renk
k kodu
k d girmek
i
k
16'lık sayı sisteminde de toplam 16 rakam var bunlar;
0123456789ABCDEF
[[10'un karşılığı
ş ğ A ... 15'in karşılığı
ş ğ F'dir.]]
Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (redgreen-blue,kırmızı-yeşil-mavi)
g
ee b ue,
yeş
a ) renklerinin
e e
karışım
a ş
oranlarını
o
a a
belirtir. Bu renklerden her birinin alacağı değer 00 ile FF
aralığında olabilir (FF maksimum, 00 minimum karışımı
verir).
Buna göre;
#000000 siyah
siyah, #FF0000 kırmızı
kırmızı, #00FF00 yeşil
yeşil, #0000FF
mavi, #FFFFFF beyaz'dır.
Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.
deneyebilirsiniz
RENK
16'l k sayı dü
16'lık
düzeninde
i d renk
k kodu
k d girmek
i
k
FONTLAR
<Font > etiketinin kullanımı;
<font face="..." size="..." color="...">...</font>
`
`
`
`
face= yazıtipininadı (arial,
(arial tahoma,
tahoma verdana,
verdana ...))
size= yazının büyüklüğü (1-7 arası)
color=
l
yazının rengii (red,
( d greengibi
ibi renklerin
kl i
ingilizcekarşılığı yada RGB renk kodları)
Bunlara font etiketinin parametreleri diyoruz.
FONTLAR
<Font > etiketinin kullanımı;
LİSTELER
HTML’de üç tip liste hazırlama vardır
¾ Sıralı listeler (orderedlist) <ol
ol>
¾ Sırasız listeler (unorderedlist) <ul
ul>
¾ Tanımlama
T
l
li t l i (definitionlist)
listeleri
(d fi iti li t) <dl
dl
dl>
Sıralı listeler rakam veya harf yada her ikisini iç içe kullanarak liste
oluşturmamızı,
Sırasız listeler rakam/harf y
yerine madde imleri koyarak
y
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
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>
li> (listitem
(listitem))
etiketini g
getiriyoruz.
y
Bu etiket sonlandırılmıyor.
y
¾Parametreler ekleyebiliyoruz. Bunlar:
<ol
ol type
type=A,
=A,
A, a, I, i, 1
1>
listemizin sayılar
sayılar, harfler (küçük/büyük) ve romenrakamları (i,ii,iii gibi)
başlayacağını (type
type), hangi rakam/harfle başlayacağını (start
start)
belirtebiliyoruz.
belirtebiliyoruz
<ol Compact>
Compact>
Compact parametresi ise listenin mümkün olan minimum satır aralığına
sahip olmasını sağlıyor.
sağlıyor
SIRALI LİSTELER
type=1|
type
=1| A| a |I| i
`
Listeleme sisteminin rakamlardan oluşması için type
type="1“
="1“
`
Büyük harflerden oluşması için, type
type="A“
="A“
`
Küyük harflerden oluşması için, type
type=“a“
=“a“
`
Büyük Romen rakamları için type
type="I“
="I“ ve
`
Kü ük R
Küçük
Romen rakamları
k l iiçin
i type
t
type="i“
="i“
"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
y
harfler kullanılacağını
ğ
bildirmek için
ç type
type="A“
yp ="A“ ve
alfabenin 5. elemanı olan "E" den başlanması için start="
start="5
5“
komutlarını kullanmalıyız.
<ol type=
type="A"
A start=
start="5">
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>
ul>
etiketi kullanılarak maddelerin başına küçük şekiller getirilir
getirilir.
`
Liste maddeleri için kullandığımız <li>
li> etiketi burada da geçerlidir.
`
K ll l bil
Kullanılabilecek
k parametreler,
l
<ul type=disk,
type=disk, cirle,
cirle, square
square>
>
`
--disc (içi dolu daire),
`
--circle (içi boş daire),
`
--square(( iiçii dolu
d l kare).
k
)
<ul Compact>
Compact>
compact liste öğeleri arasındaki satır aralığının asgarî olmasını sağlıyor.
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.
di
`
SIRASIZ LİSTELER
Örnek (solda yalnız body (gövde) bölümünü verildi)
TANIMLAMA LİSTELERİ
Benzer şekilde <ol>
<ol>...
...</ol>
</ol> veya <ul
ul>
>...
...</
</ul>
</ul
>
etiketleri arasına aldığımız listeyi bu sefer
<dl
dl>
dl>...</
>
>...</dl
</dl>
</dl
>
arasına yazıyoruz.
`
Listenin maddelerini belirtmek için kullandığımız
<li
li>
> etiketinin y
yerini burada
<dd
dd>
> (terim için)
ve
<dt
dt>
> (tanım için)
etiketleri alıyor
alıyor.
`
`
Yine parametre olarak <dl
dl>
> etiketi içinde compact
ifadesini kullanabiliriz.
TANIMLAMA LİSTELERİ
Örnek (solda yalnız body (gövde) bölümünü verildi)
RESİMLER
Şimdi nukegif.gif isimli resmi sayfamıza yerleştirelim.
<img src
src=“
src=
=“nukegif
=
nukegif gif
gif">
">
> çalışma klasörümüzün içinde
<img src=“
src=“resimler
resimler\\ nukegif gif
gif">
"> çalışma klasörümüzün içindeki resimler
klasöründe
<img src
src=“
=“C
C:\belgelerim
belgelerim\\ nukegif gif ">
> Bu kodun anlamı "C:
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,
F
k t işler
i l her
h zaman böyle
bö l yürümez.
üü
B d
Bedava
veya paralı
l Internet
I t
t alanı
l
veren bir
bi
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
öğeye,
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.
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:
yapılır:
<img src
src=“
=“nukegif
nukegif gif
gif">
">
>
RESİMLER
Diyelim ki bir otomobil sitesi hazırlıyorsunuz ve elinizde sayfanıza koymak istediğiniz
onlarca otomobil resmi var.
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">
Ş anda ççalışan
ş HTML dosyasının
y
bulunduğu
ğ klasörde 'otomobiller' diye
y bir
Bu kod,, "Şu
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
İ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.
ulaşabiliriz
<img src="../otomobiller/
src="../otomobiller/volvo
volvo..jpg">
jpg">
Bunun anlamı; "Bir üst dizine çık, orada 'otomobiller' dizinini bul; içindeki volvo.jpg
dosyasını al!" demektir. Aynı şekilde;
<img src="../../otomobiller/
src="../../otomobiller/rover
rover..jpg">
jpg">
bizi iki dizin üste çıkartır.
çı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
URL'ini
ini yazarız
<img src=
src=http://www.
http://www.webteknikleri
webteknikleri.com/logo.
.com/logo.gif
gif>
>
RESİMLER
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.
kullanmaktır.
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,
değil sitenin kök dizinine götürür.
götürür
<img src="/otomobiller/
src="/otomobiller/peugeot
peugeot..jpg">
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.
aranır.
RESİMLER
Örnek (solda yalnız body (gövde) bölümünü verildi)
<img src=“nukegif
nukegif..gif " width=“65" height=“95"> Her ne kadar şart olmasa da
resmin en ve boy belirtilebilir.
belirtilebilir
<img src=“nukegif
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=
src=“nukegif
nukegif.gif
gif " align=texttop,
align=texttop absbottom,
absbottom absmiddle,
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
i i d görüntülenir.
ö ü tül i (Bkz
(Bk Uygulama
U
l
bil 4 i
bilg4resimayar.html)
ht l)