Yazar |
Mesaj |
-
efsane-arkiler
Aktif Üye
|
05.08.2011, 20:25 (UTC) Mesaj konusu: Css ve Html |
|
|
Öncelikle merhabalar.. Herkes web sitelerinde html kodları paylaşıyor, css hakkında bilgi veriyor vs. vs.. Bende karar verdim bilgilerimi hem burada pekiştireceğim hemde sizlere elimden geldiğince css ve html bütünlüğünü anlatacağım... Gerektiği zaman videolu anlatım yapmaktan çekinmeyeceğimi dile getiriyorum... Eğer anlattıklarımı yapamazsanız videolu anlatımla tekrar anlatabilirim... Ayrıca burada kesinlikle reklam yapmayacağım...
Öncelikle tüm derslerimizde kullanacağımız programlar ;
> Notepad++ [ Google'de aratıp bulabilirsiniz.. Boyutu çok küçük zaten ]
> Bir adet tarayıcı [ Google Chrome kullanacağım derslerde ama farketmez. Sadece önizlemeler için gerekli... ]
DERS 1 = HTML ve CSS'e Giriş
İlk olarak aşağıdaki gibi masaüstümüzde CSS adında bir klasör oluşturup bu klasörümüzün içine 2 adet not defteri açıyoruz.. Yalnız burada önemli olan dosyaların uzantıları... Aynen aşağıdaki gibi olmalı...
1. Not Defteri İsmi ve Uzantısı = index.htm
2. Not Defteri İsmi ve Uzantısı = css.css
Şimdi bu iki dosyayı seçip Notepad++ ile açıp asıl anlatımımıza başlıyoruz... 2 Dosyayıda açtıktan sonra index.html dosyamıza aşağıdaki kodları yazıyoruz... Elimizle yazmamız [bakarak bile olsa] daha iyidir...Yavaş yavaş alışırsınız]
Şimdi oluşturduğumuz dökümana bir isim vermek için "<body></body>" tagları arasına aşağıdaki kodu ekleyip bir isim vermeliyiz...
Kod: <title>BAŞLIK BURAYA GELMELİ</title>
İşte şimdi yapacağımız işlem çok önemli.. Burada html dosyamızda yazdığımız yazılara şekil vermek rengini değiştirmek,font büyüklüğü,font türü vs. tüm özellikleri vermek için az önce açtığımız diğer dosyamızı kullanacağız..Yani "css.css" dosyamızı... "Peki burada yaptığımız değişikler nasıl olacakta index.html sayfamızda gözükecek?" Bu sorunun cevabını kısaca anlatayım.. Her zaman ki gibi bir kod ile.. Bu kodda dosyayı nereye açtığınız çok önemli.. Şimdi kodu veriyorum ve inceliyoruz....
Kod: <link rel="stylesheet" type="text/css" href="css.css" />
Burada az çokta olsa anlamışsınızdır...Bizi kodda asıl ilgilendiren bölüm "href="css.css" bölümüdür... Burada ilk başta açtığımız dosyamız masaüstünde olduğu için direk dosyamızın ismini yazdık.. Fakat bu işlem masaüstünde bir css dosyamız olsaydı, onun iöinde bir başka css dosyamız olsaydı ve bu "css.css" dökümanımızda onun içinde olsaydı kodu aşağıdaki gibi değiştirmemiz gerekecekti...
Kod: <link rel="stylesheet" type="text/css" href="css/css.css" />
Yani masaüstünde bir klasörün içinde başka bir klasör ve o başka klasörün ismi css... O klasörün içinde de css.css dosyamız var.. Buradan da anlaşıldığı gibi dosyamızın adını ve sonra da dökümanımızın adını yazardık.. Ama biz ilk halini kullanacağız...Aşağıda kodun son hali var...
Gelelim asıl kısıma.. "<body></body>" tagı arasına yerleştireceklerimize... Öncelikle biz bu tagın arasına 6 farklı başlık çeşidi + özel başlık çeşidi sunabiliriz... Html'de başlıklar 6 tanedir.. Bunlar ;
Kod: <h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
Bu başlıklardan <h1> en büyüğü <h6> en küçüğüdür... Fakat biz özel bir başlık oluşturabiliriz.. Ama bundan önce bu 6 başlığı kodumuza ekleyelim ve artık css.css dosyamızın yardımı ile renk vs. özellikleri verelim...
Şimdi ise css.css dosyamıza girip aşağıdaki kodu ekliyoruz.. Tabi inceleyerek..
Kod: h1
{
color: red;
font-family: arial;
font-weight: italic
}
h2,h3
{
color: blue;
font-family: arial;
font-weight: bold
}
h4,h5,h6
{
color: green;
font-family: verdana;
font-weight: italic
}
Önizleme
Gelelim paragraf eklemeye... Paragraf kodu aşağıda...
Kod: <p> Bu bir paragraftır... </p> |
|
↑
|
|
|
-
efsane-arkiler
Aktif Üye
|
05.08.2011, 20:29 (UTC) Mesaj konusu: |
|
|
|
|
↑
|
|
|
-
grapiker
Aktif Üye
Konum: Rize
|
06.08.2011, 06:50 (UTC) Mesaj konusu: |
|
|
muhtemelen çoğu kişinin işine yarayacaktır çok güzel anlatmışsın herşeyi kanka başarılar ______________ Hertürlü İletşim İçin:
http://www.facebook.com/Y.Berki |
|
↑
|
|
|
-
ve-siir
Aktif Üye
|
06.08.2011, 11:24 (UTC) Mesaj konusu: |
|
|
grapiker yazmış: muhtemelen çoğu kişinin işine yarayacaktır çok güzel anlatmışsın herşeyi kanka başarılar
Teşekkürler.. Zaman buldukça buradan css derslerine devam edeceğim...______________ |
|
↑
|
|
|
-
bs-destek-merkezim
Uzman Üye
|
06.08.2011, 15:37 (UTC) Mesaj konusu: |
|
|
Güzel anlatım olmuş ama html ve css'i bir arada anlatırken dikkatli ol. İkiside geniş konular. Bunu zaten sende çok iyi bir şekilde biliyorsun. ______________ afilliyanlizlik, anadolulular ile Ayak6Animasyon 'a buradan selam olsun ve Kodbanks ile Limitsiz-Paylaşım'a sonsuz teşekkürler.
Bana ulaşmak istiyorsanız tıklayın. |
|
↑
|
|
|
-
oyuntutsagi
Bedava-Sitem Bağımlısı
|
06.08.2011, 15:46 (UTC) Mesaj konusu: |
|
|
Mükemmel anlatım uzun zamandır böylesini görmemiştim |
|
↑
|
|
|
-
efsane-arkiler
Aktif Üye
|
06.08.2011, 21:02 (UTC) Mesaj konusu: |
|
|
bs-destek-merkezim yazmış: Güzel anlatım olmuş ama html ve css'i bir arada anlatırken dikkatli ol. İkiside geniş konular. Bunu zaten sende çok iyi bir şekilde biliyorsun.
Haklısın... Bu günde sabahlayacağım =) Uyukusuzluktan öleceğim ama bu konuyu tamamlamaya çalışacağım... Cidden çok karışık oluyor ikisi birlikte ama elimden geldiğince anlatım yapacağım... Zaten ilk dersimizle giriş yaptık...
oyuntutsagi yazmış: Mükemmel anlatım uzun zamandır böylesini görmemiştim
Teşekkür ederim... Madem uzun zamandır böyle bir anlatım görmedin o zaman bu konuyu takip et dostum =)______________ |
|
↑
|
|
|
-
bilgisim
Acemi Üye
Konum: İstanbul
|
06.08.2011, 21:58 (UTC) Mesaj konusu: |
|
|
Çok güzel anlatmışsınız inşaallah devam edersiniz yazılarınıza |
|
↑
|
|
|
-
baks-bani
Uzman Üye
|
06.08.2011, 21:59 (UTC) Mesaj konusu: |
|
|
bilgisim yazmış: Çok güzel anlatmışsınız inşaallah devam edersiniz yazılarınıza ______________
Sitemi silerlerse hakkınızı helal edin. |
|
↑
|
|
|
-
efsane-arkiler
Aktif Üye
|
06.08.2011, 22:08 (UTC) Mesaj konusu: |
|
|
baks-bani yazmış: bilgisim yazmış: Çok güzel anlatmışsınız inşaallah devam edersiniz yazılarınıza
Teşekkürler... Bu sabah 05.00 gibi 2. dersi yazmaya başlayacağım ve herhalde 07.00 gibi biter ve eklerim =) [ Elimden geldiğince güncel tutacağım ]______________ |
|
↑
|
|
|
-
1bsinifiyiz
Uzman Üye
Konum: Bursa
|
06.08.2011, 22:59 (UTC) Mesaj konusu: |
|
|
Gerçekten büyük emek veriyorsun.Ellerine sağlık.Konunun kıymetinin bilinmesi dileğiyle... ______________ Senden çok uzaklarda değilim görmesini bilen gözlerin bakışındayım. belki sana senden daha yakın bir yerde, çarpan kalbinin her atışındayım.
M.Aslan |
|
↑
|
|
|
-
efsane-arkiler
Aktif Üye
|
06.08.2011, 23:36 (UTC) Mesaj konusu: |
|
|
1bsinifiyiz yazmış: Gerçekten büyük emek veriyorsun.Ellerine sağlık.Konunun kıymetinin bilinmesi dileğiyle...
Teşekkürler... İnşallah.. Amacım Mert [Şahin] arkadaşımız gibi bir kitap çıkarmak ama bu iki konu birlikte =) Ayrıca tasarım olmadıysa söyleyebilirsin abla.. =)______________ |
|
↑
|
|
|
-
efsane-arkiler
Aktif Üye
|
07.08.2011, 03:50 (UTC) Mesaj konusu: |
|
|
DERS 2 = HTML ve CSS ile Paragraf Oluşturalım...
Tekrar merhaba arkadaşlar.. Bu dersimizde sizlere html ve css'i kullanarak minik bir yazı hazırlamanızı sağlayacağım... Aşağıda önceki dersimizin sonunda kalan kodlar var... Kodlardan <body></body> tagı arasındaki kodları siliyoruz.. Yani başlıkları ve paragrafları...
Yani aşağıdaki şekilde olacak...
Daha sonra sildiğimiz yere aşağıdaki kodu ekliyoruz.. Tabi inceleyerek...
Kod: <h4>Bedava-Sitem</h4>
<p>3 dakika içinde kendi websiteni kur:<br/>
bu servis bedavadır!<br/>
kullanması çocuk oyuncağı - hiç programlama bilgisi gerektirmez!<br/>
profesyonel tasarımlar seçmeye hazır<br/>
kendine ait kısa siteninadi.tr.gg gibi bir domainin olur<br/>
Ziyaretçi defteri, Ziyaretçi sayacı, Anket fonksiyonu, ve daha birçok ilginç ekstralar. - herşey bedava!</p>
<b><a href="http://www.bedava-sitem.com">Bedava Siteni Oluştur..!</a></b>
---------------------------------------------------------------------------------------------------------------------------------------
<h4> = 6 farklı başlık çeşidinden 4. başlık çeşidini başlatır...
</h4> = 6 farklı başlık çeşidinden 4. başlık çeşidini bitirir...
<p> = Paragrafı başlatır...
</p> = Paragrafı bitirir...
<br/> = Düz yazılarda satır atlar...
<a href="http://www.bedava-sitem.com">Bedava Siteni Oluştur..!</a> = Yazıya link verilmesini sağlar...
---------------------------------------------------------------------------------------------------------------------------------------
Bu kodu <body> </body> tagı arasına eklediğimizde aşağıdaki gibi bir görüntü oluşacaktır...
Peki ya yazımız bu şekilde mi kalacak?
Tabiki de hayır.. Şimdi css dosyamıza ekleyebileceğimiz yazı özelliklerini aşağıya yazdım... Buradan istediğiniz özellikleri seçip ekleyebilirsiniz..
color | Yazının rengini değiştirir | Örnek = "color:red;"
text-align | Yazının hizalamasını ayarlar | Örnek = "text-align: center;"
text-decoration | Yazıya çizgi özellikleri ekler | Örnek = "text-decoration: underline;"
font-family | Yazı türünü seçmemize yarar ( Örnek Tahoma ) | Örnek = "font-family: Arial, Verdana, Tahoma;"
font-size |Yazı türünün boyutunu belirler | Örnek = "font-size: 12px;"
font-style |Yazıya italik vb. özellikler ekler | Örnek = "font-style: italic;"
font-weight |Yazıya kalınlık vb. özellikler ekler | Örnek = "font-weight: bold;"
Şimdi css.css dosyamızı açıyoruz... Öncelikle içinde bulunan tüm kodları siliyoruz ve aşağıdaki kodları ekliyoruz.. Tabi inceleyerek... [ Kodları ben kafama göre yaptım.. Yukarıdaki bilgiye göre değiştirebilirsiniz...]
Kod: h4 {
color: red;
text-decoration: underline;
font-family: Arial, Verdana, Tahoma;
font-weight: bold;
}
p {
color: #2e2e2e;
font-family: Arial, Verdana, Tahoma;
font-size: 12px;
font-style: italic;
font-weight: bold;
}
b {
color: green;
font-family: Arial, Verdana, Tahoma;
font-size: 15px;
font-style: italic;
}
Bu kodlarla değiştirip yeniden kayıt edersek aşağıdaki gibi bir görüntü oluşacaktır...
Bana sorarsanız tam anlamı ile görsellik bakımından çokta iyi sayılmaz... Bu nedenle maddeleri listeleyelim...Bunun için 2 farklı yöntem kullanabiliriz...
Bu resimdeki yöntemin kodu aşağıda.. Bu kodu <p></p> tagı arasındakileri silip eklerseniz olur...
Kod: <ol><li>bu servis bedavadır!</li>
<li>kullanması çocuk oyuncağı - hiç programlama bilgisi gerektirmez!</li>
<li>profesyonel tasarımlar seçmeye hazır</li>
<li>kendine ait kısa siteninadi.tr.gg gibi bir domainin olur</li>
<li>Ziyaretçi defteri, Ziyaretçi sayacı, Anket fonksiyonu, ve daha birçok ilginç ekstralar. - herşey bedava!</li>
</ol>
Bu resimdeki yöntemin kodu aşağıda.. Bu kodu <p></p> tagı arasındakileri silip eklerseniz olur...
Kod: <ul><li>bu servis bedavadır!</li>
<li>kullanması çocuk oyuncağı - hiç programlama bilgisi gerektirmez!</li>
<li>profesyonel tasarımlar seçmeye hazır</li>
<li>kendine ait kısa siteninadi.tr.gg gibi bir domainin olur</li>
<li>Ziyaretçi defteri, Ziyaretçi sayacı, Anket fonksiyonu, ve daha birçok ilginç ekstralar. - herşey bedava!</li>
</ul> |
|
↑
|
|
|
|