HTML-Marquee-Etiketinin-Kullanımı_emresupcinMerhaba arkadaşlar,

HTML dersi ile devam ediyoruz ve konumuz <marquee> etketini kullanarak resim ve yazı kaydırma işlemleri. Bu html etiketi web sayfalarının bazılarında tercih edilmekte. Belki karşılaşmışsınızdır. Film indirme sitelerinde film afişleri kayan resim şeklindedir ya da blog sitelerine girdiğiniz zaman kayan bir yazı şeklinde hoşgeldiniz ile karşılaşırsınız.

Bende bu dersimizde bunlara teker teker değineceğim kodlarını da yazacağım. Umarım yardımı dokunur…

 

 

Birşeyi kaydırmak için gerekli kodumuz: <marquee></marquee> şeklindedir.

Örneğin; EmreSupcin yazısını kaydırmak için – <marquee>EmreSupcin</marquee> komutunu kullanırız. ..

 

 

KLASİK SAĞDAN SOLA KAYDIRMA

 

1  <html>
2  <head>
3   <title>Kayan Yazı - EmreSupcin</title>
4  </head>
5    <body>
6     <marquee>EmreSupcin</marquee>
7   </body>
8  </html>


YAZIYI SAĞA SOLA ÇARPTIRMAK

 

Ama yazımız sağdan sola doğru kayıyor. Bunu istersek sağa sola çarptırabiliriz. Bunun için behavior=”alternate” kullanacağız. Bu kodumuz sağa sola çarptırmak için gerekli olan koddur.

 

 

1  <html>
2   <head>
3    <titl>Kayan Yazı - EmreSupcin</title>
4     </head>
5   <body>
6  <marquee behavior="alternate">EmreSupcin</marquee>
7   </body>
8     </html>



RENKLİ BİR ŞERİT ÜZERİNDE KAYDIRMA

 

Eğer kırmızı bir şerit üzerinde kaymasını istiyorsak marquee’nin rengini değiştirebiliriz. Bunun için bgColor=”red” kodunu kullanabiliriz.

 

 

1  <html>
2   <head>
3     <title>Kayan Yazı - EmreSupcin</title>
4   </head>
5    <body>
6   <marquee behavior="alternate" bgColor="red">ES</marquee>
7    </body>
8    </html>



AŞAĞIDAN YUKARI KAYDIRMAK

 

Yazımızı alttan üste doğru çıkartmak istiorsak direction=”up” kodunu kullanırız. Eğer üstten alta doğru kaydırmak istiyorsak direction=”down” deriz. Ama bir çok sitede görmüşünüzdür; duyurular bölümü diye alttan üste doğru kayan yazılar vardır. Biz de böyle birşey yapabiliriz. Ben bu durumda behavior=”alternate” kodunu
sileceğim. Silmesek de calışır ama ben çarptırmak istemediğim için siliyorum. Şimdi kodumuzu yazalım:

 

 

1  <html>
2  <head>
3   <title>Kayan Yazı - EmreSupcin</title>
4     </head>
5   <body>
6    <marquee direction="up" bgColor="red">EmreSupcin</marquee>
7   </body>
8    </html>



Şimdi burada dikkatimizi çeken bir olay var: Marquee alanı biraz geniş, bunu küçültmemiz gerekmez mi? Bunun için width=”100″ heigth=”800″ kodlarımızı kullanıyoruz. Burada width marquee’nin enini heigth ise boyunun boyutunu belirler.

 

 

1  <html>
2   <head>
3    <title>Kayan Yazı - EmreSupcin</title>
4   </head>
5    <body>
6   <marquee direction="up" bgColor="red" width="100" heigth="800">ES</marquee>
7    </body>
8      </html>



BİR RESMİ KAYDIRMAK

 

Şimdi Gelelim resim kaydırmaya aslında bununda yazıdan hiçbir farkı yoktur. Şimdi bir kırmızı şerit üzerinde bir resmimizi kaydıralım…

 

 

1  <html>
2   <head>
3   <title>Kayan Yazı - EmreSupcin</title>
4   </head>
5   <body>
6   <marquee width="950" height="100" bgcolor="red">
7     <img src="es1.jpg" width="100px" heigth="800px">
8    </marquee>
9   </body>
10    </html>



ÇOKLU RESİM KAYDIRMAK

 

Şimdi 3 tane resmi yan yana kaydıralım. 3 tane resmimizi çağırıyoruz

 

 

1  <html>
2  <head>
3  <title>Kayan Yazı - EmreSupcin</title>
4  </head>
5   <body>
6   <marquee width="950" height="100" bgcolor="red">
7   <img src="es1.jpg" width="100px" heigth="800px">
8   <img src="es2.jpg" width="100px" heigth="800px">
9   <img src="es3.jpg" width="100px" heigth="800px">
10  </marquee>
11   </body>
12    </html>



RESİMLERİ AŞAĞIDAN YUKARI KAYDIRMAK

 

Ben şimdi resimleri aşağıdan yukarı doğru kaydırmak istiyorum. Bunun için de kayan yazıdaki gibi direction=”up” kodumu kullanacağım, ama biraz da heigth değerini genişleteceğim.

 

 

1  <html>
2  <head>
3  <title>Kayan Yazı - EmreSupcin</title>
4  </head>
5  <body>
6  <marquee direction="up" width="800" height="400" bgcolor="red">
7   <img src="es1.jpg" width="100px" heigth="800px">
8   <img src="es2.jpg" width="100px" heigth="800px">
9   <img src="es3.jpg" width="100px" heigth="800px">
10    </marquee>
11   </body>
12  </html>



Ama yukardaki kodumuzda resimler yan yana. Peki bunu alt alta nasıl yapabiliriz? Bunu da resimlerin arasına <br> kodumuzu koyarak yapabiliriz. <br> kodumuz enter görevini üstlenir burada ve biraz da marquee’nin width boyutu ile oynayacağım.

 

 

1  <html>
2  <head>
3  <title>Kayan Yazı - EmreSupcin</title>
4  </head>
5  <body>
6  <marquee direction="up" width="100" height="400" bgcolor="red">
7  <img src="es1.jpg" width="100px" heigth="800px">
8  <img src="es2.jpg" width="100px" heigth="800px">
9  <img src="es3.jpg" width="100px" heigth="800px">
10  </marquee>
11  </body>
12  </html>


Eğer resimlerin arasına boşluk olmasını istiyorsanız &nbsp; kodu ile koyabilirsiniz. Ne kadar çok &nbsp; koyarsanız o kadar boşluk olur.

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:Sitemizde Mouse Sağ Tuşunu Nasıl Engelleriz?

Sonraki Yazı:MySQL Nedir?

BENZER YAZILAR
YORUMLAR
SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.