En Taze Makaleler

Web Programlama

17Web Programlama 2 kısıma ayrılır:

1) Client – Side Programlama

2) Server – Side Programlama

Normal programlamadan farkı ortamın web üzerinde bulunmasıdır. Windows Programlama web programlamaya göre çok daha esnektir. Örn; web programlamada web sayfasının açılma süresi gibi. Sayfa boyutunun büyük olmaması gerekir. Karşı tarafın elinde bulunan programlar (Browserlar) da bir kısıttır.

Client-side denilen kısım çalışmak için browserlara ihtiyaç duyarlar. Ne yapılacağı önceden belirlenir ve bu şekilde çalışır. Browserlarda HTML (Hyper-Text Markup Language), CSS (Cascade Style Sheet), JavaScript dillerinde yazılan kodlar görüntülenir.

HTML denilen yapı aslında sayfa düzeni sağlar. Bir sayfa düzeni hazırlayıp nerede ne yapılması gerektiği tanımlanır. Bütün web sayfalarının kullanması gereken bir dildir. Bütün web programlama dilleri html kullanırlar.

< > işaretleri arasına yazılan tag denilen elemanlardan oluşur.

HTML için bir notepad programı yeterlidir. HTML sadece ve sadece verinin nerede bulunacağını belirler. Visual Studio’yu da html sayfa oluşturmak için kullanılabilir. New File’dan

<html> Meta tag’idir. Sayfanın html sayfası olduğunu gösterir.

<html> şeklinde başlar ve </html> şeklinde de biter. Oluşturulan bir sayfada tag in kapanması gerekmez. Ama google da bunu hata olarak algılayıp görüntülememe veya arkalarda görünmesi anlamını gerekebilir.

Bir sayfa 2 kısımdan oluşur kullanıcının gördüğü body kısmı <body></body>arasına yazılan kısımdır. Burada yazılan her şeyi kullanıcı görebilir. ve bir adette sayfayla ilgili bilgilerin tutulduğu head kısmı.

HTML taglerin değiştirilmesine duyarlı bir dildir. Yanlış tagleri text olarak algılar.

<script> içine yazılanlarda javascriptle ilgilidir.

Style da da css denilen yapılar kullanılır. Buton renkleri v.b. gibi şeylerle uğraşırlar.

<meta …> nın çeşitli özellikleri vardır.

<meta name=”keywords” content=”C#,asp.net,.netframework”/> Max.alabileceği 20 karakter, content içerisine yazılan arama motorunda hangi anahtar kelimelerle çıkılabileceğidir. Tag’in arasına bir şey yazılması gerekmediğinde sonuna back slash koyulabilir.

<meta name=”description” content=”Bu sitede .net framework içerisindeki bütün diller üzerine çalışmalar bulabilirsiniz….”/>

Decription yerine abstruct yazılabilir.

Arama motorlarında sayfa çıktığında açıklama kısmında ne çıkacak bunu belirtir. Bu alanda max. 200 karakter alabilir.

<meta http-equiv=”content-type” content=”text/html” charset=window-1254″/> Encoding dili buradan bu şekilde belirlenebilir. Browserın hangi encodingle açılacağını belirtir.

<meta name=”author” content=”Handan XXX”/>

Sayfa sahibini belirler. meta ile ilgili hiç birşey sayfada görünmez.

<meta name=”copyright” content=”20 Şubat 2010 handanxxx.com”/>Copyright’ı gösterir.

Arama motoru robotları sayfalar üzerinde arşivlemenin nasıl yapılacağını belirlemek için;

<meta name=”robots” content=”all”/>

Content’in içine yazacaklarımız ile yapabileceklerimiz şu şekilde:

  •  archive / noarchive – Sayfanın arşivlenip arşivlenmeyeceği belirlenebiliyor.
  • İndex / noindex – sayfa indekslenip indekslenmeyeceği belirlenebilir.
  • Follow / nofollow – sayfaya bağlı diğer sayfaları indeksleme işini yapar.
  • İmageindex / noimageindex – sayfadaki resimleri indeksle indeksleme
  • İmageclick / noimageclick – sayfadaki linkli resimleri indeksle.
  • All  – bütün her şeyi indeksler.
  • Robots –  content’in içerisine bunlardan herhangi birini yazabiliriz.

<!–     …    !–> HTML’deki yorum satırlarıdır.

Metalar önemlidir. Ticari olaylarda arama motorlarında öne çıkması için gereklidir.

Yukarıdakiler head kısmı içerisine yazılanlardı. Body içerisine yazılabilecekler ise aşağıdaki şekildedir.

En Sık Kullanılan Body Tagları:

<div></div> divigion’ın kısaltılmışıdır. Bir div sabitlenip içerisine elemanlar yerleştirilebilir. Görünmez bir şekilde parça ayırır. Bir butonu sayfa botunun %10’u deyince farklı div belirleyip %10 deyince belirlenen parça kadar %10 şeklinde davranır. Browser farklılıklarından dolayı kaymalara uğrayan sayfaların önüne bu şekilde geçilebilir.

<br/> Alt satıra geçer.

<p></p> Paragraf oluşturur. <p></p> nin içerisinde yeni bir <p></p> eklenemez.Ama bunun içerisinde başka şeyler eklenebilir. Örneğin a bu kodla link verebiliriz.

<p >

<a href=http://www.google.com>Ara Hadi</a>

</p>

Şeklinde link tanımlayabiliriz.

<a href=http://www.google.com style=”background-color:Green;width:100px; height:100px”shape=”circle”>Arasana Hadi</a>Linkin arka planının yeşil yapılıp arka plan boyutunu ayarladık.

<p style=”background-color:Aqua”>

Herhangi bir şeyi bold yazmak için <b></b>

Eğer hem bold hem italik yazarsak b taginin içerisine <i></i> koyulabilirdi.

Yazının ortasında olmasını istiyorsak

<center></center> arasına ilgili kodlar yazılabilir.

İlk açılan tek en son kapatılır.

<big></big> v.b. kodlar vardır.Bunun small’ı da var. Bir yazıyı büyütürken small küçültür.

<strong></strong> da yazıyı bold gibi kalın yapar.

P ye ihtiyaç duymamızın nedeni çeşitli şekillerde bunlara erişmek isteyeceğiz 3.paragrafta bir şeyler yap gibi.

<h1>’den <h6> ya kadar başlıklar vardır.

<h1>Merhaba!Yeni Dünya!</h1> şeklinde tanımlanır.

Bir yere fotoğraf eklemek için;

<img src=”water lilies.jpg” alt=”Su Zambağı”> şeklinde tanımlanır. Alt ın içerisine yazılan web sayfasında reklamın üzerine geldiğimizde yazar. Eklenilen fotoğrafların alt özelliğine bir şeyler yazılmalıdır. Eğer alt’a bir şey yazılmazsa google bunu hata olarak algılar.

Genelde fotoğraflar sayfada kaymalara neden olur. HTML’in içerisine tablo eklemekte sık kullanılır.

Width=”240” height=”300” bunları resim kodunun içerisine koyarak resim boyutları ayarlanabilir.

<table>

<tr>

<th>Adı</th>

<th>Soyadı</th>

</tr>

<tr>

<td>Handan</td>

<td>XXX</td>

</tr>

Tablolama yaparken kopyala-yapıştır kullanılır.

 &nbsp; – HTML’deki boşluk bırakmaya karşılık gelen karakter seti; tanımlanır.

Google’da html tag şeklinde arama yaptırırsak kullanılabilecek bütün html tagleri sıralabilir.

www.web-source.net/html_codes_chart.htm adresinde faydalı şeyler var.

W3 adlı birlik css,html kodlarını standartlaştıran kurum.

www.w3.org Weble ilgili bütün standartlar burada vardır.

Width=”33%” height=”200px” şeklinde ayarlamalar yapılabilir.

CSS

<head></head>bloklarının arasına

<style>

Td{

Background-color:Aqua;

Width:200px;

}

</style>

<td class=”m”> deyip bunu daha sonra

<head></head>bloklarının içerisinden tanımlayabiliriz.

.m

{

Background-color:Red;

}

Td{

Background-color:Aqua;

Width:250px;

}

Şeklinde tanımlamalar yapılıp m adında olan tüm classlarda etkili olacaktır.

CSS; Style bilgisini farklı bir dosyada tutmaktır. Örn;6 html sayfası var. Bu sayfalarda aynı yapıları kullanıyoruz. Arka plan renkleri tasarımları aynı ise bu sayfalarda aynı css dosyasını kullanabiliriz.

CSS dosyasını ayrı bir sayfada oluşturarak kendi sayfamızda link ile kullanabiliriz. Bir style sheet css dosyası birden fazla web sayfasında kullanılabilir.

<link href=”stylesheet1.css” type=”text/css” rel=”stylesheet” />

Bu şekilde oluşturulan Style sheet dosyaları  kod çalınmalarına karşı da önlem sunar.

Sevgili Okuyucu, bak bu makalede ilgini çekebilir.

Eyvah, Bilgisayarımda D Diski YOK !

Bundan 3 vakit önce niyet ettim yeni bir bilgisayar almaya. Piyasa araştırması yapıp alacağım bilgisayara …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Fazla kilolardan mı şikayetçisiniz? O halde neden mide küçültme ameliyatı nı denemiyorsunuz. mide küçültme ameliyatı, zayıflamak isteyenler için kesin bir çözüm sunuyor. Üstelik çok kısa bir süre içersinde hayal ettiğiniz kilolara kavuşabilirsiniz.
Caminin önünde ve iki yanında geniş cami halısı dış avlusu olup bunun çevresi pencereli duvarlarla çevrilidir. Bu avulya 3 ü cephede olmak üzere, 8 kapıdan girilir. Şadırvan avlusu, 26 adet granit mermer ve porfir sütuna oturtulmuş, 30 kubbeyle çevrili geniş alandır. Mermer döşemeli bu geniş sahanın ortasında 6 mermer sütunlu şadırvan, sahanın azametini gösterir. Şadırvanın kemerleri, kabartma olarak Rumi geçmelerle ve köşebentleri, kabartma, lale ve karanfil motifleriyle bezelidir. İç avluya, biri cepheden ikisi yandan olmak üzere herbiri merdivenli 3 kapıdan girilmektedir. Bu kapılarla dış avlunun cümle kapısı, ozamana kadar benzeri görülmemiş bronz kapılardır. Kubbeden aşağı doğru indikçe mekan yayılmaktadır. Bu piramidel yükselme ve yayılma sonucunda göz yanlara ve yukarıya doğru aynı mesafelere ulaşmaktadır. Bu özelliklerden dolayı, mekanın neresinde olursanız olun, bütün mekana hakim görüş sağlarsınız. Kubbe yaklaşık olarak 43 metre yükseklikte ve köşeleri pandantifle doldurulmuş 4 muazzam kemer üzerine oturtulmaktadır. Caminin su basmanı üzerinde olması ve kubbe yüksekliği nedeniyle pencereleri oldukça fazladır. Böylece caminin içini süsleyen binlerce çini ve kalem işleri tatlı ışık altında görülmektedir. Caminin içindeki en önemli unsur, ince işçilikle yontulmuş mermerden yapılma mihraptır. Bitişik duvarları, seramik çinilerle kaplanmıştır fakat çevresindeki çok sayıdaki pencere onu daha az ihtişamlı gösterir. Mihrabın sağında, Caminin en kalabalık halinde dahi olsa, herkesin imamı rahatça duyabileceği şekilde dekore edilmiş mimber bulunur. Caminin içi her katında alçak düzeyde olmak üzere 50 farklı lale deseninden üretilmiş 20binden fazla çini ile döşenmiştir. Alt seviyelerdeki çiniler, geleneksel galerideki çinilerin desenleri çiçekler meyveler ve servilerle gösterişli ve ihtişamlıdır.