Web Tasarım

Özellikle 1999 yılı sonrası teknoloji alanında yaşanan gelişmeler hayatımızda çok büyük değişikliklere neden olmuştur. Öyle ki İnternet teknolojileri bir çok insan için hobi iken bir başkası için çok önemli kazanç kaynağı haline gelebilmektedir. Sizde sanal alemi kazanç ortamına çevirmek isterseniz ilk olarak bir site kurarak başlamalısınız. Unutmayın site kurmak zor değil, ilk başlarda karışık gelebilmektedir. Bu işe eğitim alarak başlamalıyız. Bu eğitim kurumu okul olabileceği gibi bir kaç ay sürecek bir kursta olabilir. Bu neden İstanbul’da ücretli ve ücretsiz yararlanabileceğiniz Web Tasarım Kursları hakkında bilgi vereceğiz.

HTML İşaretleme Dİli

İnternet Sitesi Nasıl Yapılır, Eğitime Nereden Başlanmalı?
Günümüzde biliyorsunuz blog sayfaları ile insanlar içerik paylaşımı yapmaktadır. Onları hariç tutacak olursak İnternet siteleri statik ve dinamik etkileşimli olmak üzere 2 şekilde yapılmaktadır. Gerçi dinamik sitelerin sayısı oldukça azaldığı görülmektedir. İnternet sitesi tasarlama ve yayınlama konusunda sıfırdan başlamak için ilk tercihiniz Web Tasarım olmalıdır. Çünkü bu işin ilk basamağı ve en gerekli bilgi olan HTML işaretleme dili ile CSS stil şablon dili bu aşamada öğretilmektedir. Milli Eğitim Bakanlığına bağlı hizmet veren eğitim kurumlarında Web Tasarım Kursu 192 saat olarak uygulanmaktadır. Bu eğitimi alanların önünde son aşama olan Web Programlama bulunmaktadır. Burada ise dinamik siteleri yapmaya imkan veren PHP ve ASP gibi yazılım dilleri ile bilgilerin saklanmasına imkan veren Veritabanı eğitimleri verilmektedir.

Ücretsiz Web Tasarım Kursu (İSMEK)
İstanbul’da yaşayan 16 yaş üzeri herkesin ücretsiz Web Tasarım eğitimi alabileceği eğitim kurumu İsmek olup, 192 saat sürecek bir eğitimden oluşmaktadır. Hemen hemen tüm ilçelerde bulacağınız bu eğitim aynı zamanda Milli Eğitim Bakanlığı tarafından onaylı sertifika sahibi olmanızı sağlıyor. Şimdi dilerseniz eğitimlerde ele alınacak konulara bir göz atalım.

Tasarımın Temel İlkeleri İle Başlıyoruz
Evet değerli arkadaşlar tanışma faslından sonra ilk ele alınacak eğitim tasarımın temel ilkeleri olan İnternet sitelerinde olması ve kaçınılması gereken durumları ele alacaksınız. Örnek hatalı renk seçimleri sitenizden uzaklaştırabilir. O nedenler görsel boyutları, yerleşim, hizalama çok önemli olabilmektedir.

HTML İşaretleme Dili Merhaba Dünya 🙂
Bu işe ilk başlayanların ilk sayfası genelde Merhaba Dünya yazan boş bir kod parçasıdır. Çünkü bu aşamada sayfanın olmazsa olmaz etkileri HTML, HEAD, BODY ve TITLE kısımları öğretilmektedir.

Listeleme
Hemen devamında ise yine İnternet sitelerinde en çok kullanacağınız listeleme işlemine geçilmektedir. Burada en çok kullanacağınız sıralı ve sırasız listeler olup, ol, ul, li etiketlerine aşina olacaksınız. Benim liste ise ne işim olur demeyin sitelerdeki menüler bile listeleme kodları ile hizalanmaktadır.

Metin Düzenleme Etiketleri
Sitelerin amacı içerik paylaşmak üzere kurulduğu için hemen hemen her sayfasında metin bulunur. Bunları daha güzel hale getirmek için bazı etiketler bulunmaktadır. Örnek bir yazı editöründe satır atlamak için Enter tıklamak yeterli iken HTML ile yapılan işlemlerde bu mümkün değildir. Satır atlamak için BR yada P (Pragraf) etiketi kullanmak gerekir. Aynı şekilde koyu yapmak için B altı çizili için U yatık yapmak içinde I etiketlerini uygun şekilde kullanmak gerekir. Çizgi çekmek içinde HR etiketi kullanılır. Bunları eğitimde bol uygulamalı olarak göreceksiniz.

Bağlantı (Link) Oluşturma
Yine aynu şekilde en çok gerek duyacağınız işlemlerden biride link (bağlantı) oluşturma hususu olup, gerek site içi gerekse site dışı bağlantılar her sitede gereklidir. Linklerin aynı pencere, ayrı pencere şeklinde ayrılması ve Seo hususunda önemli kural haline gelen Nofollow eklenmesini göreceksiniz.

TABLE (Tablo)
2000 Yılı başlarında HTML ile yapılan sitelern sayısı %95 olup, o zaman CSS stil dili bulunmuyordu site ve içeriğin hizalanması için TABLE kullanılırdı son derece gereksiz ve zahmetli olan bu uygulamayı öğrenin ama çok fazla gerek olmayacaktır. Google Seo kuralları kapsamında Table istememektedir.

Formlar
İşte burası çok önemli arkadaşlar Sitelerin tümünde formlar HTML işaretleme dili ile yapılmaktadır. Üyelik, email, sipariş, başvuru, vs aklınıza gelebilecek formların hazırlanışını bu aşamada öğreneceksiniz. Site tavsiyem bu kısmı daha dikkatli dinlemeniz ve bol bol uygulamanızdır.

Resim, Ses, Video Ekleme
Eğitimin bu kısmı son olarak yine çok kullanacağınız resim ve video ekleme ile son bulacak olup, özellikle bilinçli resim ekleme çok önem arz etmektedir. Büyük boyutlu resimlerin eklemeden kaçınmalısınız. Çünkü sitenin ağırlaşması ve geç açılmasına neden olacaktır. Geç açılma ise sitenin Seo açısından sıkıntı yaşamasına neden olacaktır.

Web Tasarım Editörü (Dreamweaver) Giriş
Öğretmenler eğitimlerin ilk başında HTML eğitimlerini ilk olarak notepad yani not defterinde yazdırarak yaptırır. Bunun en önemli nedeni etiketlerin aklınızda kalması olup, bazen bu insanlarda zor ve sıkıntılı olması nedeniyle kursu yarıda bırakabilir. Oysaki biraz sabretmesi halinde çok kolaylaşacaktır. Çünkü bu işleri Dreamweaver dediğimiz ADOBE firması tarafından sürekli geliştirilen bir program ile yapacaktır. Bir tıkla resim, tablo, link ekleme yanı sıra içeriklerin düzenlemesine dair hemen hemen her işlemi bu programla kolayca yapabilirsiniz. Yukarıda öğrendiğimiz işlemleri bir kezde bu programla yapacak ve daha fazla uygulama imkanı bulacaksınız.

CSS (Stil Şablonu)
Bu aşama çok önemli arkadaşlar çünkü hem statik, hemde dinamik sitelerin olmazsa olmazı bir çalışma olup, sitelerin iskeleti, yapısı ve içeriği tek elden düzenleme imkanı sunmaktadır. Tek sayfada oluşturacağınız kod ile sitenin her yerine kolayca müdahale edebilirsiniz. DİV mantığı ile çalışmayı mutlaka öğrenmelisiniz. CSS dili çıkmadan önce bu işlemleri genelde TABLE ile yapılır fakat istenilen güzel sonuç elde edilmezdi.

CSS Temelleri ve Seçiciler
Kursun ilk aşaması CSS kodları yada sayfanın entegre edilmesi ile başlamakta olup, genelde harici bir sayfada yapmanız önerilecektir. Bu noktadan sonra kodlamaya seçiciler ID, CLASS ve TAG mantığına geçilmektedir. Div İd ve Div Class yapıları aklınızda yer edecektir.

Ölçü Birimleri
İnternet siteleri aslında boş bir resim defterine benzemektedir. Siz o sayfaya ne eklerseniz, nasıl eklerseniz o şekilde güzel ve profesyonel görünmektedir. Profesyonel bir sitede ilk olarak sitenin çevresi belirlenir. Bunu mutlaka piksel değilde % olarak yapmalısınız. Çünkü google son zamanlarda sitelerin mobil uyumlu olmasına önem vermektedir. Mobil uyumlu site için 300px ve üzeri çerçevelerde mutlaka % ile çalışmalısınız. Kurslarda sizlere px, % ve bir diğer ölçü birimi olan em ile çalışma öğretilmektedir.

Zemin Şekillendirme (Arkaplan)
Bir çok tasarımcı siteyi standart renk olan beyaz bırakmak yerine yazı, resim ile uyumlu hale getirmektedir. Bunun için CSS en büyük yardımcı olup, zemine istediğiniz uygulamayı yapabilirsiniz.

Kutu (Çerçeve Yapımı)
CSS ile çalışanların en çok yaptığı kutu ile çalışmaktır. ilk başta kapsayıcı bir kutu yapılır ve sonrasında içerisine istediğiniz kadar kutu yaparak içerikleri yerleştirebilirsiniz.

Konumlandırma
Bir diğer önemli husus ise içeriklerinin yeri ve konumu olup, bununla ilgili bir kaç etiket ve ölçü birimlerinden yararlanacağız. Statik, sabit ve göreceli konumlandırma işlemlerini öğreneceksiniz.

CSS Menü Yapımı
Sitelerin %99 gibi büyük bir bölümünde karşılaşacağınız menü elemanları artık CSS ve listeleme ile yapılmaktadır. Yatay, dikey ve açılır menü yapmak için sizlere bol uygulamalı eğitimler verilecektir.

Tarayıcı Sorunları ve Çözümü
Evet değerli arkadaşlar CSS eğitimi son aşamasında ise tarayıcı sorunları ele alınacak olup, özellikle İnternet Explorer’de çıkan uyuşmazlıkların düzeltilmesini öğreneceksiniz.

Mustafa Gövercin

Merhabalar, ben eğitim içerikleri editörü Mustafa Gövercin, İstanbul'da yaşayanlar için özellikle ücretsiz yararlanabileceğiniz kursları ile sizlerle buluşturmaya çalışıyorum. Şu hususu unutmamak gerekir ki "öğrenmenin yaşı yoktur."