İ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ı:
<html> </html>
<head> </head>
<title> </title>
<body> </body>
<h1> </h1> - <h6> </h6>
<p> </p>
<a href="URL"> </a>
<img src="image.jpg" alt="Açıklama">
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
color: blue;
background-color
background-color: yellow;
font-size
font-size: 20px;
margin
margin: 10px;
padding
padding: 15px;
border
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")
element.innerHTML
document.getElementById("demo").innerHTML = "Yeni İçerik";
alert("Mesaj")
alert("Merhaba Dünya!");
function myFunction()
function myFunction() { alert("Fonksiyon Çalıştı!"); }
addEventListener("click", function)
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">
@media
@media (max-width: 600px) { body { background-color: lightblue; } }
flexbox
display: flex;
grid
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">
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.
<html>
<head>
<title>
<body>
<h1>
<h6>
<p>
<a>
<img>
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.
