Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan HTML5 dersinin bir bölümüdür. Eğitmen, daha önce yazılan "HTML5 Nedir?" makalesine dayanarak basit bir web sitesi örneği oluşturmayı göstermektedir.
- Video, Dreamweaver programında HTML5 sayfası oluşturma ve düzenleme sürecini adım adım anlatmaktadır. Eğitmen önce HTML5 sayfasını oluşturma, ardından CSS ile tasarım yapma, section etiketi kullanma, id ve class tanımlama, menü oluşturma ve sayfalar arası geçiş sağlama konularını ele almaktadır. Video, bir serinin parçası olup, toplamda iki veya üç bölümden oluşacak şekilde planlanmıştır.
- 00:01HTML5 Dersi Giriş
- Bu derste HTML5 etiketlerini kullanarak basit bir site örneği oluşturulacak.
- Dreamweaver programı kullanılarak HTML5 sayfası oluşturulacak ve sayfa özellikleri üzerinden document type'ı HTML5 olarak ayarlanacak.
- Section etiketi, sitenin ana içerik kısmını içine almak için kullanılır.
- 02:48CSS Kullanımı
- CSS kodları head etiketi arasına yazılacak ve body class'ı üzerinden sayfadaki yazıların tipi ve boyutu ayarlanacak.
- Sayfanın sol ve yukarıdan boşluklarını iptal etmek için margin kullanılır.
- Yazı tipi ve boyutu ayarlanarak sayfa düzeni oluşturulur.
- 04:33Section Etiketi ve İçerik Düzeni
- Section tag'i kullanılarak içerik bölümleri oluşturulur ve display: block özelliği ile blok halinde düzenlenir.
- Her bir içerik bölümünün yüksekliği ayarlanarak sayfa düzeni oluşturulur.
- İçerikler için id tanımlanarak menü bağlantıları için referans oluşturulur.
- 09:19İçerik Stil Ayarları
- Her bir içerik için ayrı CSS kodları oluşturularak arka plan rengi ve yazı rengi ayarlanır.
- Photoshop programı kullanılarak daha detaylı tasarım yapılabilir.
- İçeriklerin düzeni ve görünümü ayarlanarak okunaklı bir sayfa oluşturulur.
- 12:34Menü Ekleme
- İçerikler arasındaki geçiş için menü butonları eklenecek.
- Menü butonlarının link kısmı, section kısmında belirtilen id'ye göre ayarlanır.
- Nev etiketi kullanılarak menü butonları her sayfada görünür hale getirilir ve section kısmına padding eklenerek içerikler menüyle karışmaz hale getirilir.