Handan Erdağ Bilişim Sektöründe Bir Kadın
Web 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.
– 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.
SQL Server 2008 kurulumu için Setup.exe dosyamızı çalıştırıyoruz. SQL Server kurulumunu yaparken bilgisayarımız da eksik eklenti var ise setup.exe çalıştırdığımız da SQL eksik bileşenler için bizi uyarır. Eğer uyarı alırsanız bu bileşenleri yükledikten sonra tekrar setup.exe çalıştırmalısınız.
