Tekrar hoş geldiniz.
İlk web sitemizi oluşturalım.
Şimdi Web Sunucusu adında bir klasör oluşturdum çünkü bu şimdilik bizim web sunucumuz olacak.
Ve bu web sunucusunun içinde bir HTML dosyası oluşturmak için uzantı olacak bir dizin HTML dosyamız
var.
Python yazmak için py'ye sahip olduğumuz gibi JavaScript yazmak için uzantı olan script JS'ye sahibiz ve ardından
CSS stilleri yazmak için style CSS'ye sahibiz.
Şimdi bu bölümde sublime text ve AI terim terminalimi kullanacağım, ancak siz istediğiniz geliştirici aracını
kullanabilirsiniz.
Bunları sadece ekran kayıtları için kullanmayı seviyorum.
Yardım ediyorlar çünkü güzel ve temiz.
Bana çok fazla ipucu vermiyor, böylece ben de hata yapabiliyorum ve hata yaptıkça nasıl düzelttiğimi size gösterebiliyorum.
Ancak yine de, tercih ettiğiniz Visual Studio kodunu kullanabilirsiniz.
Şimdi burada tüm bu dosyaların boş olduğunu görüyorsunuz.
Ancak unutmayın, bir web sunucusu bu üç dosyayı tarayıcıya verir, böylece tarayıcı sayfayı görüntüleyebilir.
Öyleyse HTML ile başlayalım.
HTML'i nasıl yazıyoruz?
Aslında Sublime text, HTML yazıp tab tuşuna basarsam burada ilginç bir şey yapmama izin veriyor.
Benim için otomatik dolduruyor.
Pekala, pekala.
Biraz hile yapıyorum ama sizi sıkmak istemem.
Yani bu standart bir HTML dosyası çünkü nokta html uzantısına sahibim.
Bu tür bir sözdizimine sahipsem HTML yazabilirim ve bu o kadar da zor değil.
Burada bir ters eğik çizgi ile açılış ve kapanış etiketlerimiz var.
Yani web sitesinin başında bir başlık var.
Sekmede görünen şey budur.
Diyelim ki benim.
Web sitesi.
Çok yaratıcı.
Yani bu baş ve sonra gövde.
Bu, bir web sitesinde görüntülenen şeydir.
Yani burada bir web ustası olduğumu söyleyebilirim.
Aynen böyle.
Ve HTML dosyamızı oluşturduk.
Şimdi şuna bir bak.
Şimdi dizini açarsam. html, buraya sağ tıklayıp pencerenizde açın diyelim ya da gidip bu dosyaya
çift tıklayabilirsiniz.
Yani buna çift tıklarsam, şuna bakın.
Ben bir web yöneticisiyim.
Sadece basit bir metin.
Çok çılgınca bir şey değil.
Ama ilk web sitemi yeni oluşturdum.
CSIS ile devam edelim.
CSS, html css sözdiziminden farklı bir sözdizimine sahiptir.
Şöyle bir şey yap.
Hangi html öğesine stil eklemek istediğimizi verebiliriz.
Bizim durumumuzda, vücut diyelim.
Ve vücut diyebilirim.
Sonra küme parantezleri.
Ve burada arka plan olmasını istiyorum, renk diyelim ve onunla devam edelim.
Hmm.
Green ile devam edelim.
Eğer bunu kaydedersem.
Ve sayfayı yeniledim.
Hmm.
Hiçbir şey olmadı.
Bu da yine küçük bir ayrıntı, bu bir web geliştirme kursu değil, bu yüzden çok fazla endişelenmemize
gerek yok.
Ancak esasen gerçekleşen ilk şey HTML dosyasının gönderilmesidir ve HTML dosyası aslında
tarayıcı tarafından okunan tek şeydir.
Yani HTML dosyası içinde, hey, HTML demem gerekiyor.
Bu arada, bir CSS dosyamız da var.
Bunu web sitesinde de kullanabilir misiniz?
Yani bunu head etiketinde yapabilir miyiz?
Bağlantı etiketi adı verilen bir şey kullanarak.
Yani bir bağlantı etiketi.
Aslında bunun bir kısmını kaldırabiliriz.
Basitçe şunu söylemeliyiz, hey, bu bir metin CSS türüdür ve H ref diye bir şeye sahiptir.
H ref basitçe diyor ki, Hey, bu dosya nerede?
Bizim durumumuzda, dizinlenmiş HTML ile aynı klasörde olduğu için, basitçe style dot CSS olduğunu söyleyebiliriz
çünkü Solidot CSS'yi arayın ve stil dosyası orada.
Ve şimdi, hatırlarsanız, eklememiz gereken ilişki stil sayfamız da vardı.
Burada ne yazdığımızı görebilmemiz için kaldırdım.
Yani stil sayfası yaparsak ve bu sadece bir şeyse, bir CSS dosyası eklemek istiyorsanız alışmanız
gereken bir sözdizimidir.
Bunu kaydedersem ve geri dönüp yenilersem.
Hey, şuna bak.
Benim çirkin web sitem.
Biraz daha büyütelim.
Yeşil arka plan rengine sahip çirkin web sitem artık biraz stil sahibi.
Geliştirici araçlarını bir kez daha açarsam.
Ve yenile tuşuna bastım.
Şuna bak.
Bir HTML dosyası ve bir CSS dosyası alıyorum.
Harika.
Ben de kendi web sunucumu oluşturdum.
Doğru.
Buraya JavaScript bile yazabiliriz.
Ancak yine de, bu bir JavaScript kursu değil, bu nedenle bu durumda endişelenmemize gerek yok.
Al bakalım.
Biraz JavaScript yazdım, bu bir nevi Python'da print yazmak gibi bir şey.
Sayfayı bir kez daha yenilediğimde.
Yine, JavaScript dosyası görüntülenmez çünkü dizin HTML'ye bir JavaScript dosyasına ihtiyacımız olduğunu
tekrar söylememiz gerekir ve genellikle JavaScript dosyaları bir script etiketinde, genellikle gövdenin altında
bulunur.
Bu konuyu kapatalım.
Ve sonra burada, ref kullanmak yerine, kaynak için CRC dememiz gerekiyor.
Ve sonra bir kez daha, JavaScript dosyası nerede?
Kod JS'de. Bunu kaydedip sayfayı yenilediğimde.
Şuna bak.
Şimdi JJ'nin dosyasını yüklüyoruz ve tek yaptığı konsol sekmesine tıkladığımızda konsola bir
şey yazdırması ve konsolun JavaScript'in kullandığı bir şey olması.
Ancak bizim için önemli olan tek şey bu üç dosyaya hizmet verebilmektir.
Yaptığımız şey ilk sunucumuzu oluşturmak oldu.
Ama bir şey fark etmiş olabilirsiniz.
Sen buraya çıktığında.
Elimizdeki URL yoluna bakın.
Bir web sitesine genellikle böyle şeyler yazmazsınız, değil mi?
Yani buradaki xkcd nokta com web sitesinin nokta com'un http kullandığını gördük.
Bu gerçek bir URL, değil mi?
Aslında gerçek bir web sunucusu oluşturmadığımızı söylediğim için üzgünüm çünkü tek yaptığımız,
gördüğünüz gibi bilgisayarımızdan bazı dosyaları tarayıcıya sunmak oldu.
Yani tarayıcının yaptığı tek şey, hey, burada bilgisayarınızda bulunan bu dosyaları görüntüleyeceğim
demek.
Yani aslında aynı zamanda bir tarayıcı çalıştıran bir web sunucumuz var, ancak gerçek hayat böyle işlemiyor.
Bu neden olabilir ki?
Peki, kendi web sitenizin olduğunu hayal edin.
Dünyanın her yerinden insanların web sitenize doğrudan bilgisayarınız üzerinden erişmesini ve dosyaları bilgisayarınızdan
almasını gerçekten istiyor musunuz?
Yani, hayır.
Doğru.
Bir sürü güvenlik sorunu var.
Performansla ilgili pek çok sorun var.
İnsanların web sitenize erişebilmesi için dizüstü bilgisayarınızı sürekli açık tutmanız gerekir.
Bunun yerine, adından da anlaşılacağı gibi, dosyalara hizmet eden ve tarayıcılara dosya sunma konusunda uzmanlaşmış bir
web sunucusu istiyoruz.
Dünyada endişelenmeme gerek olmayan bir yerde.
Bilgisayarımda yok.
Birisi bu makinenin sahibi, birisi bu bilgisayarın sahibi ve her zaman açık, böylece ne zaman bir web
sitesine ya da bağlantıya gitsek, her zaman çalışıyor ve bu dosyaları dışarı gönderiyor olacak.
Sonunda Python'a geri döneceğiz çünkü yapmak istediğimiz şey, bu dosyaları makinemizde bulundurmaktan
daha karmaşık bir şey yapmak.
Bunun yerine, Python kullanarak gerçek bir sunucu oluşturmak istiyoruz, böylece insanlar dünyanın herhangi bir yerinden
web sitemize erişebilirler.
Şimdi hâlâ kafanız karışmış olabilir.
Tüm bu süreç size tam olarak mantıklı gelmeyebilir çünkü daha yeni başlıyoruz.
Ama endişelenmeyin, sonunda her şey anlam kazanacak.
Şimdilik tarayıcıyı unutalım ve gerçek bir sunucu oluşturmaya başlayalım, şu ana kadar yaptığımızdan daha karmaşık bir şey, yani sadece bu üç dosyayı
içeren bir klasör ve sadece index'e çift tıklıyoruz.
html.
Bir sonraki videoda görüşürüz.
Güle güle.