Dijital İçerik Tasarımı

Bu derste ne öğreneceğiz?

Bu derste, dijital içerik tasarımının temellerini öğrenecek, HTML dilinin yapı taşlarını keşfedecek ve basit bir web sayfası oluşturmayı deneyimleyeceksiniz. HTML etiketleri, sayfa yapısı ve içerik düzenleme konularında bilgi sahibi olacaksınız.

Temel kavramlar

Dijital içerik tasarımı, dijital ortamda bilgi ve görsellerin düzenlenmesi ve sunulmasıdır. HTML (HyperText Markup Language), web sayfalarının yapısını oluşturan bir işaretleme dilidir. HTML, metin, resim, bağlantı ve diğer içerik türlerini düzenlemek için kullanılır.

HTML Nedir?

HTML, web sayfalarının temel yapı taşlarını oluşturur. Her HTML belgesi, belirli etiketler kullanılarak oluşturulur. Bu etiketler, tarayıcıya içeriğin nasıl görüntüleneceğini söyler.

HTML Etiketleri

HTML etiketleri, açılış ve kapanış etiketleri olarak ikiye ayrılır. Örneğin, <p> etiketi bir paragrafı belirtirken, <a> etiketi bir bağlantıyı belirtir. Her etiket, belirli bir işlevi yerine getirir.

Ayrıntılı anlatım

HTML belgesi, <!DOCTYPE html> ile başlar ve <html> etiketi ile devam eder. Bu etiketler, tarayıcıya belgenin HTML5 formatında olduğunu belirtir. Belge, <head> ve <body> bölümlerine ayrılır.

HTML Belgesi Yapısı

<!DOCTYPE html>
<html>
    <head>
        <title>Sayfa Başlığı</title>
    </head>
    <body>
        <h1>Ana Başlık</h1>
        <p>Bu bir paragraftır.</p>
    </body>
</html>

Örnek HTML Sayfası

Aşağıda basit bir HTML sayfası örneği bulunmaktadır:

<!DOCTYPE html>
<html>
    <head>
        <title>Benim İlk Web Sayfam</title>
    </head>
    <body>
        <h1>Hoşgeldiniz!</h1>
        <p>Bu benim ilk web sayfam.</p>
        <a href="https://www.example.com">Daha fazla bilgi için buraya tıklayın.</a>
    </body>
</html>

Çözümlü örnekler

Şimdi, bir web sayfası oluşturma sürecini adım adım inceleyelim.

Örnek 1: Basit Bir Web Sayfası Oluşturma

1. HTML belgesini oluşturun.
2. Başlık ve içerik ekleyin.
3. Bağlantı ekleyin.

Çözüm:

<!DOCTYPE html>
<html>
    <head>
        <title>Basit Sayfa</title>
    </head>
    <body>
        <h1>Merhaba Dünya!</h1>
        <p>Bu basit bir HTML sayfasıdır.</p>
        <a href="https://www.example.com">Buraya tıklayın</a>
    </body>
</html>

Sık yapılan hatalar

HTML yazarken dikkat edilmesi gereken bazı yaygın hatalar şunlardır:

• Açılış ve kapanış etiketlerinin eksik olması.
• Yanlış etiket kullanımı.
• Etiketlerin yanlış sıralanması.

Uygulama

Şimdi, öğrendiklerinizi pekiştirmek için basit bir uygulama yapalım.

Bir web sayfası oluşturun ve aşağıdaki öğeleri ekleyin:

1. Bir başlık.
2. Bir paragraf.
3. Bir bağlantı.

Mini test

Aşağıdaki soruları cevaplayarak öğrendiklerinizi test edin:

1. HTML nedir?
2. Bir HTML belgesinin başlangıç etiketi nedir?
3. Paragraf etiketi hangisidir?
4. Bağlantı etiketi nasıl yazılır?
5. HTML belgesinin hangi bölümünde başlık yer alır?

Cevap anahtarı

1. Web sayfalarının yapısını oluşturan bir işaretleme dilidir.
2. <!DOCTYPE html>
3. <p>
4. <a>
5. <head>

Özet

Bu derste, HTML dilinin temel yapı taşlarını öğrendik. HTML etiketlerinin nasıl kullanıldığını ve basit bir web sayfası oluşturmayı deneyimledik. Dijital içerik tasarımı, günümüzde önemli bir beceri haline gelmiştir ve bu temel bilgilerle başlayarak daha karmaşık projelere adım atabilirsiniz.