Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan HTML5'te semantik etiketler hakkında kapsamlı bir eğitim içeriğidir. Eğitmen, Visual Studio Code kullanarak pratik örnekler göstererek konuyu anlatmaktadır.
- Video, semantik web kavramının tanımıyla başlayıp, HTML5'te gelen semantik etiketlerin (header, nav, main, article, section, footer, aside, figure, caption, details, summary) ne olduğunu ve nasıl kullanılacağını adım adım göstermektedir. Eğitmen, bu etiketlerin SEO açısından önemini vurgulayarak, div etiketlerine alternatif olarak bu semantik etiketlerin nasıl kullanılacağını kod örnekleriyle açıklamaktadır.
- Eğitim boyunca header, navigasyon, main, section, footer gibi temel semantik etiketlerin oluşturulması ve stillendirilmesi gösterilmekte, ayrıca CSS kullanarak bu etiketlerin nasıl biçimlendirileceği de anlatılmaktadır. Video, semantik web yapısının arama motorları için daha iyi ve düzenli bir yapı sağladığını vurgulayarak sonlanmaktadır.
- 00:08Semantic Web Nedir?
- Bu videoda HTML5'te semantic etiketler hakkında bilgi verilecek.
- Semantic web, anlamsal web anlamına gelir ve arama motorlarının sayfaları araştırırken belli başlı kriterlere bakmasıyla ilgilidir.
- Google arama motorları, kullanıcıların yazdığı en değerli sonuçları üst sıralara çıkarır.
- 01:07Semantic Web'in Önemi
- Semantic web, web sitelerinin daha anlamlı ve anlaşılır hale gelmesini sağlar.
- Arama motorları, kullanıcıların görsel ipuçlarını görebilirken, arama botları kodlar üzerinden anlam çıkarması gerekir.
- HTML5 standartları ile gelen anlamsal etiketler, sitelerin daha çok kullanıcıya ulaşmasını ve arama motorlarında üst sıralarda çıkmasını sağlar.
- 03:38Semantic Etiketler
- Header, nav, main, article, section gibi etiketler semantik web'in etiketleridir.
- Header etiketi genellikle sayfanın logosu ve başlangıç bilgilerini içerir.
- Nav etiketi ana gezinme menüsünü, main etiketi ise kullanıcıya gösterilen ana içeriği içerir.
- 06:02Article ve Section Etiketleri
- Article, bulunduğu sayfadan veya siteden bağımsız olarak duracak içeriktir (örneğin blog yazıları).
- Section'lar benzer bir temanın yakın içerikleridir.
- Article'ın içinde sectionların kullanılması mantıklıdır.
- 06:53Footer ve Örnek Uygulama
- Footer etiketi, sayfanın veya bölümün altındaki bilgiler ve site ile alakalı içerikleri içerir (iletişim bilgileri, copyright vb.).
- Semantic web yaparken ve SEO yaparken HTML5 etiketlerini kullanmak gerekir.
- Örnek uygulama için flexbox yapısı kullanılarak basit bir site yapılacaktır.
- 11:00CSS ile Header Stilleme
- Header için display flex yapısı kullanılarak ekranı tamamen kapsayan bir yapı oluşturuluyor.
- Header'ın yüksekliği 150 piksel olarak ayarlanıyor ve arka plan rengi siyah olarak belirleniyor.
- Yazıların rengi beyaz olarak değiştirilerek display flex özellikleri ile justify content center ve align items center kullanılarak içerikler ortalama.
- 12:46Header İçeriğini Düzenleme
- Flex direction column özelliği kullanılarak içerikler alt alta sıralanıyor.
- Header içeriği semantik web için düzenleniyor, bu korkacak bir şey değil, sadece HTML konusunu anlamlandırmak için kullanılıyor.
- Logo için class kullanılarak background color, font weight, height ve border radius özellikleri ile tam yuvarlak bir şekil oluşturuluyor.
- 15:25Semantik Etiketler Kullanımı
- Site tasarımı için semantik etiketler kullanılıyor: navigation kısmı nav etiketi içinde, ana içerik article etiketi içinde section section şeklinde düzenleniyor.
- Navigation kısmı için nav etiketi kullanılıyor ve içinde ul ve a etiketleri ile linkler oluşturuluyor.
- Nav etiketi için display flex yapısı kullanılarak içerikler yan yana sıralanıyor ve list-style-type none ile noktalar kaldırılıyor.
- 20:05Navigation Stilleme
- Nav etiketine background color özelliği ile farklı bir renk atanıyor ve margin: auto ile tam ortaya hizalanıyor.
- Ul etiketine width: 80% değeri verilerek navigation içeriği ekranın %80'ini kaplıyor.
- Justify-content: space-around özelliği kullanılarak linkler birbirinden ayrılıyor ve a etiketlerine color, font-size ve text-decoration özellikleri atanıyor.
- 23:00Semantik Web'de Main Kısmı
- Semantik web'de en önemli kısım main kısmıdır, bu HTML'nin bodysi gibi düşünülebilir.
- Main kısmında semantik etiketler ve kullanımı, Google arama motorlarında çıkması için gereken asıl kısım yer alır.
- Main içinde article etiketi kullanılır ve bu etiket içinde h2, p ve section etiketleri yer alabilir.
- 25:04Article ve Section Kullanımı
- Article kısmını diğer kısımdan ayırmak için main'in içinde article etiketi kullanılır ve bu etiket ekranın %80'ini kaplar.
- Article etiketinin içinde section etiketi kullanılabilir ve section etiketi de semantik şekilde h3 gibi alt başlıklar içerebilir.
- Section etiketleri makalenin alt başlıklarını oluşturmak için kullanılır ve arama motorları için önemlidir.
- 30:11Aside Etiketi
- Aside etiketi kenar öğeleri tanımlamak için kullanılır ve daha az öneme sahip içeriği tanımlamak için tercih edilir.
- Aside etiketi özellikle reklam alanları gibi yukarıdan aşağı doğru kayan içeriklerde tercih edilir.
- Aside etiketi main'in içinde kullanılır ve ekranın %20'sini kaplar, background color gibi stil özellikleri verilebilir.
- 32:39Resim Kullanımı
- Semantik web'de resim kullanırken sadece img src kullanmak yerine figür etiketi kullanılmalıdır.
- Figür etiketi içinde img src ile resim eklenir ve fig caption ile resmin başlığı belirtilir.
- Arama motorları için resmin başlığı önemlidir, bu nedenle fig caption etiketi kullanmak gerekir.
- 35:39HTML5 Semantik Etiketleri
- HTML5 ile gelen semantik etiketler arasında figure ve caption etiketleri bulunmaktadır.
- Image dosyası silindiğinde, caption etiketi arama motorlarına imajın ne tür olduğunu belirtmek için kullanılır.
- Semantik web konusu önemli olduğu için HTML dersleri alınması önerilmektedir.
- 36:32Details Etiketi
- HTML5 ile gelen başka bir semantik etiket olan details, açılır kapanır alanlar oluşturmak için kullanılır.
- Details etiketi, jQuery veya JavaScript kodu olmadan açılır kapanır alanlar oluşturmak için kullanılır.
- Details etiketinin içerisindeki başlık, SEO açısından arama motorları için önemlidir.
- 37:55Footer Etiketi
- Footer etiketi, sitenin iletişim bilgilerini içeren alt kısmını oluşturmak için kullanılır.
- Footer'a adres, telefon, copyright gibi bilgiler eklenebilir.
- Footer'a CSS stil uygulanabilir, örneğin background color ve margin gibi özellikler tanımlanabilir.
- 40:15Semantik Web ve SEO
- Header, main article, section ve footer gibi etiketler semantik web ile ilgilidir.
- Bu yapı arama motorları için daha düzenli ve iyi bir yapıdır.
- Yenilikçi olmak ve standartlara uymak önemlidir, aksi takdirde siteler alt sıralarda kalır.