CSS Alan Belirleme (3. Ders Etiket, İd, Class Alanları)

Css dosyamız üzerinde Html sayfamızdaki alanların seçicilerini belirlemek için 3 farklı yöntemimiz vardır.

  1. Html in bize sunmuş olduğu etiket isimlerini yazarak p, span, h1, h2 …. vb gibi hazır etiketlerin isimlerini kullanarak css de seçici alanına sade etiketi yazarak seçicisini belirleyebiliriz. h1 {  }
  2. Seçeceğimiz alana <h1 id=“buyukyazi”> gibi id değeri atayarak da biçimlendirme yapabiliriz.  İd değerini sayfanızda 1 sefer kullanmak için kullanacağınız alanlara verebilirsiniz. İd değeri atadığınız bir etikete css de seçicisine tanımlama yapmak için vermiş olduğunuz ismin başına # işareti ekleyerek tanıtabilirsiniz. #buyukyazi {  }
  3. Seçeceğimiz alana <h1 class=“mavi”> gibi class değeri atayarak da biçimlendirme yapabiliriz.  Class değerini sayfanızda 1 den fazla kullanacağınız alanlara verebilirsiniz. Class değeri atadığınız bir etikete css de seçicisine tanımlama yapmak için vermiş olduğunuz ismin başına . işareti ekleyerek tanıtabilirsiniz. .mavi {  }
body{background-color:#f1ccc8}

<body> Etiketi temel bir etiket olduğu için Css de tanımlama yaparken seçicisine body yazmamız yeterli oldu.

{background-color:#f1ccc8} Komutu ile <body> alanının yani arka planın Pembenin tonlarından olan #f1ccc8 renk kodunda olmasını istedik.

h1{
font-size:12px;
text-align:center;
color:red;
}

<h1> Etiketini seçmek için seçici alanına h1 yazmamız yeterli olur ve  biliyorsunuz ki normalde h1 etiketini kullandığımızda o alana yazdığımız yazının en büyük fontlarda başlık şeklinde yazar ancak biz css de h1 etiketinde değişiklik yaptık.

font-size:12px; Komutu ile h1 etikeninin yazı fontunu 12px boyutuna düşürdük.

text-align:center; Komutu ile h1 etiketimizin yazılarını sayfanın ortasına aldık.

color:red; Komutu ile h1 etiketimizin yazı renginin kırmızı olmasını istedik.

#buyukyazi{
font-size:60px; 
color:green;
}

<h1 id=“buyukyazi”> Bu şekilde değiştirmiş olduğumuz h1 etiketine id atayarak ve buyukyazi ismini ekleyerek bir id oluşturduk yukarıdaki genel h1 yapısını tamamen değiştirmiştik buyukyazi ismi ile atadığımız id ye farklı değerler atadık.

#buyukyazi : tanımlaması ile buyukyazi alanımızı # işaretini kullanarak bunun bir id alanı olduğunu Css  seçicisine tanımladık.

font-size:60px; Komutu ile <h1 id=“buyukyazi”> alanımızın yazı fontunu 60px boyutuna yükselttik.

color:green;  Komutu ile <h1 id=“buyukyazi”> alanımızın yazı renginin Yeşil olmasını istedik.

Not: İd atamış olduğumuz etiketleri sayfamızda bir sefer kullanmamız yazım kuralları için önemlidir. Aşağıdaki class değeri özelliklerine baktığınız da daha iyi anlayacaksınız.

.sari{
color:yellow; 
font-weight: bold;
}

<h1 class=“sari”> Şekilde değiştirmiş olduğumuz h1 etiketine class atayarak ve sari ismini vererek bir class oluşturduk yukarıdaki genel h1 yapısı ve <h1 id=“buyukyazi”> İd alanını tamamen değiştirmiştik sari ismi ile atadığımız class’a farklı değerler atadık.

.sari : Tanımlaması ile sari alanımızı . işaretini kullanarak bunun bir class alanı olduğunu Css  seçicisine tanımladık.

color: yellow; Komutu ile <h1 class=“sari”> etikeninin yazı rengini  sarı yaptık.

Not: Sari classını artık hangi etikette kullanırsak kullanalım o alanın yazı rengi sarı olacaktır. Örnek olarak <p> etiketi içinde bir yazı yazdık ve onun class değerine sarı dersek css de tanımlamış olduğumuz .sari alanınındaki değerleri <p> etiketimize de uygulayacaktır.

 

.mavi{	
color:blue; 
font-weight: normal; 
background-color:#FFF;
}

<h1 class=“mavi”> Şekilde bir class daha oluşturduk ve bunun içine de farklı değerler atadık css kodlarımıza aşağıdaki değerleri verdik.

.mavi : Tanımlaması ile mavi alanımızı . işaretini kullanarak bunun bir class alanı olduğunu Css  seçicisine tanımladık.

color:blue; Komutu ile <h1 class=“mavi”> etiketimizin yazı rengini  mavi yaptık.

background-color:#FFF; Komutu ile <h1 class=“mavi”> alanımızın arkasında beyaz bir arka plan olmasını istedik.

<h4 class="mavi"> H4 Etiketini Class Atayarak Mavi Yaptık.</h4>

Body alanında <h4 class=mavi> adında bir <h4> etiketi oluşturduk farkettiyseniz mavi classına atadığımız özellik olan yazı rengini mavi yap ve arka planını beyaz renkte arka planı uygula komutunu başarıyla uyguladı, ancak yazımızı ortalamadı. Yazımızı sol taraftan başlattı bunun sebebi yukarı da h1 etiketine text-align:center; Komutu ile h1 etiketimizin yazılarını sayfanın ortasına almıştık. h4 etiketinde bir komut belirlemediğimiz için varsayılan olarak h4 etiketimizi sayfanın solundan  başlattı. Bunun için altında h4 etiketiyle bir alan daha oluşturduk.

<h4 class="mavi yazibuyut ortala">H4 Etiketini Class Atayarak Sari Yaptık.</h4>

Açmış olduğumuz bu h4 etiketine 3 farklı class değerleri atadık “mavi yazibuyut ortala”  isimlerini verdik class değerine birden fazla tanım ekleyebilirsiniz. Bunu pek fazla kullanmasanız da işin mantığını öğrenmeniz yeterlidir.

mavi class değeri ile yazımızın rengini mavi ve arka planını beyaz yaptık.

Css de yazibuyut isimli class komutumuza {font-size:40px;font-weight: bold; } komutlarını vererek yazı boyutunu 40px boyunda ve kalın yazı biçiminde olmasını tanımladık.

Css de ortala isimli class komutumuza {text-align:center;} Komutlarını vererek yazıların ortalanmasını istedik.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/CSS-Alan-Belirleme-3.-Ders-Etiket-İd-Class-Alanları.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

CSS Yapısı Ve Kuralları (2. Ders Seçici { Özellik : Değer ; } )

Css’in yapısına bakacak olursak Seçici { Özellik : Değer ; } Olarak komutlarımızı yazarız.

Seçici Alanı : Html sayfamızdaki id, Class değerlerimizi veya Etiketimizin ismini yazarak hangi alanda işlem yapacağımızı belirtiriz. örnek olarak html sayfamızda kullandığımız <span> etiketini tanımlamak için span  yazmamız yeterli olacaktır veya <div id=alanadi> alanımızda işlem yapacağımızı belirtmek için #alanadi yazmamız yeterlidir.  id, Class değerleri için bundan sonraki dersimizde açıklayacağız şimdilik seçicinin mantığını öğrenmeniz yeterlidir.

Özellik ve Değer Alanı : Özellik ve Değer alanı seçiciden hemen sonra {Süslü Parantezler içine yazılır} Özellik alanı seçtiğimiz alana hangi işlemi yaptıracağımızı belirler. Örnek olarak background-color: dediğimizde arka plana renk vermek istediğimizi belirleriz. Değer Alanında ise değerinin hangi renkte olacağını belirleriz { background-color: red ; } gibi tanımlamamızı yaparız. Bu komutla kısaca dedik ki seçtiğimiz alanın arka plan rengi kırmızı olsun.  Bu alanda dikkat etmemiz gereken ve alışkanlık kazanmamız gereken kısım Özellik ve Değer verdikten sonra ; Noktalı Virgül işaretini koyarak bir sonraki kodun devamının geleceğini belirtmeliyiz. Türkçedeki Virgül işareti gibi düşünebilirsiniz Mavi, Sarı, Kırmızı diye kelimeleri ayırırız.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/İndex.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

Örneğimizi İncelersek bir span alanı oluşturduk ve bu span alanınını css de tanımlarken sadece span dedik  ve süslü parantezler içinde komutlarımız yazdık.

span Seçici alanımız belirledik.

{ süslü parantez açarak komutumuza başladık.

background-color:red; Komutu ile span alanımızın arka planının kırmızı olmasını belirledik ve noktalı virgül ile bir sonraki komuta geçeceğimizi belirttik.

font-size:50px;  Komutu ile span alanımızdaki yazının 50px boyutunda olmasını istedik ve yine noktalı virgül ile bir sonraki komuta geçeceğimizi belirttik.

color:#FFF; Komutu ile span alanımızdaki yazacağımız yazının renginin #FFF komutu ile yazının beyaz olmasını istedik ve yine noktalı virgül kullanıp bu komutun bittiğini ve ilerde farklı komutlar daha verebileceğimizi belirttik. En son kısımda noktalı virgül kullanmasak da olur ancak alışkanlık edinmek için mutlaka kullanmaya özen gösterin.

} süslü parantezi kapatarak komutumuzu sonlandırdık.

body { text-align:center } Komutu ile Body etiketimizde ki içeriklerin hepsinin ortalanmasını istedik farkettiyseniz tek komut verdiğimiz için noktalı virgül ile bitirmedik, bu şekilde de komut çalışır ancak bir sonraki komuta geçmek için mutlaka noktalı virgül kullanmanız gerekir.

CSS Nedir? (1. Ders CSS Bağlantısı Ve Tanımı )

Css Derslerine Başlamadan önce Html Derslerini bitirmiş olmamız gerekir. Çünkü Css dili Html kodlarımızın daha geniş ve düzenli şekilde biçimlendirmemize yarayan tanımlama dilidir. CSS in açılımı Cascading Style Sheets dir. Türkçe anlamı da Basamaklanmış Stil Katmanları diye okunuyor. Bunlara çok fazla takılmadan, Neden Css Öğrenmeliyiz sorusuna cevap olarak şunları diyebiliriz:

  • Css ile htlm sayfa yapımızı daha kapsamlı şekilde biçimlendirebiliriz.
  • Tasarımındaki değişimleri daha kolay ve pratik yollardan yapmanıza olanak sağlar.
  • Sayfamızdaki kod karmaşasından kurtarır.
  • Pc, Tv, Tablet, Telefon vb. gibi farklı boyutlara sahip ekranlara uyumlu tasarımlar yapmamızı sağar.
  • Farklı geçiş yöntemleri ile efektler yaparak daha görsel tasarımlar yapmamıza yarar.
  • CSS bir web standardıdır xhtml için uyulması gerekir.

Css kodlarını 2 şekilde kullanabilirsiniz:

  • Html derslerinden birkaç örnekte verdiğimiz gibi çalışma dosyamızın içinde head etiketleri arasına style etiketi açarak onun içinde tanımlamaları yaparak css kodlarını işleyebilirsiniz. Bunu pek önermem çünkü baya bir kod karmaşası oluyor çalışma dosyamızda.
  • Bir diğer yöntemi ise çalışma dosyamızın dışında .css uzantısı ile bir çalışma alanı açıp kodlarımızı bu alanda tanımlayarak daha düzenli bir şekilde çalışmalarımızı yapabiliriz.

Css dersleri boyunca birinci seçeneğimizi kullanarak html dosyamızda head etiketi içinde style etiketiyle derslerimizi anlatacağım ama siz ikinci seçeneği derslerinizde uygulayın bunun için .css uzantılı css dosyası oluşturacağız ve html dosyamıza bu dosyayı tanıtacağız. Bunun için bir çalışma klasör oluşturun ve içine index.html ve stil.css isimlerinde iki tane çalışma alanı oluşturalım. stil.css Dosyamız .css uzantısı ile css kodlarını yazmaya hazır ancak bunu html sayfamıza dahil etmeliyiz. Bunun için html dosyamızı açıp head etiketleri içine aşağıdaki bağlantıyı eklemeliyiz ki dışarıdaki .css uzantılı dosyamızın html sayfamızın devamı niteliğinde olduğunu belirtelim.

<link rel="stylesheet" type="text/css" href="stil.css"/>

Bu bağlantı sayesinde stylesheet yani Css Komutlarımızın text/css tipinde aynı klasörde bulunan stil.css dosyasından çağırmamızı istedik bu sayede index.html sayfamızın eki biçiminde çalışma alanımıza tanıttık. Bundan sonra stil.css dosyasında index.html dosyasındaki istediğimiz etiketi şekillendireceğiz.

CSS Nedir (1. Ders CSS Bağlantısı Ve Tanımı )

Bu dosyada hem head etiketleri içinde hemde stil.css dosyasında aynı kodlar yazılmıştır head içindeki style etiketini silerek  stil.css dosyası üzerinden çalışma yapabilirsiniz.

Html Form Alanları (11. Form, İnput, Type, Name, Value )

Html’de form alanlarını kullanıcıların bilgilerini almak için kullanırız bu bilgiler sayesinde kullanıcılar çeşitli bilgileri sayfanıza ekleyebilirler kullanıcı giriş alanlarından tutun kayıt formu, anket formu gibi birçok yerde form özelliğini kullanırız form alanı oluşturmak için <form> etiketini kullanırız ve bunun içinde <input> alanlarımız olur input alanları ile kullanıcının veri girişini yapabileceği alanları oluştururuz. Form alanı oluştururken 2 parametreye ihtiyacımız olur action ve method parametreleridir bunlar formun nereye kaydedileceği ve hangi format olacağını belirler.

  • Action : Form alanında kullanıcının girdiği verilerin hangi sayfada işleneceğini gösterir. Örneğin action=”üyekaydi.php” yazılırsa girilen verilerin üyekaydi.php sayfasında işlemek için o dosyaya gönderir.
  • Method : Verilerin gönderilme biçimini belirler GET veya POST parametreleri kullanılır. GET ile gönderim yaptığınızda adres çubuğunda aramanızla ilgili bilgiler yer alır şifre gibi gizli bilgiler bu metotla kullanılmaz. POST ise daha güvenli bir veri gönderme yöntemidir gizli bilgilerin alınması veya gönderilmesinde POST yöntemi tercih edilmelidir.

<input> etiketimizde type=”” ve name=””  değerlerini bildirmemiz gerekir bu değerler sayesinde alanın tipini ve ismini belirleyerek alanın özelliklerini tanımlarız.

  • Type : Parametresini verdiğimiz özellikle o alanın nasıl bir yapıya sahip olmasını belirliyoruz text dersek ufak bir kullanıcı adı yazmak vb. gibi kısa bilgilerin yazılacağı bir alan oluştururuz type alanına password tanımı verirsek bu alanın parola alanı olmasını ve buraya yazılan yazıların *** biçiminde görünmesini sağlarız veya radio tanımını verirsek bu alanın seçenek alanı olmasını belirleriz bunlar gibi birçok tipi konu altında görebilirsiniz örnekte en çok kullanacağımız tiplerle bir çalışma yapacağız.
  • Name : Parametresine vermiş olduğumuz isim o alanın ismi olur ve veri alırken veya veri çekerken o alana vermiş olduğumuz isim değeri ile tanımlama yaparız programlama dillerine başladığınızda bu alanın önemini daha iyi anlayacaksınız.

Form oluşturmayı daha iyi anlamak için aşağıdaki örneğe göz atabilirsiniz.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/Html-Form-Alanları-11.-Form-Alanları-.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

<form align="center" action="" method="" >

</form>

Örneğimizde form alanımızı oluşturduk ve form alanımızın align=”center” komutu ile form alanımızı ortaladık.  action=”” komutunu boş bıraktık bu alana doldurulan form bilgilerinin nereye gitmesini istiyorsak oranın yolunu belirtiyoruz. method=”” Komutumuzda boş burada gönderim türünü belirtiyoruz GET veya POST metotları ile.

<b>Adınız:</b>   <input type="text" name="isimalani">
<br><br>

Adınız başlığında bir alan açtık ve hemen yanına text tipinde bir yazı alanı oluşturduk bu kısımda kullanıcının isim girmesini istedik. name alanına isimalani ismini  verdik veri çekerken ve veri gönderirken bu isimalani ismi ile istediğimiz verilere ulaşabileceğiz.

<b>Şifreniz:</b>   <input type="password" name="sifrealani">
<br><br>

Sifreniz başlığında bir alan açtık ve bu alanı password tipinde oluşturduk bu alan text alanı gibi olacak ancak buraya yazılan yazılar **** formatın da olacak. name alanına sifrealani ismini  verdik veri çekerken ve veri gönderirken bu sifrealani ismi ile istediğimiz verilere ulaşabileceğiz.

<b>Cinsiyetiniz:</b>	<input type="radio" name="cinsiyete">Erkek 
			<input type="radio" name="cinsiyetb">Bayan
<br><br>

Cinsiyetiniz başlığında bir seçim alanı oluşturduk bunun için type özelliğine radio komutunu verdik bu sayede seçim alanı oluşturduk 2 tane bay ve bayan için input oluşturduk bu sayede kullanıcının cinsiyetini seçim formatında istedik. iki seçimden birini veya daha fazla input ekleyerek bir seçim bilgisini istedik. Name isimlerini veri çekerken veya işlerken tanımlayıcı özellik olarak belirledik bu ismleri istediğiniz gibi yazabilirsiniz.

<b>Bildiğiniz Diller:</b>	<input type="checkbox" name="tr" CHECKED>Türkçe
				<input type="checkbox" name="ing">İngilizce 
				<input type="checkbox" name="alm">Almanca
<br><br>

Bildiğiniz Diller başlığında bir seçim alanı oluşturduk bunun için checkbox özelliği komutunu verdik bu seçim alanı radio seçim alanından farklı olarak birden fazla seçim yapabilme özelliğini taşımaktadır ve Türkçe seçeneğine CHECKED tanımını yaparak bu alanın seçili olarak sunmasını istedik CHECKED tanımını kullanacağımız her alan önceden seçili olarak forum sayfamızda çıkar. Name isimlerini veri çekerken veya işlerken tanımlayıcı özellik olarak belirledik bu ismleri istediğiniz gibi yazabilirsiniz.

<b>Yaşadığınız İl:</b>	<select>
				<option>İstanbul</option>
				<option>Ankara</option>
				<option>İzmir</option>
			</select>
<br><br>

Yaşadığınız İl adında yine bir seçim alanı oluşturduk bunu select etiketi içinde açılır bir seçenek alanı olarak tanımladık option etiketleri içinde seçeneklerimizi sunduk.

<b>Açıklama Alanı:</b>
<br>
<textarea rows="4" cols="35"></textarea>
<br><br>

Açıklama Alanı Adında textarea etiketi ile bir Yazı Alanı oluşturduk text yazı alanından farklı olarak textarea yazı alanı çok satırlı yazı alanı oluşturmamıza yarar rows=”4″ komutu ile bu alanımızın 4 satır yüksekliğinde ve cols=”35″ komutu ile de alanımızın 35 kolon genişliğinde olmasını belirttik.

<input type="submit" name="butonGonder" value="Gönder"><br>

Formumuza submit tipinde bir buton oluşturduk buna butonGonder ismini verdik ve butonun üstünde value komutu ile Gönder ismini yazdırdık. value değeri alanınızda yazmasını istediğiniz yazıyı belirlemenize yarar text alanında da bu değeri girerseniz yazı alanında belirlemiş olduğunuz yazı görünecektir.

<input type="reset" name="butonTemizle" value="Temizle">

Yine Aynı şekilde formumuza reset tipinde bir buton oluşturduk buna butonTemizle ismini verdik ve butonun üstünde value komutu ile Temizle ismini yazdırdık. value değeri alanınızda yazmasını istediğiniz yazıyı belirlemenize yarar text alanında da bu değeri girerseniz yazı alanında belirlemiş olduğunuz yazı görünecektir.

Bunların Dışında formunuza farklı seçim alanları, resim,video, dosya gibi yükleme alanları oluşturabilirsiniz daha kapsamlı form alanları yapmak için ilerleyen derslerde daha kapsamlı form alanları oluşturabiliriz.

Html Tablolama Dersleri (10. Ders Table, TH, TR, TD )

Html’de Tablolama yapmak için <table> etiketini kullanırız ve içinde Satırlar Ve Sütunlar oluştururuz.

Satırları <tr> etiketi kullanarak belirleriz.

Sütunları <td> etiketi kullanarak belirleriz.

Başlık içinde <th> etiketini Kullanırız.

colspan=”?” Komutunu kullanarak Birleştirmek istediğiniz Satır veya Sütunları birleştirebilirsiniz ? Yerine kaç satır/sütun birleşmesi istediğini yazmanız yeterlidir.

border=”1″ Komutu ile tablolara kenarlık yapabilirsiniz.

ayrıca farkı stil kodlarıda kullanarak daha farklı değişikliklerde yapabilirsiniz örnek kodlamayı elimden geldiğince anlaşılır biçimde yapmaya çalıştım umarım yardımcı olur.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/Html-Tablolama-Dersleri-10.-Ders-Table-TH-TR-TD-.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

Html Listeleme Dersleri (9. Ders Sıralı ve Sırasız Listeleme )

Html de listeleme yapmak için <li> etiketini kullanırız ve bu sıralamayı sıralı ve sırasız olarak yapabiliriz sıralı listeleme için <ol> Sırasız listeleme içinde <ul> etiketini kullanırız. Sıralı listeleme ile rakamlar ile başlayan bir sıralama oluşturabilirsiniz ilerde SQL ve programlama dillerine başladığınızda sıkça sıralama işlemleri yapacaksınızdır. Yapacağınız listelemeleri stil kodları kullanarak çeşitli düzenlemeler yapabilirsiniz.

Sıralı listeleme

  1. Birinci Başlık
  2. İkinci Başlık
  3. Üçüncü Başlık
  4. Dördüncü Başlık

Sırasız Listeleme

  • Birinci Başlık
  • İkinci Başlık
  • Üçüncü Başlık
  • Dördüncü Başlık

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/Html-Listeleme-Dersleri-9.-Ders-Listeleme-.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

menuyatay ve menudikey olarak iki alanda listeleme yaptık ve stil kodları kullanarak bu listeyi sayfa menüsü gibi tasarladık. CSS derslerini öğrenerek daha detaylı menüler yapabilirsiniz. Bu menüler için stil kodlarında şu komutları verdik.

Yatay Menü Stil Kodları

.menuyatay{  Tanımlaması ile menuyatay classındaki kodlara şu komutları ver. }

width:800px; Komutu ile Alanımızın 800px genişliğinde olmasını.

height:50px; Komutu ile 50px yüksekliğinde olmasını.

background:#000; Komutu ile Arka planımızın siyah olmasını.

margin:0 auto; Komutu ile Alanımızın ortalanmasını

border-bottom:4px solid red; Komutu ile Alanımızın sadece alt çerçevesinde 4px. genişliğinde kırmızı bir hat olmasını istedik

.menuyatay ul li {Tanımlaması ile menuyatay classının içinde bulunan ul ile listelediğimiz li alanlarına şu komutları ver dedik.}

float:left;  Komutu ile hepsini sola yasla dedik ve bu sayede yatay menü elde ettik bu komutu kullanmasaydık diğer menümüz gibi dikey olurdu.

list-style-type:none;  Komutu ile ul vermiş olduğumuz listelemenin başında bir nokta olacaktı bu komut ile o noktaları kaldırdık.

.menuyatay ul li a{Tanımlaması ile menuyatay classının içinde bulunan ul ve li etiketleri içindeki a etiketiyle verdiğimiz alanlarına şu komutları ver dedik}

color:#fff; Komutu ile yazıların beyaz renkte olmasını istedik.

font:17px Arial; Komutu ile Yazı boyutunun 17px. ve arial formatında olmasını istedik.

text-decoration:none; Komutu ile a etiketinde vermiş olduğumuz bağlantı linklerinin normalde altı çizgili olur bu komut ile altındaki çizgiyi kaldırdık.

display:block; Komutu ile bu alanın bir kutucuk olmasını istedik.

padding:15px; Komutu ile yazı ile kutucuk arasında üstten sağdan alttan ve soldan olmak üzere 14px lik boşlukla başlamasını istedik.

.menuyatay ul li a:hover {Tanımlaması ile menuyatay classının içinde bulunan ul ve li etiketleri içindeki a etiketiyle verdiğimiz alanların üzerine fare ile geldiğimizde şu komutları uygula dedik. }

background:red; Komutu ile Fare imleci üzerine geldiğinde arka plan rengini kırmızı yap dedik.

color:#000; Komutu ile Fare imleci üzerine geldiğinde yazı rengini beyaz yap dedik.

Dikey Menü Stil Kodları

.menudikey {Tanımlaması ile menuyatay classındaki kodlara şu komutları ver.}

width:175px; Komutu ile Alanımızın 175px genişliğinde olmasını.

height:300px; Komutu ile 300px yüksekliğinde olmasını.

background:#000; Komutu ile Arka planımızın siyah olmasını.

border-right:4px solid red; Komutu ile Alanımızın sadece sağ alanındaki çerçevesinde 4px. genişliğinde kırmızı bir hat olmasını istedik

.menudikey ol li { Tanımlaması ile menuyatay classının içinde bulunan ol ile listelediğimiz li alanlarına şu komutları ver dedik.}

list-style-type:none; Komutu ile ul vermiş olduğumuz listelemenin başında bir rakam olacaktı bu komut ile o rakamları kaldırdık.

.menudikey ol li a{Tanımlaması ile menuyatay classının içinde bulunan ol ve li etiketleri içindeki a etiketiyle verdiğimiz alanlarına şu komutları ver dedik. }

color:#fff; Komutu ile yazıların beyaz renkte olmasını istedik

font:17px Arial; Komutu ile Yazı boyutunun 17px. ve arial formatında olmasını istedik.

text-decoration:none; Komutu ile a etiketinde vermiş olduğumuz bağlantı linklerinin normalde altı çizgili olur bu komut ile altındaki çizgiyi kaldırdık.

display:block; Komutu ile bu alanın bir kutucuk olmasını istedik.

padding:14px; Komutu ile yazı ile kutucuk arasında üstten sağdan alttan ve soldan olmak üzere 14px lik boşlukla başlamasını istedik.

.menudikey ol li a:hover{Tanımlaması ile menuyatay classının içinde bulunan ol ve li etiketleri içindeki a etiketiyle verdiğimiz alanların üzerine fare ile geldiğimizde şu komutları uygula dedik. }

background:red; Komutu ile Fare imleci üzerine geldiğinde arka plan rengini kırmızı yap dedik.

color:#000; Komutu ile Fare imleci üzerine geldiğinde yazı rengini beyaz yap dedik.

Html Basit Stil Dersleri (9. Ders Style)

Html’de Stil kodları sayesinde html sayfamızdaki içeriklerin  görünüşlerinde değişiklik yaparız yarayan kodlamadır bunu 3 farklı şekilde yapabiliriz. Yazımız baya bir uzun oldu ancak her kodun her satırın açıklamasını yaparak bunun mantığını anlamanızı istiyorum inşallah sizler için yararlı olacak bir ders olur.

  • Head Etiketleri arasında style Etiketi açarak.
  • Body Etiketleri arasında kullandığımız etiketlere <etiketismi style=”özellik türü“: özelliği; > şeklinde yazarak.
  • Şuanki derslerde olmasada kod dosyamız dışında oluşturacağımız bir CSS dosyası ile sayfamıza dışarıdan çağırarak stil kodlarını kullanabiliriz.

ÖRNEK ÇALIŞMA ŞABLONUMUZ


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/Ders-4-Stil-Dersleri.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

Head Etiketleri içinde <style type=”text/css”> Etiketinde Stil Komutları verme

Head etiketi içinde oluşturacağımız <style type=”text/css”> etiketinde yazacağımız kodlarla body içinde açmış olduğumuz etiketlere komutlar vereceğiz ancak html dersleri boyunca body içinde açtığımız etiketlerde düzenleme yaparak öğrenmeye çalışacağız bu derste örnek olsun diye birkaç kod yazdık ve ilerde css kullanarak  sayfalarda gereksiz kalabalığın olmasını engelleyeceğiz. Aşağıda örnek kodlamada yapmış olduğumuz head etiketi içindeki <style type=”text/css”> etiket komutları şu şekilde verdik.

#yazialani {
width: 600px;	
height: 250px;			
border:4px solid red;
background-color: #333 ;	
color:red;
margin:0px auto;
	  }

Head etiketi içindeki <style type=”text/css”> stil etiketi içinde tanımladığımız #yazialani stil tanımlaması ile body etiketi içinde bulunan <div id=”yazialani”> etiketine aşağıdaki şu tanımlamaları yap dedik ve { açarak  buradan } kapattığım alana kadar içinde yazmış olduklarımı <div id=”yazialani”> alanına uygula dedik.Bu alan örnek sayfamızda bulunan Örnek Yazı Alanının bulunduğu kırmızı çerçeveli alandır. Burada Kafanız karışabilir bu div id veya div class kavramında bu yüzden …. konulu yazımıza buradan göz atabilirsiniz.

width: 600px;  Kodu ile bu alanın 600px genişliğinde olmasını istedik.
height: 250px; Kodu ile bu alanın 250px. yüksekliğinde olmasını istedik.
border:4px solid red; Kodu ile yukardaki boyutlandırılmış alanı 4 px kalınlığında bir kırmızı hat ile çerçevelemesini istedik
background-color: #333 ; Kodu ile alanın arka plan renginin #333 renk tonunda olmasını istedik buna direk black yazıp siyah olmasını söylemektense siyahın renk tonlarından olan #333 olan renk tonunu kulanmak istedik bu farklı renk tonlarını google veya  fotoshop programınızdan bulabilirsiniz temel renkleri ingilizceleri ile yazarak elde edebilirsiniz ancak renklerin tonlaması olunca renk kodu #ile başlayan bir kod içerir.
color:red; Komutu ile bu alanda yazılan yazıların hepsinin renginin kırmızı olmasını istedik örnek yazı alanı neden beyaz diye kafanız karışmasın aşağıdada göreceksiniz #yazialani i alanında ona farklı bir değer atadık.
margin:0px auto; Komutu ile <div id=”yazialani”> alanını üstten sağdan alttan ve soldan olarak otomatik ortalattık bunun farklı yolları da var onları css derslerinde göreceksiniz.

#yazialani i{				
font-family:Arial;		
padding-left:300px;		
font-size:35px ;			
color: #FFF;				
	    }

<div id=”yazialani”> Etiketinin içinde <i> etiketi ile Örnek Yazı Alanı diye bir yazı yazdık bunu style alanında tanıtmak için #yazialani i olarak tanımladık ki <div id=”yazialani”>‘nın içindeki <i> etiketindeki alan için yapılacak değişiklikleri belirtelim.

font-family:Arial; Kodu ile bu yazının Arial Formatın da yazılmasını istedik normalde biliyorsunuz i etiketini kullandığımızda yazının italik olması gerekirken biz ayrı bir tanımla yaparak bunun arial formatına çevirdik.
padding-left:300px; Kodu ile Yazının soldan 300px lik bir boşlukla sağa yaslanmasını sağladık bunu text-align:right komutu ile yapabilirdik ancak padding ile nasıl boşluk bırakılacağının mantığını görün istedik.
font-size:35px ; Kodu ile bu yazının 35px. boyutunda olmasını istedik.
color: #FFF; Kodu ile bu etiketin içinde yazan yazının beyazın tonu olan #FFF renk kodunu kullandık.

#yazialani span{
font-size:20px ;
	       }

<div id=”yazialani”> Etiketi içinde birde <span> alanı var yazıları yazdığımız bu alanı style alanında tanıtmak için #yazialani span diyerek <div id=”yazialani”>‘nın içindeki <span> etiketindeki değişikliği burada bildiriyoruz.

font-size:20px ; Komutu ile bu alanda yazılan yazıların 20px. olmasını istedik.

#yazialani span img{
padding-top:10px;
padding-right:10px;
	           }

<div id=”yazialani”> Etiketinin içindeki <span> etiketinin de içinde bir img etiketi ile resim alanı var bunu da style alanında tanıtmak için #yazialani span img olarak tanıtıyoruz. bunu hem body içindeki img etiketindeki style komutuyla hemde head etiketindeki style komutlarıyla tanıttık. img etiketindeki style komutlarında resmin bulunduğu yerdeki linkini, boyutlarını, ismini ve özellikle align=”right” komutu ile resmi sağa yaslamıştık resim sağ alt köşeyle birleşmişti ve güzel durmuyordu bunun için style komutlarıyla

padding-top:10px; Kodu ile resmin üstündeki yazı ile arasında 10px. bir boşluk bırakmasını ve
padding-right:10px; komutu ile resmin sağındaki çerçeve ile 10px. lik bir boşluk bırakmasını istedik. İlerleyen derslerde css ile kodlamaya başladığımızda bu margin ve padding özelliklerine daha detaylı bakacağız.

.resim {
width: 500px;
height: 250px;
margin: auto;
border: 4px solid yellow;
border-radius: 25px;
background: url(http://www.bilgebank.com/wp-content/uploads/2017/01/yaz%C4%B1-stili-etiketleri-310x205.jpg);
	}

Yazı alanının altında bir resim alanı oluşturduk <div class=”resim”> etiketi ismini verdik ancak içine hiçbir değer girmedik bunun içindeki değerleri head alanında bulunan <style type=”text/css”> içinde .resim tanımlaması ile style etiketine gereken komutları verdik.  div id veya div class kavramını çözdüğünüzü hesap ederek devam ediyoruz. .resim den sonra süslü parantezler içinde şu kodları girerek resmimizi ve diğer özellikleri tanımlayalım.

width: 500px; Kodu ile resmimize 500px. genişlik vereceğimiz.
height: 250px; Kodu ile resmimize 250px. yükseklik vereceğimizi.
margin: auto; Kodu ile resim alanımızı ortaladığımızı.
border: 4px solid yellow; Kodu ile resim alanına verilen boyutlarca 4px. lik bir sarı çerçeve ile belirtileceğini ve
border-radius: 25px; Kodu ile bu çerçevenin 25px. lik bir açı ile oval olmasını istediğimizi bildirdik.
background: url(http://www.bilgebank.com/wp-content/uploads/2017/01/yaz%C4%B1-stili-etiketleri-310×205.jpg); diyerek arka plan olarak bir resim kullanacağımızı bildirdik.

Body Etiketi İçinde Açmış Olduğumuz Etiketlere Style Etiketi İle Stil Kodları Ekleme

 

Body içinde açtığımız  <etiketismi style=”özellik türü“: özellik değeri; > gibi komutlarla o etikete yazan yazının resmin vb gibi verinin nasıl görünmesini tanımlayacağız. örnek olarak aşağıdaki resim etiketi olan img etiketine yapmış olduğumuz tanımlamalar şu şekildedir.

<img src="http://www.bilgebank.com/wp-content/uploads/2017/01/margin-padding.jpg" align="right" width="250" height="100" alt="margin padding"/>

src=”http://www.bilgebank.com/wp-content/uploads/2017/01/margin-padding.jpg” komutu ile resimin bulunmuş olduğu adresi tanıttık.

align=”right” komutu ile resimi sağa yasladık.

width=”250″ komutu ile resime 250px. genişlik verdik.

height=”100″ komutu ile resime 100px. yükseklik verdik.

alt=”margin padding” etiketi ile resme tanım atadık margin padding ismi ile seo için ara motorlarına bu resmin margin padding i anlatan bir resim olduğunu bildirdik.

 

CSS ile şuan anlatım yapmayacağız css derslerine başladığınızda bolca orada alıştırmalar yapacaksınız örnek kodları kullanarak çeşitli değişiklikler yapabilirsiniz aklınıza takılan yerleri yorumlarda sorabilirsiniz.

Html Alan Oluşturma (8. Ders Div, İd ve Class)

Eskiden bir Sayfa şablonu hazırlarken html de Tablolama sistemi kullanılarak Web sitelerinin alanları oluşturuluyordu ancak bu çok sağlıklı ve kullanışlı olmadığı için html geliştiricileri Div Alanlarını html diline dahil ettiler. Html ile bir sayfa şablonu hazırlarken sayfamızda alanlara ihtiyaç duyarız bu alanları <div> etiketi ile belirleriz ancak bir sayfa şablonunda birden fazla alana ihtiyaç duyulacağı için buna <div id=””> ve <div class=””> gibi ayırıcı değerler atayarak düzenlemeleri  atadığımız değer adına göre yaparız id ve class aynı özellikleri bize sağlar ancak xhtml yani kurallarına uygun html yapısı için id değerini sayfada 1 seferlik kullanacağımız yerlere class değerini birden fazla alanda kullanacağımız alanlar için kullanırız. Değer atadığımız Div etiketini Style kodlarına tanıtırken  id değerini verdiğimiz bir div etiketine ( # ) değerini, Class değerini verdiğimiz div etiketine de ( . ) değeri ile tanımlamayı yaparız örneklemelerde daha iyi anlayacaksınız.

Web Sitesi veya bir şablon oluştururken kafanızda bir resim oluşturmalısınız sayfanızda hangi alanların ve hangi boyutların oluşacağı gibi temel resminizi ayarlayıp ona göre düzenlemeler yapmalısınız. örnek olarak bir üst alan oluşturup bunun içine logo ve menü alanı açabilirsiniz. orta kısıma iki alan ekleyip birine yan menü diğerine de içerik alanı olarak düşünebilirsiniz ve alt tarafta bir alan açıp içine 4 farklı bilgi alanı açabilirsiniz yani ilk olarak kafanızda bir şablon oluşmalı ve ona lazım olan alanları hesaplayıp projenize başlayabilirsiniz.

Sayfa Şablon Kodları


Şablonumuz için 4 ana alan oluşturduk tumalan, ustalan, ortaalan, alt ismilerinde.

div id=tumalan etiketinde id değerinde ustalan, ortaalan, alt etiketlerini kapsayıp şablonumuzun 1024 px genişliğinde olmasını istedik.

div id=ustalan etiketinde yanmenu ve icerik alanını kapsayan iki class alanı oluşturduk logo ve menü alanlarını bu alanın içinde class olarak barındırdık.

div id=ortaalan etiketinde yan menu ve içerik alanını  kapsayan iki class alanı oluşturup yan menu ve içerik alanını bu alanın içinde class olarak barındırdık.

div id=alt etiketinde alan adında dört class alanı oluşturup 1.alan, 2.alan, 3.alan, 4.alan kısımlarını bu alanın içinde class olarak barındırdık.

Kafanıza <div class=”temizle”></div> Alanının ne işe yaradığı sorusu gelebilir bu alan bizim kurtarıcımız diyebiliriz ilerde de alan kaymaları gibi sorunlar yaşadığınızda bunu kullanarak alanların kayma sorununu halledebilirsiniz.  Div Kayma Sorununu Nasıl Çözeriz başlıklı konumuzdan bakabilirsiniz.

Div Kayma Sorununu Nasıl Çözeriz

Htlm de  alanlar oluştururken yan yana yerleştirmek için float:left komutunu kullanırız fakat art ardına gelen divlerde  float left komutunu verdiğimiz div den sonraki divdede aynı komutu işler ve kod yapımıza etki eder ve divlerde kayma oluşur. Bu sorunu çözebilmek için clear both komutu kullanmamız gerekecektir.
Clear both komutu ile kendisinden bir önceki float parametresini temizler ve kendisinden sonraki gelen nesneyi düzgün yerleştirmemize yarar.

Clear both Komutunu kullanmak için stil kodlarınız da .temizle diye bir komut stili oluşturun içine {clear:both;} komutunu verin ve html sayfanızda oluşturduğunuz alanlara sağ, sol veya orta gibi parametrelerle düzenleme komutu verdikten sonra div kayması yapan alanınızı düzeltmek için için <div class=”temizle”></div> diye bir class açarak kayma sorununu çözebilirsiniz. örnekteki kodlardan <div class=”temizle”></div> divini kaldırdığınızda nasıl kaymalar oluştuğuna bakarak işin mantığını öğrenebilirsiniz.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/Html-Alan-Oluşturma-8.-Ders-Div-İd-ve-Class.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

Html Arka Plan Renklendirme (7. Ders Arka Plan Renklendirme)

Html’de Arka planlara renklendirme yaparak daha görsel çalışmalar yapabiliriz arka plana renk vermek için bgcolor=”RenkDeğeri“> komutunu vermemiz yeterlidir. Renk değerini değiştirmek için ister temel renk adını yazın (ingilizce) yada Renk ton değerlerini bildiren #CC3BB Gibi renk tonlama kodunu ekleyerek alanınızın arka plan rengini değiştirebilirsiniz. Ayrıca arka planda resimde kullanabilirsiniz resim eklemeyi ilerleyen konularda görebilirsiniz.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/Html-Arka-Plan-Renklendirme-5.-Ders-Arka-Plan-Renklendirme.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

<body bgcolor="#CC3BB">

</body>

Örnek olarak çalışma sayfanızın arka planını değiştirmek istediğinizde açılan Body etiketinden sonra bgcolor=”#CC3BB” komutu vererek tüm sayfanın rengini değiştirebilirsiniz.

<div style="background:red; height:50px; width:500px; border:6px solid white; color:#fff; text-align:center;">Renk Alanı<div> 

Açmış olduğunuz bir alana arka planına renk eklemek için style komutu ile gerekli düzenlemeleri yapabilirsiniz. background:red; gibi renk komutunu kullanarak değiştirebilirsiniz.

background:red; Komutu ile Arka Plan renginin kırmızı olmasını istedik.

height:50px; Komutu ile 50px. yüksekliğinde olmasını istedik.

width:500px; Komutu ile 500px. genişliğinde olmasını istedik.

border:6px solid white;  Komutu ile 6px. genişliğinde beyaz bir çerçeve olmasını istedik.

color:#fff;  Komutu ile içine yazılacak yazının beyaz olmasını istedik.

text-align:center;  Komutu ile  Yazılan yazının alanın ortasında olmasını istedik.