Web Tasarım

Web Tasarım

WEB TASARIMININ TEMELLERİ
HTML (Hyper Text Markup Language) Nedir?

• Zengin Metin İşaret Dili, günümüzde İnternet üzerinde veri paylaşımı için
  kullanılan en yaygın metin tabanlı dildir. Dilin son sürümü HTML5'tir.
• HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi
  başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen
  programlar aracılığıyla çalışabilen programlar yazılabilir. Temel gereği yazı,
  görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe
  bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları
  tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir.
• HTML, W3C tarafından standartlaştırılmaktadır. Html, tag "etiket" ismi verilen
  çeşitli başlıklardan oluşur. Aşağıdaki örnek bu etiketler kullanılarak yazılmıştır.
• Web kavramı, CERN'de bir bilgisayar programcısı olan Tim BernersLee'nin HTML adlı bilgisayar metin dilini bulup geliştirmesiyle başlamıştır.  Öğr. Gör. M. Mutlu YAPICI

• Web Sitesine Neden İhtihayç var?
• Dünya çapında tanınmak
• Reklam ve Satış
• Eğlence Ve Kültür Tanıtımı
• Haber
• Bilgileri Paylaşmak
• İletişim

Web Sitesinin Planlanması

• Web Sitesinin amacı belirlenmesi
• Sitenin içeriğine karar verilmesi
• İçeriğin düzenlenmesi
• Sayfa Düzeninin(Tasarımının) Belirlenmesi
• Ana Sayfanın Oluşturulması
• Bilgilerin Yazılması
  
  WEB TASARIMINDA TEMEL İLKELER
• Web tasarımı yapılırken dikkat edilmesi gereken bazıilkeler vardır. Bu ilkeler bizim hazırlayacağımız websitesinin alt yapısını düzgün kurmamızı, siteyihazırlarken daha az hata yapmamızı, web sitesikullanıcılarının sitemizde daha fazla ilgigöstermesini ve hızlı çalışmamızı sağlayacaktır.
• Bu ilkeler:
• İçeriğin Belirlenmesi
• Tasarımın Belirlenmesi
• İşlevsellik
•  Kullanılabilirlik
•  İnternet tarayıcıları ile uyumluluk
  
  İçeriğin Belirlenmesi
• Web sitesi tasarımı yaparken kullanacağımız en önemli şey içeriktir. Çünkü web sitelerinin hazırlanma amacı,
  bilgilere başkalarının ulaşmasının sağlanmasıdır. Onun için web sitesi tasarımına başlarken sitede ne yayınlayacağımızı yani içerikleri bilmemiz ve tasarımımızı ona göre yapmamız gerekir.
• İçerikleri önceden bilmemiz tasarımı hazırlamamızda bize yön verecektir. İçerik hakkında dikkat etmemiz gereken bir diğer unsur da uzun cümleler yerine basit ve sade anlatımlar kullanmaktır.
• Tasarımı çok güzel olan bir sitede içerik yok ise o siteyi kimse ziyaret etmez ama tasarımı zayıf olan bir sitede içerik iyi ise o siteye her zaman ziyaretçi gelir. Sitede kullandığımız içerikler, site ziyaretçilerinin beklentileri dışında olmamalıdır.
  
  Tasarımın Belirlenmesi
• Web sitesi içeriklerinin hazırlayacağımız web sayfasının neresinde ve nasıl görünmesini planladığımız bölüm tasarım aşamasıdır.
• Tasarım aşamasında web sayfasının logosu nerede olacak, yazılar nerede olacak, menüler nerede olacak gibi soruların cevaplarını kağıt üzerine ya da bilgisayara çizeriz. Bu bölümde yaptığımız aslında bir oluşturmaktır.
  
  
• İşlevsellik
•  Kullanıcılar sitenin ana sayfasından sitenin içindeki her
  sayfaya erişmek ister. Anasayfamızı hazırlarken bunu
  dikkate almamız gereklidir.
•  Diğer taraftan internet kullanıcıları sitenin iç
  sayfalarından da diğer sayfalara erişmek ister. Bunun
  için mümkün olduğunca sitedeki her sayfadan diğer
  sayfalara bağlantılar oluşturmaya çalışmalıyız.
•  Eğer bunu sağlayamıyorsak web sitemizin çok kullanılan
  sayfalarına her sayfadan mutlaka bağlantı vermeliyiz.
  Her sayfadan anasayfaya ve sitenin ana bölümlerine
  bağlantı sağlamalıyız.
• Örneğin bir alışveriş sitesinde her sayfadan “Alışveriş
  Sepeti ‘nin olduğu sayfaya, kullanıcı bilgilerine, siparişlerim
  bölümüne bağlantı sağlamalıyız
  
  Kullanılabilirlik
• Web sayfalarımızı hazırlarken internet kullanıcılarının
  kolay kullanacağı şekilde tasarlamamız gerekir.
• Kullanıcılar sitemizdeki yazıları okurken
  zorlanmamalıdır. Bunun için yazı tipini, rengini,
  büyüklüğünü iyi seçmemiz ve uygun bir zemin üzerinde
  görüntülememiz gerekir. Ayrıca hazırladığımız
  sayfaların yazıcıdan çıkarılacağını da düşünerek yazı
  renklerini yazıcıdan çıktığında okunacak şekilde
  seçmeliyiz.
• Web sayfalarını hazırlarken site logosunu, ana sayfaya
  olan bağlantıları, menüleri internet kullanıcılarının
  alışkanlıklarına göre konumlandırmalıyız.
  
  Kullanılabilirlik
  Kullanılabilirliğin iyi olması için aşağıda bazı özellikler
  listelenmiştir:
• Web sayfalarımız hızlı yüklenmelidir.
• Siteyi gezmek için kullandığımız navigasyon (menü) kullanıcının
  kolayca görüp kullanacağı bir yerde bulunmalı (Genellikle sayfa
  başında veya sayfanın sol ve sağ bölümünde) dır.
• Sayfadaki site logosundan ana sayfaya bağlantı verilmelidir.
• Her sayfadan ana sayfaya bağlantı için bir Anasayfa yazısı bulunmalıdır.
• Her bölümde o bölümün iç sayfalarına ulaşmamız için bağlantılar olmalıdır.
• Web sitesinde iletişim kurmak için iletişim bilgileri ve iletişim
  formu bulunmalıdır.
• Önemli kelimeler kalın olarak veya özel renklerle vurgulanmalıdır.
• İçerik çok fazla ise arama kutusu bulunmalıdır.
  
  Web Tarayıcıları ile Uyumluluk
• Her biri farklı çözünürlükte olan ekranlar ve her biri farklı
  özellikleri destekleyen bir tarayıcı yelpazesi için WEB sayfası
  tasarlamak, aşılması gereken en büyük sorunlardır. Her yeni
  sürümün daha fazla özellik ve yetenek ile ortaya çıkıyor olması,
  tarayıcıların eski sürümlerinin kullanımdan kalkması anlamına
  gelmez. Bu nedenle, tasarlanan WEB sayfalarının çeşitli tarayıcı
  yazılımları ve yaygın kullanılan tüm sürümleri desteklemesi
  gerekir.
• Farklı tarayıcılar farklı standartları destekleyebilmektedir. Ancak,
  ortak bir anlayış oluşturmak amacıyla WEB Konsorsiyumu (World
  Wide WEB Consortium) (www.w3c.org) desteklenmesi gereken
  minimum teknoloji standartlarını belirlenmektedir. Ancak, her
  tarayıcı yazılımı ya da farklı sürümleri bu belirlenen standartlara
  uymayabildiğinden, tarayıcılar ve değişik sürümler arasında
  farklılıklar oluşabilmektedir.
  
  HTML de Temel Unsurlar
• HTML’ DE her şey metin tabanlıdır ve bir HTML dokümanı
  oluşturmak için ihtiyacınız olan şey bir editördür. Hatta sizde
  herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un
  Notepad'i ile dahi halledebilirsiniz.
  Piyasada iki tip editör bulunuyor :
• Birisi metin tabanlı, kod yazmayı
  gerektiren fakat bunun yanı sıra rutin
  bazı işlemleri kolaylaştıran editörler
  
  
• Diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu
  alırsın) tarzı denen kısaca görsel,
  kodlamayla uğraştırmayı
  gerektirmeyen editörler (FrontPage,
  Dreamweaver, NetObjects Fusion ...).
  
  HTML Tag (Etiket) Komut Yapısı
• Metinler üzerinde biçimlendirme yapma, resim, tablo ekleme,
  adreslere link verme işlemlerini yaptığımız HTML bir programlama
  dili olarak çalışmaz. Etiketler içerisine yazılan metinler direk
  verinin kendisini
  oluşturur.
•  “<“ (küçüktür), “>”(büyüktür) şeklinde
  görünen komutlara etiket (tag) adı
  verilir. Kullanılan çoğu etikette
  başlangıç ve bitiş etiketleri vardır.
  Örneğin bir yazıyı koyu yazmak için
  kullanılan komut ’dir ve sonunda
  etiketinin kullanılması gerekir.
• Kullanılan çoğu etiketin kapatma etiketi bulunduğu gibi sadece başlangıç etiketi olan kodlarda vardır. Örneğin etiketinin şeklinde bir sonlandırma etiketi yoktur.
  
  HTML Temel Yapısı
• HTML de kullanılan etiketler belirli bir düzene göre yazılır. Her
  HTML dokümanıile başlar veile biter.
• Bir HTML dokümanı iki ana kısımdan oluşmaktadır:
•  . . .etiketi arasında yer alan Başlık bölümü;
• . . .etiketleri arasında yer alan Gövde Bölümü.
• Başlık bölümü içineetiketi konur. Eğer hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, , ş, ö, ü) düzgün görünmesi için Başlık kısmı içerisine aşağıdaki meta etiketi eklenir.
• Title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve
  ana kısım olan Gövde'ye geçilir. Sayfamızda görüntülemek
  istediğimiz bütün bilgileri Gövde kısmına koyarız.
  
  HTML Temel Yapısı
• Bir etiket (tag) içerisinde varsayılan olarak gelen değeri değiştirmek için bazı parametreler kullanılır. Aşağıdaki örnekte paragraf etiketinin içindeki align ifadesi parametredir ve paragraf etiketleri içindeki yazının konumunu ayarlar. Parametreler her zaman başlangıç etiketi içerisinde yazılır ve parametrelerin değerleri “” içerisinde yer almaktadır.
  
  

Merhaba Dünya

• Etiketler iç içe geçebilirler ama dikkat edilmesi gereken nokta ilk açılan etiketin en sonda kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir.
  
• Bu örnek yanlıştır
  
• Bu örnek doğrudur
  
  Temel Etiketler
• HTML de temel etiketler deyince ilk akla gelen tabiki “html” etiketi olmalıdır. Ardından başlık ve gerekli
  ayarlamaların yapıldığı “head” etiketi ve son olarak
  gövde bölümü olarak adlandırılan ve asıl web
  sayfalarının tasarlandığı bölüm olan “body” bölümü
  gelmektedir.
  HTML, HEAD, TITLE Etiketi
• Bu etiketler bir HTML dokümanında olmazsa olmaz diye
  tabir edilebilecek etiketlerdir. HEAD etiketi içerisine
  yazılan diğer etiketler arasında en bilineni TITLE
  etiketidir. TITLE etiketi dışında bazı etiketlerde HEAD
  etiketi altında kullanılmaktadır.
  
  Temel Etiketler
• BODY Etiketi
  Web tarayıcısından görüntülenen her türlü bilgi .....etiketleri arasına yazılan bilgilerdir. Bu bilgiler düz metin olabileceği gibi, tablo ,resim, video flash animasyonları, video görüntüleri de olabilir. BODY etiketinde kullanılan parametreler de vardır. Bu parametreler sayesinde kullanılan sayfanın özellikleri de belirlenmiş olur.
  
  İlk Sayfamız
• HTML ile ilk sayfamızı oluşturmak için Nodepad++ metin editörü programını açıyoruz ve alttaki kodları yazıyoruz.