• Ana Sayfa
• Web Geliştirici Olun

Web Geliştirme Esasları

Bu yazıda web yazılım geliştirmeyi öğreneceğiz ama çok çok başlangıçtan girmeyi düşündüm. Mesela evren bir toz bulutuydu gibi.. Web geliştirme nasıl yapılır merak ediyorsanız ve azcık bilgisayar kullanma ve internette gezinme tecrübeniz varsa siz de başlayabilirsiniz.

Baştan başlayacağız dedik ama az bir şey de görmeyeceğiz. Eğer yazıyı bitirmek nasip olursa şunları göreceğiz:

• Web geliştirme araçlarının kurulumu
• Klasör yapısının oluşturulması
• HTML kodlama
• CSS stil kodları
• JavaScript kodlama
• JQuery kütüphanesi
• Ajax istekleri
• JSON veri yapıları
• Git repo kullanımı
• Bootstrap CSS kütüphanesi
• Ruby On Rails programlama

Web ve Internet Nedir?

Birçok kişi web ve internet kelimelerinin aynı anlama geldiğini düşünür. Aslında alakalı olmalarına rağmen farklı anlamları vardır. Web (yani World Wide Web) internette gezerken karşımıza çıkan web sayfa ve sitelerinin oluşturduğu yapıdır. Internet ise dünya genelinde bilgisayarların birbirine bağlandığı dev ağ'ın (network) adıdır. Web , internete bağlı bilgisayarların paylaştığı veri oluyor. Tarayıcınız aradığınız web sayfasına ulaşmak için internet'i kullanıyor.

Client - Server Yapısı

Yukarıda basitçe resmedilmiş olarak bilgisayarların internette nasıl birbirine bağlandığı görülüyor. Elinizdeki bilgisayar , cep tel veya tabletler Chrome , Firefox vs tarayıcı programlar yardımıyla internet ağı üzerinden Server adı verilen bilgisayralara bağlanıyor ve bilgi alış verişinde bulunuyor.

Burada bilgiyi talep eden sizin tarafınızdaki bilgisayarlara Client (müşteri) denir. Bilgiyi hazırlayıp size cevap olarak gönderen bilgisayarlara da Server (hizmet veren) denir.

Aslında olayda karmaşık bir yan yok, basit düşünmek lazım. Bir ağ var ve buna bilgisayarlar bağlı. Herkesin ağda bir adresi var. Sizin bilgisayraınızın internet ağında adresini öğrenmek isterseniz Google'a "ip adresim ne" diye arayın ve kolayca öğrenin. Client-Server arasında iletişim de 2 tane fiziksel adresi belli bilgisayarın belirlenen bir protokole göre birbiriyle veri alışverişinde bulunmasından ibaret.

Peki tarayıcı adres kısmına isim yazıyoruz, o nasıl server adresini biliyor? derseniz, o iş için olan DNS (Domain Name Server) server'lar da var internete bağlı. Bilgisayarınızdaki tarayıcı onların adresini ezbere biliyor ve gidip onlara soruyor "www.bilmemne.com.tr" nerede diye. Zaten ilk geliştirenler de internetin bu kadar geniş kitlelerin kullanacağı bir şey olacağını düşünmemiştir, sanmam. Onlar sadece üniversiteler arası yazıları falan paylaşmak üzerine belkide sadece düz yazı verisi kullanan bir yapı hazırladılar.

Tarayıcıdan bir adres girip gitmesini istediğimizde ya da zaten açık olan bir sayfada bir bağlantıyı tıklayıp başka sayfaya geçmesini istediğimizde client olan bizim tarayıcı programımız server'a bir bilgi gönerir. Client tarafından server'a yapılan bu bilgi gönderme işine istek (request) denir. Server bu isteğe göre size sunulacak bilgileri web sayfası kodu hazırlar ve cevap (response) olarak döner. İşte buna client-server iletişimi denir.

http Nedir?

HTTP internette client-server haberleşmesinde kullanılan haberleşme protokolünün adı. HypexText Transfer Protocol cümlesinden üretilmiş. Aslında Hypertext bağlantı (ya da köprü) metni gibi bir anlama geliyor. İşte bu yüzden ben başlangıçta web sisteminin sadece yazıları paylaşmak üzere üretilmiş olduğunu düşündüm.

Web sayfaları bu protokole uygun yapıdaki HTML (Hypertext Markup Language) kodları ile kodlanmıştır. Protokol kelimesi ağ haberleşmesinde uyulması gereken kuralları belirten bir set. Bir ağ üzerinden bağlı bilgisayarların iletişimi için yüzlerce protokol yazılmıştır ama http bunların en yayılmış olanlarından biri ve artık bütün dünya bunu kullanıyor. Bilgisayarların haberleşmesi için TCP ve FTP (dosya transferi için kullanılır) gibi diğer amaçlarla kullanılan yaygın protokoller de vardır.

Http protokolü başlangıcında web tarayıcınız bir istekte bulunarak işlemi başlatır. Server bu isteğe uygun cevabı hazırlar ve cevap olarak gönderir. Bu yüzden http bir request-response client-server protokolü olarak bilinir. Tüm web sayfalarını gezerken böyle küçük küçük istek-cevap işlemleri defalarca yapılarak o koca sayfalar önünüze gelir.

Değişik Tarayıcılar Kurulması

Web tarayıcıları bilgisayarınızdaki internet üzerinden web sitelerini görüntülemek için kullandığınız programlar. Eğer web geliştirici olmayı düşünüyorsanız, yaptığınız şeyleri test etmek için en azından bunların yaygın olan bir kaçını bilgisayarınıza yükleyip yazdığınız kodların sonucunu değişik tarayıcılarda görmeniz gerekir.

En çok kullanılan tarayıcılardan biri Google Chrome . Bu tarayıcı aynı zamanda web geliştiriciler için bir çok yardımcı araç da sağladığı için sisteminize yüklemenizi tavsiye ederim. Ben Opera kullanıyorum, Chrome eklentileri de yüklenebildiği ve hafif olduğu için tercihim. Bir diğer çok kullanılan tarayıcı Mozilla Firefox. Bunlar dışında işletim siteminizle beraber yüklenen Microsoft Edge, Internet Explorer ve Safari de yaygın kullanılır.

API Nedir?

API kelimesi Application Programming Interface kelimeleri baş harflarinden üretilmiş. Web teknolojisi geliştikçe işler karmaşıklaşmaya başladı. Örneğin sosyal ağlar (Facebook, X, Instagram vs) için artık cihazlarda ayrıca uygulamalar yükleniyor. Bunların server ile iletişimlerinde karmaşıklık arttıkça ortaya yeni bir ihtiyaç çıkmış. Server'da bir uygulama var, client'da bir uygulama var, bunların arasında veri taransferini kolaylaştırmak için arayüz denilen kodlar hazırlanmış ve bunlara API adı verilmiş. Kısacası API iki uygulama arasında iletişimi kolaylaştıran kodlar.

Örnek olarak :

Sosyal API'lar:

• Facebook
• X (ex Twitter)
• Google Talk
• Foursquare
• Soundcloud

Görsel API'lar:

• Google Maps
• YouTube
• AccuWeather
• Pinterest
• Flickr

API bir ulak gibi düşünülebilir, bir kişiden aldığı mesajı diğer bir kişiye ulaştırıyor ve onun cevabını geri getiriyor. Bir örnek olarak bir restorana giderseniz, siz müşterisiniz ve isteğiniz mutfaktaki personel tarafından hazırlanıyor. API burada garson olacaktır. Siz menüye bakıp garsondan istekte bulunursunuz. Garson gider isteğinizi mutfağa bildirir. Mutfaktaki personel isteğinizi hazır ettiğinde garson siparişinizi size getirir. Afiyet olsun..

Bilet bulmak üzerine yapılmış bir sitede siz gideceğiniz yeri seçersiniz, API tüm firmaları gezip olası bilet ihtimallerini toplar server'a getirir ve server size bir cevap sayfası hazırlar.

Web Sayfanızı Planlamak

Web sitenizin kodlamasına başlamadan önce bazı fikirleri kafanızda toplamanız lazım. İleride çok karmaşık şeyler yapacağız ancak şimdilik basitten başlarsak daha iyi anlayacağız. Ne kadar gelişirseniz gelişin, bir web sitesine başlarken şunları mümkünse yazarak belirleyin:

• Web siteniz ne hakkında olacak? Evcil hayvanlar, oyunlar, gezi vs.
• Bu konuda hangi bilgileri sunacaksınız. Bir başlık yazın, birkaç paragraf yazın ve sayfanızda olmasını istediğiniz resim ya da videolar gibi medyaları belirleyin.
• Web sayfanızın görüntüsü neye benzeyecek? Arka plan rengi ya da resmi , kullanacağınız yazı fontları, yerleşim vs.

Web Sayfanızı Çizmek

Her ne kadar bilgisayar kullanıyorsak da elinize bir kalem ve kağıt alın, sayfanın neye benzemesini istediğinizin krokisini çizeceksiniz. Bunu en usta yazılımcılar bile yapıyormuş. Ben endüstriyel otomasyon işi yapıyorum ve ekranları tasarlamadan önce , eğer her zaman benzerini yaptığım bir görsel değilse önce mutlaka defterimde karalarım. Bir de mutlaka defter kullanırım, bir kağıda çizersem kesin kaybolur.

Ressam olmaya gerek yok , ilk sayfamız zaten çok basit olacak. Diyelim şöyle bir şey karaladık:

En üstte bir başlık yazısı var. Altında bir resim var. Resime tıklanınca değişecek. Altında birkaç paragraf yazı ve bir numarasız liste ile bazı bilgiler listelenmiş. Sonra içinde başka sayfalara bağlantılar da olan bir paragraf daha. En altta da kullanıcı ismini değiştirmek için bir buton var. Şimdilik sadece bu kadar, yavaş yavaş bunu elde etmeye çalışacağız.

Varlıklarınızın Seçimi

Varlıklarınız (assets) , web sayfanızı oluştururken size lazım olacak bileşenlerdir. Bunlar :

• yazılar : başlıklar, paragraflar, listeler gibi yazıları belirlersiniz
• tema renkleri : kullanacağınız renkleri belirlemek için Google'da "web site colors" aratıp çıkan sitelerden birinden renk beğenebilirsiniz ya da W3Schools renk seçim aracı kullanarak bir renk belirlersiniz ya da beğendiğiniz bir sitede kullanılan renkleri de sayfa kodlarından bulup kullanabilirsiniz. Ayrıca html kodd içinde direk isim vererek kullanabileceğiniz renkler de var. Renk kodu değer olarak hexadecimal sayı olarak ifade edilir, bunu da ilerledikçe göreceğiz.
• resimler : Resimlerinizi seçerken en çok dikkat etmeniz gereken nokta telif hakkı olan bir resim kullanmamanız. Kendi çektiğiniz resimlerde tabi ki telif hakkı olmaz ama internetten bir yerlerden bulduğunuz resimlerde sıkıntı olabilir. Neyseki yine internette sıkıntı olmadan resim indirebileceğiniz www.unsplash.com gibi yerler var. Fakat oradan bile resim edinseniz ya sosyal medyadan resmin sahibine bir teşekkür etmeniz ya da link vererek sahibini bildirmeniz bekleniyor.
• fontlar : Kullanacağınız yazı fontları standart fontlar dışında olacaksa https://fonts.google.com adresinden bir yazı fontu seçip kullanabilirsiniz.

Dosyaların Yerleşimi

Şimdi web sitemizde bulunacak dosyaları birbiri ile uyumlu şekilde nasıl yerleştireceğimizi inceleyelim. Bir web sitesi birçok dosyadan oluşur.

• Yazı içerikler
• Kodlar
• Stil dosyaları
• Medya dosyaları
• vesaire

Web sitenizi tasarlarken bütün dosyaları bir düzene göre yerleştirip birbirlerine kolayca erişebilir olmalarını sağlamak düzeni korumak için önemlidir. Herşeyin tek bir klasör altında toplanması server'a yüklerken de hakimiyet için faydalıdır. Örnek bir yerleşim şöyle :

Herşeyi içine toplamak için "ilk-sayfam" adında bir klasör oluşturduk. Bu sitemizin root klasörü ve server'da yayınlanacak olan dosyaların ikiz kopyası burası olacak. Resimler için images, script kodlar için scripts ve stil dosyalarımızı koymak için stylesheets adında 3 alt klasör ekledik. En son da sitemizin açılış sayfasının kodunu içeren index.html dosyası ekledik. Şimdilik hepsinin içi boş.

index.html özel bir dosya , bir server'da siz sayfa adresi vermeden bir web sitesini açarsanız, server gider root klasördeki index.html dosyasını size cevap olarak gönderir. Bu yüzden sitenize ilk koyacağınız sayfa index.html olmalıdır.

Bir önemli nokta daha. Dosya ve klasör isimlerini verirken arada boşluk kullanmayın. Web sisteminde dosya ve klasör isimlerinde boşluk sıkıntı yapabilir. Ayrıca web geliştiricilikte genel eğilim boşluk yerine kelimeleri "-" (tire işareti) ile ayırmaktır. Ayrıca her ismi küçük harfle verme alışkanlığı edinin çünkü web'te büyük harfle ve küçük harfle yazılan değerler farklı görülür. Hangi harfi büyüktü diye hatırlamaya çalışmayın hepsini küçük harf yapın.

Editör Uygulaması

Sırada kodlarınızı yazarken kullanacağınız bir text editörü uygulama seçmek var. Aslında yazacağımız kodlar düz metin şeklinde olduğu için Windows Notepad uygulaması ile kodlarımızı yazabiliriz. Ancak kod yazmak için özel tasarlanmış uygulamalar hem yazılanı renklendirerek görsel olarak kodun anlaşılmasını kolaylaştırırken size yazım esnasında da yardımcı olacaktır.

En yaygın kullanılan kod editörlerinden bazıları:

• Sublime Text
• Visual Studio Code veya VSCode
• Atom
• Brackets
• Notepad++

Ben editörler içinde yıllardır VSCode kullanıyorum her türlü script programlama dili için eklentileri var. Ayrıca html sayfaları lokal bilgisayarınızda test edebilmeniz için "Live Server" eklentisi çok yardımcı oluyor. Gerçi benzer eklentiler tüm editörlerde var ama ben VSCode editörünü renklendirilmiş kodları bloğuma kopyalarken sağladığı avantajlar yüzünden de çok kullanıyorum. Notepad++ programını da oldukça yoğun kullanırım. Sanırım şu sıralar yazılım geliştiricilerin en popüler editörü VSCode. Bu öğretide ben VSCode ile çalışacağım ancak siz istediğinizi kullanabilirsiniz.

HTML Temelleri

Yavaş yavaş ilk kodumuzu yazmaya doğru geliyoruz. Son öğreneceğimiz şeylerden biri HTML kodunun temelleri. Daha sonra ilk sayfamızın kodunu yazmaya girişebiliriz. Biliyorsunuz root klasöre index.html adında bir dosya koymuşturk. Bu dosyanın içine yazacağımız şey sitemizin ana giriş sayfasının HTML kodu olacak.

HTML Hyper Text Markup Language baş harflerinden oluşan bir kısaltma. Bir web sayfasının yapılanmasını ve içeriğini belirleyen kodlama şeklidir. İçerik başlıklar, paragraflar, resimler, listeler vs. bileşenlerden oluşan ve sayfada duyularımıza hitap eden şeylerdir.

HTML adından anlaşılacağı üzere bir işaretleme dilidir, bir programlama dili değildir. Belli işaretlemeler kullanarak sayfanızın yapısı ve içeriğini belirlerler.

HTML bir dizi elemandan oluşur. Eleman dediğimiz ise web sayfanızın parçalarıdır (ya da bileşenleridir). Elemanlar içeriğin farklı parçalarını sarmalayarak onların davranışı ya da görünümünü düzenlerler. HTML elemanlar web sayfalarının yapı taşlarıdır.

Elemanlar tag adı verilen sınırlayıcılar sayesinde tanımlanır. İçeriğin başında ve sonunda <isim> ve </isim> şeklinde açma ve kapatma parçalarından oluşur.

HTML tag'ler web sayfasında duyularımıza hitap eden içerikleri barındırabilir. Ama web tarayıcımız bize bu tag'leri göstermez, sadece tag ismine göre içeriği şekillendirerek bize gösterir.

HTML Elemanların Anatomisi

Anatomi falan biraz havalı oldu. Bir eleman web sayfasının bir parçasıdır. Bir yazı veya bir resim içerebildiği gibi içi boş bile olabilir. Genellikle bir eleman bir açılış ve bir kapanış tag'ine sahiptir. İçerik barındırmayan elemanlara boş eleman denir ve kapanış tag'leri olamz.

Bir HTML elemanın yapısına bakalım.

Temel HTML eleman yapısının parçaları bunlar. Bu bir paragraf (p) elemanı. Açılış tag'i ve kapanış tag'i var. Elemanın sembol isminin "küçüktür" ve "büyüktür" işaretleri arasına yazarak oluşmuşlar. Kapanış tag'inde eleman adından önce bir de "/" işareti konmuş. Tag açılış ve kapanışı arasına da içerik geliyor, örnekte içerik düz bir metin. İçerik , açılış tag ve kapanış tag hepsi birlikte elemanı oluşturuyorlar.

Bir HTML Dökümanın Temel Yapısı

Editörünüzde index.html dosyasını açın ve yukarıdaki satırları aynen içine yazın. İsterseniz yukarıdan kopyalayabilirsiniz. Renklerle ilgilenmeyin , aslında bu düz bir metin. Notepad ile aynı kod şöyle görünür:

O renklendirmeyi editörünüz yapıyor. HTML elemanlar ve içeriklerinin daha rahat ayrıştırılması için otomatik olarak yazıları renklendiriyor. Text Editör kullanmanın avantajlarından biri bu.

Kodu biraz incelerseniz , daha önce gördüğümüz HTML eleman temel yapısında bir çok eleman görürüz. Şimdi kodu satır satır inceleyelim.

Bu satır aslında bir HTML elemanı değil bu her sayfa kodunun en başında bulunmsı gereken bir direktif. Sayfayı size gösteren tarayıcı uygulamaya bu dökümanın HTML-5 standardı bir web sayfası olduğunu bildiriyor. Tarayıcınız bu yönergeyi gördüğünde sayfanın size sunumunu o standarda göre yapacaktır.

İlk elemanımız diğer bütün elemanları kapsayan <html> elemanı. Gördüğünüz gibi bir açılış ve bir de kapanış tag'i var, kapanış tag'i eleman ismi olan "html" öncesine "/" işareti ekleyerek oluşturulur, söylemiştik. <html> elemanı sayfanın tüm kodunu kapsar (yani sayfanın tüm HTML elemanlarını). Bir diğer tanımlaması da root eleman da derler.

html elemanının içeriği iki parçadan oluşuyor. Bunların ilki, sayfa hakkında yapılandırmaları içeren <head> bölümü. Bu bölümde yer alan elemanlar web sayfanızda kullanıcıların göreceği içeriklere sahip elemanlar değildir. Koda bakınca da göreceğiniz üzere bir HTML elemanı içeriğine diğer HTML elemanlarını alabiliyor. Hatta tüm sayfa kodu böyle, <html> elemanı tüm sayfa elemanlarını kapsıyor, <head> elemanı içeriğinde yapılandırmada kullanılan diğer elemanlar var vs.

<head> elemanı içinde bulunan ilk eleman <meta> elemanı. Bu elemanın kapanış tag'i yoktur ve içeriği de yoktur (yani boş eleman). meta elemanı tarayıcıya bazı yapılandırma bilgileri vermekte kullanılır. Burada kullanılacak karakter setini ayarlamak için kullanılmış. Bunu yapmak için charset adındaki Bağlı Özellik (Attribute) kullanılmış. Bağlı özellikler bulunulan elemana ait özellik değerleridir ve tarayıcıya o elemanın nasıl değerlendirileceği hakkında bilgiler verir. Bağlı özellik yukarıda görüldüğü gibi açılış tag içinde (yani büyüktür işareti konmadan) yerleştirilir. <meta charset="utf-8"> elemanında bağlı özelliğin adı charset ve değeri "utf-8" dir. Gördüğünüz gibi eleman adı olan meta kelimesinden sonra bir boşluk bırakılıp bağlı özellik adı olan charset yazılmış. Sonrasında eşittir işareti ve arkasından tırnak içinde istenen değer girilmiş.

Bağlı özellikler hep bu şekilde <tagAdı özellik1="değer" özellik2="değer2" ...> notasyonunda yazılır. Değerlerin tırnak içinde yazılmasını lütfen unutmayın. Son olarak utf-8 değerine gelelim. utf-8 karakter setinde dünyada konuşulan dillerin çoğunda bulunan karakterler vardır. Türkçe'mizdeki ıİşĞüÖ gibi harflerin de tamamı bu karakter setinde vardır. Bu yüzden Türkçe içerikli web sayfalarınızda bu meta yönergesini eklemeyi unutmayın.

<head> kısmındaki ikinci eleman ise <title> elemanı. Bu elemanın içeriğinde bulunan yazı web sayfanızın etiketinde yer alacak yazıdır. Etiket tarayıcınızın sekmesi üzerinde görünen başlık yazısıdır. Şöyle ki:

Gelelim <html> içindeki ikinci eleman olan <body> elemanına. <body> elemanı içeriğinde bulunanlar sayfamızın kullanıcıya göstereceği elemanlardır. Yani tam anlamıyla body tarayıcı pencenizin içinde kalan alandır. body elemanının açılış ve kapanış tag'leri arasına konan her şey sayfada gördüğümüz şeylerdir. Bunlar yazılar, resimler, videolar, müzikler vs. internette gördüğünüz her türlü içerik.

body içinde ilk elemanımız bir <h1> başlık-heading elemanı. Başlıklar tüm yazılardan bildiğimiz gibi konuları bölümlendirmekte kullandığımız ve paragraflara gör daha büyük puntolarla yazılmış yazılar. HTML elemanlarında <h1> den <h6> ya kadar 6 çeşit başlık türü var. <h1> bunların en büyük olanı , en küçüğü de <h6> elemanı. Sayfanızda en başta bir tane <h1> elemanı olmasına özen gösterin , d,ğer alt başlıkları daha küçük elemanlardan seçin. Çünkü arama motorları sayfanızdaki h1 elemanlarını dikkate alarak arama yapar.

body içinde ikinci eleman <p> elemanı bir paragraf ifade ediyor. Tarayıcınız bu elemanı normal boyutta bir yazı olarak size gösterecektir. Altında ve üstünde bir kısım boşluk bırakılarak paragraflar diğer elemanlardan ayrılır. Şu anda okuduğunuz yazıda da bir çok paragraf elemanı var (belki 100 tanedir).

body içindeki üçüncü ve son elemanımız da resimleri göstermekte kullanılan <img> elemanı. Dikkat ederseniz <img> elemanının da kapanış tag'i yok, yani boş eleman. Çünkü bir resmi yazılardan oluşan bir içerikle ifade etmeniz mümkün değil. Resim bir dosya ve sizin tarayıcınız bu dosyadan resmi alıp o noktada göstermeli. Resim dosyasının yerini tayin etmek için img elemanının bağlı özelliklerinden biri olan src (kaynak-source) özelliği kullanılır. Burada src="images/pupy.jpg" değeri kullanılmış. Yani images alt klasörü içindeki puppy.jpg dosyası resim olarak gösterilecek.

Peki bu resmi nereden bulduk ta oraya koyduk? derseniz, daha önce bahsettiğim Unsplash web siteisnde aradım buldum ve images klasörü içine pupy.jpg adıyla indirdim. İndirmek yetmez , resim çok büyüktü , Microsoft Paint uygulaması ile resmi düzenlemek için açıp boyutunu değiştirdim.

1. "Yeniden boyutlandır" butonuna tıkalyın
2. Ölçüt olarak "piksel" seçin
3. Genişlik 350 piksel değerinde olsun
4. "En boy oranını koru" seçili olsun ki yükseklik de genişlikle beraber otomatik ayarlansın
5. "Tamam" a tıklayın ve sonra dosyayı kaydedin

Böylece resmimizi 350 piksel genişlikte olacak şekilde yeniden boyutlandırdık.

img elemanının ikinci girdiğimiz bağlı özelliği alt değeri. Bu değer herhengi bir sebeple resim dosyası taryıcıya yüklenemezse kullanıcıya gösterilecek bir bilgilendirme yazısıdır. "Resim yüklenemedi" de yazabilirsiniz mesela. Diyelim <img src="images/pup.jpg" alt="Sevimli köpecik"> şeklinde dosya adını yanlış girdiniz tarayıcı da şu görünür:

Kırık bir resim imajıyla da desteklenmiş olarak alt özelliğine girdiğimiz yazı bize bildirim olarak veriliyor.

Sayfanızı Test Etmek

Çok basit sayfa kodumuzda neler olduğunu tek tek inceledikten sonra bu sayfayı nasıl çalıştırıp tarayıcıda test ederiz onu görelim. Öncelikle index.html dosyamız içine yukarıda verdiğimiz kodları yazmıştınız değil mi? Yani şunları:

Burada gösterilen elemanlar arası boşluklar ve alt satıra geçmelerin HTML kod açısından hiç bir anlamı yok aslında. Onların hepsi sizin kod yazarken elemanları ve içeriklerini çok daha kolay ayırt etmeniz için yapılır. Bu kodu tüm elemanlar arası boşluk ve alt satıra geçişleri iptal ederek de yazsak aynı şekilde çalışır (yani web sayfası aynı görünür).

şeklinde de yazsak çalışır ama biz bir şey anlamayız. Bu yüzden elemanları yeni satırlarda yazıp, içiçe yerleşen elemanlarda içeride kalanları soldan daha fazla girinti bırakarak yazıyoruz ki , döküman üzerinde hakimiyetimiz kaybolmasın. Düzen yazılımcılığın temel ilkesidir. Üşenmek yok , her şey asker gibi dizili olacak.

Gelelim sayfanın tarayıcıda nasıl göründüğüne. Basit web sayfaları için direk gezginde index.html dosyası üzerine çift tıklayarak sayfanın file olarak default tarayıcınızda görünmesini sağlayabilirsiniz.

Ancak biz sayfamızın bir web server'dan yayınlandığında nasıl göründüğünü görmek istiyoruz. Ben bu amacım için VSCode editörün Live Server eklentisini kullanıoyorum. VSCode editörü kullananlar "eklentiler" (extensions) sekmesinde "Live Server" aratarak bu eklentiyi kurabilirler. Eklenti sayesinde index.html dosyam editörde açıkken boşlukta bir yere sağ tıkladığımda açılan menüde "Open with Live Server" seçersem bir lokal server çalışıyor ve tarayıcıda otomatik olarak web sayfası açılıyor. Hatta html dosyada değişiklik yapar ve kaydederseniz tarayıcı otomatik olarak sayfayı tazeleyip en son halini gösteriyor.

Live Server ile aldığım görüntü ise şöyle :

Adres kısmında lokal server'ın ip adresi ve port numarası var. Artık gerçek bir server'dan yayınlanıyor gibi kodlarımızı test edebiliriz. VSCode kullanmayan okuyucular ise kendi editör uygulamalarında büyük ihtimal benzer özellik vardır, onu araştırıp kullanabilirler.

Bu sayfa oldukça uzun oldu. İlk sayfamızın görünütsünü elde ettiğimize göre yazıyı burada kesip yeni bir bölüm ile devam edelim.

2. Bölüm >

.

.