Bu çalışma materyali, sağlanan ders notları ve sesli ders transkripti kaynaklarından derlenmiştir.

---

Web Teknolojilerine Giriş ve Temel Tasarım İlkeleri 🌐

Bu çalışma materyali, günümüzün dijital dünyasının temelini oluşturan web teknolojilerini, internetin işleyişini, web sitesi türlerini, etkili web sitesi planlama ve tasarım prensiplerini, HTML'nin temel yapı taşlarını ve web geliştirme araçlarını kapsamaktadır. Amacımız, web dünyasına kapsamlı bir giriş yaparak temel kavramları ve pratik uygulamaları anlaşılır bir dille sunmaktır.

1. İnternet ve Web'in Temelleri 🌍

Günümüzde milyonlarca insan internete erişim sağlamakta ve bilgi arama, iletişim kurma ve eğlenme amacıyla milyarlarca web sitesini ziyaret etmektedir. Kurum ve kuruluşlar da ürün ve hizmetlerini sunmak için interneti aktif olarak kullanmaktadır.

1.1. İnternet Nedir? 📚

İnternet, 1960'larda ARPANET ile başlayan, dünya çapında birbirine bağlı bilgisayar ağları topluluğudur. Modemler, telefon hatları, fiber optik bağlantılar gibi çeşitli iletişim ortamları üzerinden bilgi alışverişi sağlar.

• Düğüm (Node): Bilgi paylaşmak için birbirine bağlı iki veya daha fazla bilgisayardan oluşan ağa bağlı bilgisayar, tablet veya akıllı telefon gibi herhangi bir cihazdır. İnternet, milyonlarca ağ üzerinde milyarlarca düğüme sahiptir.
• Nesnelerin İnterneti (IoT): Televizyonlar ve ev aletleri de dahil olmak üzere bir ağa bağlanan ve sayıları sürekli artan cihazları tanımlamak için kullanılan bir terimdir.
• İnternet Servis Sağlayıcıları (ISP): İnternet omurgasına kalıcı bağlantısı olan ve kişisel/iş bilgisayarı kullanıcılarının internete erişimini sağlayan şirketlerdir.

1.2. World Wide Web (Web) Nedir? 🌐

Birçok kişi "İnternet" ve "World Wide Web" terimlerini birbirinin yerine kullanır; ancak bu terimlerin anlamları birbirinden farklıdır.

• İnternet: Altyapıyı veya bilgisayarların fiziksel ağlarını ifade eder.
• Web: Web sunucularında depolanan bilgilere erişim sağlayan hizmettir. Web, web sayfaları veya kısaca sayfalar olarak bilinen bağlantılı dosyalardan oluşur. Metin, grafik, ses ve videoyu destekler.
• Web Sitesi: Bir kişi, kurum veya kuruluş tarafından oluşturulan ve sürdürülen ilgili web sayfaları bütünüdür. Her web sitesi, kullanıcıların siteye eriştiklerinde gördükleri ilk alan olan bir ana sayfa içerir.
• Hiperlinkler (Köprüler/Bağlantılar): Bir web sayfasını aynı sunucudaki başka bir web sayfasına veya dünyadaki herhangi bir web sunucusuna bağlayan ögelerdir. Bilgilerin doğrusal olmayan bir şekilde görüntülenmesini sağlar.

2. İletişim Kuralları (Protokoller) 🤝

Bilgisayarların birbiriyle iletişim kurmasını sağlayan kurallar bütününe protokol denir.

• Hiper Metin Transfer Protokolü (HTTP): Web sayfalarını değiş tokuş etmek ve aktarmak için kullanılan temel protokoldür. Metin, grafik, ses, video ve diğer multimedya dosyalarının değiş tokuşu için bir dizi kuraldır.
• Dosya Aktarım Protokolü (FTP): İnternet üzerinde (web ortamı değil) bir bilgisayardan diğerine dosya alışverişi yapmak için kullanılır.
• İletim Kontrol Protokolü/İnternet Protokolü (TCP/IP): Verileri hedefine doğru ve verimli bir şekilde aktarmak için kullanılan bir çift protokoldür.
  • TCP: Veri kaynağı ile hedef arasındaki ağ bağlantısını denetler ve verileri paketlere ayırır.
  • IP: Verilerin doğru konuma gönderilmesini sağlar. Her bilgisayarın benzersiz bir IP adresi vardır (örn: 192.158.1.38).
• Alan Adı Sistemi (DNS): IP adreslerini hatırlamayı kolaylaştırmak için bir IP adresini bir etki alanı adıyla (örn: Google.com) ilişkilendirir.

3. Web Tarayıcıları ve URL 🖥️

Web tarayıcıları, web sayfalarını görüntüleyebilmek ve bireylerin onlarla etkileşim kurabilmesi için bunları yorumlayan ve görüntüleyen programlardır.

• Popüler Tarayıcılar: Microsoft Edge, Mozilla Firefox, Google Chrome, Apple Safari ve Opera.
• Tarayıcı Uyumluluğu: Çoğu tarayıcı web sayfalarını aynı şekilde görüntülemez. Web sitesi tasarlanırken, farklı tarayıcılarda doğru çalıştığından emin olmak için test edilmelidir.
• Tekdüzen Kaynak Bulucu (URL): Bir belgenin veya internetten erişilebilen başka bir dosyanın adresidir (örn: https://www.yahoo.com). Tarayıcının adres çubuğuna yazılır.
  • https://: İletişim protokolü.
  • www: Alt alan adı (gerekli değildir).
  • yahoo.com: Etki alanı (domain). .com ticari işletmeyi gösterir.

4. Web Sitesi Türleri 📊

Web siteleri, farklı amaç ve hedef kitlelere hizmet etmek üzere çeşitli türlerde tasarlanır:

• Genel İnternet Siteleri: İnternet bağlantısı olan herkes tarafından kullanılabilen siteler.
• İntranetler: Şirket içi bilgileri çalışanlar arasında paylaşmak için kullanılan özel ağlardır.
• Extranetler: İş bilgilerini belirli kurumsal ortaklar veya önemli müşterilerle paylaşmak için kullanılan özel ağlardır.
• E-ticaret Siteleri: Ürün ve hizmetlerin çevrimiçi alım satımını (e-ticaret) destekler (örn: Koçtaş).
• Eğitim Siteleri (LMS): Okullar ve üniversiteler tarafından bilgi sunmak ve çevrimiçi dersler için kullanılır. Öğrenme Yönetim Sistemleri (LMS) bu sitelerin önemli bir parçasıdır.
• Kişisel Siteler: Bireylerin aileleri ve arkadaşlarıyla bilgi paylaşmak için oluşturduğu sitelerdir.
• Sosyal Medya Siteleri: Kullanıcıların bilgi, resim, video ve işle ilgili becerileri paylaşmaya teşvik ettiği platformlardır (örn: Facebook, Twitter).
• Arama Motorları: Konuları araştırmak için kullanılır (örn: Google, Yandex).
• Haber Siteleri: Güncel olaylar hakkında bilgi sağlar.
• Bloglar: Tek bir kişi veya küçük bir grup tarafından, yazarın belirli bir konudaki bakış açısını yansıtan içeriklerin paylaşıldığı sitelerdir.

5. Etkili Web Sitesi Planlaması ve Tasarımı 💡

Çekici, kullanışlı ve iyi organize edilmiş bir web sitesi tesadüfen oluşturulmaz. Başarılı bir web sitesi oluşturmak, sağlam bir stratejik planla başlar.

5.1. Genel Prensipler ✅

• Hızlı Yükleme: Ziyaretçilerin siteyi terk etmemesi için web sitesi hızlı yüklenmelidir.
• Çekici Tasarım ve Renk Düzeni: Kullanıcı deneyimini geliştirir ve bilgileri okumayı kolaylaştırır.
• Net Navigasyon Sistemi: Kullanıcıların aradıkları ürünleri, hizmetleri veya bilgileri hızlı bir şekilde bulmasına yardımcı olur.

5.2. Web Sitesinin Amacı 🎯

Web sitesinin amacı, ürün veya hizmet satma, marka bilinirliği oluşturma, eğitim verme gibi hedeflerle ilgilidir. Her amaç, farklı türde bir web sitesi ve tasarım gerektirir. Bir işletmenin misyon beyanı, web sitesi planının temelini oluşturur.

5.3. Hedef Kitle 👥

Web sitesini kullanacak kişilerin (hedef kitle) yaş, cinsiyet, genel demografik bilgiler ve bilgisayar okuryazarlık düzeyi gibi özellikleri bilinmelidir. Bu, onlara uygun bir web sitesi tasarlanmasına yardımcı olur. Hedef kitlenin aradığı bilgileri bilmek, siteyi bu bilgilere odaklanacak şekilde tasarlayabilmek anlamına gelir.

5.4. Çoklu Platform Görüntüsü (Duyarlı Tasarım) 📱💻

Günümüzde kullanıcılar masaüstü bilgisayarlardan akıllı telefonlara kadar değişen cihazlarla web sitelerine erişmektedir.

• Duyarlı Tasarım (Responsive Design): Çeşitli cihazlarda en iyi görüntüleme deneyimini sağlayan tek bir web sitesi oluşturmanıza olanak tanır. Web sitesi, ziyaretçinin cihazındaki ekran boyutuna yanıt verir ve uyum sağlar. Bu, mobil cihaz kullanımının artmasıyla kritik hale gelmiştir.

5.5. Web Sitesi Şablonu ve Tel Kafes (Wireframe) 📝

Web tasarımcıları, bir web sitesi için ilk web sayfasını oluşturmaya başlamadan önce bir Web Sitesi Şablonu kullanarak tasarımın taslağını çizerler.

• Tel Kafes: Gezinme alanı, kuruluş logosu, içerik alanları ve resimler gibi ana web sayfası ögelerinin konumunu açıkça tanımlayan basit, görsel bir kılavuzdur.
• Beyaz Alan: Okunabilirliği artırmak ve web sayfasındaki alanlar arasında net bir ayrım yapmak için tasarıma bol miktarda beyaz alan eklenmelidir.
  • Aktif Beyaz Boşluk: Sayfada kasıtlı olarak boş bırakılan bir alandır, asimetrik bir sayfanın tasarımını dengelemeye yardımcı olur.
  • Pasif Beyaz Boşluk: İçerik alanları arasındaki boşluktur, kullanıcının sayfanın bir bölümüne odaklanmasına yardımcı olur.

5.6. Site Haritası 🗺️

Site haritası, bir web sitesindeki tüm sayfaları listeleyen veya görüntüleyen ve bunların birbirleriyle nasıl ilişkili olduğunu gösteren bir planlama aracıdır. Bir web sitesinin yapısını gösterir.

• Yapı Türleri: Doğrusal, hiyerarşik ve ağ biçiminde olabilir. Çoğu web sitesi bu yapıların bir kombinasyonunu kullanır.

5.7. Grafikler 🖼️

Grafikler, bir web sayfasına görsel çekicilik katar ve ziyaretçinin ürün ve hizmetler hakkındaki algısını geliştirir. Markayı, ürünleri ve hizmetleri ileten uygun grafiklerin kullanıldığından emin olunmalıdır.

5.8. Navigasyon 🧭

Her web sayfasının, sitedeki diğer sayfalara bağlantılar içeren belirlenmiş bir gezinme alanı olmalıdır. Gezinme alanı belirgin ve kullanımı kolay olmalıdır. Bir arama kutusu eklemek, kullanıcıların istedikleri ögeyi bulmaları için başka bir yol sağlar.

5.9. Tipografi (Yazı Tipi) ✒️

Etkili tipografi veya yazı tipleri ve yazı tipi stillerinin kullanılması, bir web sitesinin görsel çekiciliğini artırır.

• Okunabilirlik: Metin her şeyden önce okunabilir olmalıdır.
• Marka Yansıtma: Tipografi, web sitesinin amacını ve hedefini tanıtmalıdır. Örneğin, bir düğün fotoğrafçılığı sitesi zarif ve tuhaf bir tipografi kullanabilir.

5.10. Renk 🌈

Tüm web siteleri renk kullanır. Amaç ve markayı tanıtmaya yardımcı olan sınırlı sayıda uyumlu renk seçilmelidir.

• Renk Şeması: Renklerin kombinasyonu, web sitesinin çekiciliğine ve okunabilirliğine katkıda bulunur.
• Kontrast: Yazı tipi ve arka plan renkleri, okunabilirlik için yüksek renk kontrastı sağlamalıdır (örn: açık arka plan üzerinde koyu metin). Gözleri rahatsız eden renk kombinasyonlarından kaçınılmalıdır.
• Marka Güçlendirme: Renkler markayı güçlendirmelidir (örn: Getir'in sarı ve mavi renkleri).
• Renklerin Anlamları: Renkler belirli anlamlar taşır (örn: mavi güven, yeşil tazelik).

5.11. Erişilebilirlik ♿

Web tasarımcıları, fiziksel engelli kişiler ve uluslararası kullanıcılar da dahil olmak üzere farklı bir kitle tarafından görüntülenecek sayfalar oluşturmalıdır.

• Alternatif Metin: Her grafik için alternatif metin eklenmelidir, böylece görme engelli kişiler ekran okuma yazılımı kullanabilir.
• Uluslararası Kullanıcılar: Dünya çapında anlaşılabilecek genel simgeler kullanılmalı, içerikte argo ifadelerden kaçınılmalı ve düşük hızlı bağlantılar üzerinden hızla yüklenen basit sayfalar oluşturulmalıdır.
• W3C (World Wide Web Konsorsiyumu): Web standartları, dil özellikleri ve erişilebilirlik önerileri geliştirmekte ve sürdürmektedir.

6. HTML'nin Temelleri ve İlgili Teknolojiler 💻

6.1. HTML Nedir? 📚

HTML (Hiper Metin Biçimlendirme Dili), web sayfaları için belgeler oluşturmak için kullanılan bir yazma dilidir. Bir web sayfasındaki içeriğin yapısını ve düzenini tanımlamak için etiket adı verilen bir dizi özel talimattan oluşur. HTML, geleneksel bir programlama dili yerine bir biçimlendirme dili olarak kabul edilir. En yeni sürümü HTML5'tir.

6.2. HTML Ögeleri ve Nitelikleri ✅

• HTML Ögesi: Başlangıç etiketinden bitiş etiketine kadar her şeyi (içerik dahil) içerir ve bir web sayfasının paragraf veya başlık gibi ayrı bir bölümünü temsil eder (örn: <title>Web Sayfası Örneği</title>).
• Etiketler:
  • Başlangıç Etiketi: <p> gibi.
  • Bitiş Etiketi: </p> gibi.
  • İçerik: Başlangıç ve bitiş etiketleri arasına eklenir.
  • Eşleştirilmiş Etiketler: Başlangıç ve bitiş etiketi olan ögelerdir.
  • Boş Etiketler (Geçersiz Etiketler): İçerik geçersizdir ve yalnızca bir başlangıç etiketi vardır (örn: <br> satır sonu, <hr> yatay çizgi).
• Nitelikler: Ögenin ek özelliklerini veya özelliklerini tanımlar. Ögenin başlangıç etiketine dahil edilir (örn: <img width="300px" height="200px" alt="resim">).

6.3. HTML ile İlgili Teknolojiler 🔗

• XML (Genişletilebilir İşaretleme Dili): Veri alışverişi ve aktarımı için kullanılır. HTML ile çalışabilirliği sağlar.
• XHTML (Genişletilebilir Büyütülmüş Metin İşaretleme Dili): XML kullanılarak HTML'nin yeniden yazılmış bir sürümüdür. Mobil cihaz platformlarında daha geniş çapta kabul görmüştür.
• DHTML (Dinamik Hiper Metin Biçimlendirme Dili): Etkileşimli ve dinamik web sayfası içeriği oluşturmak için HTML, CSS ve JavaScript gibi web teknolojilerinin bir kombinasyonunu ifade eder.

6.4. HTML5 Yenilikleri 🚀

HTML5, bir web sayfasının alanlarını daha iyi tanımlamak için <header>, <nav>, <main> ve <footer> gibi birkaç yeni öge sunar. Bunlar yapısal ögeler veya semantik HTML ögeleri olarak sınıflandırılır, çünkü etiketlerin içeriği hakkında anlam sağlarlar. Ayrıca <audio> ve <video> etiketleri kullanılarak ses ve video entegrasyonunu kolaylaştırır.

7. Diğer Web Programlama Dilleri 🛠️

Web geliştiricileri, HTML'ye ek olarak etkileşim ve işlevsellik eklemek için diğer web programlama dillerini kullanır.

• JavaScript: Bir web tarayıcısında etkileşim oluşturmak için kullanılan popüler bir betik dilidir (örn: açılır pencereler, form doğrulaması). İstemci tarafı bir betik dilidir.
• jQuery: Bir web sayfasına kolay entegrasyon için tasarlanmış bir JavaScript programları kitaplığıdır.
• PHP (Hiper Metin Ön İşlemcisi): Genellikle merkezi bir sunucuda bulunan bir veritabanına yazma veya sorgulama gibi genel görevler gerçekleştirmek için kullanılan açık kaynaklı bir betik dilidir. Sunucu tarafı bir betik dilidir.
• ASP (Etkin Sunucu Sayfaları): PHP ile aynı sunucu tarafı işleme görevlerinin birçoğunu gerçekleştirmek için kullanılan Microsoft'un sunucu tarafı bir komut dosyası oluşturma teknolojisidir.

8. Web Sayfası Yazma Araçları ✍️

Web sayfaları oluşturmak için çeşitli araçlar mevcuttur:

• Metin Düzenleyiciler: Basit metin düzenleyicilerle HTML kodları kullanarak web sayfaları oluşturmaya olanak sağlayan yazılımlardır (örn: Notepad, Notepad++, Sublime, TextEdit).
• HTML Düzenleyiciler (Kod Düzenleyiciler): Temel metin düzenleme işlevlerinin yanı sıra çeşitli HTML etiketleri için renk kodlaması, HTML etiketleri eklemek için menüler ve yazım denetimi gibi daha gelişmiş özellikler sağlar.
• WYSIWYG Düzenleyiciler (What You See Is What You Get - Ne Görürsen Onu Alırsın): Kod yazmak için kullanılan bir metin düzenleyicide sağlanan boş sayfanın aksine, bir web sayfası tasarlamak için grafiksel bir kullanıcı arabirimi sağlar (örn: Adobe Dreamweaver, Microsoft Expression Web). Bu editörler, HTML ögelerinin sayfaya sürüklenmesine olanak tanır.
• Diğer Yazılımlar: Microsoft Word ve Excel gibi programlar, belgeyi HTML dosyasına dönüştüren "Web Sayfası Olarak Kaydet" seçeneği sunar. Adobe Acrobat da HTML dosyaları oluşturan bir dışa aktarma özelliğine sahiptir.

---

Sonuç: Web tasarımı, internetin temel yapısından başlayarak, web sitelerinin planlanması, geliştirilmesi ve farklı platformlarda erişilebilirliğinin sağlanması gibi çok yönlü bir süreci kapsar. Etkili bir web sitesi, kullanıcı odaklı planlama, doğru araçların seçimi ve HTML, CSS, JavaScript gibi çeşitli teknolojilerin entegrasyonu ile oluşturulur. Web teknolojilerinin sürekli gelişimi, kullanıcı deneyimini iyileştirmeye yönelik yenilikçi yaklaşımları beraberinde getirmektedir.