Buradasınız: Emre Supçin / Html / HTML'de Marquee Etiketinin Kullanımı?

HTML'de Marquee Etiketinin Kullanımı?

HTML Marquee Etiketinin Kullanımı emresupcin - HTML'de Marquee Etiketinin Kullanımı? Merhaba 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   kodu ile koyabilirsiniz. Ne kadar çok   koyarsanız o kadar boşluk olur.