Bildiğiniz üzere TEKNOLOJİ bölümü küçültülerek tek bir bölüm haline getirilmiş. Hiç şüphesiz ki bu ilginin azlığından kaynaklanıyor. Forumda özellikle matematik bölümünde Izmirksk arkadaşımızın çabalarını görüp bu forumun da kapatıldığını okuyunca burada bir bilgi paylaşımı açısından boş kaldıkça birşeyler yazabilirim diye düşündüm. Geçen bir arkadaş da web tasarımı hakkında bir soru sormuştu. Oradan hareketle bu konudaki bilgilerimi paylaşmak istiyorum. Tabi bu konudaki en iyi öğrenim yöntemi akademik kaynaklardan araştırmak daha sonra da forumlarda takıldığın yerleri sormaktır ama madem hareket yok ben de kendi çapımda birşeyler yazayım. Söylediğim gibi profesyonelce hazırlanmadığı için hatalar olabilir. Bu konuda uyarılarınızı ve anlayışınızı bekliyorum.

NETWORK, INTERNET, ÇALIŞMA PRENSİPLERİ

Web tasarım ve web programlamaya girmeden önce kısaca web ve internet nedir ondan bahsedeyim. Webi anlamak için önce interneti anlamak gerekiyor. Tabi burada olduğumuza göre anlamışız demektir. Ama internet=web demek değil tabi ki. Birkaç bilgisayarın biraraya gelmesiyle oluşan sisteme LAN (Local Area Network, Yerel Ağ) denmekte. Bu ağın dünya çapında olanını ise internet olarak niteleyebiliriz. Yani interneti dünya üzerindeki bilgisayarları birbirine bağlayan ağ sistemi olarak düşünebiliriz. Yalnız burada dikkat edilmesi gereken noktalardan biri ağ protokolleridir. Bilgisayarları birbirine bağlamak için çeşitli protokeller, yani biçimler mevcuttur. İşte burada bizim ilgilendiğimiz protokol TCP/IP protokolüdür. Bu ağ protokolüne göre ağdaki her bilgisayarın bir IP numarası vardır ve bunlar birbirine bu numaraları kullanarak paketler gönderirler. Bir bilgisayar 81.213.145.168 gibi bir numarayla ifade edilir. Bunun yanısıra işlevlilik amacıyla portlar vardır. Yani her bilgisayar birçok sanal porta sahiptir. Bu şekilde o ağ üzerinden birçok işlem yapılabilmektedir. Şöyle düşünelim. Bilgisayarınızın bir çıkışı var (aynı zamanda bu bir giriş). Bu çıkış binlerce küçük parçaya ayrılmış. Dolayısıyla her biri farklı bir iş için kullanılabiliyor. Örneğin MSN Messenger programınız çalışırken atıyorum 1863 nolu portu kendine ayırır. Daha doğrusu Windows(diğer işletim sistemleri de aynı şekilde davranır)'tan bunu talep eder. Windows bu portu o programa verirse, o program bu portu bırakana kadar diğer programlar bu portu kullanamaz. Bu şekilde başka bir MSN Messenger'den gelen bir paket 1863 nolu porttan direkt sizin MSN Messenger programınıza ulaşır. Bu şekilde sizin messengerınız tek bir noktadan gelen bütün paketleri yakalar ve herhangi bir kayıp sözkonusu olmaz. Ve aynı zamanda diğer programlar da diğer portları kullanabilir. İşte bu portlar internet üzerindeki birçok hizmet için ayrılmış durumdadır. Bilinen birkaç örnek olarak FTP-21, HTTP-80, POP3-119. İşte bizim web sayfalarımızı görüntülemek için kullandığımız HTTP protokolü TCP/IP'nin 80 nolu portunu kullanır genelde. Tabi bunların bizlere 2 yıl boyunca 4 ders halinde anlatıldığını söylediğimde heralde en basit halinin bu olduğunu tahmin edebilirsiniz :)

WEB SAYFALARI NASIL ÇALIŞIR?

Web sayfaları da diğer birçok ağ hizmeti gibi client/server (istemci/sunucu) yapısında çalışır. Siz bir internet sitesine girerken bilgisayarınız bir istemci, kullandığınız tarayıcı da (Internet Explorer, Firefox vs) bir istemci yazılımı (HTTP Client) olarak çalışır. Bağlandığınız sitenin bulunduğu bilgisayar da bir sunucudur. Onlar da bir WEB SUNUCU yazılımı kullanırlar. Bu HTTP Server dediğimiz (FTP Server gibi hizmetleri de beraber sunabilirler) yazılımlar arasında en bilineni IIS ve Apache'dir. Burada kesip bir iki açıklama yapmakta fayda var.

DOMAIN NAME: Söylediğimiz gibi bilgisayarlar internette IP numaraları ile ifade edilir. Ama siz tarayıcınızı açıp adres çubuğuna www.aleviforum.com (http://www.aleviforum.com) yazdığınızda bir sayfa açılmaktadır. Aslında bu iş şöyle gerçekleşir. Sizin ağ ayarlarınız arasında DNS (Domain Name Server) diye bir ayar vardır. Ve burada bir IP numarası kayıtlıdır. Bu numarayı modeminiz sizin yerinize belirliyor da olabilir. Siz tarayıcınıza www.aleviforum.com (http://www.aleviforum.com) yazdığınızda bilgisayarınız otomatik olarak bu DNS'e gidip bu adresi sorar. DNS vazifesini yürüten bilgisayarda gidip bu adresin hangi bilgisayara yönlendirilmiş olduğunu sorar. Oradan atıyorum 62.216.187.33 diye bir IP numarası alarak o IP numaralı bilgisayara aleviforum.com sayfasına gitmek istediğini bildirir. Sonuçta biz tarayıcımıza aleviforum.com yazınca 62.216.187.33 IP'sini almış olan bilgisayardaki bir dosyaya ulaşmış oluyoruz.

HTML (Hyper Text Markup Language): Web sayfalarında kullanılan dildir. Aslında bir programlama dilinden çok bir tasarım dili olarak niteleyebiliriz. Aslında görüntülediğimiz bütün sayfalar HTML kodundan ibarettir. Örneğin şuan bu yazıyı okurken karşınızda duran görüntü bir HTML kodu bütününün tarayıcınız (IE, Firefox vs) tarafından yorumlanmış halidir. Aslında web tarayıcıları da aslında bu işi yapmak için vardırlar. Yani sunuculardan sizin yazdığınız adrese göre HTML kodlarını talep etmek ve ona verilen HTML kodlarını size göstermektir görevleri. Bu yüzden bazı sayfalar örneğin IE (Internet Explorer) ile farklı, Firefox ile farklı görünebilmektedir. Aslında sunucu ikisine de aynı HTML kodlarını cevap olarak vermiştir. Ama sizin bilgisayarınızdaki IE bu kodları farklı, Firefox farklı yorumlayabilir. Bu HTML kodunun bir standartı olsa da tarayıcı üreticileri arasındaki bazı uyuşmazlıklar standartların dışına çıkılabilmesine neden olabilmekte. HTML oldukça basit bir dildir. Aşağıda bir örnek görüyorsunuz:


<font size="2" color="red" face="Arial"><b>CcGunal</b> giriş yaptı</font>


Burada ekrana CcGunal giriş yaptı. yazdırdık. <font> ile başlatıp </font> ile bitirdiğimiz bloğun içindeki yazıların büyüklüğünün 2 birim, renginin kırmızı ve yazı tipinin Arial olmasını istedik. Ayrıca <b> ile </b> arasında kalan CcGunal yazısının kalın yazılmasını istedik. Bu <font> gibi <b> gibi ibarelere HTML dilinde tag denir. Bu dilin ayrıntılarına daha sonra devam edebiliriz. Oldukça basit bir dildir.

En son bizim tarayıcımızın (IE, Firefox vs) gidip sunucu yazılımdan adres çubuğuna yazdığımız sayfanın bize vereceği HTML kodlarını talep ettiğini söylemiştik. Sunucu yazılımlar arasında en çok Apache kullanılır. Apache web sunucusu genelde Linux işletim sistemi ile kullanılabildiği gibi, Windows'da çalışan versiyonu da mevcuttur. Apache, oldukça sağlam, güvenilir ve açık kodlu bir sunucu yazılımıdır. Bu özellikleri ve de bedava oluşu onu en çok tercih edilen haline getirmiştir. Rakip olarak söylenebilecekse Microsoft'un IIS (Internet Information Service) programı vardır. Bu yazılım, sadece Windows işletim sistemlerinde kullanılabilin ücretli bir yazılımdır. Bazı Windows sürümleri ile birlikte sınırlı (XP Pro, 2000 Pro), bazı sürümlerde ise sınırsız (2000 Adv.Server, 2003 Server) olarak gelmektedir. Eğer biz direkt bir html sayfasına bağlanıyorsak (ÖR: http://www.heyyo.com/about.html) aslında sunucu yazılımına pek iş düşmüyor demektir. Bizim tarayıcımız gider belirtilen ip'deki bilgisayara bu HTML dosyasının bizim tarafımızdan istendiğini iletir. Sunucu yazılımı da özel bir durum söz konusu değilse o dosyayı cevap paketi olarak bize gönderir. Bu paketleri alan tarayıcımız bu dosyayı bizim bilgisayarımızdaki belirlenmiş yere kaydeder. Yani about.html dosyası bizim bilgisayarımıza kaydedilir. Ve tarayıcımız bu kaydettiğin dosyanın içindeki HTML kodlarını başından sonuna okuyup bize şekillendirerek gösterir. Yani dosyada düz bir metin olarak <font size="2" color="red" face="Arial"><b>CcGunal</b> giriş yaptı</font> yazıyorsa ekrandaki kendi penceresi içinde bize CcGunal giriş yaptı. yazısını gösterir. Yapılan iş bundan ibarettir. Bu noktada işi karmaşıklaştıran web programa dilleri, scriptler, bilgi alışverişi gibi konular vardır. Bu yazıyı bu genel çalışma prensipleri ile noktalayım. Sabah oldu. İşe gidiyorum.

Güzel bir yazı, yeni başlayanlar için HTML bölümü biraz ağir gelebilir ama DNS/Network yazıları uzaktan zor geliyor ama açık bir şekilde anlatıldığında gördüğümüz gibi mantıklı ve basit.
bakalım forumdan webci çıkacak mı nedeolsa şiir mizah spor cracklerimiz var :)

Güzel bir yazı, yeni başlayanlar için HTML bölümü biraz ağir gelebilir ama DNS/Network yazıları uzaktan zor geliyor ama açık bir şekilde anlatıldığında gördüğümüz gibi mantıklı ve basit.


Umarım boş kaldıkça devam edeceğim. İlgilenen arkadaş varsa soru-cevap şeklinde gidebileceğimiz için yararlı olacağı düşüncesindeyim. Tabi akademik bir altyapı gerekiyor böyle eğitici yazmak için. Bu da ayrı bir uzmanlık alanı. Ama bunu karşılıklı etkileşimle kapatmayı düşünüyorum.

bakalım forumdan webci çıkacak mı nedeolsa şiir mizah spor cracklerimiz var :)

:) Bu işlerinde suyunu çıkaranları da unutmamak gerekiyor bu arada :) Ben bir site yapmıştım zamanında. Aslında zararsız, güncel olaylarla ilgili normal bir siteydi. Bayağı bir uğraşmıştım, kodların tamamını ASP'de kendim yazmıştım. Bazı forumlarda atıştığım birkaç faşo eleman biriki lamer bulmuşlar onlara saldırtıp duruyorlardı :) Anlamam o işlerden de pek fazla. Ama bazen terslikler seziyordum. Önlem alayım dedim. Zaten kimin nereden geldiğini falan tutuyordum. Bütün POST bilgilerini de loglamaya başladım. Elemanlar birşeyler yazıp duruyor saçma sapık baktım. Anlamadım tabi birşey. İlgisiz. Yani SQL kodları var bazılarında, bazılarında JScript kodları falan. Girdim IRC'ye. RedHack diye bir kanal vardı zamanında. Onlara dedim böyle böyle. Bunlar nedir dedim? Bunlar PHPNuke'un açıkları için kullanılan kodlar dediler :) Düşünsene. Elemanlar benim ASP'yle elle yazdığım siteye PHPNuke açıklarıyla saldırıyorlar. Daha bırak PHPNuke'ü tanımayı; ASP ne, PHP ne onu bile bilmiyorlar :) Bayağı bir gülmüştüm. Ancak trafik yaratıyorlardı. Bir de forumlara girip saçma sapan, yasadışı şeyler yazıp sitenin içine ediyorlardı. Bir de sitenin info adresini maillerinin from kısmına yazıp sağa sola provokatif, yasadışı mesajlar gönderiyorlardı.

Bir de Cold_Hackers mı ne vardı? Onların ismini kullanan biriki kişi gelmişti daha önceden. Onlar da sitenin sohbet bölümüne "Kürt halkına saldıran solcu kılığına girmiş bu ırkçı site hedefimizdir." falan yazıyorlar; bazen de siteyi ulaşılamaz hale falan getiriyorlardı. Onu da sordum IIS açıklarındandır falan demişlerdi.

Şöyle birşey söyleyim. İşin ilginç yanı neydi biliyor musun? Sitede Apo'yla ilgili bir yazı vardı. Apo'ya destek veren eski bir 68'linin bu tutumu eleştiriliyordu. Ve saldıran Türkçüler de Kürtçüler de bu yazıyı bahane göstererek saldırıyordu siteye. Birisi bu yazının "Apo'yu destekleyenleri muhattap kabul ettiğini", öbürü de bu yazıda "Kürt halkına ve önderliğine saldırı olduğunu" söylüyordu :)

Tabi site de tamamiyle kişisel bir hobiyle ve arkadaş çevresine uygun yaptığım için en sonunda bastım IIS'in STOP düğmesine konu kapandı :) Daha bilgisayarını açıp kapatamayan tipler giriyor bu hack bilmemne zırvası sitelerine (hani bizim de varya bir tane, Alevi adıyla takılıp tutunamayan :) ) iki numara öğrenip başlıyorlar sağı solu pisletmeye. Ya işi gücü bırakıp bu işlerle uğraşıp bunlara en güzel cevabı vereceksin; ya da benim gibi basacaksın STOP düğmesine :) ASP nedir, PHP nedir bilmeyen adam iki numara öğrenip Matrix edalarıyla takılıyor :)

Okurken çok güldüm aynı 'kazmalar' burayada uğruyorlar.
1 dakika evvel msn'e biri geliyor 'ben heykirim' diyor ardından 'msn şifre kırıcı' hemen peşinden 'hırsız yani', bunlara cevap bile verilmez direk blok yakışır. Bazen diyorum 12-14 yaşlarında çoçuklar ama o yaşdaki çoçuk bile öyle cahil olmaz, sosyal hayatında hep ezilen ve ezik olarak haraket eden bu şahısler internet aleminde kabadayı olarak soyuluyorlar. Cold hackers mi ney oda bi ara bu foruma girdi sanırım geldiği gibide yolladık. burdan giden elemanlar başka bir sitede 'hack' ile ilgili sitede buluşmuşlar diye duydum, hay allahım daha neler göreceğiz.. :)

ccgunal arkadaşım böyle bir paylaşım için sağol.ümit ederim ki bir çok arkadaşın işine yarayacaktır

Şimdi WEB SAYFASI nasıl tasarlanır ona bir giriş yapalım isterseniz. Söylediğimiz gibi bütün web sayfaları HTML kodları ile biçimlendirilir. Fakat günümüz teknolojisi bir web sayfası yapmak için HTML bilmeyi gerektirmez. Bu konuda bize yardımcı olan programlar vardır. Bunların en bilinenleri arasında Microsoft Frontpage ve Macromedia Dreamweaver sayılabilir. Fakat bu işi bildiğimiz MS Office paketindeki MS Word programı ile bile yapabiliriz. Öncelikle basit HTML kodlarından başlayalım. Daha sonra HTML kodlarını atlayıp tasarım programlarından bahsedelim.

HTML (HYPER TEXT MARKUP LANGUAGE): HTML dilinin yapısı çok basittir. Tag dediğimiz bloklarla biçimleme yapılır. Ayrıca derlenen bir dil de değildir. Yani yazmak, kullanmak için yeterlidir. Örneğin Notepad programını (Linux kullanıcıları da bu iş için GEDİT gibi editörleri kullanabilir) açıp KAYDET menüsünden açık sayfayı Deneme.htm ismiyle bilgisayarınızın herhangi bir yerine kaydedin (uzantının .htm veya .html olması çok faydalı olur). Ve bu dosyaya HTML kodlarımızı yazabiliriz artık. Birincisi sayfaya düz metin yazabilirsiniz. Bunlar tarayıcımızda da düz metin olarak görünecektir. Onun dışında HTML tagları < (küçüktür işareti) ve > (büyüktür işareti) arasına yazılır. Bunlar tarayıcı tarafından düz metin olarak kabul edilmez. HTML kodları blok yapısıyla çalışır. Genel yapısı:

<HTMLTAG [parametreler]>DEGER</HTMLTAG>

ÖR:
<font face="Arial">BENİM YAZIM</font>

Burada HTML'in tanıdığı <FONT> tagını kullandık. Bu tag, metinlerin yazıtipini ayarlamak için kullanılır. Burada <FONT diyerek tagı başlatmış olduk. face="Arial" ise FONT tagının parametresi oldu. Yani öncelikle yazıtipini ayarladığımız beyan ettik, daha sonra face özelliğine Arial değerini atadık. Ve > işareti ile de FONT tagının biçimlendirmesini bitirdik. Araya o özellikte görünmesini istediğimiz metini yazdıktan sonra da </font> diyerek bu bloğu tamamlamış olduk. Devamında yazacağımız satırların biçimi bu satırları dikkate almayacaktır. Yapı bu şekildedir.

Bir html sayfasının olması gereken yapısı ise şudur.

<HTML>
<HEAD>
Bu kısma sayfayı tanımlayıcı bilgiler yazılır
</HEAD>
<BODY>
Bu kısma da sayfada görünen içerik oluşturulur
</BODY>
</HTML>

Şimdi HTML dilindeki bazı taglara gözatalım:

FONT:
Yazıtipi ile ilgili özellikleri değiştirmemizi sağlar.
BAZI PARAMETRELERİ:
FACE: Yazıtipini seçmemizi sağlar (Arial, Times New Roman, Tahoma vs).
SIZE: Büyüklüğe seçmemizi sağlar (1'den 7'ye kadar değerler yazabiliriz).
COLOR: Yazıya renk vermemizi sağlar (red, blue gibi bazı renk isimleri desteklenmektedir, onun dışında #FF12AB şeklindeki renk kodları da yazılabilir).
ÖR:
<font face="Times News Roman" size="2" color="red">Merhaba Dünya</font>

IMG:
Sayfaya resim eklemek için kullanılır. Bu parametre için bitiş bloğu (</IMG>) kullanmaya gerek yoktur. Ayrıca HTML sayfaları resim barındıramaz. Sadece gerçek resme bağlanır. Yani yazdığınız yoldaki resmi bulup onu içinde gösterir. Eğer resmi silerseniz veya yolu değiştirirseniz resmi bulamadığı için gösteremez.
BAZI PARAMETRELERİ:
SRC: Sayfada gösterilecek resmin yolu ve adı belirtilir ("images/hey.gif" şeklinde)
HEIGHT: Gösterilecek resmin sayfadaki yüksekliği belirtilir.
WIDTH: Gösterilen resmin sayfadaki genişliği belirtilir.
ALIGN: Resmin nasıl hizzalanacağı belirtilir (bottom, left, middle, right, top gibi).
BORDER: Sayfanın kenarındaki çerçeve boyutu belirtilir (pixel olarak, 0 verilirse çerçeve olmaz).
HSPACE, VSPACE: Resmin kenarındaki boşlukları ayarlamak için kullanılır.
ALT: Resme açıklama yazmak için kullanılır. Bu durumda sayfamızı gezerken mouse resmin üzerinde bekletilirse bu açıklama gözükür. Veya da resim herhangi bir sebeple açılamazsa yerine bu yazı yazacaktır.
ÖR:
<IMG SRC="hey.gif" BORDER="0" WIDTH="16" HEIGHT="16" ALIGN="Left" ALT="Hey diye bir resim">

A:
Sayfaya köprü atamak için kullanılır. Yani üzerine tıklayınca başka bir sayfaya gidebilmemiz için. Web sayfalarında çokca köprü (link) görürsünüz. Bunlar bu A tagı ile oluşturulmaktadır.
BAZI PARAMETRELERİ:HREF: Köprünün hedefi. Yani üzerine tıklayınca tarayıcının açacağı sayfayı belirtir.
TARGET: Hedefi hangi pencerede açacağını belirtiriz (verilmezse aynı pencerede açar, _Blank verilirse linke tıklayınca yeni bir tarayıcı sayfası açıp o pencerede bu linki açacaktır).
ÖR:
Yeni sayfaya ulaşmak için <A HREF="yeni.htm" target="_BLANK">buraya tıklayın...</A>

B:
Kalın yazı yazdırmak için kullanılır. Herhangi bir parametreye gerek yoktur.
ÖR:
<B>Kalın yazı</B>

I:
Italik yazı yazdırmak için kullanılır.
ÖR:
<I>Italik yazı</I>

P:
Paragraf anlamına gelir.
BAZI PARAMETRELERİ:
ALIGN: Hizalamayı ayarlar (left, right, center gibi).
ÖR:
<P align="center">Ortalanmış bir paragrafımız var</P>

BR:
Normal paragraflar arasına iki birim boşluk bırakılır. Bir birim boşluk bırakarak alt satıra geçmek için bu BR tagı kullanılır.
ÖR:
1. Satır<BR>2. Satır

NOT: "<!--" ile başlayıp "-->" ile biten bölümün içindeki yazılar açıklama yazılarıdır ve tarayıcılar tarafından dikkate alınmaz.

Şimdi örnek bir HTML sayfası oluşturalım.



<HTML> <!--Web sayfasındaki HTML komutlarını başlattık-->
<HEAD> <!--Başlığı başlattık-->
<TITLE>Yeni sayfamız</TITLE> <!--Sayfamızın adını yazdık-->
</HEAD> <!--Başlık bölümünü bitirdik-->
<BODY> <!--Gövde bölümünü başlattık-->
<P align="left">
<font face="Arial" Size="3" color="Red"><B>YENİ SAYFAMIZ</B></font><BR>
<font face="Tahoma" Size="2" color="Blue"><I>Yeni bir html sayfası yarattık. Diğer sayfamıza ulaşmak için <a href="diger.htm">tıklayın...</a></I></font>
</P>
<P align="center">
<font face="Arial" size="1">Sayfa sonu</font>
</p>
</body>
</html>



---------------------------------------------------------------------------

YENİ SAYFAMIZ
Yeni bir html sayfası yarattık. Diğer sayfamıza ulaşmak için tıklayın... (http://www.aleviforum.com/diger.htm)

Sayfa sonu

---------------------------------------------------------------------------

Söylediğim gibi Web sayfası tasarlamak için HTML gerekli değildir. Ama bir bu işte profesyonelleşmek veya web programlama yapmak için HTML'i bilmek gerekir.

KOLAY WEB SAYFASI YAPMA


Evet dostlarim benimde yeni merak sardigim bir program var frontpage bu programla tabiki uzmanlik alani olanlar iyi bilir internet sayfasi yapiliyor burada yapmak istedigim bu programa benim gibi yeni merak sarmis insanlarin sorularina bi nebze olsun ceveplamak. Isterimki bu sitedeki dostlarimin hepsi kendi sayfasini yapsin yada köyünün yada ailesinin


ders 1


Merhaba bu derste FrontPage 2000 ' e giriş ve temel özelliklerini anlatacağım.
Öncelikle bilgisayarınızda FrontPage programının yüklü olması gerekmektedir.
Başlat ==> Programlar ==> FrontPage yolunu izleyerek FrontPage'i açabilirsiniz.
FrontPage programı 10 ayrı menüden oluşmaktadır.
Dosya: Çalışmakta olduğunuz projeyi daha sonra açmak üzere buradan kaydedebilirsiniz veya daha önce kaydettiğiniz sayfayı açabilirsiniz ayrıca tarayıcıda önizleme yani web sayfanızı yayınlayınca nasıl çıkacağını burdan görebilirsiniz.
Düzen: Geri al komutu ile, yanlış bir şey yapınca eski halinize dönebilirsiniz. Yineleme komutu ile de tam tersi geri aldığınız bir şeyi tekrar eski haline döndürebilirsiniz. Tümünü seç komutu ile sayfanızdaki bütün yazıları seçebilirsiniz. Bul komutu ile yazılarınızda geçen kelimeleri hızlı bir şekilde arayabilirsiniz.
Görünüm: Bu menüden sitenizin sayfa haritanızı görebilirsiniz yeni başlayanların pek işine yaramaz.
Ekle: Bu menü çok işimize yarayacak. Buradan sitemize resim, iframe (satır içi çerçeve),metin kutusu,buton gibi bir çok şey ekleyebiliriz.
Biçim: Yazı Tipleri bölümünden seçtiğiniz yazının rengini yazı tipini değiştirebilirsiniz. Paragraf kısmından seçtiğiniz paragrafın aralıklarını ayarlayabilirsiniz. Pozisyon bölümünden seçtiğiniz resmin pozisyonunu değiştirebilirsiniz. Stil sayfa bağlantıları bölümünden css (cascading style sheet) dosyalarınızı ekleyebilirsiniz.
Araçlar: Yazım kılavuzu bölümünden yazdığınız yazılarda dilbilgisi hatası var mı diye bakabilirsiniz. Seçenekler bölümünden Frontpage ayarlarını değiştirebilirsiniz.
Tablo: Sitemize bir resim veya yazı eklerken mümkünse tablo içinde eklememiz gerekir çünkü değişik ekran çözünürlüğünde veya başka bir tarayıcı ile gelen birinin ekranında yazılar ve resimler kayabilir.
Çerçeveler: Çerçeve kullanarak bir sayfa içinde 2 veya daha fazla sayfa gösterebiliriz. Buradan çerçeve özelliklerini ayarlayabilirsiniz.
Pencere: Aynı anda iki tane web sayfası açık ise buradan birbirleri arasında geçiş yapabiliriz.



ders 2


http://img510.imageshack.us/img510/5103/cimg31576ew.jpg (http://imageshack.us)

http://img488.imageshack.us/img488/4654/17wv.jpg (http://imageshack.us)


1-) Yeni bos bir sayfa acar.
2-) Kaydedilmis bir dosyayi acar.
3-) Yaptiginiz web sayfanizi hard disk`e kaydeder.
4-) Arama komutu ile sayfanizdaki yazidan bir kelimeyi bulabilir ve yenisi ile degistirebilirsiniz.
5-) Web Yayimlama, sitenizi web`e yayimlar. Bu komutu kullanmak icin once yaptiginiz sayfayi harddiske kaydetmeniz gerekir ve hostinginizin front page desteklemesi gerekir.
6-) Bolmeyi ac kapa komutu ile klasor listesini acabiliriz.
7-) Sayfanizi yazdirir.
8-) Onizleme, sitenizi kaydedince nasil gorunecegi.
9-) Yazim kilavuzu, yazdiginiz yazidaki gramer hatalarini duzeltir.
10-) Kes komutu, bir seyi tasir, kopyalama ile kes`in farki, bir seyi kopyalarsaniz o seyden iki tane olur ama kes yaparsaniz o sey eskisinden silinir ve yeni belirttiginiz yere gider.
11-) Kopyala komutu bir nesneyi, resmi, yaziyi vb. kopyalar ve sonra yapistir komutu ile yapistirilir.
12-) Kopyala veya kes komutu ile panoya aldigimiz bir seyi yapistiririz.
13-) Bicim boyacisi ile bir yazinin rengini baska bir yaziya verebilirsiniz.
14-) Geri al komutu, bazen hayatinizi kurtarabilir diyelimki yanlislikla yazinizi sildiniz, bu komut ile eski haline geri dondurebilirsiniz.
15-) Yinele komutu da Geri al komutunun tam tersi.
16-) Web Bileseni menusunden buton, sayac,kayan yazi gibi cesitli bilesenler ekleyebiliriz.
17-) Hizli bir sekilde sayfaniza tablo eklersiniz, kac tane sutun ve kac tane satir istiyorsaniz o kadar cok kare secin.
18-) Dosyadan resim ekle, sitenize resim eklemek isterseniz, bu dugme sayesinde ekleyebilirsiniz.
19-) Cizim menusunu acar,kare ok, cizgi falan cizebilirsiniz.
20-) Kopru yani bir sayfayi digerine baglama, mesela bu yaziya basinca msn.com`a gitmesini saglayabilirsiniz.
21-) Yenile, sayfadaki bilgileri yeniler.
22-) Yapilmakta olan isi durdurur.
23-) Paragraf sonlarina isaretini koyar.
24-) Front Page yardim bolumu.
25-) Baslik sitili secebilirsiniz.
26-) Yazi tipi secebilirsiniz.
27-) Yazi puntosu yani karakter buyuklugunu burdan degistirebilirsiniz.
28-) Sectiginiz yaziyi kalin yapar.
29-) Sectiginiz yaziyi italik yapar.
30-) Sectiginiz yaziyi alt cizgili yapar.
31-) Sectiginiz yaziyi sol tarafa yaslar.
32-) Sectiginiz yaziyi ortalar.
33-) Sectiginiz yaziyi sag tarafa yaslar.
34-) Sectiginiz yaziyi tam olarak yaslar.
35-) Yazi tipi boyutunu bir arttirir.
36-) Yazi tipi boyutunu bir azaltir.
37-) Numaralandirma, mesela 20 tane alt alta sayi yazacaksiniz, burdan ayarliyorsunuz her enter tusuna bastiginizda otomatik sayiyi ekliyor.
38-) Buda ayni sekilde ama burdada numara yerine sekil kullaniliyor.
39-) Yazi ve resimlerde girintiyi azaltir.
40-) Yazi ve resimlerde girintiyi arttirir.
41-) Dis kenarlik ekler.
42-) Sectiginiz yaziyi vurgulu yapar, örnek
43-) Sectiginiz yazinin rengini degistirir.
44-) x butonu calismakta oldugunuz siteyi kapatir.
45-) Bir yardim konusu girerek, yardim bolumune ulasabilirsini

ders 3



Bu derste Sayfa Özelliklerini öğreneceğiz. Sayfada boş bir yere sağ tuşla tıklıyoruz ve sayfa özellilerine basıyoruz.
Aşağıdaki gibi bir menü açılacak. Başlık bölümünde yazan "FrontPage Dersleri 2" yazısı sayfamızın başlığı olacak. İnternet Explorer ile açınca sol üst köşede FrontPage Dersleri 2 yazacak. Biraz aşağıda Arka plan sesi diye bir yazı vardır. Gözat düğmesine basarak .mid, .wav gibi müzik dosyalarını sitemize arkaplan olarak ekleyebiliriz. Yani site açılınca bizim seçtiğimiz müzik çalacak. Burada dikkat etmemiz gereken şey dosya boyutunun çok büyük olmamasıdır. Aksi takdirde sitemize gelen ziyaretçiler çok beklerler. Döngü bölümünden o müziğin kaç defa çalacağını ayarlayabiliriz. Arkaplan sekmesine geçelim. Biçimlendirme yazısının yanındaki gözat düğmesine basarak sayfamıza background yani duvarkağıdı ekleyebiliriz. Yalnız resmin siteyi kaydettiğimiz klasör ile aynı yerde olması gerekir. Hemen aşağısında renkler kısmından arkaplan rengi seçebiliriz.


http://img488.imageshack.us/img488/1452/21wi.jpg (http://imageshack.us)


ders 4



Bu derste link yani köprü yapmayı öğreteceğim. Link bir sayfayı başka bir sayfaya bağlamak demektir. Mesela aşşağıdan Ders 1 yazısına tıkladığınız zaman index.htm sayfasına gider işte buna link deniyor. Web sayfalarının uzantıları .htm veya .html olur. Boş bir sayfa açalım ve ilk deneme sayfamızı yapalım ve içine resimlerim yazın sonra onu anasayfa.html adıyla kaydedelim. Kaydetmek için dosya menüsünden kaydet yazısına basarak kaydedebilirsiniz. Şimdi düğmesine basarak yeni bir sayfa yapalım. Ve o sayfaya kendiniz hakkında yazı yazın. Resminizi eklemek isterseniz ekle menüsünden resim yazısına tıklayarak istediğiniz resmi ekleyebilirsiniz. Sonra bu sayfayı da resim.html adıyla kaydedin. Tekrar index.html dosyamızı açalım. Açmak için ikonuna tıklayın. Ve index.htm dosyasını açın. Resimler diye yazı yazmıştık onu seçin ve düğmesine tıklayın. Link vermek istediğimiz dosyayı yani resim.html dosyasını seçelim ve tamamı tıklayalım. Eğer istersek aynı şekilde bir siteye de link verebiliriz. Mesela Acemiler Team buraya tıkladığınız zaman acemiler.net sayfası açılacak. Yalnız web tasarımında dikkat etmemiz gereken bir kaç nokta var. Ana sayfamızın adı index.html olması gerekir. Ve sitemize koyduğumuz resimler aynı klasör içinde olması gerekir.
FrontPage Püfleri
• Sitenizi yayınlayınca nasıl gözükeceğine bakmak için sol alt köşeden ön izleme düğmesine basabilirsiniz.
• Siteniz kaç saniyede açılacağını sağ alt köşedeki kumbara işaretinin yanına bakarak öğrenebilirsiniz.
• Koyduğunuz resimler yazılar vs. başka ekran çözünürlüğü ile bakılınca kaymaması için yazılarınızı tablo içinde yazın ve genişliğini %100 yapın.
• Biçim menüsünden Dinamik html efektleri sayesinde bir resmin site açılınca uçarak gelmesini veya yazının üzerine gelince renk değiştirmesini sağlayabilirsiniz.
• Bir resmi istediğiniz yere koyamıyorsanız resim seçili iken biçim pozisyona tıklayın ve mutlaka basın.
• Frontpage koyduğunuz linklerin altını mavi ile çizer. Bunu html kodlarından <body> kısmına a:text-decoration:none yazarak önleyebilirsiniz.

screenshotlar fotoğraf makinesi ile çekilmiş herhalde hıhıhı...

evet ben kendim cektim yavvv bir türlü öbürlerini buraya yapistiramadimda heheee olsun ama nasil calisma yeni baslayanlar icin süper olmus degilmi

Sagolun arkadaslar, devamini bekliyoruz. Takip ediyoruz bu dersleri, devamsizlik yapmamaya gayret gösteriyoruz :))

zaten yapmasan iyi olur yoksa yil sonunda karnen zayif olursa annen baban cok kizarlar hehehe yakinda görüntülü web dersini sunacam dostum

Bu yazı burada kalmış. Buradan bir de ilgilenen arkadaşlar için Web Programlama ile ilgili birkaç şey yazayım. Tam anlamıyla giriş manasında. Programlama ile hiç uğraşmayan ama tasarımla uğraşanlar için.

WEB PROGRAMLAMAYA GİRİŞWeb Programlama deyince aklımıza aslında web sayfası yapma gelebilir. Çünkü bu iş için kullanılan HTML veya Javascript gibi diller de birer programlama dilidir. Ama bunlar çok basittir ve hiçbir programlama bilgisi olmayan kullanıcılar bile bu dilleri kullanabilir. Biz burada Server Side yani Sunucu Taraflı dillerden bahsedeceğiz. Bunlardan en bilinenleri PHP, ASP ve JSP'dir.

SUNUCU TARAFLI DİLLER NEDİR
Buraya yazdığım ilk makalelerden hatırlayacaksınız. Web sayfalarını görüntüler kullanıcının tarayıcısı karşı taraftan HTML kodlarını alır ve kendi bilgisayara kaydedip yorumlar demiştik. Yani HTML sunucuda sadece bir konuk. Bekliyor. İstek gelince de karşı tarafa gidiyor. Orada kullanıcıya gözüküp kalıyor. Dolayısıyla sadece bir gösterim aracı olarak kalıyor. Peki biz örneğin bu foruma üye oluyoruz. Üye olurken kullanıcı adımızı ve şifremizi belirliyoruz. Ve herkes bunu görüyor. Bunu HTML ile yapmak mümkün değil. Çünkü HTML serverda, yani forumun bulunduğu bilgisayarda çalışamaz. HTML ile sadece biz kendi bilgilerimizi sunucuya yollarız. Ve sunucunun da bu bilgileri alıp kullanması, yani yorumlaması gerekir. İşte sunucu tarafında bu yorumlama işini SUNUCU TARAFLI DİLLER yapar.

SUNUCU TARAFLI DİLLER NEDİR
Sunucu taraflı dillerin ilki ASP'dir. ASP kelime anlamıyla Active Server Pages yani aktif sunucu sayfaları anlamına gelir. ASP, Microsoft orjinli bir dildir ve Windows işletim sistemleri üzerindeki IIS (Internet Information Service) sunucu yazılımına göre yazılmıştır. ASP içinde aslında çeşitli dillerle yazım yapılabilir. Ama en sık kullanılananı VbScript'dir. Bunun dışında Javascript de kullanılabilir.

Diğer sunucu taraflı yazılım ise PHP'dir. Anlamı Personal Home Page yani kişisel ev sayfaları anlamına gelir (daha iyi tercüme eden etsin :)). Aslında bu alakasız ismi almasının sebebi bu dili yaratan kişinin kendi kişisel işleri için yapmış olmasıdır. Ama daha sonra yayılmış ve en çok kullanılan dillerden biri haline gelmiştir. PHP sayfaları asıl olarak Unix işletim sistemleri ve Apache server üzerinde çalıştırılır. Ama Windows+Apache veya Windows+IIS de kullanılabilmektedir. PHP'nin C'yi andıran kendine has bir dil yapısı vardır.

Bu ikisinin dışında sunucu taraflı diller de vardır. Örneği Java Server Page anlamına gelen JSP gibi. Bu dil de JAVA programlama dilini temel alan ve SUN tarafından geliştirilmiş bir dildir.

ASP ve PHP NASIL YAZILIR
Bu diller HTML kodunun arasına gömülür. Ve özel işaretlerle sunucunun bunları farketmesi sağlanır. Yani normal bir HTML sayfası düşünün. Uzantısı ise ASP ya da PHP. Sunucu, ziyaretçiden bu sayfalara istek geldiğinde uzantılarını tanıdığı için; olduğu gibi göndermeyecektir. İçinden HTML kodlarını seçerek gönderir. İşte burada sunucu yazılımının ASP ve PHP kodlarını ayırabilmesi için "<%" veya "<?" gibi simgeler kullanılır.

Örneğin;
<font color="red">CEYHUN<%response.write " Burası ASP"%></font>

Bu örnekte <% işaretiyle %> arasına yazılan response.write komutu bir ASP komutudur. Ve bir yazı yazdırmayı sağlar. Sunucu bu durumda kullanıcıya aşağıdaki HTML kodunu gönderir.

<font color="red">CEYHUN Burası ASP</font>

Yani ASP'leri seçer ve yorumlar. Yorumladıktan sonra elinde kalan HTML kodunu sunucuya gönderir.

Aynı işi PHP ile yapsaydık:
<font color="red">CEYHUN<?php echo " Burası ASP";?></font>

Gördüğünüz gibi mantık benzer ama komutlar farklıdır. Birinde <% yerine <? yazdık (istenirse PHP'de de diğeri kullanılabilir), ve response.write yerine echo yazdık. ASP ile PHP'nin mantığı benzer ama dil yapıları farklıdır. Yani VB ile Delphi ilişkisi gibi.

Burada son olarak yukarıda bahsettiğimiz bilgi gönderme alma konusunu işleyelim. Şimdi aşağıda "kayitol.htm" kullanıcının adını ve mailini yazmak için kullandığı bir sayfa olsun. "kayityap.asp" de bu bilgileri alan sayfa.

kayitol.htm

<HTML>
<HEAD>
<TITLE>KAYIT FORMU</TITLE>
</HEAD>
<BODY>
<form name="form1" method="post" action="kayityap.asp">
Adınız:<input type="text" name="ad"></input>
Mailiniz:<input type="text" name="mail"></input>
<button type="submit" name="b1">
</form>
</BODY>
</HTML>


kayityap.asp

<%
adi=request.form("ad")
maili=request.form("mail")

response.write "Adiniz: " & adi & " - Mailiniz: " & maili
%>


Burada kayityap.asp aslında bir kayit yapmıyor. Request.form vasitasiyla kendisine gösterilen iki bilgiyi alıyor ve ekrana yazıyor. Buradan bir database bağlantısı ile bunu ekran yerine sunucudaki bir database'e de yazdırabilirdik. İşte üyelik, alışveriş gibi olaylar temelde bu mantık üzerine yapılıyor.

Şimdilik yeter. Yoruldum ve işim var :)

yaw benim bu konuda biraz bilgilerim var mesela macromedia dream weaver en iyisi bu web programlarının arasında

Arkadaşlar artık CSS var. Bırakın HTML i. Alın bir css kitabı okuyun. Yüzlerce sayfayı parmağınızın ucunda oynatın... Yaşasın CSS.
Scriptleri de www.hotscripts.com
bu siteden edinin... Çok hoş dizaynlı siteler yapabilirsiniz. Kod satılarını teker teker ezberlemenin manası yok artık. Dizayn ön planda, görsellik ön planda. Dreamweaverı kurcalayın biraz. Çok kolay olduğunu göreceksiniz kodların. Gerisi sizin yaratıcılığınıza kalmış.

valla ben mynetten baska yapmasıonı bılmıyom)))

ıstersenız bakın www.alevi.sehri.com
Kısa zaman içinde ard arda mesaj yazıldığı için sistem tarafından mesajlar birleştirilmiştir (otomesajdır, Alevimen)
valla yardımcı olmak ısteyen canlarımı beklerım sewınırımdee

screenshotlar fotoğraf makinesi ile çekilmiş herhalde hıhıhı...

evet ben kendim cektim yavvv bir türlü öbürlerini buraya yapistiramadimda heheee olsun ama nasil calisma yeni baslayanlar icin süper olmus degilmi
abi sen Print Screen tuşunu bilmiyon heralde genelde her klavyede vardır.. onunla yapsan hem yorulmazsın hemde çekmiş olduğun resimler çok net çıkar:D:D

Emeğine sağlık eline sağlık ama bunu benim anlamam için önce çocukları 2 günlüğüne başka bir yere bırakmam lazım .Heceleyerek okudum ama nafile nato kafa nato mermer .

Arkadaşlar artık CSS var. Bırakın HTML i. Alın bir css kitabı okuyun. Yüzlerce sayfayı parmağınızın ucunda oynatın... Yaşasın CSS.
Scriptleri de www.hotscripts.com
bu siteden edinin... Çok hoş dizaynlı siteler yapabilirsiniz. Kod satılarını teker teker ezberlemenin manası yok artık. Dizayn ön planda, görsellik ön planda. Dreamweaverı kurcalayın biraz. Çok kolay olduğunu göreceksiniz kodların. Gerisi sizin yaratıcılığınıza kalmış.

Son günlerde CSS ile ugrasiyorum harikalar yaratıyor, oncelikle sayfada bir düzen getiriyor ve bi sürü html kodundan kurtariyor...

Menulerde de uygulaya biliyorsun. Kerata Flashtan güzel menuler cikartiyor 3-5 kodla, Ama bir dezavantajı var oda browserlerde sorun yaratiyor ie7 de güzel gözüken menu ie6 da sorun yaratiyor onuda js kod ekleyerek düzeltebiliyorsun.

Dreamwiever'de CSS var ama nasıl kullanıldığını bilimiyorum. Sanırım şablon oluyor bu CSS. Ben de size derim ki CSS olsun ama ille de SWİSH olsun. Flaşta hazırladığın siteyi hiç zorlanmadan birkaçgünlük çabayla yapabilirsiniz. Bir örnek eklemek istedim fakat SWF olduğu için sistem kabuletmedi.

HTML bilmekten zarar gelmez arkadaslar. Zaten uc bes tane tag disinda ne varki HTMLde? CSS cok kullnisli olabilir ama bir projeye basladiginiz zaman eninde sonunda o temel HTML kodlarina ihtiyaciniz olacagini gorursunuz. Tabi basladiginiz proje kapsamli bir projeyse. Sonra ASP anlatiliyor arkadaslar ama sunucu tarafli dillerde ASP bilmek artik pek fayda saglamiyor artik. Hem kodun okunabilirliligi hem de sonrada duzeltme cok zor oluyor. Zaten ASP ile yapilmis sayfalar da yeni dillerle yazilanlariyla yer degistiriliyor. ASP.NET en azindan PHP ve JSP seviyesine ulasabilmis bir dil. Bence ASP.NET daha faydali olur.