HTML, yani “HyperText Markup Language”, web sitelerinin temel yapı taşıdır. Bu döküman, web tarayıcısına web sayfasını nasıl göstereceğini söyleyen işaretleme dilidir. HTML, içerikleri başlık, paragraf, resim, bağlantı gibi elemanlarla yapılandırarak kullanıcıların web sayfalarını okumasını ve etkileşime girmesini sağlar. Bu makalede, HTML kullanarak web sitesi oluşturmanın temel adımlarını öğreneceksiniz.
İçindekiler
HTML ile Site Yapılır Mı?
HTML kullanarak web sitesi yapmak mümkündür. HTML, web sayfalarını yapılandırmak ve içeriği belirtmek için kullanılan bir işaretleme dilidir. Başlık, paragraf, resim, bağlantı gibi çeşitli elemanları kullanarak web sayfalarını oluşturabilirsiniz. Ancak, sadece HTML kullanarak statik bir web sitesi oluşturabilirsiniz; dinamik içerik ve kullanıcı etkileşimi için genellikle CSS ve JavaScript gibi diğer teknolojiler de kullanılır.
HTML Sitelerin Özellikleri
HTML ile yapılan web sitelerinin bazı temel özellikleri şunlardır:
1. Yapılandırma: HTML, web sayfalarını başlık, paragraf, liste, resim, bağlantı gibi yapılandırılmış elemanlarla oluşturmanıza olanak tanır.
2. Basitlik: HTML, kullanımı kolay ve anlaşılır bir işaretleme dilidir, bu nedenle yeni başlayanlar için idealdir.
3. Tarayıcı Desteği: Tüm modern web tarayıcıları HTML’i destekler, bu da HTML ile oluşturulan web sitelerinin geniş bir kullanıcı kitlesine ulaşabileceği anlamına gelir.
4. Taşınabilirlik: HTML, farklı platformlarda (bilgisayarlar, tabletler, akıllı telefonlar) ve farklı işletim sistemlerinde (Windows, macOS, Linux) çalışabilir.
5. SEO Dostu: Doğru biçimde yapılandırıldığında, HTML ile oluşturulan web siteleri arama motorları tarafından kolayca dizine eklenir ve arama sonuçlarında daha iyi performans gösterebilir.
Bu özellikler, HTML’in web siteleri oluşturmak için popüler bir seçenek olmasını sağlar.
HTML Başlangıç İçin Gerekenler
HTML ile başlamak için gerekenler şunlardır:
1. Metin düzenleyici: Bir metin düzenleyici kullanarak HTML dosyalarını oluşturabilirsiniz. Basit bir metin düzenleyici bile yeterlidir, ancak kod renklendirme ve otomatik tamamlama gibi özellikler sunan daha gelişmiş düzenleyiciler tercih edilebilir. Örnek olarak, Notepad++ (Windows), Sublime Text, Atom veya Visual Studio Code gibi yazılımları kullanabilirsiniz.
2. Tarayıcı: HTML dosyalarınızı görüntülemek ve test etmek için bir web tarayıcısı gereklidir. Google Chrome, Mozilla Firefox, Microsoft Edge veya Safari gibi modern bir tarayıcı kullanabilirsiniz.
3. HTML Öğrenme Kaynakları: HTML hakkında temel bilgileri öğrenmek için çevrimiçi kaynaklar, video eğitimleri, kitaplar veya interaktif kurslar gibi çeşitli kaynaklardan yararlanabilirsiniz. W3Schools, Mozilla Developer Network (MDN), freeCodeCamp gibi çevrimiçi platformlar bu konuda faydalı kaynaklar sunmaktadır.
Bu araçlar ve kaynaklar sayesinde HTML ile web geliştirmeye başlayabilir ve temel web sayfalarını oluşturmayı öğrenebilirsiniz.
En Çok Kullanılan HTML Kodları Hangileridir?
En çok kullanılan HTML kodları arasında şunlar bulunur:
<html>: Bir HTML belgesinin başlangıcını belirtir.<head>: HTML belgesinin başlık bölümünü tanımlar.<title>: Web sayfasının başlığını belirtir.<body>: Web sayfasının içeriğini belirtir.<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: Başlık seviyelerini belirtir.<p>: Paragraf oluşturur.<a>: Bağlantı (link) oluşturur.<img>: Resim ekler.<ul>ve<ol>: Sırasız ve sıralı liste oluşturur.<li>: Liste elemanını belirtir.<div>: Bir bölümü veya alanı tanımlar.<span>: İçeriği gruplamak için kullanılır.<table>: Tablo oluşturur.<tr>: Tablo satırını tanımlar.<td>: Tablo hücresini belirtir.
Bu HTML kodları, web sayfalarını yapılandırmak ve içeriğini oluşturmak için temel yapı taşlarıdır.
HTML ile Örnek (‘index.html’) Sayfa Yapımı
İşte basit bir index.html dosyası örneği:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoş Geldiniz!</title>
</head>
<body>
<header>
<h1>Web Siteme Hoş Geldiniz!</h1>
</header>
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetlerimiz</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<section>
<h2>Hakkımızda</h2>
<p>Web sitemizde... (Hakkımızda bölümü için metin)</p>
</section>
<section>
<h2>Hizmetlerimiz</h2>
<p>Size sunabileceğimiz hizmetler...</p>
</section>
<footer>
<p>© 2024 Web Sitemiz. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>
Bu örnek, HTML’nin temel yapılarını kullanarak bir web sayfasını yapılandırır. Başlık, menü, içerik bölümleri ve altbilgi içerir. Siz de bu örneği düzenleyerek kendi web sayfanızı oluşturabilirsiniz.
