Maliye Bakanlığı Eğitim Programı:

Maliye Bakanlığı Eğitim Programı:

Konular:

1. Internet Mimarisi (Dr. Altan Koçyiğit)

2. Internet Uygulamaları ve İnternetin Kullanım Alanları (Dr. Altan Koçyiğit)

3. TCP/IP, IP adresleri, alan adları ve URL kavramı (Dr. Altan Koçyiğit)

4. HTTP ve diğer protokoller (FTP, SMTP vb.) (Dr. Altan Koçyiğit)

5. HTML’le giriş (Cüneyt Sevgi)

6. HTML Editörlerinin tanıtımı (MS Frontpage, Macromedia Dreamweaver vb.) (Cüneyt Sevgi)

7. CSS’e giriş (Cüneyt Sevgi)

8. Web sitesi tasarımı (Cüneyt Sevgi)

8.1. Hedef kitlenin beklentilerinin tesbit edilmesi (Cüneyt Sevgi)

8.2. Web tasarımında dikkate alınması gereken hususlar (Cüneyt Sevgi)

8.3. Web içeriğini oluşturacak mataryellerin belirlenmesi (Cüneyt Sevgi)

8.4. İçeriğin sunuma hazır hale getirilmesi (Cüneyt Sevgi)

8.5. Ana sayfa tasarımı (Murat Yakıcı)

9. Çoklu ortam araçlarını (Adobe Photoshop, Macromedia Flash vb.) kullanarak içerik için gerekli olan materyallerin hazırlanması (Murat Yakıcı)

HTML’le giriş (Cüneyt Sevgi)

HTML (Hyper Text Markup Language) internet ortamında döküman yaratmak ve metin anlamlandırma için geliştirilmiş bir programlama dilidir.

Dil derken "C, Delphi, Java, Visual Basic" gibi yüksek seviyeli programlama dillere benzetilmemeli. HTML kullanarak, yukarıda adı geçen yüksek seviyeli dillerde olduğu gibi derleyip (compile) çalıştırabileceğimiz bir bilgisayar programı yazmak mümkün değildir.

ÖNEMLİ: HTML'nin temel kullanım amacı web dökümanları hazırlamaktır.

Temel olarak HTML; web sayfası hazırlamak için elimizdeki normal bir dökümanı şekillendirmeye yarayan küçüktür/büyüktür(tag=etiket) işaretleri arasında ifade edilen birtakım harf/harfler/kelimelerden yani komutlardan ibarettir. Bu komutlara çeşitli yayınlarda tag, etiket, element, veya im gibi isimler verildiğini görülebilir. Derslerimizin bundan sonraki kısımlarında HTML elemanlarını ETİKET ismiyle anacağız. (Ayrıntılar için: http://www.w3.org)

ÖNEMLİ: HTML dökümanı bir text dosyadır ve tek başına bir yazı olmaktan öteye gidemez. Ancak her hangi bir web tarayıcısı (Browser'ımızı: Microsoft Internet Explorer, Netscape Navigator, Opera vb) yardımıyla çalıştırıldığında içerdiği komutlara göre ve de tarayıcı programın desteklediği özelliklere göre, hazırlanan dökümanlar bir anlam kazanır.

ÖNEMLİ: HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz. HTML’nin temel mantığını kısaca "Ne görürseniz onu alırsınız" (What you see what you get) şeklinde açıklanabilir.

Günümüzde HTML sayfaları hazırlamak için bir çok görsel program vardır. (Microsoft FrontPage, HotDog, Macromedia Dreamweaver vb) Bu tür programlarla HTML sayfaları hazırlamak çok kolay ve hızlı olmakla beraber HTML kodlarını da yine bu programlar üretmektedir.

Neden HTML öğrenmeliyim?

Hazır programların olması, kodların el değmeden programlar tarafından yazılması elbette daha güzel, daha kolay ve daha hızlıdır. Ancak hazırlanan sayfaların nasıl oluştuğunu, nasıl çalıştığın, arka planda nelerin olduğunu bilmeden, ezberci bir zihniyet kullanmak bir program geliştirici mantığına terstir. Bu tür programlar hemen her yerde bulunamayabilir.

Dökümanların değiştirilmesi gereken yerlerde eğer hazırladığınız program yoksa ve de HTML dilini biliyorsanız her hangi bir editörden dökümanınıza müdahale edebilirsiniz.
HTML dökümanı hazırlamak için her hangi bir text dosya yazabilecek bir editör olması yeterlidir. Bütün yapılması gereken dökümanı HTML kurallarına uygun bir şekilde yazmak ve de dosyayı ".htm, ya da .html" olarak kaydetmektir. Dosya uzantısındaki "l" harfinin olup olmaması farketmez. Bu durum sunucunun UNIX veya DOS tabanlı olup olmamasından kaynaklanan bir husustur.

Bu arada, kullanılan teknolojiye veya dökümanın tipine bağlı olarak web dökümanlarının dosya uzantılarının ".shtml, .uhtml, .asp, .sgm, .pl, .htmlx, .cgi, .php, .jsp, .cfm" ... gibi çeşitli şekillerde olabileceğini de bilmemiz faydalı olacaktır.

HTML dökümanlarını ne derlemeye, (compile) ne de ".exe" gibi dosya çevirme işlemlerine gerek vardır. HTML dosyası hazırdır. Artık tek yapılması gereken hazırlanan bu dosyanın bir web tarayıcı programı tarafından çağrılmasıdır. Herhangi bir internet erişim programından bir HTML dökümanının kodlarını görmek için:

1) MS Internet Explorer’da Mouse’un sağ butonuna basınız. ‘view source’ seçeneğini seçiniz.

2) MS Internet Explorer’da göster (view) menüsünden source (kod) seçeneğini seçiniz.

3) Netscape’de Mouse’un sağ butonuna basınız. Özellikler menüsünden kodu göster (view source) seçeneğini seçiniz.

HTML'yi Kavramak

HTML dökümanları ASCII formatında (plain-text) dosyalardır. Bir başka deyişle, bildiğimiz basit .txt dosyası formatındadırlar. Bu nedenle herhangi bir text editörü (Notepad, SimpleText, vi, Emacs vb) ile HTML kodlaması yapılabilir ve web dökümanı (web sayfası) oluşturabiliriz.

MALİYE BAKANLIĞI VE ODTÜ SÜREKLİ EĞİTİM MERKEZİ BİLGİSAYAR KURSLARI

Şimdi biz bu metni bir WEB DÖKÜMANI (Web Sayfası) haline getirmek istesek ne yapmalıyız?

Yukarıdaki metin parçası text belgesi olarak bilgisayarımızın Not Defterinde (Notepad) açık iken; bu belgeye bir önceki sayfada "maliye1.html" ismiyle sözünü ettiğimiz birtakım işaretlerden ekleyeceğiz.

<html>

<head>

</head>

<body>

<b>

MALİYE BAKANLIĞI VE ODTÜ SÜREKLİ EĞİTİM MERKEZİ BİLGİSAYAR KURSLARI

</b>

</body>

</html>

Bir HTML dökümanının iskelet yapısı: (Global Structure)

HTML ile kodlanmış herhangi bir web sayfasının kaynak kodları incelenirse istisnasız bütün sayfaların kod bazında ikiye ayrıldığını ve dökümanın bir "BAŞ (Head)" kısmı ile bir "GÖVDE (Body)" bölümünden oluştuğunu görebiliriz.

BAŞ BÖLÜMÜ:

Bir HTML dökümanında <head> ... </head> etiketleri arasındaki alanı ifade eder. Bu alan, öncelikle dökümanın kendisi hakkında bilgilerin belirtildiği alandır. Özellikle arama motorları gibi hizmet birimlerine bilgi sağladığı için bu kısmın ayrı bir önemi vardır. Bu nedenle burada yapılacak kodlamaya özen göstermek gerekir.

Bu bölümde <title>, <meta>, <base>, <link> gibi etiketler kullanılarak dökümanın başlığı, dili, yazarı, yayıncısı, keywords bilgileri gibi hususlar belirtilir. Burada yapılan bilgi amaçlı kodlamalar sayfanın görünümüne direkt etki yapmaz. Ancak burada temel etiketlerden başka ayrıca örneğin DHTML uygulanacaksa JavaScript kodları veya Stil tanımlamalarına da yer verilebilir. Bu durumda sayfa görünümüne ve işleyişine endirekt müdahale yapılmış olur.

GÖVDE BÖLÜMÜ:

Sayfanın görünümü ve içeriğin sunumuyla ilgili bütün tasarımcılık olayının gerçekleştiği yer burasıdır. Sayfanın tarayıcılarda nasıl görüneceği ve içinde nelerin olacağı burada yapılacak kodlamalarla tayin edilir.

W3C'ye Göre Global Structure;

Aslında bu iskelet yapısında göstermemiz gereken bir bölüm daha var. W3C Konsorsiyumunun açıklamalarında bir HTML dökümanı 3 kısma ayrılmıştır. Biz de bu açıklamaya sadık kalalım ve bir HTML dökümanının bölümlerini son şekliyle aşağıda gösterelim;

Burada kullanılan etiketler ve anlamları şöyle:

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: 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. Meta etiketleri için meta etiketi notlarına bakınız!

<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 sayfanın başlığını belirtiyor. Burada yazılanlar web tarayıcısının üst tarafında web tarayıcısı adıyla beraber gösteriliyor.

<body>....</body> arasına yazdığımız ‘MALİYE BAKANLIĞI VE ODTÜ SÜREKLİ EĞİTİM MERKEZİ BİLGİSAYAR KURSLARI ı’ yazısı web tarayıcısının varsayılan metin ayarlarıyla gösteriliyor.

ÖNEMLİ: Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorundadır.

Syntax: <komut>
...

</komut>

Bir HTML sayfası <Html> komutuyla başlar ve de sayfa sonunda </Html> komutuyla biter. Sayfayla ilgili bilgiler (Başlığı, hangi program kullanılarak yapıldığı...) <Head> komutu yazıldıktan sonra verilir ve de bilgiler bitince </Head> komutuyla kapatılır.

Sayfada gösterilecek bilgiler <Body>...</Body> komutları arasında yazılır.

Örnek : <Html>

<Head>

<Title>Maliye Bakanlığı Deneme Sayfası</Title>

</Head>

en büyük Cim Bom Bom</Body>

</Html>

Yukarıda verilen örnek her hangi bir editörde yazılıp, ".html" ya da ".htm" uzantılı olarak kaydedilir ve herhangi bir internet programından çağrılırsa ekranda " en büyük Cim Bom Bom " yazısı çıkacaktır. Çalıştırdığınız internet programının başlık kısmında da " Maliye Bakanlığı Deneme Sayfası" başlığı gözükecektir.

ÖNEMLİ: HTML de açıklama satırı  şeklinde kullanılır. Yazılan açıklama sadece kodun içinde gözükür. Sayfa çağrıldığında gözükmez. Yazdığınız program kodlarının ne anlama geldiğini anlamanız veya başka biri tarafından bakılan kodlarınızın anlaşılabilmesi bakımından bol bol açıklama (comment) satırı koyulması tavsiye edilir.

<Body> komutu yardımıyla sayfanın arka rengini, arkaya konulacak resmi, bağlantıların (Hyperlinks) rengini, sayfanın yukarı ve sol tarafa göre konumları belirtilebilir.

ÖNEMLİ: Bir komutun yanına eğer varsa parametreler komut kapatılmadan ">" önce verilir. Komut kapatılıncaya kadar bu parametreler geçerliliğini korur. !

Background = url sayfanın arka planında bulunacak resmi tanımlamaya yarar. URL (Uniform Resource Locator) resmin adresini gösterir.

Bgcolor = color sayfanın arka planının rengini gösterir. Color rengin hexadecimal karsılığı, RGB(RedGreenBlue) değeri ya da rengin ismi olabilir.

Bgproperties = fixed sayfanın arka planındaki resmin web tarayıcısının boyutlarından etkilenmemesini sağlar.

Leftmargin = n sayfanın sol kenardan ne kadar uzakta olacağını belirler.

Link = color sayfada bulunan bağlantıların (Hyperlinks) rengini belirler.

Text = color sayfadaki yazıların rengini belirler.

Topmargin = n sayfanın üst kenardan ne kadar uzakta olacağını belirler.

Alink = color Aktif olan yani o an seçili olan bağlantının (Hyperlink) rengini belirler

Vlink = color Ziyaret edilen bağlantıların (Hyperlinks) renklerini belirtir.

ÇOK ÖNEMLİ: HTML'de komutların büyük ya da küçük harfle yazılma zorunluluğu yoktur.!

Başlık koymakla dökümanınızın içeriği hakkında bilgi vermiş olur ve dökümanınıza olan ilgiyi artırabilirsiniz. HTML de bu bakımdan başlık tanımlamaları için özel komutlar vardır. Yazdığınız yazının başlık olduğunun belli olması için <h1> ... </h1>. komutları arasına yazılır. H harfleri İngilizce'deki "Heading" kelimesinden gelmektedir. H harflerinin yanlarındaki nokta ise bir sayı değeri alır ve bu değerde yazının büyüklüğünü belirler. HTML de 6 tip başlık (heading) büyüklüğü vardır.

<h1> ... </h1>  Büyük yazı, ana başlıklar

<h2> ... </h2>  Orta yazı, alt başlıklar

<h3> ... </h3>  Küçük yazı

...

<h6> ... </h6>  En küçük yazı

Örnek

<html>

<body>

<h1> H1’in büyüklüğü ile diğer headerlarin büyüklüklerini karşılaştırın </h1><br>

<h2> H2’in büyüklüğü ile diğer headerlarin büyüklüklerini karşılaştırın </h2><br>

<h3> H3’in büyüklüğü ile diğer headerlarin büyüklüklerini karşılaştırın </h3><br>

<h4> H4’in büyüklüğü ile diğer headerlarin büyüklüklerini karşılaştırın </h4><br>

<h5> H5’in büyüklüğü ile diğer headerlarin büyüklüklerini karşılaştırın </h5><br>

<h6> H6’in büyüklüğü ile diğer headerlarin büyüklüklerini karşılaştırın </h6><br>

</body>

</html>

ÖNEMLİ: <br> komutu programda bulunduğu yerden itibaren alt satıra geçişi sağlar. Bu komutun </br> ifadesi yoktur.!

Uzun bir satır yazmak istiyorsunuz ve de bu satırın birkaç satıra bölünmesini istemiyorsunuz. Bunun için <NoBr> (NoBreak) komutunu kullanabilirsiniz.

Örnek :

<html>

<body>

ÖNEMLİ NOT: <NoBr>Uzun bir yazınız var ve de yazınızın birkaç satıra bölünmesini istemiyorsanız NOBR komutunu kullanabilirsiniz. Eğer NOBR komutunu kullanmazsanız internet servis sağlayıcınızın boyutuna göre yazınız satırlara ayrılacaktır. </NoBr>

</html>

</body>

Bazı Yazım Formatları:

<b> ... </b> Kalın "Bold" , kalın koyu"bold"

<i> ... </i> Eğik "Italic" eğik "italic"

<u> ... </u> Altı çizgili "Underline" altı çizgili "underline"

<big> ... </big> Büyük büyük "large"

<small> ... </small> Küçük

Yazı veya resimlerinizi kısaca dökümanlarınızda kullanacağınız nesneleri ekranın sağına, soluna ve ortasına koyabilmeniz için <align =...> komutu kullanılır. Bu komutun kullanımını biraz detaylı olarak inceleyelim.

<p align = left> </p> Objeleri ekranın soluna yerleştirir.

<p align = right> </p> Objeleri ekranın sağına yerleştirir.

<p align = center> </p> Objeleri ekranın ortasına yerleştirir.

ÖNEMLİ: <p> ..</p> komutu arasında kalan tüm nesneler (yazı, resim, ...) paragraf gibi ayrılır.

HTML de tüm nesneler aksi belirtilmedikçe ekranın solundan itibaren gösterilir. Yani soldan başlayarak yazı yazmak için <align = left> komutunu kullanmanıza gerek yoktur.

Örnek :

<html>

<body>

<h2> <ALIGN=LEFT> Komutu</h2>

Aksi belirtilmedikçe yazılar ekranın sol tarafına yerleştirilir.<br>

Yazınızı soldan başlayarak yazmak için <ALIGN=LEFT> <br>

komutunu kullanmanıza gerek yoktur.<br>

<h2 align = right> <ALIGN=RIGHT> Komutu</h2>

<p align = right>Yazınızı ekranın sağına yerleştirir.</p>

<h2 align = center> <ALIGN=CENTER> Komutu</h2>

<p align = center>Yazınızı ekranın ortasına yerleştirir.</p>

</body>

</html>

Bazı Özel karakterler:

Yazının içerisinde eğer komut isimleri kullanılacaksa karışıklık olmaması için bu komutlar yerine İngilizce kısaltmalarından yararlanılarak özel komutlar oluşturulmuştur. " < " için < (less than), " > " için > (greater than) gibi. Diğer sembollerin nasıl ifade edildiğini görmek için özel karakterlere bakmakta fayda var..

< Küçüktür İşareti <

> Büyüktür İşareti >

& Ampersand &

" Çift Tırnak "

@ At &#64

® Registered &#174

Bir Boşluk &nbsp

Font etiketinin kullanımı;

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ığı ya da RGB renk değeri)

<html>
<head>
<title>Renkler ve Mevsimler</title>
</head>
<body>
<font face="tahoma" size="5" color="#008000">Rüştü</font>
<br>
<font face="verdana" size="5" color="#ff0000">Veli</font>
<br>
<font face="arial" size="5" color="#ffff00">Emre</font>
<br>
<font face="comic sans ms" size="5" color="#0000ff">İsmet</font>
<br>
</body>
</html>

Yukarıdaki örnekte de gördüğünüz gibi bu işi renk kodları kullanıldı. Aslında bunun bir yolu daha var o da renk kodu yerine rengin ingilizce adını yazmaktır (color="red" gibi).

Bazı Renklerin Tanımı:

Bazı renk kodunu silin ve rengin ingilizce karşılığını yazın.

Kırmızı-red
Mavi-blue
Siyah-black
Sarı-yellow
Lacivert-navy
Yeşil-green

Web sitesine Resim eklemek:

Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yoktur

Yapmamız gereken web tarayıcısına sayfaya koyacağı resmin nerede olduğunu göstermekten ibarettir.

Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz yararlı olacaktır. Kullanacağımız etiket şu şekilde olacak;

Burada x resmin enini y ise boyunu belirtiyor. Bu bilgileri, resmi herhangi bir grafik editörüyle açarak öğrenebilirsiniz.

Resim Yerleştirirken Dikkat Edilecek Noktalar:

Örneğin; resmimizin adı unlem.gif eni 238, boyu da 211 piksel, eğer bu resim html sayfamızla aynı dizinde duruyorsa sorun yok, kod aynen şu şekilde olmalı:

html dosyası c:\html_ders dizininde resimler de c:\html_ders\resim dizininde. Bu durumda web tarayıcınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanabiliriz;

Bölü işaretinin yönüne dikkat edin. Bu Windows'ta ya da Dos'ta dizinler için kullandığımız ters bölü işaretinin tersi, yani normal bölü işareti. HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır. (../ali/veli/resim.gif)

Bu şekilde istediğimiz kadar alt veya üst dizine ulaşabiliriz.

Bir metinle kullandığınızda ise buradaki gibi bir sonuç alabilirsiniz, hizalama komutu resmi bu sefer metni gözönüne alarak hizalayacaktır.

Artalana Resim Koyalım:

Artalanı renklendirmeyi öğrenmiştik: <body bgcolor="...."> ifadesiyle bu işi kolayca yapıyorduk. Bu ifadeyi şu şekilde yazarsak resmimiz artalana döşenecektir.

Kullandığımız resme yakın tonda bir rengi bgcolor ifadesinin karşısına yazmayı ihmal etmemek faydalı olacaktır. Bunun yanında background ifadesinin karşısına yukarıda anlattığımız kurallar çerçevesinde istediğimiz resmi koyabiliriz.

Fakat bu sefer en ve boy ifadesini kullanmamıza gerek yok. Seçtiğimiz resim web tarayıcısı tarafından tüm sayfayı kaplayacak şekilde sayfaya yerleştirilecektir.

Resme alternatif metin eklemek

Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer web tarayıcısını sadece metinleri göstermek üzere ayarlamışsa, resim yerine alternatif açıklama görüntülenecektir.

alt="..." parametresiyle açıklama ekliyoruz, bu açıklama aynı zamanda kullanıcı mouse imlecini resim üzerine getirdiğinde sarı bir çerçeve içinde görüntülenir. Aşağıdaki örneğe bakınız.

browser resimleri göstermemek üzere ayarlanmışsa, alt parametresi ile verdiğimiz 'kum saati' açıklaması ziyaretçiye bilgi verecektir ziyaretçi fare imlecini resim üzerine getirdiğinde sarı çerçeve içinde açıklama görüntülenecektir

Linker (Bağlantılar):

HTML'de en önemli unsurlardan birisi olan bağlantılardır(linkler). Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir tıklama bizi istediğimiz yere götürecektir. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür.

Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkün.

<a href="ayse.gif"> buraya tıklandığında ayse resmi açılacak </a>

Birinci örnekte "buraya tıklandığında ayse resmi açılacak" yazısına bağlantı özelliği kazandırdığımızdan web tarayıcısı tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı mouse imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladığında web tarayıcısı o anda açık bulunan sayfa ile aynı dizinde bulunan ayse.gif resmini açacaktır.

Doğal olarak, dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır.

<a href="veli.doc">.doc dosyalarını çekmek için tıklayın </a>

İkinci örnekte aynı şekilde ".zip dosyalarını çekmek için tıklayın " yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte ayse.gif'e tıklandığında web tarayıcısı resmi açacaktır fakat bu örnekte web tarayıcısı kullanıcıya ali.zip dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi web tarayıcısının htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyememesidir.

<a href="consolesuz_music.htm"> diger sayfaya gitmek için tıklayın </a>

Diğer örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa isimli başka bir html dökümanı açılacaktır.

<a href="http://www.ii.metu.edu.tr/"> tıklayın sitemizi ziyaret edin!!! </a>

Başka örnekte bir internet adresi verdik.

<a href="ftp://ftp.metu.edu.tr/"> tıklayın dosyaları indirin </a>

Bu ise bir ftp adresine verilen link örneği.

Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.

<a href="#...">...</a>

<a name="....">...</a>

Sayfa içi (dahili) linkleri bu komutu kullanarak hazırlayabiliriz. Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konu açılsın.

<a href="sayfa2.htm#ilgiliyer"> Bu linke tıklandığında başka bir sayfanın ilgili kısmı açılacak </a>

<a name="ilgiliyer"> Başka bir sayfadaki linke tıklandığında burası açıldı </a>

Resimlere bağlantı özelliği kazandırmak:

Resimlere nasıl link vermek için resmi yerleştirmek için kullandığımız:

<img src="..." width="x" height="y"> etiketini <a href>...</a> etiketinin arasına alıyoruz.

unlem.gif tıklanacak resmi, renkler.html resme tıklandığında açılacak sayfayı gösteriyor. Border komutu ise resimde bağlantı özelliği olduğunu belirten çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu komutu değişik sayılarla deneyebilirsiniz.

Target parametresi:

Son olarak bağlantının açılacağı pencereyi belirtmek için kullanılan target parametresini öğrenelim. Kullanımı :

target="_blank" Bağlantı yeni bir pencerede açılır.

target="_self" Bağlantı aynı pencere içerisinde açılır.

target="_top" Bağlantı aynı pencere içerisinde en üstten itibaren açılır.

target="_parent" Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.

target="çerçeve adı" Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.("Çerçeveler" ders notlarında bu konuya daha çok ayrıntısı ile değineceğiz konusunda tekrar değineceğiz.)

Tablolar(Table Kavramı):

Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir.

Bu kadar örnek yeterli, şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle <table>...</table> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <tr> (table row) etiketi ile satırları <td> (table data) etiketi ile de sütunları oluşturuyoruz.

hücre

<table border="1">
<tr>
<td>hücre</td>
</tr>
</table>

hücre1

hücre2

<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1">
<tr>
<td>hücre1</td>
<tr>
</tr>
<td>hücre2</td>
</tr>
</table>

hücre1	hücre2
hücre3	hücre4

<table border="1">
<tr>
  <td>hücre1</td>
  <td>hücre2</td>
</tr>
<tr>
  <td>hücre3</td>
  <td>hücre4</td>
</tr>
</table>

Tabloda başlık ve gövde:

Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir açıklama vermek mümkündür.

Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir ve bunlar <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır.

Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır.

Yukarıdaki örneklerden birisini değiştirerek bu anlattıklarımızı uygulayalım;

<thead>MALIYE KURULUSLARI TABLOSU:</thead><comment>TABLO BASLIKLARI</comment>

<br>

<caption align="bottom">TABLO 15.1<caption>

<tr>

<th>SEHIR</th>

<th>PLAKA</th>

</tr>

<tr>

<td>ANKARA</td>

<td>CANKAYA</td>

</tr>

<tr> <td>ISTANBUL</td>

<td>BESIKTAS</td>

</tr>

<tr> <td>IZMIR</td>

<td>ALSANCAK</td>

</tr>

</tbody>

</table>

Tablo Başlığı (thead)

alt-yazı (caption)

1.Sütun

2.Sütun

3.Sütun

Parametreler:

border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.

hücre

<table border="0">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="2">
<tr>
<td>hücre</td>
</tr>
</table>

cellpadding parametresi hücre içi margin değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.

hücre

<table border="1" cellpadding="0">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="1" cellpadding="5">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="1" cellpadding="10">
<tr>
<td>hücre</td>
</tr>
</table>

cellspacing parametresi hücreler arası margini belirler.

hücre1

hücre2

<table border="1" cellspacing="1">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" cellspacing="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" cellspacing="10">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar

hücre1

hücre2

<table border="1" align="left">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.

<td> etiketi için parametreler:

bgcolor parametresi hücreyi renklendirmede kullanılır.

<tr> <td bgcolor="#ff0000">GALATASARAY</td></tr>

<tr> <td bgcolor="#0000ff">FENERBAHCE</td></tr>

<tr> <td bgcolor="#ffff00">KANARYA</td></tr>

</table>

background parametresi ile hücreye grafik-artalan yerleştirebiliriz.

<tr> <td background="unlem.gif">hücre1</td></tr>

<tr> <td background="ayse.gif">hücre2</td></tr>

<tr> <td background="unlem.gif">hücre3</td></tr>

<tr> <td background="ayse.gif">hücre4</td></tr>

</table>

width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz.En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır.

align parametresi hücre içinde yatay hizalama yapar.

<tr><td width="100" align="left">sola dayali</td></tr>

<tr><td width="100" align="center">ortada</td></tr>

<tr><td width="100" align="right">saða dayalý</td></tr>

</table>

Hücrelerin Birleştirilmesi:

Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz.

Ali	Veli	Mahmut	Hasan
Oya	Beril	Deniz	Halit
Murat	Erkin	Kamil	Recep

<tr><td>Ali</td><td>Veli</td><td>Mahmut</td><td>Hasan</td></tr>

<tr><td>Oya</td><td>Beril</td><td>Deniz</td><td>Halit</td></tr>

<tr><td>Murat</td><td>Erkin</td><td>Kamil</td><td>Recep</td></tr>

</table>

Yukarıdaki tabloda;

Ali ve Veli hücrelerini birleştirmek için Ali hücresine ait <td> etiketine colspan=2 parametresini ekliyoruz ve Veli hücresine ait <td>Veli</td> etiketini siliyoruz. Oya Beril ve Deniz hücrelerini birleştirmek için Oya hücresine ait <td> etiketine colspan=3 parametresini ekliyoruz ve Beril ve Deniz hücrelerine ait <td>Oya</td> , <td>Deniz</td> etiketlerini siliyoruz.

Ali		Mahmut	Hasan
Oya			Halit
Murat	Erkin	Kamil	Recep

<tr><td colspan="2">Ali</td><td>Mahmut</td><td>Hasan</td></tr>

<tr><td colspan="3">Oya</td><td>Halit</td></tr>

<tr><td>Murat</td><td>Erkin</td><td>Kamil</td><td>Recep</td></tr>

</table>

Aynı şekilde Oya ve Murat hücrelerini birleştirmek için Oya hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz ve Murat hücresine ait <td>Murat</td> etiketini siliyoruz. Mahmut Deniz ve Kamil hücrelerini birleştirmek için Mahmut hücresine ait <td> etiketine rowspan=3 parametresini ekliyoruz ve Deniz ve Kamil hücrelerine ait <td>Deniz</td>, <td>Kamil</td> etiketlerini siliyoruz.

Ali	Veli	Mahmut	Hasan
Oya	Beril		Halit
Oya	Erkin		Recep

<td rowspan="3">Mahmut</td><td>Hasan</td></tr>

<tr><td rowspan="2">Oya</td><td>Beril</td><td>Halit</td></tr>

<tr><td>Erkin</td><td>Recep</td></tr>

</table>

HTML Sayfalarında Müzik:

Html'den müzik çaldırmanın iki yolu vardır. Birincisi mouse ile bir yere tıklandığında ve sayfa yüklendiğinde çalan müzik.

Foreground Music (Link Altına Müzik Dosyası Koymak): Mouse ile bir yere tıklandığında müzik çaldırmanın en kolay yolu; bir link 'in altına müzik dosyasını koymaktır. Aşağıdaki kodu inceleyin lütfen.

<a href = "ali.mid">Müziği Dinlemek İçin Tıklayın</a>

Çalınacak müzik dosyası "mid" uzantılı olmak zorunda değildir,"au" veya"wav" uzantılı da olabilir. Fakat "wav" uzantılı bir müzik dosyasını indirmek sayfanıza giren kişinin çok zamanını alabilir.

Ayrıca yukarıdaki örnekteki "ali.mid" yerine müzik dosyasının ismi ile birlikte yerinin de yazılması gerektiğini unutmayın .(Örneğin; "../sounds/ali.mid" gibi.)

Html kodunda müzik dosyasını belirtirken, dosya ismindeki büyük-küçük harfe dikkat edilmelidir . Örneğin; "ali.mid" ile "ALI.mid" aynı şeyler değildir.

Background Music (Fon Müziği)

İkinci yol ise sayfa yüklendiğinde fon müziği olarak müzik çalmasıdır.

I.E ve Netscape' in geri planda müzik çalmayı sağlayan html tag'leri birbirinden farklıdır. Sayfanızın daha fazla kişi tarafından kullanılabilirliği açısından bunu göz önünde bulundurmanızda fayda var.

Netscape için <embed>

I.E için <bgsound> tag' i kullanılır.

Örnek : Sayfa yüklendiğinde, ebatlarını belirttiğimiz, üzerinde "play" ve "stop butonları" olan bir konsol çıkar. Sayfa yüklenir yüklenmez müzik başlamaz "play" butonuna basılarak müziğin başlatılması gerekir.

</noembed>

Yukarıdaki <noembed> tag' ini kullanılması web tarayıcısının I.E olması durumunda da müzik çalınabilmesini sağlar. Web tarayıcısı <embed> tag' ini anlamazsa <noembed> içindeki kodu çalıştırır ve web tarayıcısı I.E ise müzik çalınır.

Örnek : Sayfa yüklenir yüklenmez müzik başlar ve bir kez çalınır.

</noembed>

Örnek : Sayfa yüklenir yüklenmez müzik başlar ve sayfa açık olduğu sürece çalmaya devam eder. Ayrıca sayfada, boyutları standart, küçük bir konsol çıkar.

</noembed>

Örnek : Ekranda herhangi bir konsol görünmesini istemiyorsanız, aşağıdaki kodu kullanmalısınız.

</noembed>

Konsolu saklarsanız ve "loop = true" seçerseniz, sayfanızı ziyaret kişi, sayfada kaldığı süre boyunca aynı müziği tekrar tekrar dinlemek zorunda kalacaktır. Bu da ziyaretçinin hoşuna gitmeyebilir.

Referanslar:

· Macromedia Dreamweaver Ultradev 3 ile Web Tasarımı, Yazan: Yavuş Gümüştepe

· Adım Adım FrontPage sürüm 2002, Microsoft Yayınları, Online Training Solutions Inc.

· Microsoft FrontPage 2000 ile Çalışmak, Yazan: Jim Buyens

· http://www.w3.org

· http://www.webteknikleri.com

· http://www.tasaryum.com

· http://www.programlama.com

· http://www.evrsoft.com/1stpage/

· http://www.macromedia.com/software/dreamweaver/

· http://www.editplus.com/