Dijital İçerik ve Sunum Tasarımı

Bu derste ne öğreneceğiz?

Bu derste, dijital içerik ve sunum tasarımının temellerini öğreneceğiz. HTML (HyperText Markup Language) kullanarak basit web sayfaları oluşturmayı, içerik düzenlemeyi ve görsel unsurlar eklemeyi keşfedeceğiz. Ayrıca, etkili sunumlar hazırlamak için gerekli olan temel prensipleri de inceleyeceğiz.

Temel kavramlar

HTML, web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir. HTML ile metin, görsel ve diğer içerik türlerini düzenleyebiliriz. Aşağıda bazı temel kavramları bulabilirsiniz:

• HTML Etiketleri: HTML belgesinin yapısını belirleyen işaretlerdir. Örneğin, <h1> başlık etiketi, <p> paragraf etiketi gibi.
• Öğeler: HTML etiketleri arasında yer alan içerik parçalarıdır. Örneğin, bir başlık veya bir resim.
• Öznitelikler: HTML etiketlerine ek bilgi ekleyen özelliklerdir. Örneğin, src özniteliği bir resmin kaynağını belirtir.

Ayrıntılı anlatım

HTML belgesi, <!DOCTYPE html> ile başlar ve <html> etiketi ile devam eder. İçerik, <head> ve <body> etiketleri arasında yer alır. <head> kısmında sayfanın başlığı ve stil bilgileri bulunurken, <body> kısmında görünen içerikler yer alır.

Bir HTML belgesi oluştururken aşağıdaki adımları izleyebilirsiniz:

1. HTML belgesini oluşturun.
2. Başlık ve içerik etiketlerini ekleyin.
3. Görsel ve bağlantılar için gerekli etiketleri yerleştirin.
4. Sayfanızı kaydedin ve bir tarayıcıda açarak kontrol edin.

Örnek 1: Basit bir HTML sayfası oluşturma

Aşağıdaki kod, basit bir HTML sayfası oluşturur:

<!DOCTYPE html>
<html>
<head>
    <title>Benim İlk Sayfam</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk HTML sayfam.</p>
</body>
</html>

Örnek 2: Resim ekleme

Bir resim eklemek için <img> etiketini kullanırız. Örneğin:

<img src="resim.jpg" alt="Açıklayıcı metin" />

Örnek 3: Bağlantı ekleme

Bir bağlantı eklemek için <a> etiketini kullanırız. Örneğin:

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

Sık yapılan hatalar

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

• Etiketlerin doğru kapatılmaması.
• Özniteliklerin yanlış yazılması.
• HTML etiketlerinin yanlış sırayla kullanılması.

Uygulama

Şimdi öğrendiklerimizi uygulayalım. Aşağıdaki adımları takip ederek kendi HTML sayfanızı oluşturun:

1. Yeni bir metin belgesi açın ve .html uzantısı ile kaydedin.
2. Yukarıda verilen örneklerden birini kullanarak sayfanızı oluşturun.
3. Tarayıcıda açarak sayfanızın nasıl göründüğünü kontrol edin.

Mini test

1. HTML nedir?
2. Bir resim eklemek için hangi etiketi kullanırız?
3. HTML belgesinin başlangıç etiketi nedir?
4. Bir bağlantı oluşturmak için hangi etiket kullanılır?
5. HTML'de öznitelikler ne işe yarar?

Cevap anahtarı

1. HTML, web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir.
2. Resim eklemek için <img> etiketini kullanırız.
3. HTML belgesinin başlangıç etiketi <!DOCTYPE html> ve <html> etiketidir.
4. Bağlantı oluşturmak için <a> etiketini kullanırız.
5. Öznitelikler, HTML etiketlerine ek bilgi ekler.

Özet

Bu derste, HTML ile dijital içerik ve sunum tasarımının temellerini öğrendik. HTML etiketlerinin nasıl kullanıldığını, içerik düzenlemeyi ve görsel unsurlar eklemeyi keşfettik. Kendi basit web sayfanızı oluşturarak öğrendiklerinizi pekiştirdiniz.