Kayıtlar

HTML etiketine sahip yayınlar gösteriliyor

Mouse ile üzerine gelince değişen resim | HTML + CSS

Merhaba arkadaşlar.Uzun bir aradan sonra yeni bir paylaşım yapıyorum.Basit ama web sayfanizda kullanınca göze güzel görünecek bir özellikten bahsedeceğim.Özelliğimiz; Mouse ile resim üzerine gelince değişip üzerinden çekince eski haline gelen resimler. Bu özelliği menülerde,butonlarda yada resim paylaşımlarında kullanabilirsiniz. Hemen kodları deneyelim.Masaüstünüze index.html,resim1.jpg,resim2.jpg dosyaları ekleyin.Ardından not defteri ile index.html dosyasını açıp içine aşağıdaki kodları ekleyip kaydedelim. <html> <style> #degisenresim {     height: 70px;     width: 120px;     background-image: url('resim1.jpg'); } #degisenresim:hover {     background-image: url('resim2.jpg'); } </style> <img id="Library"> </html> Kodları kaydettikten sonra index.html dosyasını tarayıcı ile açtığınızda sayfada resim1.jpg'yi göreceksiniz üzerine mouse götürdüğünüzde resim1 kaybolacak yerine resim2.jpg görünecektir tekrar m

Javascript | Sayfa yükleniyor efekti, geç açılan sayfalar için yükleniyor efekti

Merhaba arkadaşlar.Bu yazımızda sayfa açılırken yükleniyor efekti nasıl yapılır onu göstereceğim.Javascript ve CSS ile yapılmış basit bir kodlama ama çok işe yarar.Özellikle geç açılan sayfalarda sayfanın güzel görünmesi için kullanılabilir.Ve bu kodlar internette bulduğunuz diğer kodlar gibi değil.Diğer kodlar sayfa tamamen yüklendikten sonra çalışıyor bu kodlar ise sayfa açılırken çalışıyor sayfanın tamamen yüklendikten sonra kayboluyor.Bu basit kodları sitenizdeki dosyalara ekleyin ve kullanmaya başlayın. Peki nasıl kullanılır derseniz. Örnek olarak sitenizin anasayfa kodlarının bulunduğu dosyayı açın </head> etiketini bulup hemen onun üzerine ekleyip kaydedin.Bu işlemi görünmesini istediğiniz tüm sayfalara uygulayın. İyi çalışmalar. <style type="text/css"> <!-- #loading { width: 200px; height: 100px; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -100px; text-align: center; } -->

HTML tablo kodları,HTML tablo nasıl yapılır

Html ile tablo nasıl yapılır onu göstereceğim.Ben basit olarak anlatacağım siz bunun daha güzel görünmesi için css kullanabilirsiniz. <table> <tr> <td>Tablonun ilk öğesi</td> <td>Tablonun ikinci öğesi</td> <td>Tablonun üçüncü öğesi</td> </tr> <tr> <td>2.Tablonun ilk öğesi</td> <td>2.Tablonun ikinci öğesi</td> <td>2.Tablonun üçüncü öğesi</td> </tr> </table> Yukarıdaki ilk öğeler yanyana sıralanacak ikinci öğeler alt satıra inip yanyana sıralanacak.Bunları resimleri yanyana sıralamak için de kullanabilirsiniz.Film siteleri,video siteleri gibi temalarda kullanmak  için.

PHP içinde HTML kod kullanma

İlk olarak php kodları bitiriz araya html kodları yazarız sonra isteğe göre ikinci üçüncü php kodlarımızı yazabiliriz. <?php echo $degisken;?> Buraya html kod yazarsanız çalışır. <?php echo $degisken2;?> Veya ikinci seçenek olarak direkt PHP içinde echo kumutuyla kullanabiliriz. <?php echo "Buraya html kod yazabilirsiniz";?> İyi çalışmalar.

HTML'de iframe kodu kullanımı

Resim
 Bu yazımızda HTML 'de iframe kullanımını basit bir şekilde göstereceğiz.Aşağıdaki kodları kopyalayın ve iframeyi çekmek istediğiniz HTML sayfasına yapıştırın. İframe ile almak istediğiniz sayfayı src="" içindeki adres bölümüne yapıştırın. width="100%"  sayfanızda görünecek kısmın genişliğini ifade eder. height="300px" sayfanızda görünecek kısmın yüksekliğini ifade eder. <iframe width="100%" height="300px" src="http://yeniwebmaster.blogspot.com/" name="iframe_a"></iframe>

HTML içinde görünmeyen yazı

Resim
HTML sayfa içinde görünmesini istemediğimiz,kod açıklaması vb. sebebler için kullandığımız yazıları nasıl saklarız onu paylaşıyorum.   <!-- Gizli yazı --> şeklinde eklenen içerikler gizli olur sayfada görünmez. Örnek: <!--Buraya yazılan yazılar sayfada görünmez <a href="http://yeniwebmaster.blogspot.com/">Webmaster Blog</a>  -->

HTML Sayfanın arkaplanına resim ekleme

Resim
HTML sayfalarda arkaplan resmi nasıl eklenir sorusuna cevap vermeye çalışacağım. Aşağıdaki görmüş olduğunuz kodlar sayesinde CSS kullanmadan body etiketi ile sayfanın arkaplanına resim ekleyeceğiz.  Kodlarda bulunan  background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie5nRcJHRU3fwy6ziFWVAYXJjJEyNxDCTadP_J-WqZasbN_doRg5AabDybECXVX4KE9AzmWSub7pc6Ii4AuX0u3cdU-VY4BezoAfRiU62uS1Cr5NGsLq2m1Oll6ZKDFm8qI4bPOENIdYQl/s900/background.png"   bölümündeki resim dosyası sayfamızın arkaplan resmidir.Bunu istediğiniz resim ile değiştirerek sayfanızın arkaplanını değiştirebilirsiniz. <!DOCTYPE html> <html> <body background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie5nRcJHRU3fwy6ziFWVAYXJjJEyNxDCTadP_J-WqZasbN_doRg5AabDybECXVX4KE9AzmWSub7pc6Ii4AuX0u3cdU-VY4BezoAfRiU62uS1Cr5NGsLq2m1Oll6ZKDFm8qI4bPOENIdYQl/s900/background.png"> <h1>Merhaba Dünya!</h1> <p><a href="http://yeniwebmaster.blogspot

HTML ile sayfanın arkaplan rengini değiştirme

Resim
 Bu konumuzda HTML sayfa içinde CSS kullanmadan arkaplan rengini nasıl değiştiririz sorunuza cevap vermeye çalışacağım. Aşağıdaki kodlardan background-color:lightgrey;  komutu sayfamızın arkaplan rengini değiştirmemizi sağlıyor. lightgrey yazan kısma white,black,green gibi renklerin ingilizce karşılıklarını yazarak değiştirebileceğimiz gibi renk kodları ile de değiştirebiliriz. Örnek 1: background-color: #99CC33; Örnek 2: background-color:green; <!DOCTYPE html> <html> <body style="background-color:lightgrey;"> <h1>Başlık</h1> <p>Paragraf.</p> </body> </html>

HTML Giriş (HTML Sayfa Oluşturma)

Resim
Basit bir şekilde HTML sayfa oluşturuyoruz.HTML Sayfalarda gerekli olan bazı tag'lar (etiketler) vardır. <html> , <head> , <body> gibi. <html>  etiketi bir HTML sayfanın açılış ve kapanış kodudur. <head> isminden de anlaşılacağı üzeri head yani baş(kafa) anlamına gelir.Bu kısıma sayfanın başlığı,açıklaması gibi meta-taglar eklenir. <body> ise Türkçe karşılığı vucuttur.Yani sitenin bedenini,görünen kısmını ifade eder.Bu kısıma içerikler eklenir (yazı,resim vb.) <html> <head> <title>Page Title</title> </head> <body> <h1>Burası Başlık</h1> Burası paragraf </body> </html>