Bir Web Sitesi Nasıl Kodlanır (Yeni Başlayanlar İçin Tam Kılavuz)

Bir web sitesini kodlamayı öğrenmek, iyi ücretli işlere ve sonsuz fırsatlara kapı açabilecek çok değerli bir beceridir. Çoğu web sitesi, ustalaşmak için özveri ve pratik gerektiren HTML, CSS ve JavaScript kullanılarak oluşturulur.

Kendiniz için bir web sitesi oluşturmakla ilgileniyorsanız iyi haberler var. Sıfırdan başlamak zorunda değilsiniz. Mükemmel sürükle ve bırak araçları, tek bir satır kod yazmadan herhangi bir web sitesi oluşturmanıza olanak tanır.

Bu kapsamlı kılavuzda, tamamen işlevsel bir web sitesini zahmetsizce oluşturmak için bu araçları nasıl kullanacağınızı keşfedeceğiz. Temel bilgileri öğrenmeye hevesli olanlar için sıfırdan kodlamanın temellerini de ele alacağız, böylece kodlamayı öğrenerek bir web sitesi oluşturabilirsiniz.

Sıfırdan Web Sitesi Kodlamaya Karşı Web Sitesi Oluşturucular

İnternetin ilk günlerinde bir web sitesi oluşturmak karmaşıktı. Çünkü geliştiricilerin bir web sitesini sıfırdan kodlaması gerekiyordu ve bu da haftalar olmasa bile saatler alıyordu.

Ancak o günler artık geride kaldı.

İnternetteki tüm web sitelerinin %62,9’undan fazlası bir web sitesi çerçevesi üzerine inşa edilmiştir, bu nedenle geliştiricilerin artık sıfırdan bir web sitesinin nasıl oluşturulacağını bilmeleri gerekmez.

Çoğu geliştirici artık web sitesi oluşturmayı hızlandırmak için açık kaynaklı WordPress ve diğer CMS platformlarını (web sitesi oluşturucu çerçeveleri) kullanıyor.

Tüm web sitelerimiz için kodsuz sayfa oluşturucuları (WordPress ve SeedProd) kullanıyoruz. Bunları kullanışlı, özelleştirilebilir ve verimli buluyoruz.

Vakaların %95’inde, web sitesi oluşturucuları veya kodsuz çözümler ile bir web sitesi oluşturabilirsiniz ve sıfırdan kod yazmak kadar iyi olacaktır.

Web Sitesi Oluşturucu Kullanmanın Artıları ve Eksileri

İşte bir web sitesi oluşturucu kullanmanın faydalarından bazıları:

• Yeni başlayanlar için bile kullanımı kolaydır.
• Web geliştirmeyi öğrenmek için zaman ve para harcamanıza gerek yok.
• Size zaman kazandırır ve bu zamanı işinizi büyütmek için harcayabilirsiniz.
• Bir servet harcamadan kolayca e-ticaret, üyelik ve işletme web siteleri oluşturun.

Ancak, bir web sitesi oluşturucu kullanmanın birkaç dezavantajı vardır:

• Web siteniz, yavaşlamasına neden olabilecek gereksiz özelliklere sahip olabilir.
• Bir proje için CMS özelliklerine ihtiyacınız olmayabilir, ancak yine de yazılım güncellemelerini ve yedeklemelerini sürdürmeniz gerekecektir.

Sıfırdan Kod Yazmanın Artıları ve Eksileri

İşte sıfırdan kendi başınıza kod yazmanın bazı faydaları:

• Web siteniz yalnızca ihtiyaç duyduğu koda sahip olacak ve bu da daha hızlı yüklenmesini sağlayacaktır.
• Yazılım güncellemelerini sürdürmeniz gerekmez.
• Yeni WordPress kariyer fırsatlarına yol açabilecek değerli programlama becerileri kazanacaksınız.

Ancak, bu avantajları aşağıdaki dezavantajlarla karşılaştırmanız gerekecektir:

• HTML, CSS ve JavaScript’te kod yazmayı öğrenmek için saatler ve günler harcayacaksınız.
• Önceden oluşturulmuş bir arka uç sistemine erişiminiz olmayacağı için içeriği dinamik olarak oluşturmak zor olacaktır. Buna ek olarak, PHP veya Python gibi sunucu tarafı dillerini öğrenmeniz gerekecektir.
• İçerik eklemek ve güncellemek için birden fazla dosyanın düzenlenmesi gerekecektir.
• Yeni işlevler, SEO (arama motoru optimizasyonu) ve üçüncü taraf araçlarla entegrasyonlar eklemek zor olacaktır.
• Başkasına tam kontrol vermeden web sitenize erişimi kolayca paylaşamazsınız.
• Kodu sizin için yazması için bir geliştirici tutarsanız, bu pahalı olacaktır ve çok uygun maliyetli olmayacaktır.

Daha fazla ayrıntı için web sitesi oluşturucular ve manuel kodlama hakkındaki kılavuzumuza bakın.

Zaman en değerli varlığınız olduğundan, kod yazmayı sizin için yapan araçları kullanarak bir web sitesini kodlamanın en hızlı yollarını göstereceğiz (yöntem 1 ve 2 bunu kapsayacaktır).

Yöntem 3’te, sıfırdan bir web sitesinin nasıl yapılacağına ilişkin kaynakları paylaşacağız. Bu, programlama öğrenmek isteyen öğrenciler için harikadır.

Bununla birlikte, bir web sitesinin nasıl kodlanacağına bakalım. Kullanmak istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

1. WordPress ile Özel Bir Web Sitesi Kodlayın

WordPress en popüler web sitesi oluşturma platformudur. Aslında, CMS pazar payı raporumuza göre, WordPress internetteki tüm web sitelerinin %43’ünden fazlasına güç vermektedir.

Tüm web sitelerimiz için WordPress kullanıyoruz. Derinlemesine WordPress incelememiz, artılarını ve eksilerini daha ayrıntılı olarak tartışıyor.

Kod yazmayı öğrenmeden sıfırdan özel bir web sitesi oluşturmanızı sağlayan birden fazla araca sahiptir.

Bizim WordPress tasarım aracımız SeedProd‘dur. Bu, 1 milyondan fazla web sitesi tarafından kullanılan en iyi sürükle ve bırak web sitesi oluşturucusudur ( SeedProd incelememizin tamamına bakın).

WordPress ile başlamak için bir alan adına ve web barındırma hizmetine ihtiyacınız olacak. Bluehost kullanmanızı öneririz.

En iyi WordPress barındırma sağlayıcılarından biridir ve okuyucularımıza ücretsiz bir alan adı ve barındırmada büyük bir indirim (sadece 1,99 $ / ay) sunuyorlar.

Alternatiflere bakmak isterseniz Hostinger, SiteGround veya diğer en iyi WordPress barındırma şirketlerinden birini öneririz.

Bir alan adı ve barındırma aldıktan sonra, bir sonraki adım WordPress’i kurmaktır (doğru şekilde).

Bluehost gibi çoğu barındırma hizmeti, tek tıklamayla kullanıcı dostu WordPress yükleme işlemine erişmenizi sağlayacaktır.

WordPress’i kurduktan sonra, yönetici kontrol paneline giriş yapabilirsiniz. Şuna benzer bir şey görünecektir:

Ardından, SeedProd eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılar için WordPress eklentisi yükleme eğitimimize bakın.

SeedProd, WordPress için en iyi WordPress sürükle ve bırak sayfa oluşturucusudur. Kendi web sitenizi kolayca tasarlamanıza ve herhangi bir kod yazmadan güzel sayfalar oluşturmanıza olanak tanır.

Hatta sıfırdan kendi özel WordPress temanızı oluşturmak için bile kullanabilirsiniz. Bu, kullanıcıların ziyaret ettiklerinde görecekleri web sitenizin ön ucu olacaktır.

SeedProd’u kurduktan sonra, SeedProd ” Açılış Sayfaları sayfasına gidin ve ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklayın.

Bir sonraki ekranda sizden bir şablon seçmeniz istenecektir.

SeedProd, başlangıç noktası olarak kullanabileceğiniz düzinelerce güzel tasarlanmış şablona sahiptir veya boş bir sayfa ile başlamak için ‘Boş Şablon’u seçebilirsiniz.

Bundan sonra, sayfanız için bir başlık ve bir URL slug girmeniz istenecektir.

Örneğin, web sitenizin ön sayfasını oluşturuyorsanız, başlık ve URL olarak ‘Ana Sayfa’ girebilirsiniz.

Ardından, ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklamanız gerekir.

SeedProd şimdi sayfa oluşturucu arayüzünü yükleyecektir. Düzenlemeye başlamak için basitçe işaret edip tıklayabileceğiniz sezgisel bir sayfa oluşturucudur.

SeedProd’un sürükle-bırak arayüzü yeni başlayanlar için kolay ancak geliştiriciler için yeterince güçlüdür.

Sol sütunda, sayfanıza ekleyebileceğiniz bloklar halinde en sık kullanılan web tasarım öğelerini göreceksiniz.

Sağınızda, tasarımınızın canlı bir önizlemesini göreceksiniz. Düzenlemek, silmek veya taşımak için herhangi bir öğenin üzerine gelip tıklayabilirsiniz.

Temel olarak, kod yazmadan navigasyon menüsü, kenar çubukları ve altbilgiler dahil olmak üzere özel bir web tasarımı oluşturabilirsiniz.

Ancak, özel kod eklemeniz gerekiyorsa, bunu Özel HTML bloğunu sürükleyip bırakarak yapabilirsiniz.

Özel HTML bloğunun içine herhangi bir HTML kodunu manuel olarak ekleyebilirsiniz.

Özel HTML bloğunuzun kenar boşluğunu, dolgusunu ve tasarım niteliklerini de ayarlayabilirsiniz.

Benzer şekilde, sayfanıza özel CSS kodu da ekleyebilirsiniz.

Sol alt köşedeki ‘Ayarlar’ düğmesine tıklayın ve ‘Özel CSS’yi seçin.

Sayfanızı düzenlemeyi bitirdiğinizde, yayına almak için ‘Kaydet ve Yayınla’ düğmesine tıklayın.

Sayfanızı canlı olarak görüntülemek için ‘Önizleme’ düğmesine de tıklayabilirsiniz.

Web siteniz için diğer sayfaları oluşturmak için işlemi tekrarlamanız yeterlidir. Dakikalar içinde hızlı bir şekilde küçük işletme web sitesi oluşturabilirsiniz.

SeedProd web sitesi oluşturucu, zahmetsizce bir web sitesi oluşturmayı ve düzenlemeyi kolaylaştırır.

Bu nedenle dünya çapında birçok profesyonel geliştirici onu kullanıyor. Awesome Motive gibi büyük şirketlerdeki geliştiriciler bile ana web sitelerini oluşturmak için SeedProd’u kullanıyor çünkü hızlı dağıtım ve özelleştirmeye izin veriyor.

SeedProd’a Alternatifler

Kullanabileceğiniz başka popüler WordPress sayfa oluşturucuları da vardır. Aşağıdakiler, yeni başlayanlar için kod yazmadan sıfırdan bir web sitesi kodlamak için en iyi seçimlerimizdir:

• Thrive Architect – 357’den fazla önceden tasarlanmış düzene sahip dönüşüm odaklı bir sayfa oluşturucu.
• Divi Builder – Sürükle ve bırak tema ve sayfa oluşturucu
• Beaver Builder – Bir başka tanınmış WordPress sayfa oluşturucu
• Astra, tek bir tıklamayla yükleyebileceğiniz hazır başlangıç web siteleri ile son derece özelleştirilebilir bir temadır.

WordPress’e karşı önyargılı olsak da, popülerliği kendi adına konuşuyor. BBC, Microsoft, Facebook, The New York Times gibi birçok büyük şirket WordPress kullanıyor.

2. Web.com Web Sitesi Oluşturucu ile Web Sitesi Kodlama

Alan adı alma, barındırma ve WordPress gibi çeşitli yazılımları yükleme zahmetine girmek istemiyorsanız, Web.com internet sitesi oluşturucusunu kullanabilirsiniz.

Basit işletme web siteleri ve çevrimiçi mağazalar oluşturmak için harika bir platformdur. Hatta sürece yardımcı olan rehberli bir sihirbazları bile var.

Web.com fiyatlandırma planları ücretsiz bir alan adı, ücretsiz SSL sertifikası, düzinelerce şablon ve hızlı bir şekilde web sitesi kopyası oluşturmanıza yardımcı olacak bir AI yazma aracı içerir.

Binlerce güzel önceden hazırlanmış web sitesi şablonundan birini seçin ve tasarımı markanızın ihtiyaçlarına uyacak şekilde nokta ve tıklama ile özelleştirin.

Kurucu, beklediğiniz tüm güçlü özelliklerle birlikte gelir.

Fotoğraf galerileri, videolar, referans kaydırıcıları, iletişim formları, harita konumları, sosyal medya düğmeleri ve daha fazlasını kolayca ekleyebilirsiniz.

Güncellemeler, güvenlik veya yedeklemeler konusunda endişelenmenize gerek yok çünkü Web.com bunların hepsini sizin için hallediyor. Ayrıca 7/24 sohbet, e-posta ve telefon desteği de sunuyorlar.

Web.com’a Alternatifler

Piyasada pek çok farklı hepsi bir arada çözüm bulunmaktadır. Constant Contact dışında, WordPress olmayan kolay internet sitesi kurucuları için en iyi seçimlerimiz şunlardır:

• Gator by HostGator – Sürükle ve bırak araçları ve şablonları ile tamamen barındırılan web sitesi oluşturucu.
• Domain.com Web Sitesi Oluştur ucu – Her tür web sitesi için düzinelerce güzel şablon içeren barındırılan web sitesi oluşturucu
• HubSpot – Küçük işletmeler için hepsi bir arada web sitesi oluşturucu ve pazarlama platformu
• Wix – Bir başka iyi bilinen sürükle ve bırak internet sitesi kurucusu.
• BigCommerce – E-ticaret mağazaları oluşturmak için tamamen barındırılan web sitesi oluşturucu.

Daha fazla seçenek için, artıları ve eksileri ile en iyi internet sitesi kurucuları karşılaştırmamızı görebilirsiniz.

Bir uzmanın sizin için özel bir web sitesi tasarlamasını ister misiniz? Web.com ekibi, kullanıcılarımıza özel bir fırsat sunarak özel web tasarım hizmetleri de sunmaktadır. Ücretsiz teklifinizi bugün alın.

3. Sıfırdan Bir Web Sitesi Kodlamayı Öğrenin

Öğrenciyseniz ve bir web sitesini sıfırdan nasıl kodlayacağınızı öğrenmek istiyorsanız, HTML, CSS ve daha fazlası gibi web sitesi geliştirme temellerini anlamanız gerekecektir.

Birçok ücretsiz ve ücretli kurs olsa da, bulduğumuz en iyisi Code Academy‘deki kurs.

Tamamlanması yaklaşık 9 saat sürer, ancak sonunda HTML, CSS ve Bootstrap kullanarak sıfırdan özel bir duyarlı web sitesi kodlamayı öğrenmiş olacaksınız.

Kursu bitirdikten sonra bile, sıfırdan web sitesi kodlama konusunda gerçekten verimli olabilmeniz için saatlerce pratik yapmanız gerekecektir. Bir sonraki bölümde, HTML ve CSS kullanarak çok temel bir web sitesini nasıl kodlayacağınızı göstereceğiz.

Temel Bir Statik Web Sitesinin Kodlanması

Web siteleri HTML, CSS ve bazen biraz JavaScript kullanır.

HTML (Hyper Text Markup Language), resimler, metinler, videolar ve daha fazlası gibi içerikler de dahil olmak üzere bir web sayfasının temel düzenini tanımlar.

CSS renkleri, kenar boşluklarını, dolguyu, metin boyutunu ve daha fazlasını tanımlar.

Bu kodu yazmak için bir kod düzenleyiciye ihtiyacınız olacaktır. Bir kod düzenleyici, hataları kolayca yakalamanıza ve daha verimli kod yazmanıza yardımcı olan sözdizimi vurgulama ile birlikte gelir.

Ardından, bir proje başlatmanız gerekecektir.

Bilgisayarınızda yeni bir klasör oluşturun ve istediğiniz adı verin. Burası tüm web sitesi dosyalarınızı saklayacağınız yerdir.

Kod düzenleyicinizi açın ve yeni bir dosya oluşturun. Bu web sitenizin ana sayfası olacağından, index.html olarak adlandırmanızı öneririz.

Bu dosya, ilk web sayfanız için HTML kodunu yazacağınız yerdir.

Temel bir HTML sayfası aşağıdaki bölümleri içerir.

• HTML belge sarmalayıcı
• Kafa
• Vücut

Bu yapıyı aşağıdaki kodu yazarak tanımlayabilirsiniz:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>

doctype HTML bildirimi web tarayıcılarına sadece bunun bir HTML sayfası olduğunu söyler.

Bundan sonra, head bölümünün içindeki kod ekranda görünmez.

HTML belgenizin başlığı, CSS dosyasına bağlantı ve daha fazlası gibi HTML belgeniz için meta verileri tanımlar.

Şimdi HTML sayfanızın head bölümünü dolduralım:

<!DOCTYPE html>
<html>
    <head>
		<title>Star Plumbing Services</title>
		<link rel="stylesheet" href="style.css" /> 
    </head>
    <body>

    </body>
</html>

Web sitenizin gövde bölümü, sayfa düzenini tanımladığınız ve içeriği eklediğiniz yerdir.

Burada üstbilgi, ana içerik alanı ve altbilgi içeren örnek bir web sayfası yer almaktadır:

<!DOCTYPE html>
<html>
    <head>
		<title>Star Plumbing Services</title>
		<link rel="stylesheet" href="style.css" /> 
    </head>
    <body>
		<header id="header" class="site-header"> 
		<h1 class="site-title">Star Plumbing Services</h1>
		<nav class="site-navigation">
		<ul class="nav-menu">
		<li><a href-"index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li> 
		</ul>
		</header> 
		
		<article id="main" class="content"> 
		
		<h2>The Best Plumbing Service Providers in Pawnee!</h2>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
		
		<p><a href="contact.html" class="cta-button">Call Now</a></p>
		
		<p><img src="images/plumbing-services.jpg" alt="Star plumbing services at work" width="600px" /></p>
		
		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		</article> 
		
		<footer>
		<p>© 2023 Star Plumbing Services. All Rights Reserved - Call us +1-5555-5555</p>
		</footer> 

    </body>
</html>

Sahte içeriği kendi içeriğinizle değiştirmekten çekinmeyin ve değişikliklerinizi kaydetmeyi unutmayın.

HTML belgenizi kaydettikten sonra, bir tarayıcıda önizleyebilirsiniz. Bu şekilde görünecektir:

Bunun nedeni HTML belgemizin var olmayan iki dosyaya işaret etmesidir. Bunlardan ilki CSS stil sayfasıdır.

CSS veya Basamaklı Stil Sayfası başka bir kodlama dilidir. HTML belgelerinizdeki HTML öğelerini, yapı taşlarını ve div seçicilerini şekillendirmek için kullanılır.

Kod düzenleyicinizi kullanarak style.css adında bir dosya oluşturun ve index.html dosyanızla aynı klasöre kaydedin.

Bundan sonra, style.css dosyanıza aşağıdaki kodu ekleyin:

body {
	margin:0;
	padding:0;
	font-family:sans-serif; 
	font-size:16px;
	background-color:#f2ffee;
}

h1, h2, h3 { 
font-family:Georgia, Times, serif; 
} 

h2 { 
font-size:xx-large;
}

.site-header {
background-color:#2751ac;
width:100%;
padding:20px; 
overflow: auto;
color:#FFF;
	} 

	
.site-title { 
float:left; 
}

.site-navigation { 

float:right;
text-align:right;
margin:20px 50px 0px 0px;
} 

ul.nav-menu { 
list-style-type:none;
list-style:none;
}
ul.nav-menu li { 
display:inline;
padding-right:20px;
}


.site-header:after{ 
clear:both;
}

#main {

margin:0 auto; 
background-color:#FFF;
	} 

.content {
	
max-width:60%;
padding:30px;
margin:50px 0px 50px 0px;
font-size:18px;
}

.content p { 
margin:50px 20px 50px 20px; 

}

a.cta-button {
    background-color: green;
    padding: 20px 100px 20px 100px;
    color: #fff;
    text-decoration: none;
    font-size: xxx-large;
	border:2px solid #abfcab;
	border-radius:18px;
   
}

footer {
background-color:#2751ac;
width:100%;
padding:20px; 
overflow: auto;
color:#FFF;
	} 

Bu, şekillendirmeyle ilgilenir. Ancak, CSS’nin burada gösterdiğimizden çok daha fazlasını yapabileceğini lütfen unutmayın.

Kullanıcı deneyimini iyileştirmek, animasyonlar eklemek, öğeleri farklı ekran boyutlarına göre ayarlamak için medya sorgularını kullanmak ve daha fazlası için kullanılabilir.

Ardından, yine de bir resim yüklememiz gerekiyor.

Projenizde yeni bir klasör oluşturun ve images olarak adlandırın.

Şimdi, görüntülemek istediğiniz bir resim oluşturmanız ve bunu images klasörüne eklemeniz gerekir.

Ardından, HTML kodundaki resim adını ‘plumbing-services.jpg’ yerine kendi resim dosyanızın adıyla değiştirin.

Tüm değişiklikleri kaydetmeyi ve sayfanızı tarayıcıda önizlemeyi unutmayın.

Web siteniz için başka sayfalar oluşturmak için işlemi tekrarlamanız yeterlidir. index.html dosyasını diğer sayfalar için şablon olarak kullanabilirsiniz.

Umarız bu makale bir web sitesinin nasıl kodlanacağını öğrenmenize yardımcı olmuştur. WordPress’i tercih ettiyseniz, bir haftadan kısa sürede WordPress’ i (ücretsiz) öğrenmek veya yeni başlayanlar için en iyi kod editörlerine göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.