Van.GEN.TR Forum | Yerel Van Forumu

Van.GEN.TR Forum | Yerel Van Forumu (http://forum.van.gen.tr/index.php)
-   Web Tasarım (http://forum.van.gen.tr/forumdisplay.php?f=26)
-   -   HTML DERSLERi (http://forum.van.gen.tr/showthread.php?t=8138)

ZyreC 23/07/07 17:28

Kolon ve Satır Birleştirme

Rowspan: Satır birleştirmek için kullanılır (her satıra ait sadece 1 hücreyi yani bir başka deyişle alt alta hücreleri birleştirir)
Colspan: Sütun birleştirmek için kullanılır (yanyana hücreleri birleştirir)

** bu kodları kullandığınızda değerleri ne kadar verirseniz okadar td atlamak zorundasınız. Yani o değer kadar td komutunu yazmamanız gerekir. Şöyle ki; td atlamazsanız tablonuz (çigileri varsa) düzensiz görünür.

Örnek:

<table border=3>
<tr>
<td rowspan=2>&nbsp
</td>
<td >&nbsp
</td>
<td >&nbsp
</td>
<td >&nbsp
</td>
</tr>
<tr>
<td colspan=2>&nbsp
</td>
<td >&nbsp
</td>
</tr>
</table>

** Ayrıca belirtmeliyim ki; hücrelerin içini boş bırakmak ve çizgi görünmesini isterseniz &nbsp kodunu kullanmalısınız.

ZyreC 23/07/07 17:29

Çerçeveler (frame'ler)

Çerçeveler sayfamızda bazı sabit bölümler ve istediğimiz alanın değiştiririlmesinde kullanılır. asıl amaç sayfanızda dolaşırken cpu kullanımını azaltmaktır ama görünümün düzen içermesi içinde kullanılır. <frameset> kodu ile başlar, </frameset> kodu ile son bulur. Bu iki kod genel çerçeveyi belirler. Bu kodların arasında kullanılan başka kodlar da vardır.

rows:altalta oluşturulacak sayfa sayısını belirtir.

cols: yanyana oluşturulacak sayfa sayısını belirtir.

src: Oluşturulmuş bir sayfayı belirtilen çerçeve içine çağırır.

<Frame>: ilgili frameset ayarlarını bu kodla yaparız. yani çerçeveye sayfa eklemek, çerçevelere bölmek gibi..

<noframes> </noframes>: çerçeveleri tanımayan tarayıcılarda ekranın boş gözükmemesi için bu kodla yedek bir sayfa bağlantısı kurulur.

scrolling=yes: ilgili çerçevede scrollbar kullanımını etkinleştirir.

scrılling=no: ilgili çerçevede scrollbar kullanımını kapatır.

scrılling=auto: ilgili çerçevede scrollbar kullanımı default ayarındadır.

name: çerçeve ismi belirler.


örnek:

<html>
<head>
<title> deneme sayfası </title>
</head>
<frameset cols="100,*,100"> sayfayı solda 100pxl sağda 100pxl geriye kalan pxl'leri orta bölümde olacak şekilde kolonlara böldük
<frame name="soldakisayfa" scrolling=no src="sol.htm"> soldaki bölüm tanımlandı
kolonla ayırdığımız çerçevelerin orta bölümü yapılıyor
<frameset rows="150,*"> sayfayı üstte 150pxl geriye kalan pxl'leri orta bölümde olacak şekilde satır mantığıyla böldük
<frame name="üstsayfa" scrolling=no src="üst.htm"> üstteki bölüm tanımlandı
<frame name="altsayfa" scrolling=yes src="alt.htm"> alttaki bölüm tanımlandı
</frameset> kolonlara ayırdığımız sayfanın orta bölümü bitti
<frame name="sağdakisayfa" scrolling=no src="sag.htm"> sağdaki bölüm tanımlandı
</frameset> kolonlara ayırdığımız sayfanın sağ bölümü bitti
çerçeveleri tanımayan tarayıcılar için bu kısmın yazılması gerekir.
<noframes>
<a href="baglantisayfasi.htm"> </a>çerçeveleri tanımayan bir tarayıcıda direkt olarak ekrana bağlantisayfasi.htm gelir.
</noframes>
</html>

ZyreC 23/07/07 17:29

bu örnekte görüldüğü gibi cols'ta veya Rows'ta ne kadar bölüm tanımlarsanız o kadar <frame mane=... src=.. > kullanmalısınız. Şunuda belirteyim ki; önce cols kullanmak şart değildir. sayfanızın düzeninin nasıl olmasını istiyorsanız ona göre cols yada rows başa gelir. bölmek istediğiniz kısımlarda bölme işlemini yaparsınız. yukarıdaki örnekte net bir şekilde görebilirsiniz.

Ayrıca benim tanımladığım bölümlerde pxl olarak kullanulan (150 yada 100 gibi) sayıları %30,%20,%80 şeklinde yüzde kavramıyla da tanımlayabilirsiniz. örnekte görmüş olduğunuz yıldız ise geriye kalan bölüm anlamındadır. tarayıcınız bunu bu şekilde anlar.

ZyreC 23/07/07 17:29

Arkaplan görüntüleri, sayfa duvarkağıdı

Sayfada düz arkaplan yerine renkli görüntüler kullanmak için background="resimadı" işareti kullanılmaktadır.

örnek:

<BODY BACKGROUND="zemin.jpg" text="#000000" link="#0066CC" vlink="#336600">

Bu resim sayfa ile aynı dizin içerisinde bulunmalı ve adı küçük/büyükharf olarak tag'de yazılan biçimi ile aynı olmalıdır. İnternet üzerindeki sistemlerin hiçbirinde dosya isimlerinde Türkçe harfler kullanılmamaktadır.

background işareti bgcolor ile birlikte kullanıldığında arkaplan resmi yükleninceye kadar sayfa bgcolor renginde görünecektir.

ZyreC 23/07/07 17:30

Yatay çizgiler

Sayfa içerisinde istediğiniz yere <hr> (horizontal ruler) işareti ile yatay bir çizgi atabilirsiniz.

Bu yatay çizigye bir kaç ekstra özellik kazandırmak mümkün:

Kalınlık: SIZE=sayı
Hizalama: ALIGN=LEFT/RIGHT/CENTER
Genişlik: WIDTH=yüzde veya WIDTH=sayı
Gölgesiz: NOSHADE

Bu özellikleri birleştirerek bir örnek verelim:
<hr size=10 align=left noshade width=50%>

Sola dayalı, 10 piksel genişliğinde, gölgesiz, ve sayfa genişliğinin yarısı genişlikte bir çizgi oluşturur.

**Web sayfalarında gördüğünüz bir çok süslü çizgi <hr> işareti ile değil, resimler kullanılarak oluşturulmuştur.**

ZyreC 23/07/07 17:30

Sırasız listeler

Kendi sırasız listelerinizi <ul> (unordered list) işaretini kullanarak yaratabilirsiniz. Nokta olması istenen her liste maddesi başında <li> bulunmalıdır. Komut biçimi şu şekilde:
<ul>
<li>Birinci madde
<li>İkinci madde
<li>Üçüncü Madde
</ul>

Sırasız liste şu şeklide görünecektir.

* Birinci madde
* İkinci madde
* Üçüncü madde

Sırasız listeler istendiğinde iç içe döngülendirilebilir.
<ul>
<li>Birinci madde
<li>İkinci madde
<ul>
<li>İkinci madde birnici şık
<li>İkinci madde ikinci şık
</ul>
<li>Üçüncü madde
</ul>

Döngülendirilmiş liste şu şekilde görünecektir.

* Birinci madde
* İkinci madde
* İkinci madde birinci şık
* İkinci madde ikinci şık
* Üçüncü madde


Sıralı veya Numaralı listeler


Sıralı listeler yaratmak için <ol> (ordered list) işaretini kullanabilirsiniz.
<ol>
<li>Birinci madde
<li>İkinci madde
<li>Üçüncü Madde
</ol>

Listeniz aşağıdaki gibi görünecektir.

1. Birinci madde
2. İkinci madde
3. Üçüncü madde

Sıralı listeler sırasız listeler gibi döngülendirilebilirler. Ayrıca sıralı ve sırasız listeler ile karışık iç içe döngüler oluşturmak mümkündür.


Tanım listeleri

Tanım listesini en iyi açıklamanın yolu bir örnek göstermektir.
<dl>
<dt> Elmalar
<dd> Elmalar hakkında bilgi burada verilmektedir.
<dt> Armutlar
<dd> Armutlar hakkında bilgi burada verilmektedir.
</dl>

İşte yukarıdaki tanım listesi aşağıdaki şekilde görünecekir.

Elmalar
Elmalar hakkında bilgi burada verilmektedir.
Armutlar
Armutlar hakkında bilgi burada verilmektedir.
<dl> bunun bir liste olduğunu gösterir.
<dt> bunun bir liste terimi olduğunu gösterir.
<dd> bunun bir liste maddesi olduğunu gösterir.

ZyreC 23/07/07 17:30

Ses Dosyaları

Bir Sayfa yüklendiğinde otomatik olarak ses dosyasının çalması nasıl sağlanır?
<EMBED SRC="ses.wav" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=3 > WAV
<EMBED SRC="ses.au" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=2 > AU
<EMBED SRC="children.mod" HIDDEN="FALSE" WIDTH="166" HEIGHT="95" autostart="true" loop="false"> MOD
<EMBED SRC="enter.mid" HIDDEN=true AUTOSTART=true LOOP=true > MIDI


Aktif Ses Kullanımı:
<EMBED SRC="ses.wav" NAME="snd" WIDTH="1" HEIGHT="2" SES> Here is a <A HREF="page.htm"
OnMouseOver="Play_()">link</A> aktif ses

ZyreC 23/07/07 17:31

Formlar

Formlar kullanıcılardan gelen bilgileri standart şekillerde alan sayfanın etkileşimli alanlarıdır. Form kullanmanın e-mail almaya göre bir çok avantajı var. Eğer uygun yazılımlar geliştirirseniz form bilgilerini doğrudan istediğiniz yazılıma yönlenirebilirsiniz. Herhangi bir yazılım kullanmıyorsanız formunuzu ilk örnekteki gibi salt metin olarak e-mail adresinize gelecek şekilde ayarlayabilirsiniz.
<form action="mailto:kullanici@adresiniz.net?subject=Kon u Başlığı" method="POST" enctype="text/plain" >
Form Elemanları
</form>

Cgi için örnek POST komutu:
<form method="post" action="http://sunucu_adi/cgi-bin/program_adi.pl?değişken">
</form>

GET komutu nadir kullanıldığından anlatılmayacak.

Formlarda kullanılan bazı alan seçenekleri:

Radyo Buton'u tipi:
<BR>Soru1.
<BR><INPUT TYPE=Radio CHECKED NAME="Soru_adi1" VALUE="Birinci_Yanıt"> İkinci_Yanıt
<BR><INPUT TYPE=Radio NAME="Soru_adi1" VALUE="İkinci_Yanıt"> İkinci_Yanıt
<BR><INPUT TYPE=Radio NAME="Soru_adi1" VALUE="Üçüncü_Yanıt"> Üçüncü_Yanıt

Liste tipi soru:

<BR>Soru2<BR>
<SELECT NAME="Soru_adi2" >
<OPTION> Seçenek1
<OPTION> Seçenek2
<OPTION> Seçenek3
</SELECT><BR>

Küçük metin:

<BR>Soru3:<BR>
<INPUT TYPE=Text NAME="Soru_adi3" VALUE="varsayılan_değer" SIZE=25 MAXLENGTH=30><BR>

Geniş metin alanı:

<TextArea NAME="Soru4" ROWS=7 COLS=35 MAXLENGTH=100>
Varsayılan Yazı
</TextArea><BR>

Kutu işaretleme tipi soru
<Br> <INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek1">seçenek1
<BR> <INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek2">seçenek2
<BR> <INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek3">seçenek3
</UL>

Gönderme ve Sıfırlama butonları:

<INPUT TYPE=Submit NAME="Gönder" VALUE="Gönder">
<INPUT TYPE=Reset NAME="Reset" VALUE="Reset">

ZyreC 23/07/07 17:32

META-işaretler:

Meta işaretler tarayıcılar, arama motorları ve sayfaya gelebilecek yazılımlara yönelik bilgiler içeren işaretlerdir. Sık kullanılan bir kaç Metaişaretin anlamını açıklamak yeterli olacaktır. Meta işaretler sayfada <HEAD> bölümü içerisine yerleştirlir.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9"> Turkish Metatag, Sayfanın Türkçe olduğunu ve uluslarası standart ensititüsünün ISO-8859-9 standardına uygun yapıldığını gösterir.

<META NAME="generator" CONTENT="Yazılım Adı"> Generator Meta tag, sayfanın hangi yazılım ile hazırlandığını gösterir.

<META NAME="Author" CONTENT=" Nevit "> Author Meta tag sayfanın hazırlayıcısı olan kişiyi gösterir.

<META NAME="keywords" CONTENT="keyword, keyword, keyword"> Content Meta tag Anahtar kelimelerin burada bulunması sadece bu bölüme bakan bazı arama motorlarının işini kolaylaştırır.

<META NAME="description"CONTENT=" Sayfanın tanımı "> Description Meta tag Bazı arama motorları arama motorunu kullanan kişilere bu bölümü gösterirler.

<META HTTP-EQUIV="Refresh" CONTENT="7;URL=index.html"> Refresh, İtme teknolojisi ile devreye giren bir meta işarettir. Sayfaya gelen kişi herhangi bir işlem yapmasa bile başka bir sayfaya aktarılır.

<META HTTP-EQUIV="Content-Type" Content-Base: "http://www.**********.com> Content Base, sayfa içeriğinin bulunduğu URL'yi gösterir.


Alıntıdır

TutSak 25/08/07 20:49

oooo Zor ßişeye ßenziyoR ZamanLa ÖğrEnecez iNş PayLaşım iÇin tşkLer ZyreC Emeğine SağLık.


Bütün Zaman Ayarları WEZ +3 olarak düzenlenmiştir. Şu Anki Saat: 02:14 .

Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.