Nuri AVCI » Html 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 Html, Php ve Mysql’ de Türkçe karekter sorunu ve çözümü http://www.nuriavci.com/html/html-php-ve-mysql-de-turkce-karekter-sorunu-ve-cozumu.html http://www.nuriavci.com/html/html-php-ve-mysql-de-turkce-karekter-sorunu-ve-cozumu.html#comments Sun, 10 Oct 2010 11:23:02 +0000 Nuri AVCI http://www.nuriavci.com/?p=618

Web tasarıma ilk başladığınızda karşınıza çıkacak belli başlı problemlerden biriside Türkçe karekter hatasıdır. Eğer html veya php sayfalarınızda Türkçe karekter sorunu yaşıyorsanız yada mysql veri tabanınızdan çektiğiniz verilerde Türkçe karekter hatası varsa yazımızın devamını okuyabilirsiniz.Html, php yada mysql deki Türkçe karekter hatasının çözümlerini basitten zora doğru sırayla verelim. En kolay çözüm html ve php’ de olduğu için ilk önce onları yazalım.

Bir html sayfasında <head> …..</head> etiketleri arasına web sayfasının desteklediği dil kodunu girmelisiniz. Aşağıdaki html kodunu başlık etiketleri arasına yazarsanız html sayfanızdaki karekter sorunu çözülmüş olacaktır.

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />

</head>

Yukarıdaki html kodunun bir benzerinide php sayfalar için ekleyebilirsiniz. Yine <head> etiketleri arasına aşağıdaki kodu ekliyoruz, sayfamızdaki Türkçe karekterlerin doğru görüntülenmesini sağlıyoruz.

<head>

header(“Content-Type: text/html; charset=ISO-8859-9″);

</head>

Html ve php sayfalarda yukarıdakileri yaptığınızda sayfanızdaki Tr karekterlerin artık doğru görüntülenmesi gerekiyor. İnternette yayınlamadan localhost’ ta kontral edecek olursanız karekterler yine sorunlu görüntülenebilir. İnternete yüklediğinizde bu sorunda ortadan kalmış olacaktır.

Gelelim php sayfalardaki mysql veritabanından çektiğimiz yada veritabanına eklediğimiz bilgilerdeki karekter hatalarına. Bunlar için veritabanımızın karşılaştırma (Collation) değerini latin_5 olarak kodlayacağız. Veritabanından her bilgi çekişimizde yada her bilgi eklememizde bu karşılaştırma değerini kodlamamız gerektiğinden veritabanı bağlantısı sağladığımız mysql_select_db(…) kodlarının hemen altına aşağıdaki kodu eklerseniz sorun çözülmüş olacaktır. Hatta ben veritabanı bağlantısı için kullanacağız koduda ekleyim, buradan aynen alıp kullanabilirsiniz : )


$dizin=localhost; // (örn : localhost)
$kullanici=root; // (örn : root)
$sifre=sifre; // (örn : sifre)
$vt=veritabani; // (örn : defter)

$baglanti=mysql_connect ($dizin,$kullanici,$sifre) or die (“Hata”);
$veritabani=mysql_select_db($vt) or die (“Hata”);
mysql_query(“SET NAMES ‘latin5′”);
mysql_query(“SET CHARACTER SET latin5″);
mysql_query(“SET COLLATION_CONNECTION = ‘latin5_turkish_ci’”);

Yukarıdaki kod ile veri tabanı bağlantısını yaparsanız artık veritabanından çektiğiniz bilgilerde tr karekter sorunu yaşamazsınız.

Son olarak bir php sayfasında formdan gelen verideki Türkçe karekterleri düzenlemek isterseniz, php nin str_replace fonksiyonunu kullanabilirsiniz. Formdan gelen mesaj ismindeki değişkenin içerisindeki Türkçe karekterleri düzeltelim. Bunun için aşağıdaki kodları kullanmanız yeterli olacaktır.

$mesaj = $_POST['mesaj'];

$tr = array(‘Ç’, ‘ç’, ‘Ğ’, ‘ğ’, ‘ı’, ‘İ’, ‘Ö’, ‘ö’, ‘Ş’, ‘ş’, ‘Ü’, ‘ü’);

$kod = array(‘& Ccedil;’, ‘& ccedil;’, ‘& #286;’, ‘& #287;’, ‘& #305;’, ‘& #304;’, ‘& Ouml;’, ‘& ouml;’, ‘& #350;’, ‘& #351;’, ‘& Uuml;’, ‘& uuml;’);

$veri = str_replace($tr, $kod, $mesaj);

Yukarıdaki kodları sırasıyla açıklayacak olursak mesaj isminde formdan gelen veriyi yine mesaj değişkinine atatık. Daha sonra tr isminde bir değişken atadık ve bu dizi değişkeni içerisine hangi Türkçe karekterlerin değiştirilmesini istiyorsak onları yazıyoruz. Kod değişkinine ise tr değişkeninde yazdığımız Türkçe karekterlerin hangi karekterler ile değiştirileceğini giriyoruz. Biz burada karekterleri html’ye karşılık gelen kodlarını değişkene atadık. Son olarakta str_replace fonksiyonu ile mesaj değişkeni içerisindeki Türkçe karekterleri kod değişkenindeki karşılıkları ile değiştirdik ve veri değişkenine atadık.

Sanırım Türkçe karekter hatası ile ilgili yaşayabileceğiniz problemlerin hepsininde çözümü yukarıda var. İstediğinizi kullanabilirsiniz.

]]> http://www.nuriavci.com/html/html-php-ve-mysql-de-turkce-karekter-sorunu-ve-cozumu.html/feed 6 Resimleri ikona dönüştürme sitesi (jpg to ico, gif to ico converter) http://www.nuriavci.com/site-haberleri/resimleri-ikona-donusturme-sitesi-jpeg-to-ico-gif-to-ico.html http://www.nuriavci.com/site-haberleri/resimleri-ikona-donusturme-sitesi-jpeg-to-ico-gif-to-ico.html#comments Fri, 09 Apr 2010 09:38:12 +0000 Nuri AVCI http://www.nuriavci.com/?p=698

Bilgisayarınızda masaüstünde kullandığınız simgelerin yerine kendi resminizi kullanmak isteyebilirsiniz. Yada web sitelerinizde web adresinizin yanına favicon resmi eklemek isteyebilirsiniz. Bu durumda elinizdeki resimleri ico (simge resim’ e) dönüştürmeniz gerekecektir. Nadiren kullanacağınız bu işlem için bilgisayarınıza program kurmanıza gerek yok. Yazımın devamındaki web adresini ziyaret ederek resimlerinizi kısa süre içerisinde 16*16, 32*32 yada 48*48 pixel boyutlarında icon resimlerine dönüştürebilirsiniz.


http://tools.dynamicdrive.com/favicon/

Ayrıca aşağıdaki yazımda web sitenize nasıl favico ekleyeceğinizi daha önce anlatmıştım.

http://www.nuriavci.com/html/web-adresinizin-basina-ikon-ing-icon-ekleyin.html

]]> http://www.nuriavci.com/site-haberleri/resimleri-ikona-donusturme-sitesi-jpeg-to-ico-gif-to-ico.html/feed 1 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 Html Eğitim Cd’ si http://www.nuriavci.com/site-haberleri/html-egitim-cd-si.html http://www.nuriavci.com/site-haberleri/html-egitim-cd-si.html#comments Sun, 03 Jan 2010 20:08:23 +0000 Nuri AVCI http://www.nuriavci.com/?p=489

2006 yılında Kocaeli Üniversitesi Bilgisayar Öğretmenliği Bölümünde okurken proje ödevi olarak hazırladığım oldukça basit yapıdaki html eğitim cd’ si 8 dersten oluşuyor. Yaklaşık 13.5′ mb lık dosyayı download etmeden önce ilk dersi örnek olarak yazımın devamından izleyebilirsiniz.

↓ Örnek Html Dersi Aşağıda Otomatik Olarak Başlayacaktır ↓

Not : Cd içerisindeki html dosyaları Firefox programında görüntülenemiyor. İnternet Explorer ile sorunsuz olarak izleyebilirsiniz.



[+] HTML DERSLERİ

- Ders 1 : İlk Web Sayfam

- Ders 2 : Metin Biçimlendirme

- Ders 3 : Fontlar

- Ders 4 : Sıralı Listeler

- Ders 5 : Sırasız Listeler

- Ders 6 : Resimler

- Ders 7 : Bağlantılar (Linkler)

- Ders 8 : Tablolar

Link Ekim 2011 ‘ de Güncellendi (Rapidshare)

Türkçe Html Eğitim Cd’ si Download Etmek Buraya İçin Tıklayın

]]> http://www.nuriavci.com/site-haberleri/html-egitim-cd-si.html/feed 8 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 Meb.k12.tr okul sitesi yapmak isteyenler için hazır şablon http://www.nuriavci.com/site-haberleri/meb-k12-tr-okul-web-sitesi-yapmak-isteyenler-icin-hazir-site-sablonu.html http://www.nuriavci.com/site-haberleri/meb-k12-tr-okul-web-sitesi-yapmak-isteyenler-icin-hazir-site-sablonu.html#comments Sun, 18 Oct 2009 22:39:23 +0000 Nuri AVCI http://www.nuriavci.com/?p=395

Milli Eğitim Bakanlığının Meb.k12.tr alt yapısı için hazırlanan, grafiklerini ve tasarımını kendi hazırladığım okul sitesinin kaynak dosyalarını indirebileceğiniz link ile sitenin önizlemesi ve özelliklerini görmek için yazının devamını okuyabilirsiniz.


Özellikleri

  1. Fireworks ile hazırlanan grafiklerin *.png uzantılı dosyaları mevcut. Böylece örneğin bannerdeki okul resimleri yerine kendi okulunuzun resimlerini ekleyerek banneri aynen kullanabilirsiniz.
  2. Dreamweaver ile hazırladığım *.dwt uzantılı template dosyası da mevcut. Bu dosya sayesinde de sayfaların birisinde yaptığınız değişiklik, bütün siteye yansıyacak ve sizi büyük bir zahmetten kurtaracaktır.
  3. Site firefox ve internet explorer de test edilmiştir.
  4. stil.css dosyasını kullanarak sitenin renk ve font ayarlarını kolay şekilde değiştirebilirsiniz.
  5. Dosya boyutu 5.12 mb

Site Önİzleme :

http://www.nuriavci.com/demo/okul1/

Download :

Şablonu indirmek için buraya tıklayın.

Güncelleme :

İlk 2 gün itibari ile 200 kadar mail geldi, herkese sitenin kaynak dosyalarını gönderdim. Şimdide sitenin güncellenmesi konusunda problem yaşayan arkadaşlar mail gönderiyorlar. Bende güncelleme konusunda karşınıza çıkabilecek problemleri buraya maddeler halinde yazmaya çalışacağım. Güncelleme konusunda sorun yaşarsanız lütfen mail gönderin, çözümünü buraya ekleyelim. Şimdi güncellemeye geçebiliriz :)

  1. Dreamweaver programında site menüsü altından bir site tanımlaması yapıyoruz. Burada sitenizin dosyalarının bilgisayarınızda hangi klasör altında tutulduğunu tanımlayacağız. Aynı klasörün içerisine gönderdiğim site dosyalarını kopyalamayıda unutmuyoruz tabi :)
  2. Templates klasörü altındaki template.dwt dosyasını dreamweaver ile açıyoruz. Dikkat ederseniz template dosyası içerisinde 5 adet region tanımlanmış. Bunlardan 4 tanesi (if banner, if menu, if sol, if alt) optional region. Yani bu alanlarda yapacağınız değişiklik sitenin diğer alt sayfalarının hepsine yansıyacaktır. Orta isimli son region ise editable region yani bütün sayfalarda düzenleyebileceğimiz, her sayfada farklı olacak olan orta kısmımız. Genelde yaşanan en büyük sorun optional regionlardan birinde yapılan değişikliğin kayıt edildikten sonra diğer sayfalarada yansımaması ile ilgili olmuş. Burada yapmamız gereken şey file menüsünden save yada save as yapmak yerine template dosyasının optianal region bölümlerinde gerekli değişiklikleri yaptıktan sonra modify>templates>update pages menüsünü kullanmak olacaktır. Karşımıza çıkan update pages ekranından start düğmesine tıkladığımızda değişikliğin bütün sayfalara yansıdığını göreceksiniz.
  3. Bütün sayfalarda farklı olacak olan düzenlenebilir orta bölümünü değiştirmek için ise ilgili sayfayı dreamweaverde açıyoruz. Sayfa içerisinde sadece orta bölümünde değişiklik yapabildiğinizi göreceksiniz. Diğer kısımlarda değişiklik yapmanıza dreamweaver izin vermez. Değişikliği yapıp save dediğinizde değişiklikler kaydedilmiş olacaktır.

Şimdilik bu kadar…

Şablonu Kullanan Okullardan Bazıları

Sivas / Merkez Kılavuz İmkb İlköğretim Okulu

Iğdır / Tuzluca – Üçkaya İlköğretim Okulu

İzmir / Karşıya Atatürk İlköğretim Okulu

Erzurum / Yakutiye Abdurrahman Serif Beygu İlköğretim Okulu

Muş / Bulanık Gazi İlköğretim Okulu

İstanbul / Kağıthane – Fındıklı İlköğretim Okulu

Osmaniye / Merkez Vali Ümit Karahan İlköğretim Okulu

İstanbul / Kadıköy Hamit İbrahimiye Otistik Çocuklar Eğitim Merkezi Ve İş Eğitim Merkezi

Yozgat / Kadışehri Ahmet Yesevi ilköğretim Okulu

Not :

Şablonu kullanan arkadaş olursa okulun web adresini burada paylaşırsa sevinirim. Şablonun işe yarayıp yaramadığını görmek isterim : )

]]> http://www.nuriavci.com/site-haberleri/meb-k12-tr-okul-web-sitesi-yapmak-isteyenler-icin-hazir-site-sablonu.html/feed 180 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 Html etiketleri ile mail linklerine başlık ekleme (mailto) http://www.nuriavci.com/site-haberleri/html-etiketleri-ile-mail-linklerine-baslik-ekleme-mailto.html http://www.nuriavci.com/site-haberleri/html-etiketleri-ile-mail-linklerine-baslik-ekleme-mailto.html#comments Wed, 13 May 2009 10:01:45 +0000 Nuri AVCI http://www.nuriavci.com/?p=345

Html etiketlerini kullanarak bir mail adresine bağlantı oluşturmak için aşağıdaki etiketleri kullanıyorduk :

<a href:mailto:nuriavci@gmail.com>mail gönder</a>

Bu durumda sayfada mail gönder diye bir yazı görünecek ve bu yazıya tıklandığında bilgisayarınızda kurulu bulunan mail yönetim programı (genellikle outlook) otomatik olarak çalışacaktır. Gönderilecek iletinin kime kısmına nuriavci@gmail.com adresi eklenecektir. Bunun dışında iletimizin başlık kısmınıda bir yazı otomatik olarak eklensin istiyorsanız yazının devamındaki kodu eklemeniz yeterlidir.

<a href:mailto:”nuriavci@gmail.com?subject=teşekkürler”>mail gönder</a>

yukarıdaki html kodunun sayfamızdaki görünümü ise aşağıdaki gibi olacaktır.

mail gönder


]]> http://www.nuriavci.com/site-haberleri/html-etiketleri-ile-mail-linklerine-baslik-ekleme-mailto.html/feed 6 Okulumuzun Yeni Web Sitesi Yayında http://www.nuriavci.com/site-haberleri/okulumuzun-yeni-web-sitesi-yayinda.html http://www.nuriavci.com/site-haberleri/okulumuzun-yeni-web-sitesi-yayinda.html#comments Mon, 04 May 2009 20:03:15 +0000 Nuri AVCI http://www.nuriavci.com/?p=334

Edirne Meriç Çok Programlı Lisesi yeni web sitesi bugün itibari ile yayına girdi.

http://mericcpl.meb.k12.tr/


]]> http://www.nuriavci.com/site-haberleri/okulumuzun-yeni-web-sitesi-yayinda.html/feed 0 Dikey ve Yatay Css Menü Örnekleri http://www.nuriavci.com/site-haberleri/dikey-ve-yatay-css-menu-ornekleri.html http://www.nuriavci.com/site-haberleri/dikey-ve-yatay-css-menu-ornekleri.html#comments Sat, 11 Apr 2009 16:54:10 +0000 Nuri AVCI http://www.nuriavci.com/?p=273

Css ile web sitenize ekleyebileceğiniz çok güzel menü örnekleri var. Bu menü örneklerini sizler için bir araya getirdim. Yazımın devamındaki resimlerde önizlemesini görebileceğiniz menüleri indirmek yada web sitesini ziyaret etmek için menü başlıklarına tıklayabilirsiniz.

Css Dock Menü

Glossy Horizantal Menü

İnverted Modern Bricks Menü

DD Color Tabs 2 Menü

Sleek Pointer Menü


DD Color Tabs Menü

Css Tabs Menü

Bevel Horizantal Menü

Underline Horizantal Menü

]]> http://www.nuriavci.com/site-haberleri/dikey-ve-yatay-css-menu-ornekleri.html/feed 5 Html’ de Metin Biçimlendirme Etiketleri http://www.nuriavci.com/html/html-de-metin-bicimlendirme-etiketleri.html http://www.nuriavci.com/html/html-de-metin-bicimlendirme-etiketleri.html#comments Wed, 18 Mar 2009 22:06:22 +0000 Nuri AVCI http://www.nuriavci.com/?p=204

Bir önceki derste temel html etiketlerini anlatmıştık. Son derste anlatılan html, head, title, body etiketlerini bütün sayfalarımızda kullanacağız. Sayfalarımızda ekrana gelmesini istediğimiz bilgileri ise ..etiketleri arasına yazdığımızı bir kez daha hatırlatalım.Web sayfamızda <body> </body> etiketleri arasına sadece yazı eklersek bu yazılar sayfaya sığacak şekilde soldan başlayarak word metni gibi ekrana yansıtılacaktır. Fakat siz yazıları ortalamak, yazıları renklendirmek, büyütüp küçültmek, kalınlaştırıp, italik ve alt çizgili olarak yazmak isterseniz metin biçimlendirme etiketlerini kullanmanız gerekmektedir. Çünkü bizim Firefox, İnternet Explorer, Mozilla gibi tarayıcılarımız sadece html kodlarını yorumlar. Örneğin siz not defterini açarak yazdığınız herhangi bir satır yazıdan sonra bir alt satıra inerek yeni bir yazı ekleseniz, tarayıcımız bunu aynı satırda gösterecektir. Çünkü tarayıcılar alt satıra geçmek için de bir kod ister, o kodu görmediği sürece siz ne yaparsanız yapın alt satıra geçiremezsiniz.

Şimde metin biçimlendirme etiketlerinin nasıl kullanıldığını, ne işe yaradıklarını gösterelim.


<i> ……</i> Bu etiketler arasına yazılan yazılar italik (eğik) olarak gösterilir.
<b>……</b> Bu etiketler arasına yazılan yazılar kalın (bold) olarak gösterilir.
<u>……</u> Bu etiketler arasına yazılan yazılar alt çizgili (underline) olarak gösterilir.
<h1>….</h1> h1 den başlayarak h6 ya kadar giden etiketler başlık etiketleridir. <h1> arasına yazılan yazılar en büyük başlık şeklinde gösterilir, <h6> arasındakiler ise en küçük başlıklardır. Google başlık etiketleri arasına yazılan yazıları diğerlerine göre daha önemli saymaktadır.
<p>…….</p> Bu etikeler arasına yazılan yazılar paragraf yapılarak gösterilir.
<br>Bir alt satıra geçmek için kullanılır. Kapanış etiketi yoktur.
<center>…..</center> Bu etiketler arasına yazılan yazılar sayfada ortalanmış olarak gösterilir.

Örnek :( Not defterine yazılarak html uzantısı ile kaydedilecek bölüm)

<html>
<head>
<title>Metin Biçimlendirme Etiketleri Uygulaması</title>
</head>
<body>
Merhaba ziyaretçi, <br> Html konusunu öğrenmek istiyorsan, <b>www.nuriavci.com</b> sitesindeki <i>html derslerini</i> takip edebilirsiniz.<br><br>Web sayfama tekrar bekliyorum. <br>
<center><u>Nuri AVCI</u></center>
</body>
</html>

Kodun Önizlemesi : (Tarayıcı tarafından görüntülenecek bölüm)

Metin Biçimlendirme Etiketleri Uygulaması

Merhaba ziyaretçi,
Html konusunu öğrenmek istiyorsan, www.nuriavci.com sitesindeki html derslerini takip edebilirsiniz.

Web sayfama tekrar bekliyorum.

Nuri AVCI

]]> http://www.nuriavci.com/html/html-de-metin-bicimlendirme-etiketleri.html/feed 0 Html’ e Giriş ve Temel Html Komutları http://www.nuriavci.com/html/html-e-giris-ve-temel-html-komutlari.html http://www.nuriavci.com/html/html-e-giris-ve-temel-html-komutlari.html#comments Mon, 16 Mar 2009 20:40:41 +0000 Nuri AVCI http://www.nuriavci.com/?p=186

Html kodlarını öğrenirken hangi sırayı takip etmeliyim? Bir web sayfasında mutlaka bulunması gereken html kodları nelerdir?

Bir html sayfası oluşturmak için öncelikle hangi editörü kullanacağımıza karar vermeliyiz. Yani web sayfamızı hangi program ile hazırlayacağımızı belirlemiş olmamız gerekiyor. Kullanabilecek olduğumuz web tasarım editörleri arasında şunları sayabiliriz : notepad, dreamweaver, frontpage hatta ms word.

Windows kurulu olan her programda bulunduğu için ben notepad programı kullanmanızı tavsiye ediyorum. Tabi ki notepad ile web sayfası hazırlamak çok zordur ama burada kod yazmayı nerdeyse kusursuz bir şekilde öğrenebilirsiniz. html editörümüzü yani not defterini açmak için masa üstünde sağ tıklayınız, yeni menüsünden , yeni metin belgesine geliniz. Masa üstünde Yeni Metin Belgesi.txt isminde bir dosya gelmiş olması gerekiyor. Bu dosyayı açarak ve temel html etiketlerini öğrenerek web tasarımına başlayabiliriz.

Html de kullanılan komutların her birisine aynı zamanda etiket denir. Bütün web sayfalarında kullanılan temel etiketlerimiz ise <html>, <head>, <body>, <title> etiketleridir. Şimdi bu etiketlerin ne işe yaradığına bakalım.


<html> etiketi tarayıcıya web sayfasının başladığını söyler. <html> etiketleri mutlaka kapatma etiketiyle birlikte kullanılmalıdır. <html> etiketi kapatmak için html yazının önüne / işareti ekleriz (</html>) Html sitelerinde her etiketin mutlaka kapatma etiketi vardır diye bir genelleme yapamayız. Ama kapatma etiketi olan html etiketlerini de açık bırakmıyoruz. <html> açılış ve kapanış etiketleri sayfanın başında ve sonunda bulunur.
örnek :

<html>

(diğer bütün etiketler html etiketleri arasında yer alır)

</html>

<head> etiketleri başlık, <body> etiketleri ise gövde etiketleridir. <head>…</head> etiketleri arasına sayfa hakkında açıklama bilgileri ve google’ a sayfayı tanıtan yardımcı etiketler yazılır. <body>…</body> arasına ise sayfamızda görünmesini istediğimiz etiketler yer alır. <title >…</title> etiketleri <head> etiketleri arasında yer alır ve arasına yazılan yazılar sayfanın başlık bölümünde yer alır.
örnek:

<html>
<head>
<title>Başlık buraya gelecek…</title>
</head>
<body>
nuriavci.com a hoş geldiniz..
</body>
</html>

Not defterine yukarıdaki kodları yazdıktan sonra dosya menüsünden farklı kaydet diyerek index.html olarak kaydediniz. Kaydettiğiniz dosyayı çift tıklayarak açtığınızda ilk web sayfamız karşımızda olacak. Web sayfasına girildiğinde açılacak olan ilk sayfa her zaman index ismiyle kaydedilmelidir. Bir diğer ayrıntı ise web sayfanızı html olarak kaydedebileceğiniz gibi htm olarak da kaydedebilirsiniz. (index.htm)

]]> http://www.nuriavci.com/html/html-e-giris-ve-temel-html-komutlari.html/feed 0