bİlgİsayar 4sayar 4nucleus.istanbul.edu.tr/~bilg3/bilg4-ders3-4.pdf · bİlgİsayar 4sayar 4...
TRANSCRIPT
BİLGİSAYAR 4 BİLGİSAYAR 4
MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜHTML DERS NOTLARI 3 ve 4 DERSHTML DERS NOTLARI – 3. ve 4. DERS
YARD. DOÇ. DR. MEHTAP YALÇINKAYA18.03.2011, 25.03.2011
HTML DERSLERİ 1
Bir Web Sayfasının Genel Yapısı<HTML>
<HEAD><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>/HEAD<BODY>
Burada ise dökümanın asıl içeriği vardır, içinde metin, ses, video vbiçerebilir...ç
</BODY></HTML>
W b S f l HTML tik ti d ö DTD (D t T D fi iti ) bWeb Sayfaları <HTML> etiketinden önce DTD (Document Type Definition) başvurusuda içerebilir. Bu başvuru HTML nin versiyonunu bildirir. Ama çoğu Web Browser bunuotomatik olarak sayfaya ekler. Yani yazmasak ta olur.
<! doctype html public “-//W3C//DTD HTML 4.0 Transdional//EN”“http://www.w3.org/TR/REC-html40/loose.dtd”>
Case-Insensitive: HTML büyük küçük harfe duyarsızdır. <BODY> ile <bOdy>etiketleri arasında bir fark yoktur.
HTML DERSLERİ 1
Yapısal Etiketler (Yapısal Etiketler (StructuralStructural TagsTags))Yapısal etiketler web sayfasında farklı bölümler tanımlamak için kullanılır.Bunlar;Bunlar;
1
Ö k 002 fi t ht
1
Örnek: 002_myfirst.htm
HTML DERSLERİ 1
11
HTML DERSLERİ 1
<META><META>
Birçok seçeneği vardır. Örneğin bir kullanımı, bu belirteç ile sayfanızın içeriğinib h k li l l l il idi W b ü i dyansıtan bazı anahtar kelimeler ve tanımlamalar verilmesidir. Web üzerinde arama
yapan arama motorları sayfaların meta TAG’ına bakarak gruplandırma yaparlar.Bununla ilgili aşağıdaki örneklerii l bili i
1
inceleyebiliriz.
<META NAME="Description" CONTENT="HTML öğrenmek için yararlı bilgiler">1<META NAME="Keywords" CONTENT="html, 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-8858-9">
(Türkçe' nin dahil olduğu dil ailesine ait standard tanımlaması iso-8859-9' dur.)
HTML DERSLERİ 1
11
HTML DERSLERİ 1
11
HTML DERSLERİ 1
11
HTML DERSLERİ 1
<HTML><HEAD><HEAD><TITLE>WEB SAYFAMA HOŞGELDİNİZ (003_link.htm)</TITLE></HEAD><BODY background="bg jpg" bgcolor="gray" text="white"
1
<BODY background= bg.jpg bgcolor= gray text= whitelink="yellow" vlink="aqua" alink="olive" bgproperties="fixed"><H1 align="center">WEB SAYFAMA HOŞGELDİNİZ</H1><HR> 1<HR><H2>Bilgisayar 4 Web Sayfası</H2><HR>İstanbul Üniversitesinin Sayfasına Gitmek İçinİstanbul Üniversitesinin Sayfasına Gitmek İçin<A href="http://www.istanbul.edu.tr">Tıklayınız</A><BR>İstanbul Teknik Üniversitesinin Sayfasına Gitmek İçiny ç<A href="www.itu.edu.tr">Tıklayınız</A></BODY></HTML>
HTML DERSLERİ 1Belge Biçim Etiketleri (Belge Biçim Etiketleri (DocumentDocument FormattingFormatting TagsTags))HTML çok sayıda biçimlendirme etiketi sunar. Bu etiketlerle belgede başlık oluşturur,metni kalın, italik, altçizgili yapar, madde imlerini oluşturur ve yatay çizgileroluşturabilirsiniz. Bunlardan bazıları aşağıdaki tablodadır.ğ
11
HTML DERSLERİ 1
Belge Biçim Etiketleri (Belge Biçim Etiketleri (DocumentDocument FormattingFormatting TagsTags))Belge Biçim Etiketleri (Belge Biçim Etiketleri (DocumentDocument FormattingFormatting TagsTags))
11
HTML DERSLERİ 1
Başlık Etiketlerinin (Header Tags) KullanımıBu etiketin başında ve sonunda Web Browser otomatik olarak satır kırma karakterikullanır.u aÖrnek: 004_header.htm
<HTML><HEAD>
1
<HEAD><TITLE>Header Etiketleri (004_header.htm)</TITLE></HEAD><BODY> 1<BODY><H1>Header 1</H1><H2>Header 2</H2><H3>Header 3</H3><H3>Header 3</H3><H4>Header 4</H4><H5>Header 5</H5><H6>Header 6</H6>H6 Header 6 /H6</BODY></HTML>
HTML DERSLERİ 1
Metin Biçimlendirme Etiketlerinin KullanımıMetin Biçimlendirme Etiketlerinin Kullanımı
Farklı metin biçimleri kullanmak için bu etiketleri kullanırızFarklı 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 tekbir boşluk karakteri olarak algılar Bu yüzden satır kırma için
1
bir boşluk karakteri olarak algılar. Bu yüzden satır kırma için
<P> ve <BR>1
etiketlerini kullanırız.
Örnek: 005_text.htm
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><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><! Bir sonraki etiket ata çi gi ol şt r r >
1
<!--Bir sonraki etiket yatay çizgi oluşturur.--><HR><EM>Vurgu EM (Emphasis) Metni</EM><BR><I>İtalik I (Italic) Gibi Gözüküyor.</I> 1<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<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>B Kadar Metin YeterBu Kadar Metin Yeter.<HR></BODY></HTML>
HTML DERSLERİ 1
<BASEFONT> Etiketi<BASEFONT> EtiketiSayfada başlık olmayan metnin varsayılan fontuna işaret eder. <BASEFONT> unvarsayılan font büyüklüğü 3 tür.a say a o t büyü üğü 3 tüÖrnek:<BASEFONT size=”5” color=”red”>yukarıdaki etiketten sonra sayfada metin büyüklüğü 5 ve rengi de kırmızı olacaktır
1
yukarıdaki etiketten sonra sayfada metin büyüklüğü 5 ve rengi de kırmızı olacaktır.(Aksi belirtilmedikçe)
<FONT> Etiketi<FONT> Etiketi 1Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı etiketidir. Bu etiketinbazı özellikleri;
Si Y b t t il d• 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.0 da yoktur.p y y
HTML DERSLERİ 1
Örnek: 006_font1.htm<HTML><HEAD><HEAD><TITLE>Kaptanın Seyir Defteri</TITLE><META http-equiv="Content-Type" content="text/html; charset=windows-1254"></HEAD>
1
/HEAD<BODY bgcolor="#000000" text="#FFFFFF"><BASEFONT size="5"><H1><IMG src="kaptan.gif" alt="Kaptan" align="absmiddle">Kaptanın1p g p g pSeyir Defteri</H1><BR clear="all">Sayfamıza yukarıdaki gibi *.gif animasyonlar dayerleştirebiliriz.<P><FONT size="3" color="#FF0000">Buradaki metin özellikleri size="3" ve color="#FF0000" dir.</FONT></P>
/BODY</BODY></HTML>
HTML DERSLERİ 1<HTML>
HEAD<BIG> ve <SMALL> <BIG> ve <SMALL> Etiketleri ve Bağlı FontlarEtiketleri ve Bağlı FontlarÖnceki örnekte <FONT> etiketi
<HEAD><TITLE>Bağlı Fontlar (RelativeFonts)(007_font2.htm)</TITLE><META http-equiv="Content-Type" content="text/html;
ile fontun büyüklüğünüayarlamıştık fontun sizeözelliğine +n veya –ndeğerlerini atayarak mevcut
META http equiv Content Type content text/html;charset=windows-1254"></HEAD><BODY>
P B l BODY t idi /P
1
değerlerini atayarak mevcutfontun n fazlası veya n eksiğiolarak ayarlayabiliriz.<BIG> ve <SMALL> etiketleri
<P>Bu normal BODY metnidir.</P><P><FONT size="+1">Bu size="+1" olanmetindir.</FONT></P><P><BIG>Bu metin BIG etiketi ile yazılmıştır.</BIG></P>1da bağlı etiketlerdir. Bu
etiketlerle da sırası ile mevcutfontun bir derece büyüğünü vebir derece küçüğünü yazmak
G u e G e e e ya ş / G /<p><FONT size="+2">Bu size="+2" olanmetindir.</FONT></p><P><BIG><BIG>Bu metin iki tane BIG etiketi ile
l t </BIG></BIG></P>bir derece küçüğünü yazmakmümkündür. Yani <BIG> ile<FONT size=”+1”> ve<SMALL> ile <FONT size=”-1”>
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>
aynı kullanıma sahiptir.
Örnek: 007_font2.htm
y ş<p><FONT size="-2">Bu size="+2" olanmetindir.</FONT></p><P><SMALL><SMALL>Bu metin iki tane BIG etiketi ile
l t </SMALL></SMALL></P>yazılmıştır.</SMALL></SMALL></P></BODY></HTML>
İLK SAYFAMIZBir metin belgesi oluşturun.Dosyayı çift tıklayarak açın ve şunları yazın: ş y
<html><head>
<title>İlk Sayfam</title><title>İlk Sayfam</title></head>
<body>Sayfama HoşgeldinizSayfama Hoşgeldiniz</body></html> Dosyayı kaydedin (Dosya/Farklı Kaydet ) Dosya adı kısmına 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 E l N t N i t ibi) t f d Şö l bi Explorer, Netscape Navigator gibi) tarafından açın. Şöyle bir görüntü elde edeceksiniz:
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 ğ y ğyazılır.
Bir HTML belgesi iki bölüme ayrılıyor: head(baş) ve g y y ( ş)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ü. Ek d ö t il k k l b t l d l Ekranda gösterilecek kısımlar bu tagler arasında yeralıyor. <title>...</title>Title sayfanın başlığını belirtiyor.
Head (Baş) Bölümü<html>
<head><title>Bilgisayar 4 Dersi</title><title>Bilgisayar 4 Dersi</title><meta name="description" content=“Web Sayfası,
Tasarım, Moleküler Biyoloji, Genetik, İstanbul Üniversitesi">
</head>----------
Body (Gövde) Bölümü------<body>
Sayfama Hoşgeldiniz <br>Sayfama Hoşgeldiniz <br><font face="tahoma" size="5" İlkbahar</font><a href="mailto: [email protected]">mail y @
atın</a><img src=“kedi.gif" width=“65" height=“91" >
</body></html> </html>
Meta EtiketiArama motorlarında iyi bir sıralama kapmak için meta etiketleri içerisine yazdığımız notlar çok önemlidir 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 <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, p , y , , , y, ,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">
• Başlık etiketleri: <h1>...<h6>f k /• Paragraf etiketi: <p>...</p>
• Ortalama: <center>...</center>ğ k l• Diğer etiketler:
<b>...</b>,<i>...</i>,<u>...</u>
<BR>Bir satır atlamayı sağlar. /BR ile kapatılmaz.
HTML DERSLERİ 1<B></B> : Koyu YapKoyu YapÖrnek:<B>Bu Yazı Koyudur.</B> => Bu Yazı Koyudur.
<I></I> : Yatık YazıYatık Yazı<I></I> : Yatık YazıYatık YazıÖrnek:<I>Bu Yazı Yatık Yazıdır. </I> => Bu Yazı Yatık Yazıdır.
1
<U></U> : Altı Çizili YazıAltı Çizili YazıÖrnek:<U>Bu Yazı Altıçizili Yazıdır </U> => Yazı Altıçizili Yazıdır1<U>Bu Yazı Altıçizili Yazıdır. </U> => Yazı Altıçizili Yazıdır.
<S></S> : Üzeri Çizili YazıÜ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> =><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 birAradaki metin paragraf özelliği kazanır. Sonlandırıldığında, takip eden metin birsatır boşluk bırakılarak ve satır başına yazılır.
M ti Bi i l diM ti Bi i l di T lT lMetin Biçimlendirme Metin Biçimlendirme Tagları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>H6 Başlık6 /H6
Başlık Etiketleri<html><head>
<title>Başlık Etiketleri</title></head><body>y
<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>
/b d</body></html>
Diğer EtiketlerEtiketleri 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
lt i ili / l k bili<u>altı çizili </u> olarak yazabiliyorum</body></html>
HTML DERSLERİ 1
FONTLARFONTLAR<FONT FACE=.... SIZE=.... COLOR=....> </FONT>face= yazıtipinin adı (arial, tahoma, verdana, ...)size= yazının büyüklüğü (1-7 arası)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 :
1
Örnekler :<font face="tahoma" size="6" color="#008000">İlkbahar</font>
1<font face=" Comic Sans MS " size="4" color="red">Sonbahar</font>
<font face=" Monotype Corsiva " size="5" color=”0000FF ">Mevsim</font>
<font face="Arial" size="3" color="Blue">Kış</font>
<html><html><head><title>Mevsimler</title><title>Mevsimler</title></head><body>y<font face="verdana" size=“7" color="#008000">İlkbahar</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> </html>
• <HEAD>• <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;CHARSET=iso‐• 8859 9">• 8859‐9 >• <META NAME="GENERATOR" Content=“NOTPAD for Windows">• <META NAME="Author" Content=“Mehtap YALÇINKAYA">
META NAME "K d " C t t "d l i HTML d• <META NAME="Keywords" Content="deneme, 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?• 298 93 00298 93 00• <HR>• Hemen üstümde şirin bir çizgi var.• </BODY>• </BODY>• </HTML>
Yukarıdaki kodun ilk satırı SGML (HTML'in atası) sözdizimine göre aşağıdakisatı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ğuvarsayılır.
2. satırda bir HTML açıklaması vardır. HTML commentleri <!-- ile başlar ve -->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).( p ç y g )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 vbelemanların bulunduğu HEAD kısmı açılmaktadırelemanları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-8859-1(L ti 1) ISO 8859 9 (Tü k )'d B Wi d l (i i l i l(Latin1) ve ISO 8859-9 (Türkçe)'dur. Bazı Windows programlarının (isimleri lazımdeğil) kullandığı bir set ise standart olmayan Windows-1254 (Unix'tegörüntülenemeyen bir Türkçe)'dür.6 ö ü ö ü ü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ığı bir8. satırda daha çok AltaVista, HotBot gibi bazı arama makinelerinin kullandığı birbilgi bulunmaktadır. Sözgelimi AltaVista'da arama yapan birinin sizin dökümanınızaulaşmasını istiyorsanız, verebileceği anahtar kelimeleri burada tanımlarsınız.
9. satırda döküman gösterilirken browser'da pencerenin başlığı olarak ne görüleceğibilgisi vardır. Bu bilgi ayrıca sayfanızı bookmark'ına (Navigator) ya da favorites'ine(Explorer) ekleyen kişilerde görülecek olan isimdir.( p ) y ş g10. 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ıngörüntülenirken ana görünümün nasıl olacağı belirlenir. BODY'den sonra gelen 5 elemangörüntülenirken ana görünümün nasıl olacağı belirlenir. BODY den sonra gelen 5 elemansırasıyla şunları ifade eder:
· Düz metin rengi· Arka fon rengiArka fon rengi· Ziyaret edilmemiş linklerin rengi· Ziyaret edilmiş linklerin rengi
F l li k' t kl d ğ d ki (düğ h l b l k ) li k'i i· 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 HTMLstandardında bulunan 16 (Navigator için yüze yakın) renkten birini verir. White, Blue,Gold gibi bir çok renk bulunmaktadırGold gibi bir çok renk bulunmaktadır.Arka fonda resmin kullanıldığı ve tabii ki kullanıcıda gösterilebilen bir resmin olduğudökümanda arka fon renginin işi ne? Internet'e bağlı kullanıcıların bir kısmı hatları yavaşolduğu için resimleri otomatik yüklemezler. Böyle bir durumda dökümanınızın istediğinizeğ ç y y ğen yakın görülebilmesi ve, bazen olduğu gibi siyah üstüne siyah yazan, yani boş gibigörünen bir sayfayla karşılaşmamaları için verilmesi tavsiye edilir.