then 'Add to home screen'
then 'Add to home screen'
Web Tasarım Dersi Kodları içinde HTML, CSS, Javascript ve UI/UX Tasarım ilkeleriyle ilgili temel kodları ve kullanımı bulabilirsiniz.
HTML Temel Kodları
İçerikler
HTML (HyperText Markup Language), web sayfaları oluşturmak için kullanılan temel bir kodlama dili olarak bilinir. HTML kullanarak metin, resim, bağlantılar ve diğer içerikleri bir araya getirerek internet sayfaları oluşturulur.
HTML temel kodları arasında başlık oluşturma, paragraf ekleme, liste oluşturma gibi çeşitli öğeler bulunur. Örneğin, <h1> etiketi ile başlık belirtilirken, <p> etiketi ile bir paragraf oluşturulur.
HTML kodları genellikle bir table içinde düzenlenir. Bu sayede, sayfanın yapısı daha anlaşılır hale gelir ve kodlama süreci kolaylaşır.
HTML kodlarına başlamadan önce, sayfanın başında <!DOCTYPE html> ifadesi kullanılarak sayfanın HTML5 versiyonunu tanıtırsınız. Bu, tarayıcıya hangi HTML versiyonunun kullanılacağını belirtir.
HTML kodları sayesinde, web sayfalarının yapısı ve içeriği belirlenerek internet üzerinden erişilebilir hale getirilir.
CSS Stil Kodları
CSS (Cascading Style Sheets) web tasarımında kullanılan stilleri düzenlemek için kullanılan bir dildir. Web sayfalarının görsel olarak nasıl görüneceğini belirlemek için CSS kodları kullanılır. CSS ile web sitenizin renkleri, fontları, arka planları ve düzenleri gibi öğelerini düzenleyebilirsiniz.
CSS kodları sayesinde web sitenizin görünümünü zenginleştirebilir, daha profesyonel bir görünüm elde edebilirsiniz. Kullanıcıların sitenizde daha fazla zaman geçirmelerini sağlamak ve marka imajınızı güçlendirmek için CSS kodlarını etkili bir şekilde kullanmanız önemlidir.
CSS kodları ile web sitenizin responsive design yani duyarlı tasarım özelliğini sağlayabilirsiniz. Bu sayede web siteniz farklı ekran boyutlarına sahip cihazlarda düzgün bir şekilde görüntülenebilir. Bu da kullanıcı deneyimini arttırır ve SEO performansını etkileyebilir.
Web tasarımı dersinde CSS stil kodları öğrenerek, web sitenizin görünümünü istediğiniz şekilde özelleştirebilir ve tasarım becerilerinizi geliştirebilirsiniz.
Javascript Etkileşim Kodları
Javascript, web sitelerine etkileşim ve dinamizm kazandırmak için kullanılan bir programlama dilidir. Web tasarımında javascript kodları sayesinde kullanıcılarla etkileşim kurabilir, form kontrolü yapabilir, animasyonlar oluşturabilir ve daha birçok interaktif özellik ekleyebilirsiniz. Bu yazıda Javascript programlama dili ile etkileşim kodlarını öğreneceksiniz.
| Kod | Açıklama |
|---|---|
| document.getElementById() | Belirli bir id’ye sahip HTML elemanını seçer. |
| addEventListener() | Bir olay dinleyicisi ekler, böylece belirtilen olay gerçekleştiğinde bir fonksiyon çalıştırılabilir. |
Javascript programlama dili ile web sayfalarına butonlara tıklama, fare ile üstüne gelme gibi çeşitli etkileşimler ekleyebilir ve kullanıcı deneyimini geliştirebilirsiniz. Ayrıca form alanlarını kontrol etmek, veri girişlerini doğrulamak ve hataları yönetmek için de Javascript etkileşim kodları kullanılır.
Genel olarak, Javascript etkileşim kodları web tasarımında olmazsa olmazlardandır ve web sitelerine canlılık katmak için kullanılır.
Bootstrap Framework Kullanımı
Bootstrap Framework , web tasarımcıları ve geliştiriciler için en popüler front-end frameworklerinden biridir. Bootstrap, HTML, CSS ve JavaScript kullanılarak duyarlı ve modern web siteleri oluşturmak için kullanılır. Bu framework, önceden oluşturulmuş stiller ve bileşenler içerir, bu da web tasarımı sürecini hızlandırır ve kolaylaştırır.
Bootstrap kullanmanın en büyük avantajlarından biri, responsive tasarımı kolayca sağlayabilme özelliğidir. Bu sayede, web siteniz farklı cihazlarda mükemmel şekilde görüntülenebilir. Şablonu değiştirdiğinizde bile site, otomatik olarak cihazın boyutuna göre ayarlanır.
Bir diğer avantajı ise hazır HTML ve CSS stilleri içermesidir. Bu sayede, tasarım sürecinde tekrar tekrar aynı kodları yazmak zorunda kalmazsınız. Ayrıca, hazır JavaScript bileşenleri ile etkileyici bir görünüm elde edebilirsiniz.
Bootstrap’in kolaylıkla özelleştirilebilir olması da büyük bir artıdır. Geliştiriciler, kendi stillerini ve düzenlerini ekleyerek, siteye kişisel bir dokunuş katabilirler. Bu, projenin ihtiyaçlarına ve hedef kitlesine göre özelleştirme yapma imkanı tanır.
UI/UX Tasarım İlkeleri
UI/UX Tasarım İlkeleri, kullanıcı deneyimi ve kullanıcı arabirimi tasarımı için temel prensipleri kapsar. Bu tasarım ilkeleri, web siteleri ve mobil uygulamaların kullanıcı dostu ve etkili bir şekilde kullanılmasını sağlar. Bu ilkeler, renk, tipografi, düzen ve kullanılabilirlik gibi temel unsurları içerir.
UI/UX tasarımı yaparken, kullanıcı deneyimini geliştirmek için renk seçimleri çok önemlidir. Renklerin uyumu ve kullanıcılara vermek istediğiniz mesaj önemlidir. Ayrıca, tipografi düzenlemeleri ve metinlerin okunabilirliği de kullanıcı deneyimini etkileyen unsurlardır.
UI/UX tasarımında düzen, web siteleri ve mobil uygulamaların estetik açıdan görsel olarak dengeli ve düzenli görünmesini sağlar. Kullanıcıların bilgiyi hızlı bir şekilde bulmalarını ve kaybolmamalarını sağlayacak bir düzen oluşturmak önemlidir.
UI/UX tasarımında kullanılabilirlik, kullanıcıların web sitesi veya uygulama içinde gezinirken kolaylıkla istedikleri bilgilere ulaşabilmesi ve işlemleri gerçekleştirebilmesi için önemlidir. Bu nedenle, kullanıcı dostu arayüzlerin tasarlanması gerekmektedir.
