Web Siteniz İçin CSS ve HTML Kurulumu: Bir Rehber

Preslav Dobrev2022-10-28 · 4 min read

Web Siteniz İçin CSS ve HTML Kurulumu: Bir Rehber

Web siteleri oluşturmak, web geliştirmeye başlamanın ilk adımıdır. Web geliştirme meraklılarının öğrenmesi gereken ilk şeylerden biri, bir web sitesi için CSS ve HTML'nin nasıl kurulacağıdır. Temel bir giriş sayfası kurarak, yeni başlayan biri web tasarımı temellerine hazırlanabilir, web geliştirme becerilerini geliştirebilir ve geliştiricilerle iş birliği yapmayı öğrenebilir.

Bu eğitim size web siteniz için HTML ve CSS dosyalarını kurmanın temellerini gösterecektir. Hadi Başlayalım!

Ön Koşullar

Temel düzeyde HTML ve CSS bilgisi.

Adım 1- İlk Kurulum

Başlangıçta, yeni bir proje dizini oluşturacağız ve buna demo-projesi :

mkdir demo-project

1	mkdir demo-projesi

Ardından, cd komutunu kullanarak mevcut dizine geçin:

cd demo-project

1	cd demo-projesi

Proje klasöründe, temel web sitemizi başlatmak için ihtiyaç duyacağımız aşağıdaki dosyaları ekleyelim:

index.html : Bu dosya tüm HTML kodlarını içerecektir.
styles.css : Web sitemizi biçimlendirmek için tüm CSS dosyalarını burada tutacağız.
images : Gerekli tüm görseller bu dosyada tutulmalıdır.

Proje dizinimizi oluşturup gerekli dosyaları eklediğimize göre, bir sonraki adımda index.html dosyamıza HTML içeriğini ekleyerek devam edelim.

Adım 2- index.html Dosyasına HTML İçeriği Ekleme

Bir önceki adımda oluşturduğumuz index.html dosyasına giriş niteliğindeki HTML kodlarını ekleyeceğiz. Bu temel HTML satırları tarayıcı için talimat görevi görecek, ancak web sayfasında görüntülenmeyecektir.

Aşağıdaki kod bloğunu index.html dosyanıza ekleyin:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>CloudSigma'ya Hoş Geldiniz!</title>

</head>

<body>

</body>

</html>

Not: Bu kod bloklarını eklemeden önce index.html dosyasının boş olduğundan emin olun. Ayrıca, <title> bölümünde vurgulandığı gibi başlığı değiştirmeyi düşünün.

Kullanılan terimleri anlayalım:

<!DOCTYPE html> : Tarayıcıyı, HTML belgesinde kullanılan HTML türü hakkında bilgilendiren bir bildirimdir.
- Birden fazla HTML standardı sürümü mevcut olduğundan, DOCTYPE belirtilmesi, tarayıcıların HTML sürümünü zahmetsizce tanımlamasını kolaylaştırır. Örneğin, bu kılavuzda en son sürüm olan HTML5.
<html> : Bu etiket, tarayıcıya içerisindeki içeriklerin HTML olarak ele alınması gerektiğini bildirir. Bir <html> etiketini açtığınızda, bunu </html> etiketiyle kapattığınızdan emin olun. Bu etiket lang özniteliklerini destekler ve web sayfasının dilini belirtebilirsiniz. Eğitimimizde, en dil etiketini kullanarak dili İngilizce olarak ayarladık.
- Kullanılabilecek diğer dilleri kontrol etmek için IANA Language Subtag Registry adresini ziyaret edin.
<head> : Bu, HTML belgesinde bir bölüm oluşturur ve web sayfası hakkında bilgiler içerir. Ancak içerik detayı yoktur ve tarayıcı head bölümünde herhangi bir bilgi görüntülemez.
<meta charset="utf-8"> : Belgenin karakter kümesini belirtir. Çoğu tanınan yazılı dili destekleyen bir Unicode biçiminde, yani UTF-8 olmalıdır.
<title> : <title> etiketi, tarayıcıyı web sayfasının adı hakkında bilgilendirir. Başlık, web sitesi arama sonuçlarında listelendiğinde tarayıcı sekmesinde görünür.
<link rel="stylesheet" href="css/styles.css"> : Tarayıcının CSS stillerini içeren stil sayfasını tanımlamasını sağlar.
<body> : Bu etiket, web sayfasının ana içeriklerini barındırır. Bir <body> etiketi kullanırken, bunu </body> etiketiyle kapattığınızdan emin olun.

Adım 3- CSS Kullanarak Biçimlendirme

Oluşturduğumuz styles.css dosyasına proje ihtiyaçlarınıza göre stil ekleyin. Bu örnekte, aşağıdaki kod satırlarını styles.css dosyanıza ekleyin:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Sonunda web sitemizi yayına almak için ihtiyaç duyacağımız temel HTML ve CSS dosyalarını oluşturduk. Ek olarak, görseller ekleyebilir ve bunları images klasöründe tutabilirsiniz. Dosyayı kaydedip kapatın. Ardından, index.html dosyasını favori web tarayıcınızda açın; ekranınızda temel bir sayfa göreceksiniz.

Sonuç

Bu giriş kılavuzunda, HTML ve CSS kurulumunun temellerini öğrendik ve basit bir web sitesi oluşturduk. Şimdi yeni sayfalar oluşturma, bunları düzenleme, içerik ekleme ve her şeyi navigasyon çubuğundan birbirine bağlama zamanı. Bir sonraki adım olarak, index.html dosyasına daha fazla içerik eklemeyi ve CSS kullanarak bunu şekillendirmeyi deneyin.

Ayrıca, şu adreste bulabileceğiniz diğer HTML ve CSS eğitimleri de mevcuttur: blogumuz:

Keyifli Kodlamalar!

Preslav Dobrev

Yazar · CloudSigma

Preslav Dobrev, CloudSigma'da Kreatif Tasarımcı olarak görev yapmakta olup geleneksel ve yenilikçi pazarlama kanallarını kullanarak tutarlı bir kurumsal kimlik oluşturmaya odaklanmaktadır. Sanatsal vizyonu stratejik pazarlamayla harmanlayarak etkili marka anlatıları oluşturma konusunda oldukça yeteneklidir.