Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, HTML ve CSS kullanarak basit bir web sayfası tasarımı adım adım göstermektedir.
- Video, navigasyon bölümünün oluşturulmasıyla başlayıp, linklerin ekleme ve CSS ile biçimlendirilmesi, ana sayfada içerik oluşturma, paragraf, kalın ve italik yazı ekleme, resim ekleme ve footer bölümünün oluşturulması ile devam etmektedir. Ayrıca footer'ın arka plan rengi, boşluk oluşturma ve kenarları arasında boşluk ekleme işlemleri de gösterilmektedir.
- Eğitim, web sayfası tasarımı öğrenmek isteyenler için temel HTML ve CSS bilgilerini içermekte ve ana sayfanın tamamlandığını belirterek, diğer sayfaların oluşturulmasına geçileceğini ifade etmektedir.
- 00:05Navigation Bölümü Oluşturma
- Navigation bölümüne menü eklemek için konteynerdeki arka plan rengi kırmızı olarak ayarlanıyor.
- Ana sayfaya link oluşturmak için "a" etiketi kullanılıyor ve "href" özelliği ile index.html dosyası belirleniyor.
- Diğer sayfalar için de benzer şekilde linkler oluşturuluyor: "Yaşam", "Edebi Hayat", "Şiirler" ve "Photo" sayfaları.
- 01:35Linklerin Biçimlendirilmesi
- Navigation bölümüne arka plan rengi, ortalanma ve padding (boşluk) özellikleri eklenerek daha güzel görünüm kazandırılıyor.
- Linklerin kenarlarına çizgi (border) ve yazı boyutu (font size) eklenerek daha profesyonel bir görünüm sağlanıyor.
- Linklerin renkleri, hover (fare üzerine geldiğinde) ve visited (ziyaret edilmiş) durumları için CSS ile ayarlanıyor.
- 03:49Renk Kodlarının Bulunması
- Renk kodları Photoshop'tan veya internetten bulunabilir.
- Photoshop'ta renk paletinden renk seçilebilir ve kodları alınabilir.
- İnternette "HTML color palette" araması yapılarak W3Schools gibi sitelerden renk kodları alınabilir.
- 04:24Content Kısmına Yazı ve Resim Ekleme
- Content kısmına giriş yazıları ekleniyor ve paragraflar için "p" etiketi kullanılıyor.
- Kalın harf için "strong" (veya "bold"), italik harf için "em" etiketi kullanılıyor.
- Bir sonraki satıra geçmek için "br" (breakline) kodu kullanılıyor.
- 06:13Resim Ekleme ve Biçimlendirme
- Resim eklemek için "img" etiketi kullanılıyor ve "src" özelliği ile resim dosyası belirleniyor.
- Resmin boyutunu değiştirmek için "width" parametresi kullanılabilir.
- Resim için "float" özelliği ile sol tarafa kaydırma yapılıyor ve etrafına çerçeve ekleniyor.
- 08:49CSS Kullanımı ve Footer Bölümü
- CSS kodları ayrı bir dosyada kullanılabileceği gibi, HTML kodları içerisinde de kullanılabilir.
- Footer bölümü oluşturuluyor ve bilgi yazısı ekleniyor.
- Footer kısmının stilini belirlemek için CSS kodları kullanılıyor.
- 09:54Ana Sayfa Stil Ayarları
- Ana sayfaya arka plan rengi (background color) verilerek boşluk oluşturuldu.
- Yazı ve kenarlar arasında 20 piksellik boşluk bırakıldı.
- Footer'ın üst tarafına 2 piksellik solid düz çizgi (border-top) eklendi.
- Sayfa yenilendiğinde fotoğraf ile content arasında çizgi oluştu.
- Ana sayfa tamamlandıktan sonra diğer sayfaların oluşturulması planlandı.