Web Sayfası Hazırlamanın Temel Komutları

Web Sayfası Hazırlamanın Temel Komutları

Web sayfası hazırlamak, günümüzde birçok kişi ve işletme için önemli bir beceri haline gelmiştir. HTML (Hypertext Markup Language), web sayfalarının yapı taşlarını oluşturan bir işaretleme dilidir. Bu makalede, web sayfası hazırlamanın temel komutlarını ve yapı taşlarını inceleyeceğiz.

HTML Nedir?

HTML, web sayfalarının oluşturulmasında kullanılan temel bir işaretleme dilidir. HTML, metin, resim, video ve diğer içerik türlerini düzenlemek için etiketler (tags) kullanır. HTML belgesi, genellikle bir tarayıcıda görüntülenmek üzere oluşturulur. HTML belgeleri, belirli bir yapıya ve kurallara uymalıdır.

HTML Belgesinin Temel Yapısı

Bir HTML belgesi, belirli bir yapıya sahiptir. İşte basit bir HTML belgesinin temel yapısı:



<!DOCTYPE html>

<html lang="tr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Başlık</title>

</head>

<body>

<h1>Merhaba Dünya!</h1>

<p>Bu, ilk web sayfamızdır.</p>

</body>

</html>

Bu yapı, bir HTML belgesinin başında bulunması gereken temel bileşenleri içerir. <!DOCTYPE html> ifadesi, belgenin HTML5 formatında olduğunu belirtir. <html> etiketi, HTML belgesinin başlangıcını ve bitişini tanımlar. <head> kısmında sayfanın başlığı ve karakter seti gibi meta bilgileri bulunur. <body> kısmı ise sayfanın görünür içeriğini barındırır.

Temel HTML Etiketleri

HTML’de kullanılan bazı temel etiketler şunlardır:

  • <h1> – <h6>: Başlık etiketleri. <h1> en yüksek başlıkken, <h6> en düşük başlıktır.
  • <p>: Paragraf etiketi. Metin paragraflarını tanımlar.
  • <a>: Bağlantı etiketi. Diğer web sayfalarına veya kaynaklara bağlantı sağlar.
  • <img>: Resim etiketi. Web sayfasına resim eklemek için kullanılır.
  • <ul> ve <ol>: Sırasız ve sıralı liste etiketleri.
  • <div>: Bölüm etiketidir. Sayfa içindeki içerikleri gruplamak için kullanılır.
  • <span>: Satır içi etiketidir. Küçük metin parçalarını stilize etmek için kullanılabilir.

Bağlantılar ve Resimler

HTML’de bağlantılar ve resimler eklemek oldukça basittir. Bağlantı eklemek için <a> etiketi kullanılır. Örnek:



<a href="https://www.example.com">Example Web Sitesi</a>

Yukarıdaki kod, “Example Web Sitesi” metnini tıklanabilir bir bağlantı haline getirir. Resim eklemek için ise <img> etiketi kullanılır:



<img src="resim.jpg" alt="Açıklama">

Bu kod, belirtilen kaynaktan bir resmi yükler ve resmin yüklenememesi durumunda alternatif bir açıklama gösterir.

Listeler

HTML’de listeler oluşturmak için <ul> (sırasız liste) ve <ol> (sıralı liste) etiketleri kullanılır. İşte bir sırasız liste örneği:



<ul>

<li>Birinci madde</li>

<li>İkinci madde</li>

<li>Üçüncü madde</li>

</ul>

Ve bir sıralı liste örneği:



<ol>

<li>Birinci madde</li>

<li>İkinci madde</li>

<li>Üçüncü madde</li>

</ol>

CSS ile Stil Verme

HTML sayfalarının görsel tasarımını geliştirmek için CSS (Cascading Style Sheets) kullanılır. CSS, HTML elemanlarının stilini belirlemek için kullanılır. Örneğin, bir başlığın rengini değiştirmek için aşağıdaki gibi bir stil tanımı yapılabilir:



<style>

h1 {

color: blue;

}

</style>

Bu stil, sayfadaki tüm <h1> etiketlerinin rengini mavi yapar. CSS, HTML ile birlikte kullanıldığında sayfanın estetik görünümünü önemli ölçüde artırır.

Web sayfası hazırlamak, temel HTML ve CSS bilgisi ile oldukça kolaydır. Bu makalede, HTML belgesinin yapısını, temel etiketleri ve CSS ile stil vermeyi öğrendik. Bu bilgilerle, kendi web sayfanızı oluşturmak için ilk adımları atabilirsiniz.

SSS (Sıkça Sorulan Sorular)

1. HTML ve CSS arasındaki fark nedir?

HTML, web sayfalarının yapısını oluşturan bir işaretleme dilidir. CSS ise bu yapının görünümünü ve stilini belirlemek için kullanılır.

2. Web sayfası oluşturmak için hangi yazılımları kullanabilirim?

Web sayfası oluşturmak için herhangi bir metin düzenleyici (Notepad, Sublime Text, Visual Studio Code gibi) kullanabilirsiniz. Ayrıca, web geliştirme için özel araçlar ve platformlar da mevcuttur.

3. HTML öğrenmek ne kadar zaman alır?

HTML öğrenmek için gereken süre kişiden kişiye değişir. Temel bilgileri öğrenmek genellikle birkaç gün içinde mümkündür, ancak daha karmaşık yapıları anlamak için daha fazla zaman harcamanız gerekebilir.

4. Web sayfamı nasıl yayınlayabilirim?

Web sayfanızı yayınlamak için bir alan adı (domain) ve web barındırma (hosting) hizmetine ihtiyacınız vardır. Bu hizmetleri sağlayan birçok şirket bulunmaktadır.

5. Mobil uyumlu bir web sayfası nasıl oluşturabilirim?

Mobil uyumlu bir web sayfası oluşturmak için responsive tasarım prensiplerini kullanmalısınız. CSS medya sorguları ile farklı cihaz boyutlarına uygun stil tanımlamaları yapabilirsiniz.

Başa dön tuşu