Yazı Getir
avatar

HTML Etiketleri Rehberi: Web Sayfalarının Temel Taşları

Bu yazıda, HTML'de en çok kullanılan etiketleri işlevlerine göre açıklamalarıyla birlikte derledim. Web geliştiriciliğe yeni başlayanlar veya bilgilerini tazelemek isteyen herkes için sade ama kapsamlı bir kaynak sunuyorum. Etiketlerin her biri, bir web sayfasında içerikleri düzenlemekten biçimlendirmeye, bağlantılardan formlara kadar çeşitli işlevler üstlenir. Haydi birlikte inceleyelim. 1. Yapısal (Structural) Etiketler Açıklama:Bu etiketler, bir web sayfasının iskeletini oluşturur. Her HTML belgesi bu temel yapı ile başlar: <!DOCTYPE> – Belge türünü tanımlar (HTML5 için zorunlu) <html> – Tüm HTML içeriğini kapsayan ana etiket <body> – Sayfada görünen içerikleri barındırır 2. Başlık ve Paragraf Etiketleri Açıklama:Başlık etiketleri sayfanın içeriğini bölümlere ayırmak için kullanılır. <h1> en büyük, <h6> en küçük başlıktır. <h1>...

Devamını Oku »
Yazı Getir
avatar

Uptime Kuma Kurulumu ve HTTPS ile Güvenli Erişim (Docker + NGINX / Apache2)

Bu rehber, Uptime Kuma uygulamasını Docker kullanarak kurmanız ve hem NGINX hem de Apache2 ile HTTPS destekli güvenli erişim sağlamanız için adım adım hazırlanmıştır. Uptime Kuma, sistem ve servislerinizi kolayca izlemek, çökme anlarında bildirim almak ve kesintileri analiz etmek için harika bir çözümdür.Bu rehber sonunda hem hızlı bir kurulum gerçekleştirecek hem de profesyonel bir yapı elde etmiş olacaksınız. 🐳 1. Docker ile Uptime Kuma Kurulumu Aşağıdaki komutu terminale girerek Uptime Kuma konteynerini başlatabilirsiniz: docker run -d --restart=always -p 3001:3001 \ -v /opt/uptime-kuma-data:/app/data \ --name uptime-kuma \ louislam/uptime-kuma 🔍 Açıklamalar: KomutAnlamı-dArka planda çalıştırır--restart=alwaysSunucu yeniden başlasa da çalışmaya devam eder-p 3001:3001Uptime Kuma uygulamasına 3001...

Devamını Oku »
Yazı Getir
avatar

Sayfa Kaydırıldıkça Yukarıdan Görünen Kutular Nasıl Yapılır? (HTML, CSS, JavaScript ile Adım Adım)

Web sitelerinde kullanıcı deneyimini artırmak için görsel geçişler ve animasyonlar oldukça önemlidir. Sayfa aşağı kaydırıldıkça içeriklerin yavaşça yukarıdan belirerek görünmesi, hem profesyonel bir hava katar hem de kullanıcıyı içerikte tutar. Bu tür animasyonlar özellikle: Blog içeriklerinde Ürün tanıtım sayfalarında Hizmet açıklamalarında Referans ya da portfolyo sunumlarında güçlü bir etki bırakır. Bu yazıda, sadece HTML, CSS ve saf JavaScript kullanarak scroll (kaydırma) ile yukarıdan belirerek görünen kutular nasıl yapılır, adım adım öğreneceğiz. 🧩 Gerekli Kodlar ve Yapı 1. CSS Kodları (style.css) İlk olarak, kutuların animasyonla görünmesini sağlayacak CSS kodlarını style.css dosyanıza ekleyin: .box { width: 300px; margin: 100px auto; padding: 40px; background: #2196f3; color: white; ...

Devamını Oku »
Yazı Getir
avatar

PHP ile Sunucu Tarih ve Saatini Öğrenme

PHP ile sunucunun tarih ve saatini öğrenmek oldukça kolaydır. date() fonksiyonu, PHP'nin yerleşik fonksiyonlarından biri olup, belirtilen formatta tarih ve saat bilgisi döndürebilir. Bu bilgiyi sunucunuzun saat dilimiyle öğrenmek, özellikle farklı sunucularda çalışan uygulamalar için önemlidir. Aşağıdaki kodu bir dosya olarak kaydedip, sunucunuza yükleyerek sunucunuzun tarih ve saat dilimini görebilirsiniz: Kodunuzu date.php olarak kaydedin. Bu dosyayı sunucunuza yükleyin. Web tarayıcınızda bu dosyayı açarak sunucunuzun tarih ve saat bilgisini görüntüleyebilirsiniz. date.php Dosyasının İçeriği: <?php // Sunucunun tarih ve saatini almak echo "Sunucunun tarih ve saati: " . date("Y-m-d H:i:s"); ?> Açıklama: <?php: PHP kodunun başladığını belirten etiket. date("Y-m-d H:i:s"): PHP'nin date() fonksiyonu ile sunucunuzun tarih ve saat bilgisi alınır. Buradaki format, tarih ve...

Devamını Oku »
Yazı Getir
avatar

Rastgele Bağlantı Listesi Gösterimi: Web Sayfanızı Zenginleştirin

Bu kod, web sayfası üzerinde rastgele seçilen bağlantıları (linkleri) görüntülemek için kullanılır. Amaç, belirli bir sayıdaki bağlantıyı (bu örnekte 10 bağlantı) rastgele şekilde seçip, bunları kullanıcıya göstermek ve her birinin tıklanabilir hale gelmesini sağlamaktır. Aşağıda kodun her kısmının ne işe yaradığını detaylıca açıklıyorum: Kodun Amacı ve Kullanımı HTML Yapısı: <div id="linkContainer"></div> etiketi, bağlantıların (linklerin) yerleştirileceği bir kapsayıcıyı (container) belirtir. Burada bağlantılar dinamik olarak eklenip, kullanıcıya sunulacaktır. CSS Stilleri: Kodda, bağlantıların görsel olarak nasıl görüneceği belirlenmiştir. #linkContainer elementinin genişliği 100% olacak şekilde ayarlanmış, ayrıca her bir bağlantının stilinin düzenlenmesi için özellikler belirlenmiştir. Bağlantılar üzerine tıklanabilirken bir renk değişimi uygulanır (hover efekti). JavaScript: links dizisi, her biri bir URL ve isme...

Devamını Oku »
Yazı Getir
avatar

Kullanıcı Deneyimini Artıran Modern Hover Efektleri

Bu CSS kodu, belirli bir elementin (bu durumda, #linkContainer içindeki tüm <a> bağlantılarının) stilini tanımlar ve hover (üzerine gelindiğinde) etkisi ekler. Kod, iki ana bölümden oluşmaktadır: Kod Açıklaması: #linkContainer a: Bu kısım, sayfada id="linkContainer" olan bir elementin içerisindeki tüm <a> (bağlantı) etiketlerine uygulanacak stilleri belirtir. transition: color 0.3s, padding-left 0.3s;: transition özelliği, bir stil değişikliğinin animasyonlu bir şekilde yapılmasını sağlar. Bu durumda, bağlantılara ait color ve padding-left özelliklerinin değişimi 0.3 saniyelik bir süreyle yapılacaktır. Yani, bağlantının rengi değiştiğinde veya sol iç boşluğu (padding-left) değiştiğinde, bu değişiklikler 0.3 saniye içinde yavaşça gerçekleşir. #linkContainer a:hover: Bu kısım, kullanıcı fareyi bağlantının üzerine getirdiğinde (hover), o bağlantının stilini değiştiren kısmıdır. padding-left: 10px;: padding-left özelliği,...

Devamını Oku »
Yazı Getir
avatar

Resimleri Bozmadan Kırpma: object-fit: cover; Kullanımı

object-fit: cover; CSS özelliği, özellikle <img> ve <video> gibi medya öğelerinde kullanılır ve içeriğin belirlenen genişlik ve yükseklik oranlarına uyum sağlamasını sağlar. Ne İşe Yarar? Resmin veya videonun belirlenen bir konteynerin içine sığmasını ve kırpılmasını sağlar. Orantıyı bozmadan içeriğin tamamen görünmesini sağlar. İçeriği taşırmadan ve boşluk bırakmadan gösterir. Nasıl Çalışır? Resim, orijinal en-boy oranını koruyarak belirtilen alanı doldurur. Eğer resmin oranı belirtilen konteynerle uyuşmazsa, taşan kısımlar kırpılır ama resim deforme olmaz. Resim kendi merkezine göre hizalanır, yani ortalanmış olur. Kullanım Amaçları Responsive Tasarımlar Farklı ekran boyutlarında resimlerin bozulmadan ve kaymadan görünmesini sağlar. Slider veya Galeri Uygulamaları Tüm resimlerin aynı ölçülerde ve düzenli görünmesini sağlamak için kullanılır. Profil Resimleri & Avatarlar Kullanıcıların farklı boyuttaki resimlerini eşit...

Devamını Oku »
Yazı Getir
avatar

HTML’de Bağlantı (Link) Nasıl Eklenir?

HTML’de bağlantı vermek ve görselleri tıklanabilir hale getirmek oldukça yaygın bir tekniktir. Kullanıcıların sayfalar arasında kolayca geçiş yapabilmesi için linkler kullanılır. <a> ve <img> etiketleriyle görselleri bağlantı haline getirerek, hem görsel hem de metin tabanlı içeriklerde etkileşim oluşturabilirsiniz. Aşağıda, bu etiketlerin nasıl geliştirilebileceği ve daha kapsamlı bir şekilde nasıl kullanılacağına dair örnekleri ve açıklamaları bulabilirsiniz. HTML’de Link Verme ve Görseli Bağlantı Haline Getirme HTML’de bir yazıya veya görsele bağlantı eklemek için, <a> ve <img> etiketleri kullanılır. Bu sayede, kullanıcılar görsel veya metin üzerine tıkladığında başka bir sayfaya yönlendirilir. 1. Linki Mevcut Pencerede Açmak İçin: Varsayılan olarak, <a> etiketi ile oluşturulan bağlantılar aynı pencerede veya...

Devamını Oku »