ÇETİN OFLAMAZ

31 Aralık 2009 Perşembe

KALBİNİZDEN SEVGİYİ ASLA ÖLDÜRMEYİN

Çetin OFLAMAZ 07:25

Japonya'da yaşanmış gerçek bir olay şöyledir: Evini yeniden dekore ettirmek isteyen Japon bunun için bir duvarı yıkar. Japon evlerinde genellikle iki tahta duvar arasında çukur bir boşluk bulunur. Duvarı yıkarken, orada dışardan gelen bir çivinin ayağına battığı için sıkışmış bir kertenkele görür. Adam bunu gördüğünde kendini kötü hisseder ve aynı zamanda meraklanır da kertenkelenin ayağına çakılmış çiviyi görünce.

Muhtemelen bu çivi 10 yıl önce, ev yapılırken çakılmıştı. Peki nasıl olmuş da kertenkele bu pozisyonda, hiç kıpırdamadan 10 yıl boyunca yaşamayı başarmış ? Karanlık bir duvar boşluğunda hiç kıpırdamadan 10 yıl boyunca yaşamak çok zor olmalı.

Böylece adam çalışmayı bırakır ve kertenkeleyi izlemeye başlar. Sonra nereden çıktığını farke demediği başka bir kertenkele gelir ağzında taşıdığı yemekle... Adamı sersemletir gördüğü manzara. Bu nasıl bir sevgi? Ayağı çivilenmiş kertenkele, 10 yıldır diğer kertenkele tarafından beslenmektedir..

KALBİNİZDEN SEVGİYİ ASLA ÖLDÜRMEYİN, SİZİ SEVENLERİ ASLA TERKETMEYİN.

HERKESE MUTLU SAĞLIKLI VE BAŞARILI YILLAR DİLERİM.

CSS SCROLLBAR

Çetin OFLAMAZ 15:21

CSS SCROLL BAR ÖZELLİKLERİ

scrollbar-face-color : Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor.

scrollbar-base-color : Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor..

scrollbar-shadow-color : Sağ ve alt kenarlıkların gölge rengi.

scrollbar-highlight-color: Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.

scrollbar-arrow-color : Yön oklarının rengi.

UYGULAMA

CSS TABLO

Çetin OFLAMAZ 15:19

CSS TABLO ÖZELLİKLERİ

margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.

margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.

margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.

margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.

margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.

padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.

border-left : Tablonun sol kenarının şekillendirilmesini sağlar.

border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.

border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

border-width : Tablonun kenarlarının kalınlığını belirler.

border-top-width : Tablonun üst kenarının kalınlığını belirler.

border-right-width : Tablonun sağ kenarının kalınlığını belirler.

border-bottom-width : Tablonun alt kenarının kalınlığını belirler.

border-left-width : Tablonun sol kenarının kalınlığını belirler.

border-styleTablonun kenarlık türünü belirler.

border-top-styleTablonun üst kenarlık türünü belirler.

border-right-styleTablonun sağ kenarlık türünü belirler.

border-bottom-styleTablonun alt kenarlık türünü belirler.

border-left-styleTablonun sol kenarlık türünü belirler.

border-color : Tablonun kenarlarının rengini belirler.

border-top-color : Tablonun üst kenarının rengini belirler.

border-right-color : Tablonun sağ kenarının rengini belirler.

border-bottom-color . Tablonun alt kenarının rengini belirler.

border-left-color : Tablonun sol kenarının rengini belirler.

color : Tabloda geçen metnin rengini belirler.

width : Tablonon genişliğini belirler.

height : Tablonun yüksekliğini belirler.

clear

float

NOT : Başlık "TABLO" olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS' yi özel kılan da zaten bu...

NOT:Yukarıda görüldüğü gibi kenarlıklar istenirse tek bir paramatre ile veya daha ayrıntılı bir şekillendirme yapmak istiyorsak birden çok parametre ile şekillendirilebilir.Örneğin bütün kenarlar için aynı ayarların (Renk , kalınlık , kenarlık türü) kullanılmasını istiyorsak : " border : 1px solid black " şeklinde bir defada biçimlendirme yapabiliriz. Ayrıntılı biçimlendirme içinse üst , sağ, alt ve solun renk , kalınlık ve kenarlık türü için ayrı ayrı parametreler kullanılabilir.

UYGULAMA-1

UYGULAMA-2

CSS BACKGROUND

Çetin OFLAMAZ 15:16

CSS BACKGROUND ÖZELLİKLERİ

background-color: Zeminin rengini belirler.

#color : Renk adı.

transparent: Zeminin saydam olmasını sağlar.

background-image: Zemine resim yerleştirilmesini sağlar.

url : Zemine yerleştirilen resmin adresi.

background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.

repeat : Resmin bütün zemine yayılmasını sağlar.

repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.

repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.

no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.

background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.

scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.

fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar

background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.

top : Resmi yukarı yerleştirir.

center : Resmi ortalar.

bottom : Resmi aşağı yerleştirir.

left : Resmi sola yerleştirir.

right: Resmi sağa yerleştirir.

...px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

UYGULAMA

CSS İMLEÇ

Çetin OFLAMAZ 15:15

crosshair : İmlecin artı işareti şeklinde olmasını sağlar.

auto : İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.

default : İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını saılar.

hand : İmlecin linkte olduıu gibi el şeklinde olmasını sağlar.

move : İmlecin taşıma işareti şeklinde olmasını sağlar.

ne-resize : İmlecin sağa yatık normal ok olmasını saılar.

nw-resize : İmlecin sola yatık normal ok olmasını saılar.

se-resize : İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.

sw-resize : İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.

n-resize : İmlecin aşaığıdan yukarıya doğru ince ok şeklinde olmasını sağlar.

s-resize : İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.

w-resize : İmlecin sola doğru ince ok şeklinde olmasını sağlar.

e-resize : İmlecin sağa doğru ince ok şeklinde olmasını sağlar.

text : İmlecin hem metinde hem de boş alanda metinde olduıu gibi görünmesini saılar.

wait : İmlecin meşgul animasyonuna dönüşmesini saılar.

help : İmlecin yardım - soru işaretine dönüşüm

CSS IMLEC UYGULAMA

CSS TEXT

Çetin OFLAMAZ 15:13

CSS TEXT ÖZELLİKLERİ

word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.

letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.

text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.

underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.

overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.

line-through : Kelimenin ortasından çizili olmasını sağlar.

blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)

vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.

text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.

capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.

uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.

lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.

none : Kelimelerin orjinal metindeki gibi olmasını sağlar.

text-align: Metnin dikey olarak nasıl hizalanacağını belirler.

left : Metni sola yaslar.

right : Metni sağa yaslar.

center : Metni ortalar.

justify : Metni iki yana yaslar.

text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.

line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)

first-line : Metnin ilk satırının biçimlendirilmesini sağlar.

first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

CSS TEXT UYGULAMA-1
CSS TEXT UYGULAMA-2

CSS FONT

Çetin OFLAMAZ 15:11

CSS FONT ÖZELLİKLERİ

Font-Family: Yazı türünü belirler.(Arial , Verdana gibi.).

Font-Style: Yazının normal veya sağa eğik olmasını sağlar.

Font-Variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.

Font-Weight: Yazının kalınlık-inceliğini belirler.

Font-Size: Yazının büyüklüğünü belirler.

CSS FONT UYGULAMA

CSS KATMAN

Çetin OFLAMAZ 15:09

CSS KATMAN ÖZELLİKLERİ

position : Katmanın yerinin belirlenmesini sağlar.

absolute : Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.

relative : Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.

static : Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.

top : Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.

left : Katmanın soldan ne kadar içeride olması gerektiğini belirler.

width : Katmanın genişliğinin ne kadar olacağını belirler.

height : Katmanın yüksekliğinin ne kadar olacağını belirler.

overflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.

auto : Otomatik olarak belirlenir.

scroll : Kaydırma çubuğu ekleyerek görünmesini sağlar.

visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.

hidden : Sığmayan yerleri gizler.

visibility : Katmanın görünebilirlik ayarını yapar.

visible : Katmanın görünür olmasını sağlar.

hidden : Katmanı gizler.

z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

CSS KATMAN UYGULAMA

CSS LIST

Çetin OFLAMAZ 15:00

CSS LIST ÖZELLİKLERİ

List-style-type :

disk : Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.

circle : Liste biçiminin çember şeklinde olmasını sağlar.

square : Liste biçiminin kare olmasını sağlar.

decimal : Liste biçiminin rakamlardan oluşmasını sağlar.

lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.

upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.

lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.

upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.

none : Listenin imgesiz olmasını sağlar.

list-style-position :

inside : Listenin ikinci satırının en soldan başlamasını sağlar.

Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.

list-style-image : Liste biçiminin resim olmasını sağlar.

CSS LIST UYGULAMA

CSS Link Uygulaması

Çetin OFLAMAZ 14:55

ornek link

Code:
a:hover {
color:#1E90FF;
background-color :#1E90FF;
text-decoration :none;}

ornek Link
Code:
a:hover {
background-color : #1E90FF;
text-decoration :none;}

ornek Link

Code:
a:hover {
background-color :#1E90FF;
text-decoration :underline;}

NOT:Alternatifleri için bkz. :Text/text-decoration

ornek Link

Code:
a:hover {
background-color :#1E90FF;
color:BLACK;
border:double black;
text-decoration :none;}

NOT:Kenarlık türünün alternatifleri için bkz. :Font/border-style
Kenarlık kalınlığının alternatifleri için bkz. :Font/border-width

ornek Link...

Code:
a:hover {
background-color : #1E90FF;
display : block;
color : black;
text-decoration :none;}

ornek Link

Code:
a:hover {
background-image : url(images/a.jpg);
color :#800000;}

NOT:Zemin resmi olarak hareketli veya hareketsiz resim kullanılabilir.

**** ornek Link****

Code:
a:hover {
background-color : #DAA520;
float : right;}

ornek Link
Code:
a:hover { background-color : #D7DFDD;
text-transform : uppercase;
font-weight : bold;}

ornek Link
Code:
a:hover {zoom:150%;
font-weight : bold;}

ornek Link
Code:
a.css-ornek10{ color:BLACK; height :12px;line-height:14px; border-bottom-style : solid; border-bottom-color : red; border-bottom-width :1px;}
a:hover.css-ornek10{background-color : yellow; color:BLACK;height : 12px;line-height:14px;text-decoration :none; border-bottom-style : solid;border-bottom-color : red; border-bottom-width :1px;}

Css Link Uygulaması-2

CSS Link

Çetin OFLAMAZ 14:54

CSS LİNK ÖZELLİKLERİ

a : Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.

a:hover : Linkin imleç üzerine getirildiğindeki durumudur.

a:active : Linkin tıklandığı andaki durumudur.

a:visited : Linkin tıklandıktan sonraki durumudur.

BİÇİMLENDİRME:

color : Linkin rengini belirler.

background-color : Linkin zemin rengini belirler.

background-image : Linkin zeminine resim ekler(Bu animated-gif de olabilir.)

text-decoration : Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.

font-weight : Yazının kalınlık veya inceliğini belirler.

border : Linkin etrafına kenarlık ekler.

display : Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

NOT : Yukarıda kullanılabilecek birkaç parametre örnek verilmiştir.Ancak "font" , "text" , table" vs. için kullanılabilen pek çok parametre "a" için de kullanılabilir.Gerisi biraz da insanın yaratıcılığına kalıyor.

CSS Birimler

Çetin OFLAMAZ 14:51

color Birimleri:

#000000

R%,G%,B%

Renk adi

Uzunluk Birimleri:

em

ex

px

in

cm

mm

pt

pc

CSS Parametreler

Çetin OFLAMAZ 14:51

CSS PARAMETRELER

LINK

LIST

display

white-space(N)

list-style-type

list-style-image

list-style-position

list-style

KATMAN

left

width

height

position

visibility

overflow

z-index

clip

FONT

font-family

font-style

font-variant

font-weight

font-size

font

METIN

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

text-align

text-indent

line-height

first-line

first-letter

IMLEÇ

corsor

BACKGROUND

background-color

background-image

background-repeat

background-attachment

background

background-position

TABLO

color

margin

margin-top

margin-right

margin-bottom

margin-left

padding

padding-top

padding-right

padding-bottom

padding-left

border

border-width

border-top-width

border-right-width

border-bottom-width

border-left-width

border-color

border-top-color

border-right-color

border-bottom-color

border-left-color

border-style

border-top-style

border-right-style

border-bottom-style

border-left-style

border-top

border-right

border-bottom

border-left

width

height

clear

float

SCROLL BAR

scroll

CSS Giriş

Çetin OFLAMAZ 14:50

YERLEŞTİRİLMESİ :

Dışarıda ayrı bir dosya olarak kullanılması: Bu da iki şekilde olabilir:
- Style özelliklerini bir metin editörüyle yazdıktan sonra *.css uzantısıyla kaydederiz ve sayfamızın "head" bölümünde bu dosyaya bir baglantı kurarız.
 
 Örnek:
 < html >
 < head >
 < link type="text/css" rel="stylesheet" href="style/css.css" >
 < /head >
- Aynı şekilde bir css dosyası oluştururuz.Dışardaki bu dosyaya da yine "head" bölümünde aşagıdaki gibi bir baglantı kurarız.
 
 Örnek:
 < html >
 < head >
 < style > @import url(style.css); < /style >
 < /head >
Sayfanın "head" bölümüne yerleştirilmesi : Hazırladıgımız style özelliklerini sayfanın "head" bölümüne örnekte oldugu gibi yerleştirebiliriz.

Örnek:
< html >
< head >
< style >
P { font-family:arial; font-size:12px; }
< /style >
< /head >
Style özelliklerinin etiketin içine yerleştirilmesi : Bu durumda etiketin içine diger parametreler gibi yerleştirilir.

Örnek :
...

YAPISI :

ılk iki durumda style'in yapısı şöyledir:

NOT : < !-- ve -- > etiketleri style özelliklerini CSS'yi desteklemeyen tarayıcılardan saklamaya yarar.

Üçüncü durumda style özelliklerinin yazımı aynı olsa da "< style > < !--" ve "-- > < /style >" etiketleri kullanılmaz.Parametre ve degerler ilgili etiketin içinde ve style="..." parametresinin içine yazılır.

KULLANILMASI :

Genel Biçimlendirme : Sayfada geçen bir etiketin her yerde aynı nitelikleri taşımasını istedigimizde bu metodu kullanırız.

Örnek:
P { font-family:arial; font-size:12px;font-color:black; }
Seçerek Biçimlendirme : Bir etiketin farklı yerlerde farklı niteliklere sahip olmasını istedigimizde bu metodu kullanabiliriz.Bu da şu şekillerde olabilir:
- .isim : Bu metodla sayfa içinde kullanılan her etiket için birden fazla farklı biçimlendirme yapılabilir.Bu durumda seçilen etikete class="isim" parametresini eklemeliyiz.
 
 Örnek :
 .italik { font-style : italic; }
 Deneme
 
 veya
 
 P.italik { font-style : italic; }
 Deneme 
- #isim : Yukardakine benzemekle birlikte style bölümünde öncesinde etiket kullanılmaması ile ondan ayrılır.Ayrıca ilişkilendirilen etiket ile kullanılırken de class yerine id="isim" kullanılır.
 
 Örnek :
 # italik { font-style : italic; }
 Deneme
- etiket+etiket : ıçiçe etiket kullandıgımızda ikinci etiketin etki alanını birincisinden farklı biçimlendirebiliriz.
 
 Örnek:
 P { color : black; }
 P B { color : red; }
 Deneme Deneme Deneme 
 
 Bu durumda P etiketi içerisinde, B etiketinin etkiledigi alanlardaki karakterler kırmızı olurken kalan alanlar ise siyah olacaktır.

NİÇİN CSS ?

Çetin OFLAMAZ 14:44

Gerçekte web tasarımına ilgi duyanlar için CSS yi cazip kılacak pek çok gerekçe var:

1-) Daha çok yetenek : CSS , sayfaya HTML ile verilemeyen pek çok niteliği kazandy'rabiliyor.Örne?in görsellik bakımından A etiketine HTML ile kazandırılabilecek tek nitelik yazının normalde , aktif iken ve ziyaret edildikten sonraki yazı rengini belirleyebilmekten ibaret olduğu halde CSS ile sanki tabloymuş gibi kenarlık eklenebiliyor , bu kenarlıklar tek tek şekillendirilip renklendirilebiliyor , zeminine renk veya resim eklenebiliyor , rollover efectleri hazırlanabiliyor , yazıya zoom yapılabiliyor vs.

2-) Daha az emek ve zaman : CSS ile sadece sayfa içinde değil tüm sitedeki etiketler tek bir komut kullanılarak biçilendirilebilir.Örneğin kullandığımız tüm başlıkların aynı biçimde olmasını istiyorsak her sayfanın "head" bölümüne başlığın şekillendirildiği .css uzantılı dosyaya link koyarak sitedeki tüm başlıkları şekillendirebiliriz.

3-) Daha az boyut : Yukarıda söylediğimiz bu imkan her etiketi her defasında ayrı ayrı şekillendirmekten bizi kurtardığı için sayfanın boyutunun azalmasına da yardımcı olur.

HTML'de Kullanılan Teknolojiler

Çetin OFLAMAZ 09:45

                 Java
                 CGI (Common Gateway Interface)
                 VBScript (Visual Basic Script)

Java

      Java, Sun Microsystems firması tarafından 1991 yılında geliştirilmiş nesneye yönelik bir programlama dilidir. Java, temel veri tiplerini, giriş çıkış fonksiyonlarını ve diğer fonksiyonları içeren sınıf kütüphanesine sahiptir. Bu programlama dili aynı zamanda internet protokollerinin çoğunu destekleyen fonksiyonlara da sahiptir. Java çok fazla komut içermemesine rağmen, uygun komutları bünyesinde barındırdığı için, güçlü bir dil olarak kabul edilmiştir. Java programlama dili, geliştirilirken C ve C++ dillerini kendine baz almıştır.

Java ile yazılan bir programın çalıştırılabilmesi için, iki aşamadan geçirilmesi gerekmektedir. Birinci aşama programın derlenmesi aşamasıdır. Programın Java derleyicisi ile derlenmesi sonucunda, byte kod (Java binary kod) denilen makina koduna yakın, fakat işlemciye özel olmayan kod oluşturulur. İkinci aşama ise, programın byte kodunun bir byte kod yorumlayıcısından geçirilmesi aşamasıdır. Byte kod yorumlayıcısı programın çalışmasını sağlar. Java’ nın bu özellii ona hem avantaj hem dezavantaj getirir. Derlendikten sonra işlemciye özel kod üretilmemesi sayesinde Java sistemden bağımsızdır, üzerinde Java yorumlayıcısı bulunduran herhangi bir sistemde çalışır. Fakat, bir Java yorumlayıcı programı yürüttüğü için, işletim hızı da yavaşlar.

Java’ da program yazabilmek için bir Java Geliştirme Kiti (JDK) gereklidir. Herhangi bir editörde (Unix için pine, vi; DOS altında MSDOS Edit vb…) yazılıp, *.java uzantılı kaydedilen Java programı dosyası, JDK’ de komut satırına javac dosya_ismi yazılıp derlenir. Bu işlem sonucunda dosya_ismi .class dosyası oluşur. (Byte kod dosyası) JDK’ den java yorumlayıcısı çağırılarak, programın çalıştırılması istenirse, komut satırına java dosya_ismi yazılır.

Java dili ile yazılan programları, Java uygulamaları ve Java appletleri olmak üzere iki ana grupta toplayabiliriz. Java uygulaması, herhangi bir probleme çözüm getirmek amacıyla, Java dili ile yazılmış bir programdır. Örneğin; ekrana “Ben Java öğreniyorum!” çıktısını veren bir program yazalım:

Class JavaOgreniyorum {

public static void main(String args[]){

System.out.printIn(“Ben Java öğreniyorum!”);

}

}

Bu programı bir editörde yazıp, genelde sınıfa verdiğimiz isi dosya ismine de verip, kodu JavaOgreniyorum.java olarak kaydederiz. Daha sonra yukarıda açıklandığı gibi, JDK’ de derlemek için komut satırına javac JavaOgreniyorum yazıp, JavaOgreniyorum.class dosyasının oluşmasını sağlarız. Programın çalışması için de java JavaOgreniyorum komut satırını yazarız.

Java appleti ise, Java desteğine sahip bir listeleyicide (browserda) görüntülenen Web sayfaları içerisinden çalıştırılabilen programlardır. Bir Java appleti imajlara benzer, fakat, dinamik ve interaktif olmasıyla farklılaşır. Bir Web sayfasına java appleti bağlamak için, önce Java dili ile program yazılıp derlenir. Sonra HTML ile hazırlanmış Web sayfasında bu dosya referans olarak gösterilir. HTML dosyası ile applet dosyasının aynı dizinde olması tavsiye edilir. (bir HTML dosyası ile o sayfada kullanılan imaj dosyası gibi) Web sayfası yüklendiğinde Web listeleyicisinde (browserında) gömülü olan Java yorumlayıcısı sayfadaki appletleri çalıştırmaya başlar. Appletlerin Web sayfasında çalışması için, kullanılan listeleyicinin Java desteğine sahip olması gerekmektedir. Bu amaçla geliştirilen ilk listeleyici (browser), HotJava olup (HotJava Java dili ile yazılmıştır.), daha sonra diğer Web listeleyecilerinin de Java’ yı destekleyen yeni sürümleri çıkartılmıştır. (Örneğin, Netscape 2.0 gibi)

Şimdi deminkine benzer bir Java appleti yazmayı ve bunu bir Web sayfasına bağlamayı deneyelim:

import java.awt.Graphics;

public class JavaOgreniyorumApplet extends java.applet.Applet{

public void paint (Graphics g){

g.drawstring(“Ben Java öğreniyorum!”, 5, 25);

}

}

Burada import komutu da applet’ in JDK içindeki sınıflara erişimini sağlar.

Bu applet dosyası da deminki Java programına benzer biçimde, bir editörde yazıldıktan sonra ait olduğu sınıf ismi dosya ismi olarak verilip JavaOgreniyorumApplet.java şeklinde kaydedilir. JDK’ de javac JavaOgreniyorumApplet komut satırı yazılıp, programın derlenmesi sağlanır. Daha sonra oluşturulan byte kodun çalışması için, java JavaOgreniyorumApplet komut satırı yazılır.

HTML Komutları

Çetin OFLAMAZ 09:44

Bir HTML dökümanının genel olarak görünümü aşağıdaki gibidir:

< HTML > ..........Html programının başlangıç komutudur.

< HEAD > ..........Bu alanda yazılan bilgiler Web sayfasında görüntülenmezler. Burada sayfa başlığı, anahtar kelime tanımlamaları, sayfa içerisinde kullanılan karakter bilgisi (dil, code page) gibi sayfanın doğrudan kendisine ilişkin tanımlamalar yapılır.

< /HEAD >

< BODY >

..........Sayfa üzerinde görülmesi istenen herşey bu bölümde yazılır. Hazırlanan dökümanın başlangıç ve bitiş bloğu gibidir.

< /BODY >

< /HTML > ..........Html programının bitiş komutudur.

Yukarıda da görüldüğü gibi HTML komutları (belirteçleri) < > işaretleri arasına yazılırlar ve genelde her HTML belirtecinin / ile başlayan bir çifti vardır. Belirteçlerin çiftler halinde bulunması; söz konusu belirtecin sağladığı özelliğin sadece belirteç çifti arasına yazılan yazılara etki edeceğini ifade eder. Bir belirtece ait birden çok seçenek bulunabilir ve belirteçler seçeneklerle kullanıldığı zaman, bu seçeneklerin bir de değeri bulunur.

HTML, büyük harf küçük harf duyarlılığı olmayan bir dildir. Fakat okunabilirliği artırmak için, HTML belirteçlerinin büyük harf ile yazılması bir alışkanlıktır. Bir HTML dökümanı ile ilgili verilen bu genel bilgiler, ileride verilecek komutların kullanımının anlaşılması ve örneklerin incelenmesinden sonra, daha iyi anlamlandırılacaktır.

1.4.1. < HEAD > .......... < /HEAD > Arasında Kullanılan Komutlar

< TITLE > .......... < /TITLE > belirteç çifti: Bu belirteç çifti arasına browser' ın (listeleyici) başlık çubuğunda görülecek olan sayfanın başlığı yazılır.

< META > belirteci: Bu belirteç ile kullanılabilen birçok seçenek vardır. Örneğin bir kullanımı, bu belirteç ile sayfanızın içeriğini yansıtan bazı anahtar kelimeler ve tanımlamalar verilmesidir. Web üzerinde arama yapan arama motorları sayfaların meta belirteçlerine bakarak gruplandırma yaparlar. Bununla ilgili aşağıdaki örnekleri inceleyiniz.

< META NAME="Description" CONTENT="HTML öğrenmek için yararlı bilgiler" >

< META NAME="Keywords" CONTENT="html, htm, web sayfası" >

< META NAME="Author" CONTENT="Ozge Donmezer" >

Başka bir kullanım, sayfadaki yazıların hangi dil ailesine ait karakterlerle yazıldığını belirtmek içindir. Yine aşağıda bunula ilgili bir örnek verilmiştir.

< META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8858-9" > (Türkçe' nin dahil olduğu dil ailesine ait standard tanımlaması iso-8859-9' dur.)

1.4.2. < BODY > .......... < /BODY > Arasında Kullanılan Komutlar

Her türlü yazı, formatlama bilgileri bu bölüme girdiğinden, bir HTML dökümanının esas kısmını da bu bölüm oluşturduğundan, bu bölümde oldukça fazla sayıda komuttan söz edilecektir. Bu komutlar belirli bir mantık sırasına göre verilecektir.

< BODY BGCOLOR=& TEXT=& LINK=& ALINK=& VLINK=& >

RRGGBB ile temsil edilen hexadecimal bir sayıdır. (R= Red, G= Green, B= Blue) Bu yöntem kullanılarak değişik renkler elde edilebilir. Pek tercih edilmemekle birlikte sayı yerine doğrudan renk isimleri de verilebilir (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow ). Bgcolor seçeneği, sayfanın zemininin, text, sayfa içindeki yazıların, link, bağlantı yazılarının, alink, aktif durumdaki bağlantı yazılarının, vlink, ziyaret edilmiş bağlantıların renklerini vermemiz için kullanılır.

Sayfanın zemin rengini tek renk vermek yerine, fona bir background resmi de koyabiliriz. < BODY BACKGROUND=”image_URL”

Sayfa kenarları ayarlamaları da aşağıdaki şekilde yapılır:

< BODY LEFTMARGIN=& TOPMARGIN=& >

& marjin miktarını temsil etmektedir. Leftmarjin seçeneği sol kenarı, Topmarjin üst kenarı ayarlamamızı sağlar.Bir döküman içerisindeki yazılardan istediğimiz kısmının font özelliklerini belirlemek için font belirteci değişik seçeneklerle kullanılır:

 Font büyüklüğü belirlenecek yazı 

1’ den 7’ ye kadar değişebilir. Sayıyı artırdıkça, belirteç çifti arasına yazdığımız yazının büyüklüğü de artar.

 Font rengi belirlenecek yazı 

& yerine yine altı basamaklı hexadecimal sayılar kullanarak ya da doğrudan renk ismini vererek, ayarlamamızı yaparız.

 Karakter şekli belirlenecek yazı 

& yerine istediğimiz karakter tiplerinden birini yazabiliriz. (Örneğin; Times New Roman, Arial gibi…)

Döküman içindeki yazılardan istediğimiz bir kısmına kalın, italik, altı çizgili vb özellikleri verebiliriz:

 Kalın yapılacak yazı 

 İtalik yapılacak yazı 

 Altı çizili yapılacak yazı 

 Satırın biraz üst tarafında görünmesini istediğimiz yazı 

 Satırın biraz alt tarafında görünmesini istediğimiz yazı 

< STRIKE > Üstü çizili yapılacak yazı < /STRIKE >

HTML dökümanımızda paragraf başı yapmak, sadece alt satıra geçmek ya da bir kısım yazıyı tek bir satırda yazmak istediğimiz zaman aşağıdaki balirteçleri kullanmalıyız.
 …...Yeni bir paragraf yapmak istediğimiz zaman

kullandığımız bu belirteç, çiftiyle birlikte kullanılmaz. Okunabilirliği artırmak için, genelde satırın sonunda kullanılır. Bir satır boşluk bırakır.

 …..Bir alt satıra geçmek için kullanılan bu belirtecin de çifti yoktur. Bu belirteç bir satır boşluk bırakmadan, bir alt satıra geçer.

 Hep aynı satırda yer almasını istediğimiz yazı ….. Bu belirteç, çiftiyle birlikte kullanılır ve belirteç çifti arasına yazdığımız yazı, bir satırda görüntülenir.

Döküman içinde kullanacağımız başlık formatlarını ayarlamak için kullanacağımız belirteç ise aşağıda gösterilmiştir:

< H& > Başlık < H& > …..Bu belirteç çifti arasına da kullanacağımız başlığı yazarız. &, 1’ den 6’ ya kadar değişebilen bir sayıyı temsil eder. Sayı büyüdükçe, başlığın ebatları da küçülür.

Başlığı sağa, sola yaslamak ya da sayfanın tam ortasında bulunmasını sağlamak için < H& > belirteci ALIGN seçeneğiyle kullanılır.

< H& ALIGN=# > Sağa, sola ya da ortaya yaslayacağımız başlık < /H >

& yerine 1’ den 6’ ya kadar bir sayı, # yerine de left, right ya da center gelmelidir.

Bir paragrafı olduğu gibi sağa, sola ya da ortaya yaslamak istedimiz zaman da belirtecini çiftiyle beraber benzer şekilde ALIGN seçeneği ile kullanmalıyız.

 Sağa, sola ya da ortaya yaslayacağımız paragraf 

# = left, right ya da center

Hazırladığımız dökümanda kullanmak istediğimiz özel karakter stilleri olabilir.Örneğin bir yerden alıntı yapmak istediğimizde, alıntı yaptığımız yazıların biraz eğik (italik gibi) görünmesini isteyebiliriz. Ya da bazı vurguladığımız kısımların daha çok göze çarpmasını isteyebiliriz. HTML’ de bu gibi özellikleri sağlayan belirteçler de vardır. Aşağıda bunlar verilecektir:

 Önemli bir yazı …..Bu belirteç vurguyu belirtmek için kullanılır. (Dışarıya biraz eğik çıkar.)

 Çok önemli bir yazı .…Bu belirteç çifti güçlü vurguyu belirtir. (Dışarıya biraz koyu çıkar.)

< CODE > Yazılar yazılar < /CODE > …..Bu belirteç çifti yasa, kural belirten yazılar için kullanılır.

< SAMP > Örnek < /SAMP > …..Örnek çıktı

< VAR > Değişken, emin değil < /VAR > …..Değişken, karasız

< DFN > Tanımlama < /DFN > …..Bu belirteç çifti tanımlama belirten yazılar için kullanılır. (Dışarıya hafif eğik çıkar.)

< CITE > Alıntı < /CITE > …..Bu belirteç çifti alıntı yazılar için kullanılır.

 Küçük yazı …..Bu belirteç çifti arasında yazılan yazılar dışarıya çok küçük çıkar.

< BIG > Büyük yazı < /BIG > …..Bu belirteç çifti arasında yazılan yazılar dışarıya çok büyük çıkar.

< ADDRESS > Yazarın Adresi < /ADDRESS > …..Bu format yazarın adresini yazmak içindir.

İçeriden başla
…..Bu belirteç çifti arasına yazılan yazı sayfanın hem sağından hem solundan içeriye kayar.

< DIV ALIGN=LEFT|CENTER|RIGHT > Herhangi bir yazı ya da yazı grubu < /DIV > …..Bu belirteç çifti herhangi bir yazı ya da yazı grubunun sağa, sola ya da ortaya yaslanmasını sağlar.

< CENTER > Ortalanacak yazı < /CENTER > …..Bu belirteç çifti yazı ve resimleri sayfada ortalar.

< PRE > Formatlı metin < /PRE > …..Bu belirteçler arasına yazılan her şey, yazıldığı gibi ekrana çıkar. Boşluklar, tab' lar, satır bölmeleri vb korunur.

< BLINK > Yanıp sönen yazı < /BLINK > …..Bu belirteç çifti arasına yazılan yazılar dışarı çıktıklarında bir yanıp bir sönen şekilde görünürler.

Sayfamızda herhangi bir yere değişik boyutlarda çizgi çizmek isteyebiliriz.

Bunu < HR > belirteciyle yaparız. Boyutlarını ayarladığımız seçenekleriyle birlikte kullanımı aşağıdaki gibidir.

< HR SIZE=# WIDTH=# ALIGN=# > …..Çizginin uzunluğunu ayarlamak için kullandığımız WIDTH seçeneğini WIDTH=50% şeklinde de kullanabiliriz. Örneğin; bizim kullanımımız sayfanın %50’ si, yani yarısı uzunluğunda bir çizgi çizmek istediğimizi belirtir.

Sayfamızdan yapacağımız bağlantılara gelince; öncelikle Internet üzerindeki herhangi bir makinadaki bir dökümana bağlantı yapmaya bakalım:

< A HREF=”URL_adresi” > Buraya tıklayınız < /A > …..Web sayfanızda “Buraya tıklayınız” yazısı çıkacaktır ve bu yazı bir link görünümünü almıştır. Üzerine tıkladığınızda yazdığınız URL adresine ulaşırsınız. URL adresi aşağıdaki gibidir.

< servis >://< adres >[:port_numarası]/< dizin >/dosya_adı

< servis > yerine webin dışında diğer internet servislerini sağlayan prottokolleri de yazabilirsiniz. Eğer, bulunduğunuz dizinde bir dökümana bağlantı yapmak istiyorsanız, sadece dökümanın adını yazmanız yeterlidir. Kendi makinanızda fakat başka bir dizin altındaki bir dökümana bağlantı yapmak için, dizin ismini ve döküman ismini yazmalısınız.

< A HREF=”fotograflarim\uzgun.gif” > buraya tıklayınız < /A >

Aynı dökümanın içinde bir yere bağlantı yapmak istiyorsak o zaman şöyle demeliyiz:

< A HREF=”#name” > buraya tıklayınız < /A >

Gitmek istediğiniz yerin HTML kodunu ise şöyle yazmalısınız:

< A NAME=”name” >< /A > Buraya hoşgeldiniz.

“name” burada sizin tespit edeceğiniz herhangi bir isim olabilir. (Örneğin 1. Bölüme gitmek istiyorsanız, name yerine 1, aynı şekilde 1. Bölümün bulunduğu yere de name olarak 1 yazmalısınız.)

Başka bir dökümanın bir parçasına gitmek istiyorsanız, < A HREF=”URL#name” > hedef < /A > yazmalısınız. Tabii gideceğiniz döküman parçasının başında da < A NAME=”name” >< /A > yazmalıdır.

HTML dökümanınız içinde bir resim dosyasını da bağlantı elemanı olarak kullanabilirsiniz. Örneğin;

Bana mail göndermek için zarfın üzerini tıklayın< A HREF=mailto:rovelver21@mynet.com> < /A > ……Bu dışarıya şöyle çıkar:

Bana mail göndermek için zarfın üzerini tıklayın ZARF RESMI

Eğer bağlantı yapılacak olan, bir dosyaysa, o dosyanın türü önemlidir. Dosyanın türü, Web sunucusu ve sizin Web istemciniz tarafından bilinen bir dosya türüyse (TXT, GIF, JPG, JPEG, PNG, XBM) bağlantı yazısının üzerine tıkladığınızda dosya açılır. Eğer ilgili dosya bilinmeyen bir dosya türüyse, o zaman bu bağlantı tıklandığında, web istemcisi o dosyayı "diske saklamak" ya da bir uygulama programıyla açmak şeklinde iki seçenek sunar. Bazı dosya tipleri ise, web istemcilerine yüklenen yardımcı "plug-in" ler ile işlenebilir. Bunlardan en popülerleri ses formatları (AU, WAV, MID); video formatları (RM, MOV, AVI) ve bazı özel tipte dosyalardır (AutoCAD çizim dosyaları gibi).

Kayan yazı görüntüsü elde edebilmek için kullanılacak olan belirteç çifti ... ‘dir.

< MARQUEE > Kayan yazı < /MARQUEE > …..Bu belirteçler arasındaki yazı dışarıya kayan şekilde çıkar:

Bu belirteç çiftinin beraber kullanıldığı seçenekler aşağıda verilmiştir:

< MARQUEE SCROLLAMOUNT=# > Kayan yazı < /MARQUEE > …..# burada kayma hızını belirten bir sayıdır.

< MARQUEE SCROLLDELAY=# SCROLLAMOUNT=# > Kayan yazı < /MARQUEE > …..Scrolldelay seçeneği yazının hangi aralıklarla bekletileceğini belirten bir sayıdır.

Kayan yazının büyüklüğünü, genişliğini ayarlayabiliriz. Align seçeneği ise, top, middle ve bottom değerlerini alabilir.



< MARQUEE ALIGN=# WIDTH=# > Kayan yazı < /MARQUEE >



Merhaba!

Kayan yazının arkaplan rengini bgcolor seçeneği ile aşağıdaki gibi verebiliriz.

< MARQUEE BGCOLOR=# >Kayan yazı < /MARQUEE >

< height=# width=# > ANLAMLARINI

< hspace=# vspace=# > ANLAYAMADIM…

Listeler de incelenmesi gereken önemli bir konudur. Listeleri dört grupta inceleyebiliriz.

1- Sırasız (Unordered) Listeler: Bir seçenek belirtilmezse, siyah noktalı listeler oluşturur.

< UL >

< LI > Win 98

< LI > Win NT

< /UL >

Win 98

Win NT

Fakat, siyah nokta yerine, içi boş daire ya da kare şekli çıkarmak ta mümkündür. Bunun için kullanılması gerekli seçenek TYPE seçeneğidir. TYPE seçeneğinin alabileceği değerler disc, circle ve square’ dir.

2- Sıralı (Ordered) Listeler: Bir seçenek belirtilmezse, 1, 2, 3 … numaralı listeler oluşturur.

< OL >

< LI > Win 98

< LI > Win NT

< /OL >

Win98

WinNT

Burada da type seçeneğini kullanarak değişik sıralı listeler yaratmak mümkün olur.

< LI TYPE= # > # = A, a, I, i, 1

3-Açıklamalı Listeler:

< DL COMPACT >

< DT > Win98

< DD > Bir işletim sistemidir.

< DT > WinNT

< DD > Arayüzü Windows 95’ e çok benzeyen bir işletim sistemidir.

< /DL >

Win98

Bir işletim sistemidir.

WinNT

Arayüzü Windows 95’ e çok benzeyen bir işletim sistemidir.

4-İçiçe Listeler:

Tüm liste çeşitleri, 3'den fazla bölüm kullanmadıkça içiçe yazılabilir. Örnek olarak;

< UL >

< LI > İzmir’ deki üniversiteler

< UL >

< LI > Ege Üniversitesi

< LI > Dokuz Eylül Üniversitesi

< /UL >

< LI > Ankara' nın belli başlı üniversiteleri

< UL >

< LI > ODTÜ

< LI > Hacettepe

< /UL >

Ekrandaki görüntüsü,

•İzmir’ deki üniversiteler

•Ege Üniversitesi

•Dokuz Eylül Üniversitesi

•Ankara'nın belli başlı üniversiteleri

•ODTÜ

•Hacettepe

Web’ in ortak dili HTML kullanılarak hazırlanan sayfalarda, tablo ve form konuları da oldukça önmelidir. Fakat, burada amaç, tüm HTML komutlarını vermek değil, HTML dilinin temel mantığını anlatmak olduğu için, bu konulardan bahsedilmeyecektir.

HTML Editörleri

Çetin OFLAMAZ 09:33

HTML kodları herhangi bir editörde yazılabilir. Örneğin; bu iş için Unix üzerinde pico, vi; DOS altında MSDOS Edit, Windows textpad ya da herhangi bir metin editörü kullanılabilir. Fakat, HTML komutlarını hatırlamak, iyi bir programcı için bile güç bir iş olduğu için, tüm HTML konutlarını hatırlamamıza gerek bırakmayan özel HTML editörleri geliştirilmiştir. HTML editörleri çok yararlı programlardır. Birçok işi görsel menüler yardımıyla kolaylıkla yapabilmemizi sağlarlar, fakat, sayfamızda yapmak istediğimiz birtakım şeylere editörün özellikleri izin vermezse, o zaman HTML koduna müdahale etmemiz, yapmak istediğimiz şeyi HTML komutlarını kullanarak gerçekleştirmemiz gerekir. Ayrıca, Java Appletleri ve bazı CGI teknikleri ekleyebilmek için de sayfamızın HTML formatıyla uğraşmamız gerekir. HTML Editörlerini kabaca iki gruba ayırabiliriz.

1) Bu gruba giren editörler, HTML komutlarını menüler ya da bazı butonlar yardımıyla döküman içine yazmanızı, ilgili ortamlari kolayca olusturmanizi saglar. Bu editörlerden bazilari, yazdiginiz HTML kodunun sonuçlarını bir "preview" pencereden görmenizi saglarlar. Hemen hepsi, tüm HTML belirteç ve komutlarının anlatıldığı yardım dosyaları sunarlar. Bu tip editörlerin hemen hepsi, kolay web sayfası hazırlama sihirbazları (wizard) sunarlar. Böylece, bazı boşlukları doldurarak basit bir web sayfasını kolayca oluşturabilirsiniz. Ayrıca, hemen hemen tüm editörler, hazırladığınız sayfaları bir web sunucusuna (FTP ya da HTTP protokolü ile) gönderebilmek için gerekli araçları (web publishing) da içerirler. Bu editörler, çoğunlukla, dökümanınız içinde kullandığınız HTML komutlarını farklı renklerde göstererek sayfanınızın oluşturulma sürecini kolaylaştırırlar. Çoğu editör, bazı temel JavaScript programları/özellikleri ekleme ya da hareketli GIF resimlerini (animated GIF) kolayca hazırlamanızı sağlayabilirler. Bu editörlerden bazıları, hazırladığınız web sayfalarındaki HTML kodlarını kontrol edebilirler ve hatalı/eksik kullanımları saptayabilirler. Bunları yapan bazı yardımcı programlar da vardır.Bu editörlerden bazıları HotDog Pro , HomeSite, Web Edit, HotMetal ve DiDo 'dur.

2) Bu gruba giren editörler, yazdiginiz anda tüm formatlama özellikleri ile birlikte görebildiğiniz (WYSIWYG - what you see is what you get) türden "görsel HTML editörleri"dir. Bu programlar kullanılarak, karmaşık HTML kodlarına bulaşmadan oldukça iyi sayfalar oluşturabilirsiniz. Bu tip editörlerden bazıları, aynı anda doğrudan HTML koduna da müdahele edebilmenize olanak tanır. HTML yardımı, kolay sayfa hazırlama sihirbazları, heceleme, web sunucusuna dosya gönderebilme gibi özellikleri bu programlar da, genellikle, sunarlar. Benzer şekilde, buton hazırlama, JavaScript programları/komutları ekleme ya da hareketli GIF resimlerini (animated GIF) kolayca hazırlamanızı sağlayabilecek özellikler de bu programlarda son günlerde sıkça karşılaştığımız özelliklerden. Popüler web istemcilerinden olan Netscape Navigator (4.x) bünyesi içinde yer alan "Composer" bu tür bir editör. Eger Netscape 3.x kullanıyorsanız web editörü bu ürünün Gold sürümünde. Popüler görsel editörlerden bazıları Microsoft Front Page, Symantec Visual Page, Adobe Page Mill, Claris Home Page' dir. Ayrıca, Microsoft Internet Explorer 4.x sürümü ile birlikte "Front Page Express" adıyla, orijinal ürünün daha basit bir sürümü de ücretsiz dağıtılmaktadır.

İkinci gruba giren editörlerden Microsoft FrontPage, hem yüksek oranda HTML kodlaması gerektiren uygulamaların çok kolay yapılabildiği görsel editör özelliği ile, hem de düz HTML kodunu degiştirebilmenize olanak tanıması ile kullanım alanı gittikçe artan popüler bir editördür.

HTML Versiyonları

Çetin OFLAMAZ 09:32

HTML 1.0: Bu versiyon, daha sonra geliştirilen versiyonlarla karşılaştırılınca, çok kısıtlı yeteneklere sahip olduğu anlaşılır. Bu nedenle HTML 1.0 ile yaratılan dökümanlar da oldukça basittir. HTML 1.0 dökümanlarının temel özellikleri şöyle özetlenebilir: Çok seviyeli başlıklar, paragraflar, hipermetin referansları, maddelenmiş listeler için özel formatlama.

HTML 2.0: Bu versiyon, 1994 yılından önce Web dökümanlarında kullanılan eklentiler ve özellikler temel alınarak hazırlanmıştır. Bu versiyonun beraberinde getirdiği temel yenilikler ise, satır içi görüntüler ve doldurulabilen formlardır.

HTML 3.0: Bu versiyonun sağladığı yeni özellikler şu temel başlıklar altında incelenebilir: Sayfa görünümü üzerinde ileri derecede kontrol, manşetler, görüntülerdeki popüler noktaların istemci tarafında işlenmesi, özelleştirilmiş listeler, istemci çekme/sunucu itme özellikli dinamik dökümanlar, matematik dökümanlar, stil yaprakları, form içi tablolar.

HTML NEDİR?

Çetin OFLAMAZ 09:31

HTML (Hypertext Markup Language); yazı, grafik, ses, film gibi pek çok farklı yapıdaki verilerden oluşabilen hypertext bir dökümanı formatlamak ile ilgili komutlar içeren bir yorumlayıcı programlama dilidir. Dökümanın hypertext olması, bir dökümanın ya da bir parçasının, başka bir dökümanın içinden çağırılabilmesini ifade eder. Çağırılan, aynı döküman içinde bir kısım ya da network üzerinde herhangi bir makinada yer alan başka bir döküman veya dökümanın bir kısmı olabilir. HTML programlama dilini kullanarak, kompakt ve etkileşimli Web sayfaları hazırlayabiliriz.

Her yararlı ve iyi şeyin gelişmekte olduğu gibi, HTML dili de gelişmeye uğramış ve zaman içinde değişik versiyonları çıkmıştır. Bunlara kısaca bir göz atmakta yarar vardır.

Nasıl Bakarsan Öyle Görürsün

Çetin OFLAMAZ 12:28

Fransa'da, ağır işçilerin işleri hakkında ne düşündüklerini incelemek üzere araştırmayı yürüten bir görevli, bir inşaat alanına gönderilir. Görevli, ilk işçiye yaklaşır ve sorar:

"Ne yapıyorsun?"

"Nesin sen, kör mü?" diye öfkeyle bağırır işçi.

"Bu parçalanması imkansız kayaları ilkel aletlerle kırıyor ve patronun emrettiği gibi bir araya yığıyorum. Cehennem sıcağında kan ter içinde kalıyorum. Bu çok ağır bir iş, ölümden beter."

Görevli hızla oradan uzaklaşır ve çekinerek ikinci işçiye yaklaşır. Aynı soruyu sorar:

"Ne yapıyorsun?" İşçi cevap verir:

"Kayaları mimari plana uygun şekilde yerleştirilebilmeleri için, kullanılabilir şekle getirmeye çalışıyorum. Bu ağır ve bazen de monoton bir iş, ama karım ve çocuklarım için para gerekli sonuçta bir işim var. Daha kötü de olabilirdi."

Biraz cesaretlenen görevli üçüncü işçiye doğru ilerler.

"Ya sen ne yapıyorsun?" diye sorar.

"Görmüyor musun?" der işçi kollarını gökyüzüne kaldırarak. "Bir katedral yapıyorum."

Bu hikayenin enteresan tarafı her üç işçinin de aynı işi yapıyor olmaları.Görmeyi seçtiğiniz yol sizin tutumunuza bağlıdır. Bugün hava biraz bulutlu mu yoksa biraz güneşli mi? Güllerin dikeni mi vardır, dikenli dalların gülleri mi? Bardağın yarısı boş mudur, yarısı dolu mu? Yoksa bardak olması gerekenin iki katı büyüklükte midir?

Seçim size ait...

31 Aralık 2009 Perşembe

26 Aralık 2009 Cumartesi

CSS SCROLL BAR ÖZELLİKLERİ

CSS TABLO ÖZELLİKLERİ

CSS BACKGROUND ÖZELLİKLERİ

CSS TEXT ÖZELLİKLERİ

CSS FONT ÖZELLİKLERİ

CSS KATMAN ÖZELLİKLERİ

CSS LIST ÖZELLİKLERİ

CSS LİNK ÖZELLİKLERİ

BİÇİMLENDİRME:

NOT : Yukarıda kullanılabilecek birkaç parametre örnek verilmiştir.Ancak "font" , "text" , table" vs. için kullanılabilen pek çok parametre "a" için de kullanılabilir.Gerisi biraz da insanın yaratıcılığına kalıyor.

color Birimleri:

#000000

R%,G%,B%

Renk adi

Uzunluk Birimleri:

em

ex

px

in

cm

mm

pt

pc

CSS PARAMETRELER

YERLEŞTİRİLMESİ :

Dışarıda ayrı bir dosya olarak kullanılması: Bu da iki şekilde olabilir:

Style özelliklerini bir metin editörüyle yazdıktan sonra *.css uzantısıyla kaydederiz ve sayfamızın "head" bölümünde bu dosyaya bir baglantı kurarız.

Aynı şekilde bir css dosyası oluştururuz.Dışardaki bu dosyaya da yine "head" bölümünde aşagıdaki gibi bir baglantı kurarız.

Sayfanın "head" bölümüne yerleştirilmesi : Hazırladıgımız style özelliklerini sayfanın "head" bölümüne örnekte oldugu gibi yerleştirebiliriz.

Style özelliklerinin etiketin içine yerleştirilmesi : Bu durumda etiketin içine diger parametreler gibi yerleştirilir.

YAPISI :

ılk iki durumda style'in yapısı şöyledir:

NOT : < !-- ve -- > etiketleri style özelliklerini CSS'yi desteklemeyen tarayıcılardan saklamaya yarar.

Üçüncü durumda style özelliklerinin yazımı aynı olsa da "< style > < !--" ve "-- > < /style >" etiketleri kullanılmaz.Parametre ve degerler ilgili etiketin içinde ve style="..." parametresinin içine yazılır.

KULLANILMASI :

Genel Biçimlendirme : Sayfada geçen bir etiketin her yerde aynı nitelikleri taşımasını istedigimizde bu metodu kullanırız.

Seçerek Biçimlendirme : Bir etiketin farklı yerlerde farklı niteliklere sahip olmasını istedigimizde bu metodu kullanabiliriz.Bu da şu şekillerde olabilir:

.isim : Bu metodla sayfa içinde kullanılan her etiket için birden fazla farklı biçimlendirme yapılabilir.Bu durumda seçilen etikete class="isim" parametresini eklemeliyiz.

#isim : Yukardakine benzemekle birlikte style bölümünde öncesinde etiket kullanılmaması ile ondan ayrılır.Ayrıca ilişkilendirilen etiket ile kullanılırken de class yerine id="isim" kullanılır.

etiket+etiket : ıçiçe etiket kullandıgımızda ikinci etiketin etki alanını birincisinden farklı biçimlendirebiliriz.

Bu durumda P etiketi içerisinde, B etiketinin etkiledigi alanlardaki karakterler kırmızı olurken kalan alanlar ise siyah olacaktır.

23 Aralık 2009 Çarşamba

Popular Posts

Follow us on Facebook

Labels

Toplam Sayfa Görüntüleme Sayısı

Sayfalar

Blogda Ara

Blog Arşivi

Sık Kullanılanlar

About

Site Links

Popular Posts