Website Kodları

Bootstrap bir Css Framework'tür. En çok tercih edilmesinin sebebi kolaylıkla mobil uyumlu sayfalar yapılmasıdır. Mobil uyumlu sayfaların sisteminin temeli ızgara yapısıdır. Izgara yapısı col-md, col-lg gibi kodlarla oluşturulur. Çalışma mantığı sayfayı en az 2, en fazla 6 farklı sütuna bölebilirsiniz. Bu böldüğünüz sayfa ekran genişliğine göre şekil alacaktır. Sanırım bunu örneklerle daha iyi anlayabilirsiniz.


Sayfayı İkiye Bölen Bootstrap Örneği:

<div class="container">
<div class="row">
<div class="col-md-6">1. KISIM</div>
<div class="col-md-6">2. KISIM</div>
</div>
</div>

Sayfayı Üçe Bölen Bootstrap Örneği:

<div class="container">
<div class="row">
<div class="col-md-4">1. KISIM</div>
<div class="col-md-4">2. KISIM</div>
<div class="col-md-4">3. KISIM</div>
</div>
</div>

Sayfayı Dörde Bölen Bootstrap Örneği:

<div class="container">
<div class="row">
<div class="col-md-3">1. KISIM</div>
<div class="col-md-3">2. KISIM</div>
<div class="col-md-3">3. KISIM</div>
<div class="col-md-3">4. KISIM</div>
</div>
</div>

Sayfayı Altıya Bölen Bootstrap Örneği:

<div class="container">
<div class="row">
<div class="col-md-2">1. KISIM</div>
<div class="col-md-2">2. KISIM</div>
<div class="col-md-2">3. KISIM</div>
<div class="col-md-2">4. KISIM</div>
<div class="col-md-2">5. KISIM</div>
<div class="col-md-2">6. KISIM</div>
</div>
</div>

Bu kodları tek tek deneyerek öğrenebiliriniz.

Değişkenler, her programlama dilinde olduğu gibi php'de de vazgeçilmez yardımcımızdır. Değişkenler adı üzerinde aldığı değere göre değişim gösterebilen kodlardır. Değişken sayı olur, yazı olur, matematik işlemi olur vs.. Bu yazıda okuyacağınız her kelime size php kodlarken yardımcı olacaktır, ışık tutacaktır. Php'de değişken tanımlarken bazı katı kurallar vardır. Önce değişken tanımlamadan bahsedelim sonra kurallarından.

Php'de Değişken Tanımlama:

$degiskenismi = "Değişken metni"; // Değişkenin içine "Değişken metni" yazısını yerleştirdik.
$degiskenismi = 58; //Değişkene 58 sayısını atadık.
$degiskenismi = 44+12; //Değişkene 44+12 işleminin sonucunu atadık.

$a=5;
$b=3;
$degisken1 = $a+$b; //Değişkene a değişkeni ile b değişkeninin toplamını atadık.
$degisken2 = $a-$b; //Değişkene a değişkeni ile b değişkeninin farkını atadık.
$degisken3 = $a/$b; //Değişkene a değişkeni ile b değişkeninin bölümünün sonucunu atadık.
$degisken4 = $a*$b; //Değişkene a değişkeni ile b değişkeninin çarpımını atadık.
$degisken1 = $a%$b; //Değişkene a değişkeni ile b değişkeninin bölümünden kalan sonucu atadık.

Php'de Değişken Tanımlama Kuralları:

1) Değişken tanımlamadan önce başına dolar "$" işareti konulur.

Doğru: $degisken;
Yanlış; #degisken;
Yanlış: degisken;

2) Değişkene değer atarken eşittir "=" işareti kullanılır.

Doğru: $degisken = 55;
Yanlış: $degisken : 28;

3) Değişkenler rakam ile başlayamaz fakat içerisinde rakam bulunabilir.

Doğru: $deg1sken2;
Yanlış: $1degisken;

4) Değişken isminde Türkçe ve özel karakterler kullanılmaz.

Doğru: $degisken;
Yanlış: $değişken;
Yanlış: $degisken@;

5) Değişken isminde boşluk kullanılmaz.

Doğru: $degisken_sayi;
Yanlış: $degisken sayi;

Gerek php kodlamaya yeni başlayanların gerekse yıllardır php kullanan insanların sürekli kullandığı echo komutunun kullanım ipuçlarını bu yazıda bulabilirsiniz. Echo ile metin, sayı, işlem, değişken içeriği gibi birçok şeyi ekrana yazdırabilirsiniz. Yeni başlayanlar Echo kodunun kullanımı kafalarına iyice yazmalıdır.



Echo ile bir metni ekrana yazdırma:

echo "Merhaba Satürn";

Echo ile değişkenin içindeki bir metni ekrana yazdırma:

$degisken = "Merhaba Satürn";
echo "$degisken";

Echo ile metnin yanında değişkeni yazdırma:

$degisken = "Satürn";
echo "Merhaba $degisken"

Echo ile metni kalın yazdırma:

echo "Burası <strong>Kalın</strong> olacak.";

Css ile yapabileceğimiz tasarımların sınırı yoktur. Tabi bu sınır sizin yaratıcılık ve becerilerinizle doğru orantılı uzar. Css kodlamak için hemen tüm css kodlarınızı ezberlemenize gerek yoktur. Sadece işin mantığını çözün ve gerekli kaynaklardan yardım alın. Örneğin bu yazımdaki çok kullanılan css kodları sizin çok işinize yarayacaktır.


Arkaplan

background-image:url(resim.uzantı); - arkaplana resim ekler
background-color:renk kodu; - arkaplan rengini belirler
background-repeat: repeat veya no-repeat; - arkaplanın tekrarlanıp tekrarlanmayacağını belirler.

Yazı

color: renk kodu; - yazı rengini belirler
font-size: large; - yazının boyutunu büyük yapar
font-family: verdana; - yazının tipini verdana yapar.
font-weight: bold; - yazıyı kalınlaştırır.

Link

a: - Linkin ilk durumudur.
a-hover: - Linkin üzerine fareyi getirdiğimizde ki durumdur.
a-active: Linke tıkladığımız andaki durumdur.
a-visited: Linkin tıklandıktan sonra alacağı durumdur.

Css kodu yazmanın 3 farklı yöntemi vardır.

Birincisi:

.csskodu{
kodlar
}

İkincisi:
#csskodu{
kodlar
}
Üçüncüsü:

csskodu{
kodlar
}

bu komutların kullanımı html sayfasında farklıdır fakat alacağımız sonuçlar aynıdır. Biraz kafanız karıştıysa yazının devamını okumaya devam edin :).

Birincisinin html kodu:

<div class="csskodu">Kodlar</div>

İkincisinin html kodu:

<div id="csskodu">Kodlar</div>

Üçüncüsünün html kodu:

<csskodu>kodlar</csskodu>

yani buradan anlayacağımız divde kullanacağımız ismi belirtirken nokta "." ile başlarsak div class oluyor, # (diyez) işareti olarak başlarsak div id oluyor, başına bir işaret koymuyorsak aynı <center> gibi kullanabiliyoruz. Biz genellikle class olanını yani nokta ile başlayanını tercih ediyoruz fakat diğerleriyle arasında bir fark yoktur.

Öyleyse şimdi kodları yazmaya başlayalım.

Öncelikle css dosyasını açalım ve şu kodları ekleyelim;

.baslangic{
background-color:red; /*Arkaplan rengini belirtir.*/
width:150px; /*Genişliğini belirtir.*/
height:150px; /*Uzunluğunu belirtir.*/
border-style: solid; /*Kenarlık türünü belirtir.*/
border-width: 1px; /*Kenarlık kalınlığını belirtir.*/
border-color: black; /*Kenarlık rengini belirtir.*/
color:white; /*Yazı rengini belirtir.*/
}

Şimdi html sayfamızı açalım ve <body> </body> etiketleri arasına şu kodu ekleyelim;

<div class="baslangic">Merhaba Mars</div>

Sonuç:














Yazı rengi beyaz olan, siyah, 1px kalınlığında, solid türünde çerçeveli kırmızı bir kutu eklemiş olduk.
Eee bu yazıyı 1 saattir okuyorum kardeşim bu muydu? Diyecek olursanız; unutmayın emeklenmeden yürünmüyor :).

Bunları yapmadan önce Html Sayfasına Css Tanımlama yazımı da okumalısınız.

Meta etiketleri sayfanın <head> </head> etiketleri arasına yazılır. Arama motorlarına, robotlara vs. sayfa hakkında bilgi vermek için kullanılır.

Meta etiketleri seo çalışmalarının olmazsa olmazlarından biridir.

Meta etiketlerinde name kısmı etiketin ismi, content özelliğini tanımlamak için kullanılır.

İşte meta etiketleri:

abstract

Sayfa kısa açıklamasının belirtilmesi için kullanılır.

<meta name="abstract" content="Meta etiketlerinin kullanımı hakkında bilgi veren sayfa" />

copyright

Sayfanın telif hakkının belirtilmesi için kullanılır.

<meta name="copyright" content="(c) 2016 Websitekodlariz Tüm Hakları Saklıdır" />

designer

Sayfanın tasarımcısının belirtilmesi için kullanılır.

<meta name="designer" content="Cihan Kiracı" />

author

Sayfanın yazarını ve iletişim bilgilerini belirtmek için kullanılır.

<meta name="author" content="Cihan Kiracı, cihan2krc@outlook.com" />

content-language

Sayfa dilini belirtir, alttaki örnekte Türkçe belirtilmiştir.

<meta name="content-language" content="tr" />

Aynı zamanda aşağıdaki örnekte dil olarak Türkiye Türkçesi kullanıldığı belirtilmiştir.

<meta name="content-language" content="tr-TR" />

content-type

Sayfanın içerik tipini ve karakter setini belirtmek için kullanılır.

<meta name="content-type" content="text/html charset=utf-8" />
<meta http-equiv="content-type" content="text/html charset=utf-8" />

description

Sayfanın tam açıklamasının belirtilmesi için kullanılır.

<meta name="description" content="Meta etiketlerinin kullanımı, seo etkisi hakkında detaylı bilgi veren güncel sayfa." />

distribution

Sayfanın hitap ettiği bölgenin belirtilmesi için kullanılır.

• Global : Tüm internet ağına hitap ettiğini belirtir.
• Local : Sitenin bulunduğu IP adres bloğunun ait olduğu ülkeye hitap ettiğini belirtir.
• IU (Internal Use) : Kamuya hitap etmediğini belirtir.

Daha önceki yazımda belirttiğim üzere Html, Css olmadan pek bir işinize yaramaz. Tamam o zaman ben Css öğreneceğim diyorsanız ilk önce Html sayfasına Css eklemeyi öğrenmeniz gerekiyor.

Css kodlarımızı Html sayfasına yansıtmanın birden fazla yolu vardır. Bunlardan bazıları şunlardır:


1) Html sayfamızda <head> </head> etiketleri arasına;

<style type="text/css">
Css Kodları Buraya Yazılacak
</style>

eklemek.

2) Uzantısı .css olan bir metin dosyası içine tüm css kodları yazmak ve head etiketleri arasına;

<link rel="stylesheet" type="text/css" href="Buraya css dosyasının adresini yazın" />

 ekleyerek css'i çağırmak.

 Böylece Html5 iskeletimizi oluşturmuş olduk, bunları düzenlemek için diğer konularımıza bakın.