Sayfa yönlendirme:
URL yönlendirme:
<html>
<title>Yönledirme Yapmak</title>
<meta http-equiv="refresh"
content="3;url=http://www.html-dersi.blogspot.com">
3 Sn’ ye İçinde Yönlendirileceksiniz.
<body>
</body>
</html>
<title>Yönledirme Yapmak</title>
<meta http-equiv="refresh"
content="3;url=http://www.html-dersi.blogspot.com">
3 Sn’ ye İçinde Yönlendirileceksiniz.
<body>
</body>
</html>
Bu ornekte <meta http-equiv="refresh" ...> diyerek, www gösterici programına yeni bir sayfa yüklemesini istediğimizi belirtiyoruz.
Bu yüklemeyi kaç saniye sonra yapması gerektiğini '<meta ..' nin devamındaki 'content="3;....">' yazısı ile belirliyoruz. Buradaki '3' yerine saniye cinsinden herhangi bir süre belirtebilirsiniz. '0' yazarsanız, doğal olarak hemen diğer sayfayı yüklemeye başlar.
Yönelinen sayfanın adresi de, ' ... content="saniye; url=http://...">
biçiminde veriliyor.
MÜZİK EKLEMEK
Ses Eklemek - Muzik Çalmak
Tarayıcıların destekledikleri media türleri şunlardır.• .wav
• .wma
• .au
• .mp3
• .mpg
• .mpeg
• .mid
• .avi
Bu media türlerini çalmak için aşağıdaki kodu kullanabilirsiniz.
<embed src="ses-dosyasi.mid" width="x" height="x" autostart="x" hidden="x" loop="x" volume="x"></embed>
Loop sayfamıza eklediğimiz ses veya görüntünün kaç defa çalacağını belirtmek için.
loop="true" ; Sürekli çalması için
loop =5 , beş kez çalınması sağlar.
Loop komutu kullanılmazsa bir kez çalınır.
autostart ile sayfa açılır açılmaz çalmaya başlamasını istiyoruz.
hidden="true" ile kontrol konsolunu saklıyabiliriz.
hidden="true" bu komut yazılmasa ekrana gelen iletişim konsolu küçüktür. İstenilirse width="x" height="y" ile konsolun boyutlarını belirleyebiliriz.
Volume - Media player ses ayarlarını kurar. Verilebilecek oran 0-100. (Varsayılan değer 50)
STANDART TAKILAR
<html> Tüm Html sayfaları<html> ile başlar </html> ile biter.<TITLE> .......... </TITLE> Sayfanın başlık kısmında çıkması istenen yazılar buraya yazılır (browser' ın başlık çubuğunda gözükecek yazıdır ).
<head> ve </head> : sayfanın başlık bilgileri 'title', 'meta' vs. buraya yerleştirilir.
<body> Sayfa üzerinde görülmesi istenen herşey bu bölümde yazılır.
<body> Takısının Parametreleri
<body bgcolor=”#ffff00” background=”#image.jpg” text=”#ffffff” link=”#0000ff“ hlink=”#ff0000” vlink=”#ff00ff” topmargin="25" leftmargin="15">
Bgcolor: Arka plan rengini ayarlar.
Background: Arka plana bir resmin duvar kağıdı olarak döşenmesini sağlar.
Text: Metnin rengini belirler.
Link : Linklerin renklerini belirler.
Hlink : Fare imleci link’in üzerine geldiğinde link’in hangi renkte görüntüleneceğini belirler.
Vlink: Ziyaret edilen sayfaların linklerinin rengini belirler.
topmargin : Sayfanın üst tarafındaki kenar boşluğunu ayarlar.
leftmargin : Sayfanın sol tarafındaki kenar boşluğunu ayarlar.
rightmargin : Sayfanın sağ tarafındaki kenar boşluğunu ayarlar
TABLOLAR
Genel kullanımı; Öncelikle <table>...</table> etiketlerini yazıyoruz,. <tr> etiketi ile satır açıyoruz; <td> etiketi sütun açıyoruz.<table>
<tr>
<td> … </td>
</tr>
</tablo>
Örnekler;
|
<table border="1"> <tr> <td>hücre</td> </tr> </table> |
||||
|
<table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> </table> |
||||
|
<table border="1"> <tr> <td>hücre1</td> <tr> </tr> <td>hücre2</td> </tr> </table> |
||||
|
<table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> <tr> <td>hücre3</td> <td>hücre4</td> </tr> </table> |
<table border= “1”> Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.
<table width=”100”> Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır.
<table height=”50”> Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır.
<table cellspacing=”2”> Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır.
<table cellpadding=”5”> Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır.
<table bgcolor=”#ffff00”> Tablonun genel arka plan rengini belirlemek için kullanılır.
<table align=”left”> ; <table align=right>; <table align=center> Tablonun konumunu ayarlamayı sağlar.
<table background=”tugla.gif”> Tablonun arkasına resim konulabilir.
< table bgcolor=”#ffff00” > Tablonun arka zemin rengini ayarlar.
<td> Takısının Parametreleri
Burada parametre kullanarak Tablo’nun hücrelerinin içeriğini sağa, sola veya ortaya yaslayabilir. Hücrelerin arka plan renklerini ayrı ayrı değiştirebiliriz.
<td bgcolor=”#00ffff”> Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir.
<td width=”250”> Hücre genişliğini belirlemek için kullanılır.
< td height=”50”> Hücre yüksekliğini belirlemek için kullanılı
<td colspan=”2”> Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir.
<td rowspan=”2”> Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir.
<td background=”hasan.gif”> Hücrenin arka planına bir resim yerleştirir.
<td align=”left”>, <td align=”right”>; <td align=”center”> Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz.
<td valign="top”>, <td valign="middle”>, <td valign="bottom”>, <td valign="baseline”> sadece <td> ile birlikte kullanılır, hücre içeriğini dikey olarak tablonun tepesine(top), ortasına(middle) veya tabanına(bottom) dayar.
Not : Align parametresi hücre içinde yatay hizalama yapar. Valign parametresi hücre içinde düşey hizalama yapar.
Not: <table border=“1”> takısı kullanıldıgında table ve td takısında <td bordercolor:#ff0000”> veya <table bordercolor:#ff0000”> paremetresi kullanıldıgında çerçevenin tüm kısımları aynı renge boyanıyor. Bordercolor yerine <BORDERCOLORDARK=”#ff0000”> kullanılırsa tablo çerçevesinin gölgeli kısmını <BORDERCOLORLIGHT=”#ff0000”> kullanılırsa çerçevenin ışığa bakan kısmını renklendiriyor.
Kenarlık renklerinde ayarlama yapmak
A.) Tablomuzun sadece bazı yerlerindeki iç kenarlıkları da yok etmemiz mümkün. Bunu <table> tagının "rules" elemanı ile yapabiliriz.
"Rules" Elemanının parametreleri.:
• none : Tüm iç kenarlıkları yok eder.
• rows : Dikey iç kenarlıkları yok eder.
• cols : Yatay iç kenarlıkları yok eder.
Örnek;
<table border="1" bordercolor="blue" rules="cols" cellpadding="5" cellspacing="0">
<tr>
<td>1.satır 1.sütun</td>
<td>1.satır 2.sütun</td>
</tr>
<tr>
<td>2.satır 1.sütun</td>
<td>2.satır 2.sütun</td>
</tr>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</table>
Tarayıcınızda şöyle gözükecektir:
| 1.satır 1.sütun | 1.satır 2.sütun |
| 2.satır 1.sütun | 2.satır 2.sütun |
| 3.satır 1.sütun | 3.satır 2.sütun |
B.) Tablomuzun sadece bazı yerlerindeki dış kenarlıkları yok etmemiz mümkün. Bu özelliği <table> tagının "frame" elemanı sayesinde gerçekleştiririz.
Frame" Elemanının Parametreleri.
• void : Tüm dış kenarlıkları yok eder.
• above : Sağ,sol ve alt kenarlığı yok eder.
• below : Sağ,sol ve üst kenarlığı yok eder.
• hsides : Sağ ve sol kenarlıkları yok eder.
• vsides : Üst ve alt kenarlıkları yok eder.
• rhs : Üst, alt ve sol kenarlığı yok eder.
• lhs : Üst, alt ve sağ kenarlığı yok eder.
Örnek;
<table border="1" bordercolor="red" frame="vsides"
cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>1.satır 1.sütun</td>
<td>1.satır 2.sütun</td>
</tr>
<tr>
<td>2.satır 1.sütun</td>
<td>2.satır 2.sütun</td>
</tr>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</tbody>
</table>
Tarayıcınızda şöyle gözükecektir:
| 1.satır 1.sütun | 1.satır 2.sütun |
| 2.satır 1.sütun | 2.satır 2.sütun |
| 3.satır 1.sütun | 3.satır 2.sütun |
Colspan ve Rowspan kullanımı ile ilgili örnekler
|
||||||||||||
| <table border="1" cellpadding="12"> <tr><td colspan="2">1</td><td>2</td><td>3</td></tr> <tr><td colspan="3">4</td><td>5</td></tr> <tr><td>6</td><td>7</td><td>8</td><td>9</td></tr> </table> |
||||||||||||
|
|||||||||
| <table border="1" cellpadding="12"> <tr><td>1</td><td>2</td> <td rowspan="3">6</td><td>3</td></tr> <tr><td rowspan="2">4</td><td>5</td><td>7</td></tr> <tr><td>8</td><td>9</td></tr> </table> |