
Merhaba sevgili izleyiciler, ben Haydar Canıbek.
Bu videoda HTML'nin temel yapı taşlarını oluşturan html, head ve body etiketlerini ayrıntılı bir şekilde ele alacağız. Web sitelerinin en temel yapısını oluşturmak için bu etiketler vazgeçilmezdir ve bir sayfanın nasıl görüneceğini, nasıl işlev göreceğini doğrudan etkiler. html etiketi, tüm sayfanın çerçevesini oluşturan temel kapsayıcıdır. Bir web sayfasının her öğesi, html etiketi ile başlar ve yine bu etiket ile sonlandırılır. Bu etiket, tarayıcıya bu belgenin bir HTML dökümanı olduğunu belirtir. Yani aslında tüm HTML dosyasını sararak sayfanın "dış yapısını" belirler. Bu şekilde, HTML yapısını daha düzenli ve kolay anlaşılır hale getirir.
head etiketi, html yapısının ilk büyük bölümüdür ve sayfa hakkında tarayıcıya bilgi sağlayan öğeleri içerir. Bu bölümde başlık (title), stil dosyaları (CSS dosyaları gibi), yazı tipleri, sayfa simgesi (favicon), karakter seti (charset) ve SEO için kullanılan meta etiketleri bulunur. Bu bilgiler doğrudan ziyaretçilere görünmez ancak tarayıcıların ve arama motorlarının sayfayı tanımasını sağlar, sayfanın nasıl yükleneceğine dair ipuçları verir. Doğru head kullanımı, sayfanızın hem performansını artırır hem de SEO uyumlu hale getirir.
body etiketi ise, sayfanın ziyaretçilere görünen kısmını kapsar ve sayfa içeriğini yapılandırır. İçeriğinizi oluşturduğunuz alan burasıdır. Paragraflar, başlıklar, görseller, videolar, formlar, bağlantılar gibi tüm öğeler body etiketinin içinde bulunur. Bu alan kullanıcıyla doğrudan etkileşimde olan kısımdır ve her bir element, kullanıcıya görsel ve işitsel bir deneyim sunmak için bu yapıda yerini alır. Bu video boyunca, html, head ve body etiketlerinin nasıl doğru kullanılacağını ve bu etiketlerin birbirleriyle ilişkisini uygulamalı olarak göstereceğim. Web sayfalarının iskelet yapısını oluşturmada bu etiketleri etkin bir şekilde kullanmayı öğrenmek, kodlarınızı daha temiz, anlaşılır ve etkili hale getirir. Bir web sayfasının temel yapısını öğrenerek, projelerinizde daha sağlıklı bir başlangıç yapabilir ve sayfa düzeninizi geliştirebilirsiniz. Kanalımızdaki diğer eğitim videolarında HTML, CSS ve web tasarımına dair daha fazla ipucu bulabilirsiniz. Yeni başlayanlardan ileri seviyeye kadar, tüm seviyeler için içerikler hazırlıyoruz.
Merhaba sevgili izleyiciler, ben Haydar Canıbek.
Bu videoda HTML'de başlık etiketlerini ele alacağız: H1, H2, H3, H4, H5 ve H6. Başlık etiketleri, web sayfalarında içerikleri yapılandırmak, hiyerarşi oluşturmak ve sayfanın okunabilirliğini artırmak için kullanılır.
Başlık etiketleri, H1 ile H6 arasında değişir ve her biri belirli bir önem sırasını ifade eder.
H1: Sayfanın ana başlığıdır ve en yüksek öneme sahiptir. Genellikle sayfa başlıkları veya konunun ana başlığı için kullanılır. Bir sayfada yalnızca bir adet H1 etiketi olması önerilir. Arama motorları da H1 başlığını önemseyerek sayfanızın ana konusunu tanır.
H2: H1'den sonra gelen ikinci düzey başlıktır. Sayfadaki ana bölümleri tanımlamak için kullanılır. H2 etiketi, içeriğinizi bölümlere ayırmak için harikadır. Örneğin, bir blog yazısında her ana bölüm için bir H2 etiketi kullanılabilir.
H3: H2 başlığının altındaki alt başlıkları belirtir. H2’nin daha spesifik konulara ayrılmasında H3 etiketleri kullanılır. Bu, okuyucuların içeriğin daha alt konularına odaklanmasına olanak tanır.
H4, H5 ve H6: Bu başlıklar, içeriği daha da detaylandırmak için kullanılır. H3 altındaki başlıkları düzenlemek ve daha derin konulara girmek için uygundur. Çoğunlukla uzun, detaylı içeriklerde H4 ve altındaki başlıklar kullanılır.
Başlık etiketlerinin bu hiyerarşik yapısı, sayfanızın anlaşılabilirliğini artırır ve özellikle arama motorları açısından önemlidir. SEO (arama motoru optimizasyonu) açısından, doğru başlık etiketleri kullanımı sayfanızın daha kolay keşfedilmesine ve konuların daha net anlaşılmasına yardımcı olur. Ayrıca, bu hiyerarşi okuyucuların içerikte gezinmesini ve bilgileri daha rahat bulmasını sağlar.
Videoda, başlık etiketlerini nasıl etkili bir şekilde kullanabileceğinizi ve web sayfalarınızda içeriğinizi nasıl yapılandırabileceğinizi detaylı olarak anlatacağım. Web sitenizde profesyonel ve düzenli bir görünüm sağlamak için bu başlık etiketlerini etkili bir şekilde kullanmayı öğrenmek büyük avantaj sağlar.
Frontend Geliştirme: Bu kursla, HTML5, CSS3 ve JavaScript gibi temel frontend teknolojilerine tam hakimiyet kazanacaksınız.
Proje Odaklı Öğrenim: Teorik bilginizi pratiğe dökerek, bol miktarda proje geliştirip öğrendiklerinizi uygulama fırsatı bulacaksınız.
Responsive Tasarım: Flexbox ve CSS Grid kullanarak, web sayfalarını etkili bir şekilde hizalamayı ve responsive tasarım yapmayı öğreneceksiniz.
Bootstrap Kullanımı: Bootstrap sınıflarını etkin bir şekilde kullanarak modern ve şık web sayfaları oluşturmayı öğreneceksiniz.
Modern Frameworkler: Facebook tarafından geliştirilen React JS ile modern web geliştirme araçlarını kullanmayı ve React projeleri oluşturmayı öğreneceksiniz.
Vue.js: Vue.js frameworkünü kullanarak dinamik ve kullanıcı dostu arayüzler geliştirecek, projeler üzerinde çalışarak bu frameworke hakim olacaksınız.
Angular ile Geliştirme: Angular frameworkü ile nasıl projeler geliştirebileceğinizi öğrenerek, kapsamlı ve ölçeklenebilir uygulamalar yapma becerisi kazanacaksınız.
Full Stack Becerileri: Angular ve React JS ile geliştirdiğiniz projeler sayesinde, Full Stack Developer olma yolunda güçlü adımlar atacaksınız.
Geniş Perspektif: Angular ve Web API kullanarak geliştirdiğiniz projelerle yazılım geliştirme süreçlerine geniş bir perspektiften bakmayı öğreneceksiniz.
Proje Odaklı Eğitim: Kursun en önemli özelliği, tamamen proje odaklı olması. Sıfırdan başlayarak istenilen uygulamaları nasıl oluşturacağınızı, adım adım öğrenme imkanı bulacaksınız.
Bu eğitimi tamamladıktan sonra, Front-end tarafında sıfırdan şablonlar oluşturabilecek ve aynı zamanda piyasada yaygın olarak kullanılan React JS, Vue.js ve Angular gibi JavaScript frameworklerine de hakim olacaksınız.