Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj05.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>


Bu kodu index.html dosyamızda <h6> dan sonra eklersek en sonda gözükür.. Ama biz her başlığa ayrı ayrı paragraf ekleyeceksek aşağıdaki gibi eklemeliyiz...



Bunları ekledikten sonra tekrar css.css dosyamızı açıyoruz ve aşağıdaki kodları inceleyerek ekliyoruz.. Aynen başlıklara eklediğimiz kodlar gibi...



Bunları yaptıktan sonra ilk konumuzunda sonuna geldik.. İşte son önizlememiz... Diğer konumuza bu kaldığımız yerden devam edeceğiz...


______________
Mesaj05.08.2011, 20:29 (UTC)    
Mesaj konusu:

Eğer sizde kodları ekleyip önizleme almak istiyorsanız kodları ekledikten sonra ister "Ctrl+Shift+S" kombinasyonu ile kayıt eder, isterseniz de bu resimdeki kaydetme tuşuna her iki döküman içinde basıp aşağıdaki resmi uygulamanız yeterlidir...


______________
Mesaj06.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
Mesaj06.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...
______________
Mesaj06.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. Wink
______________
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.
Mesaj06.08.2011, 15:46 (UTC)    
Mesaj konusu:

Mükemmel anlatım uzun zamandır böylesini görmemiştim
Mesaj06.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. Wink


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 =)
______________
Mesaj06.08.2011, 21:58 (UTC)    
Mesaj konusu:

Çok güzel anlatmışsınız inşaallah devam edersiniz yazılarınıza Idea
Mesaj06.08.2011, 21:59 (UTC)    
Mesaj konusu:

bilgisim yazmış:
Çok güzel anlatmışsınız inşaallah devam edersiniz yazılarınıza Idea

______________

Sitemi silerlerse hakkınızı helal edin.
Mesaj06.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 Idea


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 Smile ]
______________
Mesaj06.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
Mesaj06.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.. =)
______________
Mesaj07.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>


İşte kodlarımızın son halleri...

index.htm



css.css



Ve aşağıda da bütün kodumuzun son hali var... Not : Baş harflerini büyülttüm Smile



Bir sonraki dersimizde sizlerle birlikte linkler hakkında konuşacağız....

Anlatım : Mert [ Ben ]
______________
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu