CSS Şablonlar (Template) Temmuz 6, 2008
Posted by Mustafa Dalcı in CSS.Tags: CSS, template, şablon
add a comment
Seminerin son bölümünde Dreamweaver ile Template düzenlemeyi öğreniyoruz. Aşağıdaki css şablonları kullanarak web sitemizin ana hatlarını css ile belirlemişi oluruz.
Google’a site eklemek ve site haritaları Temmuz 4, 2008
Posted by Mustafa Dalcı in Web.Tags: google, google web yöneticisi, site haritası
2 comments
Dreamweaver seminerine katılanların sayfa bittikten sonra sordukları sorular ve cevapları aşağıda:
Sayfamızı Google’a nasıl kayıt ettirebiliriz?
Bunu Google’ın “Site ekle” bölümünden yapabilmektesiniz.
Sayfamı Google’a ekledim ama hala aramalarda çıkmıyorum.
Bu konuda sabırlı olmakla birlikte Google Web Yöneticisi sayfasına girip Site Durum Araçlarından sitenizin indekslenip indekslenmediğini kontrol edebilir ve Site yöneticisi araçları ile Google’a yardımcı olabilirsiniz. Yardımcı olmak için öncelikle bir site haritası oluşturabilirsiniz.
Site haritası nasıl oluşturulur? Bunun kolay bir yolu var mıdır?
Site haritaları sitemizin sayfalarını arama motorlarına bildirmek amacıyla XML formatında oluşturulan sayfalardır. Site haritasını site haritası formatına göre kendiniz elle de oluşturabilceğiniz gibi hiç zahmete girmeden online araçlar kullanarak da yapabilirsiniz. XML-Sitemap Generator online araçlara verebileceğim ilk örnek. Bu sayfaya web sitenizin adresini yapıp bir site haritası oluşturabilirsiniz. Sonrasında aldığınız sitemap.xml dosyasını sunucunuza yükleyip Google Web Yöneticisi sayfasından site haritasının konumunu Google’a bildiriyorsunuz.
Dreamweaver Dersleri Nisan 27, 2008
Posted by Mustafa Dalcı in Dreamweaver.Tags: dreamweaver dersleri
add a comment
Kişisel sayfamda seminerler bölümünü düzenlerken uzunca bir süredir buraya birşeyler yazmadığımı hatta yazdığım yazılardaki linklerin ve görsellerinde kaybolduğunu farkettim. Bu yüzden bu blogu düzenleyip seminerlere katılanların daha fazla kullanabileceğini bir yer haline getimeyi planlamaktayım. Ayağım alışsın yazısı da buradaki Dreamweaver Dersleri. Linkteki dersler içerik olarak oldukça yeterli. Tavsiye ederim.
Biçimlendirme Sınıfları ve Kimlikler Aralık 12, 2006
Posted by Mustafa Dalcı in CSS.add a comment
Sınıflar
İstediğimiz etiketleri kendimize ait oluşturduğumuz stillerle biçimlendirmek için sınıflar oluştururuz.Sınıflara istediğimiz ismi verebiliriz.CSS belgesinde sınıfı tanımlamak için sınıf isminin önüne nokta koyarız.Örnek olarak aşağıda oluşturacağımız
(dahası…)
CSS Aralık 12, 2006
Posted by Mustafa Dalcı in CSS.add a comment
Basamaklı stil sayfaları (cascading style sheets, CSS) stil tabanlı biçimlendirmeleri belirlerken kullanılan koddur. Web sayfası yada sayfa kümelerinin biçimlerini standartlaştırmanıza yardımcı olur.Stil sayfasına etiketler için belirlediğiniz stilleri yazarak HTML sayfasındaki etiketleri biçimlendirebilirsiniz.
(dahası…)
Resim Haritası Oluşturmak Aralık 12, 2006
Posted by Mustafa Dalcı in XHTML.add a comment
RESİM HARİTASI
Resimlerin faklı bölgelerinden farklı yerlere linkler vermek için resim haritası kullanırız.Örneğin bu sayede Türkiye haritasındaki tüm illere ayrı link verip kullanıcıları o ille ilgili sayfaya yönlendirebilirsiniz.
Resim haritası bir resim üzerinde ki belirli tanımlanmış etkin noktaları (hotspots) link olarak belirler. Etkin noktalar dikdörtgen veya yuvarlak olabileceği gibi düzensiz şekillerde olabilir.
Dreamweaver MX 2004 türkçe karakter sorunu Aralık 11, 2006
Posted by Mustafa Dalcı in Dreamweaver.add a comment
Bu sorunu aşmak için İlk olarak edit menüsünden preferences’i tıklayın. Ekran karşınıza gelince sağ taraftaki Default Encoding’ten Other Front Settings’den de Other’ı seçin. Proportional Font’um Times New Roman (Turkish), Fixed Font ve Html Inspector’u Courier New(turkish) yapın. Ok butonuna tıkladıktan sonra Dreamweaver’i kapatıp tekrar açın. Bu yaptıklarınızla artık yaptığınız sayfalarda Türkçe karakterlerde kullanabilirsiniz.
Meta Etiketleri Aralık 11, 2006
Posted by Mustafa Dalcı in XHTML.add a comment
Oluşturulan belgenin head kısmına sayfanın açıklamasını yapabileceğiniz, sayfa hakkında anahtar kelimeler yazabileceğiniz meta etiketleri koyabilirsiniz.Yazdığımız anahtar kelimeler arama motorları içindir.Yalnız şuan en fazla kullanılan arama motoru Google meta etiketlerini değilde belgenin <body>..</body> kısmındaki içeriği dikkate alır.Aşağıdaki meta etiketlerinin content bölümünde açıklama yapılmış ve bu sayfa için parantez içinde uygun örnekler verilmiştır.
<meta name="author" content="Sayfayı düzenleyenin ismi(ODTÜ-EG)" />
<meta name="Description" content="Sayfanın açıklması(HTML öğrenmek isteyenler için dersler.) " />
<meta name="keywords"content="Arama motorlarına yardımcı olmak için sayfa hakkında anahtar kelimeler(HTML,ders,web sayfası,web sitesi,bilgi işlem gibi..)" />
Eğer içeriği türkçe olan bir sayfa hazırlıyorsak sayfada herhangi bir türkçe karakter sorunu yaşamamak için head kısmı içine aşağıdaki meta etiketleri eklenir.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta http-equiv="Content-Language" content="tr">
Sayfanıza meta etiketi eklemek için aşağıdaki linki kullanabilirsiniz.
http://www.addme.com/meta.htm
Kaynak:http://www.bidb.odtu.edu.tr/index.php?go=ig&sub=html2
WYSIWYG Aralık 11, 2006
Posted by Mustafa Dalcı in Dreamweaver, Web.add a comment
Web sayfası yaratmak için kullanılan araçların iki genel tipi vardır.
Editör: Her HTML etiketi için düz metin dosyasını sizin yarattığınız ve kodu el yoluyla girdiğiniz türden Not Defteri gibi programlar.
Dönüştürücü: Biçimlendirilmiş belgeleri sizin yarattığınız ve bir yerleşik dönüştürücünün sizin için HTML etiketleri yarattığı Dreamweaver,Frontpage ve Homesite gibi programlar.
Türkçe çevirisi tam olarak doğru olmasada “Ne görüyorsanız onu alırsınız” olan WYSIWYG (chumbawamba’nın bir albümünün ismi ve bir britney spears şarkısı olmasının yanında) Dönüştürücü programların bir özelliğidir.
Bir WYSIWYG aracını diğer uygulamalardan ayıran en önemli özellik, yeni yaratılan veya değiştirilen bir bilgisayar nesnesinin sonlandırılmış halinin (önizlemesinin) gerçek veya gerçeğe yakın zamanlı olarak gösterebilmesidir. Yazı editörleri arasında, bu farklılık sayesine WYSIWYG editörleri daha çok tercih edilmektedir.
Dreamweaver Menüleri Aralık 11, 2006
Posted by Mustafa Dalcı in Dreamweaver.1 comment so far
Menu Bar (Menüler);
Her programda olduğu gibi Dreamweaver’da da ust barda menüler vardır. Programda yapılabilecek herşey bu menulerde mevcuttur.
File Menüsü;
Dosya işlemlerinin yapıldığı menüdür. Yeni bir sayfa oluşturmak,kaydetmek,varolan dosyayı açmak gibi işlemler yapılır.
Edit Menüsü;
Döküman ile ilgili menüdür. Kopyala,yapıştır,tümünü seç,bul ve değiştir gibi işlemlerin yanısıra Dreamweaver’in genel özelliklerini değiştirmek için kullanabiliriz.
View Menüsü;
Çalışma sayfasının görünümünü düzenler. Sanal ızgara, cetvel, kenarlıklar gibi yardımcı öğelerin kullanılabilmesini sağlar.
Insert Menüsü;
Sayfaya nesne eklemek için kullanılır. Objects penceresinin menü şekline getirilmiş halidir.
Modify Menüsü;
Sayfalarda varolan elemanlar üzerinde değişiklik yapmak için kullanılır. Bu değişiklikler;kütüphane, çerçeve ayarları, katmanlar, sayfa özellikleri v.b.
Text Menüsü;
Sayfadaki karaktersel ifadelerin düzenlenmesini sağlayan menüdür. Bu düzenlemelerden bazıları;imla denetleyicisi (ingilizce), yazıya ait font, renk, stiller v.b. dir.
Commands Menüsü;
Sürekli tekrarlanan işlemlerin daha hızlı yapılmasını sağlamak için kullnılır. Bu menü ile bir emir listesi oluşturabilir, düzenleyebiliriz.
Site Menüsü;
Dreamweaver ile yapılan sayfalar birbirinden bağımsızdır. Bunları bir sihirbaz ile düzenleyip site haline getirebiliriz. Böylece sayfalar arası bağlantılar kontrol altına alınabilir.
Window Menüsü;
Programda varolan paletleri açıp gizlemek için kullanılır.
Help Menüsü;
Programa ait yardım menüsüdür. Ayrıca Dreamweaver ile ilgili internet bağlantıları yer almaktadır.
Kaynak:http://www.ceviz.net/index.php?case=article&id=62
DOCTYPE Aralık 11, 2006
Posted by Mustafa Dalcı in XHTML.add a comment
DOCTYPE zorunlu olarak mevcut olmalıdır. Geçerli 3 adet XHTML döküman tipi vardır:
a- XHTML Strict
XHTML Dökümanlarını css dökümanları ile beraber kullanmanız gerektiğinde kullanılır. HTML’nin dizayn unsurlarını içermez.
Tanımı:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
b- XHTML 1.0 Transitional
CSS anlamayan web gezginlerini desteklemek ve HTML’nin dizayn unsurlarını kullanmak istiyorsanız bu döküman tipini kulanın.
Tanımı:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
c- XHTML 1.0 Frameset
Eğer XHTML dökümanları pencerelere bölünmüş olarak gösterilecekse bu döküman tipini kullanın.
Tanımı:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Web 2.0 Aralık 11, 2006
Posted by Mustafa Dalcı in Web.add a comment
O’Reilly ve MediaLive International adlı iki firmanın düzenlediği ve web dünyasının önem arz eden gurularının katıldığı 2004 yılındaki konferansın ana konusu aslında webin geleceğini tartışmaktı. Ancak konferans katılımcılarının ortak görüşleri, web ortamında gelişmekte olan yeni değerlere bir isim koyma gerekliliğini doğurdu ve Web 2.0 kavramı bu şekilde ortaya atılmış oldu.
Kimi tanımlamalara göre “yeni bir teknoloji”, kimi tanımlamalara göre ise “yeni bir çağ” olarak kabul edilen yeni versiyon webin bizlere sunduğu en büyük getiri, içeriğin mikro boyutlara indirgenmesidir. Genel olarak Web 2.0 kategorisindeki siteleri göze çarpan en önemli özelliği farklı kaynaklardan çok sayıda yararlı ve kullanılabilir bilgi toplayarak tek bir site altında birleştirmeleridir. Geçmiş yıllarda içeriğibulmak için referans sitelere gidilir ihtiyaç duyulan bilgiler yerinden sağlanır ve az sayıdaki içerik sağlayıcılar çok sayıdakı istemciye cevap verirdi. Ancak zaman geçtikçe istemcilerde kendi içeriklerini yazmaya ve bunları insanlarla paylaşmaya başladılar. Bir ya da iki saat içerisinde öğrenilen html bilgisiyle yapılmaya çalışılan sitelerin yerine, kullanıcı için hiçbir tasarım bilgisi gerektirmeyen, kullanıcının tüm isteklerini düşünmüş uygulamaların ortaya çıkması, istemciler tarafından sağlanan içerik döneminin gelişmesine önemli derecede katkıda bulunmuştur. Bu uygulamalar neticesinde insanlar; web tasarımı ve teknikleri ile uğraşmak zorunda kalmadan sahip olduğu fotoğrafları, anlatmak istedikleri teknik ya da sosyal içerikleri, ziyaret ettikleri siteleri.. vs. milyonlarla çok rahat bir şekilde paylaşır hale gelmişlerdir. Yayınlamanın yanında bu içeriklere ihtiyacı olanların,bu içerikleri arayanların istediklerini bulma konusunda işlerini kolaylaştıran arama motorları, portallar, geliştirilen APIler (Application Programming Interface) kullanıcı hakimiyetindeki yeni nesil web zincirine eklenen tamamlayıcı halkalardan sadece biri olmuştur.
Kaynak:http://tr.wikipedia.org/wiki/Web_2.0.
İşte bence Web 2.0 bu. Yani statik, bireysel ve kontrolcü bir donemden, dinamik, katılımcı ve özgür bir doneme.
Web 2.0, kullanıcı deneyimi ile ilgili. Bilginin nasıl, ne şekilde kullanıldığı, paylaşımın ve katılımcılığın ne şekilde dünyamızı şekillendirdiği ile ilgili.
Kaynak:http://www.unbf.ca/altiustu/arsiv/2005/10/web_20.php
XHTML ve HTML Aralık 11, 2006
Posted by Mustafa Dalcı in XHTML.Tags: html, w3, XHTML
2 comments
XHTML’in ismi Extensible Hypertext Markup Language kelimelerinden türemiştir. XHTML 26 Haziran 2000′den beri bir web standartıdır. Kodlama olarak oldukça büyük farklar yaratan bu dil için:’XML sözdiziminin HTML içinde kullanılması.’ denebilir.Html dilinin farklı tarayıcılarda farklı yorumlanması ve sözdiziminde fazla düzensizlik ve hata olduğu için XHTML W3C(World Wide Web Consortium – WWW) tarafından HTML dilini standardize etmek amacıyla önerilmiştir.
XHTML’i aslında şu başlıklar altında toplamak daha doğru olur.
* XHTML aslında HTML içinde kullanılabilen bir XML uygulamasıdır.
* XHTML’in çıkış amacı HTML’in “kirli” yapısını yenilemektir.
* XHTML 1.0 aslında HTML 4.0.1 ile hemen hemen aynıdır. (Bütün elemanları barındırır.)
* XHTML’in kuralları sabittir, XHTML daha temiz ve düzenlidir.
* XHTML standartlara sâdık kodlama, CSS temelli tasarım ve XML’e geçişte bir basamaktır.
* XHTML’i çoğu tarayıcılar tanır.
Aşağıdaki maddelerde HTML ve XHTML arasındaki farklar verilmiştir.
1. Dökümanlar XML uyumlu olmalıdır.
Aşağıdaki benzer hatalar HTML’de geçerlidir.
<b><i>Bu HTML'de geçerli olabilir ama</b></i>
Ama XHTML’de elemanlar düzgün biçimde iç içe geçmelidir.
<b><i>XHTML'de doğrusu budur.</i></b>
Tüm XHTML elemanları <html> kök elemanı içinde bulunmalıdır. Diğer tüm elemanlar alt elemanlara sahip olabilir. Alt elemanların başlangıç ve bitiş etiketleri olmalı ve doğru biçimde iç içe geçmelidir. Temel döküman yapısı şu şekilde olmalıdır.
<html>
<head>.......</head>
<body>.......</body>
</html>
2. Tüm elementler küçük harfler kullanılarak yazılmalıdır.
Bu yazım yanlıştır.
<BODY>
<P>Bu bir paragraftır</P>
</BODY>
Bu yazım ise doğrudur.
<body>
<p>Bu bir paragraftır</p>
</body>
3. Tüm XHTML elemanlarının sonlandırılması gerekir. Boş olmayan her elemanın sonlandırılması gerekir, örneğin aşağıdaki yazım yanlışdır:
<p>Bu bir paragraftır
<li>Bu bır liste maddesidir
Doğru olan:
<p>Bu bir paragraftır</p>
<li>Bu bir liste maddesidir</li>
4. <br>,<hr> ve <img> gibi tek taraflı etiketlerde sonlandırılmalıdır. Boş elemanlar ya bir sonlandırma elemanına yada “ />” işaretine ihtiyaç duyar. Örneğin aşağıdaki yazım yanlışdır.
Bu bir satır atlar<br>
Yatay çizgi <hr>
Resim <img src=”resim.gif”>
Doğruları ise:
Bu bir satır atlar</br>
Yatay çizgi <hr />
Resim <img src=”resim.gif” />
XHTML web sayfalarınızı bugünün web gezginleri ile uyumlu hale getirmek istiyorsanız “/” işaretinden önce bir boşluk bırakmalısınız. <br /> yada <hr /> gibi.
5. Değişken isimleri küçük harf olmalıdır. Aşağıdaki örnek yanlıştır:
<table WIDTH=”100%”>
<div ALIGN=”center”>
Doğrusu:
<table width=”100%”>
<div align=”center”>
6. Değişken değerleri tırnak işareti içinde olmalıdır.
<table width=100%>
<div align=center>
Doğrusu:
<table width=”100%”>
<div align=”center”>
7. Değişken sadeleştirme kaldırılmıştır. Örneğin:
<input checked>
<option selected>
yanlıştır. Doğrusu:
<input checked=”checked” />
<option selected=”selected” />
8. “id” parametresi “name” değişkeninin yerine geçer.
<img src=”resim.gif name=”resim1” />
<a name=”namedanchor”></a>
Yerine doğrusu:
<img src=”resim.gif id=”resim1” />
<a id=”namedanchor”></a>
9. XHMTL DTD zorunlu elemanları tanımlar. Tüm XHTML dökümanlarının DOCTYPE tanımlama zorunluluğu vardır. Html, head ve body bulunmalı ve title head içinde yer almalıdır. Aşağıda minimum bir XHTML dökümanını görüyorsunuz.
<!DOCTYPE Doctype burda >
<html>
<head>
<title>Başlık burda </title>
</head>
<body>
Body text goes here
</body>
</html>
DOCTYPE elemanı bir XHTML elemanı değildir ve standartlara uymasına gerek yoktur. Ayrıca sonlandırılması da gerekmez.
Yararlı linkler:
W3C XHTML Anasayfa- http://www.w3c.org/MarkUp/
W3C standart bildirgesi – http://www.w3.org/TR/2000/REC-xhtml-basic-20001219/
W3Schools XHTML sayfaları – http://www.w3schools.com/xhtml
Web tasarımcılarının sanal kütüphanesi (WDVL ) XHTML sayfaları – http://www.wdvl.com/Authoring/Languages/XML/XHTML/
