Arkadaşlarınızla Sınırsız Paylaşım Ve Eğlence Için Seviyeli Bir Forum Ve Arkadaşlık Portalı TurkMania Sizleri Bekliyor.
Üye Değilseniz Kayıt Ol Linkinden Kayıt Olabilirsiniz.Bu ilk Ziyaretinizse Yardım Linkinden Yararlanabilirsiniz. Tüm Ozelliklerimizden Yararlanmak Için Lütfen Üye Olun....
EN IYI PAYLASIM SITESI
Sessizligin Bozuldugu Yer
FORUMUMUZA KAYIT OLAN 400 CU UYEMIZE V.I.P UYELIK HEDIYE VERIYORUZ !!! Forumumuza 500 cu uye olarak kayit yapan kisiye 2 aylik V.I.P Uyelik Hediye Veriyoruz TürkMania Yönetimi
"TürkMania | PayLa$im Platformu Fan Grubu"
"Türkmania Community @ Twitter"
https://twitter.com/TurkManiaForum
"Türkmania Community @ Facebook"
Türkmania Community
TürkMANİA | Türkiye'nin En Seviyeli Forum Sitesi
Arkadaşlarınızla Sınırsız Paylaşım Ve Eğlence Için Seviyeli Bir Forum Ve Arkadaşlık Portalı TurkMania Sizleri Bekliyor.
Üye Değilseniz Kayıt Ol Linkinden Kayıt Olabilirsiniz.Bu ilk Ziyaretinizse Yardım Linkinden Yararlanabilirsiniz. Tüm Ozelliklerimizden Yararlanmak Için Lütfen Üye Olun....
EN IYI PAYLASIM SITESI
Sessizligin Bozuldugu Yer
FORUMUMUZA KAYIT OLAN 400 CU UYEMIZE V.I.P UYELIK HEDIYE VERIYORUZ !!! Forumumuza 500 cu uye olarak kayit yapan kisiye 2 aylik V.I.P Uyelik Hediye Veriyoruz TürkMania Yönetimi
"TürkMania | PayLa$im Platformu Fan Grubu"
"Türkmania Community @ Twitter"
https://twitter.com/TurkManiaForum
"Türkmania Community @ Facebook"
Türkmania Community
TürkMANİA | Türkiye'nin En Seviyeli Forum Sitesi
Would you like to react to this message? Create an account in a few clicks or log in to continue.
TürkMANİA | Türkiye'nin En Seviyeli Forum Sitesi
Hoşgeldiniz : En son ziyaretiniz : 1/1/1970 Mesaj Sayınız : 16777215
Şırnak'ın Cudi Dağı'nda güvenlik güçleri ile bölücü terör örgütü mensupları arasında çıkan çatışmada 4 polis şehit oldu.
Şırnak'ın Cudi Dağı'nda güvenlik güçleri ile bölücü terör örgütü mensupları arasında çıkan çatışmada, 4 polis şehit oldu.
PKK terör örgütü, Şırnak ile Silopi arasında bulunan Cudi Dağı'nda güvenlik güçlerine pusu kurdu. Teröristler, uzun namlulu silahlarla ateş açtı. Güvenlik güçleri, karşılık verdi. Çatışmada 4 polis şehit oldu.
Yaralı polislerin helikopterle Şırnak Asker Hastanesi'ne kaldırıldığı öğrenildi.
Konu: Baştan Sona Html Bilgilerimizi Yoklayalım ;) 3/3/2012, 07:18
Etiketler (Tag) ve Parametreler (Attribute)
HTML'in bir programlama dili kadar karmaşık olmasa da kendine has bir kodlama biçimi vardır ve bu kodlara/komutlara da etiket (tag) denir.
Etiketleri kullanma mantığı oldukça basittir. Örneğin bir metni koyu görüntülemek istediğimizde bu metnin başına Browser'a metnin koyu görüntüleneceğini bildiren etiketi yazarız ve metnin sonunda bu etiketi sonlandırırız. Sonlandırılmayan istisnai etiketler de vardır, fakat büyük çoğunluk itibariyle etiketler sonlandırılır. Özetle; bir etkinin başlamasını istediğimiz yerde ilgili etiketi yazıyor, bitmesini istediğimiz yerde de bu etiketi sonlandırıyoruz.
Etiketleri küçüktür (<) büyüktür (>) sembolleri arasında gösteriyoruz. Örneğin
Kod:
<html>
bir etikettir. Her HTML dosyası bu etiketle başlar ve
Kod:
</html>
etiketi ile sonlandırılır. Bölü işareti o etiketin sonlandırıldığı anlamını taşır.
Bazı etiketlerin kontrol edilebilir bir takım özellikleri vardır. Bunlara o etiketin parametresi (attribute) diyebiliriz. Örneğin metnin yazı türü ayarlarını değiştirmemizi sağlayan
Kod:
<font>
etiketinin yazı türü ailesinin adını belirttiğimiz face, rengini belirttiğimiz color, büyüklüğünü belirttiğimiz size gibi parametreleri vardır.
Bu etiketlerin çoğunluğu en yaygın iki Browser olan Microsoft Internet Explorer ve Netscape Navigator tarafından desteklenirken, bir kısmı bu iki Browser'dan yalnızca birisi tarafından destekleniyor. Bu konuyla ilgili kitapçığın sonundaki Browser etiketlerin uyumluluklarını gösteren tabloyu referans olarak kullanabilirsiniz...
Hangi HTML Editörünü Kullanmalıyım?
HTML dosyaları metin içerikli dosyalardır, dolayısıyla herhangi bir metin düzenleme veya kelime işlem programı HTML sayfa oluşturmak için kullanılabilir. Burada dikkat edilmesi gereken nokta, oluşturulan dosyayı kaydederken kayıt türü olarak "salt metin" türünü seçmektir. Bu ayar, programın kayıt penceresindeki özellikler değiştirilerek yapılabilir. Böylece kelime işlem programına ait kontrol kodları dosyaya yazılmaz. Bunun yanısıra dosyaların uzantısının htm veya html şeklinde olmasına dikkat etmek gerekiyor.
Kelime işlem programları asıl amaçlarının biraz dışarısında olmakla beraber HTML sayfa yapımında kullanılabilir, ama karmaşık Web sayfaları hazırlamak ve bu sayfaları hazırladıktan sonra yönetmek, güncellemek gibi ileri derecede kullanım amacına yönelik işler için hazırlanıp piyasaya sürülen programlar da vardır. Bu programlara HTML veya Web tasarım editörleri diyebiliriz. Kullanım şekli bakımından iki tip Web tasarım editörü vardır; görsel veya orjinal ifadesi ile WYSIWYG (What You See Is What You Get ya da bundan daha az karmaşık olmayan Türkçe ifadesi ile "Ne Görürsen Onu Alırsın") editörler ve kod bazlı editörler.
Her iki tip editörün de avantajları ve dezavantajları bulunuyor. Görsel editörler ile editöre has araçlar ve yardımcı sihirbazlar kullanarak HTML dilini bilmeksizin Web sayfası oluşturulabilir. Fakat bu noktada kontrol editörü kullanan kişiden çok sayfayı oluşturan programın elindedir. Kod bazlı editörler görsel editörlerin aksine HTML bilgisi gerektirir ve sayfa oluşturulurken kodlar kullanıcı tarafından yazılır, yine bir takım kolaylık sağlayıcı araçlar ve sihirbazlar bu tip editörlerde de bulunabilir. Görsel editörlere FrontPage ve Dreamweaver'ı, kod bazlı editörlere HomeSite'ı örnek olarak verebiliriz.
HTML dilini öğrenmek isteyen kişiler için tavsiye edilebilecek tipte editör, kod yazmaya dayalı editördür. Hatta bırakın HTML editörünü Windows'un NotePad'i Macintosch'un Simple Text'i bile bu iş için biçilmiş kaftandır.
Biz bu kitapçıktaki örneklerimizde Notepad'i kullanacağız.
HTM mi HTML mi?
Yeni başlayan Web tasarımcılarının aklına takılan sorulardan biri, dosya uzantılarının html mi yoksa htm mi olması gerektiğidir. Ya da bunlar arasında bir fark var mıdır? Aslında var olduğu pek söylenemez. Dosya uzantısının 3 harften fazla olmasına izin vermeyen bir işletim sistemi kullanıyorsanız (hadi canım neymiş o?) dosya uzantılarını htm olarak vermelisiniz. Bunun dışında html veya htm dosyanın hiç bir farkı yoktur.
HTML Sayfasının Bölümleri
Web sitelerini oluşturan HTML kodunu iki ana bölüme ayırabiliriz. Her sayfa yapılırken bu iki bölümü oluşturan kodlar sabit bir şekilde yazılır. Bu bölümler baş (head) ve gövde (body) bölümleridir. Tüm kodlar
Kod:
<html>
etiketi ile başlar ve
Kod:
</html
ile sonlandırılır.
Bu konuyu daha iyi anlayabilmek için HTML editörümüzü (yani Notepad veya SimpleText'i) açıyoruz ve ilk sayfamızı oluşturmak üzere aşağıdaki kodları yazıyoruz.
Şimdi yazdığımız bu kodları inceleyelim. Az önce HTML sayfasının iki bölümden oluştuğunu öğrenmiştik. Bu bölümleri kodlar içinde açıkça görebiliyor musunuz? Baş (head) ve gövde (body) bölümleri. Browser'da açtığımız sayfaya dönüp kodlarla bir kıyaslama yaparsak biraz da İngilizce bilgisi yardımıyla aşağı yukarı hangi etiketin ne işlevi olduğunu görebiliriz. Kodları incelemeye ilk satırdan değil 3'ncü satırdan başlayalım ve bu koda bir göz atıp dikkatimizi Browser'ın mavi başlık çubuğuna çevirelim. 3'ncü satırda verdiğimiz başlık (title) kodu Browser'a hitap ediyor. Sayfaya verdiğimiz başlık, Browser'ın adıyla beraber burada görüntülenir. Bir sonraki satırdaki nispeten karmaşık görünümlü etiket META etiketi; fonksiyonu ise Browser'a HTML sayfasının hangi dilde metin içerdiğini bildirmek. Eğer işletim sisteminiz Türkçe değilse ve Browser'ınızın varsayılan dil ayarı Türkçe olarak ayarlanmamışsa ş, ğ, ı, gibi harfler bozuk görüntülenecektir. Bu yüzden iki satırdan oluşan dil kodunu oluşturacağımız bütün sayfalarda kullanacağız.
Şimdi 6'ncı satıra geçelim. Buradaki "Merhaba. Sayfama Hoşgeldiniz." metni Browser'da varsayılan font ve büyüklükte gösteriliyor. Bunlara bakarak genel bir sonuç çıkarabilir miyiz?
Kod:
<head>
ile başlayıp
Kod:
<head>
ile biten bölüm, sayfamızın baş bölümünü oluşturur ve bu bölümde bulunan kodlar ziyaretçinin göreceği içeriğe değil aslında Browser'a hitap eder. HTML sayfanın hangi dilde (Türkçe, İngilizce, Çince…) metin içerdiğini, arama motorlarına hitap eden bir takım kodları ve sayfamıza eklemek istediğimiz Scriptleri bu bölüme yerleştiririz.
Kodların gövde (body) bölümü ise sayfanın içeriğini oluşturur. Kodlamaya
Kod:
<html>
etiketi ile başlayıp
Kod:
</html>
ile bitirdiğimize dikkat edin. Bu, oluşturduğumuz sayfanın HTML dili ile yazıldığını ifade eder ve tüm HTML kodları bu iki etiket arasında yer alır.
Şimdi ikinci denememizi yapalım. HTML editöründe boş bir sayfa açıp içine yalnızca ilksayfa.htm dosyasındaki 6'ncı satırı, "Merhaba, Sayfama Hoşgeldiniz," metnini yazalım, ve bu dosyayı deneme.htm adıyla kaydedip Browser'ımızda açalım. Tek kelime bile HTML kodu içermeyen deneme.htm dosyası ile usulüne uygun bir şekilde yazdığımız ilksayfa.htm dosyasının görünüşlerinin aynı olması aklınızı karıştırmasın. Böyle olmasının sebebi HTML'in metin tabanlı dosyalar oluşturmasıdır.
Benzerliğin burada sona erip bundan sonraki en küçük değişikliğin bile HTML kodu gerektirdiğini görmek için şunu deneyelim.
Tek satırlık metni "Merhaba," kelimesinden sonra enter tuşu ile iki satıra bölelim ve dosyayı bu haliyle deneme2.htm adıyla kaydedelim. Bu sayfayı Browser'da açtığımızda metnin tek satırda görüntülenmeye devam ettiğini, editörde Enter ile verilmiş satır başının HTML veya Browser için bir anlam ifade etmediğini görüyoruz ve bu noktada yeni bir etiketle tanışıyoruz.
Web Sayfası Hangi Dilde Metin İçeriyor?
İlk HTML sayfamızı oluştururken sayfanın head bölümündeki kodların Browser'a hitap ettiğini, bu bölüme yazılan kodlardan birinin de sayfa içerisindeki metinlerin dilini belirttiğini söylemiştik.
Browser'a dili belirten bu kod meta etiketiyle yazılır:
Bu iki satırın her biri sayfanın Türkçe içerik taşıdığını belirtir. İkisini birden kullanmamızın sebebi Windows dışındaki işletim sistemlerine de Türkçe karakter kodunu bildirmek.
Meta etiketleri sonlandırılmaz ve tek görevi de Browser'a dil belirtmek değildir. Meta etiketleriyle arama motorlarının indeksleme programcıklarına yönelik bilgiler de hazırlanabilir.
Meta etiketi ile dil belirtmediğimiz taktirde dil ayarı olarak Browser'ın varsayılan (default) ayarı geçerli olacaktır. Eğer Browser'ın varsayılan ayarı Türkçe değil de başka bir dilse o zaman Türkçe karakterler
Kod:
(ö, ç, ş, ı, ğ, ü, Ö, Ç, Ş, İ, Ğ, Ü)
doğru görüntülenemez. Bu yüzden dil belirten META etiketini kullanmak Web tasarımcısının el alışkanlığı olmalıdır.
Metne Satır Başı Verme
Öğreneceğimiz yeni etiket
Kod:
<br>
etiketi. Fonksiyonu; metni satır başına almak. Kullanımını ise bir örnek yaparak öğrenelim.
Konu: Geri: Baştan Sona Html Bilgilerimizi Yoklayalım ;) 3/3/2012, 07:25
Bundan önceki bölümde HTML dosyalarının iki kısımdan oluştuğunu öğrendik. Bunlar baş (head) ve gövde (body) bölümleriydi. Sayfanın head bölümünde Browser'a hitap eden kodlar olduğunu gördük. Sayfalardaki metinlerin doğru olarak görüntülenebilmesi için hangi kodu nerede kullanmamız gerektiğini öğrendik.
Browser'da görüntülemek istediğimiz tüm içeriği
Kod:
<body> ... </body>
etiketleri arasına yazacağımızı biliyoruz. Bu bölümden itibaren sayfa içeriğini düzenlemeye yönelik etiketleri ele alacağız. Konumuza HTML sayfalarının temel taşı olan metinleri düzenlemeyle başlıyoruz.
Başlık Etiketleri:
Kod:
<h1>, <h2> <h3>, <h4>, <h5> ve <h6>
HTML bize, metinler için kullanabileceğimiz 6 değişik büyüklükte başlık etiketi sunuyor. Bu etiketlerden
Kod:
<h1>
en büyük başlığı görüntülüyor,
Kod:
<h6>
ise en küçük başlığı.
Hemen bir örnekle bu 6 adet etiketi ve ne büyüklükte başlıklar oluşturduğunu kıyaslamalı olarak görelim.
Bundan önceki bölümde öğrendiğimiz ve bundan sonra oluşturacağımız her dosyada standart olarak kullanacağımız etiketleri yazıyoruz. Head bölümüne Türkçe karakterlerimiz için META etiketlerini ekliyoruz. Sayfamıza bir başlık veriyoruz. Body bölümüne de başlık etiketlerini yazıp tüm kodları
<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> Bu normal yazı </body>
</html>
Kod akışını rahat takip edebilmek için fazladan satır araları oluşturabilirsiniz. Satır başlarına klavyede sekme (Tab) veya aralık (Spacebar) tuşlarına basarak boşluk vermek de kod yazanların el alışkanlığıdır.
Başlık etiketleri ile kullanabileceğimiz parametreler de vardır. Parametrenin ne olduğuna önceki bölümde değinmiştik. Kısaca etiketin bir takım özelliklerini kontrol etmeye yarıyordu. Başlık etiketlerinin kontrol edilebilir özelliği yani parametresi align (hizalama)'dır. Başlığı sayfa içerisinde sağa, sola dayayabilir veya ortalayabiliriz.
Kullanılışı:
Kod:
align = left | center | right
Örnekler:
Kod:
<h1 align="center">Ortalanmış Başlık</h1> <h3 align="right">Sağa Dayalı Başlık</h3> <h5 align="left">Sola Dayalı Başlık</h5>
Paragraf Etiketi:
Kod:
<p> ... </p>
Metinleri
Kod:
<body> ... </body>
etiketleri arasında başka hiçbir etiket kullanmadan görüntüleyebiliyoruz. Satır başı oluşturmak istediğimizde etiketi kullanmamız gerektiğini de öğrendik. Bunu yapmanın bir diğer yolu da metne paragraf özelliği kazandırmaktır.
Kod:
<p> ... </p>
arasına yazılan metin paragraf özelliği kazanmış olur.
Az önce öğrendiğimiz başlık etiketini de kullanarak iki paragraf içeren sayfamızı hazırlayalım.
Buradan itibaren örneklerde yalnızca
Kod:
<body> ... </body>
etiketleri arasında yer alan kodları göreceksiniz. Her seferinde tekrarlamamak için
Kod:
<head>, <title> ve <meta>
etiketlerini biz yazmıyoruz. Fakat sayfalarınızı oluştururken bu kodları sizin yazmanız gerekiyor. El alışkanlığı oluşturması için kopyala-yapıştır kolaylığından yararlanmamak iyi bir yöntem olabilir.
Kod:
<h2>Sevdiğim Yazılar</h2> <p> Sabahı beklemeyiniz dostum, geceden yola çıkınız. Olur ki uyuyakalırsınız. Gece serindir, yapraklardan süzülen yel gözlerinizdeki yaşları kuruturken ruhunuzda kainatın derin sessizliğini taşıyarak sabaha doğru yürüyüp fecri başlatınız. </p> <p> Cemiyetin vahşi, zehirli bitkilerle dolu, her dalında uğursuz baykuşların manasız telkinler yaptığı sık ağaçlı ormanlarında çetin yolculukların başlangıcı için sabahı beklemeyiniz. Sabahı beklemek öğleni, öğleni beklemek akşamı beklemek gibi bir ruh gevşekliğini doğurur. </p> <p> Filozofun öğüdü bütün hayatımızda takib edeceğimiz en esaslı metottur: "Uzun yolu seçiniz..." </p>
Paragraf etiketinin de başlık etiketinde olduğu gibi align (hizalama) parametresi vardır.
Kullanılışı:
Kod:
align = right | center | left
Bu parametrenin yanısıra CSS (Cascading Style Sheets - Stil Şablonları) teknikleri ile paragraf etiketine daha bir çok özellik atanabilir. Bu özelliklere diğer kitapçığımızın konusu olan stiller konusunda değineceğiz.
Bazı Web tasarımcıları
Kod:
<p>
etiketini kapatmadan kullanırlar. Bu şekilde bir kullanımı Browser'lar destekliyor. Ancak biz bu kitapçıktaki örneklerimizde doğru yazım tekniğini esas alarak kapatma etiketini kullanacağız. Ayrıca, HTML'den sonra standart olması düşünülen XHTML dili, kapatılmamış etiketleri hata sayacağı için, şimdiden elimizi alıştırmamız yerinde olur.
Ortalama Etiketi:
Kod:
<center> ... </center>
Başlık ve paragraf etiketlerinde gördüğümüz
Kod:
align="center"
parametresinin fonksiyonu ile bu etiketin fonksiyonu aynı.
Kod:
<center> ... </center>
etiketleri arasına aldığımız metin, grafik, tablo gibi nesneler sayfa içerisinde ortalanır.
Kod:
<center>Uzun yolu seçiniz</center>
Browser penceresinin ebatları ile oynadığınızda metnin, pencerenin boyutuna göre yer değiştirdiğini göreceksiniz.
Kod:
<center>
etiketi kullandığımızda metin daima ekranın tam ortasında görüntülenir.
Koyu, Eğik (İtalik) ve Altıçizili Yazılar
Metinleri koyu (bold), eğik (italic) ve altıçizili (underline) yazdıran etiketleri bir örnekle gösterelim. Bu etiketler dikkat ederseniz İngilizce karşılıklarının baş harflerinden oluşuyor.
Kod:
<p align="center">Filozofun öğüdü bütün hayatımızda takip edeceğimiz en esaslı metottur :</p>
Kod:
<center> <b>"Uzun yolu seçiniz..."</b> <br> <i>"Uzun yolu seçiniz..."</i> <br> <u>"Uzun yolu seçiniz..."</u> </center>
Bu etkileri tek tek metinlere uygulayabiliyoruz. Peki hem koyu hem italik hem de altçizgi etkisini nasıl oluştururuz? Tabii ki etiketleri iç içe kullanarak. Şu kodları inceleyin.
Kod:
<i><b>Filozofun</b> öğüdü bütün hayatımızda takib edeceğimiz <b><u>en esaslı</u></b> metottur: "<u>Uzun yolu seçiniz...</u>"</i>
Şart olmamakla beraber önce açtığımız etiketi en son kapatmak iyi bir kodlama prensibidir.
Konu: Geri: Baştan Sona Html Bilgilerimizi Yoklayalım ;) 3/3/2012, 08:05
Kod:
<sup> ve <sub>
Etiketleri
Bu etiketler, metinleri üstyazı ve altyazı biçimlerinde yazmamızı sağlarlar. Örneğin bilimsel konulu metinlerde rastlanabilecek türden H20 ve 27oC gibi ifadeleri bu etiketleri kullanarak yazabiliriz.
Kod:
H<sub>2</sub>O
H<sub>2</sub>SO<sub>4</sub>
27<sup>o</sup>C
Yazı Tipi (Font)
Metin düzenleme etiketlerinden belki de en önemlisi ve en sık kullanılanı font etiketidir. Şimdiye kadar öğrendiğimiz metin düzenleme etiketlerinde hep Browser'ın varsayılan (default) ayarlarına hitap ettik. Font etiketiyle ilk defa bu ayarlardan birini değiştireceğiz.
Bu etiketin kullanımında dikkat etmemiz gereken bazı noktalar var. Bunlardan birincisi yazı tipi seçimidir. Size güzel görünen, çok beğendiğiniz bir yazı tipi herkesin bilgisayarında yüklü bulunmayabilir. Bu durum, Browser'ın istenen fontu gösterememesine, dolayısıyla istediğiniz estetiğin oluşturulamamasına neden olur.
Buna karşı alınabilecek önlemlerden biri yazı tipine (font) alternatifler vermektir. Böylece eğer kullanmak istediğimiz font ziyaretçinin işletim sisteminde kurulu değilse ikinci, üçüncü fontlar aranır. Bu şekilde ziyaretçi Browser'a örneğin, "Bu metni, tahoma yazı tipiyle görüntüle, eğer tahoma sisteme yüklenmemişse verdana kullan; şayet o da yoksa arial kullan!" demiş oluyoruz.
Yaygın font gruplarının hangileri olduğu konusunda fikir vermesi için Web tasarım editörlerinin font ayarlarını inceleyebilirsiniz. Yine Internet'te en çok ziyaretçi çeken sitelerde hangi fontların kullanıldığını incelemek iyi bir fikir olabilir.
Font konusunun püf noktalarına değindik. Şimdi uygulamamıza geçelim. Önce "Sayfama Hoşgeldiniz" metnini değişik fontlarda ekrana yazdıralım.
Control Panel/Denetim Masası'ndaki Fonts/Yazı tipleri simgesini çift tıklayarak sisteminizde yüklü bulunan fontları inceleyin ve bu fontları yukarıdaki örneğe uygulayın.
Bu örnekle beraber font etiketini bir parametresiyle birlikte öğrendik: face. İngilizcede bu kelime yüz anlamına geliyor; matbaacılıkta ise bir yazı tipi ailesi anlamına kullanılıyor. Sırayla diğer parametreleri de örneklerle görelim.
Font büyüklükleri 1'den 7'ye kadardır ve size parametresi ile belirlenir. Bu örnekte dikkat çekici başka bir nokta da etiketinin değişik parametreleri ile iç içe kullanılabilmesidir. En dışarıda font tipini (face) belirttik. Böylece bu etiket sonlandırılıncaya kadar tüm metinler verdana ile gösteriliyor. Tedbiri elden bırakmamaya alışmak amacıyla, alternatif font olarak arial kullanılacağını da belirtiyoruz. İç kısımda ise font ölçülerini (size) değiştirdik. Bu kodlama farklı bir yazım ile de yapılabilir:
Bu kodlarla Browser'daki görüntü değişmeyecektir. Fakat her defasında face="verdana, arial" komutunu tekrar tekrar yazarsak, gereksiz yere kodun şişmesine yani dosya boyutunun büyümesine sebep oluruz. Bu, sayfalarımızın Internet'te ziyaretçilerimize aktarılmasında gecikmelere yol açar.
Fonta bağıl büyüklükler de verebiliriz. Daha önce öğrendiğimiz
Kod:
<big> ve <small>
etiketlerini hatırlayalım. Bu etiketler metnin büyüklüğünü artırmaya ve azaltmaya yarıyordu. Yani bağıl etiketlerdi. İşte etiketinin gerçekte karşılığı puntoyu bir ölçü artır anlamında
Kod:
<font size="+1">
dir. +1'den +4'e kadar değerler vererek punto büyüklüklerini artırabiliriz. Puntoları küçültmek için de etiketinin karşılığı olan
Kod:
<font size="-1">
kodunu kullanıyoruz. Yalnız burada farklı olarak -1 ve -2 değerlerini kullanabiliriz.
İlkokul matematik derslerini hatırlatan bu konuyu da öğrendikten sonra renkli konulara geçmenin artık zamanı geldi.
Metinleri Renklendirme
HTML'de renkler konusuna önceki bölümlerde değinmiştik. Web sayfalarımızda renk kullanmanın iki yolu olduğunu hatırlıyor olmalısınız: renklerin İngilizce adlarını kullanmak veya rengin RGB değerini heksadesimal düzende belirtmek. Heksadesimal konusuna tekrar girmeyeceğiz fakat RGB'nin Red (kırmızı) Green (Yeşil) Blue (Mavi) kelimelerinin baş harflerinden oluştuğunu hatırlatmakta fayda var.
Şimdi renk tablomuzu inceleyelim.
Kod:
Siyah black #000000 Lacivert navy #000080 Mavi blue #0000FF Yeşil green #008000 Koyu yeşil teal #008080 Parlak yeşil lime #00FF00 Turkuaz aqua #00FFFF Vişne çürüğü maroon #800000 Mor purple #800080 Zeytuni yeşil olive #808000 Gri grey #808080 Gümüş grisi silver #C0C0C0 Kırmızı red #FF0000 Parlak pembe fuchsia #FF00FF Sarı yellow #FFFF00 Beyaz white #FFFFFF
Buradaki RGB değerlerini ezberlemeye gerek yok. Ama hala metinleri renklendirmeyi öğrenemedik diyorsanız sizi etiketinin color parametresiyle tanıştıralım.
color parametresinin dışında kullanabileceğimiz bir başka yöntem etiketinin text parametresidir. Bu parametreye verilen renk tüm sayfadaki metinlerin rengini kontrol eder.
Kod:
<body text="#000080">
Kod:
<basefont>
Etiketi
Tüm sayfada geçerli olacak yazıtipi kuralları belirlemek istediğimizde
Kod:
<basefont>
etiketini kullanıyoruz. Bunun için bu etiketi
Kod:
<body>
etiketinden hemen sonra kullanırız.
Örnekler:
Kod:
<body> <basefont face="verdana">
Kodu, tüm sayfadaki metinleri verdana fontu ile görüntüler.
Kod:
<basefont size="6">
Font büyüklüğünü 6 yapar.
Kod:
<basefont color="red">
Metinlerin rengi kırmızı olarak görüntülenir.
Etiketi ayrı ayrı parametrelerle kullanmak yerine birlikte de kullanabiliriz:
Bu kodlarla oluşturduğunuz sayfaları her iki Browser ile inceleyerek sonuçları karşılaştırabilirsiniz.
Kod:
<basefont>
ile tanımladığımız font rengi ve büyüklükleri, sayfada tablo kullanılmışsa (tablolar konusuna sonraki bölümlerimizde değineceğiz) tablo içerisindeki metinlerde geçerli olmayacaktır.
Böylece font etiketini ve üç parametresini öğrenmiş bulunuyoruz. Bir sonraki konuya geçmeden önce yukarıdaki 16 renkten oluşan tabloyu HTML olarak hazırlamaya ne dersiniz?
Başında rakam veya harf bulunan ve belli bir düzene göre ilerleyen liste türü sıralı listedir. Sırasız listelerin başına küçük daire veya kare gibi şekiller gelir. Tanımlama listeleri ise
etiketinde gördüğümüz etkiye benzer yapıda listeler oluşturur.
Konu: Geri: Baştan Sona Html Bilgilerimizi Yoklayalım ;) 3/3/2012, 08:14
Listeleme işlemi ilk liste öğesine (list item) 1 numara verilerek başlatılıyor. 1 yerine a, A gibi harf kullanmak istersek veya listeyi 1'den değil de başka bir sayıdan başlatmak istersek
Kod:
<ol>
etiketinin parametrelerine başvururuz.
Kod:
<ol>
etiketi ile kullanabileceğimiz üç adet parametre vardır; start, type ve compact. Bunlardan start parametresi listenin 1 yerine başka bir sayı ile başlamasını sağlıyor. Örneğin
Kod:
<ol start="5">
listelemeyi 5 numaradan başlatır. type parametresinde listeleme sistemini belirtiyoruz.
Kullanılışı:
Kod:
type=1|A|a|I|i
Listeleme sisteminin rakamlardan oluşması için
Kod:
type="1"
büyük harflerden oluşması için,
Kod:
type="A"
büyük Romen rakamları için
Kod:
type="I"
ve küçük Romen rakamları için
Kod:
type="i"
kullanıyoruz.
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
Kod:
type="A"
ve alfabenin 5. elemanı olan "E" den başlanması için
Kod:
start="5"
komutlarını kullanmalıyız.
Kod:
<ol type="A" start="5">
Son parametre olan 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.
Sırasız Listeler (Unordered List) :
Kod:
<ul>…</ul>
Bu tip listelemede liste öğelerinin başına rakam veya harf değil de içi boş daire (disc), içi dolu daire (circle) veya kare (square) şekillerinden birisi gelir.
Ay adlarından oluşan listemizi sırasız liste düzeninde hazırlayalım;
etiketinde kullanabileceğimiz iki parametre vardır. Bunlar sıralı listelerdeki gibi compact ve type parametreleridir. type parametresine disc, circle ve square değerlerini verebiliriz.
Bu liste biçimi önceki iki listelemeye göre biraz farklı. Liste öğelerinin başına rakam, harf veya herhangi bir şekil gelmiyor. Bunun yerine liste öğeleri sayfada biraz daha içeriden görüntüleniyor.
Sıralı listeleri
Kod:
<ol>...</ol>
, sırasız listeleri de
Kod:
<ul>...</ul>
etiketleri arasına alıyor ve liste öğeleri için her ikisinde de
Kod:
<li>
etiketini kullanıyorduk. Tanımlama listesini
Kod:
<dl>...</dl>
arasına alırız. Fakat diğer iki liste türünden farklı olarak tanımlama listelerinde iki tip öğe vardır: Tanımlanan terim
Burada tanımlanan terim, örneğin Yaz, üç tanımlama metninden oluşuyor: Haziran, Temmuz, Ağustos. Bu listeyi oluşturup, Browser'ınızda inceleyerek, diğer listelerden farkını görmelisiniz.
Yukarıda öğrendiğimiz üç türde listeyi karmaşık listeler hazırlamakta kullanabiliyoruz. İç içe dallanmış listeler düşünün. Bu mesela bir kitabın içindekiler listesi olabilir.
Metin düzenlemekte kullanacağımız etiketleri öğrendik. Ancak Web sayfalarının metinden ibaret olmadığını da biliyoruz. İşte bu bölümde sayfa tasarımının bir parçası olan görsel unsurların HTML'deki yerini öğreneceğiz.
HTML'de grafik ve renkler konusuna daha önce kısaca değinmiştik. Web'de kullanabileceğimiz iki (henüz yaygın olmayan ama hızla yaygın hale gelen PNG ve SVG'yi de sayarsak dört) grafik biçimi olduğunu, bunların birbirlerinden farkını, nerede hangi biçimi kullanacağımızı az çok biliyoruz. Yine renkler konusundaki bilgilerimiz de hafızamızda canlı bir şekilde duruyor olmalı.
Bu bölümde kullanacağınız grafik dosyalarını sabit diskinizde bulunan dosyalardan seçebileceğiniz gibi herhangi bir grafik işleme programı ile de hazırlayabilirsiniz. Usta Web tasarımcılarının gözdesi Photoshop'ı kullanmanız şart değil. Bu program sizde bulunmuyorsa Web grafiği hazırlamak için başka birçok programdan faydalanabilirsiniz. PaintShop Pro bir diğer yaygın kullanılan grafik programıdır. Macromedia Fireworks, Adobe ImageReady ve daha bir çok grafik programını kullanabilirsiniz.
Şimdi Web'de renkler konusuna geçelim. Cevap arayacağımız ilk soru, Web sayfamızda hangi unsurları renklendirebileceğimiz olmalıdır.
Metinlere
Kod:
<font>
etiketinin color parametresini kullanarak renk verebiliyoruz. Fakat renk kullanımı elbette metinlerle sınırlı değil; sayfamızın ardalanına (background) renk verebiliriz; sonraki konularda göreceğimiz tabloları kullanarak sayfada belli alanlar oluşturabilir ve bunların herbirine farklı renkler verebiliriz, bağlantıları (link), metin satırlarının fonlarını da renklendirmek mümkündür.
Şimdilik sadece sayfamızın arka planının (ardalan, fon) rengini değiştirmeyi öğrenelim; yeri geldikçe yukarıda bahsettiğimiz diğer unsurlara nasıl renk vereceğimize değineceğiz.
Bir sayfanın tümünün rengini
Kod:
<body>
etiketinin bir parametresi olan bgcolor komutu ile atıyoruz. Daha önce
Kod:
<body>
etiketini hep yalnız başına kullanmıştık. bgcolor,
Kod:
<body>
etiketinde kullanılabilecek birçok parametreden biri. Yine yeri geldikçe bu parametrelere değineceğiz. Şimdi bgcolor'ın kullanımını görelim: kırmızı fon üzerine beyaz yazılar yazalım.
Kod:
<body bgcolor="#FF0000"> <font color="#FFFFFF" face="garamond" size="5"> <p><b>İstiklal Marşı</b></p> Dalgalan sen de şafaklar gibi ey şanlı hilâl! <br> Olsun artık dökülen kanlarımın hepsi helâl. <br> Ebediyyen sana yok, ırkıma yok izmihlâl: <br> Hakkıdır, hür yaşamış, bayrağımın hürriyet; <br> Hakkıdır, Hakk'a tapan, milletimin istiklâl! <br> </font> </body>
Renk kodunu daha önce öğrendiğimiz diğer yöntemle belirleyebiliriz. Son olarak bir ipucu: bgcolor parametresini iyi ezberleyin renklendirme konusunda oldukça sık kullanacağımız bir komut.
Grafik Etiketi:
Kod:
<img>
İşte yepyeni bir etiket:
Kod:
<img>
ingilizce image kelimesinden bu etiketi aklınıza getirebilirsiniz.
Web sayfalarında kullanacağımız grafik dosyaları Web sayfasını oluşturan kodlara gömülmez. Şimdi burada kafanız biraz karışıyorsa şöyle bir örnekle konuyu açıklayalım. Microsoft Word ile hazırladığınız belgelere grafik ekleyip böylece dosyayı kaydettiğinizde grafikler Word belgesini oluşturan dosyanın kodları arasına yazılır. Bunu iki satırlık bir Word dökümanına kocaman boyutlu bir grafik ekleyip sonra da dosyanın boyutunu kontrol ettiğinizde görebilirsiniz. İşte HTML'de böyle bir durum söz konusu değildir. Web sayfası oluşturan kişinin yapması gereken tek şey grafik dosyasının diskteki yolunu belirten kodu yazmaktır. Bunu da
Kod:
<img src=...>
etiketi ile yapıyoruz. Dosya yolunu src (source=kaynak anlamında) parametresi karşılığına yazıyoruz.
İşte bununla ilgili bir örnek:
Kod:
<img src="c:\belgelerim\aile.jpg">
Herhalde bu örnekle birlikte birçok şey açıklık kazandı. Bu kodun anlamı "C: adlı sabit diskte, kök dizinde bulunan 'belgelerim' klasörü içindeki 'aile.jpg' dosyasını sayfaya yerleştir!" demektir. (Bu arada bölü işaretinin yönüne dikkat ediniz.)
Fakaat, işler herzaman böyle yürümez. Bedava veya paralı Internet alanı 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ı
Kod:
<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çerisindelerse bu grafik dosyasına gönderme şu kodla yapılır:
Kod:
<img src="resim.gif">
Gayet kolay değil mi? Sabit disk yok, klasör yok, uzun dosya yolları yok; sadece grafik dosyasının adı var. Peki ama henüz herşey bitmedi. 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ı:
Kod:
<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. (Browser'ın sizin ideal otomobilinizle ilgilenmesini beklemiyorsunuz, değil mi?)
Bu şekilde içiçe bulunan klasörlerin herbirine ulaşmamız mümkündür.
İ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.
Kod:
<img src="../otomobiller/volvo.jpg">
Bunun anlamı; "Bir üst dizine çık, orada 'otomobiller' dizinini bul; içindeki volvo.jpg dosyasını al!" demektir. Aynı şekilde;
Kod:
<img src="../../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:
Kod:
<img src="http://www.webteknikleri.com/logo.gif">
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.
Bu farkı şöyle belirtelim;
Kod:
<img src="/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.
Konu: Geri: Baştan Sona Html Bilgilerimizi Yoklayalım ;) 3/3/2012, 08:26
Kaynak Yazarken
Ücretli Web Server'larda edindiğimiz site alanları, çoğunlukla c:\Inetpub\wwwroot\ dizininde bizim adımıza açılan bir alt-dizindir. Böyle bir durumda bizim Peugeot resmi, muhtemelen c:\Inetpub\wwwroot\ahmet_in_sitesi\otomobiller\peugeot.jpg gibi bir yere sahip olacaktır. Bedava alan adı veren yerlerde de durum bunun aynısıdır. Mesela [Linkleri görebilmek için üye olun veya giriş yapın.] bizim kök dizinimizdir. Fakat ücretli veya ücretsiz, gerçek bir Web Server'da bize ayrılan yerin tam yolunu hemen hemen hiç bir zaman bilemeyiz. Bu sebepten dolayı, iyi bir alışkanlık, sayfalarımız kendi sabit diskimizde bile çalışacak olsa, grafik dosyalarına kaynak yazarken göndermeleri göreli olarak belirtmektir.
Grafik Dosyasının Ebatları
Artık herhangi bir yerdeki herhangi bir Web grafiğine HTML ile nasıl ulaşacağımızı biliyoruz, ama herşey bununla bitmiyor.
Kod:
<img>
etiketinin birçok parametresi var; src bunlardan sadece biri.
Diğer iki parametre, grafik dosyasının piksel cinsinden ebatlarını belirten width (genişlik) ve height (yükseklik) ölçüleridir. Biraz önceki örneklerimizde bu iki parametreyi kullanmadık. Çünkü sayfalarımızdaki resimlerin ebadını belirtmemiz şart değil. Öyleyse bu parametreler ne işe yarıyor? Web sitelerini dolaşırken dikkatinizi çekmiş olmalı. Bazı sayfalar yüklenme aşamasındayken sayfada oynamalar, kaymalar, yer değiştirmeler olur. İşte bunun başlıca nedeni bu iki parametrenin kullanılmamasıdır. Yüklenme aşamasında Browser sayfaya yerleştirilecek grafiğin ebatlarını bilemediğinden kendisi varsayılan yükseklik ve genişlikte geçici bir alan açar. Yüklenme önceliği metinlere ait olduğundan, grafikler yüklendikçe ve kendileri için ayrılan geçici alana sığamadıklarında bu yer değiştirme ve oynamalar gerçekleşir. İşte bahsettiğimiz bu iki parametre Browser'a bu alanı varsayılan değil, bizim belirttiğimiz değerlerle açmasını bildirir. Böylece yüklenme sırasında bahsettiğimiz durum ortaya çıkmaz. Hepsi bu kadar. Öğrendiklerimizle ilgili örneklere geçelim.
Bu kodla, yüklenecek resmin 150 piksel genişliğinde, 80 piksel yüksekliğinde olduğunu önceden Browser'a belirtmiş olduk. Peki bu değerleri nereden öğrenebiliriz? Elbette kullandığımız grafik editöründen. Başka bir yol da şöyle; komutu önce width ve height parametreleri kullanmadan verin. Sonra Browser'da bu dosyayı açıp Mouse imlecini grafiğin üzerindeyken sağ tıklayıp özellikler/properties' i seçin. Açılan pencerede resmin ebatlarını görebilirsiniz.
komutuyla, gerçek ebadı sözgelimi 300x160 olan bir resmi, sayfamızda yüzde 50 küçültülmüş olarak görüntüleyebiliriz. Başka bir ifade ile
Kod:
<img src="..." width="..." height="...">
komutu Browser'a, gelmekte olan grafiğe ayıracağı yeri bildirirken, gelen resmi gerçek ebadı ne olursa olsun, enini-boyunu bu yere göre değiştirmesini de bildirebilir. Bir resmin en/boy orantısını bozacak bir ebada küçültülmesinin estetik sakıncalarını deneyerek görmek en doğru yol olsa gerek. Ancak büyük ebadda bir grafiği ziyaretçinin Browser'ına aktardıktan sonra, bunu daha küçük bir boyutta görüntületmenin Web tekniği açısından anlamı yoktur: büyük resmin ziyaretçiye aktarılması, mutlaka görüntülenen ebaddaki daha küçük resmin aktarılmasından çok daha uzun zaman alacaktır. Bir başka deyişle ziyaretçiyi büyük resmin bilgisayarına aktarılması için boş yere bekletmiş olacağız.
Bir grafiği, kendi boyutlarından daha büyük olarak görüntülemeye çalışmanın da sakıncaları vardır. Bu durumda Browser, elinde mevcut resim bilgisini, bir takım aritmetik hesaplarla değiştirecek ve resmi büyütmeye çalışacaktır. Bunun birinci etkisi, resmin düz çizgilerinin basamaklı hale gelmesi, tonlar arasındaki aşamalı geçişlerin kaybolması ve resmin görsel değerinin azalması olacaktır. Bunun bir diğer sakıncası ise Browser'ın bu hesabı yaparken, sayfayı görüntüleme işlemine son vermesi ve uzunca bir süre, ziyaretçinin bilgisayarının adeta donmasıdır. Bu, bir çok ziyaretçinin bir daha bizim sitemize gelmemesi sonucunu ortaya çıkartır.
Sonuç olarak, iyi bir Web tasarımcısı daima grafiklerini, sayfada yer vereceği boyutlarda kaydeder. Bütün grafik editing programları, bir resmi istediğiniz boyuta indirme imkanına sahiptir.
Şimdi hazır Mouse imlecini resmin üzerine getirmişken yeni bir parametre ile tanışalım: alt. Bu parametre grafiğe alternatif metin vermeye yarar ve etkisi iki şekilde görülür. Grafik, Server tarafından ziyaretçinin bilgisayarına gönderilmeden önce alt ile verdiğimiz metin grafiğe ayrılan alanda görüntülenir. Grafik yüklendikten sonra ise Mouse imleci grafik üzerine getirildiğinde küçük sarı bir pencere içinde bu metni görürüz.
Kod:
<img src="deniz.jpg" width="150" height="80" alt="Denizde akşam güneşi">
Milattan önceki devirlerde yani Browser'lar en fazla 16 renk görüntüleyebilirken, kullanıcılar sayfanın daha hızlı yüklenmesi için Browser'ının resim gösterme seçeneğini kapatırdı. Zira amaç cıvıl cıvıl reklam banner'larıyla donatılmış bir sayfaya erişmek değil, büyük olasılıkla bir üniversitenin sitesindeki araştırma tezini filan incelemekti. Şayet Browser ayarlarından, grafik gösterme seçeneği kapatılmışsa bile verilen alternatif metin ile grafik hakkında kullanıcının bir fikri olması sağlanabilirdi. Bu kadar tarih bilgisinden sonra diğer parametrelerimize geçelim.
Resimleri Hizalama
Metinler konusunda gördüğümüz align parametresini hatırladınız, değil mi? Tüm hizalamalarda olduğu gibi resimlerin hizalanmasında da bu parametreyi kullanıyoruz.
Kod:
align = absbottom | absmiddle | baseline | bottom | center | left | middle | right | texttop | top
Görüldüğü gibi bu parametrenin
Kod:
<img>
etiketi ile kullanımında alabileceği değerler oldukça fazla. Herbirinin ne işe yaradığını aşağıdaki örneği inceleyerek öğrenebilirsiniz; burada kullandığımız grafik dosyaları yerine siz kendi grafiklerinizden herhangi ikisini kullanabilirsiniz. Yalnız bu grafiklerden biri diğerine göre daha büyük ebatlarda olmalı.
Kod:
<img src="fax.gif"> Metin <img src="disket.gif"> <p>Hizalama parametresi kullanmadan iki grafik ve metin bu şekilde görüntülendi.</p> <hr> <img src="fax.gif" align="top"> <img src="disket.gif"> <p><b>align="top"</b> - Grafikler üst kenara dayalı olarak görüntüleniyor. (üst kenar sınırı, burada büyük resme göre belirleniyor)</p> <hr> <img src="fax.gif" align="middle"> Metin <img src="disket.gif"> <p><b>align="middle"</b> - Diğer nesnelerin (ikinci grafik ve metin) alt sınırı birinci resmin orta noktasına denk düşecek şekilde ayarlandı.</p> <hr> <img src="fax.gif" align="bottom"> Metin <img src="disket.gif"> <p><b>align="bottom"</b> - Tüm nesneler aynı taban hizasına sahip olacak şekilde görüntülendi. Bu aynı zamanda varsayılan (default) değerdir. Hizalama parametresi kullanmadan elde ettiğimiz görüntüyle bu örneği kıyaslayın.</p> <hr> <img src="fax.gif" align="absmiddle"> Metin <p><b>align="absmiddle"</b> Resmin orta kenar hizası, metin satır hizasının (metin satır hizası ile metin hizası farklı şeylerdir. Mouse imleci ile metni tarayın oluşan seçili alan metin satırıdır.) orta noktası ile kesişiyor. absmiddle'ın middle'dan farkı; middle'da metnin orta noktası esas alınırken absmiddle'da metin satırının orta noktası esas alınır.</p> <hr> <img src="fax.gif" align="absbottom"> Metin <p><b>align="absbottom"</b> Resmin alt kenarı ile metin satırı alt kenarı aynı hizada görüntülenir. Bu örneği daha iyi anlayabilmek için sayfayı seçili hale getirin (Ctrl+A) metin satırı ile resim alt kenarı aynı hizadalar, tüm sayfa seçili iken align="bottom" örneğini incelerseniz, burada esas alınanın metin satırı değil metnin kendisi olduğunu görebilirsiniz.</p> <hr> <img src="fax.gif" align="texttop"> Metin <img src="disket.gif"> <p><b>align="texttop"</b> Resim ve metin satırının üst kenarları aynı hizaya sahip, metinden sonra gelen ikinci resim ise metinle aynı alt kenar hizasına sahip olacak şekilde görüntülendi.</p> <hr> <img src="fax.gif" align="baseline"> Metin <img src="disket.gif"> <p><b>align="baseline"</b> Tüm nesnelerin taban hizaları aynı seviyede görüntüleniyor, </p> <hr> <img src="fax.gif" align="center"> Metin <img src="disket.gif"> <p><b>align="center"</b> middle değeri ile aynı neticeyi veriyor, </p> <hr> <img src="fax.gif" align="left"> <p>Metin</p> <br clear="left"> <br> <p><b>align="left"</b> Resmi sola dayadı ve paragraf etiketi kullanmamıza rağmen metin yeni satırda başlamadı, fakat metnin üzerinde bir satırlık boşluk oluştu. Böylece tablo kullanmadan grafik ve resimleri iki sütun halinde kullanmak mümkün olmaktadır.</p> <hr> <img src="fax.gif" align="right"> <p>Metin</p> <br clear="right"> <br> <p><b>align="right"</b> Resmi sağa dayadı. left parametresi ile oluşturulan etkinin aynısını burada da görüyoruz. Tek fark left ile resim sola dayanırken right değerinde sağa dayanıyor.</p>
Hizalama parametresinin alabileceği değerlerin çokluğu aklınızı karıştırmasın, çoğu zaman bu değerlerden left, right ve middle gibi ikisini-üçünü kullanırız. Bir Web sayfasına yapısal istikrar kazandırmak için hizalamaları çok daha etkin biçimde tablolar yardımıyla yapmayı ileri konularda göreceğiz.
Burada önem kazanan bir önemli etiket, kodların arasında gördüğünüz
Kod:
<br clear="...">
etiketi. Left ve right gibi değerlerle resmi hizaladığımız zaman oluşturduğumuz sütun etkisini bu etiketle kaldırıyoruz. Bu parametre üç değerle kullanılabilir:
Kod:
clear = left | right | all
Left ve right, align parametresinde kullandığımız değere göre etki gösterirken all değeri her ikisini de kapsar.
hspace - vspace Parametreleri
Bu parametreler resmin sağ-sol-üst ve altında belirtilen piksel boyutunda boşluklar bırakır. Özellikle align parametresi ile resim ve metinleri birlikte kullandığımızda hspace ve vspace'den yararlanabiliriz.
Kod:
<img src="disket.gif" align="left">
Resim ile metin normal aralıkta.
Kod:
<img src="disket.gif" align="left" hspace="25">
Resmin sağında ve solunda 25'er piksel boşluk oluştu.
Kod:
<img src="disket.gif" valign="top" vspace="30">
Resmin üstünde ve altında 30'ar piksel boşluk oluştu.
Kod:
<img src="disket.gif" valign="top">
Resim ile metin normal aralıkta.
border Parametresi
Bağlantı kurulmuş bir resme border değeri verilmediği taktirde resmin etrafında varsayılan olarak mavi renkte bir çerçeve oluşur. Bu, çoğu tasarımcının istemediği bir etkidir ve bu çerçeveyi yok etmek için border parametresine "sıfır" değeri verilir.
Bağlantılar konusuna ileride değineceğiz fakat burada anlatmak istediğimiz etkiyi oluşturmak için bağlantı verilmiş bir resim kullanalım:
Kod:
<a href="#"><img src="disket.gif"></a>
Dosyayı Browser'da açtığınızda mavi çerçeveyi farketmiş olmalısınız. Şimdi çerçeveyi yok edelim:
border parametresi, aslında çerçeveyi yok etmeye değil çerçeve kalınlığını belirlemeye yarıyor. Tabi sıfır değeri verildiğinde çerçeve yok oluyor. Başka değerler vererek de bu parametreyi kullanabiliriz.
Kod:
<a href="#"><img src="disket.gif" border="5"></a>
Sayfa Fonunda Resim Kullanmak
En çok merak edilen konulardan bir diğeri sayfa fonunda resim kullanmak olsa gerek. Bunun için gerekli kod
Kod:
<img src="...">
etiketinden daha farklı.
Kod:
<body>
etiketinin background parametresini kullanıyoruz.
Kod:
<body background="fonresmi.jpg">
Verdiğimiz fon resminin sayfa boyunca tekrar ettiğini göreceksiniz. Bunu engellemek için tüm sayfayı kaplayan bir artalan resmi kullanmak da pek akıllıca değil. Eğer fon resminin tekrar etmesini istemiyorsak bunun için kullanabileceğimiz bir kod var: bgproperties="fixed"
Ama bu kodun yalnızca Internet Explorer'da çalıştığını belirtelim. Netscape'de fon tekrarı devam edecektir. Peki bir dezavantaj gibi görünen bu durumu avantaja çeviremez miyiz? Düşünün: 2x2 piksellik bir grafikle pekala güzel background'lar hazırlanabilir. 2 piksel'in yarısı açık tonlu yarısı daha koyu tonlu bir grafik sayfa boyunca tekrar ettiğinde hoş bir görünüm oluşabilir. Veya 1024 piksel genişlik ve 2 piksel yüksekliğinde bir grafik de bu amaçla kullanılabilir. Soldan ilk 120-150 piksel'i renklendirip geri kalan kısmı beyaz bırakarak Web'de birçok sayfada örneğini gördüğümüz türde sayfalar hazırlayabiliriz. Üstelik bu küçük ebatlardaki grafikler dosya boyutu itibariyle de sayfa yüklenmesine pek yük getirmez.
Konu: Geri: Baştan Sona Html Bilgilerimizi Yoklayalım ;) 3/3/2012, 08:32
Bağlantılar
Web sayfaları bugünkü şöhretini belki de HTML'in bağlantı-köprü-link özelliğine borçlu. Bir metne-resme-nesneye tıklıyorsunuz, karşınıza başka bir metin-resim-nesne geliyor. Internet'te en çok yaptığımız şey de bu değil mi? Metinler ve grafikler konusunu bitirdik artık bunlar arasında nasıl bağlantı kuracağımızı göreceğiz.
Biraz önce
Kod:
<img>
etiketinin border parametresini öğrenirken göz ucuyla bağlantı etiketini inceledik. Bu etiket
Kod:
<a>
(anchor) etiketidir. Ancak bu etiketi kullanmak için parametrelere ihtiyaç duyuyoruz.
En genel anlamıyla iki türde bağlantı kurabiliriz: sayfa içinde (dahili) ve sayfalar arasında. Her iki durumda da kullanacağımız parametre href parametresidir. Burada resimler.htm dosyasına nasıl bağlantı kurulduğunu görüyorsunuz:
Kod:
<a href="resimler.htm">Resim arşivi için tıklayınız</a>
Kod:
<a href="...">...</a>
etiketleri arasına alınan metin, resim veya nesneler bağlantı özelliği kazanırlar. Bağlantıya tıklandığında gidilecek kaynağın HTML dosyası olması da şart değildir. Bu örneğin bir JPEG grafik de olabilir, midi biçiminde bir melodi hatta bir zip arşivi de. Browser şayet kaynak dosyayı çalıştırabilirse (grafik, müzik, video dosyaları gibi) kullanıcıya herhangi bir şey sormadan dosyayı kendisi açar. Fakat .zip, .exe, .mp3 gibi Browser'ın çalıştıramadığı dosyalar sözkonusu olduğunda ne yapmak istediğinizi soran bir pencere açılır. Bu penceredeki seçeneklerle dosyayı ilgili program kanalıyla açabilir/çalıştırabilir veya diskinize kaydedebilirsiniz.
Değişik dosya türlerine bağlantı kurarken de aynı kodu kullanırız:
Kod:
<a href="album.zip">Foto albümünü diskinize çekmek için tıklayın</a> <a href="arastirma.doc">Konuyla ilgili son yapılan araştırma sonuçları</a> <a href="baris.mp3">Sanatçının yeni çıkan albümünden bir tanıtım</a>
Şimdi de dahili bağlantıların nasıl hazırlandığını görelim. Dahili bağlantı oluştururken de
Kod:
<a href>
etiketini kullanıyoruz fakat bu defa bir dosyaya bağlantı vermediğimiz için bağlantı kurmak istediğimiz metin, grafik, nesneye bir isim veriyoruz ki bu isimle kendisine atıfta bulunabilelim. Bu işi de
Kod:
<a>
etiketinin name (isim) parametresi ile yapıyoruz. Daha sonra
Kod:
<a href>
etiketini kullanırken eşittir (=) karakterinden hemen sonra # (diyez/çatal) sembolünü kullanırız.
Uzun bir sayfa düşünelim, bu sayfanın en altında bir kelime tıklandığında sayfa başına giden bir bağlantı kuracağız.
Kod:
<a name="sayfabasi">Personel Web Server</a> <p> Microsoft'un yeni teknolojisi olan Active Server Pages (ASP) tekniğini kullanan dosyaları hazırlayıp çalıştırabilmek için koca koca serverlara, ateş pahası yazılım ve işletim sistemlerine ihtiyacınız yok. Windows 95/98 için geliştirilen ve Windows 95/98 CD-ROM'u içinde yer alan PWS, bu teknolojiyi masaüstü bilgisayarlarımıza taşıyor. PWS, Web sayfalarımızı kontrol etmek ve geliştirmek için kullanabileceğimiz bir masaüstü server (sunucu) yazılımıdır. </p> ... ... ... <a href="#sayfabasi">Sayfa Başına Dön</a>
Burada dikkat edilmesi gereken nokta sayfanın yeterince uzun olup olmadığıdır. Eğer Browser penceresinin sağındaki kaydırma çubuğu oluşmamışsa linke tıklandığında hiçbir şey olmaz çünkü zaten sayfa başındayız.
Aynı şekilde grafiklere de isim verilerek dahili bağlantı kurulabilir.
İlk örneğimizin aksine bu sefer anchor'ları kodların daha ileri kısımlarında tanımladık. Görüyoruz ki, nerede tanımlanmış olursa olsun anchor'la işaretlenmiş bir nesneye ulaşabiliyoruz. Şimdi şu örneğe bir göz atın;
Kod:
<a href="/otomobiller/bmw.htm#320i">...
Bu kodla harici bir dosya içerisindeki anchor'a bağlantı verilmiş. Harici dosya kök dizinde (root) bulunan otomobiller klasörü altındaki bmw.htm, anchor ise "320i". Bu bağlantıya tıklandığında önce bmw.htm dosyası açılır, ardından 320i isimli anchor sayfa başına gelene kadar sayfa kaydırılır.
Bu örneği bilgisayarınızda denemek için uzun metin içeren bir sayfa oluşturun ve sayfanın sonlarına doğru bir nesneye anchor verin. Sonra başka bir dosyadan bu anchor'a yukarıda öğrendiğimiz metotla bağlantı kurun.
Kod:
<a>...</a>
etiketleri arasındaki nesnenin bağlantı mı anchor mı olacağını belirleyen href ve name parametrelerinden sonra tek tek diğer parametreleri ele alalım.
accesskey Parametresi
Kod:
<a href="periyodiktablo.htm" accesskey="p">Elementlerin periyodik tablosu için tıklayınız</a>
Bu parametre ile Mouse dışında klavye tuşları ile bağlantıya ulaşmak mümkündür. Fakat bu örnekte tanımladığımız "p" tuşuna basmak hiçbir etkiye sebep olmaz. Çünkü accesskey ile tanımlanan tuşlar tek başlarına kullanılmazlar. Alt tuşu ile birlikte p tuşuna bastığımızda Browser'ın durum çubuğunda (status bar-Browser penceresinin alt kısmındaki çubuk şeklinde bölüm) bağlantının verildiği dosya görüntülenir. Tıpkı Mouse imlecini bir bağlantının üzerine getirdiğimizde olduğu gibi. Ardından "enter" tuşuna basıldığında bağlantı tıklandı demektir. Bağlantı verilen dosya açılır veya çalıştırılır.
charset Parametresi
Hedef dosyanın karakter setini belirtmekte kullanılır. Sayfa karakter setini meta etiketleri ile belirtmeyi kitapçığın başında öğrenmiştik. Bu kod aynı zamanda sayfadaki Türkçe karakterlerin düzgün görüntülenebilmesi için her sayfada yer alması gereken bir koddu. Türkçe karakter setini belirten windows-1254 ve iso 8859-9 değerleri dışında diğer dillerin de özgün değerleri vardır. İşte charset parametresi yaygın olarak kullanılmamakla birlikte kendi sayfalarımız içerisinde değil de örneğin yabancı dilde hazırlanmış bir sayfaya bağlantı verirken kullanılabilir.
Kod:
<a href="http://msdn.microsoft.com" charset="iso8859-1">Microsoft'un yazılım geliştiriciler için hazırladığı site</a> [b]
title Parametresi[/b]
Bağlantı kurulan dosyaya başlık vermekte kullanılır. Internet Explorer kullanıcıları Mouse imlecini bağlantı üzerine getirdiklerinde sarı bir pencere içerisinde ( etiketinde kullandığımız alt parametresinde olduğu gibi) title'da verilmiş metni görebilirler. Netscape ise title parametresine karşı herhangi bir tepki göstermez!
Kod:
<a href="http://www.pclife.com.tr" title="Aylık Bilgisayar derginiz">PC Life</a>
target Parametresi
Bağlantı verilen dökümanın hangi pencere veya çerçevede açılacağını belirtir. Bu parametre özellikle çerçeve yapısı içeren sayfalarda kullanılıyor.
Görüntülenen sayfayı çerçeve (frame) kullanarak birkaç parçaya ayırmışsak, target parametresi ile çerçevelerden birindeki bağlantının tıklanmasıyla başka bir çerçevenin içeriğinin değişmesini sağlayabiliriz. Bunun dışında target parametresine verilebilecek diğer değerlerle frame yapısının iptal edilmesini, yine bağlantının kendi açtığımız pencerede görünmesini sağlayabiliriz.
Buradaki değerlerden 'pencere veya çerçeve adı'nı çerçeveler konusunda ele alacağız. _blank değeri bağlantının isimsiz yeni bir pencerede açılmasını sağlar, _self değeri bağlantının aynı pencere veya çerçevede açılmasını sağlar, bu değer aynı zamanda varsayılan (default) değerdir. _parent, hiyerarşik yapıda (örneğin çerçeveyi oluşturan dosyalardan birisi yeni bir çerçeve oluşturuyorsa veya çerçeveler tanımlanırken birden fazla frameset kullanılmışsa) çerçeveler sözkonusu olduğunda bağlantı, mevcut frameset'i oluşturan bölgede görüntülenir, aksi durumda _self değeri ile aynı sonucu verir. _top, mevcut sayfadaki tüm frame yapısını kaldırarak bağlantıyı açar. Şayet sayfada çerçeve yapısı bulunmuyorsa _self değeri ile aynı sonucu verir.
Aksi belirtilmediği sürece sayfadaki tüm bağlantılar default renk olan mavi ile gösterilir. Şayet bağlantı tıklanmışsa bu bağlantı artık ziyaret edilmiştir ve farklı bir renkle, mor ile gösterilir. Bir üçüncü durum da bağlantının aktif olma durumudur. Bağlantıyı tıklayıp Mouse sol tuşunu basılı tuttuğumuzda bağlantı aktif vaziyette sayılır. Yine bir bağlantıyı tıklayarak yeni sayfaya gidildiğinde ve Browser'ın back/geri butonunu kullanarak önceki sayfaya dönüldüğünde aktif bağlantıyı farklı rengiyle gözleyebiliriz.
Şimdi bağlantıların bu üç durumuna ayrı ayrı renk atamayı görelim. Bunu
Bu kod ile sayfada kullanılan tüm bağlantıların rengi değiştirilmiş olur.
Kod:
link="#ff0000" değeri bağlantıların kırmızı renkle gösterileceğini, vlink="#000000" değeri ziyaret edilmiş bağlantıların siyah olacağını, alink="#0000ff" değeri de aktif linklerin mavi olacağını belirtiyor.
Renk kullanımdaki genel kurallar burada da geçerliğini koruyor. Yani heksadecimal değerler kullanılabildiği gibi İngilizce renk adlarını da kullanabiliriz.
Aslında bağlantıların bir dördüncü durumu da vardır. Bu durum Mouse imlecini bağlantının üzerine getirdiğimizde ortaya çıkar. Bu duruma hover diyoruz. Yalnızca Internet Explorer kullanıcıları hover durumunu gözleyebilirler. Hover kontrolünü HTML etiket ve parametreleri ile yapamıyoruz, bunun için CSS (Cascading Style Sheets/Stil şablonu) tekniklerinden yararlanmak gerekiyor.
Resim Haritaları (Image Map)
Bazen bir Web sayfasında bir resim ya da fotoğrafın üzerinde tıklanabilir alanlar oluşturulduğunu görürsünüz; bu noktalardan birini tıkladığınızda Browser'ınız sanki
Kod:
<a>
etiketi ile bir bağlantı sağlanmış gibi, hedef sayfa, yer veya nesneye gider.
Hatırlarsanız
Kod:
<a href>
etiketi ile bir resme tek bir bağlantı verebiliyorduk. İşte resim haritaları ile resmin farklı bölgelerine farklı bağlantılar vermek mümkün hale geliyor.
Resim haritaları kullanım tekniğindeki farklılığa dayanarak iki çeşittir:
Resmin üzerine Mouse ile tıklandığında, tıklanan noktanın koordinatları ziyaretçinin Browser'ı tarafından aranıp bulunuyorsa, buna client-side resim haritası denir. Daha etkin çalışır; daha hızlıdır. Fakat eski tür Browser'lar tarafından desteklenmez. Ziyaretçinin resimde tıkladığı noktanın koordinatları Sunucu tarafından aranıp bulunup, sadece sonuç Browser'a gönderilecekse, buna Sunucu-taraflı resim haritası denir. Yavaş çalışır; fakat eski tür Browser'lar sadece bu tekniği kullanabilirler. Resim haritası hazırlamak zahmetli bir iştir. Bu yüzden sırf bu iş için üretilmiş programlar bulunuyor. Ayrıca MS Frontpage, Macromedia Dreamweaver, HomeSite gibi HTML editörleri ile resim haritaları kolay bir şekilde hazırlanabiliyor.
Bir resim haritası hazırlamak için, Mouse imlecini resim üzerinde dolaştırdığımız sırada imlecin koordinatlarını gösterebilen bir grafik editörüne ihtiyacımız var. Kullandığınız programın böyle bir özelliği bulunmuyorsa artık o programı yeni sürümüyle değiştirmenin zamanı gelmiş demektir. Örneğimizdeki ekran görüntüleri Photoshop'a ait. Ancak diğer grafik editörleri ile koordinatları benzer şekilde saptayabilirsiniz.
Haritada kullanacağımız resmi etiketi ile sayfaya yerleştiriyoruz; ancak burada yeni bir parametre kullanıyoruz: usemap. Bu parametrenin değeri olarak, daha sonra hazırlayacağımız haritaya vereceğimiz ismi, başına # sembolünü ekleyerek, yazıyoruz.
Harita hazırlama işini başlatan etiket ise,
Kod:
<map>
etiketi.
Kod:
<map name="..."> ... </map>
etiketleri arasında resim üzerindeki bölgeleri ve bu bölgelerin her birinin bağlantılarını tanımlarız. Tıklanabilir özellikler kazandırmak istediğimiz bölgeleri etiketi ile belirtiriz. Bu etiketin coords ve shape parametrelerine dikat edin. shape İngilizce şekil anlamına geliyor. Bu parametreye örnekte verdiğimiz rect değeri ise rectangular yani dikdörtgen alan tanımlanacağını bildiriyor. Dikdörtgende tanımlanabilecek 4 nokta (köşeler) bulunduğuna göre bu noktaların koordinatlarını da coords parametresinde belirtiyoruz. (Koordinatları grafik editöründe nasıl bulacağımıza değineceğiz.) shape parametresi ile başka şu alanlar tanımlanabilir:
Kod:
shape = circle | rect | poly
circle daire biçiminde alan oluşturur. 3 adet koordinat tanımlamak gerekir. (dairenin merkez koordinatı ve piksel olarak yarıçap uzunluğu) rect dikdörtgen alan oluşturur. 4 köşe için koordinat değeri verilir. poly çokgen biçiminde alan oluşturur. Çokgenin köşe sayısı kadar koordinat tanımlanır.
Oluşturulan alanın şekline göre koordinat sayısına dikkat etmek gerekiyor.
Şimdi de grafik editörü ile koordinatları nasıl bulacağımızı görelim.
Mouse imlecini resim üzerinde gezdirdiğimizde imleç koordinatlarını Photoshop'ın info penceresinde görebiliriz. Siz de kendi grafik editörünüzün pencere ve menülerini karıştırarak imleç koordinatlarını nasıl bulacağınızı öğrenebilirsiniz.
Örneğin 100x200 piksel ebatlarında bir resmi ele alalım. Koordinatları (x,y) biçiminde ifade ediyoruz.
0,0 noktası resmin sol üst köşesidir. Sağ üst köşe 0,200 sol alt köşe 100,0'dır.
Şimdi örnek haritada kullandığımız resmin koordinatlarını nasıl bulduğumuzu inceleyelim. Photoshop gibi, imlecin resim üzerindeki koordinatlarını bildiren bir grafik editing programında resmi açarak, imleci resim üzerindeki "anasayfa" yazısının sol üstüne getirip koordinatları okuyoruz. Bu değer x,y biçiminde iki sayıdan ibarettir. Bizde bu değer 11,16 olarak gözüküyor (Ekran görüntüsü üzerindeki 1 noktası). Şimdi de imleci aynı yazının sağ altına getiriyoruz. Okunan değer: 102,37 (Ekran görüntüsü üzerindeki 2 noktası). Böylece birinci dikdörtgen alanın koordinatlarını öğrendik. İlk ve son okuduğumuz 4 değeri sırayla coords parametresine yazıyoruz:
Anasayfa 
Latest images 
Oyun 
Konu: Baştan Sona Html Bilgilerimizi Yoklayalım ;) 
