BİLDİĞİNİ PAYLAŞ SEMİNERLERİ

Emrah ÜSTÜN emrahustun.com

<<www.kouelohab.com>> 1

BİLDİĞİNİ PAYLAŞ SEMİNERLERİ

GİRİŞ SEMİNERİWEB ve HTML

www.kouelohab.com

KOCAELİ ÜNİVERSİTESİ ELEKTRONİK VE HABERLEŞME MÜHENDİSLİĞİ ÖĞRENCİLERİNİN VE MEZUNLARININ BULUŞMA NOKTASI



İnternetin çalışma prensibi İnternet, bilgisayarları birbirine bağlayan elektriksel

hatlar üzerinde çeşitli protokollerle sinyal iletimi yapılarak sağlanmaktadır.

Çeşitli iletim hatları üzerinde kullanılan çeşitli sinyalizasyon sistemleri vardır. Ancak internete bağlanan her sistem TCP/IP protokoller dizisini kullanır. İşte farklı sistemlerin farklı hatlar kullanarak iletişim kurması bu şekilde mümkün olmaktadır.

Örneğin adsl kullanan Windows xp ile yönetilen bir bilgisayarla çevirmeli bağlantı kullanan pardusla yönetilen bir bilgisayarın haberleşmesi, iki sistemin de ortak protokolleri kullanması sayesinde mümkün olmaktadır.



TCP : Transmit control protocol Büyük dosyalar bu protokole uyarak, (yani TCP’nin

belirlediği kuralları kullanarak) birçok küçük pakete bölünür ve her paket ayrı ayrı iletilir.Alıcıda tekrar birleştirilir.

Hatalı paket geldiğinde o paket tekrar istenir ve doğru dosya oluşturulur. Hatalı olup olmadığı o paketle birlikte gönderilen CRC koduyla tespit edilmektedir.

CRC kodu verinin özetidir diyebiliriz. Bazen sıkıştırılmış dosyaların (rar, zip, …) hatalı indirilmesinin sebebi zaten sıkıştırılmış olan dosya için verimli bir CRC kodunun üretilememesinden kaynaklıdır denebilir.



IP: internet protocol Bilgisayarlar arası iletişimde kullanılan protokoldür. İnternete bağlı

her bilgisayarın bir IP numarası vardır. Örneğin biz internete bağlanırken (dinamik IP kullanıyorsak) her bağlanışta Türk Telekom’un IP havuzundan bir IP alıyoruz. O hatta o IP atanıyor. Ve dünya üzerinde o IP’den yalnız bir tane oluyor. İşte internette paket iletimi bu IP numaralarına göre yapılmaktadır. Gönderilen bir paketin alıcısı olarak bir IP numarası gösteriliyor.

Dünya üzerinde çok fazla sayıda farklı IP numarası vardır. Örneğin Almanya’dan Türkiye’ye gelecek bir veri için bütün dünyadaki IP’lerin taranması çok zor bir işlem olurdu. Bunun için IP’ler basamaklara bölünüp bölgelere ayrılmıştır.

Burada her basamak bir bölgeye dallanma anlamı taşır. Örneğin 123 ülke kodu 456 şehir kodu 789 mahalle kodu 12 kullanıcı kodu olabilir. Böylece iletişim sağlanırken veride hedef IP çözümlenerek gerekli hatlara gönderilir.



Web sitelerinin çalışma prensibi Msn Messenger kullanarak arkadaşımıza bir resim

veya bir Word dosyası gönderiyoruz diyelim. Web sitelerinin çalışması bundan farksızdır.

Bir web sayfası görüntüleme işlemi dosya transferinden başka bir şey değildir. Tarayıcıya yazdığımız site bize dosyalar gönderir. Aslında gönderir değil bizim bilgisayarımız dosyaları talep eder.

Bir site temel olarak bir html kod dosyasından ve grafik dosyalarından oluşur. Gelen kodlara göre tarayıcımız gerekli dosyaları çağırır ve bize html kodlarının söylediği şekilde gösterir.



Alan adı ve sunucu Hepimiz Msn Messenger kullanarak dosya paylaşıyoruz. Msn

Messenger’da yaptığımız dosya paylaşımının web sitesi açmaktan farkı şudur;

Web siteleri genelde sunucular (server) tarafından yayınlanır. Sunucuların işi gelen taleplere göre dosya göndermektir. Bizim bilgisayarımızın da sunucunun da kendilerine ait IP adresleri vardır. Web tarayıcımıza bir site adresi yazdığımızda, sunucu IP’si hedef gösterilerek sayfayı talep eden bir veri paketi gönderiliyor. Bizim tarafımızda yapılan şey modemin telefon hattına bu paketin bırakılmasıdır. Geri kalan işi Telekom’un ve diğer kurumların sistemleri yapar. O paketi hedef IP adresine ulaştırır. Ve sunucu talep edenin IP’sini hedef göstererek talep edilen dosyaları gönderecektir. (istek paketinde kullanıcı kendi IP’sini de gönderir)

Gelen dosyalar içinde html kod dosyası olmak zorundadır. Bununla birlikte kodların belirttiği şekilde yeni dosyalar (grafik, ses, flash veya başka html dosyaları) talep edilebilir ve kullanıcıya gösterilir.



Alan adı ve sunucu Şimdi gelelim alan adı kavramına; Biz web sitelerine sunucuların IP’lerini

tarayıcımıza girerek te ulaşabiliriz.

Örneğin; Basit şekilde; www.alanadi.com yerine

tarayıcımıza o sitenin barındığı sunucusunun IP’sini yazarsak yine aynı siteye gireriz. (hatta çok az daha hızlı gireriz)



Alan adı ve sunucu Ancak site adresi olarak IP adresi yerine www.alanadi.com şeklinde

daha kolay akılda kalması sağlanabilir. www.alanadi.com ‘u yayınlayan sunucunun IP adresi DNS (Domain Name Server) veritabanlarında saklanmaktadır. Biz tarayıcımıza www.alanadi.com yazdığımızda DNS’lerden önce IP adresi çekilir ve artık o IP adresiyle iletişim kurulur.

Buradan şunu çıkarabiliriz; web sitesi kurmak için .com .org .net gibi uzantılı bir alan adı almanıza gerek yoktur. Önemli olan sunucudur. Ziyaretçiler sunucu IP’si ile sitenize girebilirler.

Yani kısaca, evinizde kendi bilgisayarınızdan web sitesi yayınlayabilirsiniz. Tabi kullanıcılar sadece sizin bilgisayarınızın açık olduğu zamanlarda sitenize girebilir o zaman.

Normalde bu işleri yapan sunucular 24 saat açık olur, çok hızlı internet bağlantısına, yüksek hızda işlemci ve harddiske, yüksek kapasiteli RAM’e, büyük soğutma sistemlerine ve kesintisiz güç kaynağına sahiptirler. Bu şekilde çok kullanıcıya aynı anda ve sürekli cevap verebilirler.



Sunucuda web sitesinin barınması Web sitesine girmenin dosya transferinden farksız bir

şey olduğunu söylemiştik. Sunucuda kurulu olan program web siteleri için bir klasörü hedef gösterir.

Örneğin c:/web gibi.(Win server için) Biz sunucuya talepte bulunduğumuzda sunucu bizi direk o klasöre yönlendirir. Yani şöyle diyebiliriz; tarayıcımıza www.alanadi.com yazdığımızda 123.456.789.12/c:/web klasörüne gidiyoruz.(gibi)

Ana sayfalar genelde index isimli dosyalardır. (index.html,index.php,asp için default.asp)



Sunucuda web sitesinin barınması Bir siteye girdiğimizde ilk başta bu dosya bize

gönderilir. Şimdi daha önce söylediğim diğer dosyaların da

çekilmesinden bahsedelim; Bir web sayfası çeşitli öğelerden oluşur. En çok

kullanılan öğe grafiklerdir. Html dosyaları, içlerinde grafik dosyaları barındıramaz. Html dosyasının içeriği tarayıcıya kullanıcıya göstereceği öğelerin adreslerini verir.

Örneğin sayfanın sağ alt tarafında manzara.jpeg isimli bir grafik öğesi açılacaktır. Tarayıcımız index.html dosyasını derlerken manzara.jpeg grafik öğesine rastlayınca bu grafik dosyasını talep eder ve index.html içinde kullanıcıya gösterir.



Linkler Sitede bir linke tıklamak, o linkin adresini

tarayıcıya girmekten farksızdır. Örneğin: www.alandi.com sitesine girdik ve index

dosyasını açtık. Bu sitede dosyalar linki var. Adresi www.alanadi.com/dosyalar.html ise o sayfayı açacaktır. www.alanadi.com/dosyalar ise c:/web/dosyalar/index.html dosyasını açacaktır.



Web sitesi kurmak Daha önce söylediğim gibi kendi bilgisayarınızdan alan adınız

olmadan da web sitesi yayınlayabilirsiniz. Hatta öğrenme amaçlı yapmak istiyorsanız internet bağlantısına dahi ihtiyacınız yoktur. Bilgisayarınızda kayıtlı olan html dosyalarını tarayıcınıza adres gösterirseniz onu da açacaktır. D:/sitelerim/denemesayfam.html gibi.

Normal bir web sitesi açmak istiyorsanız 2 şeye ihtiyacınız var. Alan adı ve host(sunucu hizmeti).

.com ,.org, .net gibi uzantılı alan adlarının kontrolü yapılmamaktadır. İsteyen istediği gibi alabilir. Alan adı satan çeşitli şirketler mevcuttur. Kredi kartınızla anında alabilirsiniz. .tr uzantılı alan adları ise ODTÜ’nün kontrolündedir. Ancak şirketler veya resmi kurumlar çeşitli bürokratik işlemler sonucunda bu alan adlarını alabilirler.

Alacağımız diğer şey ise host’tur. Yine hosting sağlayan çeşitli şirketler mevcuttur. Sizin yapacağınız şey alan adınıza hostunuzun IP’sini girmektir.(ki DNS yönlendirilmesi gerçekleşsin)



WEB PROGRAMLAMA Statik web siteleri her an, her koşulda aynı

html kodlarından oluşan ve aynı görünümü veren web siteleridir.

Dinamik web siteleri sunucuda derlenen programlama dilleriyle kodlanan ve programcının belirlediği koşullarla, verdiği html kodları değişen ve kullanıcıya farklı farklı şeyler gösteren sitelerdir. Örneğin forum siteleri, üye girişi olan bütün siteler, değişken duyuruları olan siteler dinamiktir.



Web programlama dilleri Her web sayfası html kodlardan oluşur. Dinamik web

programcılığında yapılan şey html kodlarını istediğimiz gibi üretmektir. Bunun için çok farklı web programlama dilleri vardır. Bunlar aslında sunucu taraflı (server side) ve kullanıcı taraflı (client side) olmak üzere ikiye ayrılmaktadır.

Kullanıcı taraflı diller arasında javascripti örnek gösterebiliriz. (java değil!! Java ile Javascript çok farklı şeyler) Bir sitede Javascript kodları html kodlar içine gömülür ve tarayıcımız tarafından çalıştırılır. Aslında javascripte tam olarak dinamik web programlama dili diyemeyiz. Çünkü Javascript kodları da html gibi hep aynı sonucu verir. Kullanıcıya gönderilir ve kullanıcıda derlenir. (aynı html gibi) Javascripte örnek olarak düşen menüler, uyarı pencereleri, çeşitli hareket efektleri verilebilir.



Web programlama dilleriGelelim sunucu taraflı dillere. Bunlar; Asp (active server pages) Aspx (asp .net) Php (Hypertext Preprocessor - eski haliyle:

Personal Home Pages) Cfm (coldfusion, üniversitemizin sitesinde

kullanılan dil) Jsp (javascript page) Cgi Perl …



HTML Html dosyası kısa html etiketlerini içeren bir

yazı dosyasıdır. Uzantısı html veya htm olabilir. Herhangi bir yazı programıyla yazılabilir. (notepad, word,…) Önemli olan uzantı olarak txt veya doc yerine html olarak atayarak kaydetmektir.

Html’de her şey etiketlerle yapılır. Örneğin kalın yazma etiketi, altını çizme etiketi,…

Html etiket tanımlamaları şu şekildedir;<etiket> içerik buraya </etiket>



HTML Html sayfaları (yani bütün web siteleri) için tanımlanmış standartlar vardır.

Bir web sayfası head denen bilgi kısmı ve body denen vücut kısmından oluşur. Head kısmında siteyle ilgili çeşitli bilgiler bulunur, bunlar ziyaretçiye gösterilmez. Body kısmı içindeki html kodları derlenir ve etiket tanımlamalarına göre ziyaretçiye gösterilir.

<html><head>..Sayfa bilgileri..</head><body>..Sayfa içeriği..</body></html>



HTML Bir örnek sayfa oluşturalım.<html><head><title>Deneme sayfa</title></head><body>deneme içerik</body></html> örnek1



HTML – temel etiketler Mantığını kavradık. Şimdi etiketleri öğrenelim.<b>kalın yazı</b><strong>bu da kalın yazı</strong><i>italik yazı</i><em>bu da italik yazı</em><h1>Başlık</h1><h2>Başlık</h2><h3>Başlık</h3><h4>Başlık</h4><h5>Başlık</h5><h6>Başlık</h6><p>Paragraf</p><p>Bu da paragraf</p><p>Bu <br> satır kes<br>meli paragraf</p> örnek2



HTML - listeleme<p>listeleme:</p><ul> <li>eleman 1</li> <li>eleman 2</li></ul><p>sayılı</p><ol> <li>eleman 1</li> <li>eleman 2</li></ol> örnek3



HTML - bağlantılar

<a href="http://www.kouelohab.com/">KOÜ ELO HAB</a>

Yeni bir pencerede açmak için:<a href="http://www.kouelohab.com/"

target="_blank">KOÜ ELO HAB</a>Sayfa içi bağlantı:<a name="liste">listeye git</a>Ve buna bağlantı verilirken adres sonuna

#liste konur. örnek4



HTML - tablolar

Biz görmüyoruz ama web siteleri tablolardan ibarettir. Yoksa düzenli olmaları çok zor. O menü blokları, çerçeveler hep tablodur. Şimdi bu tabloları nasıl oluşturacağımızı, nasıl satır sütun ekleyeceğimizi görelim. Tablo tanımı <table> </table> şeklinde olur. Biz satır ve sütunları içine koyarız. <tr></tr> satır, <td></td> sütundur.



HTML - tablolar Örnekleyelim;<table>

<tr><td>tablo yapmak</td></tr></table>

Bu şekilde sadece tablo yaptım yazısını görürüz ama. Çünkü bunda kenarlık yok, tablo olduğunu fark edemeyiz. (ki web sitelerindeki onlarca tabloyu bundan dolayı görmüyoruz) Şimdi de 1 piksellik kenarlık koyalım görebilelim diye. border=”1″

<table border=”1″><tr><td>tablo yapmak</td></tr></table>

Çıktısı:



HTML - tablolar Buna şimdi bir satır ekleyelim.<table border=”1″>

<tr><td>tablo yapmak</td></tr><tr><td>tablo yapmak</td></tr></table>

Çıktısı:



HTML - tablolar Şimdi sütun ekleyelim.<table border=”1″>

<tr><td>tablo yapmak</td> <td>tablo yapmak</td></tr><tr><td>tablo yapmak</td> <td>tablo yapmak</td></tr></table>

Çıktısı:



HTML - tablolar Tek satırda 2 sütun:<table border=”1″>

<tr><td>tablo yapmak</td> <td>tablo yapmak</td></tr></table>



HTML – tablo özellikleri <table align=”center”

bgcolor=”#FFFFCC” cellpadding=”5″ cellspacing=”5″ width=”300″><tr><td>tablo yapmak</td><td>tablo yapmak</td></tr></table>



HTML – tablo özellikleriBurada kullanılanlar; align=”center” tabloyu ortalar. bgcolor arkaplan rengi cellpadding hücre içi boşluk cellspacing hücreler arası boşluk width tablo genişliği (piksel olarak). width içinde

yüzde de kullanabilirsiniz. 100% yaparsanız tam genişlik alır.

Bir de height vardır. Tablo yüksekliği. Bir de şunu bilelim background=”resim.gif”

şeklinde arkaplan resmini tanımlıyabiliriz.



HTML – tablo özellikleri Şimdi hücre içi özelliklere geçelim. <table border=”1″ align=”right” bgcolor=”#FFFFCC”

cellpadding=”5″ cellspacing=”5″ width=”300″><tr><td align=”left” bgcolor=”#CCFFCC” bordercolor=”#333333″ valign=”top” height=”100″ width=”200″>tablo yapmak</td>

<td bgcolor=”#FF9933″ align=”left” valign=”bottom”>tablo yapmak</td></tr></table>



HTML – tablo özellikleri align hücre içi yazı hizalaması. Tabloda kullandığımız

tablonun sayfa içindeki konumuydu. Ama hücre için hücre içi yazıların hizalaması. Burada ortaladık.

bgcolor yine arkaplan rengi. Tablodan bağımsız olduğunu görebilesiniz diye ayrı ayrı yaptım. Kenarlıkların tablo arkaplanı renginde olduğuna dikkat ediniz.

bordercolor kenarlık rengi valign hücre içindeki yazıların dikey hizalaması. (vertical

align) height yükseklik. Burada 2 hücreyi farklı yükseklikte

yapamazsınız. Yaparsanız da büyüğünki kullanılır(tarayıcıya göre).

width de hücre genişliği. tablo genişliğine 300 demiştik , 200ünü soldaki hücreye ayırdık ve diğerine 100 kaldı. % kullanarak ta yapılabilirdi.



HTML – tablo başlığı <td> yerine <th> kullanılarak tanımlanır. Başlık hücresi içindekiler direk header tanımlanmış gibi

oldu. <table border=”1″ >

<tr><th>tablo başlığı</th></tr><tr><td>tablo yapmak</td></tr></table>



HTML – tablolar (rowspan) <table border=”1″ >

<tr><td rowspan=”2″>tablo yapmak</td> <td>tablo yapmak</td></tr><tr><td>tablo yapmak</td></tr></table>



HTML – tablolar (colspan) <table border=”1″ >

<tr><td>tablo yapmak</td><td>tablo yapmak</td></tr><tr><td colspan=”2″>tablo yapmak</td></tr></table>

Bunları da colspan ve rowspan kullanarak yaptık. Hücre sayısını yazıyoruz içine. Bu yapıda bir şey kaçırırsanız tablolarınız kayar. Yani yukarda 3 hücre olsaydı biz colspan=”2″ yazsaydık olmazdı tabi.



HTML – Tablo içinde tablo Tablo yapabiliyorsak içine istediğimiz şeyi koyabiliriz. (yeni tablo da koyabiliriz) Yapılacak şey hücrenin içine yeni tablo koymak. Örnek:<table width=”300″ border=”5″ bordercolor=”#0faaaa” bgcolor=”#CCCCCC”>

<tr><td align=”center”><strong><font color=”#0FAAAA”>Dış tablo</font></strong>

<table width=”200″ border=”5″ bordercolor=”#FF0000″ bgcolor=”#F2F2F2″><tr><td align=”center”><strong><font color=”#FF0000″>iç tablo</font></strong> </td></tr></table>

</td></tr></table>



HTML - formlar

Web sitelerinde ziyaretçilerden veri almanın yollarından biri html formlarıdır. Yani üyelik girişlerinde, forumlarda, e-postalarda kullandığımız kutucuklar.

Bu form alanları <form> ile açılıp </form> ile kapanır ve içine girişlerin yapılacağı elemanlar yerleştirilir.



HTML - formlar<form action="uyegiris.php" method="post" enctype="multipart/form-

data"> <br> <input type="text" name="yazi"> <br> <input type="password" name="sifre"> <br> <input type="hidden" name="gizliveri"> <br> <textarea name="yazialani"cols="45" rows="5"></textarea> <br> <input type="checkbox" name="checkbox">seçenek <br> <input type="radio" name="radio" value="secenek1">seçenek1 <br> <input type="radio" name="radio" value="radio"

id="secenek2">seçenek2<br> <input type="file" name="fileField" id="fileField"></form> örnek5



HTML - resim Web sayfaları html kodlardan oluştuğu için resimleri

dosya içine koyamıyoruz. Resimler sunucuda normal jpeg, gif, bmp dosyası olarak bulunur, biz img etiketiyle sayfa içinde gösterilmesini sağlarız.

<img src="resim adresi buraya" width="genişlik" height="yükseklik ">

<img src="file:///D|/Resimlerim/elohab/1.sınıf/veziroğlu.JPG" width="800" height="600">

örnek6 *Genişlik ve yükseklik verilmeyebilir, bu durumda resim

tam genişlik ve yükseklikle açılır. Yani yükseklik ve genişlik verildiğinde tarayıcıya resmi olduğundan daha büyük veya küçük gösterebiliriz.



HTML - fontlar Yazıların boyutlarını, renklerini ayarlamamıza yarar.<font> </font> şeklinde kullanılır.<p><font size="1">font deneme yazısı</font></p><p><font size="7">font deneme yazısı</font></p><p><font color="#FF0000" face="Geneva, Arial, Helvetica, sans-serif">font deneme yazısı</font></p><p><font face="Verdana, Arial, Helvetica, sans-serif">font deneme yazısı</font></p><table width="200" border="1"> <tr> <td> </td> <td> </td> <td><font color="#FF6666" size="4" face="Times New Roman, Times, serif"><strong><em>font deneme

yazısı</em></strong></font></td> </tr> <tr> <td> </td> <td><h1><font face="Times New Roman, Times, serif">font deneme yazısı</font></h1></td> <td> </td> </tr> <tr> <td><font color="#00FFFF" size="1" face="Geneva, Arial, Helvetica, sans-serif">font deneme yazısı</font></td> <td> </td> <td> </td> </tr></table> örnek7



TEŞEKKÜRLERwww.kouelohab.com

Emrah Üstünwww.emrahustun.com

E-posta, MSN: [email protected]

Documents

BİLDİĞİNİ PAYLAŞ SEMİNERLERİ