İnteraktif Eğitim: Sıfırdan Uygulamalı Web Geliştirme

Sıfırdan HTML, CSS ve JavaScript temellerini öğrenerek web geliştirmeye başlamak ve kendi özgeçmişinizi bir websitesi halinde oluşturup internet üzerinde yayınlamak ister misiniz? Öyleyse bu yazı tam size göre.

NOT: İlgili çalışmayı birebir takip edip denemek için workshop kaydını YouTube üzerinden izleyebilirsiniz.

Giriş

Web üzerinde bulunan, ziyaretçiye bilgi aktaran ve/veya hizmet sunan tüm sayfalar birer web sitesidir. Örneğin https://www.w3schools.com/, ziyaretçilerine web geliştirmeye dair bilgiler sunan bir web sitesidir.

Her bir site aslında bir metin belgesidir. Dolayısı ile bir web sitesini, herhangi bir not tutma uygulaması ile oluşturabilirsiniz. Bu metin belgeleri, bir tarayıcı kullanılarak açılır. Tarayıcı ise kullanıcıların web sayfalarına ulaşmasına ve bu sayfaların dilini yorumlayarak sıradan kullanıcının anlayabileceği bir hale getirmesine yarayan programlardır. Örneğin Google Chrome, FireFox, Opera birer tarayıcıdır. Bir web sitesi, tarayıcının okuyup anlayabileceği bir dil kullanılarak yazılır. Bu dillerden en temeli ve sık kullanılanı HTML’dir.

Web, bütün dünyada kullanılan bilgisayar ve diğer akıllı cihazlar aracılığı ile kullanıcılar arasında bilgi aktarımını sağlayan bir iletişim ağıdır. Her bir cihazın bir kimlik numarası vardır, buna IP adresi denir. Aslında web siteleri, herkesin erişimine açık bir IP adresine yüklenmiş ve tarayıcıların anlayabileceği bir dilde yazılmış metin belgelerinden başka bir şey değildir. Örneğin yukarıdaki www.w3schools.com web sitesinin IP adresi 192.229.173.207 şeklindedir. Ancak bunu akılda tutmak zor olacağından, tıpkı birbirimize kimlik numaralarımızdan ziyade isim soyisimle hitap etmemiz gibi, web sitelerine birer isim veririz. Bu isme domain denir. Yani yukarıdaki örnekte www.w3schools.com, bizim 192.229.173.207 adresine verdiğimiz isimdir.

İlginç Bilgi: Domain’ini bildiğimiz bir sitenin IP adresini öğrenmek mümkün. Bunun için https://www.nslookup.io/ gibi web hizmetlerini kullanabilirsiniz.

HTML, bir web sayfasını oluşturmaya ve bunun genel yapısını kurmaya yarar. Örneğin metnin bir web sayfası olduğu, bu sayfanın başlığı, logosu, içeriği, hangi içeriğin bir link hangisinin bir görsel hangisinin paragraf olduğu HTML ile belirtilir. Ancak bu içeriğin renklendirilmesi, stil verilmesi gibi işlemler için CSS adı verilen başka bir dil kullanılmalıdır. Bu iki dil ile yazılan içerik durağandır ve hernangi bir şekilde değişmez, bir işlevleri yoktur. Ancak sitelerin hemen hepsinde içeriğin değişebilmesini ve interaktif olmasını isteriz. Örneğin bir sitede kullanıcı girişi, kullanıcının medya yükleyebilmesi, bir butona basınca belirli bir aksiyonun gerçekleşmesi gibi işlemler JavaScript dili ile yazılarak mümkün kılınır.

Dolayısı ile işlevsel bir web sitesi geliştirebilmek için temel seviyede HTML, CSS ve JavaScript dilleri bir arada kullanılır. Web geliştirmek için PHP, Go, TypeScript, Python gibi pek çok dil kullanılabiliyor olsa da bu dillerin çoğu yine HTML, CSS ve JavaScript’i temel alır.

Bu yazının devamında uygulamalı olarak ilerleyecek ve hem üç dili de en temel seviyede öğrenecek, hem de kendimize bir web sitesi oluşturmuş olacağız. Oluşturacağımız web sayfası kendimizi tanıttığımız, özgeçmişimizi içeren tek sayfalık basit bir yapıda olacak. Bunun için herhangi bir metin düzenleyici (notepad, vim vs.) kullanabilir ya da bu iş için özel olarak yapılmış IDE adı verilen programlardan birini (Visual Studio, Intellij Idea vs.) kullanabilirsiniz. Ben, sizlerin de rahatlıkla takip edebilmesi için ek bir program indirmek yerine TextEdit adlı metin düzenleyiciyi kullanacağım. TextEdit ile yaptığım her şeyi Windows bilgisayarlarda halihazırda yüklü Notepad ile birebir aynı şekilde yapabilirsiniz.

En son aşamada bu siteye bir ip adresi ve domain atayarak en basit seviyede yayınlayıp dışarıdan erişilebilir hale getireceğiz, ancak bu aşamada domain ve hosting hizmetleri satın alacağımızdan dilerseniz bu aşamayı sadece izleyerek/okuyarak takip edebilirsiniz.

1. Adım: Sayfayı Oluşturma

Web sayfaları aslında .html uzantılı metin sayfalarıdır. Herhangi bir metin belgesini düzenleyip uzantısını .html yaparsanız bunu bir web sayfası haline getirmiş olursunuz.

Bir web sitesi tek bir sayfadan oluşabildiği gibi binlerce sayfa ve klasörden de oluşabilir. Ancak en temel seviyede bir web sayfasının en az bir sayfası olmalıdır, ve bu sayfa tarayıcıların doğru okuyabilmesi için index.html olarak adlandırılmalıdır. Diğer sayfalar .html uzantılı olmak üzere istediğiniz isimde ve klasör hiyerarşisinde olabilir.

Bu haldeyken sayfayı bir metin düzenleyici ya da IDE’ de açabilir, istediğiniz içeriği girebilirsiniz. Ancak kaydedip açtığınızda tarayıcının bunu doğru okuyamadığını göreceksiniz. Çünkü tarayıcının dili HTML’dir.

En temel seviyede bir web sayfası aşağıdaki içeriğe sahip olmalıdır:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
</body>
</html>

Burada gördüğünüz <head>, <body>, </html>, <!doctype html> gibi ifadelere etiket(tag) denir. Bu etiketler, tarayıcıya neyin ne olduğunu anlatmak için kullanılır ve sayfanın içeriği bu etiketlerin arasına yerleştirilir. Etiketler tekil ya da çiftler halindedir. Örneğin <body> etiketi çift halindedir: <body> başlangıç ve </body> etiketi bitiştir. Çift halindeki etiketlerin etki alanı iki etiketin içidir. Bir de tekil etiketler vardır, bu etiketler diğerlerinin aksine aradaki içeriği etkilemez ve direkt olarak bulunduğu yere etki eder. Örneğin <br> tekil bir etikettir.

Üstteki temel seviyedeki içerikte <!doctype html> ve </html> etiketleri, bu etiketler arasındaki içeriğin HTML dilinde yazılmış bir web sayfası olduğunu anlatır. Tarayıcı da bunu bu şekilde okur.

<head> </head> ikili etiketi arasına sayfanın içereceği veri hakkında bazı bilgiler girilir, <body> </body> etiketleri arasına ise sayfanın içeriğinin bizzat kendisi girilir. Yine sayfa içinde kullanacağınız dili <meta charset=”utf-8"> gibi karakter seti etiketi ile belirterek o dile özel karakterleri (Türkçe için ö,ş,ç gibi) kullanabilir hale geliriz. Farklı diller için bu etiketi google üzerinden araştırarak bulabilirsiniz.

Çalışmaya başlamak için öncelikle bu en temel seviye etiketleri boş bir metin belgesine girerek, belgeyi index.html olarak kaydedelim.

Sayfamıza bir başlık verelim, isim soyisim ve bilgilerimizi girelim. Bunlar saf metin olarak girilince elbette ki kötü görünecektir. Bunları HTML etiketleri ile düzenleyelim.

<!doctype html>
<head>
    <meta charset="utf-8">
    <title> Gamze Yılan Özgeçmiş </title>
</head>
<body>
<img src="./image.jpeg">
<h1> Gamze Yılan </h1>
<h3> Yazılım Mühendisi </h3>

<h3> Hakkımda </h3>

<p> Çeşitli dil ve teknolojiler kullanarak web, masaüstü ve mobil platformlarda ön ve arka yüz geliştiriyor, çeşitli
    bilgi teknolojileri operasyonlarını yönetiyorum. </p>

<h3> Yetenekler </h3>
<ul>
    <li> Angular</li>
    <li> Flutter</li>
    <li> PHP</li>
    <li> Java</li>
</ul>

<h3> Deneyim </h3>
<p><b> ICterra Bilgi ve İetişim Teknolojileri </b> - <i> 5 Ay </i></p>
<p><b> Atasayar Teknoloji </b> - <i> 1 yıl 1 ay </i></p>

<h3> İletişim </h3>
    <p><a href="https://www.linkedin.com/in/gamzeyilan/"> Linkedin </a>

    <div>
            <label>Konu:</label><br>
            <input type="text"><br>
            <label>İçerik:</label><br>
            <br>
            <textarea>
         </textarea><br>

        <div>
            <button onclick=""> Send me an Email
            </button>
        </div>
    </div>

</body>
</html>

Örneği incelersek:

• <title> etiketi sayfanın başlığını verir ve sekme kısmında görülebilir.
• <img> etiketi tekil bir etikettir, src kısmına eklenecek olan resmin index.html belgesine görece adresi ve ismi girilerek o resim siteye yüklenebilir.
• <h> etiketleri başlıkları belirtir ve hiyerarşik olarak ters orantılı çalışır, h1 en büyük ve h6 en küçük başlıktır.
• <ul> ve <li> etiketleri liste oluşturmada kullanılır. <li> etiketleri içine listenin maddeleri teker teker eklenir.
• Metni düzenlemek için kalın anlamında <b> ve eğik anlamında <i> etiketleri kullanılabilir.
• Link bırakmak için <a> </a> etiketleri kullanılır ve açılış etiketinde href=” ” içinde gidilecek link, iki etiket arasına da linke gitmesi için tıklanacak metin yazılır.
• Tek satırlık girdi almak için input etiketi, çok satırlık input almak için textarea etiketi kullanılabilir. Ancak bu etiketler, JavaScript olmadan sadece girdi alınmasını sağlar. O girdi ile bir aksiyon gerçekleştiremez ve o girdiyi yakalayamaz. input ve textarea gibi alanlara birer etiket tanımlamak için <label> kullanılabilir.
• <button> etiketi ile bir buton oluşturulabilir, tıklayınca yapacağı işi onClick=” “ içine ve butonun metni iki buton arasına yazılabilir.
• Etiketler içinde etiketler kullanılabilir.
• Her bir etiket içindeki bilgi, bir öğedir. HTML dili öğeler arasında otomatik olarak boşluk (margin) bırakır.
• HTML, her bir öğeyi alt alta yerleştirme eğilimindedir. Bunu değiştirmek ve iki öğeyi yan yana yerleştirmek için CSS kullanılır.

2. Adım: Sayfa Stili

Görüldüğü üzere an itibariyle sayfamız renksiz ve stil sahibi değil, yapısı dağınık ve çirkin. Hadi sayfayı iki sütun haline getirip renk ve stil verelim.

Sayfamıza stil vermek için aynı klasörde .css uzantılı bir belge oluşturup bunu <head> etiketleri arasına aşağıdaki gibi ekleyebiliriz:

<link rel=”stylesheet” href=”belgeİsmi.css”>

Bir başka yol ise, stil bilgilerimizi yine <head> etiketlerimiz arasına <style> ikili etiketi açıp bunun içine yazmaktır. Biz bu çalışmada bu yöntemi kullanacağız.

<!doctype html>
<head>
    <meta charset="utf-8">
    <title> Gamze Yılan Özgeçmiş </title>
    <style>
        body {
            background-color: lightgray;
            overflow: hidden;
        }

        #left-div {
            width: 30vw;
            float: left;
            height: 96vh;
            background-color: black;
            margin: auto;
        }

        img {
            width: 20vw;
            height: auto;
            /* üst sağ alt sol */
            margin: 5vh 5vw 5vh 5vw;
        }

        #profession, h1 {
            text-align: center;
            color: lightgray;
        }

        #right-div {
            float: left;
            height: 100vh;
            max-width: 50vw;
            /* bir üstteki elementin %5'ini alır */
            margin: 2%;
        }

        button {
            margin-top: 1vh;
        }

        #messageBody {
            height: 15vh;
            width: 20vw;
        }
        #email {
            background-color: darkgrey;
            padding: 5%;
            text-align: left;
        }
    </style>

</head>
<body>
<div id="left-div">
    <img src="./image.jpeg">
    <h1> Gamze Yılan </h1>
    <h3 id="profession"> Yazılım Mühendisi </h3>
</div>
<div id="right-div">
    <h3> Hakkımda </h3>

    <p> Çeşitli dil ve teknolojiler kullanarak web, masaüstü ve mobil platformlarda ön ve arka yüz geliştiriyor, çeşitli
        bilgi teknolojileri operasyonlarını yönetiyorum. </p>

    <h3> Yetenekler </h3>
    <ul>
        <li> Angular</li>
        <li> Flutter</li>
        <li> PHP</li>
        <li> Java</li>
    </ul>

    <h3> Deneyim </h3>
    <p><b> ICterra Bilgi ve İetişim Teknolojileri </b> - <i> 5 Ay </i></p>
    <p><b> Atasayar Teknoloji </b> - <i> 1 yıl 1 ay </i></p>

    <h3> İletişim </h3>
    <p><a href="https://www.linkedin.com/in/gamzeyilan/"> Linkedin </a>

    <div id="email">
            <label>Konu:</label><br>
            <input type="text" id="subject"><br>

            <label>İçerik:</label><br>
            <br>
            <textarea id="messageBody">
         </textarea><br>

        <div>
            <button onclick=""> Send me an Email
            </button>
        </div>
    </div>


</div>
</body>
</html>

Örneği incelersek:

• İçeriği iki ayrı konteyner içine koyup bunları topluca kontrol edebilmek için <div> </div> etiketlerini kullanılabilir.
• Tekrarlamayan etiketlerin stilleri direkt olarak etiketin ismi yanına eklenen kıvırcık parantezler içinde verilebilir.
• Tekrarlayan etiketler için ayırt edici bir isim, HTML içinde id=” “ parametresi ile verilir, bu idler stil içinde başına # eklenerek çağırılır.
• <style> </style> etiketleri içindek bilgiler kesilip .css uzantılı bir metin belgesi içine taşınıp <link rel=” ”> ile eklenirse aynı işi görür.
• Her bir stil parametresinden sonra ; kullanılarak sonraki satıra geçilir.
• background-color ile arkaplan rengi verilir. CSS’te tanımlı renkler isimleri ile çağırılabilir.
• Taşmalara nasıl müdahale edileceği overflow parametresi ile belirlenir.
• Pencerenin boyutlarının değişmesi durumunda tasarımın hala güzel görünmezi ve bozulmaması için düzenlemeler yapılırsa buna responsive tasarım denir. Bunu, değerleri pixel cinsinden değil de ekranın genişliğini ve boyunu belirten vw ve vh cinsinden vererek büyük oranda sağlayabiliriz.
• width ve height parametreleri ile öğelere boy ve genişlik verilebilir.
• Öğelerin ne tarafta bulunacağı float parametresi ile belirlenebilir.
• Öğelerin bir üst katmandaki öğeye uzaklığı margin parametresi ile belirlenebilir. Margin parametresi tek değer alırsa bu değeri her yöne uygular, dört değer alırsa bunları sırasıyla üst sağ alt ve sol boşluklara uygular.
• text-align parametresi ile metinler sağa, sola veya ortaya hizalanabilir.
• Eğer bir değer yüzde cinsinden % ile verilirse, bu değer atandığı öğenin bir üstündeki öğeye göre yüzde alır.

3. Adım: Sayfa Hareketliliği

Sayfa içinde hareketi sağlamak için JavaScript kullanırız. CSS belgelerinde olduğu gibi JavaScript belgelerini de ister aynı klasörde .js uzantılı bir metin belgesi oluşturarak içine, istersek de <head> etiketleri arasında <script> </script> ikili etiketi içine yazabiliriz. Biz bu örnekte <head> içine yazmayı tercih edeceğiz.

<!doctype html>
<head>
    <meta charset="utf-8">
    <title> Gamze Yılan Özgeçmiş </title>
    <style>
        body {
            background-color: lightgray;
            overflow: hidden;
        }

        #left-div {
            width: 30vw;
            float: left;
            height: 96vh;
            background-color: black;
            margin: auto;
        }

        img {
            width: 20vw;
            height: auto;
            /* üst sağ alt sol */
            margin: 5vh 5vw 5vh 5vw;
        }

        #profession, h1 {
            text-align: center;
            color: lightgray;
        }

        #right-div {
            float: left;
            height: 100vh;
            max-width: 50vw;
            /* bir üstteki elementin %5'ini alır */
            margin: 2%;
        }

        button {
            margin-top: 1vh;
        }

        #messageBody {
            height: 15vh;
            width: 20vw;
        }
        #email {
            background-color: darkgrey;
            padding: 5%;
            text-align: left;
        }
    </style>

    <script>
          function emailGonder()  {
              var konu = document.getElementById('subject').value;
              var mesaj = document.getElementById('messageBody').value;
             window.open(`mailto:test@example.com?subject=${konu}&body=${mesaj}`);
        }

    </script>
</head>
<body>
<div id="left-div">
    <img src="./image.jpeg">
    <h1> Gamze Yılan </h1>
    <h3 id="profession"> Yazılım Mühendisi </h3>
</div>
<div id="right-div">
    <h3> Hakkımda </h3>

    <p> Çeşitli dil ve teknolojiler kullanarak web, masaüstü ve mobil platformlarda ön ve arka yüz geliştiriyor, çeşitli
        bilgi teknolojileri operasyonlarını yönetiyorum. </p>

    <h3> Yetenekler </h3>
    <ul>
        <li> Angular</li>
        <li> Flutter</li>
        <li> PHP</li>
        <li> Java</li>
    </ul>

    <h3> Deneyim </h3>
    <p><b> ICterra Bilgi ve İetişim Teknolojileri </b> - <i> 5 Ay </i></p>
    <p><b> Atasayar Teknoloji </b> - <i> 1 yıl 1 ay </i></p>

    <h3> İletişim </h3>
    <p><a href="https://www.linkedin.com/in/gamzeyilan/"> Linkedin </a>

    <div id="email">
            <label>Konu:</label><br>
            <input type="text" id="subject"><br>

            <label>İçerik:</label><br>
            <br>
            <textarea id="messageBody">
         </textarea><br>

        <div>
            <button onclick="emailGonder()"> Send me an Email
            </button>
        </div>
    </div>

</div>
</body>
</html>

Örneği incelersek:

• JavaScript fonksiyonları HTML öğeleri ile uyum içindedir ve birlikte kullanılır. Örneği bir HTML öğesi olan buton bir onclick=” “ parametresi alır ve bunun içine genellikle JavaScript aksiyonu yazılır, butona tıklanınca bu aksiyon harekete geçer.
• JavaScript ve pek çok dilde, yazılan programın gerçekleştirmesi gereken eylemler birer mini program gibi o program kodunun içine yazılır. İşte bu eylemlere fonksiyon denir. Bir fonksiyon tanımlamanın pek çok yolu vardır ancak JavaScript dilinde aşağıdaki gibi tanımlanır:

function fonksiyonAdi()  { }

Burada fonksiyona verilen herhangi bir isim “fonksiyonAdi” kısmına yazılır. Bu kısımda Türkçe karakter (İ, ç, ş, ö, ü, ğ) kullanılmaz. Kıvırcık parantezle belirlenen alan fonksiyonun kapsama alanıdır ve fonksiyon çalıştırıldığında bu parantezler arasındaki alanda kalan kod çalışır. Fonksiyon, isminin çağrılması ile çalıştırılır.

Fonksiyon adı yanındaki parantezlerin arasına bir parametre geçirilebilir, daha sonra fonksiyonu çalıştırırken bu parametreler de eklenir ve fonksiyon ilgili parametreleri kullanabilir.

• JavaScript de dahil programlama dillerinde bir değişken, matematikteki x gibi, tanımlanabilir. Bu değişkenlerin tipleri vardır: örneğin sayılar için int, metinler için string kullanılabilir. Tipi belirsiz değerler için ise tip olarak var kullanılır. Her bir değişken tanımlanırken tipinin yanına değişken ismi verilir.
• HTML içindeki öğelerin idlerini kullanarak, JavaScript ile o öğelerin tuttuğu değerleri yakalayabiliriz. Örnekte input ve textarea parametrelerinin değerleri idleri sayesinde yakalanmıştır. Bunu, document.getElementById(‘ ’) fonksiyonu ile başarırız. Bu, JavaScript’te tanımlı bir fonksiyondur. Burada kesme işaretleri arasına id yazılır. Bu idye sahip öğenin değerini almak için ise fonksiyonun sonuna örnekteki gibi .value eklenir. Son olarak, bu değeri daha önce tanımladığımız değişkenlere atayabiliriz.
• JavaScript’te farklı işler için tanımlanmış çeşit çeşit fonksiyon vardır. Örneğin pencere açmak için window.open() fonksiyonunu örnekteki gibi kullanabiliriz.
• JavaScript’te bir metin, tırnak işaretleri arasına yazılmalıdır. Bunlar tek ya da çift tırnak olabilir. Dil, bu verinin metin olduğunu ancak bu şekilde yazılırsa algılar.
• Bir metin içine bir değişkenin değerini eklemek için ${ } yapısını kullanır, kıvırcık parantezler içine değişken ismini yazarız. Ancak böyle değerler içeren metinler ters kesme işareti ile (“ değil, ‘ değil, ` ile) yazılmalıdır.

4. Adım: Sayfayı Yayınlama

İşlemleri bitirdiysek artık belgemizdeki değişiklikleri bilgisayarımızda kaydedebiliriz. Bu aşamadan sonra yapacağımız şey ise sayfamızı yayınlamak olacak.

Sayfamızı yayınlamak için, oluşturduğumuz belgeyi internet kullanıcılarının erişebileceği, halka açık, gerekli ayarların ve izinlerin tamamlandığı bir bilgisayara yüklememiz gerekmekte. Kişisel bilgisayarlarımız bunu sağlamamakta. İşte bu yüzden, bunu bir hizmet şeklinde sağlayan pek çok şirket bulunuyor. Bu şirketlerin devasa kapasiteye sahip bilgisayarlarında sitemizi yayınlamak için çok küçük bir alanı bir süreliğine kiralarız. Şirket de bize bilgisayarında küçük bir konteyner açar, ona özel bir kimlik numarası (ip adresi) tanımlar ve belgemizi yüklemek için alan & erişim hakkı ve erişimde kullanabileceğimiz bir kullanıcı adı ile şifre verir. Buna hosting hizmeti denir. Kiraladığımız bu alana kişisel bilgisayarımız üzerinden, gerek FTP adı verilen belge aktarma programlarını indirip kullanıcı adı ve şifrelerimizle gerek Cpanel, Plesk gibi tarayıcımız üzerinden indirmeden kullanabileceğimiz programlar ile erişiriz. Daha sonra buraya belgemizi yüklersek, ip adresi ile sitemize erişebilir oluruz.

www.google.com, www.yaseminkara.com, www.wikipedia.org gibi domain adresleri, yine kiralanması gereken hizmetlerdir. Eğer sitemize ip adresi üzerinden değil de bir domain ile erişmek istersek yapmamız gereken şey bir domain satın alıp bunun ayarlarına erişerek domainin işaret edeceği ip adresi kısmına sitemizin bulunuğu ip adresini yazmak olmalıdır.

İnternette gezinirken bazı sitelerde güvenlik önlemi sayfasıyla karşılaşmış, yine de devam et seçeneğine tıklayarak erişmiş olabilirsiniz. Bazı sitelerin https://, bazılarınınsa http:// şeklinde başladığını farketmiş olabilirsiniz. Bazı sitelerde adres çubuğunda bir anahtar ikonu, bazılarında ise Not Secure yazısı görmüş olabilirsiniz:

SSL Sertifikası Eklenmemiş Site

SSL Sertifikası Eklenmiş Site

Bunun sebebi, site ile siteye erişmeye çalışan kullanıcı arasında güvenli iletişimi sağlayan SSL adı verilen bir sertifikanın eksikliğidir. Bu sertifika da hosting ve domain hizmetleri gibi kiralanır, ve siteye eklenince anahtar ikonu çıkarak sitenin güvenli şeklinde sınıflandırılmasını sağlar.

Her ne kadar hosting, domain yönlendirme ve SSL sertifikası ekleme işlemleri satın aldığınız hizmete göre ufak değişiklikler gösterse de büyük oranda aynıdır.

Örnek projemiz için bu hizmetleri öncelikle natro.com üzerinden satın aldık. İsterseniz siz de ilgili siteye ya da aynı hizmeti sunan başka bir siteye ( hostgator, godaddy vs. )erişerek hizmetlere göz atıp ilgilendiğiniz planı satın alabilirsiniz.

Natro’ya giriş yaptıktan sonra Hosting Yönetimi sekmesi üzerinden Web Hosting Hesapları butonuna tıklayarak planımızı seçiyoruz. Daha sonra Yönet butonunun ardından Plesk seçeneğine tıklıyoruz. Plesk, sitemizin yönetimini kolaylaştıran bir admin panelidir ve pek çok web hosting hizmeti ya Cpanel ya da Plesk panel ile erişilebilir haldedir. İki panel birbiriyle yüksek benzerlik göstermektedir. Burada File Transfer butonuna tıklayarak belgelerimizi yükleyebilir, ana sayfada ilgili domainin Hosting Settings sekmesi üzerinden o domaine satın aldığımız SSL sertifikasını ekleyebiliriz.