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

Transkript

1 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 3. ve 4. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA ,

2 HTML DERSLERİ 1 Bir Web Sayfasının Genel Yapısı <HTML> <HEAD> Burada genelde döküman içeriği dışında kalan karakter set tanımlamaları, başlık, JavaScript tanımlamaları vb elemanlar bulunur... </HEAD> <BODY> Burada ise dökümanın asıl içeriği vardır, içinde metin, ses, video vb içerebilir... </BODY> </HTML> Web Sayfaları <HTML> etiketinden önce DTD (Document Type Definition) iti başvurusu da içerebilir. Bu başvuru HTML nin versiyonunu bildirir. Ama çoğu Web Browser bunu otomatik olarak sayfaya ekler. Yani yazmasak ta olur. <! doctype html public -//W3C//DTD HTML 4.0 Transdional//EN > Case-Insensitive: HTML büyük küçük harfe duyarsızdır. <BODY> ile <body> etiketleri arasında bir fark yoktur.

3 HTML DERSLERİ 1 Yapısal Etiketler (Structural Tags) Yapısal etiketler web sayfasında farklı bölümler tanımlamak için kullanılır. Bunlar; 1 Örnek: 002_myfirst.htm

4 HTML DERSLERİ 1 1

5 HTML DERSLERİ 1 <META> Birçok seçeneği vardır. Örneğin bir kullanımı, bu belirteç ile sayfanızın içeriğini yansıtan bazı anahtar kelimeler l ve tanımlamalar l verilmesidir. idi Web üzerinde arama yapan arama motorları sayfaların meta TAG ına bakarak gruplandırma yaparlar. Bununla ilgili aşağıdaki örnekleri inceleyebiliriz. i <META NAME="Description" CONTENT="HTML öğrenmek için yararlı bilgiler"> <META NAME="Keywords" CONTENT="html, 1 htm, web sayfası"> <META NAME="Author" CONTENT= Mehtap Yalçınkaya"> Başka bir kullanım, sayfadaki yazıların hangi dil ailesine ait karakterlerle yazıldığını belirtmek içindir. Yine aşağıda bunula ilgili bir örnek verilmiştir. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso "> (Türkçe' nin dahil olduğu dil ailesine ait standard tanımlaması iso ' dur.)

9 HTML DERSLERİ 1 <HTML> <HEAD> <TITLE>WEB SAYFAMA HOŞGELDİNİZ (003_link.htm)</TITLE> </HEAD> <BODY background="bg.jpg jpg" bgcolor="gray" gray text="white" link="yellow" vlink="aqua" alink="olive" bgproperties="fixed"> <H1 align="center">web SAYFAMA HOŞGELDİNİZ</H1> <HR> 1 <H2>Bilgisayar 4 Web Sayfası</H2> <HR> İstanbul Üniversitesinin Sayfasına Gitmek İçin <A href=" <BR> İstanbul Teknik Üniversitesinin Sayfasına Gitmek İçinç <A href=" </BODY> </HTML>

10 HTML DERSLERİ 1 Belge Biçim Etiketleri (Document Formatting Tags) HTML çok sayıda biçimlendirme etiketi sunar. Bu etiketlerle belgede başlıkoluşturur, metni kalın, italik, altçizgili yapar, madde imlerini oluşturur ve yatay çizgiler oluşturabilirsiniz. Bunlardan bazıları aşağıdakiğ tablodadır. 1

11 HTML DERSLERİ 1 Belge Biçim Etiketleri (Document Formatting Tags) 1

12 HTML DERSLERİ 1 Başlık Etiketlerinin (Header Tags) Kullanımı Bu etiketin başında ve sonunda Web Browser otomatik olarak satırkırma karakteri kullanır. ua Örnek: 004_header.htm <HTML> <HEAD> <TITLE>Header Etiketleri (004_header.htm)</TITLE> </HEAD> <BODY> 1 <H1>Header 1</H1> <H2>Header 2</H2> <H3>Header 3</H3> <H4>Header 4</H4> <H5>Header 5</H5> <H6>Header Header 6</H6> </BODY> </HTML>

13 HTML DERSLERİ 1 Metin Biçimlendirme Etiketlerinin Kullanımı Farklı metin biçimleri kullanmak için bu etiketleri kullanırız. HTML satır kırmalarını, sekme karakterlerini, sıralı duran boşluk karakterlerini tek bir boşluk karakteri olarak algılar. Bu yüzden satır kırma için <P> ve <BR> etiketlerini kullanırız. 1 Örnek: 005_text.htm

14 HTML DERSLERİ 1 <HTML> <HEAD> <TITLE>Metin Biçimleri (005_text.htm)</TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"></head> <BODY> <H1>Metin Biçimleri (005_text.htm)</H1> <STRONG>Güçlü Vurgu STRONG (Strong Emphasis) Metni</STRONG> <BR> <B>Kalın B (Bolt) Gibi Gözüküyor.</B>  r <HR> <EM>Vurgu EM (Emphasis) Metni</EM> <BR><I>İtalik I (Italic) Gibi Gözüküyor.</I> <HR> <PRE> Bu Metin PRE (Preformatted) Etiketi Kullanılarak Yazılan Metindir. Başka ş Bir Satır ve biraz boşluk<br> ş </PRE> <HR> Birkaç Metin Yazalım. <BR>Bu Satırdan Önce Bir BR etiketi Var. <P>Bu Satırdan Önce P Etiketi Var.</P> Birkaç Metin Daha <DIV>Bu Satırdan Önce DIV Etiketi Var.</DIV> Bu Kadar Metin Yeter. <HR> </BODY> </HTML> 1

15 HTML DERSLERİ 1 <BASEFONT> Etiketi Sayfada başlık olmayan metnin varsayılan fontuna işaret eder. <BASEFONT> un varsayılan asay a font büyüklüğü üğü 3 tür. Örnek: <BASEFONT size= 5 color= red > yukarıdaki etiketten sonra sayfada metin büyüklüğü 5 ve rengi de kırmızı olacaktır. (Aksi belirtilmedikçe) <FONT> Etiketi 1 Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı etiketidir. Bu etiketin bazı özellikleri; Size: Yazı boyutunu temsil eder. Color: Yazı rengi Not: Microsoft ve Netscape in Web Tarayıcıları <BASEFONT> ve <FONT> etiketlerinin FACE niteliğini de destekler. FACE özelliğine virgül ile ayrılmış yazı tipleri belirtilir. Bu bildirim HTML 3.2 vaya 4.0dayoktur.

16 HTML DERSLERİ 1 Örnek: 006_font1.htm <HTML> <HEAD> <TITLE>Kaptanın Seyir Defteri</TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY bgcolor="#000000" text="#ffffff"> <BASEFONT size="5"> <H1><IMG src="kaptan.gif" alt="kaptan" 1 align="absmiddle">kaptanın Seyir Defteri</H1> <BR clear="all"> Sayfamıza yukarıdaki gibi *.gif animasyonlar da yerleştirebiliriz. <P> <FONT size="3" color="#ff0000"> Buradaki metin özellikleri size="3" ve color="#ff0000" dir. </FONT> </P> </BODY> </HTML>

17 HTML DERSLERİ 1 <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar Önceki örnekte <FONT> etiketi ile fontun büyüklüğünü ayarlamıştık fontun size özelliğine +n veya n değerlerini atayarak mevcut fontun n fazlası veya n eksiği olarak ayarlayabiliriz. <BIG> ve <SMALL> etiketleri da bağlı etiketlerdir. Bu etiketlerle da sırası ile mevcut fontun bir derece büyüğünü ve bir derece küçüğünü yazmak mümkündür. Yani <BIG> ile <FONT size= +1 > ve <SMALL> ile <FONT size= -1 > aynı kullanıma sahiptir. Örnek: 007_font2.htm <HTML> <HEAD> <TITLE>Bağlı Fontlar (Relative Fonts)(007_font2.htm)</TITLE> <META http-equiv="content-type" content="text/html; text/html; charset=windows-1254"> </HEAD> <BODY> <P>Bu normal BODY metnidir.</p> <P><FONT size="+1">bu size="+1" olan metindir.</font></p> <P><BIG>Bu 1metin BIG etiketi e ile yazılmıştır.</big></p> ş / <p><font size="+2">bu size="+2" olan metindir.</font></p> <P><BIG><BIG>Bu metin iki tane BIG etiketi ile yazılmıştır.</big></big></p> <P><FONT size="-1">bu size="-1" olan metindir.</font></p> <P><SMALL>Bu metin BIG etiketi ile yazılmıştır.</small></p> ş <p><font size="-2">bu size="+2" olan metindir.</font></p> <P><SMALL><SMALL>Bu metin iki tane BIG etiketi ile yazılmıştır.</small></small></p> </BODY> </HTML>

18 İLK SAYFAMIZ Bir metin belgesi oluşturun.dosyayı çift tıklayarak açın ve şunları yazın: <html> <head> <title>ilk Sayfam</title> </head> <body> Sayfama Hoşgeldiniz </body> </html> Dosyayı kaydedin (Dosya/Farklı Kaydet...). Dosya adı kısmına : "sayfa1.htm" (tırnaklar dahil) ve Tamam'a basın. Oluşan yeni dosyayı varsayılan browser'ınız (Internet Explorer, Netscape Navigator gibi) tarafından açın. Şöyle l bir görüntü elde edeceksiniz:

19

20 METİN BİÇİMLEME <html>...</html>tarayıcıya HTML dosyasının başladığını ve bittiğini ğ belirtiyor. Diğer ğ tüm kodlar bu iki etiket arasına yazılır. Bir HTML belgesi iki bölüme ayrılıyor: y head(baş) ve body(gövde). <head>...</head> etiketleri arasına sayfa hakkında bilgiler yazıyoruz. meta ve title gibi etiketler burada yeralıyor. <body>...</body> arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu tagler arasında yeralıyor. <title>...</title>title sayfanın başlığını belirtiyor.

21 Head (Baş) Bölümü <html> <head> <title>bilgisayar 4 Dersi</title> <meta name="description" content= Web Sayfası, Tasarım, Moleküler Biyoloji, Genetik, İstanbul Üniversitesi"> </head>

22 Body (Gövde) Bölümü <body> Sayfama Hoşgeldiniz <br> <font face="tahoma" size="5" İlkbahar</font> <a href="mailto: atın</a> <img src= kedi.gif" width= 65" height= 91" > </body> </html>

23 Meta Etiketi Arama motorlarında iyi bir sıralama kapmak için meta etiketleri içerisine yazdığımız notlar çok önemlidir. Örneğin İstanbulÜniversitesi" sitesinin Meta etiketleri şöyle olabilir. <META name="keywords" content= İstanbul Üniversitesi,İÜ, IU, Fakülteler, Yüksekokullar, Enstitüler, Akademik Takvim, Üniversite, Istanbul University, Turkey, University, education, campus, Türkiye, academics, students, faculty, masters, graduate schools, sports, class, study, Library, Computer Center, bölümler, İstanbul"> Sayfanızda kullandığınız Türkçe karakterlerin başka bilgisayarlarda bozuk şekillerde görülmemesi için; <meta http-equiv="content-type" content="text/html; charset=windows-1254">

24 Başlık etiketleri: <h1>...<h6> Paragraf etiketi: <p>...</p> Ortalama: <center>...</center> Diğer ğ etiketler: <b>...</b>,<i>...</i>,<u>...</u> <BR>Bir satır atlamayı sağlar. /BR ile kapatılmaz.

25 <B></B> : Koyu Yap HTML DERSLERİ 1 Örnek: <B>Bu Yazı Koyudur.</B> => Bu Yazı Koyudur. <I></I> : Yatık Yazı Örnek: <I>Bu Yazı Yatık Yazıdır. </I> => Bu Yazı Yatık Yazıdır. <U></U> : Altı Çizili Yazı Örnek: <U>Bu Yazı Altıçizili Yazıdır. </U> => Yazı 1 Altıçizili Yazıdır. <S></S> : Üzeri Çizili Yazı Örnek: <S>Bu Yazı Üzeriçizili Yazıdır. </S> => Bu Yazı Üzeriçizili Yazıdır. Örnek: <B><S><I>Bu Yazı Koyu Üzeriçizili ve Yatık Yazıdır. </I></S></B> => Bu Yazı Koyu Üzeriçizili ve Yatık Yazıdır. <P></P> : Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında, takip eden metin bir satır boşluk bırakılarak ve satır başına yazılır.

26 Metin Biçimlendirme i Tagları <H1>...<H6> : Başlık TAG ıdır. Örnek: <H1>Başlık1</H1> <H2>Başlık2</H2> <H6>Başlık6</H6>

27 Başlık Etiketleri <html> <head> <title>başlık Etiketleri</title> </head> <body> <h1>başlık 1</h1> <h2>başlık 2</h2> <h3>başlık 3</h3> <h4>başlık 4</h4> <h5>başlık 5</h5> <h6>başlık 6</h6> </body> </html>

28 Diğer Etiketler Etiketleri toplu olarak kullanarak yeni bir HTML dosyası oluşturalım. ş <html> <head> <title> HTML Ders Notları</title> </head> <body> <h1><center>sayfama Hoşgeldiniz</center></h1> <p>html etiketleri ile, </p> Yazıları <b>koyu </b> <i>italik </i> ve <u>altı çizili ili </u> olarak yazabiliyorum </body> </html>

29

30 FONTLAR HTML DERSLERİ 1 <FONT FACE=... SIZE=... COLOR=...> </FONT> face= yazıtipinin adı (arial, tahoma, verdana,...) size= yazının büyüklüğü (1-7 arası) color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri) Örnekler : <font face="tahoma" size="6" color="#008000">ilkbahar</font> <font face=" Comic Sans MS " size="4" color="red">sonbahar</font> 1 <font face=" Monotype Corsiva " size="5" color= 0000FF ">Mevsim</font> <font face="arial" size="3" color="blue">kış</font>

31 <html> <head> <title>mevsimler</title> </head> <body> <font face="verdana" size= 7" color="#008000">ilkbahar</font><br> <font face="monotype Corsiva" size= 6" color="#ff0000">yaz</font> <font face="arial" size= 5" color="fuchsia">sonbahar</font><br> <font face="comic sans ms" size= 4" color="#0000ff">kış</font><br> </body> </html>

32 <HEAD> <META HTTP EQUIV="Content Type" CONTENT="text/html;CHARSET=iso "> <META NAME="GENERATOR" Content= NOTPAD for Windows"> <META NAME="Author" Content= Mehtap YALÇINKAYA"> <META METANAME NAME="Keywords" " Content="deneme, t learning HTML, dummy document"> <TITLE>İlk HTMLSayfamız</TITLE> </HEAD> <BODY TEXT="#333333" BGCOLOR="White" LINK="Navy" VLINK="#006600" ALINK="#009999" BACKGROUND="resim.jpg"> <H1> Etkileyici bir başlık atalım <H1> Bu birlikte inceleyeceğimiz ilk HTML dökümanı.<br> İçeriği şimdilik önemli olmasa da ona da sıra gelir :)<BR> Bu satırın 2 altında bazı sayılar olmalı, acaba öyle mi? <HR> Hemen üstümde şirin bir çizgi var. </BODY> </HTML>

33 Yukarıdaki kodun ilk satırı SGML (HTML'in atası) sözdizimine göre aşağıdaki satırların bir HTML 3.2 dökümanı olduğunu belirtmektedir, genelde ihmal edilebilir, ancak Internet üzerinde bazı HTML validator (sözdizimini kontrol eden programlar) tarafından kullanılır ve eğer kullanılmazsa dökümanın HTML 2.0'a uygun olduğu varsayılır. 2. satırda bir HTML açıklaması vardır. HTML commentleri  ile biter. Bu iki tag arasında kalan bütün yazılar browser tarafından ihmal edilir (JavaScript hariç, ileride bu konuya geri dönülecektir). 3. satırda dökümanımız resmi olarak açılmış bulunmakta. 4. satırda browser'ın dökümanı gösterirken işine yarayabilecek bazı bilgiler vb elemanların bulunduğu HEAD kısmı açılmaktadır. 5. satırda dökümanın render edilirken (mizanpajının yapılıp ekrana dökülürken) kullanılacak karakter seti verilmektedir. Sık kullanacağımız setler ISO (Latin1) ve ISO (Türkçe)'dur. Bazı Windows programlarının (isimlerii i lazım değil) kullandığı bir set ise standart olmayan Windows-1254 (Unix'te görüntülenemeyen bir Türkçe)'dür. 6. satırda döküman hazırlanırken hangi HTML editörünün öü ü kullanıldığı yazmaktadır. 7. satırda dökümanı hazırlayan kişinin ismi vardır. 8 satırda daha çok AltaVista HotBot gibi bazı arama makinelerinin kullandığı bir 8. satırda daha çok AltaVista, HotBot gibi bazı arama makinelerinin kullandığı bir bilgi bulunmaktadır. Sözgelimi AltaVista'da arama yapan birinin sizin dökümanınıza ulaşmasını istiyorsanız, verebileceği anahtar kelimeleri burada tanımlarsınız.

34 9. satırda döküman gösterilirken browser'da pencerenin başlığı olarak ne görüleceği bilgisi vardır. Bu bilgi ayrıca sayfanızı bookmark'ına (Navigator) ya da favorites'ine (Explorer) ekleyen kişilerdeş görülecek olan isimdir. 10. satırda HEAD kısmı kapanmaktadır. 11. satırdan itibaren dökümanın içeriği hemen hemen başlamaktadır. Burada sayfanın görüntülenirken ana görünümün nasıl olacağı belirlenir. BODY'den sonra gelen 5 eleman sırasıyla şunları ifade eder: Düz metin rengi Arka fon rengi Ziyaret edilmemiş linklerin rengi Ziyaret edilmiş linklerin rengi Fareyle link'e tıklandığı ğ andaki (düğme halen basılıken) link'in rengi Arka fonda kullanılacak olan resim Burada renkleri verirken 2 tip gösterim kullandık, #RRGGBB ve Renk_İsmi. #RRGGBB, hexedecimal olarak 2 şer bayttan Kırmızı, Yeşil ve Mavi bileşenleri verir. Örneğin saf kırmızı #FF0000, camgöbeği #00FFFF'dir. Diğer gösterim daha kolaydır ve HTML standardında bulunan 16 (Navigator için yüze yakın) renkten birini verir. White, Blue, Gold gibi bir çok renk bulunmaktadır. Arka fonda resmin kullanıldığı ve tabii ki kullanıcıda gösterilebilen bir resmin olduğu dökümanda arka fon renginin işi ne? Internet'e bağlı kullanıcıların birkısmı hatları yavaş olduğuğ için resimleri otomatik yüklemezler. Böyle bir durumda dökümanınızın istediğinizeğ en yakın görülebilmesi ve, bazen olduğu gibi siyah üstüne siyah yazan, yani boş gibi görünen bir sayfayla karşılaşmamaları için verilmesi tavsiye edilir.