BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 5. DERS, YARD. DOÇ. DR. MEHTAP YALÇINKAYA 01.04.2011
RENK 16'lık sayı düzeninde d renk kodu girmek 16'lık sayı sisteminde de toplam 16 rakam var bunlar; 0 1 2 3 4 5 6 7 8 9 A B C D E F [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) gee bue, renklerinin e karışım ş oranlarını oa 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, #FF0000 kırmızı, #00FF00 yeşil, #0000FF mavi, #FFFFFF beyaz'dır. Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.
RENK 16'lık sayı düzeninde d renk kodu girmek
FONTLAR <Font > etiketinin kullanımı; <font face="..." size="..." color="...">...</font> face= yazıtipininadı (arial, tahoma, verdana,...) size= yazının büyüklüğü (1-7arası) color= yazının rengi (red, greengibi renklerin 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> Tanımlama listeleri l i (definitionlist) iti t) <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 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 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 ük Romen rakamları için i 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=disk, cirle, square> --disc (içi dolu daire), --circle (içi boş daire), --square(içi idolu 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>......</ </ul ul> etiketleri arasına aldığımız listeyi bu sefer arasına yazıyoruz. <dl dl>...</ >...</dl dl> Listenin maddelerini belirtmek için kullandığımız <li> etiketinin yerini burada ve etiketleri alıyor. <dd> (terim için) <dt> (tanım için) 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= = 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 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 talanı 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 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 İ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/ ="../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/ ="../../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. http://www.webteknikleri.com/logo..com/logo.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. 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/ ="/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 Ö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 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)