BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011
HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için <A> kullanılır. <A> etiketini kullanarak; <A> Anchor nchor etiketi Kendi Web Sitenizde başka bir Web Sayfasına http hyperlinki, Başka bir Web Sitesinin bir sayfasına http hyperlinki, Dosya download d etmek için i bir ftp linki, Mail mesajı oluşturmak için bir mailto linki oluşturabilirsiniz. Basit bir Anchor etiketinin (<A>) yazılışı; <A href= protokol:address > Gözükecek Metin </A>
HYPERLINKS KÖPRÜ HREF Değeriğ href= bilg007.html href= bilg4/ bilg007.html href=../bilg007.html href=../web/../web/index.html href= http://www. http://www.istanbul.edu.tr href= ftp://www. ftp://www.istanbul.edu.tr/uy gulamalar.zip href= mailto:my2@gmail.com Açıklama Çalışma dizini (klasörü) içerisindeki bilg007.html dosyasına link oluşturur. Çalışma dizini (klasörü) içerisindeki bilg4 alt dizininde bulunan bilg007.html ye link oluşturur. Bir yukarı düzey dizinde bulunan bilg007.html ye link oluşturur. Bir yukarı düzey dizinde bulunan web dizinindeki index.html ye link oluşturur. Başka bir web sitenin varsayılan ana sayfasına link oluşturur. FTP de bulunan bir dosyaya link oluşturur. Sitenizden indirilmesini istediğiniz dosyaya bir link oluşturur. my2@gmail.com e posta adresine e posta göndermek için bir link oluşturur. Eğer protokol adını yazmazsanız [ http:// yada ftp:// gibi] dosya (file) olarak alınır.
Örnek: 009_links.htm HYPERLINKS KÖPRÜ <HTML> <HEAD> <TITLE>BİLG3 Link Sayfası (009_links.htm)</TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY bgcolor="yellow" text="blue" link="green vlink="red" alink="fuchsia"> <H1>Bazı Sık Kullanılan Linkler</H1> <H3> <A href=" bilg4001 ">001bilg4.html</A><BR> <A href="../web/ bilg4002.html ">002bilg4.html</A><BR> <A href= http://nucleus.istanbul.edu.tr/~bilg3>bilgisayar edu tr/ bilg3>bilgisayar Ders Notları</A> </H3> </BODY> </HTML> <A> etiketinin TARGET özelliğine _blank değerini atayarak linkin yeni bir Web Tarayıcısı penceresinde açılmasını sağlayabiliriz. Çalışma: İç içe birkaç klasör açıp dosyaları bu klasörlere koyarak ta bu dosyalara link veriniz. Linklerden bir kısmını yeni pencerede açınız.
Örnek: 010_yerimi.html HYPERLINKS KÖPRÜ Yer imi (Named Anchor) Kullanımı charset=windows-1254 > Yer imi uzun bir dokümanın içerisinde dokümanın belli kısımlarına linkler vermek için kullanılır. Yerimi i oluşturmak için; i 1. NAME özelliğine bir yer adı yazarak <A name> etiketi oluşturunuz. <HTML> <HEAD> <TITLE>Bilg4 Link Sayfası </TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY bgcolor="yellow" text="blue" link="green" vlink="red" alink="fuchsia"> <H1><A name="ust">mevcut Kitaplarımız</A></H1> <H3> <A href="#sozluk">bilgisayar Terimleri Sözlüğü</A><BR> <A href="#builder">borland C++ Builder 6</A><BR> <A href="#flashmx">makromedia Flsah MX</A><BR> </H3><BR><BR> <H2><A name="sozluk">bilgisayar Terimleri Sözlüğü</A><A href="#ust">yukarı</a></h2> <BR><BR><BR><BR><BR><BR><BR><BR> <H2><A name="builder">borland C++ Buiilder 6</A><A href="#ust">yukarı</a></h2> <BR><BR><BR><BR><BR><BR><BR><BR> <H2><A name="flashmx">makromedia Flash MX</A><A href="#ust">yukarı</a></h2> 2. Başka bir <A> etiketi href #ust >Yukarı</A></H2> ile # işareti kullanarak önceki verdiğiniz isme bağlantı oluşturunuz. <BR><BR><BR><BR><BR><BR><BR><BR> </BODY> </HTML>
<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 <IMGalt > özelliği ile belirtilir. Örnek: 011_resim1.html <HTML> <HEAD> <TITLE>Bilg4 </TITLE> <META http-equiv="content-type" content="text/html; text/html; charset=windows-1254"> </HEAD> <BODY text="#0000cc"> <DIV align="center"><img src="i i_u_amblem.gif amblem.gif" alt= İstanbul Üniversitesi Logosu"></DIV> <H1 align="center">istanbul Üniversitesi<BR> Moleküler Biyoloji ve Genetik Bölümü</H1> </BODY> </HTML>
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 i azalma olur. Yalnız bu bozulmalar l 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.
<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?)
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 bilgresimayar.html i l uygulama çalışması
Ö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"> <!--Burada Align özelliğine farklı değerler atayarak durumu görelim.--> <!--LEFT, RIGHT, TOP, MIDDLE, BOTTOM --> <H1>Resmin Align Özelliği</H1> </BODY> </HTML>
<BR clear= all > 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 i kullanırız.
Ö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"> <!--Burada Align özelliğine farklı değerler atayarak durumu görelim.--> <!--LEFT, RIGHT, TOP, MIDDLE, BOTTOM --> <H1>Resmin Align Özelliği</H1> Bakalım resimden sonra yazmış olduğumuz metinler nereyeyerleştiriliyor. <br clear="all"> <!--Burada clear'a farklı değerler atayarak durumu gözleyelim--> </BODY> </HTML>
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 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" g width="200" height="45"> </BODY> </HTML>
WEB SAYFASINA RESİM EKLEMEK HATIRLATMA Resim ve Hyperlink ler ler Bir resme hyperlink eklemek için <IMG> ve <A> etiketlerini birlikte kullanırız. Örnek: 014_resim4.html <HTML> <HEAD> <TITLE>Bilg4 </TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY> <A href="bilg4_resim1.html"><img src="nukegif.gif" align="middle border="0"></a> 011_image1.htm -- Resim Örneği <br clear="left"><br> <!Yeni pencerede linki açar target="_blank" --> <A href="bilg4_resimhizalama.html" resimhi html" target="_blank"><img src="nukegif.gif" gif" align="middle border="0"></a> 012_image2.htm -- Resmin Align Özelliği <br clear="left"><br> <!Aynı çerçevede linki açar target="_self" --> <A href="bilg4 _ resimhizalama2.html" target=" _ self"><img src="nukegif.gif" g align="middle border="0"></a> 013_image3.htm -- BR etiketinin clear özelliği <br clear="left"><br> <!Tüm sayfada linki açar target="_top" --> <A href="bilg4_resimwidth.html" resimwidth html" target="_top"><img top"><img src="nukegif.gif" gif" align="middle border="0"></a> 014_image4.htm -- Width ve Height Özelliği <br clear="left"><br> <!Üst Çerçevede linki açar target="_parent" --> <A href=" bilg4_resimlink.html " target="_parent"> <IMG src="nukegif.gif" align="middle border="0"></a> 015_images.htm -- Sayfanın Kendisi </BODY> </HTML>