Buradasınız

HTML Giriş

Bölüm 1: Genel Kavramlar

 1.LAN (Local Area Network)  

Yerel alan ağ anlamına gelen LAN, yakın bilgisayarların fiziksel olarak birbirlerine bağlanmasına denir. Örneğin bir okulda laboratuarlardaki bilgisayarların birbirlerine olan bağlantıları ve laboratuarlar arasındaki bağlantıyı verebiliriz. Yerel ağ çok uzun mesafeli olmaz.

2.WAN (Wide Area Network)  

Geniş alan ağ anlamına gelen WAN, uzaktaki bilgisayarların fiziksel olarak bağlanamayacakları bilgisayarlara telefon hatları, uydu aracılığıyla bağlanmasına denir. WAN birçok LAN’ın kendi arasında birleşimidir.

3.İnternet  

İnternet, birçok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli büyüyen bir iletişim ağıdır.  Internet, insanların her geçen gün gittikçe artan "üretilen bilgiyi saklama/paylaşma ve ona kolayca ulaşma" istekleri sonrasında ortaya çıkmış bir teknolojidir. Bu teknoloji yardımıyla pek çok alandaki bilgilere insanlar kolay, ucuz, hızlı ve güvenli bir şekilde erişebilmektedir. 

4.İntranet

İntranet (iç ağ), sadece belirli bir kuruluş içindeki bilgisayarları, yerel ağları (LAN) ve geniş alan ağlarını (WAN) birbirine bağlayan, çoğunlukla TCP/IP tabanlı bir ağdır.

5.IP (Internet Protocol) Numarası  

IP (Internet Protocol), bilgisayarların iletişim kurmasını sağlayan standart bir Protokoldür. Genel olarak her bilgisayarın kendine özel bir numarası vardır.  İki bilgisayar iletişim kurduğu zaman birbirlerini bulmak için IP adresini kullanır. Örneğin: 192.168.123.254. 

6.Alan Adı (Domain Name)  

İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır (162.178.111.24 gibi). Bu numaraları akılda tutmak ve herhangi bir anda yazmak zor olduğundan, alan adı (domain name) sistemi adını verdiğimiz bir isimlendirme oluşturulmuştur. Herhangi bir bilgisayara (ve o bilgisayar üzerinde yayınlanan WEB sitelerine) bağlanmak için karmaşık IP numaralarını akılda tutmak yerine, hatırlanması ve yazılması kolay alan adlar kullanılmaktadır (www.google.com gibi). Siz tarayıcınızın adres çubuğuna www.meb.gov.tr yazdığınızda, tarayıcınız merkezi bir bilgisayarla iletişim kurarak www.meb.gov.tr adresinin yerini tuttuğu IP numarasını öğrenecek ve bu IP numaralı bilgisayara bağlanarak istediğiniz bilgilere erişmenizi sağlayacaktır. 

 

İnternet adreslerinde görülen kısaltmalar şunlardır:

gov: Hükümet kurumları (government)

edu: Eğitim kurumları üniversiteler (education)

org: Ticari olmayan kuruluşlar (organization)

com: Ticari kuruluşlar (company)

mil: Askeri kurumlar (military)

net: Servis sunucular (network)

ac: Akademik kuruluşlar (academic)

int: Uluslararası kuruluşlar (international)

k12: ortaöğretim okulları

...

genel olarak en çok duyduğunuz alan adları yukarıdakilerdir. Bu alan adları yetersiz olduğundan dolayı yeni alan adları oluşturulmuştur. Bazıları şunlardır:

.aero : Hava endüstrisi tarafından kullanılır.
.asia : Asya ülkelerine ait alan adıdır.
.biz : İş ile ilgili konularda kullanılır.
.cat: Catalan dil ve kültürüne ait sitelerde kullanılır.
.coop: Kooperatifler tarafından kullanılır.
.info : information. Bilgi siteleri için kullanılır.
.int : Uluslararası organizasyonlar için ayrılmıştır.
.jobs : iş ve işçi ilanları veren siteler için hazırlanmıştır.
.mobi: Mobile. Cep telefonları için web sitesi yapımında kullanılır.
.museum : Müzeler için ayrılmıştır.
.name : Kişisel siteler için ayrılmıştır.
.pro : professional. meslek sahipleri için ayrılmıştır.
.tel : iletişim servisleri tarafından kullanılır.
.travel : seyahat acenteleri ve seyahat hizmetleri için kullanılır.

Bunun yanında kullanılan ülke kısaltmaları da vardır.

Bazıları; tr:Türkiye, jp:Japonya,uk: İngiltere, it: İtalya, ch: İsviçre gibi.

 

7.WEB Tarayıcılar (Browser)

Web tarayıcısı herhangi bir web sayfasını ziyaret ettiğimizde kodlanmış halde bulunan web sayfalarının kullanıcı tarafından son halinde yani metin, resim ve videoların görünmesini sağlayan programlardır. HTML kodları olarak hazırlanan web sayfalarını çözümleyip görüntüleyen bir çeşit dönüştürücü de diyebiliriz.Bilgisayarınızda kullandığınız Mozilla firefox , İnternet Explorer, Opera, Apple Safari ve  bunlar gibi programlar birer web browser`dır.

8.WEB Tarayıcıların Çalışması  

Her bilgisayar üzerinde WEB sayfası adı verilen elektronik dosyaları saklar ve siz kendi bilgisayarınızdan bu bilgilere erişebilirsiniz. WEB sizin zengin bir ortamda iletişim kurmamızı sağlar. WEB üzerinde bilgilere metin, renkli çizim, resim, ses ve hatta video ortamlarına erişebilirsiniz.

 

WEB istemci-sunucu (client-server) sistemi olarak bilinir. Sizin WEB tarayıcı yazılımınız istemci, uzaktaki sizin erişmek istediğiniz bilgileri saklayan bilgisayar ise sunucudur. Örneğin; Milli Eğitim Bakanlığının WEB sitesine bakıyorsanız sizin bilgisayarınız Ankara’daki bir sunucudan WEB sayfalarına erişmek istediği mesajını yollamıştır. Milli Eğitim Bakanlığının WEB sunucusu istediğiniz bilgileri internet üzerinden sizin bilgisayarınıza yollamaktadır. Sizin WEB tarayıcınız gelen bilgileri yorumlar ve sizin ekranınızda anlaşılır bir şekilde gösterir.

Teknik olarak tarayıcıların neler yaptığını iki madde de toplayabiliriz.

  • Tarayıcınız sizin bağlandığınız WEB sunucudan yaptığınız dosya isteğini ağ (network) üzerinden size yani kullandığınız bilgisayara ulaştırır.
  • Tarayıcının ikinci görevi ise yaptığınız isteği, yani WEB sunucudan gelen dosyayı size, yani monitörünüze nasıl yansıtacağını belirlemesidir.

 

9.URL  

URL, "Uniform Resource Locator" (Özgün Kaynak Adresi) kelimelerinin baş harflerinden oluşan bir kısaltmadır. İnternet yoluyla insanların kullanımına sunulmuş olan her metnin, resmin ya da belgenin kendine ait ve tek olan adresi adidir. http://www.bilisimokulu.net/dersler.html şeklindeki URL, okul sitesinin öğretmenler bölümünün özgün kaynak adresi, yani URL'sidir.

Her Web sayfası sadece kendine ait bir URL’ye sahiptir. Örneğin http://www.bilisimokulu.net/dersler.html bir URL'dir. Bu URL üç bölümden oluşur: 

Protokol (http://, ftp://, news: vb.); alan adı (protokolden, ondan sonraki bölü işaretine  kadar olan kısım); dosya yolu (ilk bölü işaretinden sonraki kısım).

 

10.HTML

HTML (Hyper Text Markup Language, Hareketli Metin İşaretleme Dili), bir belge biçimleme dilidir. Tag (etiket) kullanılarak text metinler biçimlenirken aynı zamanda belgeler arasında veya belgenin içinde köprüler sağlamak ile ilgili komutlar içerir. HTML dosyaları html veya htm uzantısı ile saklanır. HTML, HTTP ve ilgili diğer protokolleri kullanabilmek için renkli ve güzel kullanıcı ara yüzleri hazırlamamızı sağlar.

11.HTTP  

HTTP (Hyper Text Transport Protocol) günümüzde internet ortamı üzerinde Web sayfalarının çeşitli istemcilere iletimi sırasında bir bütünlük sağlanması açısından oluşturulmuş bir standartlar dizisidir. Günümüzde en yaygın olarak bilinen ve kullanılan protokoldür.

12.WEB Sitesi

Bir Web Sitesi, belirli kişi ya da belirli bir grubun kontrolü altında birden fazla Web sayfasının bir araya getirilmesiyle oluşturulur. Genellikle bir Web sitesi iç içe bilgilerle kuşatılmıştır. Sitenin giriş sayfası bir indeks niteliğindedir.  Bu indeks sayfasındaki hypertext linkler kullanılarak diğer sayfalara (sitenin diğer kısımlarına) ya da diğer sitelere geçiş mümkündür.

13.WEB Tasarımı

13.1.PROFESYONEL WEB TASARIMI

            Web, ticaretin, yayıncılığın ve haberleşmenin en pratik yoludur. Bu sebeple başarılı, düzenli ve şematik bir web sitesi veya sayfası dizayn edebilmek önemli bir konu haline geldi.

Bütün bu düzenli şematik görüntülerin altında yatan neden, insan beyninin algılama ve hatırlama kapasitesidir. Psikologlara göre çoğu insanlar, kısa bir zaman diliminde 4 - 7 farklı yoğunlukta bilgileri hatırlayabiliyorlar fakat zaman uzadıkça konuya hakimiyetleri de azalıyor. Şematik görüntülerin hedefleri ise ana başlıklar altında kısa, öz, anlaşılabilir ve tasarım destekli bilgiler vererek insanların belleklerinde belli bir süre de olsa yer edinebilmektir.

            Birçok web sitesi, insanların araştırabileceği küçük bölümlerde referans bilgiler içerirler. Kullanıcılar (okuyucular) uzun ve bitişik belgeleri nadiren bilgisayar ekranından okurlar. Çoğu insanlar özellikle aradığı belgeleri kısa, anlaşılır, referans bilgilerin bulunduğu sayfalardan aramayı ve aradıklarını bulduktan sonra uzun içerikli bilgileri yazıcıda bastırmayı tercih ederler. Küçük bölümler halinde anlatılmış belgeler, anlaşılabilir organizasyon şeması oluşturmak açısından önemlidir ve ayrıca web sitenizde hypertext bağlantılar kurmaya yardımcı olurlar.

            Kısa, şekilsel - organize belgeler bölümleri kullanıcıları sayfaya daha fazla çeker. Çünkü:

        

Çok az web kullanıcıları, ekranda uzun belgeleri okuyarak zaman kaybederler. Çoğu kullanıcılar uzun belgeleri sabit disklerine kaydederler veya kâğıttan okumak amacıyla yazıcıya bastırırlar.

      Belgeleri bölümlere ayırmak, onları web bağlantıları ile birbirine bağlamak açısından yaralıdır. Belli konularda ilgili bilgiler elde etmek isteyen kullanıcılar için, bağlantılar, belgelerin ayıklanması ve aradıklarını kolay bulma açısından önemlidir. Fakat belgeler gereğinden fazla bölümlere ayrılmamalıdır. Aksi halde okuyucuların beklentileri boşa çıkartılır. Bölümlerin web üzerinde 1 - 3 sayfa kadar olmaları mantıklıdır. Sadece küçük bir paragraf içeren bağlantılar çoğu koşullarda çirkin görünecektir.

   Bilgilerin sunumunda ve organize edilmesinde hazırlanan belirli bir format, şekilsel açıdan önemli olmasının yanı sıra kullanıcıların sitenizdeki geçmiş deneyimini, gelecekteki aramalar ve araştırmalarına uygulamalarında yardımcı olur.

 

Sayfanızda ilk olarak öncelikli bilgileri sunarsanız, en önemliden veya en genel başlıklardan daha ilgili veya daha ayrıntılı bilgilere doğru bir hiyerarşik düzen kurabilirsiniz. Web’ de hiyerarşik organizasyonlar gereklidir. Çünkü çoğu ana sayfa ve bağlantı şemaları hiyerarşik bir düzene sahiptirler. Aşağıdaki sayfada da görüldüğü gibi ana sayfayı alt sayfalar ve içeriksel sayfalar izler

 

 

13.2.Sayfalar Arası İlişkiler

Mantıklı bir site organizasyonu, kullanıcıların aradıklarını nerede bulabilecekleri hakkında doğru yönlendirmeler yapar. Eğer ilişkiler mantıklı yapılar halinde kurmazsanız sayfa, okuyucunun aklını karıştırmaktan başka işe yaramaz 

 

Yapıyı oluşturduktan sonra istatistikleri ve organizasyon şemasının pratikliği ve ne kadar hızlı ve verimli çalıştığı analiz edilmelidir. Geçerli www site tasarımı geniş olarak yapının dengelenmesi ve menü ilişkileri veya ana sayfa ve ara sayfalar, diğer bağlantılı sayfalar, grafikler ve belgelerin sonucudur.

Amaç kullanıcıya doğal gelen menü ve sayfa hiyerarşisi oluşturabilmektir. Birkaç örnek verirsek:

 

13.2.1.Çok geniş:Esas menü, birbirleriyle ilgisiz çok yayılmış, tekdüze bir yapı gösteriyor.

 

13.2.2.Çok derin:

13.2.3.İyi dengelenmiş:

 

İyi dengelenmiş hiyerarşik bir ağaç yapısı oluşturmada amaç, okuyucunun sayfa yapısını kolay idrak edebilmesini ve sayfalar arasında kaybolmamasını sağlamaktır. Eğer menülerimiz 4 - 5 bağlantıdan az bağlantı içeriyorsa değerlerini kaybederler.

Web sayfalarının düzenli ve tutarlı bir sistemle hazırlanmasındaki amaç, hedef kitlenin kısa sürede sayfa düzenine adapte olarak aradıkları bilgiye kolayca erişmelerini sağlamaktır.

Web sayfasına iyi bir örnek aşağıda verilmiştir. Bu örnekte; sayfanın alt ve üst kısmında görüntü haritaları kullanılmıştır.

Sayfanın hangi siteye ait olduğu, belgelerin içeriği, konu başlıkları gibi temel bilgiler burada sabit bir düzen içinde verilerek aynı zamanda "ileri" "geri" düğmeleri eklenerek bir önceki ve bir sonraki sayfaya geçiş kolaylığı sağlanmıştır.

Sayfanın sol yanında ayrılan bölüm ana sayfaya ve konunun alt başlıklarına bağlantı için kullanılmıştır. Okuyuculara sunulan bilgi bu sınırlandırma içinde, düzgün ve orantılı başlıklar altında metin ve grafik olarak gösterilmiştir. Belgelerin bütün sayfaları bu standart formata uygun halde hazırlanmıştır. Böylece, kullanıcılar ilk sayfayı inceledikten sonra diğer sayfalarda aradıkları bilgilerin nerede olduğunu tahmin edebileceklerdir

 

14.Bir Sayfa Hazırlanırken Dikkat Edilecekler

14.1.Sayfa Hazırlarken Dikkat Edilecek Noktalar

  • Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kaydedilirken  asla Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz.

  • Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz bir dizin ve bu dizin içerisinde resimleri ya da animasyonlarınızı kaydedeceğiniz bir alt dizin oluşturunuz. Sunucu bilgisayarına bu bilgiler atılırken (upload)  aynı dizinleri bu alanda oluşturmak gerektiği asla unutulmamalıdır.

  • WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html olarak adlandırınız.Birçok WEB sunucu için varsayılan sayfa index.html'dir. Bazı sunucular da varsayılan sayfanın default.html olarak adlandırılmasını ister. 

 14.2.Görsel Tasarım

Günümüzde içeriği tayin ederken sayfamızın amacı uzun uzun bilgi vermekse, “Nasıl olsa kimse okumuyor!” diye bu bilgileri kırpmak, gerçekten o bilgiye ihtiyacı olan kişilere haksızlık olur. Sayfamızın bir hareket noktası, bir geçiş noktası olduğunu tahmin ediyorsak, kimseyi fazla oyalamaya, istemediklerini bildiğimiz bilgileri zorla vermeye de hakkımız yoktur.

Yale Tıp Fakültesi’nin, ekrana bakan kişinin göz hareketlerini belirleyen cihazlarla donattığı bilgisayarların başına oturttuğu 12 bin kişiyle yaptığı araştırma bir bilgisayar ekranının görsel taranma çizgisinin, (1) soldan üst köşeden sağ üst köşeye, (2) sağ üst köşeden sağ alt köşeye doğru genel tarama (3) yeniden sol üstten itibaren okuma ve (4) üst orta noktadan aşağı doğru okumayı sürdürme tarzında olduğunu gösteriyor. Buna göre, izleyici WEB sayfasında önce büyük şekil kitlesini ve renkleri görmekte, ön plandaki unsurlarla arka plandaki unsurlar arasındaki kontrastın farkına varmaktadır.  İzleyici ancak daha sonra, varsa grafik unsurların verdiği bilgiyi almakta, üçüncü olarak da okumaya başlamaktadır. Okuma tahmin edilebileceği gibi, en büyük kitleden benzetme yoluyla başlamakta ve daha sonra kelimelere inmektedir. 

Bu belirleme, bize, WEB sayfasının bütünü itibariyle mükemmel bir grafik dengesine sahip olması gerektiğini gösteriyor. Salt metinden ibaret gri bir sayfa itici ve sıkıcı iken, büyük ve geniş grafikler, büyük ve kara lekeler halindeki harfler özellikle içerik arayan daha rafine izleyiciye “içi boş” izlenimini verecektir. Grafik sanatçı, bu noktada sayfanın beklenen  “müşterisi”nin varsayılan ilgi odağını, grafikle metni dengeleyerek bulmak zorundadır.

Bu dengede oran ve uygunluk, sadece sayfanın hedef kitlesi ya da başka bir deyişle sayfanın içeriği dikkate alınarak bulunabilir.

Yazıyı soldan sağa doğru okumaya alışmış toplumlarda, görsel dikkatin ekranda da soldan sağa doğru gitmesi doğaldır. Bu nedenle WEB sayfalarında da ekranın üst yarısı, görsel odak noktası olmalıdır. Bu alanın mümkün olduğu kadar yumuşak, pastel renklerle doldurulması; sert, aşırı yoğun çarpıcı renklerden kaçınılması gerekir. Bu tür renkler ancak çok fazla dikkat çekmek istediğimiz, bir ya da iki unsur için saklanmalıdır. Yazılar mutlaka arkalarındaki zeminle çarpıcı bir kontrast oluşturmalıdır. Dramatik ve karmaşık grafikler, mutlaka grafik sanatçıları tarafından yapılmalıdır. 

Metinleri daha belirgin hale getirecek noktalar, kutular, yatay ve dikey çizgiler, çoğu zaman görsel bütünlük sağlamak yerine sayfanın tümüne yama hissi verir.  

Bütün görsel tasarımlarda olduğu gibi, WEB sayfası tasarımında da tutarlılık şarttır.  Grafik unsurlarla “stil” oluşturmaya kalkmak, grafikçilerin işidir. Bir WEB alanının başından sonuna tutarlı bir şekilde izlenen grafik uygulama, sonunda izleyicide WEB alanının sahibi kurum hakkında bir yorum uyandırır. Bu nedenle sırf süsleme amacıyla, sayfaların orasına burasına çizgi ya da fotoğraf unsurları konulmamalıdır. Özellikle çizgi grafiklerin üç boyutlu görünmesini sağlamak gerektiği inancı, günümüzde hemen hemen bütün WEB tasarımına egemen olmuş ve her grafik unsurun bir tarafına gölgeler yerleştirilmiş bulunuyor. Gölge, bir görsel öğe olarak kullanılacaksa, sayfanın tümünün bir bütün olduğu unutulmamalıdır. Bir unsurun gölgesi sağa aşağı, diğerininki sola yukarı düşemez. Böyle bir uygulama, sayfayı izleyende derinlik duygusundan çok baş dönmesi ve mide bulantısı duygusu verir. 

Ana sayfa izleyicinin bizim WEB alanımıza daldığı noktadır. Bu nedenle sayfada bir davet unsuru olması şarttır. Bu sayfanın az ve öz unsur içermesi de giderek yaygın bir tarz olmaya başladı. Bir gazete veya derginin WEB alanı, yayınladığı organın kapak sayfasına benzeyebilir. Ama bir üretim firması, ana sayfasında hiç değilse belli başlı mal gruplarının bağlantıları olmalıdır. 

Çoğu internet’e modemle bağlanan izleyiciler için, küçük grafiklerin geniş alanlar işgal etmesini sağlayan, başlıklardan ve beyaz alanlardan yararlanan, buna karşılık görsel etkisi son derece yüksek sayfalar yapılması mümkündür.

Örnek site tasarımları gösterilecek…..

 

 

 

 

 

 

Yorum ekle

Konuyla İlgili Yazılar

HTML Etiketleri 1

HTML Komut Yapısı HTML diğer programlama dillerinden farklı olarak sadece görsel düzenleme için kullanılmaktadır. HTML herhangi bir text editörle (Notepad, Word,... devamı...

CSS Giriş

HTML Etiketleri 4

HTML Etiketleri 2

HTML Etiketleri 3