phpKF - php Kolay Forum  
Ana Sayfa  |  Yardım  |  Üyeler  |  Giriş  |  Kayıt
 
Forumunuz Hayırlı olsun yenilendi

Resim Ekleme

Bu Sayfadaki Bilgiler 04/05/2007 tarihli ve 5651 sayılı
Bu Sayfadaki Bilgiler 04/05/2007 tarihli ve 5651 sayılı "İnternet Ortamında Yapılan Yayınların Düzenlenmesi ve Bu Yayınlar Yoluyla İşlenen Suçlarla Mücadele Edilmesi Hakkında Kanun" Uyarınca Gerekli Durumlarda İletişim Sağlanabilmesi İçin Eklenmiştir. Lütfen Gerekli Durumlarda Kullanınız... İbrahim uzun Esatpaşa mah 3.demiryollu 1201.sk no:28 menemen/izmir/Türkiye email :Uzun_70@hotmail.com
Forum Ana Sayfası  »  Web dizayn için
 »  HTML Dersleri -1

Yeni Başlık  Cevap Yaz
HTML Dersleri -1           (gösterim sayısı: 1.768)
Yazan Konu içeriği

boşluk

lovepowerman
[lovepowerman]
lovepowerman

Kullanıcı Resmi

Kayıt Tarihi: 13.09.2010
İleti Sayısı: 2.589
Şehir: İzmir
Durum: Forumda Değil

E-Posta Gönder
Web Adresi
Özel ileti Gönder

Konu Tarihi: 13.03.2011- 13:07
Alıntı yaparak cevapla  


Sıralı Listeler
Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin
başladığını ve bittiğini belirtir. Liste maddelerinin başına ise <li> (list item) etiketini getiriyoruz.
Bu etikette tıpkı <br> etiketi gibi sonlandırılmıyor. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla
listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz.
Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.
Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde) bölümünü vereceğiz. Kodun geri kalan kısımlarını
kendi sayfanızda tam olarak yazmayı unutmayın.
<ol type="1"> <li>Kimya <ol type="a"> <li>İnorganik <li>itik </ol> <li>Fizik <ol type="a"> <li>Dinamik <li>Statik
</ol> <li>Matematik <ol type="a"> <li>Sayılar <li>Diğer <ol type="i"> <li>Türev <li>İntegral </ol> </ol></ol>
1. Kimya
1. Organik
2. İnorganik
3. itik
2. Fizik
1. Dinamik
2. Statik
3. Matematik
1. Sayılar
2. Diğer
1. Türev
2. İntegral
Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak da mümkün. Dikkat edeceğimiz nokta; işe <ol> etiketi
ile başlayıp liste maddelerinin her birisinin başına <li> etiketini getirmek ve listelemeyi bitirmek istediğimiz
yerde </ol> etiketini yazmak. Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra
tekrar <ol> etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz. Type parametresinde kullanabileceğimiz
değerler şunlar olabilir; sayılar, harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi)
Sırasız Listeler
Bu tip listelerde de mantık aynı. Fark; listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük
yuvarlaklar, kareler kullanabilmemiz. <ol> etiketi yerine <ul> etiketini kullanıyoruz, liste maddeleri için
kullandığımız <li> etiketi burada da geçerli. <ol> için kullanılabilecek parametreler ise şöyle; type için disc
(içi dolu daire), circle (içi boş daire), square (içi dolu kare). Compact parametresi sırasız listelerde de
kullanılabiliyor.
<ul type="disc"> <li>Kimya <ul type="square"> <li>İnorganik <li>itik </ul> <li>Fizik <ul type="square"> <li>
Dinamik <li>Statik </ul> <li>Matematik <ul type="square"> <li>Sayılar <li>Diğer <ul type="circle"> <li>Türev <li>
İntegral </ul> </ul></ul>
* Kimya
o Organik
o İnorganik
o itik
* Fizik
o Dinamik
o Statik
* Matematik
o Sayılar
o Diğer
+ Türev
+ İntegral
Tanımlama Listeleri
Bu listelemede kullanılan etiketler şöyle; <dl>...</dl> , <dd> , <dt> Listenin maddelerini belirtmek için kullandığımız
<li> etiketinin yerini burada <dd> ve <dt> etiketleri alıyor. Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri
arasına aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz. Yine parametre olarak <dl> etiketi içinde compact
ifadesini kullanabiliriz.
Hemen örneğimize geçelim,
<font face="verdana" size="4" color="red">Neler öğrendik?</font>
<dl compact>
<dt><font size="3" color="blue">HTML nedir?</font>
<dd><font size="2" color="black">HTML (HyperText MarkupLanguage-Hareketli-Metin İşaretleme Dili) basitçe, browserlarla
görebileceğimiz, internet dökümanları oluşturmaya yarayanbir çeşit dildir...</font>
<dt><font size="3" color="blue">HTML'de Temel Unsurlar</font>
<dd><font size="2" color="black">Bu dilde binary veyahexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı
oluşturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip editörbulunuyor. Birisi metin tabanlı, kod yazmayı
gerektiren...</font>
<dt><font size="3" color="blue">Listeler</font>
<dd><font size="2" color="black">Sıralı listeler rakamveya harf yada her ikisini içiçe kullanarak liste oluşturmamızı,
sırasızlisteler rakam/harf yerine madde imleri koyarak listeoluşturmamızı sağlar...</font>
Renk Kodları
Fontlar konusunda, metnin rengini belirlerken <font color="..."> etiketini kullanmıştık ve color komutunun
karşısına rengin ingilizce karşılığını yazabiliriz demiştik. Fakat bunun daha karmaşık olan bir başka yolu
vardı; o da 16'lık sayı düzeninde renk kodu girmek. Önce sayı düzenleri nedir nasıl olur ona bakalım. </B>
Günlük hayatımızda kullandığımız sayı sistemine 10'luk sayı sistemi deniyor, tüm sayıları 0-9 arası toplam 10
rakamdan oluşan sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanısıra diğer sayı sistemleri de vardır.
Bunlardan bilgisayar alanında kullanılan iki tanesi ikili (binary) ve onaltılı (hexadecimal) sayı sistemleridir.
İkili sayı sistemi nasıl olur? Bildiğiniz gibi günlük hayatta kullandığımız 10'lu sayı sisteminde 0-9 arası
toplam 10 rakam vardır. Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var (bunlar 0 ve 1) ve tüm sayılar
bu iki rakamı kullanarak ifade edilebilir, nasıl mı? İşte burada işin içine matematik giriyor. Kısa ve öz olarak
belirtmek gerekirse 10'luk düzendeki bir sayıyı ikilik düzene çevirmek için o sayı devamlı olarak 2'ye bölünür
ve kalanlar soldan sağa doğru yanyana yazılır.
Gelelim asıl konumuz olan 16'lık sayı sistemine. Bu sayı sisteminde de toplam 16 rakam var bunlar;
0 1 2 3 4 5 6 7 8 9 A B C D E F
[10'un karşılığı A ... 15'in karşılığı F'dir.]
Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-blue,kırmızı-yeşil-mavi) renklerinin karışım
oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum
karışımı verir).
Buna göre; #000000 siyah, #FF0000 kırmızı, #00FF00 yeşil, #0000FF mavi, #FFFFFF beyaz'dır. Diğer renkleri
sayıları değiştirerek kendiniz deneyebilirsiniz.
1. #000000=black(siyah)
2. #000080=navy(lacivert)
3. #0000FF=blue(mavi)
4. #008000=green(yeşil)
5. #008080=teal(koyu yeşil)
6. #00FF00=lime(parlak yeşil)
7. #00FFFF=aqua(turkuaz)
8. #800000=maroon(vişne çürüğü)
9. #800080=purple(mor)
10. #808000=olive(zeytuni yeşil)
11. #808080=gray(gri)
12. #C0C0C0=silver(gümüşi gri)
13. #FF0000=red(kırmızı)
14. #FF00FF=fuchsia(parlak pembe)
15. #FFFF00=yellow(sarı)
16. #FFFFFF=white(beyaz)
Artalanı Renklendirmek
Bu renklerle yalnızca metinleri değil sayfamızın artalananını da renklendirebiliriz.
Bunun için <body bgcolor=#xxxxxx> etiketini kullanıyoruz. Daha doğrusu sayfamızın gövdesini belirtmek için
yazdığımız <body> etiketini, <body bgcolor=#xxxxxx> şeklinde değiştiriyoruz.
Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !
<body bgcolor="#ffcc00"> <font face="verdana" size="4" color="#ffffff"> <ol><h2><u>Günler</u></h2>
<font color="#0000ff"> <li>Pazartesi <li>Salı <li>Çarşamba <li>Perşembe <li>Cuma </font> <font color="#ff0000">
<li>Cumartesi <li>Pazar </font> </ol> </font></body>
Renkleri de öğrendikten sonra geldik en heyecanlı konuların bir diğerine, evet bu konuda sayfamıza ve artalana
nasıl resim ekleyebileceğimizi öğreneceğiz. Bu konu aslında tablolar ve bağlantılarla da alakalı, bu yüzden
burada genel olarak işleyeceğiz. Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu
dışında herhangi bir kısıtlama yok. (telif hakları kanunu dışında tabi) Resim ekleme işi gayet kolay.
Yapmamız gereken browser'a sayfaya koyacağı resmin nerede olduğunu göstermekten ibaret. Her ne kadar şart
olmasa da resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz sayfanızın hayrına olacaktır. Kullanacağımız
etiket şu şekilde olacak;
<img src="resmin bulunduğu yer ve adı" width="x" height="y">Burada x resmin enini y ise boyunu belirtiyor.
Bu bilgileri, resmi herhangi bir grafik editörüyle açarak öğrenebilirsiniz.
Dikkat Edilecek Hususlar
Örneğin bu sevimli kediyi sayfamıza ekleyelim, peki işte size bir soru: bu resmin nerede olduğunu browser'a
nasıl izah ederiz?
Diyelim ki resmimizin adı kedi.gif eni 65, boyu da 91 piksel, eğer bu resim html sayfamızla aynı dizinde
duruyorsa sorun yok, kod aynen şu şekilde olmalı:
<img src="kedi.gif" width="65" height="91">Fakat siz diyorsunuz ki; benim sayfamda kullanmak istediğim bir
sürü resmim var ve bunları resim adlı bir alt klasörde topladım. Yani html dosyası c:\html_ders dizininde
resimler de c:\html_ders\resim dizininde. Bu durumda browser'ı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 kullanacağız;
<img src="resim/kedi.gif" width="65" height="91">
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.
Ziyaret ettiğiniz Internet adreslerini hatırlayın.
Peki ya şu şekilde olsaydı; resim klasörünün altında başka bir klasör var ve kedi.gif dosyası o klasörde,
diyelim ki klasörün adı da gifler olsun. Bu durumda kedi.gif'in harddiskimizdeki yolu da
c:\html_ders\resim\gifler\kedi .gif şeklinde olacak. Etiket tahmin ettiğiniz gibi şu şekilde olmalı:
<img src="resim/gifler/kedi.gif" width="65" height="91">Bu şekilde istediğimiz kadar alt dizine ulaşabiliriz.
Fakat üst dizinlere nasıl ulaşacağız? O da kolay. Bu seferde html dosyamızı bir klasör oluşturup o klasörün
içine koyalım, mesela klasörün adı da html olsun -umarım karıştırmazsınız. Kedicik bulunduğu gifler klasöründe
kalsın. Son durum şöyle olacak;
c:\html_ders\html\deneme.htm yolunda html dökümanımız,
c:\html_ders\resim\gifler\kedi .gif yolunda resim var. İzlememiz gereken yol şöyle: browser deneme.htm dosyasının
bulunduğu klasörü kök dizin kabul etti. Önce bir üst dizine çıkmalıyız ardından resim dizinine oradan gifler dizinine
girmeliyiz. Üst dizine çıkmayı ../ ifadesiyle belirtiyoruz.
<img src="../resim/gifler/kedi.gif" width="65" height="91">Bu şekilde ardarda ../ ifadesiyle istediğimiz kadar
üst dizine geçebiliriz. Eğer iki üste geçeceksek ../../ ifadesi işimizi görecektir.
Resmi Hizalama
Resim artık sayfamızda, fakat daima hep solda duruyor.
Bir hizalama (align) komutuyla resmi sağa (right) ya da sola (left) alabiliriz.
-iyi ama resim zaten solda değil miydi??
Bir metinle kullandığınızda ise buradaki gibi bir sonuç alabilirsiniz, hizalama komutu resmi bu sefer metni
gözönüne alarak hizalayacaktır.
<img src="resim.jpg" width="25" height="25" align="right">
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.
<body bgcolor="..." background="...">Kullandığımız resme yakın tonda bir rengi bgcolor ifadesinin karşısına yazmayı
ihmal etmemek yine bizim hayrımızadı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 browser tarafından tüm sayfayı kaplayacak şekilde sayfaya yerleştirilecektir.
Resme alternatif metin eklemek
Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer browser'ı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ı fare imlecini resim üzerine
getirdiğinde sarı bir çerçeve içinde görüntülenir.
<img src="resim.gif" alt="kum saati">
Son bir örnekle bu konuyu bitirelim,
Gökyüzünü artalana koyalım, dünyayı da ortalanacak şekilde sayfaya yerleştirelim.
<body bgcolor="#666dfe" background="bulut.jpg"><center>
<img src="world.gif" width="360" height="170" alt="harita"></center>
Eğer hala yapmadıysanız resimlere sağ tıklayıp (Resmi farklı kaydet../Save image as. seçeneğiyle bu resimleri
harddiskinize kaydedebilirsiniz.Şu ana kadar öğrendiğimiz komutlarla yerleştirme işlemini ancak bu kadar yapabiliyoruz.
Daha sonraki konularda tabloları kullanarak istediğimiz düzeni sağlamayı öğreneceğiz.
<a>...</a>Geldik HTML'de en önemli unsurlardan birisi olan bağlantılara. 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. Örnek için bu sayfayı incelemeniz yeterli. Sol tarafta konuları veren
bir menü bölümü var. Siz bu bağlantılardan birisini tıkladığınızda ilgili konu açılıyor, sayfa sonlarında da diğer
derslere bağlantılar oluşturulmuş, bunlar tıklandığında ilgili sayfa açılıyor. Bu yolla başka neler yapılabilir?
Ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri,.. bunların hepsine bağlantı kazandırmak mümkün.
Hatta yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı da olabilir.
Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim:
<a href="....">...</a>
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.
Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim; <a>...</a> etiketi arasına
yazdığımız metinler bağlantı özelliğine sahip olacaktır, metnin bağlantı olduğu eğer aksi belirtilmemişse browser
tarafından altı çizili ve mavi renkli gösterilir.
Örnekler
<a href="meyve.gif">buraya tıklandığında meyve resmi açılacak</a>Birinci örnekte "buraya tıklandığında meyve resmi
açılacak" yazısına bağlantı özelliği kazandırdığımızdan, browser tarafından altı çizili mavi yazıyla gösterilecek
ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladığında
browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve.gif resmini açacaktır. Tabii ki dosya farklı bir
dizinde ise kullanıcı hata mesajıyla karşılaşır.
<a href="midi.zip">midi dosyalarını çekmek için tıklayın</a>İkinci örnekte aynı şekilde "sıkıştırılmış midi
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 meyve.gif'e tıklandığında browser resmi açacaktır fakat bu örnekte browser kullanıcıya
midi.zip dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi browser'ın
htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları açamamasıdır.
<a href="sayfa2.htm">2.sayfaya gitmek için tıklayın</a>Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında
aynı dizinde bulunan sayfa2.htm isimli başka bir html dökümanı açılacaktır.
<a href="resim/kedi.jpg">kedi resmi</a><a href="resim/bitki/karanfil.gif">işte çok güzel bir
karanfil</a><a href="../araba/bmw.jpg">otomobil resimleri</a>Bu 3 örnekte altdizinlere/üstdizinlere verilen
bağlantıya misaller görüyorsunuz, resimler konusunda gördüğümüz kurallar burada da geçerli.
<a href="http://www.benimsitem.com/">tıklayın sitemi ziyaret edin</a>Yedinci örnekte bir internet adresine link verdik.
<a href="ftp://ftp.benimsitem.com/">tıklayın dosyaları indirin</a>Bu ise bir ftp adresine verilen link örneği.
<a href="mailto: mdurcan@webteknikleri.com">mail atın</a>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.
Örnek sayfa için listeler linkini tıklayın.
Böyle bir sayfa hazırlamak için yapacağımız şeyler:
1. "tıklandığında" açılacak konuyu işaretlemek <a name="....">...</a>
2. browser'a, hazırlayacağımız menüye "tıklandığında" bu işaretli konuya gitmesini bildirmek.<a href="#...">...</a>
"Listeler" sayfasının benzer bir örneğini yukarıda kodlarıyla birlikte görüyorsunuz. Sayfa içerisindeki
başlıkları <a name>...</a> komutları arasına alıyoruz, name kısmına başlığı hatırlatıcı bir isim verebilirsiniz.
Benim burada kullandığım <u> ve <b> etiketleri, önceden öğrendiğimiz gibi başlığı altı çizili ve koyu olarak yazıyor.
Yine 1-2-3 başlıklarıyla oluşturduğumuz menü linklerini <a href> komutuyla hazırlıyoruz, yalnız bir farkla; name
kısmında başlığa verdiğimiz hatırlatıcı ismi önüne # işaretini koyarak href kısmına yazıyoruz. İşte bu iş bu kadar
kolay.Diyelim ki kullanıcı sayfadaki bir linki tıkladığında, başka bir sayfanın belli bir bölümünün açılmasını
istiyoruz,bunun için linke tıklandığında açılacak yazıyı <a name>...</a> ile işaretledikten sonra bağlantı etiketini
şu şekilde yazıyoruz:
<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
Metinlere bağlantı vermeyi öğrendik, peki sayfadaki resimlere nasıl link vereceğiz? Bunun 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.
İşte örnek;
<a href="sayfa1.htm"><img src="resim.gif" border="0"></a>
resim.gif tıklanacak resmi, sayfa1.htm 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ı :
<a href="..." target="...">...</a>
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..
<table>...</table>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, böylece şu ana kadar öğrendiklerinizle yapamayacağınız
gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği
hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna
eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu
tartışmak değil tablolar konusunu işlemek.
İşte tablolar,
SonbaharKışİlkbaharYazEylülAra lıkMartHaziranEkimOcakNisanTem muzKasımŞubatMayısAğustos
Tabloyu renklendirelim,
SonbaharKışİlkbaharYazEylülAralıkMartHaziranEkimOcakNisanTemmuzKasımŞubatMayısAğustos
Başka bir örnek (farklara dikkat ediniz)
ÖLÇÜLER BoyKilo1.Hakkı1.77802.Mustafa1.82753.Osman1.7583
Bu örneklerde de görüldüğü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz.
Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona
erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya
altındaki hücrelerle birleştirebiliriz:
Tablonun alt yazısı(caption)Tablo Başlığı (thead)Sütun Başlığı
#1Sütun Başlığı
#2Sütun Başlığı
#3Sütun Başlığı
#4hücrehücrehücrehücrehücrehüc rehücrehücrehücrehücre
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> etiketi ile satırları <td> etiketi ile de sütunları
oluşturuyoruz.
hücre<table border="1">
<tr>
<td>hücre</td>
</tr>
</table>hücre1hücre2<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1">
<tr>
<td>hücre1</td>
<tr>
</tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2hücre3hü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;
Tablo Başlığı (thead)alt-yazı (caption)1.Sütun2.Sütun3.Sütun hücre1hücre2hücre3hücre4hücre5 hücre6hücre7hücre8hücre9
<table border="1">
<thead>Tablo Başlığı (thead)</thead>
<caption align="bottom">
alt-yazı (caption)
<caption>
<tr>
<th>1.Sütun</th>
<th>2.Sütun</th>
<th>3.Sütun</th>
</tr>
<tbody>
<tr>
<td>hücre1</td>
<td>hücre2</td>
<td>hücre3</td>
</tr>
<tr>
<td>hücre4</td>
<td>hücre5</td>
<td>hücre6</td>
</tr>
<tr>
<td>hücre7</td>
<td>hücre8</td>
<td>hücre9</td>
</tr>
</tbody>
</table>
Parametreler
<table border="..." cellpadding="..." cellspacing="..." align="..." width="..." height="...">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>hücre<table border="4">
<tr>
<td>hücre</td>
</tr>
</table>hücre<table border="6">
<tr>
<td>hücre</td>
</tr>
</table>
cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre içinde bulunan unsurun (metin/grafik)
hücre çerçevesine 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ı marjı belirler.
hücre1hücre2<table border="1" cellspacing="1">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" cellspacing="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hü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ücre1hücre2<table border="1" align="left">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" align="center">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" align="right">
<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.
hücre1hücre2<table border="1" width="150" height="200">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" width="80" height="80">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" width="5" height="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
<td> etiketi için parametreler
<td bgcolor="..." background="..." width="..." height="..." align="..." valign="...">bgcolor parametresi hücreyi
renklendirmede kullanılır.
hücre1hücre2hücre3hücre4<table border="1" cellpadding="7"><tr> <td bgcolor="#ff0000">hücre1</td></tr><tr>
<td bgcolor="#00ff00">hücre2</td></tr><tr> <td bgcolor="#0000ff">hücre3</td></tr><tr>
<td bgcolor="#ffff00">hücre4</td></tr></table>
background parametresi ile hücreye grafik-artalan yerleştirebiliriz.
hücre1hücre2hücre3hücre4<table border="1" cellpadding="9"><tr> <td background="resim1.jpg">hücre1</td></tr><tr>
<td background="resim2.jpg">hücre2</td></tr><tr> <td background="resim3.jpg">hücre3</td></tr><tr>
<td background="resim4.jpg">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.
hücre1hücre2hücre3hücre4<table border="1" cellpadding="7"> <tr><td width=120 height=20>hücre1</td></tr>
<tr><td width=120 height=40>hücre2</td></tr> <tr><td width=120 height=60>hücre3</td></tr> <tr><td width=120
height=80>hücre4</td></tr></table>
hücre1hücre2hücre3hücre4<table border="1" cellpadding="7"> <tr> <td width=40 height=30>hücre1</td> <td width=70
height=30>hücre2</td> <td width=90 height=30>hücre3</td> <td width=120 height=30>hücre4</td> </tr></table>
align parametresi hücre içinde yatay hizalama yapar.
hücre1hücre2hücre3<table border="1" cellpadding="7"><tr><td width="100" align="left">hücre1</td></tr><tr><td
width="100" align="center">hücre2</td></tr><tr><td width="100" align="right">hücre3</td></tr></table>
valign parametresi hücre içinde düşey hizalama yapar.
hücre1hücre2hücre3<table border="1" cellpadding="7"><tr> <td height="80" valign="top">hücre1</td></tr><tr>
<td height="80" valign="middle">hücre2</td></tr><tr> <td height="80" valign="bottom">hücre3</td></tr></table>
Hücreleri Birleştirme
<td colspan=".." rowspan="..">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.
ABCDEFGHIJKL<table border="1" cellpadding="12"> <tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>E</td><td>F</td><td>G</td><td>H</td></tr> <tr><td>I</td><td>J</td><td>K</td><td>L</td></tr></table>
Yukarıdaki tabloda;
A ve B hücrelerini birleştirmek için A hücresine ait <td> etiketine colspan=2 parametresini ekliyoruz ve B
hücresine ait <td>B</td> etiketini siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait <td>
etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait <td>F</td>, <td>G</td> etiketlerini siliyoruz.
ACDEHIJKL<table border="1" cellpadding="12"> <tr><td colspan="2">A</td><td>C</td><td>D</td></tr> <tr><td
colspan="3">E</td><td>H</td></tr> <tr><td>I</td><td>J</td><td>K</td><td>L</td></tr></table>
Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz
ve I hücresine ait <td>I</td> etiketini siliyoruz. C G ve K hücrelerini birleştirmek için C hücresine ait <td>
etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait <td>G</td> , <td>K</td> etiketlerini siliyoruz.
ABCDEFHJL<table border="1" cellpadding="12"> <tr><td>A</td><td>B</td> <td rowspan="3">C</td><td>D</td></tr> <tr><td
rowspan="2">E</td><td>F</td><td>H</td></tr> <tr><td>J</td><td>L</td></tr></table>

http://www.lovepowerman.net/
Yeni Başlık  Cevap Yaz



Forum Ana Sayfası  »  Web dizayn için
 »  HTML Dersleri -1

Forum Ana Sayfası

Forum Yazılımı:   php Kolay Forum (phpKF)  ©  2007 - 2010   phpKF Ekibi

Love Power Man

 RSS Beslemesini Görmek için Tıklayın   RSS Beslemesini Google Sayfama Ekle   RSS Beslemesini Yahoo Sayfama Ekle