Türkçe▼
İnternet dünyasında var olmak isteyen her birey ve işletme için web tasarım komutları büyük önem taşıyor. Web sitenizin hem görsel hem de işlevsel olarak başarılı olması için temel anahtar kelimeleri ve kullanım örneklerini bilmek şart. Bu rehberde, web tasarımında kullanılan en temel komutları ve bu komutların nasıl kullanıldığını öğreneceksiniz.
HTML (Hyper Text Markup Language), web sayfalarının iskeletini oluşturur. HTML kodları, tarayıcıların içeriği nasıl görüntüleyeceğini belirler. İşte bazı temel HTML komutları:
Türkiye (Türkçe)
Worldwide (English)
<html> </html>: HTML belgesinin başlangıcını ve sonunu belirler.<head> </head>: Belge hakkında meta bilgileri içerir.<title> </title>: Web sayfasının başlığını belirler.<body> </body>: Ana içeriği barındırır.<h1> </h1> - <h6> </h6>: Başlık etiketleri, içerik başlıklarını belirler.<p> </p>: Paragraf etiketleri, metin bloklarını oluşturur.<a href="URL"> </a>: Bağlantı (link) oluşturur.<img src="image.jpg" alt="Açıklama">: Görsel ekler.Bu temel komutlarla bir web sayfasının iskeletini rahatlıkla oluşturabilirsiniz.
CSS (Cascading Style Sheets), HTML ile oluşturulan yapıyı görsel olarak düzenlemek için kullanılır. İşte bazı temel CSS komutları ve kullanım şekilleri:
color: Metin rengini belirler. color: blue;background-color: Arka plan rengini belirler. background-color: yellow;font-size: Metin boyutunu ayarlar. font-size: 20px;margin: Elemanların dış boşluğunu ayarlar. margin: 10px;padding: Elemanların iç boşluğunu ayarlar. padding: 15px;border: Çerçeve ekler. border: 1px solid black;CSS komutları sayesinde web sayfanızın görünümünü kişiselleştirip daha çekici hale getirebilirsiniz.
JavaScript, web sayfanızın dinamik ve etkileşimli olmasını sağlayan bir programlama dilidir. İşte bazı temel JavaScript komutları ve nasıl kullanılacakları:
document.getElementById("id"): Belirli bir id'ye sahip HTML elemanını seçer.element.innerHTML: Seçilen elemanın içeriğini değiştirmek için kullanılır. document.getElementById("demo").innerHTML = "Yeni İçerik";alert("Mesaj"): Bir uyarı kutusu gösterir. alert("Merhaba Dünya!");function myFunction(): Bir işlev (fonksiyon) tanımlar. function myFunction() { alert("Fonksiyon Çalıştı!"); }addEventListener("click", function): Belirli bir olay için olay dinleyici ekler. element.addEventListener("click", myFunction);JavaScript ile web sayfanızın kullanıcı etkileşimlerini artırabilir ve daha dinamik hale getirebilirsiniz.
Responsive tasarım, web sitenizin hem mobil cihazlarda hem de masaüstü bilgisayarlarda düzgün görüntülenmesini sağlar. İşte bazı temel responsive tasarım teknikleri:
<meta name="viewport" content="width=device-width, initial-scale=1">: Sayfanın genişliğini cihazın genişliğine göre ayarlar.@media: Belirli ekran boyutları için özel stil tanımlar. @media (max-width: 600px) { body { background-color: lightblue; } }flexbox: Esnek düzenler oluşturmak için kullanılır. display: flex;grid: Kapsamlı ve karmaşık düzenler oluşturmak için kullanılır. display: grid;Responsive tasarım teknikleri sayesinde kullanıcı deneyimini iyileştirerek, sitenizin her cihazda mükemmel görünmesini sağlayabilirsiniz.
SEO (Search Engine Optimization), web sitenizin arama motorlarında daha iyi sıralanmasını sağlar. İşte SEO dostu web tasarımı için bazı ipuçları:
<meta name="description" content="Açıklama"><img src="image.jpg" alt="Açıklama">SEO dostu web tasarımı sayesinde arama motorlarında daha üst sıralara çıkabilir ve daha fazla ziyaretçi çekebilirsiniz.
Web tasarım komutları, HTML, CSS ve JavaScript gibi dillerde kullanılan ve web sayfalarının yapısını, stilini ve işlevselliğini belirleyen kodlardır.
Temel HTML komutları arasında <html>, <head>, <title>, <body>, <h1> - <h6>, <p>, <a> ve <img> bulunur.
CSS ile web sayfanızın görünümünü özelleştirebilir, renkleri, yazı tiplerini, boşlukları ve çerçeveleri ayarlayabilirsiniz. Ayrıca, responsive tasarım için de CSS kullanabilirsiniz.
JavaScript, web sayfanızın dinamik ve etkileşimli olmasını sağlar. Kullanıcı etkileşimlerine yanıt verebilir, içeriği değiştirebilir ve çeşitli işlemleri otomatikleştirebilir.
Responsive tasarım, web sitenizin farklı cihazlarda ve ekran boyutlarında düzgün görüntülenmesini sağlar. Bu, kullanıcı deneyimini iyileştirir ve SEO açısından da önemlidir.
SEO dostu web tasarımı için başlıklar ve alt başlıklar kullanmalı, meta açıklamaları eklemeli, görselleri optimize etmeli, bağlantılar eklemeli, sayfa yükleme hızını artırmalı ve mobil uyumluluğu sağlamalısınız.