WEB Tasarımcılığa İLK ADIMLAR

Transkript

1 Yeni başlayanlar Ve Gelişmek İsteyenlere WEB Tasarımcılığa İLK ADIMLAR Batuhan Akkaya 0

2 Kitap Hakkında; Kitabımı web tasarım işlerine yeni başlayanlar veya az bilgisi olan kişilerin bakmasını tavsiye ederim. Kitabımda sadece tasarım değil temel kavramlar hakkında yeterli bilgi kazanabilirsiniz. Kendi siteme bütün okurlarımı beklerim kitapta gördüğünüz hataları ve benle iletişime geçmek için adresten kolayca benle iletişime geçebilirsiniz. 1

3 İÇİNDEKİLER 1. Temel Kavramlar Web Master Nedir? Basit Bir Web Site Yapmak İçin Neler Bilinmeli HTML Nedir? CSS Nedir? Domain ve Hosting Nedir? SEO Nedir? 2. Basit İşlemler HTML Giriş HTML Temelini Oluşturan Taglar Temel Sayfa Düzeni Temel Taglar Basitçe Tablo Yapımı 3. Gelişmiş İşlemler Link İşlemleri Liste Yapımı Div ve Spam Pre Tagı Form İşlemleri 4. CSS ye Giriş CSS Mantığı CSS Seçiciler Font ve Metin İşlemleri Kenar Çizgisi (Border) Ve Arka Plan İşlemleri İç Dış Boşluk (margin-padding) Elementler (display) Yan Yana Sıralama Olaylar 5. Gelişmiş CSS ve SEO İşlemleri Köşe Ovalleştirme (Radius) Gölgelendirme (Shadow) Meta Taglar SEOÖnem 2

4 Web Master Nedir? Temel Kavramlar Webmaster Türkçe karşılığı ağ uzmanı demektir. Web site yapan, geliştiren ve hatalarını tespit edip düzenleyen kişidir. Web tasarımcı ve webmaster aynı anlama gelmektedir fakat webmasterlar siteleri tasarlamaz ondan ziyade yapılmış tasarımı siteye uyarlayıp kodlarlar. Basit Bir Web Site Yapmak İçin Neler Bilinmeli Kendimize ait bir site açacağız peki ne bilmemiz asıl hangi dilleri bilmemiz lazım? Bu sorunun cevabı en az Html ve Css bilmeniz gerekir. Bu kitabın sonunda büyük bir yol kat edeceğinizden emin olun. Html ve Css kullanarak güzel görünümlü işlevli bir site açabiliriz fakat bunun yanında Javascript ve bu dilin kütüphanesi olan jquery ile sitemizi dinamikleştirebiliriz. Php programlama dili ve MySQL ile sitenizi veri işlemlerini yani üyeliktir vs. yapabilirsiniz. HTML Nedir? Hyper Text Markup Language kelimelerinin kısaltılmış hali olan HTML dili, bir sitenin iskeletini oluşturur. HTML ile görsel olarak hiçbir etkide bulunmaz fakat sitenin bütün işlevini HTML dili ile sağlarız, örneğin; sitenin içeriği, resimleri, linkler, ses, video vs. düz bir şekilde ekleriz. Bütün siteler HTML ile oluşur asıl bir web sitesinde fare ile sağ tık kaynağı görüntüle dediğimizde sitemizin kodlamasını gördük. Aşağıdaki resim gibi. 3

5 CSS Nedir? Html ile bir sitenizin iskeletini temelini oluştururuz CSS ile deri, görsellik gibi şekillendiririz. Cascading Style Sheets kelimelerinin kısaltılmış hali olan CSS ile ne yapabiliriz derskek; arka planları, renkler, boyutları, yazı tipini gibi biçimlendirme ayarlarını ayarlarız. İlerki bölümlerde CSS daha da değineceğiz. Domain ve Hosting Nedir? Domain yani özel alan adı bir web sitesine ulaşılmasını sağlayan isimdir. Örneğin.com,.net,.org gibi, alan adları satın alamayız yani kiralarız genellikle yıllık 20 türk lirasından başlar. Hosting özel alan adımızın (domainimiz) altında dosyalarımızı barındırdığımız yerdir. 4

6 Aylık satın alınabilirler ve her hosting firmasının domain ile ilişkilendirilmesi için özel DNS ayarları ile ayarlanır. Hosting güvenliği nedir, bir çok web host hosting şirketi var fakat her hosting şirketinden alınmaz çünkü hızlı ve güvenilir değildir bunun sonuçları kötü olabilir kesinlikle dikkat edilmelidir. Benim tavsiye ettiğim site Alastyr dir köklü ve güvenilirdir. Domainizi ve Hostinginizi aldıktan sonra web dosyalarını hostinge atabilir internet ve tarayıcılar üzerinden siteniz erişilebilir hale gelir. SEO Nedir? SEO açılımı olan Search Engine Optimization Türkçe karşılığı arama motoru optimizasyonu olarak çevrilir. Seo bir web sitesinin ürünler ve hizmetleri hakkında arama motorlarında bilgi vermesini sağlayacak şekilde kodlanmasıdır, yani web sitenin arama motorlarında istenilen bilgilerde gelişmesine yapılan çalışmalara seo diyebiliriz. Bu SEO işlemlerini uzman kişilere belli bir ücret ile yaptırabilir veya internette bazı sitelerde ücretsiz SEO rehberlerini bulabilirsiniz. HTML E GİRİŞ Bir web sitesini oluşturmak için önceki konularda da anlattığım gibi HTML bilmemiz lazım bir site temeli html ile oluştururuz. Öncelikle html tag mantığını anlatacağım. <tag> tag içeriği </tag> Yukarıdaki öğretici örneği incelersek tagımızı başta açarız içeriği girdikten sonra / tag isminin başına konularak tagı kapatmış oluruz. Peki tagı kapatmazsak ne olur derseniz hangi tag ile açtık ise diğer içeriğimizde o tagı kapsamış oluruz örneğin <b> tagının içine ismimizi yazdıktan sonra kapatmazsak sadece isim değil geride yazdığımız cümlede kalın yazmış olur. Ama her tag kapatılmaya bilir örneğin satır atlama tagımız <br /> bu tag sayesinde paragraf atlayabiliriz. 5

7 Yorum satırı da yeri gelmişken anlatayım html kodlarımızı yazarken yorum satırı ekleyerek yorum satırı tagları arasında yazılan yazılar html de hiç işlenmez sadece açıklama öğretici olarak kullanırız. <! Yorum satırı html hiçbir türlü işleve girmeyecektir --> Bunu genellikle kısa açıklamalar için kullanılır eğer uzun bir açıklama ekleyeceksek tavsiye edilen /* açıklama */ örnek göstereyim: /* 1. satır 2. satır 3. satır 4.satır */ Kod mantığımızı anladıktan sonra şimdi html iskeletini inceleyebiliriz. <html> <head> <! Title, meta tags --> </head> <body> <! Görünücek bütün içerikler. --> </body> </html> Html çalışmalarımızı yapmamız için editöre ihtiyacımız olacaktır okurlarıma tavsiyem Notepad++ editörünü indirip çalışmalarınız yapmanız. 6

8 Editörümüzde html kodlamamız bittikten sonra farklı kaydet diyerek isim.html veya isim.htm olarak kaydederek tarayıcınız ile birlikte açarak çıktılarınızı alabilirsiniz. HTML İN TEMELİNİ OLUŞTURAN TAGLAR Taglar <!doctype html> <html></html> <head></head> <body></body> <title></title> Açıklamaları Sayfanın en başında ublunur ve html5 kullanıldığı belirtilir. Sayfanın başında ve sonunda bulunur bütün kodlar arasında yazar. Site başlığı, özellikleri ve meta tagları ve sunucu bilgilerini içerir. Bu taglar arasında sayfadaki gözükecek her şeyi içerir. Sayfanın (sekmenin) başlığını belirler. Örnek bir kodlama göstereyim. <!DOCTYPE html> <html> <head> 7

9 <title>sayfa Başlığı</title> </head> <body> Sayfada gösterilicek içerikler </body> </html> Sayfa düzeni hakkında bahsedeyim. Genellikle sayfanın en üst kısmında logo bulunun kısma header, header kısmının hemen altında menü seçenekler arama kutusu vs. olan kısma navbar, sayfanın ortasında olan içerik olan kısma article denir. Sayfanın sağ tarafında bulunan bölgeye aside, en alt kısma ise footer denmektedir. 8

10 Yukarıdaki çizimde de gösterdiğim gibi sayfa yerleşim mantığı genellikle böyledir. Header logo, reklam vs. Navbar menü, arama kutusu, navigasyon vs. Aside navigasyon, reklam vs. Footer alt bilgi telif hakkı vs. Aşağıda da kendi sitemin yerleşimini görebilirsiniz. 9

11 Footer kısmı sığmadığı için ayriyeten aşağıda göstereceğim. 10

12 Temel Taglar Taglar Açıklamaları <br /> Satır atlamamızı sağlar. <img src=. /> Sayfaya resim eklemeyi sağlar. <a href= link ></a> Metine link eklememizi sağlar. <ul></ul> Liste oluşturmamızı sağlar. <li></li> Liste elemanları oluşturmamızı sağlar. <hx></hx> Başlık oluşturmamızı sağlar, x 1 den 6 ya kadar değer alır. <hr></hr> Sayfada yatay düz bir çizgi oluşturmamızı sağlar. <p></p> Bir paragraf oluşturmamızı sağlar. <div></div> Sayfada bir bölüm oluşturmamızı sağlar. <b></b> Kalın yazmayı sağlar. <mark></mark> Seçili alanı vurgulu göstermeyi sağlar. Bu temel tagların dışında genelde yazı biçimlendirmeler css ile ayarlanır ama bazı taglar ile de css gerekmeden yazıları biçimlendirebilirsiniz. Basitçe Tablo Yapımı Öncelikle bildireyim web sitelerimizi tasarlarken html kodlarımızda table ile tablo tasarımlarında seo için pek iyi olmaz. <table></table> <tr></tr> <td></td> Border=x cellspacing=x Width=x Align=hiza Tablo oluşturmamızı sağlar. Tabloya satır eklememizi sağlar. Tabloya hücre eklememizi sağlar. Kontur kalınlığını ayarlar. Sütunlar arasındaki boşluğu ayarlar. Genişliği ayarlar. Hücre hizasını ayarlar. 11

13 <table border="1"> <tr> <td>1.satır sol hücre</td> <td>1.satır sağ hücre</td> </tr> <tr> <td>2.satır sol hücre</td> <td>2.satır sağ hücre</td> </tr> <tr> <td>3.satır sol hücre</td> <td>3.satır sağ hücre</td> </tr> </table> Yukarıdaki örneği incelersek tr ile satırları ayarladık td ile sütunları ayarladık basitçe bir tablo oluşturduk. Mantık bu kadar basittir. Görüntüsü: 1.satır sol hücre 2.satır sol hücre 3.satır sol hücre 1.satır sağ hücre 2.satır sağ hücre 3.satır sağ hücre 12

14 LİNK İŞLEMLERİ Öncelikle link nedir? Link bir köprüdür bir nesneye tıklayınca bir hedefe gitmesini sağlar. Html de link atama görevini <a> tagı görür. Linkler bir den farklı görev görür. Kullanımı: <a href= hedef >tıklanılacak metin</a> Sayfa içi linklerde örneğin sayfada üç bölüm bulunmakta a, b ve c dir a bölmüne gitmek için a, b veya c ye tıklama butonları yapılarak sayfa içi gezinme linkleri oluşturabilir. Sayfa dışı gezinme linklerinede bir sitenin menüsündeki hakkımızda, iletişim gibi sayfalarda gezinmesini sağlayabiliriz. Dış link (backlink) başka bir sitede bir resimde, cümlede vs. olabilir backlinkin avantajı ise seo açısından siteniz gelişir yani arama motorlarında daha tavsiye edilen bir site olarak ön sıralara çıkmada büyük etkisi vardır. Not: <a href= iletisim.html >iletişim</a> burada sayfa içi işlemlerde kullanabilir. Fakat başka sitelere link verirken linkin başına htpp ekli olması gerekir. <a href= > Webte Hayat </a> Htpp başta yazılı olmaz ise sayfa içinde arayacaktır öyle bir sayfa olmadığı içinde sayfa bulunamadı 404 hatası alacaksınızdır. Bunun dışında linkle mailto gibi parametreler ile mail, mobil arama, indirme linkleri de oluşturulabilir. <a mailto= emre_br@outlook.com > gönder </a> 13

15 Liste Yapımı Html de liste oluşturmak için <ol> ve <ul> taglarını kullanırız. Genellikle kullanacağımız <ul> tagı olacaktır. <ul> tagımız ile listenin başını ve sonunu belirleriz <li> tagımız ile liste elemanlarımızı belirleriz. Şimdi bir liste oluşturalım. <ul> <li>1. satır</li> <li>2. satır</li> </ul> Görüntüsü: 1. satır 2. satır İleride yapacağımız menüleri genellikle div ve ul taglarımızla yapacağız css yardımıyla. Div Ve Span Html serilerimizde en çok kullanacağımız ve işimize yaracak iki tag div ve spandır. Div tagı block bir elementtir ve kaç tane div yazarsak alt alta sıralanacaktır divin özelliği budur sayfa bir yer belirlememizi sağlar tabi css olmadan bir şey ifade etmeyecektir. <div> Örnek alan </div> Span tagı inline bir elementtir bu yüzden yanına ne kadar inline nesne koyarsak yan yana dizilirler spanın özelliği budur. Tabiki span da css olmadan bir şey fark etmeyecektir. <span> Örnek alan </span> 14

16 Pre tagımızı da anlatıp geçeyim html de bildiğiniz gibi yazdıklarımız direk aynı gözükmez <br/> ile satır atlamaz vs. gerekir. Pre tagı ile başını ve sonunu belirlediğimiz yeri yazdığımız gibi gözükmesini sağlar. Webte Hayat <br /> Yazılım dersleri <pre> Webte Hayat Yazılım dersleri </pre> İki örnekte de görüntü aynı olacaktır. Form İşlemleri form tagımızın kullanımı ve form işlemlerini öğreneceğiz. Formlar ile sadece görsel olarak ayarlarız kullanıcıdan veri almada yardımcı olur, şimdi taglarımıza geçelim. <form> Form elemanların bu tagımızın arasında kullanırız. Kullanımı: <form ACTION="url" METHOD="get- post" TARGET="pencere">... </FORM> İki parametremiz var gördüğünüz üzere action ve method bunların görevleri neler onları görelim. ACTION: Formdan girilen bilgilerin değerlendirileceği dosyanın URL adresini belirtiriz. METHOD: Göndereceğimiz yöntemi seçeriz iki adet değeri vardır getve post get veriler linkte toplanır. post veriler bir yerde gözükmez. 1-İnput: form içerisinde bilgi almak için kullanılır. Type parametresi ile türü belirlenir (text, password, checkbox, radio, submit, reset...) gibi değerler alabilir. 15

17 Kullanımı : <input ALIGN=tip [CHECKED] MAXLENGTH=uzunluk NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=deger> Şimdi inputta birkaç tane parametremiz var bunlar neler görevleri ne ona bakalım. 1- TYPE: Eleman türünü belirtmek için kullanılır. 2- SRC: Görüntülenmesi istenilen resim belirtilir. 3- ALIGN: Type parametresi ile belirlediğimiz elemanların konumunu ayarlarız. 4- NAME: Girilecek verinin değişken ismini belirlemek için kullanılır. 5- MAXLENGTH: Girilecek olan verinin en fazla kaç karakter olacağını ayarlarız. 6- SIZE: Metin kutusunun boyutu ayarlanır. Belirtilmediği taktirde varsayılan 20 olacaktır. 7- CHECKED: Bir seçim kutusu kullandıysak tikli olduğunu belirler. 8- DISABLED: Veri girişini engellemek için kullanılır. Şimdi Form nesnelerimize geçelim birkaç adet nesnemiz var hemen işleyelim. 1-CheckBox: Formumuza onay kutucukları eklememizi sağlar. örnek: <html> <head><title>w ebte hayat</title> <body> <input type="checkbox" name="onay1">.com<br> <input type="checkbox" name="onay2">.net<br> <input type="checkbox" name="onay3">.org </body> </html> Canlı çıktı: 16

18 .com.net.org 2-Radio: Kullanıcının bir kere seçebileceği yuvarlak düğmeli seçenekler oluşturmamızı sağlar. örnek: <html> <head><title>w ebte hayat</title> <body> <input type="radio" name="onay1" value="1">.com<br> <input type="radio" name="onay2" value="2">.net<br> <input type="radio" name="onay3" value="3">.org </body> </html> Canlı çıktı:.com.net.org 3-text: kullanıcıdan yazı bilgileri almanızı sağlar: örnek: <html> <head><title>w ebte hayat</title> <body> <input type="text" name="isim" />isim </body> </html> Canlı çıktı: isim: 4-Password: Şifreli halde yazar kullanıcılarının parolarını girmelerini sağlar siyah nokta olarak gözükür. örnek: 17

19 <html> <head><title>w ebte hayat</title> <body> <input type="passw ord" name="sifre"/> </body> </html> Canlı çıktı: Parola: Select-option: Select bir açılır kapanır seçenek menüsüdür. kullanımı <select> tagları arasında <option> tagları arasınta yazılır, örnekle biraz daha açayım. CSS Mantığı Ve Seçiciler Html ile bir sitenin iskeletini tasarladıktan sonra css ile görsellik katarız. Css yi html de seçiciler yardımı ile kullanırız önce css ile seçicilerimize değer veririz sonra taglarımıza seçicileri ekleriz. Css kodlarımızı html de <head> tagları arasında <style> tagı arasında yazılır. İstenilirse.css olarak kaydettiğimiz dosyada çağırabiliriz. <link rel="stylesheet" type="text/css" href="dosyaismi.css" /> <!doctype html> <html> <head> <title>css serimiz</title> <style type="text/css"> Css kodları... </style> </head> <body> Html kodları... 18

20 </body> </html> seçici ismi {kodlar...} Not: kodlar ve değerler yazılırken operatörümüz iki nokta üstüste(:) ve en önemli nokta her değerin sonuna noktalı virgül(;) konulması gerekir. İd seçicisi sadece 1 elemente atanır. seçici önünde sharp(#) konur. Kullanımı: #isim { color:white; background-color:black; } Class seçicisi yani sınıf seçicimiz kodlarımızdaki bütün elementlere atayabiliriz. seçicinin önüne nokta(.) konur. kullanımı:.isim { color:white; background-color:black; } Mantık budur arkadaşlar. Genel bir örnek yapalım hem seçici nasıl atanır onuda görürüz. Genel örnek: <!doctype html> <html> <head> <title>css ders 2</title> <style type="text/css"> #idsecici{ color:white; background-color:black; }.classsecici{ 19

21 color:red; background-color:yellow; } </style> </head> <body> <div id="idsecici"> Ben id Secici </div> <div class="classsecici"> ben class(sinif) secici </div> </body> </html> Çıktı: Tag seçiciler ise direk yazılarak ayarlayabiliriz. h1 { color:red; margin:5px; } Kullanımı bu kadar basittir. 20

22 Font Metin İşlemleri Css ders serimize devam ediyoruz bu derste font ve metin bütün özellikleriyle geniş kapsamda anlatacağım. Font ve metinin arasındaki farkı bilmeliyiz. Font tip ve biçimlerinin nasıl olacağını belirler, metin(text) ise sayfadaki düzeni ayarlarız. Bu derste font işlemlerini anlatacağım. Font: Font özellikleri sitemizdeki metinlerin font ailesini, kalınlığını, boyutunu vs. ayarlamak için kullanılır. bu ayarları ayarlayan font özellikleri vardır bu Font özellikler: 1- Font-family 2- Font-size 3- Font-weight 4- Font-style 5- Line-height font-family: Bir metnin font ailesini belirlememizi sağlar yani yazının tipini ayarlarız. birden fazla font aile ismi kullanabiliriz bunların her birini virgül(,) ile ayırırız. Örnek:.orn{ } font-family: verdana, sans-serif, arial; Örnekte gördüğünüz gibi bir kaç adet font ailesi belirledik tarayıcı hangisine uygunsa baştan başlayıp uygun olanı seçer. font-size: Bir yazın boyutunu ayarlarız. Boyutunu "px", "%" ve "em" ile belirleyebiliriz. Örnek: 21

23 .orn{ } font-size:10px; font-weight: Bir yazının kalınlığını ayarlamamızı sağlar. 100 ince olmak üzere 900 arasında değer alır. Örnek:.orn{ } font-weight: bold; font-style: Bu özelliğimiz bir yazının eğik, az eğik ve normal yapmak için kullanılır. Örnek:.orn_1{font-style:normal;} //Normal gözükür.orn_2{font-style:italic;} //Eğik olur.orn_3{font-style:oblique;} //Az eğik olur line-height: Satırlar arasındaki mesafeyi ayarlamamızı sağlar. Örnek:.örn { line-height:15px; //satırlar arasındaki mesafe 15px } 22

24 Önceki dersimde fontun özelliklerini görmüştük bu derste metni nasıl biçimlendireceğiz bir metnin rengini hizasını harfler arasındaki boşluğu vs. bu özellikler: 1- color 2- text-align 3- text-decoration 4- text-transform 5- text-indent 6- line-height 1- Color: metnimize renk vermemizi sağlar. Derğer olarak renk birimlerinin istediğinizi kullanabilirsiniz..örn {color:red;} #örn {color:#449bdb;} 2- text-align: Metinleri hizalamamızı sağlar sağa sola ortalama ve iki yana yaslayabiliriz. 4 tane değeri vardır. h1{text-align:left;} // metni sola hizaladık. h2{text-align:center;} // metni ortaladık. h3{text-align:right;} // metni sağa hizaladık. h4{text-align:justify;} // metnin içeriğini sağ taraftaki boşluğa orana hizalar. 3- text-decoration: metindeki bazı değişiklikler eklememizi veya kaldırmamızı sağlar. 5 tane değeri vardır bunlar inceleyelim. text-decoration:none; //Çizgiyi kaldırır (genellikle a tagında kullanılır) text-decoration:underline; //metnin altı çizili olur. text-decoration:overline; //metnin üst tarafını çizili yapar. text-decoration:line-through; //metnin üzerinden yani ortasından çizili yapar. text-decoration:blink // metnin yanıp sönmesini sağlar. 4- text-transform: metindeki karakterlerin büyük veya küçük olmasını sağlar. 3 adet değeri vardır bunlar: text-transform:uppercase; //metindeki tüm harfler büyük olur. text-transform:lowercase; //metindeki tüm harfler küçük olur. 23

25 text-transform:capitalize; //metindeki ilk harfleri büyük hale gelmesini sağlar. 5- text-indent: girinti yani paragrafın nereden başlayacağını sağlarız. p{text-indent:50px;} //her paragraf başlarken 50 px içerden başlayacak. 6- line-height: metinler arasındaki mesafeyi ayarlar. p{line-height:20px;} // satırlar arası mesafeyi 20px olarak ayarladık. Kenar Çizgisi (Border) Ve Arka Plan İşlemleri Div üç ana öğeden oluşur bunlar: 1- Boder (kenar kalınlığı) 2- Margin (dış boşluk) 3- Padding (iç boşluk) Biz bu derste border işleyeceğiz. Border 3 özelliği vardır style, width ve color veya kısaltması direk border olarak yapabiliriz. sadece alt tarafı veya sağ tarafı biçimlendirmek istersek "border-top-style" gibi ayarlayabiliriz. 1- border-style: Kenar çizgimizin biçimini belirleriz eğer belirlemezsek otomatik olarak "none" değerinde olur. a) dotted=noktalı b)dashed=kesik c)solid=düz d)double=çift e)groove=içe kabarık f)ridge=dışa kabarık g)inset=içe gömülü h)outset=dışa gömülü Bir örnek yapalım..cerceve{border-style:solid;} //heryer düz çizgi oldu..cerceve_1{border-top-style:solid; border-bottom-style:solid; border-right-style:double; border-left-style:double;} //sag sol çif üst alt düz çizgi oldu. 24

26 2- border-width: çizgimizin kalınlığını ayaarlarız mantık yine aynıdır. bir örnekle hemen göstereyim değerler ülçüm birimleri ile atanır..border {border-style=solid; border-w idth:5px;} //düz çizgili çizgiler 5px kalinliginda..border_1 {border: solid 5px;} //yukardaki örnekle ayni border-color: Kenar çizgilerimizin rengini belirleriz. değerleri renk birimleri ile atarız. bir iki örnekle göstereyim hemen..kutu{border-style:dotted; border-w idth:5px; border-color:red;} //çizgiler noktali 5px kalinliginda rengi kirmizi oldu..kutu_1{border: dotted 5px red;} // yukaridaki örnekten farki yok. arkaplan özelliklerini işleyeceğiz arka plan rengi verme, arkaplana resim ekleme, arka planı pozisyonunu vs. öğreneceğiz. Beş adet özelliği vardır bunlar: 1- background-color 2-background-image 3-background-repeat 4-background-attachment 5-background-position 1-Background-color: Arka plan rengi vermeye yarar. body {backgorund-color=red;} //arkaplan rengini kirmizi yaptik. 2-Background-image: arka plana resim eklememizi sağlar. 25

27 body {background-image:url("zeminrengi.jpg");} //arka plana zeminrengi resmini atadik. 3-Background-repeat: arka plana eklenen resmin tekrarlanma biçimini kontrol etmek için kullanılır. Dört adet değeri vardır bunlar: backgroud-repeat:repat; //resmin hem dikey hemde yatay tekrar etmesi. backgroud-repeat:no-repeat; // tekrar etmemesini sağlar. backgroud-repeat:repeat-x; //yatay (x) ekseninde tekrar etmesi. backgroud-repeat:tepeat-y //dikey (y) ekseninde tekrar etmesi. body{background-image:url("logo.gif");} backgorund-repeat:repeat; } 4-Background-position: Görselin sayfadaki pozisyonunu belirler. 11 adet değeri vardır. top left top center top right center left center center center right bottom left bottom center bottom right bu tür bir matnıktır bir kaçtane de örnek göstereyim. background-position:top left; //sol üstte yer alacak. background-position:top right; //sag üstte yer alir. background-position:bottom right; //sag altta yer alir. background-position:center right; //ortanin saginda yer alir. 5-Background-attachment: Görselin kaydırma çubuğunu kullandığımızda takip edip etmememsini sağlar. takip etmesi için "scroll" sabit olması için "fixed" değerleri verilir. 26

28 body { background-image:url("logo.gif"); background-repeat:no-repeat; background-attachment:scroll; } Margin(dış boşluk) padding(iç boşluk) Margin dış boşluğu ayarlamamızı padding ise iç boşluğu ayarlamamızı sağlar. Border la dışarının uzaklığı margin. Border la içerik arasındaki uzaklıkta Padding olarak adlandırılır. Margin ve padding dört adet değer alır bunlar sağ, sol, üst, alt. ölçüm birimleri ile değer veririz. kodlarımıza geçelim. margin-top:15px; // üstten dış boşluk 15px margin-right:15px; //sağdan dış boşluk 15px margin-bottom:15px; //alttan dış boşluk 15px margin-left:15px; //soldan dış boşluk 15px padding-top:15px; // üstten iç boşluk 15px paddingright:15px; //sağdan iç boşluk 15px padding-bottom:15px; //alttan iç boşluk 15px padding-left:15px; //soldan iç boşluk 15px Genel örnek: 27

29 <html> <head> <style>.kutu {background-color:blue; margin:10px; w idth:150px; height:150px; padding:50px;}.icerik{w idth:50px; padding:50px;height:50px; background-color:red;} </style> </head> <body> <div class="kutu"> <div class="icerik"> </div> </div> </body> </html> Çıktı: Display Elementler Bir web sayfasındaki nesnelerin akışı, o elemanın seviye türüne göre değişir. Seviye türüne göre iki tip eleman vardır: 1- Blok elementi 2- İnline elementi 1- Block: Sayfada blok olarak işlenirler. Sayfada yukarıdan aşağı doğru sırayla sıralanır. Bir özelliği de satır başından başlar. 2-İnline: İnline elementleri sayfada tek satırda işlenir. Sayfada soldan sağa doğru sırayla sıralanırlar. Özelliği tek satırda olur yani alt satıra geçmez. 28

30 Bu elementlerimizin başlangıç değerlerini display komutu ile değiştirebiliriz. Yani bir inline yi block a dönüştürebilir bir block uda inline ye dönüştürebiliriz. Bir örnekle göstereyim: li{ display:inline; // listelemeyi inlineye çevirdik. } span { display:block; // span elemanimizi block a çevirdik. } Yan Yana Sıralama float div leri yani kutularımızı yan yana sıralamamızı sağlar. clear ise bu işlemi sonlandırmamızı sağlar. float 2 adet değer alır bunlar sağ ve sol dur yani sağ değeri verirsek sağ sıralar sol ise sol sıralar. Genel örnek: <html> <head> <style>.kare{w idth:100px;height:100px;background:red;float:left; margin-left:10px;}.son{clear:both;} </style> </head> <body> <div class="kare"> 1</div> <div class="kare"> 2</div> <div class="kare"> 3</div> <div class="son"> </div> </body> </html> Çıktı: 29

31 Olaylar Web sitelerde bazı olaylar olur yani örneğin yazının üstüne mouse ile gelindiğinde renk değiştirmesi veya kanlınlaşması gibi olaylardır. Bu olaylar nedir inceleyelim. Hover Focus Link Visited Checked Mouse geldiğinde olacak. Nesne odaklandığında olacak. Gidilmemiş linkleri seçilir. Gidişmiş linkleri seçer. İşaretli onay vs. kutucuklarını seçer. Basitçe mantığını anlamak için örnek yapayım. class_ismi:hover { Çalışacak kodlar... }.class_ismi:focus { Çalışacak kodlar... } Yukarıda da gördüğünüz gibi kullanımı böyledir class : ve olay ismi ardından çalışacak kodları yazarız genel bir örnek yapayım. <html lang="tr"> <head> <title>webtehayat</title> 30

32 <style type="text/css">.kutu {width:70px; }.kutu:focus {width:110px;}.kutu:hover {border:solid 3px red;} </style> </head> <body> <input class="kutu" /> </body> </html> Bir inputumuz var Mouse üzerine geldiğinde dış çizginin rengi kırmızı oluyor tıklandığında da yani focus olayında input genişliği artıyor. CSS Köşe Ovalleştirme Css nin güzel özelliklerinden biri olan köşe yuvarlama özelliğimize geldik. Css nin bu özelliğini border larda kullanmaktayız direk kullanımına geçeyim. border-top-left-radius = üst sol köşe border-top-right-radius =üst sağ köşe border-bottom-left-radius =alt sol köşe border-bottom-right-radius =alt sağ köşe css3 de kodları aynısını başına webkit moz o koyarak yazıyoz tarayıcı uyumu için. Yani her css3 kodu nu 4 kere yazmamız gerekir. Bunu yapmazsanız daha sonra tarayıcı hata verir. 31

33 Örnek:.buton{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; } Hızlıca gölgelendirmeyide anlatayım mantık gene aynı..logo{ box-shadow:0px 0px 15px #333; -webkit-box-shadow:0px 0px 15px #333; -moz-box-shadow:0px 0px 15px #333; -o-box-shadow:0px 0px 15px #333; } Sondaki 15 px blur etrafına 15 px lik bir gölge yaydık sonrada rengini belirledik diğer parametreleri ile de yönünü falan ayarlarız. Meta Taglar Seo ya fazlasıyla katkısı olan meta taglar kodlarımıza eklemeliyiz peki bu meta taglar ne işe yarıyor bakalım. <meta name="description" content="içerik "> Description ile sayfalarımıza açıklama ekleriz. Bu da sayfalarımızın GOOGLE da çıktığı zaman alt kısmında bir açıklama ile gelmesini sağlamaktadır. <meta http-equiv="content-type" content="text/html; charset=utf-8"> 32

34 Bu etiket ile sayfalarımızın Türkçe dil desteğini aktifleştirmiş oluruz. Bu tagın HTML5 ile kullanımı kısaltılmıştır. Kısa kullanımı <meta charset="utf-8"> şeklindedir. <meta name="abstract" content="içerik"> Description yerine de kullanılabilir. Aynı şekilde sayfalara açıklama metni eklemek için kullanılır. <meta name="author" content="yazar"> Sayfayı hazırlayan kişi ya da kurum bilgisinin paylaşıldığı tagdır. <meta name="classification" content="kategori"> Sayfanızın kategorisini belirlemek için kullanılır.(politics, Finance, Business, web hosting gibi) <meta name="copyright" content= "içerik "> Sayfanın yayın hakkı sahibinin bilgilerini içermektedir. <meta name="distribution" content="global / Local"> Sayfa içeriğinin kime hitap ettiği bilgisini içermektedir. 33

35 <meta name="content-language" content="tr"> Sayfada kullanılan dil bilgisini içermektedir. <meta name="rating" content="all"> Sayfa içeriğinin kime hitap ettiği bilgisini içermektedir. Eğer herkese yönelikse "All" yapılmalıdır. <meta name="resource-type" content="document"> Sayfa içeriğinin tipini yazmanız gerekmektedir. <meta name="robots" content="all"> robots : Robotun nasıl çalışacağını belirtir index / noindex : sayfayı arşive alır / almaz follow / nofollow : sayfaya bağlı diğer sayfaları da tarayıp endeksler / endekslemez imageindex / noimageindex : resimleri endeksle / endeksleme imageclick / noimageclick : resim linklerinin endeksle / endeksleme archive / noarchive : sayfayı arşivine al / alma (Google için özel) all : sayfanın her şeyi arşive alınır <meta name="revisit-after" content="1 days"> 34

36 Robotun sitenize kaç günde bir gelmesi gerektiğini bildirirsiniz., Bunun dışında resimlerimize alt title parametrelerini düzgün bir şekilde girin. En önemli faktörlerden biride backlink seo fazlasıyda önemlidir başka sitelerden kendi sitenizin link vermenizde fayda olur. Son olaradakta güzel kategorinize uygun bir domain seçerek içeriğinizide doğru doldurarak seo durumu iyi olan bir site açmış olursunuz. 35