HTML5 Sayfa Yapısı (2.Ders )

HTML5 ile genel sayfa yapısını oluşturmamız XHTML e göre daha basittir. HTML5 de ( DTD )Belge Türü Tanımlaması yapmamıza gerek yoktur. Sayfamızın başına sadece <!DOCTYPE html> bildirisi yapmamız yeterli olacaktır. Bunun dışında sayfamızda klasik olan <html> Etiketimiz, <head> Etiketimiz, <title> Etiketimiz ve <body> Etiketlerimizi oluşturmamız yeterlidir. Türkçe karakter sorunu yaşamamak içinde head etiketleri içinde <meta charset=“iso-8859-9”>  tanımlamasını yapabilirsiniz veya Notepad++ kullanıyorsanız resimdeki gibi Notepad++ programında Kodlama Bölümünden UTF-8 ile Kodla seçeneğinden i ü ö ğ ş ç gibi karakterlerde oluşan yazım sorununu çözebilirsiniz. 


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/02/HTML5-Sayfa-Yapısı-2.Ders-DOCTYPE-html.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

 

HTML5 Nedir? (1.Ders Html5 Nedir, Neden HTML5, Html5 Yenilikleri Nelerdir)

HTML5 Nedir?

HTML5’in en kısa tanımı HTML’in günümüzde geliştirilmiş olan son versiyonudur ve HTML ve XHTML  satandartlarını kapsayan şu anki son versiyonudur.

Neden HTML5 Kullanılmalı?

HTML ile ilk yapılan sayfalar metinler ve resimlerden oluşuyordu ve görsel olarak da çok gelişmiş değildi ve Etiketler küçük ya da büyük harfle yazılabiliyordu. Tarayıcılar arasında farklılıklar oluyordu Google Chrome da düzgün çalışan kodlarınız Internet Explorer veya diğer tarayıcılarda sorun çıkarabiliyordu. HTML’e destek olarak XML ve HTML’in Kurallı hali eXtensible HTML yani XHTML W3C tarafından bir standart olarak belirlendi.  Ancak XHTML’de kurallar katıydı. Örneğin; Etiketler küçük harfle yazılmalıydı. DOCTYPE ( sitelerin kaynak kodları )”belge tipi bildirimi” ile söz dizimi oluşturuldu. XHTML’deki standartların daha katı olmasına rağmen tarayıcılarda ki uyum sorunu yavaş yavaş çözülmeye başlamıştı ancak, XHTML de tek başına görsel olarak bir şey ifade etmiyordu. CSS’in ilk sürümü yayınlandı ve artık siteler görsel olarak daha kullanışlı ve esnek bir hâle geldi ama bu seferde CSS ile yazılan fazladan kodlar hatalara sebep oluyordu ve bunu önlemek için HTML5 geliştirildi. HTML5’in esnek yapısı kod hatalarını minimuma indiriyor ve çoğu hatayı görmezden gelerek tasarımlarda daha az sorunla karşılaşılıyor ve CSS ile olan uyum sorunlarda düzeltildi HTML5 ve CSS3 ile gelen yeni etiketler ile içerikler ve görseller daha zengin hal aldı ve arama motorlarına da büyük kolaylıklar sağladı. HTML5 hâlâ geliştirilme aşamasında olsa da birçok web tasarımcısı artık HTML5 sürümünü tercih etmektedir. HTML5 asıl gücünü PHP, ASP, ASP.net gibi web programlama dillerinden, JavaScript betik dilinden ve CSS’ten almaktadır ve bizde bu sayede daha iyi tasarımlar yapmak için HTML5 sürümünü mutlak öneriyoruz. HTML temelini biliyorsanız HTML5 e uyum sağlamanız çok kolay olacaktır.

HTML5 ile Gelen Yenilikler

<!DOCTYPE html>: Html5 sayfa tanıtımı.

<header>: Sitenin başlık ve açıklama alanlarının kapsar.

<nav>: Menüleri ve listelenmiş işleri kapsar.

<section>: Sitelerin ana içerik kısmını kapsar.

<article>: Makalenin içerik alanını kapsar.

<aside>: Ana içerikte ayrı yazılan kısımdır reklam ve listeler gibi alanları barındırır.

<footer>: Sitelerin en alt kısmını kapsar.

<caption>: Tablo başlığını tanımlar.

<details>: Kullanıcının talep üzerine görüntüleyebileceği veya gizleyebileceği ek ayrıntıları belirtir.

<datalist>: Önceden tanımlanmış açılabilir liste tanımlar.

<summary>: etiketi <details> etiketinin başlığını tanımlar. Başlık bilgisi içeriğin gösterilip/gizlenmesi için tıklanabilir.

<mark>: Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.

<figure>: Çeşitli medya içeriği gruplarını belirler.

<figcaption>: <figure> elementinin başlığını belirler.

<audio>: Sayfaya ses oynatıcı modül ekler.

<video>: Video oynatıcı modül ekler.

<progress>: İşlem süreci göstergesi ekler.

<embed>: Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar.)

<time>: Tarih ve saat verilerini kapsar.

<hgroup>: Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.

<canvas>: Script dilleriyle anında grafik çizmek için kullanılır.

HTML5 ile gelen yeni etiketlerimizi bundan sonraki derslerde sırasıyla inceleyeceğiz html temel yapısını bildiğinizi varsayarak derslerimizde ilerleyeceğiz. Html bilgisine sahip değilsiniz lütfen HTML5 derslerinden önce HTML derslerine buradan göz atabilirsiniz.

[button color=”red” size=”small” link=”http://www.bilgebank.com/category/dersler/web-tasarim-dersleri/html-dersleri/” icon=”” target=”true”]HTML Dersleri[/button]

 

XHTML Nedir? XHTML Yararları Nelerdir? XHTML Kuralları Nelerdir?

XHTML Nedir?

XHTML  aslında HTML yapısının kurallara uygun ve düzenli bir şekilde hazırlanmasıdır. XHTML 26 Haziran 2000 tarihinde web standartı olarak kabul edildi. Yani kodlarınızın ( Explorer, Chrome, Firefox, vb…) gibi farklı tarayıcılarda daha az sorunlu bir şekilde yorumlanması için XHTML W3C (World Wide Web Consortium) tarafından önerilmiştir. XHTML de öğrenmeniz gereken extra özellikler yoktur. Uyulması gereken kurallar vardır.

XHTML Yararları Nelerdir?

  • XHTML ile kodlarımız kurallara uygun ve tüm tarayıcılarda en az sorunla çalıştırabiliriz.
  • XHTML ile sayfalar daha hızlı açılır .
  • XHTML  ile kod ekranını daha düzenli ve anlaşılır bir görünüme sahip olur.
  • XHTML  ile gereksiz kodlardan kaçınılır.
  • XHTML  de CSS kodlama tekniğine teşvik edilir ve daha profesyonel tasarımlar hazırlanılır.
  • XML ile entegre olarak çalışmaktadır.
  • XHTML SEO için kullanılması gerekmektedir.
  • XHTML arama motorları tarafından daha kolay indekslenir.

İşin özü daha profesyonel ve sağlıklı kodlama yapmak için XHTML kurallarına uygun tasarımlar yapıp yapılan işte daha iyi sonuçlar elde etmemize yarar.

XHTML Kuralları Nelerdir?

Küçük harf kullanımı.

Normal HTML’de açmış olduğumuz etiketlerin büyük yada küçük harf ile yazmanızda sakınca yoktu ancak XHTML kurallarına uygun olması için açılan etiketlerimizin küçük harfle olmasına dikkat etmeniz gerekir.

<BODY>

<P>bilgebank.com</P>

</BODY>

 

<body>

    <p>bilgebank.com</p>

</body>

 

Tüm XHTML etiketleri kapanmalıdır.

XHTML kurallarına uygun olmak için açtığımız tüm etiketleri kapatmamız gerekir. Örneğin bazı html etiketleri tek başına da kullanılır (<br> , <hr>, <img>) ancak bu etiketleri XHTML’de açılış olarak değilde kapanış olarak kullanılmalıdır.

<br>

<hr>

<p>bilgebank.com

<image href=”bilgebank.com/resim.jpg”>

 

<br />

<hr />

<p>bilgebank.com</p>

<img src=”bilgebank.com/resim.jpg ” alt=”uzmanım.net” />

 

Etiketler düzgün biçimde iç içe geçmelidir.

Açılan Etiketler sırası ile kapatılmalıdır.

<strong><i>bilgebank.com</strong></i>

 

<strong>

    <i>bilgebank.com</i>

</strong>

 

Kapatılan tek etiketlerde  / işaretinden önce bir boşluk bırakmak.

XHTML de tekli etiketlerde kapanış etiketini bir boşluk bıraktıktan sonra / işaretini ekleyerek kullanılmalıdır.

<br/>

<hr/>

<image href=” bilgebank.com/resim.jpg” title=” bilgebank.”/>

 

<br />

<hr />

<image href=” bilgebank.com/resim.jpg” title=” bilgebank.com” />

 

 

Etiketlerdeki Parametre değerleri tırnak işareti içinde olmalıdır.

XHTML kurallarına uygunluk için etiketlere vermiş olduğumuz parametre değerlerini tırnak içinde belirtmek gerekir.

<BODY>

    <div width=100%>bilgebank.com</div>

</BODY>

 

<body>

    <div width=100%>bilgebank.com</div>

</body>

 

 

Parametrelerde sadeleştirmeme.

HMTL de Form elemanlarının parametrelerinde bazı kolaylıklar vardı ancak XHTML ‘de bu olay kaldırılmıştır.

<input checked> </input>

<option selected> </option>

 

<input checked=”checked” /> </input>

<option selected=”selected” /> </option>

 

Link ve Resimlere başlık girilmelidir.

Arama motorları için ve XHTML standartlara uymak için link ve resimlere title parametresi ile resim veya link hakkında tarayıcıya bilgi verilmesi gerekmektedir.

<image href=”bilgebank.com/resim.jpg”>

<a href=”https://bilgebank.com”>

 

<image href=”bilgebank.com/resim.jpg” title=”bilgebank.com />

<a href=”https://bilgebank.com” title=”bilgebank.com” />

 

‘id’ parametresi ‘name’ parametresinin yerine geçer.

HTML ile etiketlere isim verirken Name parametresini kullanıyorduk ve id parametresi ise ikinci bir olasılık veya javascript de kullanıyorduk. Ancak XHTML genel tanımlamayı isim vermeyi id parametresi ile kullanmamız gerekiyor.

<img src=” bilgebank.com /resim.jpg” name=”resim” />

 

<img src=” bilgebank.com /resim.jpg” id=“resim” />

 

XHMTL DTD elemanlarını tanımlamak.

Tüm XHTML dökümanlarının DOCTYPE tanımlama zorunluluğu vardır. HTML , Head ve Body bulunmalı ve Title , Head içinde yer almalıdır.

<html>

<head>

<title>bilgebank.com</title>

<body>

<div>bilgebank.com</div>

</body>

</html>

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>
<title>Başlık</title>
</head>
<body>

</body>
</html>

 

 DOCTYPE zorunlu olarak mevcut olmalıdır.

Geçerli 4 adet DOCTYPE tanımlaması vardır;

  • Strict (Kesin)
  • Transitional (geçişken)
  • Frameset (çerçeve)
  • HTML5 (html5)

Strict tanımında sayfa kesin kurallara uygun şekilde yorumlanır.

Transitional tanımında sayfa kısmen standartlara uygun yorumlanır, bu sayede eski html etiketleri de kullanabilirsiniz.

Frameset tanımı ise frame (çerçeve) kullanılan sayfalar içindir.

  • XHTML Strict DTD (Kesin XHTML)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

  • XHTML Transitional DTD (Geçişken XHTML)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

  • XHTML Frameset DTD (Çerçeveli XHTML)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/

 

 

TEFERRUAT (Bölüm 4)

Selamınaleykum:)

Sende hantallaştığını farkındasın. Belki bunu umursamıyor, belki de üzülüyorsun , bilemem. Tabi ki benim senin adına duam üzülmemen olur cancağızım nihayetinde geçici bir zaman dilimi. Çıkartabildiğin kadar keyfini çıkarman çok önemli (zira gerçekten özlüyor insan o mukaddes ayları ).

Neyse gelelim konumuza aslında hafiften bir giriş yapmış olsam da baştan özetlemekte fayda var.

Şunu da belirteyim ne doktorum ne başka bir sağlık uzmanı sadece tecrübelerin en kıdemli yerinden, tam zirvesinden aşağı bakmaktayım ALLAHIN İZNİYLE !!!ANNELİK ZİRVESİ!!! .

Asla bir fazlam yok ne de eksiğim ! Herkes kendince anne, kendine göre anne !

Hiç doğurmamış olanlar ve bir evlat özlemi çeken kardeşler siz de annesiniz. Bu makama doğuran gelmiyor cancağızım. Kalbinde o merhameti besleyip büyüten geliyor bana kalırsa .

Hele bir de biyolojik olarak  doğum yapmamış, lakin yeryüzünde günahsız bir bebeğin sorumluluğunu üstlenip, ona annelik yapan kardeşim. Sen var ya zirveyi çatlatırsın yüreğindeki ateşle! ALLAH VERSİN MÜKAFATINI EMİ CENNETİN EN GÜZEL YERİNDE İNŞALLAH 🙂

Yani bu konuya girmemdeki amaç :

“amannnn iyi ki bir annesiniz yaaa :/

yazın tabiii ,anne olmasaydınız ne yapacaktınızzzzz

ya da anne olmamak bizim suçumuz mu “?

(HAŞA!!!)

gibi serzenişleri uzak tutma amaçlı dokundum bu konuya da . Çünkü isteyip de biyolojik olarak anne olmayanlar baş tacı bunu bilsinler istedim 🙂

Diğer yandan ALLAH hayırlı ömür nasip etsin evlatlara ve annelerine, fakat anne olanların şu dünya saatince ne kadar anne kalacağı meçhul yani !!!

böbürlenmeye hiç mahal yok (HAŞA!!!)

EVETTTT

Sahiden farkında olmalıyız bazı halleri geçecek , güzelleşecek ya da dağınık kalacak yani.

Mesela gebeliğin ilk aylarında uyandığımda yüzümde daha çok hatta sadece yanaklarımda olan kırmızı kırmızı benekleri hatırlıyorum da 🙂 ilk önceleri korksam da araştırıp baktığımda gebelikten kaynaklandığını ve günün ilerleyen saatlerine doğru geçeceğini öğrenince rahatlamıştım 🙂

Kendimi öyle görmek bir süre sonra hoşuma bile gitmeye başlamıştı ya sahiden 🙂

Kilo meselesine hiç girmeyim mi acep 🙂

Benim gibi kilolu olarak hamileliğe başlayanlar hatta hayatının her bölümünde kilolu olmuş olup

“ya ben bide hamile olsam yandım kim bilir kaç kilo olurum yaaaa” diye kendini yiyenler

gelin bir şey anlatıyorum:)

Biz plan yaparken kader gülermiş ya tamda o hesap işte.

Ben hamilelikte çok kilo alırım kesinnn! (demiştim)

Çok şükür ekmekten tiksindim ve yoğun olarak meyve aşermiş bir hamileydim sanırım hayatımda ilk kez yani annemin hayat koçluğu dışındaki kendi tercihlerim hep sağlıksız beslenme üzerine kurulu olduğu için evet ilk defa doğru beslenmiştim .

Sorun şuydu ki kilo alamıyordum!

3 doktor kontrolüne gittiğim için hepsinin söylediği artık kilo almam gerektiğiydi 🙂

her kontrolde bunu tekrar tekrar söylüyorlardı.

Benimde zorlamamla zar zor 10 kilo alabildim.Aslında 10 kilo bizim ülkemiz açısından gayet normal zira bize Türkiye de  12 kiloya kadar normal deseler de bu olay yurtdışınkda 16 kilo 🙂

Neyse aldığım kilo gayet iyi normal yani aslında 8 kilo hatta 7 kiloyla bitirebilirdim lakin 9 ay değil 9 buçuk ayda doğum yapıp son 3 ayımı bebeğimle strese bağlı bazı rahatsızlıklar atlatmamı saymazsak…

Velhasılkelam bana kalırsa eğer bir sağlık probleminiz yoksa Allah ın izniyle Onun rızası için türlü türlü zahmetle taşıdığınız mucize, evet size sarkan bir cilt ,çatır çatır çatlayan bir göbek, doğum için (gerekmişse) bir ton dikiş efendime söyleyeyim doğumdan sonrası için bir lohusa sıtması vs bir dünya cefa olarak görünebilir .

Ama güzel Rabbim öyle de böylede benim gibi kilo vermek adına hiçbir şey yapmasanız da  o yükü en geç tam 1 sene içinde hamile kaldığınız ilk kiloya sizi geri döndürüyor.

Bu konuda emzirmekte bir hayli önemli . Hatta en önemlisi diyebiliriz .

Evet cancağızım konu biraz dağınık dursa da işin özü

Korkma hamilelik ve sonrası için belki en son kafaya takacağın mevzu kilo olacak

Kendin ve bebeğin için önce kafanı topla sağlığına dikkat et ANNENİN sözünü kalbinin üstüne koy dilinden ve günlük yaşantından ALLAHI bir nefes olsun unutma.

ALLAH NASİP EDERSE diğer yazımda görüşmek üzere

ALLAHIN SELAMI ÜZERİNİZE OLSUN 🙂

GİZA

CSS İle Pozisyon Konumlandırma (11. Ders Position Fixed Kullanımı)

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız. Position özelliğinin 4 farklı değeri vardır; Static, Relative, Absolute, Fixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız.

Position: Fixed; Kullanımı

Position:Fixed; özelliğimiz ise diğerlerinden farklı olarak alanımıza bağımlılık kazandırır. Şöyle ki: Position: Fixed kullandığımızda, alanımız sayfamızda sabitlenir ve sayfayı aşağı yukarı sağa sola çeksek de alnımız belirlenen alanda hep sabit kalır. Örnek kodlarımda Fixed 4 alanımızın nasıl sabit kaldığına bakabilirsiniz ve örnek olarak sitemizdeki menümüze de bakabilirsiniz. Sayfamız aşağıdan yukarı doğru çıkarken sabitlenmiş bir menü alanı olduğunu görebilirsiniz.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/02/CSS-İle-Pozisyon-Konumlandırma-11.-Ders-Position-Fixed-Kullanımı.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]


 

CSS İle Pozisyon Konumlandırma (10. Ders Position Absolute Kullanımı)

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız position özelliğinin 4 farklı değeri vardır; Static, Relative, Absolute, Fixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız.

Position: Absolute; Kullanımı

Position:Absolute; özelliği Relative özelliği gibi kullanıldığında alanlar için bağımsızlık özelliği verir, ancak absolute değeri Relative değeri gibi bulunduğu sırada işlemez. Alanının 1. sırasında konumlanarak 1. sıradaki alanın üstünde konumlanır. Örnekteki çalışmayı iyice inceleyerek absolute özelliğinin temel mantığını kavrayalım.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/02/CSS-İle-Pozisyon-Konumlandırma-10.-Ders-Position-Absolute-Kullanımı.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]


.absolute{
border:1px solid; 
margin-bottom:30px;  
position:relative; 
}

Buraya dikkat edelim absolute1, absolute2, absolute3, absolute4, absolute5 alanlarımızı kapsayan <div class=”absolute”> alanımıza position:relative; değerini belirtmemizin gerekir. Position:relative; değerini belirtmemizin sebebi içinde barındırdığı <div class=”absolute4″> alanına  position: absolute; değeri verecek olmamızdır.

Eğer absolute alanımıza position:relative; değerini belirtmezsek html alanındaki alanlarımızın sırasına göre <div id=”tumalan”> alanımızı  1. sıradaki alan sayarak tumalan içinde sıfırlama yapar ve absolute4 alanımızı sol üst köşede konumlandırır. Absolute alanımızdaki position:relative; komutunu kaldırdığımızı da etkinin nasıl olduğuna bakabilirsiniz.

.absolute4{ background:gray;float:left;width:200px;height:25px;margin:2px;

position: absolute; Komutumuz ile alanımızı bağımsız hala getirdik absolute4 alanımız absolute1 alanımızın hemen üstünde konumlandı.

top:20px; Komutumuz ile absolute1 alanımızın üstüne gelen absolute4 alanını ayırmak için yukarıdan 10px boşlukla alanımızı konumlandırdık.

}

BU ÇOCUK KİME ÇEKTİ BÖYLE :) (Bölüm 3)

Gel cancağızım ben söyleyeyim bak bu çocuk kime çekti .

Şimdi olay şöyle oluyor:

Sen 9 ay karnında taşıyorsun ya hani zaten ilk sana çekiyor yani. Daha sonra baba kucağına alıyor o mucizeyi bir görüyor , bir kavrıyor hele kokusuna varıyor ya hıhh işte o saatten sonra küçük mucizeniz babaya çekmiş oluyor (babaya göre).

Sonra kayın valide ,kayın peder görüyor bebişi .Onlarda minnak parmaklara dokundu mu tamam sizin bebek oldu mu kayın valide ve kayın peder kopyası 🙂

Bitmedi kuzum dur .!!!

Anneanne ve dede sırada ne yani onlara çekmesin mi tabii ki onlara benziyor  asıl.  Sonuçta bebek zekasının %80 ini anneden aldığına göreeee (naberrrr şekerimm ) 🙂

Peki  birbirlerini yiyen teyzelere ne demeli tamam onlar ana yarısı elbet en çok onlara benziyor kabul 🙂

Benim asıl anlamadığım , komşu teyze sana ne oluyor ya da bilmem kimin köyündeki filancının yeğeni  ne alaka  laa:)

Yani gören görmeyen duyan duymayan benzetiyor da benzetiyor. Peki sonra?

Hıhh bu bebek az büyüdü mü, hele ki ele avuca sığmaz hale bir gelsin o zaman bak bakayım benzetecek bir insan kalıyor mu ? Yok anam yok .

Başlanıyor  bu çocuk kime çekti serzenişleri , hani aynı sizdi sevgili büyükler 🙂

“Yok anam-kuzum yokkkkk ben böyle inat görmedim ! Bizim sülaleden imkanı yok böyle inat çıkmaz” naraları kopuyor etrafta:)

Unutulan şu ki, çocuk istediği şekle bürünüyor istediği karakter oluyor cancağızım. Elbet huyumuzdan-suyumuzdan alıyor bu kesin. Sadece evladı yetiştiren anne tabi ki ilk temellerini atıyor . Daha sonra baba! En çok anne-baba arasında ki ilişki ve en nihayetinde büyüdüğü ortam çok etkiliyor .

Biz biz olalım en iyi şekilde ALLAHIN izin verdiği yere kadar verelim iman temellerini, sevgisini, saygısını, dürüstlüğünü, hoş görüsünü, gerisi ona kalıyor inan ki .

Daha yolun başındayız ALLAH utandırmasın İNŞALLAH 🙂

SAĞLICAKLA , RABBİM’E EMANET 🙂

GİZA

CSS İle Pozisyon Konumlandırma (9. Ders Position Relative Kullanımı)

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız position özelliğinin 4 farklı değeri vardır; Static, Relative, Absolute, Fixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız.

Position: Relative; Kullanımı

Position:Relative; özelliğini kullandığımız alanlara bağımsızlık özelliğini vermiş oluyoruz örnekte de göreceğiniz gibi Relative değeri vermiş olduğumuz alana istediğimiz gibi top, bottom, left, right gibi konumlandırmalar ile alanımızı istediğimiz yere konumlandırabiliriz. Position özelliğinin mantığını mutlaka kavramamız gerekiyor ilerleyen derslerde de bolca bu özelliği kullanacağız.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/02/CSS-İle-Pozisyon-Konumlandırma-9.-Ders-Position-Relative-Kullanımı.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]


Örnekte gördüğünüz gibi alanların float:left ile sıralanmış şekilde bir düzeni var bu düzenden farklı olarak bir işlem yapmak için relative4 alanımıza position: relative; özelliğini vererek left: 25px; komutumuz ile alanımızın solunda bulunda alan ile arasında 25px genişliğinde bir boşlukla başlamasını ve top: 25px; komutumuz ile de alanımızın yukarıdan aşağıya 25px yüksekliğinde bir boşlukla konumlanmasını istedik. Umarım yararlı bir ders olmuştur kafanıza takılan soruları yorumlarda belirtebilirsiniz.

Not: Relative özelliğini kullandığımda kimi zaman z-index özelliğini de kullanmamız gerekebiliyor bunun için ilerleyen derslerdeki z-index dersini de iyi kavramanız da yarar vardır.

CSS İle Menü Yapımı (7. Ders Css İle Yatay Menü)

Css ile Sayfamıza menü yapımının mantığını kısaca öğrenelim. Bu dersimizde basit bir menü yapımını öğreneceğiz, çünkü işin temel mantığını öğrenmeniz çok önemli. İlerleyen derslerimizde daha kapsamlı açılır efektli menüler yapımını elimden geldiğince öğretmeye çalışacağım. CSS Genel Tasarım Yapısı (4. Ders Alan Oluşturma) Dersimizde ki Sayfa Şablonumuza basit bir menü yapalım ve bunun için head alanımızdaki <div id=”menu”>alanımıza birkaç html yapısı oluşturalım.

<div id="menu">
   <ul>
	<li> <a href="#">AnaSayfa</a> </li>
	<li> <a href="http://www.bilgebank.com/">BilgeBank</a> </li>
	<li> <a href="http://www.bilgebank.com/category/dersler/web-tasarim-dersleri/css-dersleri/">Css Dersleri</a> </li>
	<li> <a href="http://www.bilgebank.com/css-ile-menu-yapimi-7-ders-css-ile-yatay-menu">Menü Yapımı</a> </li>
	<li> <a href="#">İletişim</a> </li>
	<li> <a href="#">Hakkımızda</a> </li>
   </ul>
</div>

<div id=”menu”> Alanımızın içine ul etiketi ile bir sıralama alanı oluşturduk ve içine li etiketleri ile listeleme yaptık ve listelerimizi a etiketimiz ile link verdik ve Css ile düzenlemeye başlayalım.

#menu{
height:50px; 
background:#D2D0D1;  
border-radius:20px;
margin:5px 0px 5px 0px;
}

<div id=”menu”> Alanımızı #menu olarak Css alanımıza tanıttık ve

height:50px; Komutumuz İle bu alanın 50px yüksekliğinde olmasını istedik.

background:#D2D0D1; Komutumuz ile bu alanın arka planının gri tonlarından olan #D2D0D1 tonunda olmasını istedik.

border-radius:20px; Komutumuz ile bu alanın kenarlarına ovallik verdik.

margin:5px 0px 5px 0px; Komutumuz ile de alanımızın Üstten ve Aşağıdan 5px boşluklar bırakmasını istedik.

#menu ul {
padding: 0; margin: 0; 
}

#menu ul { Tanımlamız ile <div id=”menu”> Alanımızın içinde bulunan ul etiketlerinde işlem yapacağımızı tanımladık.

padding: 0; margin: 0; Komutumuz ile ul İle sıralama yaptığımız tüm alanın iç ve dış boşluklarını sıfırladık.

}

#menu ul li{
float:left;
list-style-type:none; 
}

#menu ul li { Tanımlamız ile <div id=”menu”> Alanımızın içinde bulunan ul etiketlerindeki li etiketlerinde işlem yapacağımızı tanımladık.

float:left;  Komutumuz ile alt alta olan liste alanımızı yan yana yapıp yatay menü için hazırladık.

list-style-type:none; Komutumuz ile li etiketlerinde oluşan yazının başındaki noktalama işaretlerini bu komutla kaldırdık.

}

#menu ul li a{
text-decoration: none;
display:block; 
padding:10px; 
font:25px Arial; 
color:#ED2C2C; 
}

#menu ul li a{ Tanımlamız ile <div id=”menu”> Alanımızın içinde bulunan ul sıralamasındaki li listesinin içindeki a etiketleri için işlem yapacağımızı tanımladık.

text-decoration: none; Komutumuz ile a etiketlerinde oluşan altı çizgili yazımın altındaki çizgiyi yok ediyoruz.

display:block; Komutumuz ile a etiketlerinin her birinin bir alan olduğunu tanımlıyoruz.

padding:10px; Komutumuz ile alan olarak tanımladığım a etiketlerine 10px lik bir boşluk vererek aralarındaki boşluğu oluşturuyoruz.

font:25px Arial; Komutumuzla yazı boyutunu ve ve tipini belirliyoruz.

color:#ED2C2C; Komutumuz ile yazımızın kırmızı renk tonlarından #ED2C2C Tonuyla olmasını belirliyoruz.

}

#menu ul li a:hover{
background:#ED2C2C; 
color:#D2D0D1; 
border-radius:20px;
}

#menu ul li a:hover{ Tanımlamız oluşturduğumuz menümüze ufak bir efekt veriyoruz. :hover tanımlaması alanımızın üstüne maus ile gelindiğinde yapmasını istediğimiz komutları vermemize yarar.

background:#ED2C2C; Komutumuz ile arka plan rengimizin kırmızı renk tonlarından #ED2C2C Tonuyla olmasını belirliyoruz.

color:#D2D0D1; Komutumuz ile yazımızın Gri renk tonlarından #D2D0D1 Tonuyla olmasını belirliyoruz.

border-radius:20px; Komutumuz ile kenarlarının oval olmasını istiyoruz.

}


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/02/CSS-İle-Basit-Menü-Yapımı7.-Ders-Css-İle-Yatay-Menü.html” icon=”” target=”false”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

CSS İle Pozisyon Konumlandırma (8. Ders Position:Static; ve Float: Left; Kullanımı)

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız position özelliğinin 4 farklı değeri vardır; StaticRelativeAbsoluteFixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız.

Position: Static; Kullanımı

Eğer alanlarımıza herhangi bir position değeri belirtilmemiş veya float özelliği verilmemiş ise alanlarımız position static özelliğini varsayılan olarak okur ve alanlarımız alt alta konumlar. Float:left komutunu bildirirsek alanlarımıza sırasıyla soldan sağa doğru sıralanır. Position özelliklerini bol bol pratik yaparak temel mantığını iyi kavramınız tavsiye ederim.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/02/CSS-İle-Pozisyon-Konumlandırma-8.-Ders-Position-Static-Kullanımı.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]


Örnekte de görüldüğü gibi iki ayrı çalışma alanı oluşturduk ve içlerine 5 er tane alan oluşturduk 1. çalışma alanımıza position değeri veya float özelliği vermediğimiz için varsayılan olarak alanlarımız alt alta sıralandı. 2. çalışma alanımızda da float:left; komutunu kullanarak alanlarımızın yan yana sıralanmasını istedik umarım yararlı bir konu olmuştur aklınıza takılan soruları yorum bölümünde sorabilirsiniz.