Nuri AVCI » nasıl http://www.nuriavci.com Bir başka WordPress sitesi Mon, 30 Jan 2012 14:26:11 +0000 en hourly 1 http://wordpress.org/?v=3.0 Kişisel web witesi hazırlama – 2 http://www.nuriavci.com/site-haberleri/kisisel-web-witesi-hazirlama-2.html http://www.nuriavci.com/site-haberleri/kisisel-web-witesi-hazirlama-2.html#comments Sun, 03 Jan 2010 21:47:06 +0000 Nuri AVCI http://www.nuriavci.com/?p=441

İlk dersimizde kullanacağımız programları ve sıklıkla bahsedeceğimiz kelimelerin açıklamalarını yapmıştım. Kişisel web sayfası hazırlama ile ilgili bu ikinci dersimizde de dreamweaver ve fireworks programlarına başlamadan önce temel web tasarımı bilgilerini vermenin faydalı olacağını düşünüyorum. Bu derste html üzerinde duracağım. Her ne kadar sonraki derslerde html ile sürekli kod yazmayacak olsakta yaptımız sayfaların nasıl oluştuğunu, arka plandaki kodların ne anlama geldiğini bilmenizde yarar var. Yeteri kadar html bildiğini düşünen arkadaşlar bu dersi atlayabilirler. Özellikle html’ yi ilk defa duyan arkadaşlar içeri buyursunlar.

Birçok kaynakta html ‘ nin bir programla dili olduğu söylensede Html aslında bir işaretleme dilidir. Etiket (tag) denilen kod parçacıklarının bir araya gelmesi ile ziyaret ettiğimiz web sayfaları ortaya çıkar. Yani aslında her web sayfasının arka planında kodlar vardır.

Html dilinin yetersiz kaldığı durumlarda imdadına php, asp, java script, css vb. diller yetişir. Ama hepsinin temelinde ve öncesinde html olduğunu unutmamız gerekiyor. Web sitelerinin atası diyebiliriz : )

Html ‘ nin eksik tarafı ise html ile hazırlanan sayfalarda sadece yazıları biçimlendirmemize ve resimler eklememize izin verir. Yani sadece html ‘ yi kullanarak tanıtım sayfasının ötesinde ziyaretçi defteri, anket, forum gibi sayfalar hazırlayamazsınız. Bu özellikleri sitesinde görmek isteyen web master adayı arkadaşların html’ den sonra asp yada php’ den birisini seçmesi gerekecek.


Html dili kişisel web sayfası hazırlarken ne işimize yarayacak?

Biz dreamweaver programını kullanacağımız için bu program html kodlarını kendisi oluşturacak. Ama css yada java script kodlarını sayfamızın içerisine gömmemiz gerektiğinde yada dreamweaver programının olmadığı bir bilgisayarda sayfamızı güncellemek istediğimizde html çok fazla işimize yarayacaktır. O zaman içinizden bana bir teşekkür etseniz yeter : )

Bir html sayfası oluşturmak için dreamweaver, frontpage gibi gelişmiş özellikleri olan tasarım programlarını kullanabileceğimiz gibi windows’ un not defterinide kullanabilirsiniz. Biz bu dersimizde küçük bir uygulama ile not defterinde temel bazı bilgileri vereceğiz. Zaten tek bir sayfadaki bu kısa yazı ile html uzmanı olmanız söz konusu olamaz. Eğer html konusunda detaylı bilgi almak isterseniz yada html komutlarının kullanımını ve örneklerini ayrıntılı olarak görmek isterseniz buraya tıklayarak daha önce hazırlamış olduğum html eğitim cd’ sini bilgisayarınıza indirerek görüntülü olarak oradan çalışabilirsiniz.

Basit bir html sayfası oluşturmak için masaüstünde sağ tıklayın, açılan menüden Yeni > Metin Belgesi diyerek not defterini masaüstüne getiriyoruz. Şimdi not defterini açarak sayfamızı kodlamaya başlayabiliriz.

İlk olarak not defterine aşağıdaki kodları yazalım.

	<html>
        <head>
	  <title>İlk web sayfam - www.nuriavci.com</title>
	</head>

        <body>
	Kişisel Web Sayfama Hoşgeldiniz...
	</body>
	</html>

Sonrasında Dosya > Farlı kaydet menüsünden dosyamıza index.html ismini verelim. ( Buradaki html uzantısı çok önemli.) Şimdide html uzantılı dosyayı nereye kaydettiysek çift tıklayarak açalım ve ilk web sayfamızı görüntüleyelim.

Son olarak sayfamızdaki temel html kodlarını açıklayalım. Buradaki < ve > işaretleri arasına yazılan her bir komuta etiket dediğimizi bir kez daha hatırlatalım.

<html> – Bütün html sayfaları bu etiket ile başlar. web sayfasının başladığını işaret eder.

<head> – Head etiketi sayfanın baş bölümünü işaret eden etiketdir. Sayfa ile ilgili açıklayıcı bilgiler burada yer alır.

<title> – Başlık etiketidir. Buraya yazdığınız yazılar tarayıcının en üstünde görüntülenecektir.

</title> – Başlık etiketi kapatmak için kullanırız. Üstteki başlık etiketinden farkı önündeki / işaretidir. Açılış ve kapanış başlık etiketleri arasına yazılan yazı tarayıcının en üstünde görüntülenir. Google tarafından title etiketi çok büyük öneme sahiptir.

</head> – Baş etiketini kapatır.

<body> – Sayfa içerisinde görüntülenecek olan yazılar ve resimler bu etiketten sonra eklenir. Sayfanın gövde bölümünü oluşturur.

</body> – Sayfadaki gövde bölümünün bittiğine işaret eder.

</html> – Web sayfasının bittiğini işaret eder. Bütün sayfalar bu etiket ile sonlanır.

Yukarıdaki açıklamalar ilk seferde kısa ve karışık gelebilir. Ama genel hatlarıyla web sayfalarının <html> etiketiyle başlayıp </html> etiketiyle bittiğini bilmeliyiz. Ayrıca sayfamızı baş ve gövde olmak üzere iki bölüme ayırıyoruz. Baş bölümünü <head> ve </head> etiketleri arasına yazdıklarımız oluşturur. Sayfanın başlığıda <title> ve </title> etiketleri arasında baş bölümünde yer alır. Sayfaların görünen yüzü ise <body> ve </body> etiketleri arasında yer alan kısmıdır.

Bu açıklama soru işaretlerini biraz azalttı ise sayfamızdaki kodları tekrar görebilmek için html uzantılı dosya üzerinde sağ tıklayıp birlikte aç diyerek not defterini seçelim. Böylece kodlarımıza tekrar ulaşmış olduk. İstediğiniz düzenlemeyi yapıp dosyadan kaydet dedikten sonra sayfayı yeniden açtığınızda değişikliklerin sayfaya yansıdığını göreceksiniz.

Ziyaret ettiğiniz bir sayfanın html kodlarını görmek isterseniz sayfa üzerinde sağ tıklayarak kaynağı görüntüle diyebilirsiniz. Not defteri ile birlikte sayfa kodları karşınıza çıkacaktır. Ziyaret ettiğiniz sayfaya göre bu kodların çokluğu sizi şaşırtabilir hatta bazılarınızı korkutabilir : )

Eğer bu satıra kadar geldiyseniz, izninizle size küçük bir ödev vermek istiyorum : ) Aşağıdaki etiketleri <body> ve </body> etiketleri arasına yazdığınız bir paragraf yazının aralarına ekleyin. Bakalım ne gibi değişiklikler göreceksiniz. Etiketlerin hepsinde kapanış bölümü olmak zorunda değil, eğer varsada doğru şekilde kullanmaya özen gösterin.

<br>

<b>……..</b>

<u>…….</u>

<i>……..</i>

<font color=”red”>…….</font>

<font size=”20″>…….</font>

<font color=”red” size=”20″>…….</font>

<center>…….</center>

<h1>…… </h1> bu etiketi h6 ya kadar kullanabilirsiniz. Ama açılış ve kapanış bölümlerinin aynı olmasına dikkat edin.

Şu ana kadar işin sıkıcı kısmını geride bıraktığımızı bilmenizi isterim. Ödevde bittiğine göre artık bir sonraki derste görüşmek üzere.

]]> http://www.nuriavci.com/site-haberleri/kisisel-web-witesi-hazirlama-2.html/feed 4 Güzel İnsan : Hakkı Öcal http://www.nuriavci.com/site-haberleri/guzel-insan-hakki-ocal.html http://www.nuriavci.com/site-haberleri/guzel-insan-hakki-ocal.html#comments Sun, 03 Jan 2010 19:31:22 +0000 Nuri AVCI http://www.nuriavci.com/?p=487
Türkiye’ de web tasarım ile uğraşan herkes mutlaka Hakkı Öcal’ ın yazdığı kitaplar ile tanışmıştır. Çünkü üstadın html, asp ve php kitapları Türkiye’ deki ilkler arasında ve başyapıt denecek nitelikte. Ayrıca BYTE, PC World, PC Life, NetLIFE gibi dergilerde yazılarının yayınlanması ve yurtdışındaki bazı projelerde ülkemizi temsil etmesi ne kadar bilgili bir insan olduğunu gösteriyor.

Uzatmadan konuya geleyim, 5-6 yıl kadar önce beni Hakkı Öcal ile tanıştıran mutasyon.net sitesini biraz önceki ziyaretimde aşağıdaki linkteki ayrıntı dikkatimi çekti. Yazının özellikle son bölümünü okuyunca Hakkı Öcal’ a bir kez daha hayran oldum. Yaptıkları ortada olan bu güzel insan, muhtemel iş yoğunluğuna rağmen kendisine gönderilen maillere bile içtenlikle cevap vermeyi ihmal etmemiş ki bu evde de Necip Fazıl’ın Hakkı Abisi olabilmeyi başarmış.

http://www.mutasyon.net/necip.asp?


]]> http://www.nuriavci.com/site-haberleri/guzel-insan-hakki-ocal.html/feed 0 Sitenize eklediğiniz google arama motorundaki Türkçe karekter hatasını düzeltme http://www.nuriavci.com/site-haberleri/sitenize-eklediginiz-google-arama-motorundaki-turkce-karekter-hatasini-duzeltme.html http://www.nuriavci.com/site-haberleri/sitenize-eklediginiz-google-arama-motorundaki-turkce-karekter-hatasini-duzeltme.html#comments Sat, 02 Jan 2010 19:24:17 +0000 Nuri AVCI http://www.nuriavci.com/?p=444

Web sitenize google arama motorunu eklediniz fakat ğ,ş,ü,ç gibi karekterleri yazdığınızda problem yaşıyorsunuz. 2 tane web siteme arama motorunu ekledikten sonra uzun bir süre aynı sorunu bende yaşadım ama nihayet çözümü buldum : )Google’ in arama motorunu sayfama geçen ay eklemiştim. Fakat tr karekter sorunu yüzünden bir türlü içime sinmiyordu. İlk olarak sayfanın dil kodlamısındadır diye düşündüm. Sürekli onu değiştirdim durdum. Biraz öncede aklıma birşey geldi, baktım düşündüğüm gibiymiş. Fazla uzatmadan çözüme geçeyim :

Google’ in size verdiği kod içerisindede bir dil kodlaması bölümü varmış, benim dikkatimi yeni çekti. Sayfanın değilde o kodların arasındaki dil kodunu değiştirmeniz sorunu çözecektir. Google’ in verdiği kod içerisinden şu bölümü bulun :

<input type=”hidden” name=”ie” value=”8859-9” />

Bulduğunuz bölümdeki kırmızı renki değerin yerine şunu yazın :


<input type=”hidden” name=”ie” value=”utf-8” />

Sorununuz bu şekilde çözülmüş olması lazım. Belki basit bir ayrıntı gibi ama gözden kaçtığı zaman arama motorunun bir esprisi kalmıyor. İşin kötü tarafı ben forumlarda bir türlü çözüm bulamamıştım.

Bir diğer çözüm yolu ise arama motoru kodunu aldığınız google adsance sayfanıza giriş yapın. Adsence kurulumu sekmesinden, Reklamları yönetin bölümüne giriş yapın. Buradan daha önce eklediğiniz arama motorunuzun ayarlarını değiştirebilirsiniz. Bunun içinde işlemler bölümünden Ayarları düzenleye tıklamanız yeterli. Açılan sayfadan Site kodlamanız bölümünü UTF-8 olarak değiştirirseniz karekter sorununuzun yine çözüldüğünü göreceksiniz.

Kolay gelsin…

]]> http://www.nuriavci.com/site-haberleri/sitenize-eklediginiz-google-arama-motorundaki-turkce-karekter-hatasini-duzeltme.html/feed 0 Kişisel Web Sitesi Nasıl Hazırlanır? Kişisel web sitesi örnekleri http://www.nuriavci.com/site-haberleri/kisisel-web-sitesi-nasil-hazirlanir-kisisel-web-sitesi-ornekleri.html http://www.nuriavci.com/site-haberleri/kisisel-web-sitesi-nasil-hazirlanir-kisisel-web-sitesi-ornekleri.html#comments Mon, 20 Jul 2009 22:03:23 +0000 Nuri AVCI http://www.nuriavci.com/?p=368

Hergün web sayfama google arama motorundan “kişisel web sitesi örnekleri”, “kişisel web sitesi nasıl yapılır?” gibi kelime kombinasyonları ile giriş yapıldığını görüyorum. Bunun üzerine bende sizlere belki fikir verir düşüncesiyle beğendiğim kişisel site örneklerini ve bu siteleri nasıl hazırlayabileceğinizi anlatan bir yazı hazırlamaya karar verdim.

Burada kişisel bir sitenin nasıl hazırlanacağını sıfırdan sonuna kadar anlatmam mümkün olmayacağı için size sadece hazırlamak ıstediğiniz site yapısına göre başlangıç noktası hakkında fikir verebilirim. İlk olarak kişisel web sitenizde neye yer vereceksiniz onu belirlemeniz gerekmektedir.

Örneğin sadece otobiyografi, iletişim bilgileriniz gibi düz yazılar ve resimlerinizden oluşan bir sayfa yapmak isterseniz windows’ un not defteri programı bile size yetebilir. Tabi bunun için html bilgisine ihtiyacınız var. Eğer ki html bilmiyorsanız ve yinede basit yapıda statik yani kullanıcı etkileşiminin olmadığı bir sayfa hazırlamak istiyorsanız çözüm olarak size web page maker’ i önerebilirim.

( Web Page Maker Programının 15 günlük deneme sürümünü indirmek için tıklayınız )
Bu programı kullanarak şablonları kullanarak hızlı bir şekilde web sayfalarınızı oluşturabilir, bu sayfalara resim, animasyon ve yazılarınızı ekleyebilir ve son olarak sayfaları linkler aracılığıyla birbirine bağlayarak sitenizi yayına hazır hale getirebilirsiniz. Bu program ile sitenizi nasıl hazırlayacağınızı ve web page maker ile hazırlanmış kişisel site örneklerini internette kolaylıkla bulabilirsiniz.

Eğer ki sitenizde yönetici paneli , anket, forum, üye girişi, yorum ekleme, haber ekleme vs. olsun isterseniz (ki bu tür web sayfalarına dinamik sayfalar denir) bu durumda php yada asp uzantılı bir sayfa hazırlamanız gerekir. Eğer sayfayı oturup kendim hazırlayacağım diyorsanız uzun bir yol sizi bekliyor demektir. Önce html, sonra asp yada php den birisini seçerek onu öğreneceksiniz. Bu programların dışında grafiklerinizi düzenlemek için fireworks yada photshop, sitenizi kodlarını düzenlemek için de not defterinden çok daha gelişmiş olan tasarım programlarından birisini (dreamweaver, frontpage) öğrenmeniz gerekecektir. Uzun bir yol demiştim :)

Tabi bunun da kolay bir yolu var. Çok fazla html, php, asp ve program bilgisi olmadan da dinamik sayfalar hazırlayabilirsiniz. Bu da ingilizcesi Cms diye kısaltılan içerik yönetim sistemleri sayesinde mümkündür. İçerik yönetim sistemini her şeyiyle hazır olan bir web sitesi olarak düşünebilirsiniz. Cms siteyi kurduğunuzda anket, forum, üyelik, yönetici paneli, haber, yorum vs. otomatik olarak sitemize eklenecektir. Siz bu modüllerin üzerinde bazı değişiklikler yaparak sitelerinizi özgünleştirebilirsiniz. İçerik yönetim sistemlerine örnek olarak da Php nuke, drupal, joomla yı sayabiliriz. Bu saydıklarım açık kaynak kodlu, php ile hazırlanmış en yaygın cms sistemlerindendir.

Cms kullanmanızın avantajlarından biriside açık kaynak kodlu olduğu için 1000 lerce tema (site görünümü), 1000 lerce modül (site bileşeni) bulabilirsiniz. Bunları ayrı ayrı birleştirip aynı site alt yapısını kullanarak 100lerce farklı site yapabiliriz.

Kullanacağınız site alt yapısına karar verdiğinizde Türkiye’ deki destek sitelerinden ayrıntılı yardım alarak kurulumdan başlayıp geliştirme aşamasına kadar hazırlayabilirsiniz.

Sitenizi tam anlamıyla hazır hale getirdikten sonra, web sitenizi yayınlamak için bir domain (alan adı=adres), bir de web alanına (host) ihtiyacınız olacak. Bunlar için profesyonel bir hizmet almak için yıllık 30-50 tl gibi bir ücret ödemeniz gerekecektir. Parayı ödeyerek alacağınız ftp adresi, kullanıcı adı ve şifresi ile size sağlanan alana bağlanarak hazırladığınız dosyaları internete yüklediğinizde siteniz hazır olacaktır.

Buraya kadar anlattıklarımız genel anlamda yol göstermek içindi. Eğer ki bu anlattıklarım size çok karışık gelir işin içinden çıkamazsanız msn adresim : nuriavci ( at ) gmail.com

Kişisel Site Örnekleri:

http://www.caferkara.org

http://www.baranbayuk.com

Not : Kişisel web sitenizi yorum olarak eklerseniz bende buraya web sitenizi örnek kişisel web sitesi olarak ekleyebilirim. Yorumlarınızdaki siteler içerisinden sadece kişisel olanlarını buraya örnek olarak ekliyorum. (Diğer siteleride ziyaretçilerimiz, yorum gönderen ziyaretçimizin isminin üzerine tıklayarak görebilirler.) Böylece kişisel site örneklerini çoğaltmış oluruz. Hemde siz sitenizi tanıtma fırsatı bulmuş olursunuz.

]]> http://www.nuriavci.com/site-haberleri/kisisel-web-sitesi-nasil-hazirlanir-kisisel-web-sitesi-ornekleri.html/feed 14 Web Adresinizin Başına İkon (ing: icon) Ekleyin http://www.nuriavci.com/site-haberleri/web-adresinizin-basina-ikon-ing-icon-ekleyin.html http://www.nuriavci.com/site-haberleri/web-adresinizin-basina-ikon-ing-icon-ekleyin.html#comments Wed, 13 May 2009 10:37:52 +0000 Nuri AVCI http://www.nuriavci.com/?p=351

Web adreslerinin başında minik ikon resimlerini görürsünüz. Örneğin mynet’ e girdiğinizde m harfini, google a girdiğinizde ise yeşil, sarı ve kırmızı renklerden oluşan bir g harfi görebilirsiniz. 2009 yılında açılan pr5 ve üzeri sitelerin yer aldığı dizin sitesi www.iyilink.org adresinin başında ise ( ok ) işaretini görebilirsiniz. İşte bu ikonları web adresinizin başına eklemeyi sağlayan kısa html kodunu ve sitelerinizde kullanabileceğiniz ikon örneklerini yazının devamında bulabilirsiniz.ilk olarak web sayfanıza uygun bir ikon bulmanız gerekmektedir. Ben aşağıya 220 adet 16*16 boyutlarında ikon resmi ekliyorum. Sitenize uygun olan varsa bu ikonlardan birisini kullanabilirsiniz. Yada internetten bulacağınız çevirici programlar yardımı ile herhangi bir resmi ico uzantılı hale getirebilirsiniz.

220 Tane İkon Download Et



Sitenizde kullanacağınız ikona karar verdikten sonra ico uzantılı resminizi sitenizin dosyalarının yer aldığı servere yüklüyorsunuz. index.html dosyası ile ico resminizin aynı yerde olduğunu varsayarsak <head>..</head> etiketleri arasına ekleyeceğimiz html kodumuz aşağıdaki gibi olacaktır.

<LINK REL=”SHORTCUT ICON” href=”dosyaismi.ico”>

]]> http://www.nuriavci.com/site-haberleri/web-adresinizin-basina-ikon-ing-icon-ekleyin.html/feed 6