17 Aralık 2020
13dk Okuma Süresi
Egehan D.
Dijital kimliğinizi yapılandırmanın ilk adımdan biri site kurulumudur. Web sitesi geliştirilmesi alanındaki gelişmeler sayesinde bugün “Web sitesi nasıl yapılır?” sorusunun birçok cevabı bulunuyor. İçerik yönetimi sistemi kullanabiliriz, web sitesi kurucusu kullanabiliriz veya eski yöntemleri tercih edip sıfırdan site kurulumu yapabiliriz. Bu rehberde tüm bu yöntemlerden bahsedeceğiz ve size web sitesi nasıl yapılır göstereceğiz.
Eğer daha önce hiç web sitesi kurmadıysanız ve site nasıl kurulur hiç bilmiyorsanız, endişelenmeyin. Bu rehberde tüm işlemleri açıklayacağız.
Daha önce de bahsettiğimiz gibi site kurulumu için 3 ana yol vardır.
Web siteniz bir bina gibidir ve her bina gibi kullanıcıların erişebileceği bir adrese ve kalabileceği bir yere ihtiyacı vardır. Web sitesi nasıl yapılır öğrenmek ve internette sitenizi yayınlamak için web hosing almalı ve ona erişebilinir bir adres vermeli yani bir alan adı (domain) almalısınız. Her ikisine birer birer bakalım:
İyi bir web hosting sağlayıcısı kalite, verimlilik ve yüksek uptime sağlamak için elinden gelenin tümünü yapacaktır. Hostinger çok ucuz fiyatlara bahsedilen standartları (ve daha fazlasını) sağlayan web hosting servisi sağlar.
Milyonlarca kullanıcının seçtiği Hostinger’a katılmanız için birkaç sebep:
Basitçe, alan adı web sitenizin adıdır. Web sitenize girmek için tarayıcınızın adres çubuğuna yazdığınız şeydir. Google.com veya Facebook.com birer adrestir.
İyi bir alan adı seçimi de en önemli noktalardan biridir. Çünkü tüm ziyaretçileriniz sitenize bu adres ile ulaşacaktır ve dolayısıyla hata yapma şansınız yoktur. Bir alan adı seçmeden önce dikkat etmeniz gereken bazı öneriler:
Tüm hosting sağlayıcıları gibi, Hostinger da alan adı tescili servisi sağlar. Buradaki muntazam domain sorgulama servisini kullanarak alan adınızı seçebilirsiniz.
Daha da iyisi ise Business veya Premium hosting planı seçtiğinizde domain adresini ücretsiz alıyor olmanızdır. (Evet, tamamen ücretsiz!) Gelecek nesil .xyz alan adlarını da son derece inanılmaz bir fiyat olan yıllık 3,99 TL’ye alabilirsiniz.
Temelleri attığımıza göre eğlenceli kısma başlayabiliriz. Artık hangi alan adını kullanacağınıza ve sitenizi nerede barındıracağınıza karar verdiğinize göre kendi web sitenizi hazırlamaya başlayabilirsiniz. 3 yöntem ile (WordPress kullanmak, web sitesi kurucusu kullanmak, sıfırdan site kurulumu) web sitesi nasıl yapılır açıkladık. Tercihinizi yapın ve denemeye başlayın.
Eğer bunu okuyorsanız, en iyi içerik yönetimi sistemini seçmişsiniz demektir. Doğru tercih yaptınız diyebiliriz. Hadi adımlara göz atalım.
WordPress kurulumu yalnızca birkaç tıklama yapmak kadar kolaydır. Otomatik yükleyici tüm zorlu işlemleri sizin için yapsa da FTP kullanarak elle WordPress kurulumunu da ekledik.
İşte bu kadar! WordPress şimdi kuruldu. Otomatik Yükleyici’nin sizin için çalışmama olasılığı son derece düşüktür ancak olur da çalışmazsa veya her şeyi elle yapmaktan zevk alıyorsanız, WordPress’i dosyaları FTP ile transfer edip elle de kurabilirsiniz. Elle kurulum için bu adımları takip edin:
İşte bu kadar! WordPress hosting hesabınıza kuruldu ve şimdi WordPress yönetici alanına giriş yapabilirsiniz. Eğer WordPress kurulumu hakkında daha fazla yöntem arıyorsanız, bu kapsamlı rehbere göz atabilirsiniz.
Kurulumu tamamladığımıza göre yeni oluşturduğumuz WordPress sitemizi yapılandırmak hakkında konuşabiliriz. Başlangıç olarak yapmanız gereken yapılandırmalardan bahsedelim:
Yorumlarla ilgili tüm ayarları WordPress yönetici panelinin Ayarlar > Tartışma kısmında bulunabilir. İhtiyaçlarınıza göre yapabilecekleriniz:
Öneri:
Yalnızca belirli sayfa veya yazılarda yorum yazmayı devre dışı bırakmak da mümkündür. Yapmak için, şu adımlarıt akip edin:
Bu adımı tamamladığınızda WordPress web siteniz resimleri daha iyi ele alacaktır. Varsayılan olarak bir resmi yüklediğinizde resmin bir çok farklı boyutları oluşturulur ki bu hiç verimli bir yöntem değildir. Değiştirmek için şu adımları takip edin:
Bu biraz daha teknik bir yapılandırmadır ve web sitenizin güvenliğini geliştirmede önemli bir rol oynar. Dizin gezinmesini pasifleştirmek için, .htaccess dosyanızı düzenlemeniz gerekir. Bu adımları takip edin:
Options –Indexes
İçeriğin kendisi kadar web sitenizin görsel estetikleri de önemlidir. WordPress temaları ihtiyaçlarınıza göre web sitenizin tasarımını ve görüntüsünü özelleştirmenize izin verir. Diğer bir yandan, WordPress eklentileri de web sitenizi daha fonksiyonel kılar. Her iki noktaya da birer birer değineceğiz.
WordPress’in geniş aktif bir topluluğu vardır. Bu nedenle ücretsiz ve ücretli temaların dizini uçsuz bucaksızdır. Birçok ücretsiz WordPress teması burada bulunabilir. ThemeForest gibi web siteleri ücretsiz ve ücretli temalara ev sahipliği yapar. Eğer web siteniz için doğru temayı seçemiyorsanız, en iyi ücretsiz WordPress temaları listesine göz atın.
WordPress’de tema kurmak çok kolaydır. Bu adımları takip edin:
Eğer satın aldığınız bir temayı yüklemek istiyorsanız, şu adımları takip edin:
Eğer tema yükleme üzerine daha detaylı bir rehbere ihtiyacınız varsa buraya göz atın.
Eğer kod dosyalarını nasıl düzenleyeceğinizi biliyorsanız, yüklediğiniz temaları elle özelleştirebilirsiniz. Bu özelleştirme sitenizin düzeninden sorumlu olan CSS (cascading style sheet) dosyalarını düzenlemeyi içerir. CSS dosyasını düzenlemek için takip edebileceğiniz adımlar:
Tema dosyalarını functions.php dosyasını düzenleyerek de özelleştirebilirsiniz. Bu şekilde temanız için özellikler, fonksiyonellik ve tasarım ekleyebilir/kaldırabilir/düzenleyebilirsiniz. Functions dosyası tema fonksiyonlarıyla ilgilenir ve PHP kodu ekleyerek tema özelleştirilebilir. functions.php ile daha fazlasını burada okuyabilirsiniz.
Eklentiler web sitesi sahiplerinin hayatını kolaylaştırır ve hem kısa vadede hem de uzun vadede web siteniz için gayet faydalı olur. Basit bir eklenti kurulumu ile herhangi bir kod yazmadan veya yapınlandırma dosyası düzenlemeden web sitenize fonksiyonellik ekleyebilirsiniz. Temalar gibi, binlerce ücretsiz ve ücretli WordPress eklentileri bulunur. Web sitenizde mutlaka olması gereken bazı eklentiler:
WordPress eklentisi kurmak tema kurmak kadar kolaydır. Eklenti kurmak için bu adımları takip edin:
Nasıl WordPress eklentileri kurulacağı hakkında daha detaylı bir rehber burada bulunabilir.
WordPress’e içerik iki şekilde eklenebilir: Yeni bir yazı veya yeni bir sayfa oluşturabilirsiniz. İkisinin arasındaki fark yazıların kategorilere ayrılabiliyor olmasıdır. Yazılar aynı zamanda etiketlenebilir ve/veya arşivlenebilir. Yazılar genellike web sitesinde kronolojik sırada gösterilen blog yazıları veya makalelerdir. Diğer bir tarafta ise sayfalar sabittir. Sayfalara örnek “Hakkımızda” veya “İletişim” olabilir.
WordPress sitenizde yeni bir yazı oluşturmak için bu adımları takip edin:
WordPress’e yazılar eklediğinizde, varsayılan olarak, web sitenizin ana sayfasında ters kronolojik sıralamada en yeni ekledikleriniz görünecektir. Bazen ziyaretçilerinize ana sayfanızda en yeni yazıları göstermek yerine onları sabit bir ana sayfa ile karşılamak daha çok tercih edilebilir olabilir. Basit bir sabit ana sayfa oluşturmak kolaydır. Bu adımları takip edin:
WordPress ile yapabileceğiniz daha nice özelleştirme bulunur. WordPress ile tanışmanız ve ilk web sitenizi kurmanız için yeterli olacak en önemli olanlardan bahsettik. Daha fazla öğrenmek için, resmi WordPress codex’ini ziyaret edin veya bu kapsamlı WordPress rehber dizinine göz atın.
Hostinger’da site kurma yöntemlerinden bir diğeri de web sitesi kurucusu kullanmaktır. İçerik yönetimi sistemi kurmak veya kodlarla uğraşmak istemeyenler için mükemmeldir. Özellikle web sitesi nasıl yapılır bilmeyen, yeni başlayan kullanıcıların tercihidir.
Sürükle & Bırak özelliği kullanımını son derece kolaylaştırıyor. Metin, resim, tablo, galeri veya form gibi her tür ögeyi web sitenize kolayca ekleyebilirsiniz.
Hostinger site kurucusu 100’den fazla mükemmel şablon ile gelir, arama motoru dostudur ve varsayılan olarak responsive’dir. Bu da web sitenizin hem masa üstü hem de mobil cihazlarda hiçbir ek işlem olmadan mükemmel görüneceği anlamına gelir. Web sitesi kurucusu ile web sitesi tasarımı nasıl yapılır öğrenmek için aşağıdaki talimatları takip edin.
Hostinger kontrol panelinize giriş yapın. Hosting hesabınızın kontrol panelinde sayfayı Web Sitesi kısmına kadar kaydırın ve Web Sitesi Kurucusu simgesine tıklayın.
Şimdi şablonların listesi ile karşılanacaksınız. Soldaki sütunda kolaylık için şablon kategorilerini bulabilirsiniz.
Web sitesinin şablonla nasıl görüneceği hakkında fikre sahip olmak için Önizleme butonuna tıklayabilirsiniz veya devam etmek için Seç butonuna tıklayabilirsiniz.
Size yardımcı olması için solda çıkan kutuda yapmanız adımlar yer alır. Başlamak için önerilen yolu takip edebilirsiniz. Sağ alttaki yeşil soru işareti kutusuna da tıklayarak site kurucusu menüsün açıklamasına ulaşabilirsiniz.
Şablon web sitenize bazı varsayılan örnek içerik eklemiş olmalıdır. İlk yapmanız gereken bunları kendi web sitenize uygun içeriklerle değiştirmek olmalıdır. Bunu metin olan herhangi bir yere tıklayarak yapabilirsiniz. Aynı şekilde rengini, formatını veya boyutunu da araç çubuğunu kullanarak değiştirebilirsiniz.
Yeni metin eklemek için menüdeki Metin simgesine tıklayın ve sitenizde görünmesini istediğiniz yere sürükleyin.
Yeni bir resim eklemek için, Resim simgesine tıklayabilir ve sitenize sürükleyebilirsiniz. Bırakır bırakmaz resmi seçmeniz için bir pencere açılacaktır. Yüklendiğinde nerede görünmesini istiyorsanız oraya sürükleyip bırakabilirsiniz.
Araç çubuğundaki Menü seçeneği ile yeni bir menü eklemeniz de mümkündür. Oluşturulduğunda farklı menü ögelerini düzenleyebilirsiniz.
Yine aynı sürükle & bırak yöntemiyle haritalar veya sosyal medya entegrasyonları ekleyebilirsiniz.
Gelişmiş kısmında Skype, Müzik, HTML, Takvim, AdSense vb. gibi seçenekleriniz vardır.
Sayfanın üst kısmındaki Otomatik Düzen butonu sitenizdeki tüm ögeleri otomatik olarak hizalar ve elle tasarım yapmaktan sizi kurtarır. Ancak; eğer butona tıkladıktan sonra karşılaştığınız düzenden memnun olmazsanız, her zaman Geri al butonuna tıklayarak işlemi geri alabilirsiniz.
Tüm değişiklikleri tamamladığınızda sitenizi Yayınla butonuna tıklayarak yayınlayabilirsiniz. Benzer şekilde değişikliklerinizi Taslak kaydet butonuna tıklayarak taslak olarak kaydedebilirsiniz.
Bu kısımda size HTML ve CSS güçlerini kullanarak sıfırdan web sitesi nasıl yapılır göstereceğiz. Sabit bir web sitesi erişen kullanıcıya göre hiçbir değişiklik göstermez ve hep belirli bir içeriği gösterir. Avantajları ve dezavantajları bulunur. Hadi bazılarına göz atalım:
Ek olarak kod düzenleyicisine de ihtiyacınız olacaktır. En iyi kod düzenleyicilerinden bazıları:
Hypertext Markup Language (HTML) site kurulumunda kullanılan dildir.
Kullandığınız kod düzenleyicisini açın ve aşağıdakini boş bir sayfaya yapıştırın.
<html> <head> <title>Your website’s title here</title> </head> <body> <p> This is where the content comes. </p> </body> </html>
Şimdi kod düzenleyicinizde sayfayı .html uzantısı (ör: site.html) ile kaydedin.
Tarayıcınızda kaydettiğiniz sayfayı açın. Sayfa çirkin görünecektir ve belki aklınızdaki web sitesi tasarımının kıyısından geçmiyordur ancak basit bir web sitesi nasıl yapılır öğrenmek için buradan başlayacağız. Hadi devam edelim.
CSS, cascading style sheets için kısaltmadır ve web sitenize tutarlı bir şekilde stil eklemek için kullanılır. CSS ile sitenizn belirli yerlerinde yazı tipini, rengi belirleyebilir veya web sitenizin arka plan rengini değiştirebilirsiniz.
Stil dosyası oluşturmak için yeni bir metin dosyası açın ve adını style.css olarak değiştirin. Ana sayfanızın HTML dosyasıyla aynı dizine kaydedin. HTML dosyasının CSS dosyasından tasarım kodlarını okuması için aralarında bağlantı kurulmalıdır. Bağlantıyı aşağıdaki satırı HTML dosyasındaki <head>
etiketlerinin arasına ekleyerek kurabilirsiniz.
<link rel="stylesheet" type="text/css" href="style.css">
Şu anda kadar tek yaptığımız CSS ile HTML dosyalarını birbirine bağlamak. Hadi şimdi web sitemizi CSS ile 5 farklı kısma ve iki sütuna bölelim. Aşağıdaki kodu CSS dosyanıza ekleyin.
body {background: #F6E7E7; margin: 0 auto; padding: 0;text-align: center;} a {color: #310909;} #container {width: 1000px; margin: 0 auto; padding: 0; background;} #header {width: 1000px; height: 180px; margin: 0 auto; padding: 0; border: 0; background: #f346e1;} #sidebar {width: 300px; height: 410px; margin: 0; padding: 0; border: 0; float: left; background: #E83535;} #content {width: 700px; height: 410px; margin: 0; padding: 0; border: 0; float: left; background: #8be0ef;} #footer {width: 1000px; height: 70px; margin: 0; padding: 0; border: 0; float: left; background: #000000; color:#eee; clear:both;}
Arka plan (background) değerleri farklı kısımların rengini belirler ve kendi istekleriniz doğrultusunda değiştirebilirsiniz. Böylece sitemizde 5 farklı kısım bulunur: container, header, sidebar, body ve footer. Bu kısımların isimleri onların fonksiyonunu temsil eder. Container kısmı web sitesinin tamamını içerir ve genişliği 1000px olarak belirlenmiştir. Dilendiğinde farklı bir değer ile değiştirilebilir ancak diğer kısımların değerlerinin de ilgili bir şekilde değiştirilmesi gerekeceğini not ediniz. Kendi tercihlerinize göre kısımların genişliğini, yüksekliğini ve rengini değiştirebilirsiniz. Değişiklikleri tamamladığınızda kaydedin ve ana sayfanızı şu şekilde güncelleyin:
<html> <head> <title>Your website’s title here</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div id="header"><p>Header Goes Here</p></div> <div id="sidebar"><p>Left Navigation Goes Here</p></div> <div id="content"><p>Content Goes Here</p></div> <div id="footer"><p>Footer Goes Here</p></div> </div> </body> </html>
Burada görebildiğiniz gibi web sitemizi farklı kısımlara bölmek için <div> etiketlerini kullandık. CSS kurallarını uygulamak için id özelliğini tanımladık.
CSS ve HTML kullanarak değiştirebileceğiniz daha nice seçenekler bulunur.
Eğer CSS veya HTML dosyasında herhangi bir yazı tipi belirlemezseniz, genellikle Times New Roman olan bilgisayarınızın varsayılan yazı tipinde metinler gösterilecektir. CSS kullanarak, varsayılan istekleriniz ve ihtiyaçlarınız doğrultusunda yazı tipini değiştirebilirsiniz.
#content p {font-family: Open Sans; font-size: 18px}
Yukarıdaki kod satırını stil dosyanıza (#content kısmından sonra) eklediğinizde paragraf metinlerinin Open-Sans yazı tipini kullanmasını sağlayacaktır ve yazı boyutu da 18px olacaktır.
Web sitesi yaparken bazen dış bir web sitesine veya kendi web sitenizin başka bir yerine bağlantı vermeniz gerekebilir. Üzerine tıkladığınızda sizi başka bir yere götüren bu bağlantılara hyperlink adı verilir. “href” bağlantının hedefini belirler ve <a> etiketi bağlantıyı temsil eder. Endişelenmeyin, bir örnek paylaşacağız:
Web sitenizin body kısmına bunu <a href=”https://www.google.com”>Google'a Git</a>
ekleyin. Google’a Git olarak görünecektir ve ziyaretçi üzerine tıkladığında Google’ın ana sayfasına ulaşacaklardır.
HTML ile resim eklemek, etiket ekleyip resmin yolunu belirtmek kadar kolaydır. <img>
etiketi resim eklemenize olanak tanır. İşte nasıl kullanıldığı:
<img src="kedi.jpg" alt="Tatlı Kedi">
src’den sonra gelen tırnak işaretlerinin arasına resmin yolunu girmelisiniz. Bu durumda, resim HTML dosyanızla aynı dizinde olmalıdır. alt’tan sonra gelen tırnak işaretleri içerisindeki metin yalnızca resim yüklenemezse gösterilecektir.
Bilgileri düzene sokmak bazen tasarım açısından bazen de fonksiyonellik açısından gereklidir. HTML’de bunu <table> etiketini kullanarak tablolar ile yapabilirsiniz. Tabloda başlık satırı belirlemek için <th>
(table header) etiketini ve satırları belirlemek için de <tr>
(table row) etiketini ve son olarak da verileri belirlemek için <td>
table data etiketini kullanabilirsiniz.
<table> <tr> <th>My Header 1</th> <th>My Header 2</th> <th>My Header 3</th> </tr> <tr> <td>Data 1 for header 1</td> <td>Data 1 for header 2</td> <td>Data 1 for header 3</td> </tr> <tr> <td>Data 2 for header 1</td> <td>Data 2 for header 2</td> <td>Data 2 for header 3</td> </tr> <tr> <td>Data 3 for header 1</td> <td>Data 3 for header 2</td> <td>Data 3 for header 3</td> </tr> </table>
Yukarıdaki kodu uyguladıktan sonra web siteniz şu şekilde görünmelidir:
HTML ve CSS ile çalışırken, web sitenizi estetik olarak daha göze uygun hale getirmek için seçenekler sonsuzdur. Web sitenizi sıfırdan kurarken size yardımcı olabilecek bazı temel kavramlara değindik. İnternet, öğrenmenize ve kod yazmanıza yardımcı olacak bir yığın mükemmel rehberlerle ve etkileşimli araçlarla doludur:
Bu rehberde yeni başlayanlara web sitesi kurucusu nasıl kullanılır, WordPress ile web sitesi nasıl yapılır ve hatta sıfırdan site nasıl kodlanır gösterdik. Web sitenizi kurmak için hangi yolu seçmiş olursanız olun, doğru yolu seçmiş olduğunuzu umut eder ve sitenizi yayınlarken bol şans dileriz.
Mayıs 21 2019
emeğiniz ve bilginiz için teşekkür ederim iyi çalışmalar dilerim
Haziran 18 2019
html ve css ile kurduğum siteyi nasıl internete yüklerim?
Bir yanıt bırakın