Perşembe , Ağustos 17 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML Dersleri / Html Basit Stil Dersleri (9. Ders Style)

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

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

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.

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.

<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.

<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.

<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.

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.

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.

Hakkında BilgeBank

İlgili Makale

html form alanı

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 …

Bir Cevap Yazın