• Buradasın

    HTML ve CSS ile Bisiklet Dükkanı Web Sitesi Tasarımı Eğitimi

    youtube.com/watch?v=8XQyUGE7Kug

    Yapay zekadan makale özeti

    • Bu video, web programlama alanında çalışan bir eğitmen tarafından sunulan kapsamlı bir web tasarım eğitim içeriğidir.
    • Eğitim, sıfırdan HTML ve CSS kullanarak bir bisiklet dükkanı web sitesi şablonunun nasıl oluşturulacağını adım adım göstermektedir. Video, Dreamweaver programı kullanılarak başlangıç aşamalarından başlayıp, logo ekleme, menü oluşturma, içerik alanları tasarımı, sosyal medya bağlantıları, duyurular sayfası ve footer alanı oluşturma gibi tüm aşamaları kapsamaktadır.
    • Eğitmen, HTML etiketleri (div, img, h1, a) ve CSS özellikleri (width, height, margin, padding, float, color, font-size) kullanarak web sayfasının yapılandırılmasını detaylı şekilde anlatmaktadır. Ayrıca, kayan yazı efekti ekleme, sayfa içi bağlantılar oluşturma ve hover etkisi uygulama gibi pratik teknikler de gösterilmektedir.
    HTML ve CSS ile Web Sitesi Tasarımı
    • Video, sıfırdan HTML ve CSS kullanarak web sitesi tasarımını göstermek amacıyla hazırlanmıştır.
    • HTML ve CSS, web programlamasının başlangıç noktasıdır ve kullanıcıya görünen tarafın kodlanması için kullanılır.
    • Videoda oluşturulan şablon, üst alan, logo, menüler, duyurular, hakkımızda ve içerik alanlarından oluşmaktadır.
    01:21Dosya Hazırlığı
    • Dreamweaver programı kullanılarak "video" adında bir klasör oluşturulmuş ve içinde "img" klasörü ve resimler yerleştirilmiştir.
    • "index.html" ve "style.css" adında iki dosya oluşturulmuş ve aynı klasöre kaydedilmiştir.
    • HTML dosyasında title etiketi oluşturulmuş ve CSS dosyası HTML dosyasına link ile bağlanmıştır.
    03:30HTML Yapısı
    • Web sitesi tasarımı için kutulama modeli kullanılmaktadır; HTML ile alanlar oluşturulurken CSS ile biçimlendirilir.
    • "div" etiketi kullanılarak "genel" adında kapsayıcı bir alan oluşturulmuştur.
    • "class" ve "id" özellikleri kullanılarak farklı alanlar tanımlanmıştır; class birçok yerde kullanılabilirken id sadece bir yerde kullanılır.
    04:45Web Sayfası Yapısı
    • "genel" div'in içine "üst" div'i oluşturulmuş, bu div'in içine logo, menü ve ikonlar yerleştirilecektir.
    • "genel" div'in içine "manzara" ve "hoşgeldiniz" adında div'ler oluşturulmuştur.
    • İçerik alanı için "içerik" div'i oluşturulmuş ve içine "hakkımızda", "iletişim", "galeri" ve "duyurular" adında alt div'ler yerleştirilmiştir.
    11:14CSS ile Biçimlendirme
    • CSS dosyasında class'lar nokta ile başlayarak tanımlanmıştır.
    • "genel" class'ına genişlik, yükseklik ve arka plan rengi verilerek biçimlendirilmiştir.
    • "üst" class'ına %100 genişlik, 80 piksel yükseklik ve belirli bir arka plan rengi verilerek üst alan oluşturulmuştur.
    14:39Logonun Ekleme ve Düzenleme
    • Logonun eklenmesi için img etiketi kullanılır ve src özelliği ile resmin yolunu belirtiriz.
    • Logonun boyutunu ayarlamak için width ve height özellikleri kullanılır.
    • Margin özelliği ile dış boşluklar (soldan ve üstten) ayarlanabilir, padding ise iç boşlukları düzenler.
    17:01Logonun Linklendirilmesi ve Ovalleştirme
    • Logonun linklendirilmesi için a etiketi kullanılır ve href özelliği ile bağlantı belirtilir.
    • Resmin kenarlarını ovalleştirmek için border-radius özelliği kullanılır.
    • Menü için div etiketi oluşturulur ve boyutları (width ve height) belirlenir.
    21:09Menü Oluşturma ve Listeler
    • Menü için ul (sırasız liste) etiketi kullanılır ve li (liste öğesi) ile menü öğeleri eklenir.
    • Listelerin noktalarını kaldırmak için list-style-type özelliği kullanılır.
    • Menü öğelerini yatayda yan yana yerleştirmek için float left özelliği kullanılır.
    23:29Menü Öğelerinin Düzenlenmesi
    • Menü öğeleri arasında boşluk bırakmak için padding özelliği kullanılır.
    • Yazı boyutu ayarlamak için font-size özelliği kullanılır.
    • Menü öğelerine hover özelliği eklenerek üzerine geldiğinde renk değişimi sağlanır.
    28:42Sosyal Medya İkonları Ekleme
    • Sosyal medya ikonları için div etiketi oluşturulur ve img etiketi ile ikonlar eklenir.
    • İkonların boyutları ve aralarındaki boşluklar için width ve margin özellikleri kullanılır.
    • İkonları sağa yerleştirmek için float right özelliği kullanılır.
    31:38Sosyal Medya İkonları Ekleme
    • Sosyal medya ikonları için div'ler oluşturulup, Facebook ve Twitter ikonları 80 piksel genişliğinde, 40 piksel yüksekliğinde ayarlanıyor.
    • İkonlar float left özelliğiyle soldan sağa doğru yerleştiriliyor.
    • İkonlara link verilerek yeni sekmede açılması sağlanıyor ve title özelliğiyle üzerine geldiğinde görünecek yazı ekleniyor.
    35:42İçerik Alanı Oluşturma
    • İçerik alanı için bir div oluşturulup, genişliği %100, yüksekliği auto olarak ayarlanıyor.
    • Manzara div'i oluşturulup, içinde img etiketi ile manzara.jpg dosyası ekleniyor.
    • Manzara resmi CSS ile genişliği %100, yüksekliği 4 piksel olarak boyutlandırılıyor.
    38:03Giriş Başlığı Düzenleme
    • Giriş kısmında "Sitemize Hoş Geldiniz" yazısı için h1 etiketi kullanılıyor.
    • h1 etiketine center özelliğiyle ortalama, color ile renk, font-size ile yazı tipi boyutu ve font-family ile yazı tipi veriliyor.
    • Yazı mark tagiyle kayan yazı efekti veriliyor.
    40:12Hakkımızda Bölümü Oluşturma
    • Hakkımızda bölümü için div oluşturulup, float right ile sağa yerleştiriliyor.
    • Hakkımızda başlığı için h1 etiketi kullanılıyor ve line-height, font-size gibi özellikleri ayarlanıyor.
    • Açıklama için yeni bir div oluşturulup, genişliği 700 piksel olarak ayarlanıyor.
    48:48İletişim Bölümü ve Galeri Oluşturma
    • İletişim bölümü için div oluşturulup, içine "Bizimle iletişime geçin" yazısı ekleniyor.
    • Galeri için div oluşturulup, float left ile sağa yerleştiriliyor.
    • Galeri içine img etiketiyle logo resmi kopyalanarak beş adet ekleniyor.
    56:15Web Sayfası Düzenlemeleri
    • Sayfa düzenlemesinde genişlik ve yükseklik ayarları yapılmaktadır.
    • Resim boyutları ayarlanarak yan yana gözükmesi sağlanmaktadır.
    • Galleri, hakkımızda ve iletişim sayfaları oluşturulmuştur.
    58:03Duyurular Sayfası Oluşturma
    • Duyurular sayfası oluşturulmuş ve arka plan rengi belirlenmiştir.
    • Duyurular sayfası üstte yer alacak şekilde düzenlenmiştir.
    • Kaynak kod kısmında "h1" etiketiyle duyurular yazısı eklendi.
    59:35Duyurular Sayfası Düzenlemeleri
    • Duyurular yazısının metni ortalanmış ve renk verilmiştir.
    • Duyurular içeriği için yeni bir div oluşturulmuş ve "duyuru içerik" sınıfı verilmiştir.
    • Duyurular alt alta yerleştirilmiş ve kayan yazı efekti uygulanmıştır.
    1:05:50Footer Alanı Oluşturma
    • Footer alanı oluşturulmuş ve genişliği yüzde yüz, yüksekliği yetmiş piksel olarak ayarlanmıştır.
    • Footer'a altın rengi verilmiş ve alttan boşluk bırakılmıştır.
    • Footer içeriğine "Tüm Hakları Saklıdır" yazısı eklendi ve beyaz renk, 35 piksel font size ile ortalama yapıldı.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor