<!--Kendi Blog Sayfamızı Oluşturalım-->
Herkese merhabalar dostlar. Bugün sizlere kendi blog sayfanızı nasıl programlayacaksınız ondan bahsedeceğim.
Bu yapabilmek için basit html ve css kodlarını kullanacağız.
Html ve Css Kullanarak Blog Sayfası Nasıl Oluşturulur?
Öncelikle html ve css nedir ondan biraz bahsedeyim.
HTML, aslına bakarsanız tek başına bir programlama dili sayılamaz. Çünkü bu dille kendi başına çalışan bir program yazılamaz. Html bir metin işleme dilidir. Siz editörde yazarsınız bunu sitenizde görürsünüz aslında bunun olayı bu kadar fakat işin içine css girdimi olaylar "renkli" bir hal alıyor.
CSS, bir tür biçimlendirme dilidir. Yukarda "renkli" diye vurguladım ya heh tamda bu yüzden işte. Html ile yazdığımız yazıları renklendirme, biçimlendirme gibi şeyleri css yapıyor.
(Dikkat edin biz değil "css")
O zaman hadi başlayalım.
Html Dosyası Oluşturma
Bu iş için bize bir kod editörü lazım. Aslına bakarsanız not defterinde de yapılıyor fakat tavsiye etmem. Ben Notepad++ kullanıyorum.
Editörümüzü açıyoruz. Dosya -> Yeni diyerek boş bir sayfa oluşturuyoruz.
Ardından şu komutları sırasıyla yazıyoruz.
Kod:
<Doctype html>
<html>
<head>
</head>
<body>
</body>
</html>Bunlar sayfamızın temel html komutları yazacağımız komutlar bu etiketlerin arasına yazılacak. Sonra CTRL+S basıp dosya uzantısını ".html" olarak kayıt ediyoruz.
Css Dosyası Oluşturma
Css dosyasıda aynı şekilde Dosya -> Yeni diyoruz ve uzantısını ".css" olarak kaydediyoruz.
Programlamaya Başlayalım
Bu bölümde size blog sitemi yaparken kullandığım html ve css kodlarının açılamalarını vericem ardından kaynak kodları bütünüyle paylaşacağım. Bu sayede kodları bilerek kaynak kodu yorumlayabileceksiniz.
HTML KODLARI;
<html> : temel html kodudur.
<head> : sitemizi ilgilendiren fakat sitemizde görünmeyecek olan kodların yazıldığı kısımdır
<body> : sitemizi ilgilendiren ve sitemizde görünecek olan kodların yazıldığı bölümdür.
<title> : sitemizin sekmedeki başlığını ayarlar
<link> : belgeye ekleyeceğimiz harici kaynakları tanımlar
<div>, <span> : sınıflandırma gerektiğinde belgenin bölümlerini tanımlamak için kullanılır.
<h1>...<h6> : h1 en büyüktür, h6 en küçüktür. Başlık yazmak için kullanılır
<center> : öğeleri ortalamak için kullanılır.
<strong> : kalın yazmak için kullanılır
<ul> : sırasız liste tanımlamak için kullanılır
<ol> : sıralı liste tanımlamak için kullanılır
<li> : tanımlanan herhangi bir listenin öğelerini belirtmek için kullanılır.
<a href="..."> : Adres veya yol belirtmek için kullanılır
<p> : paragraf oluşturmak için kullanılır.
id="....." : Etikete özel stil oluşturmak için tanımlanan komuttur
class="..." : Tanımlanan etiketlere bir sınıf olarak aynı stilleri uygulayan komuttur.
target="_blank" : verilen adresin farklı bir sekmede açılmasını sağlar.
CSS KODLARI
margin : öğenin dış boşluğunu belirtmek için kullanılır.
padding : öğenin iç boşluğunu belirtmek için kullanılır.
font-family : yazı tipini ayarlar
font-size : yazı boyutunu ayarlar
background-color : arka plan rengini ayarlar
height : öğenin boyuna uzunluğunu ayarlar
width : öğenin enine uzunluğunu ayarlar
color : yazı rengini ayarlar
letter-spacing : harfler arasındaki boşluğu ayarlar
list-style:none : listenin yan yana listelenmesini sağlar.
float:left : sola yaslama
display:block : bir elementin kutu şeklinde alan kaplamasını sağlayan kot parçasıdır kullanıldığı alanda element yeni bir satırdan başlar.
text-align : yazı hizalamak için kullanılır
text-decoration:none : örneğin birlink verdiniz ve verdiğiniz Linkin altında link olduğunu belirten bir çizgi olur bu komut o alt çizgiyi kaldırmayı sağlar
line-height : satırlar arasındaki boşluğu ayarları
clear:both : Bir elemana float değeri atanmışsa bu elemandan sonraki gelen elemanların üzerindeki float etkisini kaldırır.
text-taransform : bir metnin büyük küçük harf ayarlarını yapmak için kullanılan komuttur.
HTML Kaynak Kod
Bu bölümde size blog sitemi yaparken kullandığım html ve css kodlarının açılamalarını vericem ardından kaynak kodları bütünüyle paylaşacağım. Bu sayede kodları bilerek kaynak kodu yorumlayabileceksiniz.
HTML KODLARI;
<html> : temel html kodudur.
<head> : sitemizi ilgilendiren fakat sitemizde görünmeyecek olan kodların yazıldığı kısımdır
<body> : sitemizi ilgilendiren ve sitemizde görünecek olan kodların yazıldığı bölümdür.
<title> : sitemizin sekmedeki başlığını ayarlar
<link> : belgeye ekleyeceğimiz harici kaynakları tanımlar
<div>, <span> : sınıflandırma gerektiğinde belgenin bölümlerini tanımlamak için kullanılır.
<h1>...<h6> : h1 en büyüktür, h6 en küçüktür. Başlık yazmak için kullanılır
<center> : öğeleri ortalamak için kullanılır.
<strong> : kalın yazmak için kullanılır
<ul> : sırasız liste tanımlamak için kullanılır
<ol> : sıralı liste tanımlamak için kullanılır
<li> : tanımlanan herhangi bir listenin öğelerini belirtmek için kullanılır.
<a href="..."> : Adres veya yol belirtmek için kullanılır
<p> : paragraf oluşturmak için kullanılır.
id="....." : Etikete özel stil oluşturmak için tanımlanan komuttur
class="..." : Tanımlanan etiketlere bir sınıf olarak aynı stilleri uygulayan komuttur.
target="_blank" : verilen adresin farklı bir sekmede açılmasını sağlar.
CSS KODLARI
margin : öğenin dış boşluğunu belirtmek için kullanılır.
padding : öğenin iç boşluğunu belirtmek için kullanılır.
font-family : yazı tipini ayarlar
font-size : yazı boyutunu ayarlar
background-color : arka plan rengini ayarlar
height : öğenin boyuna uzunluğunu ayarlar
width : öğenin enine uzunluğunu ayarlar
color : yazı rengini ayarlar
letter-spacing : harfler arasındaki boşluğu ayarlar
list-style:none : listenin yan yana listelenmesini sağlar.
float:left : sola yaslama
display:block : bir elementin kutu şeklinde alan kaplamasını sağlayan kot parçasıdır kullanıldığı alanda element yeni bir satırdan başlar.
text-align : yazı hizalamak için kullanılır
text-decoration:none : örneğin birlink verdiniz ve verdiğiniz Linkin altında link olduğunu belirten bir çizgi olur bu komut o alt çizgiyi kaldırmayı sağlar
line-height : satırlar arasındaki boşluğu ayarları
clear:both : Bir elemana float değeri atanmışsa bu elemandan sonraki gelen elemanların üzerindeki float etkisini kaldırır.
text-taransform : bir metnin büyük küçük harf ayarlarını yapmak için kullanılan komuttur.
HTML Kaynak Kod
HTML:
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Sayfam</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="bas">
<div id="header">
<div id="site_baslık">
<center><h1><strong>MrMaXim</strong><span class="baslık_2renk">Blog</span></h1>
<h2>print ("Biz Sizler İçin Varız!..")</h2></center>
</div>
<div id="menu" >
<ul>
<li class="menu_aktif"><a href="index.html">ANASAYFA</a></li>
<li><a href="icerik.html">İÇERİK</a></li>
<li><a href="yorumlar.html">YORUMLAR</a></li>
<li><a href="hakkımızda.html">HAKKIMIZDA</a></li>
<li><a href="egitim.html">EĞİTİM</a></li>
<li><a href="iletisim.html">İLETİŞİM</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="icerik">
<div id="icerik_1">
<h2>Htaccess Nedir?</h2>
<p><strong>.htaccess (hypertext access) ağ sunucusu (Apache vb.) tarafından kullanılan çeşitli isteklere yanıt veren -web üzerinde bazı ayar ve değişiklikleri yapmanızı sağlayan- bir yapılandırma dosyadır. Bu dosya ile yetki, kısıtlama ve web sunucunuz üzerinde değişiklik gibi işlemlerin hepsi yapılabilir.</strong></p><br>
<p>Web sitesinin root dizini içinde bulunur. Sunucunun yapılandırma ayarlarının olduğu bazı dizinlerin içerisinde, bulunduğu dizin için ayarları geçersiz kılarak yeni kural veya yetkilerin eklenebilmesine olanak tanır. Örnek verecek olursak; 404 hata sayfalarının yapacaklarını ayarlamak, web sunucunuzda ki dosya yada dizinlere yetki düzenlemesi yapmak, (SEO) arama motoru optimizasyonunu sağlamak.<br>.htaccess doyasının en kullanışlı yanlarından biriside herhangi bir programlama (kodlama) bilgisi olmadan web siteniz için .htaccess dosyası oluşturabilirsiniz.</p>
</div>
<div id="icerik_2">
<h2>OPENCART NEDİR?</h2>
<p><strong>Opencart işini internet ortamına taşımak isteyen kişi veya kişiler için tasarlanmış php tabanlı, açık kaynak kodlu bir e-ticaret platformudur.</strong></p><br>
<p>Bu platformun kullanımı gün geçtikçe artmakta. Platformu cazip kılan şeyler ise tamamen ücretsiz ve herhangi bir yazılım uzmanlığı, kodlama veya programlama becerisi olmadan kendi e-ticaret platformunuzu yapabiliyor olmanız. Hem de isterseniz açık kaynak kod desteği olduğundan kendi isteğinize göre değiştirip, geliştirebilmeniz çok güzel bir özellik.</p><br>
</div>
</div>
<div id="sidebar">
<div class="gadget">
<h2>Kategoriler</h2>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<div class="gadget">
<h2>İşinize Yarayabilir</h2>
<ul>
<li><a href="https://www.google.com"target="_blank">Google</a></li>
<li><a href="https://www.youtube.com/"target="_blank">Youtube</a></li>
<li><a href="#">MrMaXim</a></li>
<li><a href="#">Yardım İçin</a></li>
</ul>
</div>
<div class="gadget">
<h2>Sosyal Medya</h2>
<ul>
<li><a href="https://www.facebook.com"target="_blank">Facebook</a></li>
<li><a href="https://tr.linkedin.com/"target="_blank">Linkedin</a></li>
<li><a href="http://www.instagram.com"target="_blank">Instagram</a></li>
<li><a href="https://twitter.com"target="_blank">Twitter</a></li>
</ul>
</div>
</div>
<div id="clear">
</div>
<div id="footer">
Copyright © <a href="www.google.com">MrMaXim </a>| <a href="iletisim.html">İletişim</a> | <a href="hakkimizda.html">Hakkımızda</a>
</div>
</div>
</body>
</html>CSS Kaynak Kod
CSS:
@charset "utf-8";
/* CSS Document */
*
{ margin: 0;
padding: 0;}
body{
font-family: Arial;
font-size:14px;
background-color: white;
}
#header
{
height: 240px;
background-color: #4B0082;
}
#site_baslık
{
width: 900px;
height:168px;
margin-left:auto;
margin-right:auto;
}
#site_baslık h1{
color: #FFF;
letter-spacing: 4px;
padding-top: 42px;
font:38px'century gothic', arial, sans-serif;
}
.baslık_2renk{
color: #00FF00;
}
#site_baslık h2{
font:13px'century gothic', arial, sans-serif; ;
color: #DDD;
padding-top: 4px;
padding-left:5px;
}
#menu{
width:900px;
height:72px;
background: #9932CC;
margin-left:auto;
margin-right:auto;
}
#menu ul{
list-style:none;
}
#menu ul li{
float: left;
display: block;
height: 37px;
text-align: center;
padding: 29px 26px 6px 26px;
font-family: arial, sans-serif;
font-size: 14px;
}
#menu ul li a{
text-decoration: none;
color: #FFF;
}
.menu_aktif {
background: #8B008B;
}
#content{
width: 900px;
margin-left: auto;
margin-right: auto;
}
#icerik{
width: 670px;
float: left;
margin-top: 16px;
height: 725px;
}
#icerik_1,#icerik_2{
padding-top: 16px;
padding-right: 24px;
padding-bottom: 23px;
padding-left: 20px;
color: #333;
text-align: justify;
line-height: 21px;
}
#icerik_1 h2,#icerik_2 h2 {
font: 22px 'trebuchet ms' , arial, sans-serif;
color: #BA55D3;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
#sidebar{
width: 230px;
float: left;
height: 725px;
}
#sidebar .gadget {
color: #777;
line-height: 30px;
padding-top: 10px;
padding-right: 16px;
padding-bottom: 20px;
padding-left: 40px;
margin-left: 10px;
}
#sidebar h2{
font: 22px 'trebuchet ms' , arial, sans-serif;
color: #EE82EE;
margin-top: 20px;
margin-bottom: 15px;
margin-left: -15px;
padding-top: 20px;
padding-bottom: 5px;
}
#clear{
clear: both;
}
#footer
{
width: 900px;
height: 33px;
text-align: center;
background: #4B0082;
color: #EE82EE;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'lucida sans unicode', arial, sans-serif;
font-style: normal;
font-weight: normal;
padding-top: 24px;
padding-right: 0px;
}
#footer a
{
color: #FFF;
text-decoration: none;
text-align: center;
}
#footer a:hover
{
color: #0D66A5;
text-decoration: underline;
}Teşekkürler, iyi forumlar...
