Pek çok programlama, stil ve biçimlendirme dilinin gelişmesiyle birlikte, web tasarımını öğrenmek her zamankinden daha karmaşık hale geliyor. Neyse ki, başlamanıza yardımcı olacak tonlarca araç var. Çevrimiçi eğitimler veya web tasarımıyla ilgili güncel bir kitap gibi birkaç temel kaynağa bakın. Başlamaya hazır olduğunuzda, HTML ve CSS'nin temellerini öğrenerek başlayın. Ardından JavaScript gibi daha gelişmiş web tasarım dillerini keşfetmeye başlayabilirsiniz!
adımlar
Yöntem 1/4: Web Tasarım Kaynaklarını Bulma
Adım 1. Web tasarım kursları ve eğitimleri için çevrimiçi kontrol edin
İnternet, web tasarımı hakkında ayrıntılı bilgilerle doludur ve birçoğuna ücretsiz olarak erişilebilir. Udemy veya CodeCademy'de bazı ücretsiz çevrimiçi kurslar alarak veya freeCodeCamp gibi bir kodlama topluluğuna katılarak başlayabilirsiniz. Ayrıca YouTube'da web tasarımı video eğitimlerini de bulabilirsiniz.
- Tam olarak ne aradığınızı biliyorsanız, belirli terimleri kullanarak arama yapmayı deneyin (ör. "CSS eğitiminde sınıf seçiciler").
- Web tasarımı deneyimi olmayan yeni başlayan biriyseniz, HTML ve CSS'de kodlamanın temellerini öğrenerek başlayın.
Adım 2. Yerel bir kolej veya üniversitede ders almayı düşünün
Bir koleje veya üniversiteye gidiyorsanız, herhangi bir web tasarımı kursu olup olmadığını öğrenmek için okulunuzun bilgisayar bilimleri bölümüne danışın veya kurs kataloğunuza bakın. Okulda değilseniz, yakınınızdaki herhangi bir kolej veya üniversitenin web tasarımında sürekli eğitim dersleri sunup sunmadığını kontrol edin.
Bazı üniversiteler, kaydolmak isteyen herkese açık olan çevrimiçi web tasarım dersleri sunmaktadır. Üniversite eğitmenleri tarafından verilen ücretsiz veya uygun fiyatlı web tasarım derslerini bulmak için Coursera.org gibi web sitelerini kontrol edin
Adım 3. Kitapçıdan veya kütüphaneden bazı web tasarım kitapları alın
Web tasarımı üzerine iyi bir kitap, zanaatınızı öğrenirken ve uygularken paha biçilmez bir referans olabilir. Genel web tasarımı veya belirli kodlama biçimleri ve öğrenmek istediğiniz diller hakkında güncel kitaplar arayın.
Web tasarımı hakkında dergiler ve blog makaleleri okumak da yeni teknikler öğrenmenin, ilham almanın ve en son trendleri takip etmenin iyi bir yoludur
Adım 4. Bazı web tasarım yazılımlarını indirin veya satın alın
İyi web tasarım yazılımı, web sitelerini daha verimli ve etkili bir şekilde oluşturmanıza yardımcı olabilir ve ayrıca kodlama, komut dosyası oluşturma ve diğer önemli tasarım öğelerini uygulamanın içini ve dışını öğrenmenize yardımcı olması için harikadır. Aşağıdaki gibi araçları kullanmaktan faydalanabilirsiniz:
- Adobe Photoshop, GIMP veya Sketch gibi grafik tasarım programları.
- WordPress, Chrome DevTools veya Adobe Dreamweaver gibi web sitesi oluşturma araçları.
- Bitmiş dosyalarınızı sunucunuza aktarmak için FTP yazılımı.
Adım 5. Başlarken oynamak için bazı web sitesi şablonları bulun
Web tasarımının temellerini öğrenirken şablonları kullanmanın yanlış bir tarafı yok. Beğendiğiniz web sayfası şablonlarını arayın ve tasarımcının sayfayı nasıl bir araya getirdiği hakkında bir fikir edinmek için koda yakından bakın. Ayrıca kodu değiştirmeyi ve şablona kendi öğelerinizi eklemeyi de deneyebilirsiniz.
Başlamak için ücretsiz web sitesi şablonları arayın veya web tasarım yazılımınızla birlikte gelen şablonları deneyin
Yöntem 2/4: HTML'de Uzmanlaşma
Adım 1. Temel HTML etiketlerini öğrenin
HTML, bir web sitesinin temel öğelerini biçimlendirmek için kullanılan basit bir biçimlendirme dilidir. Etiketleri kullanarak web sitenizin farklı öğelerini biçimlendirebilirsiniz. Etiketler, her öğeden önce ve sonra köşeli parantez içinde görünür ve o öğenin sayfada nasıl çalışacağına ilişkin talimatlar sağlar. Etiketi kapatmak için köşeli parantez içindeki son etiketin önüne / işareti koyun.
- Örneğin, metninizin bir kısmının gözü pek, öğeyi şöyle bir etiketle çevrelersiniz: Bu metin kalındır.
- Birkaç yaygın etiket (paragraf), (bağlantılı metni tanımlayan bağlantı) ve (metnin boyut ve renk gibi çeşitli niteliklerini tanımlamaya yardımcı olabilecek yazı tipi) içerir.
- Diğer etiketler, HTML belgesinin kendisinin farklı bölümlerini tanımlar. Örneğin, anahtar kelimeler veya arama motoru sonuçlarında görünecek bir sayfa açıklaması gibi, sayfa hakkında izleyiciye görünmeyecek bilgileri içermek için kullanılır.
Adım 2. Etiket özelliklerini kullanmayı öğrenin
Bazı etiketlerin nasıl çalışması gerektiğini belirtmek için ek bilgilere ihtiyacı vardır. Bu ek bilgi, açılış etiketinde görünür ve buna "nitelik" denir. Nitelik adı, etiket adından hemen sonra bir boşlukla ayrılmış olarak görünür. Öznitelik değeri, öznitelik adına bir = işareti ile eklenir ve tırnak işaretleri içine alınır.
- Örneğin, metninizin bir kısmını kırmızı yapmak istiyorsanız, etiketini ve aşağıdaki gibi uygun bir yazı tipi rengi özniteliğini kullanarak yapabilirsiniz: Bu metin kırmızıdır.
- Farklı yazı tipi renkleri ayarlamak gibi, bir zamanlar HTML etiketi nitelikleriyle rutin olarak elde edilen efektlerin çoğu, artık bunun yerine tipik olarak CSS kodlamasıyla yapılıyor.
Adım 3. İç içe öğelerle deney yapın
HTML, daha karmaşık biçimlendirme oluşturmak için öğeleri diğer öğelerin içine yerleştirmenize de olanak tanır. Örneğin, bir paragraf tanımlamak ve ardından paragraf içindeki metnin bir kısmını italik hale getirmek istiyorsanız, bunu şu şekilde yapabilirsiniz:
Kodlamayı seviyorum!
Adım 4. Boş öğelerle tanışın
HTML'deki bazı öğelerin hem açılış hem de kapanış etiketlerine ihtiyacı yoktur. Örneğin, bir görüntü ekliyorsanız, yalnızca etiket adını ve diğer gerekli nitelikleri (görüntü dosyası adı ve erişilebilirlik amacıyla eklemek istediğiniz herhangi bir alternatif metin gibi) içeren tek bir "img" etiketine ihtiyacınız vardır. Örneğin:
Adım 5. Bir HTML belgesinin temel düzenini keşfedin
HTML tabanlı web sitenizin düzgün çalışması için tüm sayfayı nasıl biçimlendireceğinizi bilmeniz gerekir. Bu, html kodunuzun nerede başlayıp nerede bittiğini tanımlamanın yanı sıra, gizli arka plan bilgisi sağlamak için kodun hangi bölümlerinin görüntüleneceğini ve hangi bölümlerin görüntüleneceğini belirlemek için etiketleri kullanmayı içerir. Örneğin:
- Sayfanızı bir HTML belgesi olarak tanımlamak için etiketi kullanın.
- Ardından, kodunuzun nerede başlayıp nerede bittiğini tanımlamak için tüm sayfanızı etiketlerin içine dahil edin.
- Sayfa başlığı, anahtar kelimeler ve sayfa açıklamanız gibi izleyiciye gösterilmeyecek tüm bilgileri etiketlerin içine yerleştirin.
- Sayfanızın gövdesini (yani, izleyicinin görmesini istediğiniz metin ve resimleri) etiketlerle tanımlayın.
Yöntem 3/4: CSS'yi Tanımak
Adım 1. HTML belgelerinize stiller uygulamak için CSS'yi kullanın
CSS, web sayfanıza farklı stil ve tasarım öğeleri uygulamanıza izin veren bir stil sayfası dilidir. Örneğin, sayfanızdaki bazı metin öğelerine belirli bir yazı tipini veya metin rengini seçerek uygulamak istiyorsanız, bunu yapmak için bir CSS dosyası oluşturabilirsiniz. Ardından, CSS dosyasını HTML belgenize istediğiniz yere ekleyebilirsiniz.
-
Örneğin, bir CSS dosyasının HTML belgenizdeki tüm paragraf öğelerini yeşile çevirmesini istiyorsanız, şu satırları içeren bir.css dosyası oluşturabilirsiniz:
- P {
- yeşil renk;
- }
- Daha sonra dosyayı style.css gibi bir adla kaydedersiniz.
- Stil sayfasını HTML belgenize uygulamak için onu etiketlerin içine boş bir bağlantı öğesi olarak eklersiniz. Örneğin:
Adım 2. Bir CSS kural kümesinin öğelerine aşina olun
Tek bir CSS kodu parçasına "kural kümesi" denir. Kural kümesi, kodunuzun ne yapmasını istediğinizi tanımlayan farklı öğeleri içerir. Bunlar şunları içerir:
- Stil vermek istediğiniz HTML öğesini tanımlayan seçici. Örneğin, kural kümenizin paragraf öğelerini etkilemesini istiyorsanız, kural kümenize "p" harfiyle başlarsınız.
- Stil vermek istediğiniz özellikleri (yazı tipi rengi gibi) tanımlayan bildirim. Bildirim, küme parantezleri {} içinde yer alır.
- HTML öğesinin hangi özelliğine stil vermek istediğinizi belirten özellik. Örneğin, etiket içinde metnin rengine stil vermek istediğinizi belirtebilirsiniz.
- Özellik değeri, özelliği özellikle nasıl değiştirmek istediğinizi tanımlar (örneğin, özellik yazı tipi rengiyse, özellik değeri "yeşil" olur).
- Tek bir bildirimde birkaç farklı özelliği değiştirebilirsiniz.
Adım 3. Dizginizin güzel görünmesi için metninize CSS uygulayın
CSS, HTML'deki her bir özelliği ayrı ayrı kodlamak zorunda kalmadan metninize çeşitli efektler uygulamak için kullanışlıdır. Aşağıdakiler dahil, CSS'de farklı dizgi özelliklerini değiştirmeyi deneyin:
- Yazı rengi
- Yazı Boyutu
- Yazı tipi ailesi (ör. metninizde kullanmak istediğiniz yazı tipi aralığı)
- Metin hizalama
- Satır yüksekliği
- Harf boşluğu
Adım 4. Kutular ve diğer CSS düzen araçlarıyla denemeler yapın
CSS, sayfanıza metin kutuları ve tablolar gibi çekici görsel öğeler eklemek için de kullanışlıdır. Ek olarak, sayfanızın genel düzenini değiştirmek ve farklı öğelerin birbirine göre nerede konumlanacağını tanımlamak için kullanabilirsiniz.
Örneğin, bir öğenin genişliği ve arka plan rengi gibi nitelikleri tanımlayabilir, kenarlık ekleyebilir veya sayfanızdaki çeşitli öğeler arasında boşluk oluşturacak kenar boşlukları ayarlayabilirsiniz
Yöntem 4/4: Diğer Tasarım Dilleriyle Çalışma
Adım 1. Sayfalarınıza etkileşimli öğeler eklemek istiyorsanız JavaScript öğrenin
JavaScript, web sitelerinize animasyonlar ve açılır pencereler gibi daha gelişmiş özellikler eklemekle ilgileniyorsanız öğrenmek için harika bir dildir. JavaScript'te nasıl kod yazılacağı ve bu kodlanmış öğeleri HTML kullanarak web sayfalarınıza nasıl dahil edeceğiniz hakkında bir kursa katılın veya çevrimiçi eğitimlere bakın.
JavaScript'te kendinizi rahat hissetmeden önce HTML ve CSS'de sayfa oluşturmanın temellerini bilmeniz gerekir
Adım 2. JavaScript kodlamasını kolaylaştırmak için jQuery ile tanışın
jQuery, önceden kodlanmış çeşitli JavaScript öğelerine erişmenize izin vererek Java programlamayı basitleştirebilen bir JavaScript kitaplığıdır. JavaScript kodlamanın temellerini zaten biliyorsanız, jQuery harika bir araçtır.
jQuery Foundation'ın web sitesi olan jQuery.org üzerinden jQuery kütüphanesine ve daha birçok değerli kaynağa ulaşabilirsiniz
Adım 3. Arka uç geliştirme ile ilgileniyorsanız, sunucu tarafı dillerini inceleyin
HTML, CSS ve JavaScript, kullanıcının web sitesinde ne gördüğüne ve ne yaptığına odaklanan web tasarımcıları için ideal olsa da, kamera arkası çalışmalarıyla daha çok ilgileniyorsanız sunucu tarafı dilleri kullanışlıdır. Arka uç geliştirme hakkında bilgi edinmek istiyorsanız Python, PHP ve Ruby on Rails gibi dilleri öğrenmeye odaklanın.
Bu diller, kullanıcının görmediği verileri yönetmek ve işlemek için kullanışlıdır. Örneğin, oturum açma gerektiren web sitelerinde güvenli parola oluşturma araçları oluşturmak için PHP kullanılabilir
Yardım Dosyaları
HTML Hile Sayfası
CSS Hile Sayfası
