Yazılım ve Tasarım üzerine herşey..

Metin Biçimleme

Posted by: yazilimtasarim on: Eylül 26, 2009

Arkadaşlar sizlere bu dersimizde metin biçimlemeyi anlatacağım… Yani bir metnin yazı tipi, rengi, şekli her şeyiyle ilgili anlatımları şimdi anlatıyorum:

İlk Önce Metnimizi Kalınlaştıralım.

Bunu <b> Kodunu kullanarak yapıyoruz:

Örneğin:

<html>
<head>
<body>
<b>Bu Yazı Kalın Yazıdır</b>
</body>
</head>
</html>

Şimdi ise yazımızı altı çizili yapalım…

Örneğin:

<html>
<head>
<body>
<u>Bu Yazı Altı çizili Yazıdır</u>
</body>
</head>
</html>

Evet, şimdi ise yazımızı italik yapalım..

Örneğin:

<html>
<head>
<body>
<i>Bu Yazı İtalik Yazıdır</i>
</body>
</head>
</html>

Şimdi İse yazımzın tipini rengini ve boyutlarını değiştirelim.

<html>
<head>
<body>
<font face="Verdana" size="2" color="red">Bu Yazının tipi Verdanadır,2 punto büyüklüğündedir ve Kırmızı Renktedir</font>
</head>
</body>
</html>

Burda yazımızın büyüklüğünü size=”2″ paranemetresiyle 2 yaptık
Rengini color=”red” paranametresiyle kırmızı yaptık
Tipini face=”Verdana” paranametresiyle Verdana yazı tipi yaptık

Size= Büyüklük
color= Renk
Face= Yazı Tipi
Etiketler: , , , , , ,

Html’de tablo yapımı

Posted by: yazilimtasarim on: Eylül 26, 2009

Ewet bu dersimizde html tablo nasıl yapılır onu anlatıcam.

Tablolar <table>…..</table> Kodları arasına yazılır
<tr> kodu yeni bir satır oluşturur. bu sırada <td> kodu ile hücrelere bölünür

Şimdi basit bir tablo yapalım:

Not: “<tr> kodumuzu yazarken 1tab boşluğu <td> kodumuzu yazarken ise 2tab boşluğu bırakınız.”

kod:
<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1">
	<tr>
		<td>Elma</td>
		<td>Muz</td>
	</tr>
	<tr>
		<td>Mavi</td>
		<td>Yeşil</td>
	<tr>
</table>

</body>
</html>

Burada basit bir tablo yaptık örnek site için:
Tıkla

Şimdi ise tek satırlı ve 4 hücreli bir tablo yapalım ama bu sefer yazının fonları tablonun boyunu ve tablonun backgroundları ile oynayalım.

Tablonun hangi hücrenin boyutu ile oynucaksak, onun içine yazıcaz kodumuzu, yani:

<td width="250px">Sarı<td>

Bu şekilde olucak. Fon ile oynamak için yine hücreye gidiyoruz;

<td><font color="red" font size"20px" font size="35px">kırmızı</font></td>

Buradaki hücremizin kırmızı yazısının boyutunu 35 px yaptık ve boyutunu ise 20 px yaptık, şimdi 3. hücremize background ekleyelim. Bunun için ise hücremizin içine gidiyoruz ve

background="resimadi.jpg"

kodumuzu ekliyoruz, yani:

<td background="1.jpg">Siyah</td>

Bu şekilde diğer 4.hücreyi kırmızı yapalım; bunun içinse bgcolor=”red” kodumuzu kullanıcaz. <td bgcolor=”red”>Yeşil</td>
Bu şekilde tablamuzu görelim.

kod:

<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1">
	<tr>
		<td width="250px">Sarı</td>
		<td><font color="red" font size"20px" font size="35px">kırmızı</font></td>
		<td background="1.jpg">Siyah</td>
		<td bgcolor="red">Yeşil</td>
	</tr>
</table>
</body>
</html>

Örnek site:Tıkla

Peki, şimdi ise yine tek satırlı, 3 hücreli bir tablo yapalım. Bu sefer tabloların ikisinde resim olsun, ortadakinde ise Sanalkurs yazsın. Resim px’leri ise 150×150 olsun. İki td arasına resmimizi cağırıyoruz:

<td><img src="1.jpg" width="150px" heigth="150px"></td>

İki hücreye de:

kod:

<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1" width="800" align="center">
	<tr>
		<td><img src="1.jpg" width="150px" heigth="150px"></td>
		<td>Sanalkurs</td>
		<td><img src="1.jpg" width="150px" heigth="150px"></td>
	</tr>
</table>
</body>
</html>

Örnek Site : Tıkla

Bazı şeyler dikkatinizi çekti mi? İki resim de sola yatık. İşte gelelim asıl konuya. Bunları ayarlamak için hücrenin boyutunu ayarlamamız gerekiyor. Çağırdığımız resimin boyutu kaç px’di? 150px idi değil mi? İşte tablomuzu da 150px yapıcaz. (width=”150px” Bir de Sanalkurs yazımızı ortalayalım, bunun için ise;

<td><p align="center">Sanalkurs</p></td>

kodunu kullanıcaz.

kod:

<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1" width="800" align="center">
	<tr>
		<td width="150px"><img src="1.jpg" width="150px" heigth="150px"></td>
		<td><p align="center">Sanalkurs</p></td>
		<td width="150px"><img src="1.jpg" width="150px" heigth="150px"></td>
	</tr>
</table>
</body>
</html>

örnek site :Tıkla
Şimdi ise 2 satırlı, ilk satır 2 hücreli, ikinci satır ise 3 hücreli bir tablo yapalım. Bunu colspan=”" kodu ile yaparız. Ben colspan’a bu tablo için 2 değerini vericem. Bu değer tablodan tabloya değişir.

kod:

<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1" width="400" align="center">
	<tr>
		<td colspan="2">Elma</td>
		<td>Muz</td>
	</tr>
	<tr>
		<td>Mavi</td>
		<td>Yeşil</td>
		<td>Siyah</td>
	<tr>
</table>

</body>
</html>
Örnek Site:Tıkla

Etiketler: , , , ,

Kayan Yazı, Resim Yapma ve Marquee Kullanımı

Posted by: yazilimtasarim on: Eylül 26, 2009

Birşeyi kaydırmak için gerekli kodumuz
<marquee></marquee>
Örneğin Sanalkurs yazısını kaydırmak için
<marquee>Sanalkurs</marquee> deriz.

kod:

<html>
<head>
<title>Kayan Yazı-Sanalkurs</title>
</head>
<body>
<marquee>Sanalkurs</marquee>
</body>
</html>

örnek site: sanalkurs.sitemynet.com/k.html

Ama yazımız sağdan sola doğru kayıyor bunu istersek sağa sola çarptırabiliriz
bunun için behavior=”alternate” kullanıcaz bu kodumuz sağa sola çarptırmak için gerekli olan kodumuzdur.

kod:

<html>
<head>
<title>Kayan Yazı-Sanalkurs</title>
</head>
<body>
<marquee behavior="alternate">Sanalkurs</marquee>
</body>
</html>

örnek site : Tıkla

Eğer kırmızı bir şerit üzerinde kaymasını istiyorsak marquee’nin rengini değiştirebiliriz
bunun için bgColor=”red” kodunu kullanabiliriz.
kod:

<html>
<head>
<title>Kayan Yazı-Sanalkurs</title>
</head>
<body>
<marquee behavior="alternate" bgColor="red">Sanalkurs</marquee>
</body>
</html>

örnek site: Tıkla

Yazımızı alttan üste doğru çıkartmak istiorsak direction=”up” kodunu kullanırız eğer üstten alta doğru
kaydırmak istiyorsak direction=”down” deriz ama bir çok sitede görmüşünüzdür duyurular bölümü diye
alttan üste doğru kayan yazılar bizde böyle birşey yapabiliriz. Ben bu durumda behavior=”alternate” kodunu
silicem silmesekde calışır ama ben çarptırmak istemediğim için siliyorum.Şimdi kodumuzu yazalım

kod:

<html>
<head>
<title>Kayan Yazı-Sanalkurs</title>
</head>
<body>
<marquee direction="up" bgColor="red">Sanalkurs</marquee>
</body>
</html>

örnek site: Tıkla

Şimdi burada dikkatimizi çeken bir olay var marquee alanı biraz geniş bunu küçültmemiz gerekmezmi
bunun için width=”100″ heigth=”800″ kodlarımızı kullanıyoruz burada width marquee’nin enini heigth ise
boyunun boyutunu belirler.
kod:

<html>
<head>
<title>Kayan Yazı-Sanalkurs</title>
</head>
<body>
<marquee direction="up" bgColor="red" width="100" heigth="800">Sanalkurs</marquee>
</body>
</html>

örnek site: Tıkla

Şimdi Gelelim resim kaydırmaya aslında bununda yazıdan hiçbir farkı yoktur.
Şimdi bir kırmızı şerit üzerinde bir resmimizi kaydıralım

kod:

<html>
<head>
<title>Kayan Yazı Sanalkurs</title>
</head>
<body>
<marquee width="950" height="100" bgcolor="red">
<img src="1.jpg" width="100px" heigth="800px">
</marquee>
</body>
</html>

örnek site : Tıkla

Şimdi 3 tane resmi yan yana kaydıralım 3 tane resmimizi çağırıyoruz
kod:

<html>
<head>
<title>Kayan Yazı Sanalkurs</title>
</head>
<body>
<marquee width="950" height="100" bgcolor="red">
<img src="1.jpg" width="100px" heigth="800px">
<img src="1.jpg" width="100px" heigth="800px">
<img src="1.jpg" width="100px" heigth="800px">
</marquee>
</body>
</html>

örnek site: Tıkla

Ben şimdi resimleri aşağıdan yukarı doğru kaydırmak istiyorum bunun içinde kayan yazıdaki gibi direction=”up”
kodumu kullanıcam ama birazda heigth ide genişletcem
kod:

<html>
<head>
<title>Kayan Yazı Sanalkurs</title>
</head>
<body>
<marquee direction="up" width="800" height="400" bgcolor="red">
<img src="1.jpg" width="100px" heigth="800px">
<img src="1.jpg" width="100px" heigth="800px">
<img src="1.jpg" width="100px" heigth="800px">
</marquee>
</body>
</html>

örnek site: Tıkla

Ama Yukardaki kodumuz da resimler yan yana peki bunu alt alta nasıl yapabiliriz
bunuda resimlerin arasına <br> kodumuzu koyarak yapabiliriz <br> kodumuz enter görevini üstlenir burada
ve birazda marqueenin width boyutu ile oynucam
kod:

<html>
<head>
<title>Kayan Yazı Sanalkurs</title>
</head>
<body>
<marquee direction="up" width="100" height="400" bgcolor="red">
<img src="1.jpg" width="100px" heigth="800px">
<img src="1.jpg" width="100px" heigth="800px">
<img src="1.jpg" width="100px" heigth="800px">
</marquee>
</body>
</html>

örnek site: Tıkla

eğer resimlerin arasına boşluk olmasını istiyorsanız &nbsp; kodu ile koyabilirsiniz
ne kadar çok &nbsp; koyarsanız o kadar boşluk olur.

Etiketler: , , ,

Zamanla Yenileme

Posted by: yazilimtasarim on: Eylül 26, 2009

Eğer durum çubuğunda sayfanızın ziyaretçiye bildirilen sürede bir refresh edilmesini istiyorsanız aşağıda kodları sayfanın <HEAD>………..</HEAD> tag’leri arasına yazmanız yeter.

<script>

<!--/*Auto Refresh Page with Time scriptBy Website Abstraction (wsabstract.com)Over 200+ free scripts here!*///enter refresh time in "minutes:seconds" Minutes should range from 0 to inifinity. Seconds should range from 0 to 59var limit="0:30"if (document.images){var parselimit=limit.split(":"parselimit=parselimit[0]*60+parselimit[1]*1}function beginrefresh(){if (!document.images)returnif (parselimit==1)window.lokasyon.reload()else{ parselimit-=1curmin=Math.floor(parselimit/60)cursec=parselimit%60if (curmin!=0)curtime=curmin+" dakika ve "+cursec+" saniye sonra refresh edilecektir !"elsecurtime=cursec+" saniye sonra refresh edilecektir."window.status=curtimesetTimeout("beginrefresh()",1000)}}window.onload=beginrefresh//-->

</script>
Etiketler: , , , , , ,

Favori Sitelere Eklemek

Posted by: yazilimtasarim on: Eylül 26, 2009

<a href="javascript:window.external.AddFavorite('http://www.sanalkurs.net','SANALKURS E?İTİM SİTESİ')"> Favorilerime Ekle </a>

Kodu herhangi bir editörle (Not Defteri, Wordpad, Dreamweaver) açıp yapıştırdığınızda kaydedip Internet Explorer ile açtığınızda Giriş Sayfası linkine tıklarsanız o an bulunduğunuz adresin Sık Kullanılanlar listenize girdiğini göreceksiniz

Etiketler: , , , , , , ,

Adresi Giriş Sayfası Yapmak

Posted by: yazilimtasarim on: Eylül 26, 2009

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sanalkurs.net');">Giriş Sayfası Yap </a>

Kodu herhangi bir editörle (Not Defteri, Wordpad, Dreamweaver) açıp yapıştırdığınızda kaydedip Internet Explorer ile açtığınızda Giriş Sayfası linkine tıklarsanız o an bulunduğunuz adresin browser’ınızın giriş sayfası olduğunu göreceksiniz

Etiketler: , , , , , , ,

HTML Genel Bilgiler

Posted by: yazilimtasarim on: Eylül 26, 2009

Bir Html Web Sayfası <html>tagı ile başlar ve </html> tagı ile bitmelidir yazacağınız tüm kodlamalar <html>…</html>tagları arasına yazılmalıdır

Bir HTML Sayfasında <html> den sonra genellikle <head> tagı kullanılır sayfada görsellenmesini istedigimiz yazı ekranda bu kod ile belirir ve ondan sonra <title> komutu kullanılır. Bu komut ise sayfamızın üst köşesinde ne yazmasını istiyorsak onu yazdırır. Mesela SANALKURS.NET sitesinde sayfanın en üstünde, “SANALKURS.NET web tasarım, php, mysql, dreamveawer, flash, photoshop ücretsiz dersler” yazmaktadır. Yani şu komut kullanılmıştır:

<html>
<head>
<title>SANALKURS.NET webtasarım,php,mysql,dreamveawer,flash,photoshop ücretsiz dersler</title>
</head>
</html>

Biz bunu kendimize göre degiştirebiliriz.

Ve bir de web sayfamızı kaydederken .htm ya da .html uzantısıyla kaydetmeliyiz. Genellikle index.html, default.html ismiyle kaydedilir, siz bunun ismini ne yaparsanız yapın ama uzantısı kesinlikle .htm ya da .html olmalıdır. .html web sayfamızın soyadıdır. Mesela dosya isminiz ali olsun, soyadı .html dir; yani ali.html’dir.

Evet, temel bilgiyi bu dersimizde verdik, bir dahaki derste link olayları, tabloları ve formları vs. öğreneceğiz.

Etiketler: , , , , ,

WordPress Kaynakları

Posted by: yazilimtasarim on: Eylül 23, 2009

WordPress kaynaklarını biraraya getireyim dedim. Her defasında googla’dan aratmak bayıyo :) Bildiğiniz başka kaynaklar varsa lütfen yorum olarak yazmaktan çekinmeyin.

WordPress Genel

Yazının devamını oku »

Etiketler: , , , , , , ,

Yakuter Tema 1.0

Posted by: yazilimtasarim on: Eylül 23, 2009

WordPress için kendi temamı hazırladım. Aslında sitemde bu temayı kullanacaktım fakat içeriğe yeterince yanıt vermiyordu. Tema tamamen Türkçedir. Yazının devamında temanın görünümü var. Lütfen yorumlarınızı bildiriniz. Dilediğiniz gibi indirip kullanabilirsiniz ;)

You can see and test the theme at demo site (www.yakuter.com/demo)

Yakuter Tema 1.0 Türkçe — Download

Yakuter Tema 1.0 English — Download

Yakuter Tema

yakuter..

Etiketler: , , ,

WordPress’te Nasıl Tema Yapılır? (1)

Posted by: yazilimtasarim on: Eylül 23, 2009

Artık böyle bir makale şart sanırım :) Hazır tema kullanmaktan bıktıysanız, kendi temanızı yapmanın zamanı gelmiş demektir. Bu makaleyi iki parça halinde hazırlamaya karar verdim çünkü temelden anlatmaya başlayacağım. Önce bunu tamamlayın(zaten fazla uzun değil) daha sonra 2ncisini yazacağım. Haydi başlayalım o zaman :)

Yazının devamını oku »

Etiketler: , , , , ,
Eski Yazılar

Sayfalar

Kategori Bulutu

Arşiv

WordPress.com'dan blog alın.

Albeo theme by Design Disease