12 KiB
Teraryum Projesi Bölüm 1: HTML'e Giriş
Sketchnote: Tomomi Imura
Ders Öncesi Test
Videoyu izleyin
Giriş
HTML, yani HyperText Markup Language, webin 'iskeleti'dir. Eğer CSS HTML'inizi 'giydiriyor' ve JavaScript ona hayat veriyorsa, HTML web uygulamanızın bedenidir. HTML'in sözdizimi bile bu fikri yansıtır; "head", "body" ve "footer" etiketlerini içerir.
Bu derste, sanal teraryumumuzun arayüzünün 'iskeletini' oluşturmak için HTML kullanacağız. Bir başlık ve üç sütun olacak: sürüklenebilir bitkilerin bulunduğu sağ ve sol sütunlar ve ortada cam görünümlü teraryum olacak bir alan. Dersin sonunda, sütunlarda bitkileri görebileceksiniz, ancak arayüz biraz garip görünecek; endişelenmeyin, bir sonraki bölümde arayüze CSS stilleri ekleyerek daha iyi görünmesini sağlayacağız.
Görev
Bilgisayarınızda 'terrarium' adında bir klasör oluşturun ve içinde 'index.html' adında bir dosya oluşturun. Bunu, teraryum klasörünüzü oluşturduktan sonra Visual Studio Code'da yeni bir VS Code penceresi açarak, 'klasör aç' seçeneğine tıklayarak ve yeni klasörünüze giderek yapabilirsiniz. Explorer panelindeki küçük 'dosya' düğmesine tıklayın ve yeni dosyayı oluşturun:
Veya
Git bash üzerinde şu komutları kullanın:
mkdir terrariumcd terrariumtouch index.htmlcode index.htmlveyanano index.html
index.html dosyaları, bir tarayıcıya bir klasördeki varsayılan dosya olduğunu belirtir;
https://anysite.com/testgibi URL'ler, içindeindex.htmlbulunantestadında bir klasör yapısı kullanılarak oluşturulabilir; URL'deindex.htmlgörünmek zorunda değildir.
DocType ve html etiketleri
Bir HTML dosyasının ilk satırı, onun doctype'ıdır. Bu satırın dosyanın en üstünde olması gerektiği biraz şaşırtıcı olabilir, ancak bu, eski tarayıcılara sayfanın mevcut HTML spesifikasyonuna uygun olarak standart modda işlenmesi gerektiğini söyler.
İpucu: VS Code'da bir etiketin üzerine geldiğinizde, MDN Referans kılavuzlarından kullanımına dair bilgi alabilirsiniz.
İkinci satır, <html> etiketinin açılış etiketi olmalı ve hemen ardından kapanış etiketi </html> gelmelidir. Bu etiketler, arayüzünüzün kök öğeleridir.
Görev
index.html dosyanızın en üstüne şu satırları ekleyin:
<!DOCTYPE html>
<html></html>
✅ DocType'ı bir sorgu dizesiyle ayarlayarak belirlenebilecek birkaç farklı mod vardır: Quirks Modu ve Standart Mod. Bu modlar, genellikle artık kullanılmayan çok eski tarayıcıları (Netscape Navigator 4 ve Internet Explorer 5) desteklemek için kullanılırdı. Standart doctype deklarasyonuna bağlı kalabilirsiniz.
Belgenin 'head' kısmı
HTML belgesinin 'head' alanı, web sayfanız hakkında meta veriler olarak bilinen önemli bilgileri içerir. Bizim durumumuzda, bu sayfanın gönderileceği ve işleneceği web sunucusuna şu dört şeyi bildiririz:
- sayfanın başlığı
- sayfa meta verileri, şunları içerir:
- sayfada kullanılan karakter kodlaması hakkında bilgi veren 'karakter seti'
- tarayıcı bilgileri,
x-ua-compatibledahil, bu IE=edge tarayıcısının desteklendiğini belirtir - sayfa yüklendiğinde görünüm alanının nasıl davranması gerektiği bilgisi. Görünüm alanını 1 başlangıç ölçeğine ayarlamak, sayfa ilk yüklendiğinde yakınlaştırma seviyesini kontrol eder.
Görev
Açılış ve kapanış <html> etiketleri arasına belgenize bir 'head' bloğu ekleyin.
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
✅ Görünüm alanı meta etiketini şu şekilde ayarlarsanız ne olur: <meta name="viewport" content="width=600">? Görünüm alanı hakkında daha fazla bilgi edinin.
Belgenin body kısmı
HTML Etiketleri
HTML'de, bir web sayfasının öğelerini oluşturmak için .html dosyanıza etiketler eklersiniz. Her etiket genellikle bir açılış ve kapanış etiketi içerir, örneğin: <p>merhaba</p> bir paragrafı belirtir. Arayüzünüzün gövdesini oluşturmak için <html> etiket çiftinin içine bir <body> etiketi seti ekleyin; işaretlemeniz şimdi şu şekilde görünür:
Görev
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
Artık sayfanızı oluşturmaya başlayabilirsiniz. Genellikle, bir sayfadaki ayrı öğeleri oluşturmak için <div> etiketlerini kullanırsınız. Görselleri içerecek bir dizi <div> öğesi oluşturacağız.
Görseller
Kapanış etiketi gerektirmeyen bir html etiketi <img> etiketidir, çünkü src öğesi, sayfanın öğeyi işlemek için ihtiyaç duyduğu tüm bilgileri içerir.
Uygulamanızda images adında bir klasör oluşturun ve içine kaynak kod klasöründeki tüm görselleri ekleyin; (14 bitki görseli var).
Görev
Bu bitki görsellerini <body></body> etiketleri arasına iki sütun halinde ekleyin:
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
</div>
</div>
</div>
Not: Span'lar ve Div'ler. Div'ler 'blok' öğeleri olarak kabul edilir ve Span'lar 'satır içi'dir. Bu div'leri span'lara dönüştürürseniz ne olur?
Bu işaretlemeyle, bitkiler artık ekranda görünüyor. Ancak oldukça kötü görünüyor, çünkü henüz CSS kullanılarak stillendirilmediler; bunu bir sonraki derste yapacağız.
Her görsel, bir görseli göremediğinizde veya işleyemediğinizde bile görünen alternatif bir metin içerir. Bu, erişilebilirlik için önemli bir özelliktir. Erişilebilirlik hakkında daha fazla bilgi edinmek için ilerideki derslere göz atın; şimdilik, alt özelliğinin, bir kullanıcı bir nedenle görseli görüntüleyemediğinde (yavaş bağlantı, src özelliğinde bir hata veya bir ekran okuyucu kullanımı gibi) alternatif bilgi sağladığını unutmayın.
✅ Her görselin aynı alt etiketine sahip olduğunu fark ettiniz mi? Bu iyi bir uygulama mı? Neden veya neden değil? Bu kodu geliştirebilir misiniz?
Anlamsal işaretleme
Genel olarak, HTML yazarken anlamlı 'anlamsallık' kullanmak tercih edilir. Bu ne anlama gelir? Bu, HTML etiketlerini, tasarlandıkları veri türü veya etkileşim türünü temsil etmek için kullanmanız gerektiği anlamına gelir. Örneğin, bir sayfadaki ana başlık metni bir <h1> etiketi kullanmalıdır.
Açılış <body> etiketinizin hemen altına şu satırı ekleyin:
<h1>My Terrarium</h1>
Başlıkların <h1> ve sırasız listelerin <ul> olarak işlenmesi gibi anlamsal işaretleme kullanmak, ekran okuyucuların bir sayfada gezinmesine yardımcı olur. Genel olarak, düğmeler <button> olarak yazılmalı ve listeler <li> olmalıdır. Özel olarak stillendirilmiş <span> öğelerini tıklama işleyicileriyle düğme gibi göstermek mümkün olsa da, engelli kullanıcıların bir sayfada bir düğmenin nerede olduğunu belirlemek ve onunla etkileşim kurmak için teknolojileri kullanması daha iyidir. Bu nedenle, mümkün olduğunca anlamsal işaretleme kullanmaya çalışın.
✅ Bir ekran okuyucunun bir web sayfasıyla nasıl etkileşim kurduğuna bir göz atın. Anlamsal olmayan işaretlemenin kullanıcıyı neden hayal kırıklığına uğratabileceğini görebiliyor musunuz?
Teraryum
Bu arayüzün son kısmı, bir teraryum oluşturmak için stillendirilecek işaretlemeyi oluşturmayı içerir.
Görev:
Son </div> etiketinin üzerine şu işaretlemeyi ekleyin:
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
✅ Bu işaretlemeyi eklemenize rağmen ekranda hiçbir şeyin görünmediğini fark ettiniz mi? Neden?
🚀Zorluk
HTML'de hala eğlenceli olan bazı 'eski' etiketler var, ancak bu etiketler gibi kullanımdan kaldırılmış etiketleri işaretlemenizde kullanmamalısınız. Yine de, <marquee> etiketini kullanarak h1 başlığını yatay olarak kaydırabilir misiniz? (Eğer yaparsanız, sonrasında kaldırmayı unutmayın)
Ders Sonrası Test
Gözden Geçirme ve Kendi Kendine Çalışma
HTML, webi bugünkü haline getiren 'denenmiş ve doğru' yapı taşı sistemidir. Eski ve yeni etiketler hakkında biraz bilgi edinerek tarihini öğrenin. Bazı etiketlerin neden kullanımdan kaldırıldığını ve bazılarının neden eklendiğini anlayabilir misiniz? Gelecekte hangi etiketlerin tanıtılabileceğini tahmin edebilir misiniz?
Web ve mobil cihazlar için siteler oluşturmayı Microsoft Learn adresinden öğrenin.
Ödev
HTML pratiği yapın: Bir blog taslağı oluşturun
Feragatname:
Bu belge, AI çeviri hizmeti Co-op Translator kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.