Bölümler | Kategoriler | Konular | Üye Girişi | İletişim
Html Sayfasi Hazirlama Dersleri & Web Tasarim Kodlari
7. Ders
1.7 Ekran duzenine iliskin daha cok komut:
Ornegin;
: 1 karakterlik bosluk birakmak icin kullanilir. Basit tablolar yapmak icin kullanilabilir. Ornegin:
yil ay gun
--- --- ---
8. Ders
1.8 Sayfalarda tablo kullanimi
Genel kullanim:
sutun 1 yazilari sütun 2 sütun 3.....
2.satirin 1. sütunu 2. sütunu 3. sütunu
Tablolar satirlar ve sütunlar seklinde ayrilmis hücrelerden olusuyor. Her yeni satira baslamak için etiketini, her yeni sütun için ise etiketini kullaniyoruz.
Bir örnek ile incelersek:
Bellek tipleri FPM
EDO
SDRAM
DDR RAM
RAMBus
Disk tipleri MFM/RLL
ATA IDE
ULTRA ATA
SCSI
Islemci tipleri RISC
CISC
Burada 2x3'lük bir tablo olusturduk. Tablomuz 1 pixel kalinliginda cerceveye sahip (border=1), tablo sayfada 200 pixel genisliginde yer tutacak (width=200), hücreler arasI 2 pixell bos ve 2 pixellik bir kalinlik efektimiz var (cellspacing ile cellpadding).
Örnekte hücre genisliklerin yazI uzunluguna göre otomatik ayarlanmamsI için genislikleri kendimiz belirledik (width="50%"). Bunu pixel olarak da belirlememiz mümkündü: ile.
Hücreler içindeki yazIlarIn nasIl yerlestirilecegini ise align="yer" ile belirtiyoruz. Burada "yer" yerine "top", "bottom", "left", "right" ve "center" kullanabiliriz.
Ve eger, bir hücrenin iki hücre genisliginde veya yüsekliginde olmasini istiyorsak colspan ve rowspan seçeneklerini de kullaniyoruz. Önceki örnege bir baslik ekleyecek olursak:
Bilgisayar Ana Bilesenleri
Tablolari icice de kullanmamiz mumkun. Bu sekilde bir kullanimla bir www sayfasindaki resim ve yazilari tam istedigimiz gibi konumlandirmamiz mümkün olur.
teşekkürler
sıradaki dersi alabilirmiyiz...
9. Ders
1.9 Basit bir HTML sayfasi icin gereken son noktalar
Daha once kisaca deginildigi gibi, ilk yuklenecek sayfanin adi standart olarak 'index.html' olarak belirlenmistir. Dolayisiyla ilk sayfanizi bu sekilde adlandirirsaniz;
http: //www.physics.metu.edu.tr/~filker/ilksayfa.html
yerine
http: //www.physics.metu.edu.tr/~filker/ gibi, daha kisa olan, bir adres kullanabilirsiniz.
10. Ders
2 Ileri duzey bilgilerden secmeler
2.1 Sayfalara 'meta' komutu ile kimlik vermek
Web sayfamizin FindIt, Excite, Crawler, Altavista vs. gibi tarayici programlar tarafindan icerigine uygun olarak dizinlerine aktarilmasini istiyorsak, komutunu kullanmak uygun duser. Ayrica, gene bu komut sayesinde sayfamiza baglanani bir baska www adresine yonlendirebilir, bu yolla bir takim hareketli sayfalar dahi hazirlayabiliriz.
Sayfanin kimligi:
Sayfayi tanimlamak icin uc ayri meta komutu yeterli. Bunlarla sayfa hakkinda kisa bir paragraf, anahtar sozcuk listesi, ve sayfayi hazirlayanin adini verebiliriz.
content="Bu sayfada, Tusiad raporunun universitelerde
gerceklestirdigi degisim sonucunda, universitelerin birer
"bilgili-ogretim-iscisi" makinasi durumuna gelmesi
tartisilmaktadir.">
Yukarida, sayfamizi kisaca tanitmis olduk. Bu yazi, tarama sonucunda arayan kisiye gosterilecegi icin kisa, oz, ve icerige uygun olmasi gerekir.
Tarayicilar artik sayfanin tumunde gecen sozcuklere ve bu sozcuklerle ilgili diger sozcuklere bakarak arama yapsa da, sayfanizin hangi olcutlere gore aranmasi gerektigini sizden iyi kimse bilemez. Onun icin, sayfayi tanimlayan anahtar sozcukleri de su sekilde verebiliriz:
content="universite gelecek tusiad ogrenim ogretim egitim 21. yuzyil Turkiye sermaye yonetim etki rektor ozerk">
Ve, son kimlik bilgisi olarak sayfadan sorumlu kisiyi belirtiriz:
content="Ilker Ficicilar">
Hazirladigimiz butun sayfalara bu turden kimlik vermeyi aliskanlik haline getirirsek, interneti arastirmalari icin bir kaynak olarak kullananlara epey yardim etmis oluruz.
Sayfa yonlendirme:
Eger yakinda www adresimiz gecersiz olacaksa ve, yeni bir www adresine simdiden tasinmissak, bunu kullanicalara onceden duyurmali ve onlari yeni adrese yonledirmeliyiz. Bunun icin eski sayfamizi su sekilde degistirebiliriz.:
content="3;url=http: //www.geocities.com/SiliconValley/Vista/5666/">
< br>
< br>If your browser does not direct you to the new address in 3 seconds, then please
click here.
Bu ornekte diyerek, www gosterici programina yeni bir sayfa yuklemesini istedigimizi belirtiyoruz.
Bu yuklemeyi kac saniye sonra yapmasi gerektigini '' yazisi ile belirliyoruz. Buradaki '3' yerine saniye cinsinden herhangi bir sure belirtebilirsiniz. '0' yazarsaniz, dogal olarak hemen diger sayfayi yuklemeye baslar.
Yonelinen sayfanin adresi de, ' ... content="saniye; url=http://...">
biciminde veriliyor.
Yukaridaki ornegin gerekli kismini bir daha yazarsak:
content="3;url=http: //www.geocities.com/SiliconValley/Vista/5666/">
Evet, burada kendi istegimize gore degistirecegimiz, yalnizca iki yer var: 3 sayisi ve url= isaretinden sonraki adres kismi.
Basit sayfa canlandirma
Eger, yukaridaki gibi bir 'meta' komutu iceren ardisik bir duzen iceren ayri ayri sayfalar hazirlarsak, ve 'meta' komutunun adres kismina siradaki sayfanin adresini verirsek, hayal gucumuz olcusunde hareketli sayfalar hazirlayabiliriz.
Ornegin birisi sayfamiza baglandiginda, ekranda 3 2 1 seklinde bir gerisayim gormesini ve ardindan asil sayfanin yuklenmesini istiyorsak, su sekilde sayfalar hazirlariz:
Diyelim ki, http: //www.physics.metu.edu.tr/~filker/
adresine baglanilmasini istiyoruz. Bu durumda index.html dosyasina '3' sayisini koyup bu sayfayi siradaki '2' rakamini iceren sayfaya yonlendiririz. En sonunda da hic bir yonlendirme icermeyen asil sayfamiza geliriz. Dolayisiyla, 'index.html' , 'A.html' , ' B.html' , ' asil.html' adlarinda dort sayfa hazirlamamiz yeterli olacaktir:
index.html icin:
content="1;url=http: //www.physics.metu.edu.tr/~filker/A.html">
A.html icin:
content="1;url=http: //www.physics.metu.edu.tr/~filker/B.html">
B.html icin:
content="1;url=http: //www.physics.metu.edu.tr/~filker/asil.html">
ve son olarak asil sayfamizi hazirlariz:
asil.html :
Bu sayfa 'WWW Sayfama Hos Geldiniz' yazisi icermemektedir :-) < br>
...
...
vs.
< hr>
< br>
sayfayi en son 28 Subat 2000 tarihinde guncelledim.
Biraz, zor ve yavas olsa da bu sekilde animasyonlar (canlandirma), TV yayinciligi (bir arkaplan programi ile surekli yeni resimler ve yeni bir index.html hazirlayarak), ve anlik bilgi sunumu ( borsa fiyatlari ) gerceklestirilebilir. Ama basit resim canlandirmalari icin sanirim 'animated gif' turu '.gif' dosyalari daha uygun duser.
tesekkürler
11. Ders
2.2 Resimlerde 'MAP' kullanarak yapılan web tasarımı
Map'ler bir resmin değişik yerlerine tıklandığında değişik bağların yüklenmesi veya değişik bir cgi-bin işinin yapılması olarak tanımlanır.
Burada kullanacağımız resmin '.gif' biçiminde olması gereklidir. Sayfanın içinde bu resmi tanımladığımız '
. Resmin betimi:
ISMAP, resmin bir harita olduğunu.
usemap="..." hangi usemap html kodu tanımını kullanması gerektiğini, www gösterici programına söylüyor.
. Usemap tanımı:
name ile belirttiğimiz isim '
shape belirteci ile dikdortgen, daire, ya da poligon tanımlayabiliyoruz. Dikdörtgenin koordinatlarını: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biçiminde 'coords="..." ' kısmında belirtiyoruz. 'href="..." ' bölümü ise bu dikdortgen alana tıklanıldığında neyin yüklenmesi gerektiğini söylüyor.
web sitesi alanında bir çember için X-merkez,Y-merkez,R-yarıçap biçiminde koordinat tanımlıyoruz.
www sayfası poligonu tanımlarken sırayla her bir köşenin X,Y biçiminde koordinatlarını html kodları içine giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarını saat-yönünde tanımlamamız gerektiğidir. Ayrıca poligonu kapamaya da tarayıcı programlar arasında uyumsuzluk nedeniyle dikkat etmeliyiz. Yukarıdaki üçgen örneğini incelemek aslında poligon tanımı yapabilmek için yeterli. Üçgen için dört nokta kullandık (dördüncü ilkinin dibinde). Aynı zamanda bu üçgenin X,Y betimlemeleri de saat-yönünde girilmiş (noktaları kağıt üzerinde yaklaşık olarak işaretlerseniz bu 'saat-yönü' kavramını daha iyi anlayabilirsiniz).
son olarak da '' ile resmin diger bölgelerine tıklanıldığında hiç bir sey yapılmaması gerektiğini söylüyoruz.
Evet bir 'harita' tanımı için gerekenler bu kadar.
12. Ders
2.3 Dinamik HTML ile Web Tasarımı
Aşağıdaki örnekte, mouse yazının üzerine geldiğinde, tıklamaksızın yazı değişir:
onmouseout="detay.style.display='none'">Flash Haber
Son gelen haberlere gore, Yunanistan Turkiye'ye savaş açtı...
Ayrintilar 19.30 Ana haber bülteninde
Bu kodlama işleri Dreamweaver'da filan oldukça zordur. Ama Dreamweaver yeni sürümü CS3 ile bu kodlamaları öldürmek isityor gibi. Her sürüm daha da kolaylıklar sunuyor. Bakalım ilerde neler olur...
ya öğretmenim çok hızlı geçiyoruz...ben bişi anlamadım ya :-[ :-[ :-[
çok teşekkürler
:)
İlginize teşekkür ediyorum arkadaşlar.
bilgilerin ve yardımların için çok teşekkürler
degerli kardeşim