Bilişim Teknolojileri ve Yazılım
6 Sınıf Bilişim Teknolojileri ve Yazılım Sayfa Yapısı Ayarları şarkısı v 2
6. Sınıf • 03:09
Video görüntüsü içermez, sadece eğitim şarkısıdır. Dinlemek için oynatın.
0
İzlenme
03:09
Süre
14.06.2025
Tarih
Ders Anlatımı
Bu dersimizde sayfa yapısı ayarlarıyla ilgili temel kavramları sade, net ve uygulamalı bir şekilde ele alacağız. Bir web sayfasının yapısını bir ev planına benzetebiliriz: nasıl ki bir evin temel planı ve oda dağılımı olmazsa yaşanamazsa, bir web sayfasının da temel bölümleri, doğru etiketler ve düzenli ayarları olmadan kullanıcılar için anlaşılır ve erişilebilir olmaz.
İlk olarak DOCTYPE ve temel HTML iskeletini hatırlayalım. Her HTML5 sayfası, sayfa tarayıcıya “Ben HTML5 ile yazıldım” demek için bir DOCTYPE tanımlaması ile başlar. Ardından <html> etiketinin lang özniteliği Türkçe için “tr” olarak ayarlanır. Bu küçük ama etkili bir ayardır; arama motorlarına ve erişilebilirlik araçlarına sayfanın dilini bildirir. Head bölümünde <meta charset="UTF-8"> ayarı karakter kodlamasını, <meta name="viewport"> ayarı ise sayfanın mobil cihazlarda doğru görünmesini sağlar. Sayfa başlığı için <title> etiketi kullanılır; bu, tarayıcı sekmesinde görünen metindir. CSS stillerini harici bir dosyada tutmak ve <link rel="stylesheet" href="style.css"> ile bağlamak, sayfalarımızın düzenini yönetir ve tekrar kullanım sağlar.
Web sayfamızın gövdesinde semantik etiketleri kullanmak büyük avantaj sağlar. <header> bölümü sayfa başlığını ve menüyü içerir; <nav> bağlantılarımızın bulunduğu navigasyon alanını temsil eder; <main> sayfanın ana içeriğini taşır; <section> ve <article> ise konuları düzenler. <aside> yan bilgi kutuları için, <footer> ise alt kısım için kullanılır. Semantik etiketler sayesinde arama motorları ve yardımcı teknolojiler sayfanın yapısını daha iyi anlar. Bu da sıralama ve erişilebilirlik açısından önemlidir.
Başlık hiyerarşisine dikkat etmek gerekir. <h1> bir sayfada bir kez kullanılır ve ana başlığı gösterir; <h2>, <h3> gibi seviyeler, başlıkları hiyerarşik olarak düzenler. Doğru sıralama, içeriğin anlaşılır yapıda okunmasını sağlar. Paragraf yapısı <p> etiketleri ile düzenlenir; listeler <ul>, <ol>, <li> ile oluşturulur. Görseller için <img src="..." alt="..."> etiketi kritik bir adımdır; alt metni, görselin açıklamasını verir ve görme engelli kullanıcılar için erişilebilirlik sağlar. Bağlantılar <a href="...">...</a> ile yapılır; menü bağlantılarında yeni sekmede açılması istenirse target="_blank" ve güvenlik için rel="noopener noreferrer" kullanılabilir.
CSS ile sayfa yapısını belirlemek için temel ayarları bilmek gerekir. Box model (margin, border, padding, content) sayfanın düzenini belirler. Flexbox ve Grid modern düzenler için önemlidir. Örneğin, display: grid; ve grid-template-columns: 1fr 3fr gibi ayarlarla iki sütunlu bir sayfa düzeni oluşturulabilir. Grid gap ile aralıkları ayarlarız. Renk ve yazı tipi için CSS değişkenleri kullanmak (ör. :root { --anaRenk: #007bff; --yaziRengi: #333; }) tasarımı tutarlı kılar. Responsive tasarım için @media (max-width: 768px) gibi koşullarla mobil görünümde sütunları tek sütuna indirebiliriz.
Alt yapı ayarlarını tamamladıktan sonra performans ve SEO adımlarını da düşünmeliyiz. Harici CSS/JS kullanımı, görselleri sıkıştırma ve lazy-loading (loading="lazy") ile sayfa yüklenmesini hızlandırır. <meta name="description"> ile sayfa özeti yazılabilir; sosyal medya paylaşımı için Open Graph ve Twitter Card meta etiketleri de eklenebilir. Son olarak, robots.txt ve sitemap.xml gibi teknik ayarlar, arama motorlarına yol gösterir.
Kısacası, sayfa yapısı ayarları; doğru HTML iskeleti, semantik etiketler, uygun başlık sıralaması, erişilebilir görseller ve düzenli CSS düzenlerinin birleşimidir. Bu adımları takip ettiğinizde, hem sınavlarda başarılı olursunuz hem de gerçek dünyada web sitelerini daha profesyonel ve erişilebilir şekilde yapabilirsiniz.
Soru & Cevap
Soru: HTML5 sayfalarında DOCTYPE neden önemlidir ve nasıl yazılır?
Cevap: DOCTYPE, tarayıcıya sayfanın HTML5 standardında olduğunu bildirerek “ quirks mode” yerine standart moda geçmesini sağlar. Doğru yazımı <!DOCTYPE html> şeklindedir.
Soru: Semantik etiketler neden tercih edilir? <header>, <main>, <nav>, <footer> ne işe yarar?
Cevap: Semantik etiketler sayfanın bölümlerinin anlamını açıklar; arama motorları ve yardımcı teknolojiler içeriği daha iyi anlar. <header> üst kısım ve menü, <main> ana içerik, <nav> menü, <footer> alt kısım için kullanılır.
Soru: <h1>–<h6> başlık hiyerarşisinin doğru sıralaması nasıl olmalıdır?
Cevap: <h1> bir kez ve sayfanın ana başlığı olmalı; ardından <h2>, <h3>… seviyeleri hiyerarşik olarak sıralanmalıdır. Bu, içeriğin mantıklı yapısını sağlar ve erişilebilirliği artırır.
Soru: <img> etiketindeki alt metni neden yazmalıyız?
Cevap: Alt metni, görselin içeriğini açıklayarak görme engelli kullanıcılar için anlam taşır ve erişilebilirlik sağlar. Ayrıca görsel yüklenmediğinde kullanıcıya açıklama sunar.
Soru: CSS Flexbox ve Grid ile responsive düzen nasıl yapılır?
Cevap: Flexbox ile display: flex; align-items ve justify-content ayarları ile satır/sütun düzeni yapılır; Grid ile display: grid; ve grid-template-columns: ... ile satır/sütun yapısı tanımlanır. @media sorguları ile farklı ekran boyutlarında düzen değiştirilerek responsive tasarım sağlanır.
Özet Bilgiler
6. Sınıf Bilişim Teknolojileri ve Yazılım dersi için hazırlanan “Sayfa Yapısı Ayarları şarkısı v2” videosu, semantik HTML, başlık hiyerarşisi ve responsive CSS düzenleriyle 6. sınıf öğrencilerine anlaşılır bir anlatım sunar. DOCTYPE, meta etiketleri, alt metinler ve Flexbox/Grid ile sayfa yapısı ayarlarını sade örneklerle pekiştirir. Eğitim şarkıları ve ders notlarıyla desteklenen bu içerik, YouTube arama sonuçlarında görünürlüğü artırmak için optimize edilmiştir.