HTML (Hyper Text Markup Language) web sayfalarının hazırlanmasında kullanılan dildir. Bir web sayfası resim gibi değildir. Sayfanın arkasında ilk bakışta anlamakta zorlanacağımız komutlar bulunmaktadır. Bu komutlar sayfa içinde bulunan herşeyin nasıl gösterileceğini kullanılan browsere anlatmak için kullanılır. Yani sayfada bulunan resim, flash, yazı gibi materyallerin yanyana anlaşılır görünmesi için HTML kullanmak zorundayız.
Amatör veya profesyonel olarak web tasarım ile uğraşanlar HTML ile mutlaka tanışmışlardır. HTML yazma işini bizim yerimize yapan programlar (Frontpage, Dreamweaver, Namo v.b.) var ve birazda HTML bilgisi ile kolaylıkla kendi sitelerimizi yapabiliriz.
HTML üç kısımdan oluşur. Bunlar;
1. html ; Ana bloktur.Tüm html dosyaları "html /html" arasında yer alır.
2. head ; Tanımlamalar yani kullanıcının browserde görmediği bölümdür. Bu kısımda site ile ilgili açıklamalar, arama motorları için anahtar kelimeler, site başlığı, CSS ve javasciptler gibi bölümler bulunur.
3. body ; Sayfa üzerinde görülecek herşeyin yazıldığı bölümdür. Yani sayfa içeriğinin başlangıç ve bitiş bloğu denebilir.
HTML komutlarının yazılışı;
Html komutları onu yorumlayan browserin anlaması için etiketler kullanılarak yazılır. Bu etiket
" komut1 yazı / komut1 " şeklindedir. Mesela yazıları kalın yazmak için;
b merhaba /b
kullanılır.Burada işaretleri arasındaki "b" bold (kalın) yazı için kullanılan bir html komutudur. Aynı şekilde bu yazıyı kalın ve kırmızı renkte yapmak istersek;
font color="red"b Merhaba /b/font
yazmamız gerekir. Burada dikkat etmemiz gereken nokta font etiketinin içinde bulunan color="red" bölümüdür. Eğer bir yazıya herhangi bir özellik vermek istersek font etiketini kullanıp içerisinde özellikleri belirtmeliyiz. Merhaba yazısının fontunu verdana yapmak istersek
font color="red" face="verdana" yazmamız gerekirdi.
HTML nedir?
NCSA yani National Center for Super Computing Association, değişik firmalar ve bölgeler arasında belge çeşitliğine bir son vermek için hiper metin veya hiper text olarak bilinen HTML işaretleme dilini tanımladı. Bu dil tarayıcı adı verilen yazılımlarda sayfanın gereken biçimde görünmesini sağlar. Sayfa hangi yazılım kullanılırsa kullanılsın aynı biçimde görünecek. Bugün HTML geliştirme ve yaygınlaştırma işini içine sindiremeyen bazı tekel firmalar kendi kodlarını yerleştirmeye çalışsalar dahi HTML salt metin belgelerden sonra dünyada kendi yerini edindi. Tarayıcı yazılımınız sayfanın kaynak kodunu gösterme seçeneği varsa beğendiğiniz bir sayfanın nasıl yazıldığını görebilirsiniz. Örneğin Netscape'de View Source seçeneğini seçerek şu an okumakta olduğunuz sayfanın HTML kodunu görebilirsiniz. Bu kodlardan oluşan belgeye HTML belgesi denmektedir. HTML standardının tanımını bugün http://www.w3.org yapmaktadır. Tüm sorunlarda referans olan kar amacı gütmeyen bu kurumdur.
HTML belgelesinin tarayıcı tarafından uygun bir biçimde görünebilmesi için uygun şekilde başlamalı ve sonlanmalı. Tüm sayfa bu başlangıç ve son arasında yer alır.
Bir HTML sayfasının en basit biçimi şu şekilde:
HTML
HEAD
TITLE
/TITLE
/HEAD
BODY
Sayfanın ana bölümü burada olacaktır.
/BODY
/HTML
Burada dikkat etmeniz gereken bir şey var. Başlama işaretleri köşeli parantez içinde ( ), bitiş işaretleri (/ ) kesmeli köşeli parantez içinde yer alıyor.
Örneğin HTML sayfasının başlangıcı HTML ile açılır, /HTML ile kapatılır.
Başlamak için yukarıdaki kodu kopyalayıp istediğinizi yere yapıştırabilirsiniz. Bu belgeyi salt metin olarak ve *.htm uzantısı ile kaydedin. Belgenizi artık herhangi bir tarayıcıda görebilirsiniz.
HTML öğrenmenin en iyi yolu onu kullanmaktır. Kullandıkça kullanımını bilmediğiniz yeni işaretleri öğrenecek daha gelişmiş sayfalar yapabileceksiniz. Kullandığınız metin düzenleme programında bul/değiştir özelliği bulunması toplu değişiklikler yapmanızı kolaylaştırır. Yaptığınız her sayfa ile yeni şeyler öğreneceksiniz.
Başa dön
Doküman Renkleri
Sayfadaki ana renkler, arkaplan görüntüsü ve bazı diğer öznitelikler BODY işareti tarafından kontrol edilirler.
Dokümandaki öznitelikler BODY gibi basit bir işaretin şu şeklide değiştirilmesi ile oluşur.
BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx"
bgcolor: doküman arkaplan rengi
text: dokümandaki yazının rengi
link: linklerin rengi
vlink: daha önce ziyaret edilmiş linklerin rengi
alink: üzerine tıklandığında aktifleşen linkin alacağı renk.
Bünların hepsini aynı renk yapmayın yoksa hiç bir şey göremeyebilirsiniz. Bunların herhangi birini kullanabilir veya sadece BODY yazarak hiç birini kullanmayabilirsiniz. Bu durumda sayfa görüntülenirken kullanıcı tarayıcısının önceden ayarlı renkleri kullanılacaktır. Renkleri değiştirmek için sadece yukarıdaki xxxxxx leri istediğiniz renk ile değiştirin.
İşte kullanabileceğiniz bir kaç renk:
Beyaz = FFFFFF
Sarı = FFFF66
Kırmızı = FF0000
Gri = CC9999
Mavi = 0000FF
Yeşil = 00FF00
Siyah = 000000
Turkuaz = 00FFFF
Majenta = FF00FF
Mor = CC33FF
Açık Mavi = 00CCFF
Renklerde ilk iki harf maviyi, ikinci iki harf yeşili ve üçüncü iki harf kırmızıyı kontrol eder. Her renk Hexadesimal yani 16 tabanlı olarak belirtilir ve 00'dan FF'ye kadar 256 farklı değer arasında değişebilir. Bu şekilde belirtilebilen renk sayısı 16.777.216'dır. Renkler hakkında internet'te daha fazla bilgi bulabilirsiniz. Beğendiğiniz bir sayfanın renklerini taklit etmek için tarayıcıdaki "View Source" komutunu kullanarak BODY içindeki renkleri kopyalayabilirsiniz.
Öneri başlamak için en basit renkleri kullanabilirsiniz:
body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000"
Deneme ve yanılmalarınız devam ederken, bir süre sonra body işaretlerinden oluşan kendi kütüphaneniz olacaktır.
Body içinde belirtilebilen özniteliklerden biride kenarlardır:
BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 Margins
Başa dön
Arkaplan görüntüleri, sayfa duvarkağıdı
Sayfada düz arkaplan yerine renkli görüntüler kullanmak için background="resimadı" işareti kullanılmaktadır. Örneğin sayfanızda zemin.jpg adlı resimi kullanmak için
BODY BACKGROUND="zemin.jpg" text="#000000" link="#0066CC" vlink="#336600"
işaretini kullanabilirsiniz.
Bu resim sayfa ile aynı dizin içerisinde bulunmalı ve adı küçük/büyükharf olarak tag'de yazılan biçimi ile aynı olmalıdır. İnternet üzerindeki sistemlerin hiçbirinde dosya isimlerinde Türkçe harfler kullanılmamaktadır.
background işareti bgcolor ile birlikte kullanıldığında arkaplan resmi yükleninceye kadar sayfa bgcolor renginde görünecektir.
Başa dön
Yatay çizgiler
sayfa içerisinde istediğiniz yere hr (horizontal ruler) işareti ile yatay bir çizgi atabilirsiniz. Bu çizgi aşağıdakine benzeyecektir:
Bu yatay çizigye bir kaç ekstra özellik kazandırmak mümkün:
Kalınlık: SIZE=sayı
Hizalama: ALIGN=LEFT/RIGHT/CENTER
Genişlik: WIDTH=yüzde veya WIDTH=sayı
Gölgesiz: NOSHADE
Bu özellikleri birleştirerek:
hr size=10 align=left noshade width=50%
aşağıdaki gibi bir çizgi yapmak mümkün:
Sola dayalı, 10 piksel genişliğinde, gölgesiz, ve sayfa genişliğinin yarısı genişlikte bir çizgi.
Web sayfalarında gördüğünüz bir çok süslü çizgi hr işareti ile değil, resimler kullanılarak oluşturulmuştur. Başa dön
Sırasız listeler
Kendi sırasız listelerinizi ul (unordered list) işaretini kullanarak yaratabilirsiniz. Nokta olması istenen her liste maddesi başında li bulunmalıdır. Komut biçimi şu şekilde:
ul
liBirinci madde
liİkinci madde
liÜçüncü Madde
/ul
Sırasız liste şu şeklide görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sırasız listeler istendiğinde iç içe döngülendirilebilir.
ul
liBirinci madde
liİkinci madde
ul
liİkinci madde birnici şık
liİkinci madde ikinci şık
/ul
liÜçüncü madde
/ul
Döngülendirilmiş liste şu şekilde görünecektir.
Birinci madde
İkinci madde
İkinci madde birinci şık
İkinci madde ikinci şık
Üçüncü madde
Başa dön
Sıralı veya Numaralı listeler
Sıralı listeler yaratmak için ol (ordered list) işaretini kullanabilirsiniz.
ol
liBirinci madde
liİkinci madde
liÜçüncü Madde
/ol
Listeniz aşağıdaki gibi görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sıralı listeler sırasız listeler gibi döngülendirilebilirler. Ayrıca sıralı ve sırasız listeler ile karışık iç içe döngüler oluşturmak mümkündür.
Başa dön
Tanım listeleri
Tanım listesini en iyi açıklamanın yolu bir örnek göstermektir.
dl
dt Elmalar
dd Elmalar hakkında bilgi burada verilmektedir.
dt Armutlar
dd Armutlar hakkında bilgi burada verilmektedir.
/dl
İşte yukarıdaki tanım listesi aşağıdaki şekilde görünecekir. Elmalar Elmalar hakkında bilgi burada verilmektedir. Armutlar Armutlar hakkında bilgi burada verilmektedir. dl bunun bir liste olduğunu gösterir.
dt bunun bir liste terimi olduğunu gösterir.
dd bunun bir liste maddesi olduğunu gösterir.
Başa dön
Başlıklar
Tarayıcılar altı başlık düzeyini kabul ederler.
h1Birinci düzey başlık/h1
h2İkinci düzey başlık /h2
h3Üçüncü düzey başlık /h3
h4Dördüncü düzey başlık /h4
h5Beşinci düzey başlık /h5
h6Altıncı düzey başlık /h6
İşte yukarıda tanımlanan başlıklar aşağıdaki gibi görüneceketir. Birinci düzey başlık
İkinci düzey başlık
Üçüncü düzey başlık
Dördüncü düzey başlık
Beşinci düzey başlık
Altıncı düzey başlık
Başa dönOrtalama
Resim veya metinleri CENTER işaretleri arasına alarak ortalayabilirsiniz.
Örnek olarak
center Bu yazı ortalanacaktır /center
yazısı aşağıdaki gibi görünecektir:
Bu yazı ortalanacaktır.
Ortalanan birden fazla satır varsa başlangıç ve bitiş işareteri arasındaki tüm satırlar ortalanır.
HTML 3.0'da Dvisin içerisinde align: "Left", "Right" ve "Center" tanımlı. Html 4.0 Tag'ı olan Align:"Justify" bir çok Browserde sorun yaratabilir. Bu nedenle sayfanız düzgün görünsün istiyorsanız bir süre için kullanmamanızı öneririm.
DIV ALIGN="CENTER"Bu yazı ortalanacaktır/DIV ve
CENTER Bu yazı ortalanacaktır /CENTER arasındaki tek fark CENTER işaretinin tüm tarayıcılar tarafından desteklenmesidir.
Başa dön
Ön biçimli metin:
Bazen daha önce yazdığımız ve biçimlendirdiğimiz metinleri HTML içerisinde biçimleri bozulmadan kullanmak gerekir. Bu durumlarda metin parçasını pre işareti içine koymak yeterlidir.
Örnek: b e nd a ğ ı nık b i rada m ı mbır ak ındağ ı nıkk a l s ı npre içine aldığımız metinlerin biçimi korunmuş olacak.
Başa dön
Koyu, eğik, vs.
Bir metin parçasının biçimini bu işaretler ile kolayca değiştirebilirsiniz.
Koyu görünmesini istediğini metin parçasını b işaretleri içine yerleştirin.
b Koyu yazı /b
Yazınız aşağıdaki gibi görünecektir.
Koyu yazı
Eğik görünmesini istediğiniz yazıyı i işaretleri arasına yerleştirin.
i Eğik yazı /i
Yazınız aşağıdaki gibi görünecektir.
Eğik yazı
Hem eğik hem koyu görünmesini istediğiniz yazıda her iki işareti kullanabilirsiniz.
bi Koyu ve Eğik Yazı/i/b
Yazınız aşağıdaki gibi görünecektir.
Koyu ve Eğik Yazı
Her iki işareti kullandığınız durumda işaretleri açma sırasına göre kapatmalısınız. Örneğin Koyu yazı eğikten önce açılmışsa, sonra kapatılmalıdır. Aşağıda anlatılan işaretler için aynı kurallar geçerlidir.
Diğer komutlar gayet basi ve kullanımı diğerleri gibidir. Her birinden birer örnek yeter diye düşünüyorum.
UAlt Çizgili/U
Alt Çizgili
STRIKEÜstü Çizgili/STRIKE
Üstü Çizgili
StrongGüçlü/Strong
Güçlü
EMVurgu/EM
Vurgu
BIGBüyük/BIG İç içe döngü OK
Büyük
SmallKüçük/Small İç içe döngü OK
Küçük
SUB Alt yazı /SUB
Alt yazı Alt yazı
SUP Üst yazı /SUP
Üst yazı Üst yazı
FONT SIZE=+1 /FONT Font boyutunu arttırır.
SAMPÖrnek Kod /SAMP
Örnek Kod
CODEÖrnek Kod /CODE
Örnek Kod
TTTeletype /TT
Teletype
VARDeğişken Notu /VAR
Değişken
CITEKısa Not /CITE
Kısa Not
Göz kırpan şeyler:
Basit bir işaret ile metinde bir noktanın yanıp sönerek göz kırpmasını sağlayabiliriz.
You can make text or graphics blink on and off by surrounding them with tags.
İşte işaret:
blink Yanıp sönerim! /blink
Ve yazı böyle görünecektir.
Yanıp sönerim!
Bunu fazla yapmamaya dikkat edin. Başa dön
Yazıtipi rengi:
FONT COLOR=#KKYYMM Yazının bulunduğu yer /FONT Yazı rengini değiştirir
İlk iki harf kırmızı pixeli, orta iki harf yeşil, son iki harf mavi pixel renk değerini belirler. Değerleri 0-F arası değişebilir. 000000 hepsi sönük yani siyah, FFFFFF hepsi tam şiddet yani beyaz...
FONT COLOR="#000000"Siyah/FONT
FONT COLOR="#FF0000"Kırmızı/FONT
FONT COLOR="#00FF00"Yeşil /FONT
FONT COLOR="#0000FF"Mavi/FONT
FONT COLOR="#FFFF00"Sarı/FONT
FONT COLOR="#FF00FF"Mor/FONT
FONT COLOR="#00FFFF"Turkuaz/FONT
FONT COLOR="#FFFFFF"Beyaz/FONT |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Başa dön
Yazı Tipleri:
font face="Kidprint"Font biçimi /font ile yeni nesil tarayıcılar için yazıtipi tanımı yapılabilmesine rağmen bu yazıtipinin aynı zamanda diğer işletim sisteminde ve kullanıcıda bulunması gerekir. Bu kısıtlılık nedeniyle sayfaları hazırlarken kullanıcının varsayılan yazıtipi ile okunabilmesi için mümküm olduğu kadar yazıtipleri arasında az geçiş yapmak gerekir. Örnekteki yazının düzyün okunabilmesi için sistemde kidsprint yazıtipi bulunması gerekir. Çok özel biçimse ve yazıtipi efektleri kullanmak gerekiyorsa .gif formatında düşük renk sayısı ile yazılması, yazının her sistemde düzgün ve aynı biçimde görünmesini garanti eder.
Başa dön
Paragraf ve satırbaşı
Tarayıcılar sizin sayfanızı nasıl düzenlediğinize bakmazlar. Onlar işretlere bakarlar. Satırbaşı ve paragraf işaretleri olmadığı sürece metin tek paragraf halinde devam eder. Bu işaretleri gördüklerinde satırlar erkenden son bulur.
br yani satır başının yaptığı etki metin parçasını boşluk bırakmadan yeni bir satırdan devam ettirmesidir.
p yani paragraf işaretinin tek farkı yeni başlayacak metin parçasından önce bir satırlık boşluk bırakmasıdır. Başa dön
Belge içerisinde başka yere atlama
Belge içinde gidilecek yerleri tanımlayıp bir tıklama ile sayfanın o bölümüne gidilmesini sağlayabilirsiniz.
Bu işlemi geçekleştirmek iki aşamalıdır.
1. Hedef belirlemek Sayfada gidilecek noktaya hedef veya target adı verilmektedir. Gidilecek her noktanın bir adı olmalıdır. Bu adı daha önce tanımlamak gerekmektedir. a name="hedef_adi" Bu tanım gidilecek yerde olmalıdır.
2. Bağlantı yaratmak: Link içinde iki şey'i tanımlamak gerekmektedir. Tıklanacak metin, ve gidilecek nokta
a href="#hedef_adi"Tıklanacak yazı/a
Link olarak tanımladığımız yazı, altı çizgili ve body içinde tanımlı link rengi ile görünecektir. Üzerine tıklandığında kullanıcı hedef olarak tanımladığımız noktaya gidecektir. Bu sayfadaki Başa dön işaretleri ve içindekiler bölümü bu tarz bir sayfa içi atlamanın örnekleridir.
Aynı sistemde başka dokümana atlama
Tarayıcının aynı sistem üzerinde bulunan başka bir belgeye gitmesini sağlamak oldukça kolay. Gidilecek belgeniz üzerinde çalıştığınız doküman ile aynı dizin içerisinde bulunuyorsa sadece belgenin adını yazmak yeterlidir.
a href="boludagece.jpg" Bolu'da Gece /a
Bolu'da Gece
Bunun için sadece belgenin bulunduğu dizinin göreceli veya mutlak konumu ve gidilecek dokümanın adını belirtmek yeterlidir.
a href="göreceli_yol_ve_dosaya_adi"Link Yazisi/a
Örnekler:
Kök dizinde bulunan varsayılan belge:
a href="/"Ana sayfa/a
Bu sunucu üzerindeki Ana sayfa
Sunucu üzerinde /SoHo/Museum/9404/ dizininde bulunan barutcu.jpg resim belgesi
A HREF="../SoHo/Museum/9404/barutcu.jpg" Şinasi Barutçu/A
Şinasi Barutçu
Mevcut dizinin altında olan eski altdizin'indeki aramis.htm belgesi
A HREF="eski/aramis.htm" Aramis /A
Mevcut dizinin bir üst dizininde bulunan scandisk.txt saltmetin belgesi
A HREF="../scandisk.txt"Scandisk Hakkında/A
Başa dön
Başka sistemdeki bir bölüme atlama
Internet'in temel özelliklerinden biri URL adı verilen evrensel kaynak belirleyici kodlama sistemidir. Bu dünyanın neresinde olursa olsun size başka bir sunucu üzerinde başka bir dokümana veya dizine kolaylıkla erişmenizi sağlar. Bu kaynaklar sadece WWW diye bilinen ve adresleri http:// ile başlayan web ile sınırlı değildir.
Kullanıcıyı hipermetin aktarım protokolu (hyper text transfer protocol, http) ile çalışan herhangi bir sisteme yönlendirmek için evrensel kaynak belirleyici tipini belirtmek kullanımı zorunludur. Bu örnekte URL veya internet adresi veya evrensel kaynak belirleyici olarak http:// kullanılmıştır. Gidilecek sayfa http://www.boyutbilgi.com.tr/ifsaksergi/index.html olsun
a href="http://www.boyutbilgi.com.tr/ifsaksergi/index.html""IFSAK Sanal Ortam Sergisi"ne Git /a
"IFSAK Sanal Ortam Sergisi"ne Git
Şifreli http protokolu:
A HREF="https://sunucu.adı"Link Yazısı/A
Kullanımı http'ye benzer.
Daha önce belirtildiği gibi tek URL tipi http değildir. Diğer protokoller için farklı evrensel kaynak belirleyiciler vardır.
Bunların kullanımını örnekler ile açıklamayalım. Protokollerin ne anlama geldiğini açıklamak bu belgenin kapsamı dışındadır.
Haber grupları:
Varsayılan sunucu üzerindeki grup adına yönelik linkler:
A HREF="news:grup_adi"Link Yazısı/A
A HREF="news:soc.culture.turkish" SCT/A
SCT
Sunucuya yönlendirilmiş linkler:
A HREF="news://sunucu_adi"Link Yazısı/A
A HREF="news://news.istanbul.edu.tr"Istanbul Üniversitesi Haber Sunucusu/A
Istanbul Üniversitesi Haber Sunucusu
Belli sunucu üzerindeki gruba yönelik evrensel kaynak belirleyiciler:
A HREF="news://sunucu_adi/grup_adı"/A
A HREF="news://news.marun.edu.tr/alt.culture.turkish.internet"acti grubu/A
acti grubu
Secure (Şifreli, Güvenli) iletişim destekleyen haber sunucusu:
A HREF="snews:secnews.netscape.com"Netscape Güvenli Haber Sunucusu/A
Netscape Güvenli Haber Sunucusu
Kullanıcı hesabı kullanılarak haber sunucusuna bağlantı:
A HREF="news://kullanıcı_adi:şifresi@sunucu.adı/"Link Yazısı/A
Dosya aktarım protokolu (FTP) link'i
A HREF="ftp://ftp.zdnet.com"ZDnet FTP sunucusu/A
ZDnet FTP sunucusu
Kullanıcı hesabı kullanılarak FTP'ye bağlantı:
A HREF="ftp://kullanıcı_adi:şifresi@ftp.sunucu.adı/"Link Yazısı/A
Her hangi bir e-mail adresine gönderilecek mektup:
A HREF="mailto:kullanıcı@doamin.adı"Link Yazısı/A
A HREF="mailto:nevilo@yahoo.com"Nevit'e mektup/A
Nevit'e mektup
Birden fazla kullanıcıya mektup:
A HREF="mailto:kullanici1@domain1.adi?to=kullanici2@ domain2.adi&to=kullanici3@domain3.adi"Link Yazısı/A
Birden fazla adrese e-mail
Mektup içerisinde varsayılan başlık ve metin:
A HREF="mailto:kullanıcı_adi@domain.adi.net?subject= Başlık Buraya&body=Gövde içindeki yazı"Link Yazısı/A
Varsayılan Başlık ve Yazı içeren mektup
Telent protokolu, uzaktaki bilgisayara terminal bağlantısı:
A HREF="telnet://sunucu.adi"Link Yazısı/A
A HREF="telnet://ttnbbs.rtpnc.epa.gov"Air Polution BBS USA/A
Air Polution BBS USA
Gopher Protokolu:
A HREF="gopher://sunucu.adi"Link Yazısı/A
A HREF="gopher://gopher.metu.edu.tr"ÖDTÜ Gopher Sunucusu/A
ÖDTÜ Gopher Sunucusu
Başa dön
Sayfalara resim ekleme
Tüm tarayıcıların resim desteklemediğini unutmayın. Sayfanız ne olursa olsun resimsiz görünebilmeli. Bu sayfayı ziyaret edenlere daha fazla serbesti sağlayıp, resimlerin görünemediği durumlarda sayfaya gelen ziyaretçiyi eli boş döndürmemiş olmaya yarar.
HTML'de resimler yazılardan bağımsız bir şekilde sunucu üzerinde ayrı dosyalar olarak bulunurlar. Resim ancak gif ve jpg gibi tarayıcının içinden görünebilien formatta ise sayfada kullanılabilir. Resimler evrensel kaynak belirleyici kuralları dahilinde internetin herhangi bir yerinden çağrılabilirler. Çağrılan resim aynı dizin içerisinde ise konum kısmına sadece dosya adının yazılması yeterli olacaktır.
IMG SRC="resim.gif"
IMG SRC="http://sunucu.adi/dizin_adi/resim.jpg"
Diğer sayfa elemanları gibi resimlere link eklemek olasıdır. Diyelimki resim.jpg'ye tıklayınca dosya.htm veya belirli bir adresin açılmasını istiyoruz:
A HREF="dosya.htm"IMG SRC="resim.gif"/A
A HREF="Gidilecek_Adres"IMG SRC="http://sunucu_adi/dizin_adi/resim.jpg"/A
Resimler hakkında söylenmesi gereken en önemli şey boyutudur. Aşırı veya bilinçsiz kullanımı sayfanızı gerçekten ağırlaştırabilir. Sayfanızın şimşek gibi açılmasını istiyorsanız resim boyutlarını 1-5K arasında tutmaya çalışıp, tüm sayfa artı resimlerin 30K'ye geçmemesine dikkat edin. Bir birine atlayan sayfalarınız varsa aynı resimleri tekrar kullanmaya çalışıp yeni resim sayısını azaltın.
Resimler içerisinde kullanılan ekstra bazı işaretler zaman içerisinde gereklilik nedeniyle doğmuştur.
WIDTH=300 HEIGHT=200 Resim boyutları, HTML içinde belirtildiğinde sayfa daha çabuk yüklenir, tarayıcı sayfayı çizmek için gereken resim boyutunu almak için sunucunun yanıtını beklemek zorunda kalmaz.
ALT="resim yazısı" Alt işareti, resim yokluğunda ve yükleninceye kadar görünen yazı.
BORDER=sayı kenar kalınlığı, mevcut renk ile istenen kalınlıkta gösterilir.
VSPACE=Sayı HSPACE=Sayı Resim etrafında dikey ve yatay eksende kullanılacak boşluk.
ALIGN=TEXTTOP/ABSCENTER/ABSBOTTOM/BOTTOM
ALIGN=LEFT/CENTER/RIGHT Hizalama işaretleri, gerektiğinde resim ile birlikte kullanılabilir.
LOWSRC="dusuk_rezolusyon.gif" Asıl resim yükleninceye kadar çabuk yüklenebilen düşük çözünürlüklü resim.
IMG SRC="deneme.gif" WIDTH=300 HEIGHT=200 ALT="resim yazısı" BORDER=0 Başa dön
Ses Dosyaları
Bir Sayfa yüklendiğinde otomatik olarak ses dosyasının çalması nasıl sağlanır?
EMBED SRC="ses.wav" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=3 WAV
EMBED SRC="ses.au" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=2 AU
EMBED SRC="children.mod" HIDDEN="FALSE" WIDTH="166" HEIGHT="95" autostart="true" loop="false" MOD
EMBED SRC="enter.mid" HIDDEN=true AUTOSTART=true LOOP=true MIDI
Aktif Ses Kullanımı:
EMBED SRC="ses.wav" NAME="snd" WIDTH="1" HEIGHT="2" SES Here is a A HREF="page.htm"
OnMouseOver="Play_()"link/A aktif ses Başa dön
Tablolar:
Tablolar artık HTML'nin vazgeçilmez parçalarıdır. Tablolar TABLE ile tanımlanır. /TABLE ile biter. Her satır: TR ile başlar /TR ile biter. Haneler: TD ile başlar /TD ile biter. Başlık kısmı CAPTION içindedir. Border=0 tablo kenar kalınlığını belirtir.
İşte basit bir tablo:
TABLE Border=1
CAPTIONBaşlık/CAPTION
TRTDsatır1 Sutun1/TDTDsatır1 Sütün2/TD/TR
TRTDSatır 2 Sutun 1/TDTDSatır 2 Sütün 2/TD/TR
/TABLE
Tablo başlık kısmıda TABLE içerisinde kullanılabilen seçenekler şu şekilde:
Border=sayı tablo kenar kalınlığı
Width=sayı tablo genişliği, piksel olarak
Width=yüzde tablo genişliği, yüzde olarak bu ikisinden sadece biri kullanılabilir.
CELLPADDING=sayı Nesne-hücre aralığı
CELLSPACING=sayı Hücre-Hücre aralığı
BGCOLOR="#xxxxxx" Tablo Arkaplan Rengi
BACKGROUND="resim.jpg" Tablo Arkaplan Resmi
ALIGN=right/left/center Tablo hizalama
COLS=sayı Sütün sayısı ( #n adet eşit genişlikte sütün, eşit sütün genişlikli tablo)
Satır TR içerisinde kullanılan komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Satır Arkaplan rengi
BACKGROUND="resim.jpg" Satır Arkaplan Resmi
Hücre TD içerisinde HTML elemanlarının kendi komutlarına ilave olarak kullanılabilen komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Hücre Arkaplan rengi
BACKGROUND="resim.jpg" Hücre Arkaplan Resmi
COLSPAN="2" Birleşen kolon sayısı
ROWSPAN="2" Birleşen satır sayısı
İç içe tablo kullanabilirmiyim? Hanelerin içerisinde ikinci bir tablo dahil HTML elemanlarından herhangi biri olabilir.
Bir sayfada yan yana dört resim yerleştirip, altına adlarını yazmak istiyorum.
İlk önce, 4 sütün 4 satır bir tablo yaratın. Her tablo satırı TR ile başlar /TR ile biter. Haneler td ile başlar /td ile
biter.
TABLE Border=0
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
/TABLE
Resimleri hanelere yani td ve /td arasına yerleştirin. Tablo elemanlarında önemli olan elamanın /td ve td arasına gelmemesidir. Yazıyı bir sonraki satırda aynı hanenin altına denk gelecek şekilde yerleştirin.
Bir kaç resmi birleştirip tek resimmiş gibi yüklemek istiyorum:
table cellpadding="0" cellspacing="0" border="0"
0 aralıklı bir tablo tanımlar. Hücreler içerisindeki resimler arasında mesafe yoktur. Başa dön
Formlar:
Formlar kullanıcılardan gelen bilgileri standart şekillerde alan sayfanın etkileşimli alanlarıdır. Form kullanmanın e-mail almaya göre bir çok avantajı var. Eğer uygun yazılımlar geliştirirseniz form bilgilerini doğrudan istediğiniz yazılıma yönlenirebilirsiniz. Herhangi bir yazılım kullanmıyorsanız formunuzu ilk örnekteki gibi salt metin olarak e-mail adresinize gelecek şekilde ayarlayabilirsiniz.
form action="mailto:kullanici@adresiniz.net?subject=Kon u Başlığı" method="POST" enctype="text/plain"
Form Elemanları
/form
Cgi için örnek POST komutu:
form method="post" action="http://sunucu_adi/cgi-bin/program_adi.pl?değişken"
/form
GET komutu nadir kullanıldığından anlatılmayacak.
Formlarda kullanılan bazı alan seçenekleri:
Radyo Buton'u tipi:
BRSoru1.
BRINPUT TYPE=Radio CHECKED NAME="Soru_adi1" VALUE="Birinci_Yanıt" İkinci_Yanıt
BRINPUT TYPE=Radio NAME="Soru_adi1" VALUE="İkinci_Yanıt" İkinci_Yanıt
BRINPUT TYPE=Radio NAME="Soru_adi1" VALUE="Üçüncü_Yanıt" Üçüncü_Yanıt
Liste tipi soru:
BRSoru2BR
SELECT NAME="Soru_adi2"
OPTION Seçenek1
OPTION Seçenek2
OPTION Seçenek3
/SELECTBR
Küçük metin:
BRSoru3:BR
INPUT TYPE=Text NAME="Soru_adi3" VALUE="varsayılan_değer" SIZE=25 MAXLENGTH=30BR
Geniş metin alanı:
TextArea NAME="Soru4" ROWS=7 COLS=35 MAXLENGTH=100
Varsayılan Yazı
/TextAreaBR
Kutu işaretleme tipi soru
Br INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek1"seçenek1
BR INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek2"seçenek2
BR INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek3"seçenek3
/UL
Gönderme ve Sıfırlama butonları:
INPUT TYPE=Submit NAME="Gönder" VALUE="Gönder"
INPUT TYPE=Reset NAME="Reset" VALUE="Reset"
Başa dön
Çerçeveler, Frames
Çerçeveler veya Frames Netscape Navigator (2.0 üstü) ve Internet Explorer (3.0 üstü) tarafından desteklenen işaretlerdir. Aynı çerçeve içerisinde birden fazla sayfanın açılmasını sağlar. Çerçeve yapısı HTML'ye benzerdir, sadece BODY yerine FRAMESET içerir.
FRAMESET çerçeve içeren dokümanın hangi dokümanların bileşiminden oluşacağını ve bu dokümanların hangi biçimde yan yana geleceğini tanımlayan basit bir dokümandır. FRAMESET'den önce herhangi bir işaret olmamalıdır, yoksa tarayıcı tarafından gözardı edilir.
Örnek bir Frame dokümanı:
HTML
HEAD
/HEAD
FRAMESET
/FRAMESET
/HTML
Frame set içerisinde ROWS ve COLS yardımı ile dokümanın yaty mı dikey mi bölüneceği tanımlanır. Yine Frameset içerisinde her bölmeye ayrılan alan piksel veya yüzde olarak tanımlanabilir.
Yatay bölünen doküman:
ROWS="row_height_value_list"
FRAMESET ROWS="20%,60%,20%"
FRAMESET ROWS="100,*,100"
Frame komutu ilave olarak içerideki belgelerin özelliklerini belirler, dikkat ederseniz her pencereye bir isim verildi. Bundan sonra kullanılacak linklerde bu isimlerin kullanımı tıkalndığında istenen belgenin hangi çerçevede açılacağını belirler.
Aşaığdaki örnekte ilk sütün 150 piksel genişlikte, soldaki çerçevenin adı solframe, sağdaki çerçevenin adı sagframe olarak atandı. Solda açılacak belge solsayfa.htm sağda açılacak belge ise sagsayfa.htm adını taşıyor.
FRAMESET COLS="150,*"
FRAME SCROLLING="yes" NAME="solframe" SRC="solsayfa.htm"
FRAME SCROLLING="yes" NAME="sagframe" SRC="sagsayfa.htm"
/FRAMESET
Frame komutunda kullanılan seçenekler:
SCROLLING="yes|no|auto"
NORESIZE
Çerçevesiz Doküman:
noframes a href="main.html"Ana sayfa/a /noframes
Çerçeveler sonlandırılmak istendiği zaman top seçeneği kullanılmalıdır.
a href="test.html" target="_top"Çerçeveden Çık/a Çerçeveden Çık
Başa dön
Comment Tag, veya Bilgi
!-- -- işareti içerisinde yazılanlar sayfa içerisinde görünmez ve sadece view source yapıldığı zaman bilgi verme amacını taşır. Bazı Javascript program parçalarnı eski tarayıcılardan saklamak için yine !-- -- kullanılır. Eski programa dillerine alışkın olanlar için bu işareti REM ibaresine benzetebiliriz. Başa dön
META-işaretler:
Meta işaretler tarayıcılar, arama motorları ve sayfaya gelebilecek yazılımlara yönelik bilgiler içeren işaretlerdir. Sık kullanılan bir kaç Metaişaretin anlamını açıklamak yeterli olacaktır. Meta işaretler sayfada HEAD bölümü içerisine yerleştirlir.
META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9" Turkish Metatag, Sayfanın Türkçe olduğunu ve uluslarası standart ensititüsünün ISO-8859-9 standardına uygun yapıldığını gösterir.
META NAME="generator" CONTENT="Yazılım Adı" Generator Meta tag, sayfanın hangi yazılım ile hazırlandığını gösterir.
META NAME="Author" CONTENT=" Nevit " Author Meta tag sayfanın hazırlayıcısı olan kişiyi gösterir.
META NAME="keywords" CONTENT="keyword, keyword, keyword" Content Meta tag Anahtar kelimelerin burada bulunması sadece bu bölüme bakan bazı arama motorlarının işini kolaylaştırır.
META NAME="description"CONTENT=" Sayfanın tanımı " Description Meta tag Bazı arama motorları arama motorunu kullanan kişilere bu bölümü gösterirler.
META HTTP-EQUIV="Refresh" CONTENT="7;URL=index.html" Refresh, İtme teknolojisi ile devreye giren bir meta işarettir. Sayfaya gelen kişi herhangi bir işlem yapmasa bile başka bir sayfaya aktarılır.
META HTTP-EQUIV="Content-Type" Content-Base: "http://www.geocities.com/SoHo/Studios/9594 Content Base, sayfa içeriğinin bulunduğu URL'yi gösterir.
Başa dön
Türkçe
Uluslararsı standartlar ensitütüsü ISO-8859-9'u Türkçe standardı olarak kabul ediyor. IE ve Netscape'de bunu destekleyenlerdendir. Türkçe standartlarına uygunluu denetlemek için önce browserinizin düzgün çalıştığından emin olmanız gerekir. Bunun için http://www.immt.pwr.wroc.pl/export_hp/test/ adresinde Browerinizin ISO-8859-9 karakterlerini düzgün gösterip göstermediğini kontrol edin.
ISO8859-9 Ansi-Turkish ve Windows-1254 ile neredeyse aynı karakter tablosuna sahip. ASC-II harfleri olduğu yerde çıkmasına rağmen Batı standardı olan ISO-8859-1 'den farklı olarak Türkçe harfler tanımlıdır.
Ayarlarınız doğru ise hepsinde sorunsuz Türkçe görürsünüz.
Başa dön
Özet:
HTML Basit bir işaretleme dilidir ve Hypertext Markup Language kıstaltmasıdır. WEB'de gördüğünüz tüm *.htm ve *.html uzantılı dokümanlar bu şekilde yazılmış.
body ve /body arasındaki kısım dokümanın ana kısnmını oluşturur.
Burada paragraflar p ile başlar biter. Bundan sonra her ikisini yazmiyacağım. bitişler / içerir. yani paragrafın bittiği yerde istenirse /p konur.
Bu şekilde hazırlanmış doküman web'de belli bir adrese konulunca isteyen buna girip içeriğine bakabilir.
Hala bir çok kişi Browserlerin 3.0 sürümleri kullaniyorlar. Opera kullanlar, Unix, Linux, Mac, OS/2 kullananlar var dünyada.
İletişimin amacı ziyaretçilere sorun çıkartmak olmamalı.
Dokümanın bir yerine resim koymak için, öncelikle en iyisi resim ve doküman aynı dizinde olmalılar. Değillerse resimin bulunduğu yer
dokümana tanıtılmalı. En basit resim ekleme komutu IMG SRC="resim_adi.gif" şeklinde. Bu arada dediğim gibi resim aynı
dizinde olmalı.
Size basit bir HTML örneği veriyorum:
HTML
BODY
PMerhaba /P
IMG SRC="resim.gif"
/BODY
/HTML
Burada merhaba diye bir yazı ve bir'de resim.gif adında bir resim olacak. Bunu notepad'e kopyalayın ve deneme1.htm adı ile kaydedin. Daha sonra Netscape ile deneme belgesini açın. Resim görünmüyorsa o dizin içerisinde resim.gif adında bir dosya olmadığı içindir. Bunu sağladığınız anda yazı ve resim görünecek.
Bazı HTML Linkleri:
GeoCities Home Page Building Resource Guide.
Index Dot HTML
Barebones Guide to HTML
A Beginners Guide to HTML
Ten Commandments of HTML
comp.infosystems.www.authoring.cgi
alt.html.editors.enhanced-html
alt.html.editors.webedit
alt.html.webedit
alt.html.writers
alt.html.writers.guild.list
alt.homepages.xoom
alt.homepages.geocities HTML nedir?
NCSA yani National Center for Super Computing Association, değişik firmalar ve bölgeler arasında belge çeşitliğine bir son vermek için hiper metin veya hiper text olarak bilinen HTML işaretleme dilini tanımladı. Bu dil tarayıcı adı verilen yazılımlarda sayfanın gereken biçimde görünmesini sağlar. Sayfa hangi yazılım kullanılırsa kullanılsın aynı biçimde görünecek. Bugün HTML geliştirme ve yaygınlaştırma işini içine sindiremeyen bazı tekel firmalar kendi kodlarını yerleştirmeye çalışsalar dahi HTML salt metin belgelerden sonra dünyada kendi yerini edindi. Tarayıcı yazılımınız sayfanın kaynak kodunu gösterme seçeneği varsa beğendiğiniz bir sayfanın nasıl yazıldığını görebilirsiniz. Örneğin Netscape'de View Source seçeneğini seçerek şu an okumakta olduğunuz sayfanın HTML kodunu görebilirsiniz. Bu kodlardan oluşan belgeye HTML belgesi denmektedir. HTML standardının tanımını bugün http://www.w3.org yapmaktadır. Tüm sorunlarda referans olan kar amacı gütmeyen bu kurumdur.
HTML belgelesinin tarayıcı tarafından uygun bir biçimde görünebilmesi için uygun şekilde başlamalı ve sonlanmalı. Tüm sayfa bu başlangıç ve son arasında yer alır.
Bir HTML sayfasının en basit biçimi şu şekilde:
HTML
HEAD
TITLE
/TITLE
/HEAD
BODY
Sayfanın ana bölümü burada olacaktır.
/BODY
/HTML
Burada dikkat etmeniz gereken bir şey var. Başlama işaretleri köşeli parantez içinde ( ), bitiş işaretleri (/ ) kesmeli köşeli parantez içinde yer alıyor.
Örneğin HTML sayfasının başlangıcı HTML ile açılır, /HTML ile kapatılır.
Başlamak için yukarıdaki kodu kopyalayıp istediğinizi yere yapıştırabilirsiniz. Bu belgeyi salt metin olarak ve *.htm uzantısı ile kaydedin. Belgenizi artık herhangi bir tarayıcıda görebilirsiniz.
HTML öğrenmenin en iyi yolu onu kullanmaktır. Kullandıkça kullanımını bilmediğiniz yeni işaretleri öğrenecek daha gelişmiş sayfalar yapabileceksiniz. Kullandığınız metin düzenleme programında bul/değiştir özelliği bulunması toplu değişiklikler yapmanızı kolaylaştırır. Yaptığınız her sayfa ile yeni şeyler öğreneceksiniz.
Başa dön
Doküman Renkleri
Sayfadaki ana renkler, arkaplan görüntüsü ve bazı diğer öznitelikler BODY işareti tarafından kontrol edilirler.
Dokümandaki öznitelikler BODY gibi basit bir işaretin şu şeklide değiştirilmesi ile oluşur.
BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx"
bgcolor: doküman arkaplan rengi
text: dokümandaki yazının rengi
link: linklerin rengi
vlink: daha önce ziyaret edilmiş linklerin rengi
alink: üzerine tıklandığında aktifleşen linkin alacağı renk.
Bünların hepsini aynı renk yapmayın yoksa hiç bir şey göremeyebilirsiniz. Bunların herhangi birini kullanabilir veya sadece BODY yazarak hiç birini kullanmayabilirsiniz. Bu durumda sayfa görüntülenirken kullanıcı tarayıcısının önceden ayarlı renkleri kullanılacaktır. Renkleri değiştirmek için sadece yukarıdaki xxxxxx leri istediğiniz renk ile değiştirin.
İşte kullanabileceğiniz bir kaç renk:
Beyaz = FFFFFF
Sarı = FFFF66
Kırmızı = FF0000
Gri = CC9999
Mavi = 0000FF
Yeşil = 00FF00
Siyah = 000000
Turkuaz = 00FFFF
Majenta = FF00FF
Mor = CC33FF
Açık Mavi = 00CCFF
Renklerde ilk iki harf maviyi, ikinci iki harf yeşili ve üçüncü iki harf kırmızıyı kontrol eder. Her renk Hexadesimal yani 16 tabanlı olarak belirtilir ve 00'dan FF'ye kadar 256 farklı değer arasında değişebilir. Bu şekilde belirtilebilen renk sayısı 16.777.216'dır. Renkler hakkında internet'te daha fazla bilgi bulabilirsiniz. Beğendiğiniz bir sayfanın renklerini taklit etmek için tarayıcıdaki "View Source" komutunu kullanarak BODY içindeki renkleri kopyalayabilirsiniz.
Öneri başlamak için en basit renkleri kullanabilirsiniz:
body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000"
Deneme ve yanılmalarınız devam ederken, bir süre sonra body işaretlerinden oluşan kendi kütüphaneniz olacaktır.
Body içinde belirtilebilen özniteliklerden biride kenarlardır:
BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 Margins
Başa dön
Arkaplan görüntüleri, sayfa duvarkağıdı
Sayfada düz arkaplan yerine renkli görüntüler kullanmak için background="resimadı" işareti kullanılmaktadır. Örneğin sayfanızda zemin.jpg adlı resimi kullanmak için
BODY BACKGROUND="zemin.jpg" text="#000000" link="#0066CC" vlink="#336600"
işaretini kullanabilirsiniz.
Bu resim sayfa ile aynı dizin içerisinde bulunmalı ve adı küçük/büyükharf olarak tag'de yazılan biçimi ile aynı olmalıdır. İnternet üzerindeki sistemlerin hiçbirinde dosya isimlerinde Türkçe harfler kullanılmamaktadır.
background işareti bgcolor ile birlikte kullanıldığında arkaplan resmi yükleninceye kadar sayfa bgcolor renginde görünecektir.
Başa dön
Yatay çizgiler
sayfa içerisinde istediğiniz yere hr (horizontal ruler) işareti ile yatay bir çizgi atabilirsiniz. Bu çizgi aşağıdakine benzeyecektir:
Bu yatay çizigye bir kaç ekstra özellik kazandırmak mümkün:
Kalınlık: SIZE=sayı
Hizalama: ALIGN=LEFT/RIGHT/CENTER
Genişlik: WIDTH=yüzde veya WIDTH=sayı
Gölgesiz: NOSHADE
Bu özellikleri birleştirerek:
hr size=10 align=left noshade width=50%
aşağıdaki gibi bir çizgi yapmak mümkün:
Sola dayalı, 10 piksel genişliğinde, gölgesiz, ve sayfa genişliğinin yarısı genişlikte bir çizgi.
Web sayfalarında gördüğünüz bir çok süslü çizgi hr işareti ile değil, resimler kullanılarak oluşturulmuştur. Başa dön
Sırasız listeler
Kendi sırasız listelerinizi ul (unordered list) işaretini kullanarak yaratabilirsiniz. Nokta olması istenen her liste maddesi başında li bulunmalıdır. Komut biçimi şu şekilde:
ul
liBirinci madde
liİkinci madde
liÜçüncü Madde
/ul
Sırasız liste şu şeklide görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sırasız listeler istendiğinde iç içe döngülendirilebilir.
ul
liBirinci madde
liİkinci madde
ul
liİkinci madde birnici şık
liİkinci madde ikinci şık
/ul
liÜçüncü madde
/ul
Döngülendirilmiş liste şu şekilde görünecektir.
Birinci madde
İkinci madde
İkinci madde birinci şık
İkinci madde ikinci şık
Üçüncü madde
Başa dön
Sıralı veya Numaralı listeler
Sıralı listeler yaratmak için ol (ordered list) işaretini kullanabilirsiniz.
ol
liBirinci madde
liİkinci madde
liÜçüncü Madde
/ol
Listeniz aşağıdaki gibi görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sıralı listeler sırasız listeler gibi döngülendirilebilirler. Ayrıca sıralı ve sırasız listeler ile karışık iç içe döngüler oluşturmak mümkündür. Başa dön
Tanım listeleri
Tanım listesini en iyi açıklamanın yolu bir örnek göstermektir.
dl
dt Elmalar
dd Elmalar hakkında bilgi burada verilmektedir.
dt Armutlar
dd Armutlar hakkında bilgi burada verilmektedir.
/dl
İşte yukarıdaki tanım listesi aşağıdaki şekilde görünecekir. Elmalar Elmalar hakkında bilgi burada verilmektedir. Armutlar Armutlar hakkında bilgi burada verilmektedir. dl bunun bir liste olduğunu gösterir.
dt bunun bir liste terimi olduğunu gösterir.
dd bunun bir liste maddesi olduğunu gösterir. Başa dön
Başlıklar
Tarayıcılar altı başlık düzeyini kabul ederler.
h1Birinci düzey başlık/h1
h2İkinci düzey başlık /h2
h3Üçüncü düzey başlık /h3
h4Dördüncü düzey başlık /h4
h5Beşinci düzey başlık /h5
h6Altıncı düzey başlık /h6
İşte yukarıda tanımlanan başlıklar aşağıdaki gibi görüneceketir. Birinci düzey başlık
İkinci düzey başlık
Üçüncü düzey başlık
Dördüncü düzey başlık
Beşinci düzey başlık
Altıncı düzey başlık
Başa dönOrtalama
Resim veya metinleri CENTER işaretleri arasına alarak ortalayabilirsiniz.
Örnek olarak
center Bu yazı ortalanacaktır /center
yazısı aşağıdaki gibi görünecektir:
Bu yazı ortalanacaktır.
Ortalanan birden fazla satır varsa başlangıç ve bitiş işareteri arasındaki tüm satırlar ortalanır.
HTML 3.0'da Dvisin içerisinde align: "Left", "Right" ve "Center" tanımlı. Html 4.0 Tag'ı olan Align:"Justify" bir çok Browserde sorun yaratabilir. Bu nedenle sayfanız düzgün görünsün istiyorsanız bir süre için kullanmamanızı öneririm.
DIV ALIGN="CENTER"Bu yazı ortalanacaktır/DIV ve
CENTER Bu yazı ortalanacaktır /CENTER arasındaki tek fark CENTER işaretinin tüm tarayıcılar tarafından desteklenmesidir.
Başa dön
Ön biçimli metin:
Bazen daha önce yazdığımız ve biçimlendirdiğimiz metinleri HTML içerisinde biçimleri bozulmadan kullanmak gerekir. Bu durumlarda metin parçasını pre işareti içine koymak yeterlidir.
Örnek: b e nd a ğ ı nık b i rada m ı mbır ak ındağ ı nıkk a l s ı npre içine aldığımız metinlerin biçimi korunmuş olacak. Başa dön
Koyu, eğik, vs.
Bir metin parçasının biçimini bu işaretler ile kolayca değiştirebilirsiniz.
Koyu görünmesini istediğini metin parçasını b işaretleri içine yerleştirin.
b Koyu yazı /b
Yazınız aşağıdaki gibi görünecektir.
Koyu yazı
Eğik görünmesini istediğiniz yazıyı i işaretleri arasına yerleştirin.
i Eğik yazı /i
Yazınız aşağıdaki gibi görünecektir.
Eğik yazı
Hem eğik hem koyu görünmesini istediğiniz yazıda her iki işareti kullanabilirsiniz.
bi Koyu ve Eğik Yazı/i/b
Yazınız aşağıdaki gibi görünecektir.
Koyu ve Eğik Yazı
Her iki işareti kullandığınız durumda işaretleri açma sırasına göre kapatmalısınız. Örneğin Koyu yazı eğikten önce açılmışsa, sonra kapatılmalıdır. Aşağıda anlatılan işaretler için aynı kurallar geçerlidir.
Diğer komutlar gayet basi ve kullanımı diğerleri gibidir. Her birinden birer örnek yeter diye düşünüyorum.
UAlt Çizgili/U
Alt Çizgili
STRIKEÜstü Çizgili/STRIKE
Üstü Çizgili
StrongGüçlü/Strong
Güçlü
EMVurgu/EM
Vurgu
BIGBüyük/BIG İç içe döngü OK
Büyük
SmallKüçük/Small İç içe döngü OK
Küçük
SUB Alt yazı /SUB
Alt yazı Alt yazı
SUP Üst yazı /SUP
Üst yazı Üst yazı
FONT SIZE=+1 /FONT Font boyutunu arttırır.
SAMPÖrnek Kod /SAMP
Örnek Kod
CODEÖrnek Kod /CODE
Örnek Kod
TTTeletype /TT
Teletype
VARDeğişken Notu /VAR
Değişken
CITEKısa Not /CITE
Kısa Not
Göz kırpan şeyler:
Basit bir işaret ile metinde bir noktanın yanıp sönerek göz kırpmasını sağlayabiliriz.
You can make text or graphics blink on and off by surrounding them with tags.
İşte işaret:
blink Yanıp sönerim! /blink
Ve yazı böyle görünecektir.
Yanıp sönerim!
Bunu fazla yapmamaya dikkat edin. Başa dön
Yazıtipi rengi:
FONT COLOR=#KKYYMM Yazının bulunduğu yer /FONT Yazı rengini değiştirir
İlk iki harf kırmızı pixeli, orta iki harf yeşil, son iki harf mavi pixel renk değerini belirler. Değerleri 0-F arası değişebilir. 000000 hepsi sönük yani siyah, FFFFFF hepsi tam şiddet yani beyaz...
FONT COLOR="#000000"Siyah/FONT
FONT COLOR="#FF0000"Kırmızı/FONT
FONT COLOR="#00FF00"Yeşil /FONT
FONT COLOR="#0000FF"Mavi/FONT
FONT COLOR="#FFFF00"Sarı/FONT
FONT COLOR="#FF00FF"Mor/FONT
FONT COLOR="#00FFFF"Turkuaz/FONT
FONT COLOR="#FFFFFF"Beyaz/FONT |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Başa dön
Yazı Tipleri:
font face="Kidprint"Font biçimi /font ile yeni nesil tarayıcılar için yazıtipi tanımı yapılabilmesine rağmen bu yazıtipinin aynı zamanda diğer işletim sisteminde ve kullanıcıda bulunması gerekir. Bu kısıtlılık nedeniyle sayfaları hazırlarken kullanıcının varsayılan yazıtipi ile okunabilmesi için mümküm olduğu kadar yazıtipleri arasında az geçiş yapmak gerekir. Örnekteki yazının düzyün okunabilmesi için sistemde kidsprint yazıtipi bulunması gerekir. Çok özel biçimse ve yazıtipi efektleri kullanmak gerekiyorsa .gif formatında düşük renk sayısı ile yazılması, yazının her sistemde düzgün ve aynı biçimde görünmesini garanti eder. Başa dön
Paragraf ve satırbaşı
Tarayıcılar sizin sayfanızı nasıl düzenlediğinize bakmazlar. Onlar işretlere bakarlar. Satırbaşı ve paragraf işaretleri olmadığı sürece metin tek paragraf halinde devam eder. Bu işaretleri gördüklerinde satırlar erkenden son bulur.
br yani satır başının yaptığı etki metin parçasını boşluk bırakmadan yeni bir satırdan devam ettirmesidir.
p yani paragraf işaretinin tek farkı yeni başlayacak metin parçasından önce bir satırlık boşluk bırakmasıdır. Başa dön
Belge içerisinde başka yere atlama
Belge içinde gidilecek yerleri tanımlayıp bir tıklama ile sayfanın o bölümüne gidilmesini sağlayabilirsiniz.
Bu işlemi geçekleştirmek iki aşamalıdır.
1. Hedef belirlemek Sayfada gidilecek noktaya hedef veya target adı verilmektedir. Gidilecek her noktanın bir adı olmalıdır. Bu adı daha önce tanımlamak gerekmektedir. a name="hedef_adi" Bu tanım gidilecek yerde olmalıdır.
2. Bağlantı yaratmak: Link içinde iki şey'i tanımlamak gerekmektedir. Tıklanacak metin, ve gidilecek nokta
a href="#hedef_adi"Tıklanacak yazı/a
Link olarak tanımladığımız yazı, altı çizgili ve body içinde tanımlı link rengi ile görünecektir. Üzerine tıklandığında kullanıcı hedef olarak tanımladığımız noktaya gidecektir. Bu sayfadaki Başa dön işaretleri ve içindekiler bölümü bu tarz bir sayfa içi atlamanın örnekleridir.
Aynı sistemde başka dokümana atlama
Tarayıcının aynı sistem üzerinde bulunan başka bir belgeye gitmesini sağlamak oldukça kolay. Gidilecek belgeniz üzerinde çalıştığınız doküman ile aynı dizin içerisinde bulunuyorsa sadece belgenin adını yazmak yeterlidir.
a href="boludagece.jpg" Bolu'da Gece /a
Bolu'da Gece
Bunun için sadece belgenin bulunduğu dizinin göreceli veya mutlak konumu ve gidilecek dokümanın adını belirtmek yeterlidir.
a href="göreceli_yol_ve_dosaya_adi"Link Yazisi/a
Örnekler:
Kök dizinde bulunan varsayılan belge:
a href="/"Ana sayfa/a
Bu sunucu üzerindeki Ana sayfa
Sunucu üzerinde /SoHo/Museum/9404/ dizininde bulunan barutcu.jpg resim belgesi
A HREF="../SoHo/Museum/9404/barutcu.jpg" Şinasi Barutçu/A
Şinasi Barutçu
Mevcut dizinin altında olan eski altdizin'indeki aramis.htm belgesi
A HREF="eski/aramis.htm" Aramis /A
Mevcut dizinin bir üst dizininde bulunan scandisk.txt saltmetin belgesi
A HREF="../scandisk.txt"Scandisk Hakkında/A
Başa dön
Başka sistemdeki bir bölüme atlama
Internet'in temel özelliklerinden biri URL adı verilen evrensel kaynak belirleyici kodlama sistemidir. Bu dünyanın neresinde olursa olsun size başka bir sunucu üzerinde başka bir dokümana veya dizine kolaylıkla erişmenizi sağlar. Bu kaynaklar sadece WWW diye bilinen ve adresleri http:// ile başlayan web ile sınırlı değildir.
Kullanıcıyı hipermetin aktarım protokolu (hyper text transfer protocol, http) ile çalışan herhangi bir sisteme yönlendirmek için evrensel kaynak belirleyici tipini belirtmek kullanımı zorunludur. Bu örnekte URL veya internet adresi veya evrensel kaynak belirleyici olarak http:// kullanılmıştır. Gidilecek sayfa http://www.boyutbilgi.com.tr/ifsaksergi/index.html olsun
a href="http://www.boyutbilgi.com.tr/ifsaksergi/index.html""IFSAK Sanal Ortam Sergisi"ne Git /a
"IFSAK Sanal Ortam Sergisi"ne Git
Şifreli http protokolu:
A HREF="https://sunucu.adı"Link Yazısı/A
Kullanımı http'ye benzer.
Daha önce belirtildiği gibi tek URL tipi http değildir. Diğer protokoller için farklı evrensel kaynak belirleyiciler vardır.
Bunların kullanımını örnekler ile açıklamayalım. Protokollerin ne anlama geldiğini açıklamak bu belgenin kapsamı dışındadır.
Haber grupları:
Varsayılan sunucu üzerindeki grup adına yönelik linkler:
A HREF="news:grup_adi"Link Yazısı/A
A HREF="news:soc.culture.turkish" SCT/A
SCT
Sunucuya yönlendirilmiş linkler:
A HREF="news://sunucu_adi"Link Yazısı/A
A HREF="news://news.istanbul.edu.tr"Istanbul Üniversitesi Haber Sunucusu/A
Istanbul Üniversitesi Haber Sunucusu
Belli sunucu üzerindeki gruba yönelik evrensel kaynak belirleyiciler:
A HREF="news://sunucu_adi/grup_adı"/A
A HREF="news://news.marun.edu.tr/alt.culture.turkish.internet"acti grubu/A
acti grubu
Secure (Şifreli, Güvenli) iletişim destekleyen haber sunucusu:
A HREF="snews:secnews.netscape.com"Netscape Güvenli Haber Sunucusu/A
Netscape Güvenli Haber Sunucusu
Kullanıcı hesabı kullanılarak haber sunucusuna bağlantı:
A HREF="news://kullanıcı_adi:şifresi@sunucu.adı/"Link Yazısı/A
Dosya aktarım protokolu (FTP) link'i
A HREF="ftp://ftp.zdnet.com"ZDnet FTP sunucusu/A
ZDnet FTP sunucusu
Kullanıcı hesabı kullanılarak FTP'ye bağlantı:
A HREF="ftp://kullanıcı_adi:şifresi@ftp.sunucu.adı/"Link Yazısı/A
Her hangi bir e-mail adresine gönderilecek mektup:
A HREF="mailto:kullanıcı@doamin.adı"Link Yazısı/A
A HREF="mailto:nevilo@yahoo.com"Nevit'e mektup/A
Nevit'e mektup
Birden fazla kullanıcıya mektup:
A HREF="mailto:kullanici1@domain1.adi?to=kullanici2@ domain2.adi&to=kullanici3@domain3.adi"Link Yazısı/A
Birden fazla adrese e-mail
Mektup içerisinde varsayılan başlık ve metin:
A HREF="mailto:kullanıcı_adi@domain.adi.net?subject= Başlık Buraya&body=Gövde içindeki yazı"Link Yazısı/A
Varsayılan Başlık ve Yazı içeren mektup
Telent protokolu, uzaktaki bilgisayara terminal bağlantısı:
A HREF="telnet://sunucu.adi"Link Yazısı/A
A HREF="telnet://ttnbbs.rtpnc.epa.gov"Air Polution BBS USA/A
Air Polution BBS USA
Gopher Protokolu:
A HREF="gopher://sunucu.adi"Link Yazısı/A
A HREF="gopher://gopher.metu.edu.tr"ÖDTÜ Gopher Sunucusu/A
ÖDTÜ Gopher Sunucusu
Başa dön
Sayfalara resim ekleme
Tüm tarayıcıların resim desteklemediğini unutmayın. Sayfanız ne olursa olsun resimsiz görünebilmeli. Bu sayfayı ziyaret edenlere daha fazla serbesti sağlayıp, resimlerin görünemediği durumlarda sayfaya gelen ziyaretçiyi eli boş döndürmemiş olmaya yarar.
HTML'de resimler yazılardan bağımsız bir şekilde sunucu üzerinde ayrı dosyalar olarak bulunurlar. Resim ancak gif ve jpg gibi tarayıcının içinden görünebilien formatta ise sayfada kullanılabilir. Resimler evrensel kaynak belirleyici kuralları dahilinde internetin herhangi bir yerinden çağrılabilirler. Çağrılan resim aynı dizin içerisinde ise konum kısmına sadece dosya adının yazılması yeterli olacaktır.
IMG SRC="resim.gif"
IMG SRC="http://sunucu.adi/dizin_adi/resim.jpg"
Diğer sayfa elemanları gibi resimlere link eklemek olasıdır. Diyelimki resim.jpg'ye tıklayınca dosya.htm veya belirli bir adresin açılmasını istiyoruz:
A HREF="dosya.htm"IMG SRC="resim.gif"/A
A HREF="Gidilecek_Adres"IMG SRC="http://sunucu_adi/dizin_adi/resim.jpg"/A
Resimler hakkında söylenmesi gereken en önemli şey boyutudur. Aşırı veya bilinçsiz kullanımı sayfanızı gerçekten ağırlaştırabilir. Sayfanızın şimşek gibi açılmasını istiyorsanız resim boyutlarını 1-5K arasında tutmaya çalışıp, tüm sayfa artı resimlerin 30K'ye geçmemesine dikkat edin. Bir birine atlayan sayfalarınız varsa aynı resimleri tekrar kullanmaya çalışıp yeni resim sayısını azaltın.
Resimler içerisinde kullanılan ekstra bazı işaretler zaman içerisinde gereklilik nedeniyle doğmuştur.
WIDTH=300 HEIGHT=200 Resim boyutları, HTML içinde belirtildiğinde sayfa daha çabuk yüklenir, tarayıcı sayfayı çizmek için gereken resim boyutunu almak için sunucunun yanıtını beklemek zorunda kalmaz.
ALT="resim yazısı" Alt işareti, resim yokluğunda ve yükleninceye kadar görünen yazı.
BORDER=sayı kenar kalınlığı, mevcut renk ile istenen kalınlıkta gösterilir.
VSPACE=Sayı HSPACE=Sayı Resim etrafında dikey ve yatay eksende kullanılacak boşluk.
ALIGN=TEXTTOP/ABSCENTER/ABSBOTTOM/BOTTOM
ALIGN=LEFT/CENTER/RIGHT Hizalama işaretleri, gerektiğinde resim ile birlikte kullanılabilir.
LOWSRC="dusuk_rezolusyon.gif" Asıl resim yükleninceye kadar çabuk yüklenebilen düşük çözünürlüklü resim.
IMG SRC="deneme.gif" WIDTH=300 HEIGHT=200 ALT="resim yazısı" BORDER=0 Başa dön
Ses Dosyaları
Bir Sayfa yüklendiğinde otomatik olarak ses dosyasının çalması nasıl sağlanır?
EMBED SRC="ses.wav" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=3 WAV
EMBED SRC="ses.au" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=2 AU
EMBED SRC="children.mod" HIDDEN="FALSE" WIDTH="166" HEIGHT="95" autostart="true" loop="false" MOD
EMBED SRC="enter.mid" HIDDEN=true AUTOSTART=true LOOP=true MIDI
Aktif Ses Kullanımı:
EMBED SRC="ses.wav" NAME="snd" WIDTH="1" HEIGHT="2" SES Here is a A HREF="page.htm"
OnMouseOver="Play_()"link/A aktif ses Başa dön
Tablolar:
Tablolar artık HTML'nin vazgeçilmez parçalarıdır. Tablolar TABLE ile tanımlanır. /TABLE ile biter. Her satır: TR ile başlar /TR ile biter. Haneler: TD ile başlar /TD ile biter. Başlık kısmı CAPTION içindedir. Border=0 tablo kenar kalınlığını belirtir.
İşte basit bir tablo:
TABLE Border=1
CAPTIONBaşlık/CAPTION
TRTDsatır1 Sutun1/TDTDsatır1 Sütün2/TD/TR
TRTDSatır 2 Sutun 1/TDTDSatır 2 Sütün 2/TD/TR
/TABLE
Tablo başlık kısmıda TABLE içerisinde kullanılabilen seçenekler şu şekilde:
Border=sayı tablo kenar kalınlığı
Width=sayı tablo genişliği, piksel olarak
Width=yüzde tablo genişliği, yüzde olarak bu ikisinden sadece biri kullanılabilir.
CELLPADDING=sayı Nesne-hücre aralığı
CELLSPACING=sayı Hücre-Hücre aralığı
BGCOLOR="#xxxxxx" Tablo Arkaplan Rengi
BACKGROUND="resim.jpg" Tablo Arkaplan Resmi
ALIGN=right/left/center Tablo hizalama
COLS=sayı Sütün sayısı ( #n adet eşit genişlikte sütün, eşit sütün genişlikli tablo)
Satır TR içerisinde kullanılan komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Satır Arkaplan rengi
BACKGROUND="resim.jpg" Satır Arkaplan Resmi
Hücre TD içerisinde HTML elemanlarının kendi komutlarına ilave olarak kullanılabilen komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Hücre Arkaplan rengi
BACKGROUND="resim.jpg" Hücre Arkaplan Resmi
COLSPAN="2" Birleşen kolon sayısı
ROWSPAN="2" Birleşen satır sayısı
İç içe tablo kullanabilirmiyim? Hanelerin içerisinde ikinci bir tablo dahil HTML elemanlarından herhangi biri olabilir.
Bir sayfada yan yana dört resim yerleştirip, altına adlarını yazmak istiyorum.
İlk önce, 4 sütün 4 satır bir tablo yaratın. Her tablo satırı TR ile başlar /TR ile biter. Haneler td ile başlar /td ile
biter.
TABLE Border=0
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
/TABLE
Resimleri hanelere yani td ve /td arasına yerleştirin. Tablo elemanlarında önemli olan elamanın /td ve td arasına gelmemesidir. Yazıyı bir sonraki satırda aynı hanenin altına denk gelecek şekilde yerleştirin.
Bir kaç resmi birleştirip tek resimmiş gibi yüklemek istiyorum:
table cellpadding="0" cellspacing="0" border="0"
0 aralıklı bir tablo tanımlar. Hücreler içerisindeki resimler arasında mesafe yoktur. Başa dön
Formlar:
Formlar kullanıcılardan gelen bilgileri standart şekillerde alan sayfanın etkileşimli alanlarıdır. Form kullanmanın e-mail almaya göre bir çok avantajı var. Eğer uygun yazılımlar geliştirirseniz form bilgilerini doğrudan istediğiniz yazılıma yönlenirebilirsiniz. Herhangi bir yazılım kullanmıyorsanız formunuzu ilk örnekteki gibi salt metin olarak e-mail adresinize gelecek şekilde ayarlayabilirsiniz.
form action="mailto:kullanici@adresiniz.net?subject=Kon u Başlığı" method="POST" enctype="text/plain"
Form Elemanları
/form
Cgi için örnek POST komutu:
form method="post" action="http://sunucu_adi/cgi-bin/program_adi.pl?değişken"
/form
GET komutu nadir kullanıldığından anlatılmayacak.
Formlarda kullanılan bazı alan seçenekleri:
Radyo Buton'u tipi:
BRSoru1.
BRINPUT TYPE=Radio CHECKED NAME="Soru_adi1" VALUE="Birinci_Yanıt" İkinci_Yanıt
BRINPUT TYPE=Radio NAME="Soru_adi1" VALUE="İkinci_Yanıt" İkinci_Yanıt
BRINPUT TYPE=Radio NAME="Soru_adi1" VALUE="Üçüncü_Yanıt" Üçüncü_Yanıt
Liste tipi soru:
BRSoru2BR
SELECT NAME="Soru_adi2"
OPTION Seçenek1
OPTION Seçenek2
OPTION Seçenek3
/SELECTBR
Küçük metin:
BRSoru3:BR
INPUT TYPE=Text NAME="Soru_adi3" VALUE="varsayılan_değer" SIZE=25 MAXLENGTH=30BR
Geniş metin alanı:
TextArea NAME="Soru4" ROWS=7 COLS=35 MAXLENGTH=100
Varsayılan Yazı
/TextAreaBR
Kutu işaretleme tipi soru
Br INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek1"seçenek1
BR INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek2"seçenek2
BR INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek3"seçenek3
/UL
Gönderme ve Sıfırlama butonları:
INPUT TYPE=Submit NAME="Gönder" VALUE="Gönder"
INPUT TYPE=Reset NAME="Reset" VALUE="Reset"
Başa dön
Çerçeveler, Frames
Çerçeveler veya Frames Netscape Navigator (2.0 üstü) ve Internet Explorer (3.0 üstü) tarafından desteklenen işaretlerdir. Aynı çerçeve içerisinde birden fazla sayfanın açılmasını sağlar. Çerçeve yapısı HTML'ye benzerdir, sadece BODY yerine FRAMESET içerir.
FRAMESET çerçeve içeren dokümanın hangi dokümanların bileşiminden oluşacağını ve bu dokümanların hangi biçimde yan yana geleceğini tanımlayan basit bir dokümandır. FRAMESET'den önce herhangi bir işaret olmamalıdır, yoksa tarayıcı tarafından gözardı edilir.
Örnek bir Frame dokümanı:
HTML
HEAD
/HEAD
FRAMESET
/FRAMESET
/HTML
Frame set içerisinde ROWS ve COLS yardımı ile dokümanın yaty mı dikey mi bölüneceği tanımlanır. Yine Frameset içerisinde her bölmeye ayrılan alan piksel veya yüzde olarak tanımlanabilir.
Yatay bölünen doküman:
ROWS="row_height_value_list"
FRAMESET ROWS="20%,60%,20%"
FRAMESET ROWS="100,*,100"
Frame komutu ilave olarak içerideki belgelerin özelliklerini belirler, dikkat ederseniz her pencereye bir isim verildi. Bundan sonra kullanılacak linklerde bu isimlerin kullanımı tıkalndığında istenen belgenin hangi çerçevede açılacağını belirler.
Aşaığdaki örnekte ilk sütün 150 piksel genişlikte, soldaki çerçevenin adı solframe, sağdaki çerçevenin adı sagframe olarak atandı. Solda açılacak belge solsayfa.htm sağda açılacak belge ise sagsayfa.htm adını taşıyor.
FRAMESET COLS="150,*"
FRAME SCROLLING="yes" NAME="solframe" SRC="solsayfa.htm"
FRAME SCROLLING="yes" NAME="sagframe" SRC="sagsayfa.htm"
/FRAMESET
Frame komutunda kullanılan seçenekler:
SCROLLING="yes|no|auto"
NORESIZE
Çerçevesiz Doküman:
noframes a href="main.html"Ana sayfa/a /noframes
Çerçeveler sonlandırılmak istendiği zaman top seçeneği kullanılmalıdır.
a href="test.html" target="_top"Çerçeveden Çık/a Çerçeveden Çık
Başa dön
Comment Tag, veya Bilgi
!-- -- işareti içerisinde yazılanlar sayfa içerisinde görünmez ve sadece view source yapıldığı zaman bilgi verme amacını taşır. Bazı Javascript program parçalarnı eski tarayıcılardan saklamak için yine !-- -- kullanılır. Eski programa dillerine alışkın olanlar için bu işareti REM ibaresine benzetebiliriz. Başa dön
META-işaretler:
Meta işaretler tarayıcılar, arama motorları ve sayfaya gelebilecek yazılımlara yönelik bilgiler içeren işaretlerdir. Sık kullanılan bir kaç Metaişaretin anlamını açıklamak yeterli olacaktır. Meta işaretler sayfada HEAD bölümü içerisine yerleştirlir.
META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9" Turkish Metatag, Sayfanın Türkçe olduğunu ve uluslarası standart ensititüsünün ISO-8859-9 standardına uygun yapıldığını gösterir.
META NAME="generator" CONTENT="Yazılım Adı" Generator Meta tag, sayfanın hangi yazılım ile hazırlandığını gösterir.
META NAME="Author" CONTENT=" Nevit " Author Meta tag sayfanın hazırlayıcısı olan kişiyi gösterir.
META NAME="keywords" CONTENT="keyword, keyword, keyword" Content Meta tag Anahtar kelimelerin burada bulunması sadece bu bölüme bakan bazı arama motorlarının işini kolaylaştırır.
META NAME="description"CONTENT=" Sayfanın tanımı " Description Meta tag Bazı arama motorları arama motorunu kullanan kişilere bu bölümü gösterirler.
META HTTP-EQUIV="Refresh" CONTENT="7;URL=index.html" Refresh, İtme teknolojisi ile devreye giren bir meta işarettir. Sayfaya gelen kişi herhangi bir işlem yapmasa bile başka bir sayfaya aktarılır.
META HTTP-EQUIV="Content-Type" Content-Base: "http://www.geocities.com/SoHo/Studios/9594 Content Base, sayfa içeriğinin bulunduğu URL'yi gösterir.
Başa dön
Türkçe
Uluslararsı standartlar ensitütüsü ISO-8859-9'u Türkçe standardı olarak kabul ediyor. IE ve Netscape'de bunu destekleyenlerdendir. Türkçe standartlarına uygunluu denetlemek için önce browserinizin düzgün çalıştığından emin olmanız gerekir. Bunun için http://www.immt.pwr.wroc.pl/export_hp/test/ adresinde Browerinizin ISO-8859-9 karakterlerini düzgün gösterip göstermediğini kontrol edin.
ISO8859-9 Ansi-Turkish ve Windows-1254 ile neredeyse aynı karakter tablosuna sahip. ASC-II harfleri olduğu yerde çıkmasına rağmen Batı standardı olan ISO-8859-1 'den farklı olarak Türkçe harfler tanımlıdır.
Ayarlarınız doğru ise hepsinde sorunsuz Türkçe görürsünüz.
Başa dön
Özet:
HTML Basit bir işaretleme dilidir ve Hypertext Markup Language kıstaltmasıdır. WEB'de gördüğünüz tüm *.htm ve *.html uzantılı dokümanlar bu şekilde yazılmış.
body ve /body arasındaki kısım dokümanın ana kısnmını oluşturur.
Burada paragraflar p ile başlar biter. Bundan sonra her ikisini yazmiyacağım. bitişler / içerir. yani paragrafın bittiği yerde istenirse /p konur.
Bu şekilde hazırlanmış doküman web'de belli bir adrese konulunca isteyen buna girip içeriğine bakabilir.
Hala bir çok kişi Browserlerin 3.0 sürümleri kullaniyorlar. Opera kullanlar, Unix, Linux, Mac, OS/2 kullananlar var dünyada.
İletişimin amacı ziyaretçilere sorun çıkartmak olmamalı.
Dokümanın bir yerine resim koymak için, öncelikle en iyisi resim ve doküman aynı dizinde olmalılar. Değillerse resimin bulunduğu yer
dokümana tanıtılmalı. En basit resim ekleme komutu IMG SRC="resim_adi.gif" şeklinde. Bu arada dediğim gibi resim aynı
dizinde olmalı.
Size basit bir HTML örneği veriyorum:
HTML
BODY
PMerhaba /P
IMG SRC="resim.gif"
/BODY
/HTML
Burada merhaba diye bir yazı ve bir'de resim.gif adında bir resim olacak. Bunu notepad'e kopyalayın ve deneme1.htm adı ile kaydedin. Daha sonra Netscape ile deneme belgesini açın. Resim görünmüyorsa o dizin içerisinde resim.gif adında bir dosya olmadığı içindir. Bunu sağladığınız anda yazı ve resim görünecek.
Bazı HTML Linkleri:
GeoCities Home Page Building Resource Guide.
Index Dot HTML
Barebones Guide to HTML
A Beginners Guide to HTML
Ten Commandments of HTML
comp.infosystems.www.authoring.cgi
alt.html.editors.enhanced-html
alt.html.editors.webedit
alt.html.webedit
alt.html.writers
alt.html.writers.guild.list
alt.homepages.xoom
alt.homepages.geocities
Amatör veya profesyonel olarak web tasarım ile uğraşanlar HTML ile mutlaka tanışmışlardır. HTML yazma işini bizim yerimize yapan programlar (Frontpage, Dreamweaver, Namo v.b.) var ve birazda HTML bilgisi ile kolaylıkla kendi sitelerimizi yapabiliriz.
HTML üç kısımdan oluşur. Bunlar;
1. html ; Ana bloktur.Tüm html dosyaları "html /html" arasında yer alır.
2. head ; Tanımlamalar yani kullanıcının browserde görmediği bölümdür. Bu kısımda site ile ilgili açıklamalar, arama motorları için anahtar kelimeler, site başlığı, CSS ve javasciptler gibi bölümler bulunur.
3. body ; Sayfa üzerinde görülecek herşeyin yazıldığı bölümdür. Yani sayfa içeriğinin başlangıç ve bitiş bloğu denebilir.
HTML komutlarının yazılışı;
Html komutları onu yorumlayan browserin anlaması için etiketler kullanılarak yazılır. Bu etiket
" komut1 yazı / komut1 " şeklindedir. Mesela yazıları kalın yazmak için;
b merhaba /b
kullanılır.Burada işaretleri arasındaki "b" bold (kalın) yazı için kullanılan bir html komutudur. Aynı şekilde bu yazıyı kalın ve kırmızı renkte yapmak istersek;
font color="red"b Merhaba /b/font
yazmamız gerekir. Burada dikkat etmemiz gereken nokta font etiketinin içinde bulunan color="red" bölümüdür. Eğer bir yazıya herhangi bir özellik vermek istersek font etiketini kullanıp içerisinde özellikleri belirtmeliyiz. Merhaba yazısının fontunu verdana yapmak istersek
font color="red" face="verdana" yazmamız gerekirdi.
HTML nedir?
NCSA yani National Center for Super Computing Association, değişik firmalar ve bölgeler arasında belge çeşitliğine bir son vermek için hiper metin veya hiper text olarak bilinen HTML işaretleme dilini tanımladı. Bu dil tarayıcı adı verilen yazılımlarda sayfanın gereken biçimde görünmesini sağlar. Sayfa hangi yazılım kullanılırsa kullanılsın aynı biçimde görünecek. Bugün HTML geliştirme ve yaygınlaştırma işini içine sindiremeyen bazı tekel firmalar kendi kodlarını yerleştirmeye çalışsalar dahi HTML salt metin belgelerden sonra dünyada kendi yerini edindi. Tarayıcı yazılımınız sayfanın kaynak kodunu gösterme seçeneği varsa beğendiğiniz bir sayfanın nasıl yazıldığını görebilirsiniz. Örneğin Netscape'de View Source seçeneğini seçerek şu an okumakta olduğunuz sayfanın HTML kodunu görebilirsiniz. Bu kodlardan oluşan belgeye HTML belgesi denmektedir. HTML standardının tanımını bugün http://www.w3.org yapmaktadır. Tüm sorunlarda referans olan kar amacı gütmeyen bu kurumdur.
HTML belgelesinin tarayıcı tarafından uygun bir biçimde görünebilmesi için uygun şekilde başlamalı ve sonlanmalı. Tüm sayfa bu başlangıç ve son arasında yer alır.
Bir HTML sayfasının en basit biçimi şu şekilde:
HTML
HEAD
TITLE
/TITLE
/HEAD
BODY
Sayfanın ana bölümü burada olacaktır.
/BODY
/HTML
Burada dikkat etmeniz gereken bir şey var. Başlama işaretleri köşeli parantez içinde ( ), bitiş işaretleri (/ ) kesmeli köşeli parantez içinde yer alıyor.
Örneğin HTML sayfasının başlangıcı HTML ile açılır, /HTML ile kapatılır.
Başlamak için yukarıdaki kodu kopyalayıp istediğinizi yere yapıştırabilirsiniz. Bu belgeyi salt metin olarak ve *.htm uzantısı ile kaydedin. Belgenizi artık herhangi bir tarayıcıda görebilirsiniz.
HTML öğrenmenin en iyi yolu onu kullanmaktır. Kullandıkça kullanımını bilmediğiniz yeni işaretleri öğrenecek daha gelişmiş sayfalar yapabileceksiniz. Kullandığınız metin düzenleme programında bul/değiştir özelliği bulunması toplu değişiklikler yapmanızı kolaylaştırır. Yaptığınız her sayfa ile yeni şeyler öğreneceksiniz.
Başa dön
Doküman Renkleri
Sayfadaki ana renkler, arkaplan görüntüsü ve bazı diğer öznitelikler BODY işareti tarafından kontrol edilirler.
Dokümandaki öznitelikler BODY gibi basit bir işaretin şu şeklide değiştirilmesi ile oluşur.
BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx"
bgcolor: doküman arkaplan rengi
text: dokümandaki yazının rengi
link: linklerin rengi
vlink: daha önce ziyaret edilmiş linklerin rengi
alink: üzerine tıklandığında aktifleşen linkin alacağı renk.
Bünların hepsini aynı renk yapmayın yoksa hiç bir şey göremeyebilirsiniz. Bunların herhangi birini kullanabilir veya sadece BODY yazarak hiç birini kullanmayabilirsiniz. Bu durumda sayfa görüntülenirken kullanıcı tarayıcısının önceden ayarlı renkleri kullanılacaktır. Renkleri değiştirmek için sadece yukarıdaki xxxxxx leri istediğiniz renk ile değiştirin.
İşte kullanabileceğiniz bir kaç renk:
Beyaz = FFFFFF
Sarı = FFFF66
Kırmızı = FF0000
Gri = CC9999
Mavi = 0000FF
Yeşil = 00FF00
Siyah = 000000
Turkuaz = 00FFFF
Majenta = FF00FF
Mor = CC33FF
Açık Mavi = 00CCFF
Renklerde ilk iki harf maviyi, ikinci iki harf yeşili ve üçüncü iki harf kırmızıyı kontrol eder. Her renk Hexadesimal yani 16 tabanlı olarak belirtilir ve 00'dan FF'ye kadar 256 farklı değer arasında değişebilir. Bu şekilde belirtilebilen renk sayısı 16.777.216'dır. Renkler hakkında internet'te daha fazla bilgi bulabilirsiniz. Beğendiğiniz bir sayfanın renklerini taklit etmek için tarayıcıdaki "View Source" komutunu kullanarak BODY içindeki renkleri kopyalayabilirsiniz.
Öneri başlamak için en basit renkleri kullanabilirsiniz:
body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000"
Deneme ve yanılmalarınız devam ederken, bir süre sonra body işaretlerinden oluşan kendi kütüphaneniz olacaktır.
Body içinde belirtilebilen özniteliklerden biride kenarlardır:
BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 Margins
Başa dön
Arkaplan görüntüleri, sayfa duvarkağıdı
Sayfada düz arkaplan yerine renkli görüntüler kullanmak için background="resimadı" işareti kullanılmaktadır. Örneğin sayfanızda zemin.jpg adlı resimi kullanmak için
BODY BACKGROUND="zemin.jpg" text="#000000" link="#0066CC" vlink="#336600"
işaretini kullanabilirsiniz.
Bu resim sayfa ile aynı dizin içerisinde bulunmalı ve adı küçük/büyükharf olarak tag'de yazılan biçimi ile aynı olmalıdır. İnternet üzerindeki sistemlerin hiçbirinde dosya isimlerinde Türkçe harfler kullanılmamaktadır.
background işareti bgcolor ile birlikte kullanıldığında arkaplan resmi yükleninceye kadar sayfa bgcolor renginde görünecektir.
Başa dön
Yatay çizgiler
sayfa içerisinde istediğiniz yere hr (horizontal ruler) işareti ile yatay bir çizgi atabilirsiniz. Bu çizgi aşağıdakine benzeyecektir:
Bu yatay çizigye bir kaç ekstra özellik kazandırmak mümkün:
Kalınlık: SIZE=sayı
Hizalama: ALIGN=LEFT/RIGHT/CENTER
Genişlik: WIDTH=yüzde veya WIDTH=sayı
Gölgesiz: NOSHADE
Bu özellikleri birleştirerek:
hr size=10 align=left noshade width=50%
aşağıdaki gibi bir çizgi yapmak mümkün:
Sola dayalı, 10 piksel genişliğinde, gölgesiz, ve sayfa genişliğinin yarısı genişlikte bir çizgi.
Web sayfalarında gördüğünüz bir çok süslü çizgi hr işareti ile değil, resimler kullanılarak oluşturulmuştur. Başa dön
Sırasız listeler
Kendi sırasız listelerinizi ul (unordered list) işaretini kullanarak yaratabilirsiniz. Nokta olması istenen her liste maddesi başında li bulunmalıdır. Komut biçimi şu şekilde:
ul
liBirinci madde
liİkinci madde
liÜçüncü Madde
/ul
Sırasız liste şu şeklide görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sırasız listeler istendiğinde iç içe döngülendirilebilir.
ul
liBirinci madde
liİkinci madde
ul
liİkinci madde birnici şık
liİkinci madde ikinci şık
/ul
liÜçüncü madde
/ul
Döngülendirilmiş liste şu şekilde görünecektir.
Birinci madde
İkinci madde
İkinci madde birinci şık
İkinci madde ikinci şık
Üçüncü madde
Başa dön
Sıralı veya Numaralı listeler
Sıralı listeler yaratmak için ol (ordered list) işaretini kullanabilirsiniz.
ol
liBirinci madde
liİkinci madde
liÜçüncü Madde
/ol
Listeniz aşağıdaki gibi görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sıralı listeler sırasız listeler gibi döngülendirilebilirler. Ayrıca sıralı ve sırasız listeler ile karışık iç içe döngüler oluşturmak mümkündür.
Başa dön
Tanım listeleri
Tanım listesini en iyi açıklamanın yolu bir örnek göstermektir.
dl
dt Elmalar
dd Elmalar hakkında bilgi burada verilmektedir.
dt Armutlar
dd Armutlar hakkında bilgi burada verilmektedir.
/dl
İşte yukarıdaki tanım listesi aşağıdaki şekilde görünecekir. Elmalar Elmalar hakkında bilgi burada verilmektedir. Armutlar Armutlar hakkında bilgi burada verilmektedir. dl bunun bir liste olduğunu gösterir.
dt bunun bir liste terimi olduğunu gösterir.
dd bunun bir liste maddesi olduğunu gösterir.
Başa dön
Başlıklar
Tarayıcılar altı başlık düzeyini kabul ederler.
h1Birinci düzey başlık/h1
h2İkinci düzey başlık /h2
h3Üçüncü düzey başlık /h3
h4Dördüncü düzey başlık /h4
h5Beşinci düzey başlık /h5
h6Altıncı düzey başlık /h6
İşte yukarıda tanımlanan başlıklar aşağıdaki gibi görüneceketir. Birinci düzey başlık
İkinci düzey başlık
Üçüncü düzey başlık
Dördüncü düzey başlık
Beşinci düzey başlık
Altıncı düzey başlık
Başa dönOrtalama
Resim veya metinleri CENTER işaretleri arasına alarak ortalayabilirsiniz.
Örnek olarak
center Bu yazı ortalanacaktır /center
yazısı aşağıdaki gibi görünecektir:
Bu yazı ortalanacaktır.
Ortalanan birden fazla satır varsa başlangıç ve bitiş işareteri arasındaki tüm satırlar ortalanır.
HTML 3.0'da Dvisin içerisinde align: "Left", "Right" ve "Center" tanımlı. Html 4.0 Tag'ı olan Align:"Justify" bir çok Browserde sorun yaratabilir. Bu nedenle sayfanız düzgün görünsün istiyorsanız bir süre için kullanmamanızı öneririm.
DIV ALIGN="CENTER"Bu yazı ortalanacaktır/DIV ve
CENTER Bu yazı ortalanacaktır /CENTER arasındaki tek fark CENTER işaretinin tüm tarayıcılar tarafından desteklenmesidir.
Başa dön
Ön biçimli metin:
Bazen daha önce yazdığımız ve biçimlendirdiğimiz metinleri HTML içerisinde biçimleri bozulmadan kullanmak gerekir. Bu durumlarda metin parçasını pre işareti içine koymak yeterlidir.
Örnek: b e nd a ğ ı nık b i rada m ı mbır ak ındağ ı nıkk a l s ı npre içine aldığımız metinlerin biçimi korunmuş olacak.
Başa dön
Koyu, eğik, vs.
Bir metin parçasının biçimini bu işaretler ile kolayca değiştirebilirsiniz.
Koyu görünmesini istediğini metin parçasını b işaretleri içine yerleştirin.
b Koyu yazı /b
Yazınız aşağıdaki gibi görünecektir.
Koyu yazı
Eğik görünmesini istediğiniz yazıyı i işaretleri arasına yerleştirin.
i Eğik yazı /i
Yazınız aşağıdaki gibi görünecektir.
Eğik yazı
Hem eğik hem koyu görünmesini istediğiniz yazıda her iki işareti kullanabilirsiniz.
bi Koyu ve Eğik Yazı/i/b
Yazınız aşağıdaki gibi görünecektir.
Koyu ve Eğik Yazı
Her iki işareti kullandığınız durumda işaretleri açma sırasına göre kapatmalısınız. Örneğin Koyu yazı eğikten önce açılmışsa, sonra kapatılmalıdır. Aşağıda anlatılan işaretler için aynı kurallar geçerlidir.
Diğer komutlar gayet basi ve kullanımı diğerleri gibidir. Her birinden birer örnek yeter diye düşünüyorum.
UAlt Çizgili/U
Alt Çizgili
STRIKEÜstü Çizgili/STRIKE
Üstü Çizgili
StrongGüçlü/Strong
Güçlü
EMVurgu/EM
Vurgu
BIGBüyük/BIG İç içe döngü OK
Büyük
SmallKüçük/Small İç içe döngü OK
Küçük
SUB Alt yazı /SUB
Alt yazı Alt yazı
SUP Üst yazı /SUP
Üst yazı Üst yazı
FONT SIZE=+1 /FONT Font boyutunu arttırır.
SAMPÖrnek Kod /SAMP
Örnek Kod
CODEÖrnek Kod /CODE
Örnek Kod
TTTeletype /TT
Teletype
VARDeğişken Notu /VAR
Değişken
CITEKısa Not /CITE
Kısa Not
Göz kırpan şeyler:
Basit bir işaret ile metinde bir noktanın yanıp sönerek göz kırpmasını sağlayabiliriz.
You can make text or graphics blink on and off by surrounding them with tags.
İşte işaret:
blink Yanıp sönerim! /blink
Ve yazı böyle görünecektir.
Yanıp sönerim!
Bunu fazla yapmamaya dikkat edin. Başa dön
Yazıtipi rengi:
FONT COLOR=#KKYYMM Yazının bulunduğu yer /FONT Yazı rengini değiştirir
İlk iki harf kırmızı pixeli, orta iki harf yeşil, son iki harf mavi pixel renk değerini belirler. Değerleri 0-F arası değişebilir. 000000 hepsi sönük yani siyah, FFFFFF hepsi tam şiddet yani beyaz...
FONT COLOR="#000000"Siyah/FONT
FONT COLOR="#FF0000"Kırmızı/FONT
FONT COLOR="#00FF00"Yeşil /FONT
FONT COLOR="#0000FF"Mavi/FONT
FONT COLOR="#FFFF00"Sarı/FONT
FONT COLOR="#FF00FF"Mor/FONT
FONT COLOR="#00FFFF"Turkuaz/FONT
FONT COLOR="#FFFFFF"Beyaz/FONT |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Başa dön
Yazı Tipleri:
font face="Kidprint"Font biçimi /font ile yeni nesil tarayıcılar için yazıtipi tanımı yapılabilmesine rağmen bu yazıtipinin aynı zamanda diğer işletim sisteminde ve kullanıcıda bulunması gerekir. Bu kısıtlılık nedeniyle sayfaları hazırlarken kullanıcının varsayılan yazıtipi ile okunabilmesi için mümküm olduğu kadar yazıtipleri arasında az geçiş yapmak gerekir. Örnekteki yazının düzyün okunabilmesi için sistemde kidsprint yazıtipi bulunması gerekir. Çok özel biçimse ve yazıtipi efektleri kullanmak gerekiyorsa .gif formatında düşük renk sayısı ile yazılması, yazının her sistemde düzgün ve aynı biçimde görünmesini garanti eder.
Başa dön
Paragraf ve satırbaşı
Tarayıcılar sizin sayfanızı nasıl düzenlediğinize bakmazlar. Onlar işretlere bakarlar. Satırbaşı ve paragraf işaretleri olmadığı sürece metin tek paragraf halinde devam eder. Bu işaretleri gördüklerinde satırlar erkenden son bulur.
br yani satır başının yaptığı etki metin parçasını boşluk bırakmadan yeni bir satırdan devam ettirmesidir.
p yani paragraf işaretinin tek farkı yeni başlayacak metin parçasından önce bir satırlık boşluk bırakmasıdır. Başa dön
Belge içerisinde başka yere atlama
Belge içinde gidilecek yerleri tanımlayıp bir tıklama ile sayfanın o bölümüne gidilmesini sağlayabilirsiniz.
Bu işlemi geçekleştirmek iki aşamalıdır.
1. Hedef belirlemek Sayfada gidilecek noktaya hedef veya target adı verilmektedir. Gidilecek her noktanın bir adı olmalıdır. Bu adı daha önce tanımlamak gerekmektedir. a name="hedef_adi" Bu tanım gidilecek yerde olmalıdır.
2. Bağlantı yaratmak: Link içinde iki şey'i tanımlamak gerekmektedir. Tıklanacak metin, ve gidilecek nokta
a href="#hedef_adi"Tıklanacak yazı/a
Link olarak tanımladığımız yazı, altı çizgili ve body içinde tanımlı link rengi ile görünecektir. Üzerine tıklandığında kullanıcı hedef olarak tanımladığımız noktaya gidecektir. Bu sayfadaki Başa dön işaretleri ve içindekiler bölümü bu tarz bir sayfa içi atlamanın örnekleridir.
Aynı sistemde başka dokümana atlama
Tarayıcının aynı sistem üzerinde bulunan başka bir belgeye gitmesini sağlamak oldukça kolay. Gidilecek belgeniz üzerinde çalıştığınız doküman ile aynı dizin içerisinde bulunuyorsa sadece belgenin adını yazmak yeterlidir.
a href="boludagece.jpg" Bolu'da Gece /a
Bolu'da Gece
Bunun için sadece belgenin bulunduğu dizinin göreceli veya mutlak konumu ve gidilecek dokümanın adını belirtmek yeterlidir.
a href="göreceli_yol_ve_dosaya_adi"Link Yazisi/a
Örnekler:
Kök dizinde bulunan varsayılan belge:
a href="/"Ana sayfa/a
Bu sunucu üzerindeki Ana sayfa
Sunucu üzerinde /SoHo/Museum/9404/ dizininde bulunan barutcu.jpg resim belgesi
A HREF="../SoHo/Museum/9404/barutcu.jpg" Şinasi Barutçu/A
Şinasi Barutçu
Mevcut dizinin altında olan eski altdizin'indeki aramis.htm belgesi
A HREF="eski/aramis.htm" Aramis /A
Mevcut dizinin bir üst dizininde bulunan scandisk.txt saltmetin belgesi
A HREF="../scandisk.txt"Scandisk Hakkında/A
Başa dön
Başka sistemdeki bir bölüme atlama
Internet'in temel özelliklerinden biri URL adı verilen evrensel kaynak belirleyici kodlama sistemidir. Bu dünyanın neresinde olursa olsun size başka bir sunucu üzerinde başka bir dokümana veya dizine kolaylıkla erişmenizi sağlar. Bu kaynaklar sadece WWW diye bilinen ve adresleri http:// ile başlayan web ile sınırlı değildir.
Kullanıcıyı hipermetin aktarım protokolu (hyper text transfer protocol, http) ile çalışan herhangi bir sisteme yönlendirmek için evrensel kaynak belirleyici tipini belirtmek kullanımı zorunludur. Bu örnekte URL veya internet adresi veya evrensel kaynak belirleyici olarak http:// kullanılmıştır. Gidilecek sayfa http://www.boyutbilgi.com.tr/ifsaksergi/index.html olsun
a href="http://www.boyutbilgi.com.tr/ifsaksergi/index.html""IFSAK Sanal Ortam Sergisi"ne Git /a
"IFSAK Sanal Ortam Sergisi"ne Git
Şifreli http protokolu:
A HREF="https://sunucu.adı"Link Yazısı/A
Kullanımı http'ye benzer.
Daha önce belirtildiği gibi tek URL tipi http değildir. Diğer protokoller için farklı evrensel kaynak belirleyiciler vardır.
Bunların kullanımını örnekler ile açıklamayalım. Protokollerin ne anlama geldiğini açıklamak bu belgenin kapsamı dışındadır.
Haber grupları:
Varsayılan sunucu üzerindeki grup adına yönelik linkler:
A HREF="news:grup_adi"Link Yazısı/A
A HREF="news:soc.culture.turkish" SCT/A
SCT
Sunucuya yönlendirilmiş linkler:
A HREF="news://sunucu_adi"Link Yazısı/A
A HREF="news://news.istanbul.edu.tr"Istanbul Üniversitesi Haber Sunucusu/A
Istanbul Üniversitesi Haber Sunucusu
Belli sunucu üzerindeki gruba yönelik evrensel kaynak belirleyiciler:
A HREF="news://sunucu_adi/grup_adı"/A
A HREF="news://news.marun.edu.tr/alt.culture.turkish.internet"acti grubu/A
acti grubu
Secure (Şifreli, Güvenli) iletişim destekleyen haber sunucusu:
A HREF="snews:secnews.netscape.com"Netscape Güvenli Haber Sunucusu/A
Netscape Güvenli Haber Sunucusu
Kullanıcı hesabı kullanılarak haber sunucusuna bağlantı:
A HREF="news://kullanıcı_adi:şifresi@sunucu.adı/"Link Yazısı/A
Dosya aktarım protokolu (FTP) link'i
A HREF="ftp://ftp.zdnet.com"ZDnet FTP sunucusu/A
ZDnet FTP sunucusu
Kullanıcı hesabı kullanılarak FTP'ye bağlantı:
A HREF="ftp://kullanıcı_adi:şifresi@ftp.sunucu.adı/"Link Yazısı/A
Her hangi bir e-mail adresine gönderilecek mektup:
A HREF="mailto:kullanıcı@doamin.adı"Link Yazısı/A
A HREF="mailto:nevilo@yahoo.com"Nevit'e mektup/A
Nevit'e mektup
Birden fazla kullanıcıya mektup:
A HREF="mailto:kullanici1@domain1.adi?to=kullanici2@ domain2.adi&to=kullanici3@domain3.adi"Link Yazısı/A
Birden fazla adrese e-mail
Mektup içerisinde varsayılan başlık ve metin:
A HREF="mailto:kullanıcı_adi@domain.adi.net?subject= Başlık Buraya&body=Gövde içindeki yazı"Link Yazısı/A
Varsayılan Başlık ve Yazı içeren mektup
Telent protokolu, uzaktaki bilgisayara terminal bağlantısı:
A HREF="telnet://sunucu.adi"Link Yazısı/A
A HREF="telnet://ttnbbs.rtpnc.epa.gov"Air Polution BBS USA/A
Air Polution BBS USA
Gopher Protokolu:
A HREF="gopher://sunucu.adi"Link Yazısı/A
A HREF="gopher://gopher.metu.edu.tr"ÖDTÜ Gopher Sunucusu/A
ÖDTÜ Gopher Sunucusu
Başa dön
Sayfalara resim ekleme
Tüm tarayıcıların resim desteklemediğini unutmayın. Sayfanız ne olursa olsun resimsiz görünebilmeli. Bu sayfayı ziyaret edenlere daha fazla serbesti sağlayıp, resimlerin görünemediği durumlarda sayfaya gelen ziyaretçiyi eli boş döndürmemiş olmaya yarar.
HTML'de resimler yazılardan bağımsız bir şekilde sunucu üzerinde ayrı dosyalar olarak bulunurlar. Resim ancak gif ve jpg gibi tarayıcının içinden görünebilien formatta ise sayfada kullanılabilir. Resimler evrensel kaynak belirleyici kuralları dahilinde internetin herhangi bir yerinden çağrılabilirler. Çağrılan resim aynı dizin içerisinde ise konum kısmına sadece dosya adının yazılması yeterli olacaktır.
IMG SRC="resim.gif"
IMG SRC="http://sunucu.adi/dizin_adi/resim.jpg"
Diğer sayfa elemanları gibi resimlere link eklemek olasıdır. Diyelimki resim.jpg'ye tıklayınca dosya.htm veya belirli bir adresin açılmasını istiyoruz:
A HREF="dosya.htm"IMG SRC="resim.gif"/A
A HREF="Gidilecek_Adres"IMG SRC="http://sunucu_adi/dizin_adi/resim.jpg"/A
Resimler hakkında söylenmesi gereken en önemli şey boyutudur. Aşırı veya bilinçsiz kullanımı sayfanızı gerçekten ağırlaştırabilir. Sayfanızın şimşek gibi açılmasını istiyorsanız resim boyutlarını 1-5K arasında tutmaya çalışıp, tüm sayfa artı resimlerin 30K'ye geçmemesine dikkat edin. Bir birine atlayan sayfalarınız varsa aynı resimleri tekrar kullanmaya çalışıp yeni resim sayısını azaltın.
Resimler içerisinde kullanılan ekstra bazı işaretler zaman içerisinde gereklilik nedeniyle doğmuştur.
WIDTH=300 HEIGHT=200 Resim boyutları, HTML içinde belirtildiğinde sayfa daha çabuk yüklenir, tarayıcı sayfayı çizmek için gereken resim boyutunu almak için sunucunun yanıtını beklemek zorunda kalmaz.
ALT="resim yazısı" Alt işareti, resim yokluğunda ve yükleninceye kadar görünen yazı.
BORDER=sayı kenar kalınlığı, mevcut renk ile istenen kalınlıkta gösterilir.
VSPACE=Sayı HSPACE=Sayı Resim etrafında dikey ve yatay eksende kullanılacak boşluk.
ALIGN=TEXTTOP/ABSCENTER/ABSBOTTOM/BOTTOM
ALIGN=LEFT/CENTER/RIGHT Hizalama işaretleri, gerektiğinde resim ile birlikte kullanılabilir.
LOWSRC="dusuk_rezolusyon.gif" Asıl resim yükleninceye kadar çabuk yüklenebilen düşük çözünürlüklü resim.
IMG SRC="deneme.gif" WIDTH=300 HEIGHT=200 ALT="resim yazısı" BORDER=0 Başa dön
Ses Dosyaları
Bir Sayfa yüklendiğinde otomatik olarak ses dosyasının çalması nasıl sağlanır?
EMBED SRC="ses.wav" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=3 WAV
EMBED SRC="ses.au" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=2 AU
EMBED SRC="children.mod" HIDDEN="FALSE" WIDTH="166" HEIGHT="95" autostart="true" loop="false" MOD
EMBED SRC="enter.mid" HIDDEN=true AUTOSTART=true LOOP=true MIDI
Aktif Ses Kullanımı:
EMBED SRC="ses.wav" NAME="snd" WIDTH="1" HEIGHT="2" SES Here is a A HREF="page.htm"
OnMouseOver="Play_()"link/A aktif ses Başa dön
Tablolar:
Tablolar artık HTML'nin vazgeçilmez parçalarıdır. Tablolar TABLE ile tanımlanır. /TABLE ile biter. Her satır: TR ile başlar /TR ile biter. Haneler: TD ile başlar /TD ile biter. Başlık kısmı CAPTION içindedir. Border=0 tablo kenar kalınlığını belirtir.
İşte basit bir tablo:
TABLE Border=1
CAPTIONBaşlık/CAPTION
TRTDsatır1 Sutun1/TDTDsatır1 Sütün2/TD/TR
TRTDSatır 2 Sutun 1/TDTDSatır 2 Sütün 2/TD/TR
/TABLE
Tablo başlık kısmıda TABLE içerisinde kullanılabilen seçenekler şu şekilde:
Border=sayı tablo kenar kalınlığı
Width=sayı tablo genişliği, piksel olarak
Width=yüzde tablo genişliği, yüzde olarak bu ikisinden sadece biri kullanılabilir.
CELLPADDING=sayı Nesne-hücre aralığı
CELLSPACING=sayı Hücre-Hücre aralığı
BGCOLOR="#xxxxxx" Tablo Arkaplan Rengi
BACKGROUND="resim.jpg" Tablo Arkaplan Resmi
ALIGN=right/left/center Tablo hizalama
COLS=sayı Sütün sayısı ( #n adet eşit genişlikte sütün, eşit sütün genişlikli tablo)
Satır TR içerisinde kullanılan komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Satır Arkaplan rengi
BACKGROUND="resim.jpg" Satır Arkaplan Resmi
Hücre TD içerisinde HTML elemanlarının kendi komutlarına ilave olarak kullanılabilen komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Hücre Arkaplan rengi
BACKGROUND="resim.jpg" Hücre Arkaplan Resmi
COLSPAN="2" Birleşen kolon sayısı
ROWSPAN="2" Birleşen satır sayısı
İç içe tablo kullanabilirmiyim? Hanelerin içerisinde ikinci bir tablo dahil HTML elemanlarından herhangi biri olabilir.
Bir sayfada yan yana dört resim yerleştirip, altına adlarını yazmak istiyorum.
İlk önce, 4 sütün 4 satır bir tablo yaratın. Her tablo satırı TR ile başlar /TR ile biter. Haneler td ile başlar /td ile
biter.
TABLE Border=0
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
/TABLE
Resimleri hanelere yani td ve /td arasına yerleştirin. Tablo elemanlarında önemli olan elamanın /td ve td arasına gelmemesidir. Yazıyı bir sonraki satırda aynı hanenin altına denk gelecek şekilde yerleştirin.
Bir kaç resmi birleştirip tek resimmiş gibi yüklemek istiyorum:
table cellpadding="0" cellspacing="0" border="0"
0 aralıklı bir tablo tanımlar. Hücreler içerisindeki resimler arasında mesafe yoktur. Başa dön
Formlar:
Formlar kullanıcılardan gelen bilgileri standart şekillerde alan sayfanın etkileşimli alanlarıdır. Form kullanmanın e-mail almaya göre bir çok avantajı var. Eğer uygun yazılımlar geliştirirseniz form bilgilerini doğrudan istediğiniz yazılıma yönlenirebilirsiniz. Herhangi bir yazılım kullanmıyorsanız formunuzu ilk örnekteki gibi salt metin olarak e-mail adresinize gelecek şekilde ayarlayabilirsiniz.
form action="mailto:kullanici@adresiniz.net?subject=Kon u Başlığı" method="POST" enctype="text/plain"
Form Elemanları
/form
Cgi için örnek POST komutu:
form method="post" action="http://sunucu_adi/cgi-bin/program_adi.pl?değişken"
/form
GET komutu nadir kullanıldığından anlatılmayacak.
Formlarda kullanılan bazı alan seçenekleri:
Radyo Buton'u tipi:
BRSoru1.
BRINPUT TYPE=Radio CHECKED NAME="Soru_adi1" VALUE="Birinci_Yanıt" İkinci_Yanıt
BRINPUT TYPE=Radio NAME="Soru_adi1" VALUE="İkinci_Yanıt" İkinci_Yanıt
BRINPUT TYPE=Radio NAME="Soru_adi1" VALUE="Üçüncü_Yanıt" Üçüncü_Yanıt
Liste tipi soru:
BRSoru2BR
SELECT NAME="Soru_adi2"
OPTION Seçenek1
OPTION Seçenek2
OPTION Seçenek3
/SELECTBR
Küçük metin:
BRSoru3:BR
INPUT TYPE=Text NAME="Soru_adi3" VALUE="varsayılan_değer" SIZE=25 MAXLENGTH=30BR
Geniş metin alanı:
TextArea NAME="Soru4" ROWS=7 COLS=35 MAXLENGTH=100
Varsayılan Yazı
/TextAreaBR
Kutu işaretleme tipi soru
Br INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek1"seçenek1
BR INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek2"seçenek2
BR INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek3"seçenek3
/UL
Gönderme ve Sıfırlama butonları:
INPUT TYPE=Submit NAME="Gönder" VALUE="Gönder"
INPUT TYPE=Reset NAME="Reset" VALUE="Reset"
Başa dön
Çerçeveler, Frames
Çerçeveler veya Frames Netscape Navigator (2.0 üstü) ve Internet Explorer (3.0 üstü) tarafından desteklenen işaretlerdir. Aynı çerçeve içerisinde birden fazla sayfanın açılmasını sağlar. Çerçeve yapısı HTML'ye benzerdir, sadece BODY yerine FRAMESET içerir.
FRAMESET çerçeve içeren dokümanın hangi dokümanların bileşiminden oluşacağını ve bu dokümanların hangi biçimde yan yana geleceğini tanımlayan basit bir dokümandır. FRAMESET'den önce herhangi bir işaret olmamalıdır, yoksa tarayıcı tarafından gözardı edilir.
Örnek bir Frame dokümanı:
HTML
HEAD
/HEAD
FRAMESET
/FRAMESET
/HTML
Frame set içerisinde ROWS ve COLS yardımı ile dokümanın yaty mı dikey mi bölüneceği tanımlanır. Yine Frameset içerisinde her bölmeye ayrılan alan piksel veya yüzde olarak tanımlanabilir.
Yatay bölünen doküman:
ROWS="row_height_value_list"
FRAMESET ROWS="20%,60%,20%"
FRAMESET ROWS="100,*,100"
Frame komutu ilave olarak içerideki belgelerin özelliklerini belirler, dikkat ederseniz her pencereye bir isim verildi. Bundan sonra kullanılacak linklerde bu isimlerin kullanımı tıkalndığında istenen belgenin hangi çerçevede açılacağını belirler.
Aşaığdaki örnekte ilk sütün 150 piksel genişlikte, soldaki çerçevenin adı solframe, sağdaki çerçevenin adı sagframe olarak atandı. Solda açılacak belge solsayfa.htm sağda açılacak belge ise sagsayfa.htm adını taşıyor.
FRAMESET COLS="150,*"
FRAME SCROLLING="yes" NAME="solframe" SRC="solsayfa.htm"
FRAME SCROLLING="yes" NAME="sagframe" SRC="sagsayfa.htm"
/FRAMESET
Frame komutunda kullanılan seçenekler:
SCROLLING="yes|no|auto"
NORESIZE
Çerçevesiz Doküman:
noframes a href="main.html"Ana sayfa/a /noframes
Çerçeveler sonlandırılmak istendiği zaman top seçeneği kullanılmalıdır.
a href="test.html" target="_top"Çerçeveden Çık/a Çerçeveden Çık
Başa dön
Comment Tag, veya Bilgi
!-- -- işareti içerisinde yazılanlar sayfa içerisinde görünmez ve sadece view source yapıldığı zaman bilgi verme amacını taşır. Bazı Javascript program parçalarnı eski tarayıcılardan saklamak için yine !-- -- kullanılır. Eski programa dillerine alışkın olanlar için bu işareti REM ibaresine benzetebiliriz. Başa dön
META-işaretler:
Meta işaretler tarayıcılar, arama motorları ve sayfaya gelebilecek yazılımlara yönelik bilgiler içeren işaretlerdir. Sık kullanılan bir kaç Metaişaretin anlamını açıklamak yeterli olacaktır. Meta işaretler sayfada HEAD bölümü içerisine yerleştirlir.
META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9" Turkish Metatag, Sayfanın Türkçe olduğunu ve uluslarası standart ensititüsünün ISO-8859-9 standardına uygun yapıldığını gösterir.
META NAME="generator" CONTENT="Yazılım Adı" Generator Meta tag, sayfanın hangi yazılım ile hazırlandığını gösterir.
META NAME="Author" CONTENT=" Nevit " Author Meta tag sayfanın hazırlayıcısı olan kişiyi gösterir.
META NAME="keywords" CONTENT="keyword, keyword, keyword" Content Meta tag Anahtar kelimelerin burada bulunması sadece bu bölüme bakan bazı arama motorlarının işini kolaylaştırır.
META NAME="description"CONTENT=" Sayfanın tanımı " Description Meta tag Bazı arama motorları arama motorunu kullanan kişilere bu bölümü gösterirler.
META HTTP-EQUIV="Refresh" CONTENT="7;URL=index.html" Refresh, İtme teknolojisi ile devreye giren bir meta işarettir. Sayfaya gelen kişi herhangi bir işlem yapmasa bile başka bir sayfaya aktarılır.
META HTTP-EQUIV="Content-Type" Content-Base: "http://www.geocities.com/SoHo/Studios/9594 Content Base, sayfa içeriğinin bulunduğu URL'yi gösterir.
Başa dön
Türkçe
Uluslararsı standartlar ensitütüsü ISO-8859-9'u Türkçe standardı olarak kabul ediyor. IE ve Netscape'de bunu destekleyenlerdendir. Türkçe standartlarına uygunluu denetlemek için önce browserinizin düzgün çalıştığından emin olmanız gerekir. Bunun için http://www.immt.pwr.wroc.pl/export_hp/test/ adresinde Browerinizin ISO-8859-9 karakterlerini düzgün gösterip göstermediğini kontrol edin.
ISO8859-9 Ansi-Turkish ve Windows-1254 ile neredeyse aynı karakter tablosuna sahip. ASC-II harfleri olduğu yerde çıkmasına rağmen Batı standardı olan ISO-8859-1 'den farklı olarak Türkçe harfler tanımlıdır.
Ayarlarınız doğru ise hepsinde sorunsuz Türkçe görürsünüz.
Başa dön
Özet:
HTML Basit bir işaretleme dilidir ve Hypertext Markup Language kıstaltmasıdır. WEB'de gördüğünüz tüm *.htm ve *.html uzantılı dokümanlar bu şekilde yazılmış.
body ve /body arasındaki kısım dokümanın ana kısnmını oluşturur.
Burada paragraflar p ile başlar biter. Bundan sonra her ikisini yazmiyacağım. bitişler / içerir. yani paragrafın bittiği yerde istenirse /p konur.
Bu şekilde hazırlanmış doküman web'de belli bir adrese konulunca isteyen buna girip içeriğine bakabilir.
Hala bir çok kişi Browserlerin 3.0 sürümleri kullaniyorlar. Opera kullanlar, Unix, Linux, Mac, OS/2 kullananlar var dünyada.
İletişimin amacı ziyaretçilere sorun çıkartmak olmamalı.
Dokümanın bir yerine resim koymak için, öncelikle en iyisi resim ve doküman aynı dizinde olmalılar. Değillerse resimin bulunduğu yer
dokümana tanıtılmalı. En basit resim ekleme komutu IMG SRC="resim_adi.gif" şeklinde. Bu arada dediğim gibi resim aynı
dizinde olmalı.
Size basit bir HTML örneği veriyorum:
HTML
BODY
PMerhaba /P
IMG SRC="resim.gif"
/BODY
/HTML
Burada merhaba diye bir yazı ve bir'de resim.gif adında bir resim olacak. Bunu notepad'e kopyalayın ve deneme1.htm adı ile kaydedin. Daha sonra Netscape ile deneme belgesini açın. Resim görünmüyorsa o dizin içerisinde resim.gif adında bir dosya olmadığı içindir. Bunu sağladığınız anda yazı ve resim görünecek.
Bazı HTML Linkleri:
GeoCities Home Page Building Resource Guide.
Index Dot HTML
Barebones Guide to HTML
A Beginners Guide to HTML
Ten Commandments of HTML
comp.infosystems.www.authoring.cgi
alt.html.editors.enhanced-html
alt.html.editors.webedit
alt.html.webedit
alt.html.writers
alt.html.writers.guild.list
alt.homepages.xoom
alt.homepages.geocities HTML nedir?
NCSA yani National Center for Super Computing Association, değişik firmalar ve bölgeler arasında belge çeşitliğine bir son vermek için hiper metin veya hiper text olarak bilinen HTML işaretleme dilini tanımladı. Bu dil tarayıcı adı verilen yazılımlarda sayfanın gereken biçimde görünmesini sağlar. Sayfa hangi yazılım kullanılırsa kullanılsın aynı biçimde görünecek. Bugün HTML geliştirme ve yaygınlaştırma işini içine sindiremeyen bazı tekel firmalar kendi kodlarını yerleştirmeye çalışsalar dahi HTML salt metin belgelerden sonra dünyada kendi yerini edindi. Tarayıcı yazılımınız sayfanın kaynak kodunu gösterme seçeneği varsa beğendiğiniz bir sayfanın nasıl yazıldığını görebilirsiniz. Örneğin Netscape'de View Source seçeneğini seçerek şu an okumakta olduğunuz sayfanın HTML kodunu görebilirsiniz. Bu kodlardan oluşan belgeye HTML belgesi denmektedir. HTML standardının tanımını bugün http://www.w3.org yapmaktadır. Tüm sorunlarda referans olan kar amacı gütmeyen bu kurumdur.
HTML belgelesinin tarayıcı tarafından uygun bir biçimde görünebilmesi için uygun şekilde başlamalı ve sonlanmalı. Tüm sayfa bu başlangıç ve son arasında yer alır.
Bir HTML sayfasının en basit biçimi şu şekilde:
HTML
HEAD
TITLE
/TITLE
/HEAD
BODY
Sayfanın ana bölümü burada olacaktır.
/BODY
/HTML
Burada dikkat etmeniz gereken bir şey var. Başlama işaretleri köşeli parantez içinde ( ), bitiş işaretleri (/ ) kesmeli köşeli parantez içinde yer alıyor.
Örneğin HTML sayfasının başlangıcı HTML ile açılır, /HTML ile kapatılır.
Başlamak için yukarıdaki kodu kopyalayıp istediğinizi yere yapıştırabilirsiniz. Bu belgeyi salt metin olarak ve *.htm uzantısı ile kaydedin. Belgenizi artık herhangi bir tarayıcıda görebilirsiniz.
HTML öğrenmenin en iyi yolu onu kullanmaktır. Kullandıkça kullanımını bilmediğiniz yeni işaretleri öğrenecek daha gelişmiş sayfalar yapabileceksiniz. Kullandığınız metin düzenleme programında bul/değiştir özelliği bulunması toplu değişiklikler yapmanızı kolaylaştırır. Yaptığınız her sayfa ile yeni şeyler öğreneceksiniz.
Başa dön
Doküman Renkleri
Sayfadaki ana renkler, arkaplan görüntüsü ve bazı diğer öznitelikler BODY işareti tarafından kontrol edilirler.
Dokümandaki öznitelikler BODY gibi basit bir işaretin şu şeklide değiştirilmesi ile oluşur.
BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx"
bgcolor: doküman arkaplan rengi
text: dokümandaki yazının rengi
link: linklerin rengi
vlink: daha önce ziyaret edilmiş linklerin rengi
alink: üzerine tıklandığında aktifleşen linkin alacağı renk.
Bünların hepsini aynı renk yapmayın yoksa hiç bir şey göremeyebilirsiniz. Bunların herhangi birini kullanabilir veya sadece BODY yazarak hiç birini kullanmayabilirsiniz. Bu durumda sayfa görüntülenirken kullanıcı tarayıcısının önceden ayarlı renkleri kullanılacaktır. Renkleri değiştirmek için sadece yukarıdaki xxxxxx leri istediğiniz renk ile değiştirin.
İşte kullanabileceğiniz bir kaç renk:
Beyaz = FFFFFF
Sarı = FFFF66
Kırmızı = FF0000
Gri = CC9999
Mavi = 0000FF
Yeşil = 00FF00
Siyah = 000000
Turkuaz = 00FFFF
Majenta = FF00FF
Mor = CC33FF
Açık Mavi = 00CCFF
Renklerde ilk iki harf maviyi, ikinci iki harf yeşili ve üçüncü iki harf kırmızıyı kontrol eder. Her renk Hexadesimal yani 16 tabanlı olarak belirtilir ve 00'dan FF'ye kadar 256 farklı değer arasında değişebilir. Bu şekilde belirtilebilen renk sayısı 16.777.216'dır. Renkler hakkında internet'te daha fazla bilgi bulabilirsiniz. Beğendiğiniz bir sayfanın renklerini taklit etmek için tarayıcıdaki "View Source" komutunu kullanarak BODY içindeki renkleri kopyalayabilirsiniz.
Öneri başlamak için en basit renkleri kullanabilirsiniz:
body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000"
Deneme ve yanılmalarınız devam ederken, bir süre sonra body işaretlerinden oluşan kendi kütüphaneniz olacaktır.
Body içinde belirtilebilen özniteliklerden biride kenarlardır:
BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 Margins
Başa dön
Arkaplan görüntüleri, sayfa duvarkağıdı
Sayfada düz arkaplan yerine renkli görüntüler kullanmak için background="resimadı" işareti kullanılmaktadır. Örneğin sayfanızda zemin.jpg adlı resimi kullanmak için
BODY BACKGROUND="zemin.jpg" text="#000000" link="#0066CC" vlink="#336600"
işaretini kullanabilirsiniz.
Bu resim sayfa ile aynı dizin içerisinde bulunmalı ve adı küçük/büyükharf olarak tag'de yazılan biçimi ile aynı olmalıdır. İnternet üzerindeki sistemlerin hiçbirinde dosya isimlerinde Türkçe harfler kullanılmamaktadır.
background işareti bgcolor ile birlikte kullanıldığında arkaplan resmi yükleninceye kadar sayfa bgcolor renginde görünecektir.
Başa dön
Yatay çizgiler
sayfa içerisinde istediğiniz yere hr (horizontal ruler) işareti ile yatay bir çizgi atabilirsiniz. Bu çizgi aşağıdakine benzeyecektir:
Bu yatay çizigye bir kaç ekstra özellik kazandırmak mümkün:
Kalınlık: SIZE=sayı
Hizalama: ALIGN=LEFT/RIGHT/CENTER
Genişlik: WIDTH=yüzde veya WIDTH=sayı
Gölgesiz: NOSHADE
Bu özellikleri birleştirerek:
hr size=10 align=left noshade width=50%
aşağıdaki gibi bir çizgi yapmak mümkün:
Sola dayalı, 10 piksel genişliğinde, gölgesiz, ve sayfa genişliğinin yarısı genişlikte bir çizgi.
Web sayfalarında gördüğünüz bir çok süslü çizgi hr işareti ile değil, resimler kullanılarak oluşturulmuştur. Başa dön
Sırasız listeler
Kendi sırasız listelerinizi ul (unordered list) işaretini kullanarak yaratabilirsiniz. Nokta olması istenen her liste maddesi başında li bulunmalıdır. Komut biçimi şu şekilde:
ul
liBirinci madde
liİkinci madde
liÜçüncü Madde
/ul
Sırasız liste şu şeklide görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sırasız listeler istendiğinde iç içe döngülendirilebilir.
ul
liBirinci madde
liİkinci madde
ul
liİkinci madde birnici şık
liİkinci madde ikinci şık
/ul
liÜçüncü madde
/ul
Döngülendirilmiş liste şu şekilde görünecektir.
Birinci madde
İkinci madde
İkinci madde birinci şık
İkinci madde ikinci şık
Üçüncü madde
Başa dön
Sıralı veya Numaralı listeler
Sıralı listeler yaratmak için ol (ordered list) işaretini kullanabilirsiniz.
ol
liBirinci madde
liİkinci madde
liÜçüncü Madde
/ol
Listeniz aşağıdaki gibi görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sıralı listeler sırasız listeler gibi döngülendirilebilirler. Ayrıca sıralı ve sırasız listeler ile karışık iç içe döngüler oluşturmak mümkündür. Başa dön
Tanım listeleri
Tanım listesini en iyi açıklamanın yolu bir örnek göstermektir.
dl
dt Elmalar
dd Elmalar hakkında bilgi burada verilmektedir.
dt Armutlar
dd Armutlar hakkında bilgi burada verilmektedir.
/dl
İşte yukarıdaki tanım listesi aşağıdaki şekilde görünecekir. Elmalar Elmalar hakkında bilgi burada verilmektedir. Armutlar Armutlar hakkında bilgi burada verilmektedir. dl bunun bir liste olduğunu gösterir.
dt bunun bir liste terimi olduğunu gösterir.
dd bunun bir liste maddesi olduğunu gösterir. Başa dön
Başlıklar
Tarayıcılar altı başlık düzeyini kabul ederler.
h1Birinci düzey başlık/h1
h2İkinci düzey başlık /h2
h3Üçüncü düzey başlık /h3
h4Dördüncü düzey başlık /h4
h5Beşinci düzey başlık /h5
h6Altıncı düzey başlık /h6
İşte yukarıda tanımlanan başlıklar aşağıdaki gibi görüneceketir. Birinci düzey başlık
İkinci düzey başlık
Üçüncü düzey başlık
Dördüncü düzey başlık
Beşinci düzey başlık
Altıncı düzey başlık
Başa dönOrtalama
Resim veya metinleri CENTER işaretleri arasına alarak ortalayabilirsiniz.
Örnek olarak
center Bu yazı ortalanacaktır /center
yazısı aşağıdaki gibi görünecektir:
Bu yazı ortalanacaktır.
Ortalanan birden fazla satır varsa başlangıç ve bitiş işareteri arasındaki tüm satırlar ortalanır.
HTML 3.0'da Dvisin içerisinde align: "Left", "Right" ve "Center" tanımlı. Html 4.0 Tag'ı olan Align:"Justify" bir çok Browserde sorun yaratabilir. Bu nedenle sayfanız düzgün görünsün istiyorsanız bir süre için kullanmamanızı öneririm.
DIV ALIGN="CENTER"Bu yazı ortalanacaktır/DIV ve
CENTER Bu yazı ortalanacaktır /CENTER arasındaki tek fark CENTER işaretinin tüm tarayıcılar tarafından desteklenmesidir.
Başa dön
Ön biçimli metin:
Bazen daha önce yazdığımız ve biçimlendirdiğimiz metinleri HTML içerisinde biçimleri bozulmadan kullanmak gerekir. Bu durumlarda metin parçasını pre işareti içine koymak yeterlidir.
Örnek: b e nd a ğ ı nık b i rada m ı mbır ak ındağ ı nıkk a l s ı npre içine aldığımız metinlerin biçimi korunmuş olacak. Başa dön
Koyu, eğik, vs.
Bir metin parçasının biçimini bu işaretler ile kolayca değiştirebilirsiniz.
Koyu görünmesini istediğini metin parçasını b işaretleri içine yerleştirin.
b Koyu yazı /b
Yazınız aşağıdaki gibi görünecektir.
Koyu yazı
Eğik görünmesini istediğiniz yazıyı i işaretleri arasına yerleştirin.
i Eğik yazı /i
Yazınız aşağıdaki gibi görünecektir.
Eğik yazı
Hem eğik hem koyu görünmesini istediğiniz yazıda her iki işareti kullanabilirsiniz.
bi Koyu ve Eğik Yazı/i/b
Yazınız aşağıdaki gibi görünecektir.
Koyu ve Eğik Yazı
Her iki işareti kullandığınız durumda işaretleri açma sırasına göre kapatmalısınız. Örneğin Koyu yazı eğikten önce açılmışsa, sonra kapatılmalıdır. Aşağıda anlatılan işaretler için aynı kurallar geçerlidir.
Diğer komutlar gayet basi ve kullanımı diğerleri gibidir. Her birinden birer örnek yeter diye düşünüyorum.
UAlt Çizgili/U
Alt Çizgili
STRIKEÜstü Çizgili/STRIKE
Üstü Çizgili
StrongGüçlü/Strong
Güçlü
EMVurgu/EM
Vurgu
BIGBüyük/BIG İç içe döngü OK
Büyük
SmallKüçük/Small İç içe döngü OK
Küçük
SUB Alt yazı /SUB
Alt yazı Alt yazı
SUP Üst yazı /SUP
Üst yazı Üst yazı
FONT SIZE=+1 /FONT Font boyutunu arttırır.
SAMPÖrnek Kod /SAMP
Örnek Kod
CODEÖrnek Kod /CODE
Örnek Kod
TTTeletype /TT
Teletype
VARDeğişken Notu /VAR
Değişken
CITEKısa Not /CITE
Kısa Not
Göz kırpan şeyler:
Basit bir işaret ile metinde bir noktanın yanıp sönerek göz kırpmasını sağlayabiliriz.
You can make text or graphics blink on and off by surrounding them with tags.
İşte işaret:
blink Yanıp sönerim! /blink
Ve yazı böyle görünecektir.
Yanıp sönerim!
Bunu fazla yapmamaya dikkat edin. Başa dön
Yazıtipi rengi:
FONT COLOR=#KKYYMM Yazının bulunduğu yer /FONT Yazı rengini değiştirir
İlk iki harf kırmızı pixeli, orta iki harf yeşil, son iki harf mavi pixel renk değerini belirler. Değerleri 0-F arası değişebilir. 000000 hepsi sönük yani siyah, FFFFFF hepsi tam şiddet yani beyaz...
FONT COLOR="#000000"Siyah/FONT
FONT COLOR="#FF0000"Kırmızı/FONT
FONT COLOR="#00FF00"Yeşil /FONT
FONT COLOR="#0000FF"Mavi/FONT
FONT COLOR="#FFFF00"Sarı/FONT
FONT COLOR="#FF00FF"Mor/FONT
FONT COLOR="#00FFFF"Turkuaz/FONT
FONT COLOR="#FFFFFF"Beyaz/FONT |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Başa dön
Yazı Tipleri:
font face="Kidprint"Font biçimi /font ile yeni nesil tarayıcılar için yazıtipi tanımı yapılabilmesine rağmen bu yazıtipinin aynı zamanda diğer işletim sisteminde ve kullanıcıda bulunması gerekir. Bu kısıtlılık nedeniyle sayfaları hazırlarken kullanıcının varsayılan yazıtipi ile okunabilmesi için mümküm olduğu kadar yazıtipleri arasında az geçiş yapmak gerekir. Örnekteki yazının düzyün okunabilmesi için sistemde kidsprint yazıtipi bulunması gerekir. Çok özel biçimse ve yazıtipi efektleri kullanmak gerekiyorsa .gif formatında düşük renk sayısı ile yazılması, yazının her sistemde düzgün ve aynı biçimde görünmesini garanti eder. Başa dön
Paragraf ve satırbaşı
Tarayıcılar sizin sayfanızı nasıl düzenlediğinize bakmazlar. Onlar işretlere bakarlar. Satırbaşı ve paragraf işaretleri olmadığı sürece metin tek paragraf halinde devam eder. Bu işaretleri gördüklerinde satırlar erkenden son bulur.
br yani satır başının yaptığı etki metin parçasını boşluk bırakmadan yeni bir satırdan devam ettirmesidir.
p yani paragraf işaretinin tek farkı yeni başlayacak metin parçasından önce bir satırlık boşluk bırakmasıdır. Başa dön
Belge içerisinde başka yere atlama
Belge içinde gidilecek yerleri tanımlayıp bir tıklama ile sayfanın o bölümüne gidilmesini sağlayabilirsiniz.
Bu işlemi geçekleştirmek iki aşamalıdır.
1. Hedef belirlemek Sayfada gidilecek noktaya hedef veya target adı verilmektedir. Gidilecek her noktanın bir adı olmalıdır. Bu adı daha önce tanımlamak gerekmektedir. a name="hedef_adi" Bu tanım gidilecek yerde olmalıdır.
2. Bağlantı yaratmak: Link içinde iki şey'i tanımlamak gerekmektedir. Tıklanacak metin, ve gidilecek nokta
a href="#hedef_adi"Tıklanacak yazı/a
Link olarak tanımladığımız yazı, altı çizgili ve body içinde tanımlı link rengi ile görünecektir. Üzerine tıklandığında kullanıcı hedef olarak tanımladığımız noktaya gidecektir. Bu sayfadaki Başa dön işaretleri ve içindekiler bölümü bu tarz bir sayfa içi atlamanın örnekleridir.
Aynı sistemde başka dokümana atlama
Tarayıcının aynı sistem üzerinde bulunan başka bir belgeye gitmesini sağlamak oldukça kolay. Gidilecek belgeniz üzerinde çalıştığınız doküman ile aynı dizin içerisinde bulunuyorsa sadece belgenin adını yazmak yeterlidir.
a href="boludagece.jpg" Bolu'da Gece /a
Bolu'da Gece
Bunun için sadece belgenin bulunduğu dizinin göreceli veya mutlak konumu ve gidilecek dokümanın adını belirtmek yeterlidir.
a href="göreceli_yol_ve_dosaya_adi"Link Yazisi/a
Örnekler:
Kök dizinde bulunan varsayılan belge:
a href="/"Ana sayfa/a
Bu sunucu üzerindeki Ana sayfa
Sunucu üzerinde /SoHo/Museum/9404/ dizininde bulunan barutcu.jpg resim belgesi
A HREF="../SoHo/Museum/9404/barutcu.jpg" Şinasi Barutçu/A
Şinasi Barutçu
Mevcut dizinin altında olan eski altdizin'indeki aramis.htm belgesi
A HREF="eski/aramis.htm" Aramis /A
Mevcut dizinin bir üst dizininde bulunan scandisk.txt saltmetin belgesi
A HREF="../scandisk.txt"Scandisk Hakkında/A
Başa dön
Başka sistemdeki bir bölüme atlama
Internet'in temel özelliklerinden biri URL adı verilen evrensel kaynak belirleyici kodlama sistemidir. Bu dünyanın neresinde olursa olsun size başka bir sunucu üzerinde başka bir dokümana veya dizine kolaylıkla erişmenizi sağlar. Bu kaynaklar sadece WWW diye bilinen ve adresleri http:// ile başlayan web ile sınırlı değildir.
Kullanıcıyı hipermetin aktarım protokolu (hyper text transfer protocol, http) ile çalışan herhangi bir sisteme yönlendirmek için evrensel kaynak belirleyici tipini belirtmek kullanımı zorunludur. Bu örnekte URL veya internet adresi veya evrensel kaynak belirleyici olarak http:// kullanılmıştır. Gidilecek sayfa http://www.boyutbilgi.com.tr/ifsaksergi/index.html olsun
a href="http://www.boyutbilgi.com.tr/ifsaksergi/index.html""IFSAK Sanal Ortam Sergisi"ne Git /a
"IFSAK Sanal Ortam Sergisi"ne Git
Şifreli http protokolu:
A HREF="https://sunucu.adı"Link Yazısı/A
Kullanımı http'ye benzer.
Daha önce belirtildiği gibi tek URL tipi http değildir. Diğer protokoller için farklı evrensel kaynak belirleyiciler vardır.
Bunların kullanımını örnekler ile açıklamayalım. Protokollerin ne anlama geldiğini açıklamak bu belgenin kapsamı dışındadır.
Haber grupları:
Varsayılan sunucu üzerindeki grup adına yönelik linkler:
A HREF="news:grup_adi"Link Yazısı/A
A HREF="news:soc.culture.turkish" SCT/A
SCT
Sunucuya yönlendirilmiş linkler:
A HREF="news://sunucu_adi"Link Yazısı/A
A HREF="news://news.istanbul.edu.tr"Istanbul Üniversitesi Haber Sunucusu/A
Istanbul Üniversitesi Haber Sunucusu
Belli sunucu üzerindeki gruba yönelik evrensel kaynak belirleyiciler:
A HREF="news://sunucu_adi/grup_adı"/A
A HREF="news://news.marun.edu.tr/alt.culture.turkish.internet"acti grubu/A
acti grubu
Secure (Şifreli, Güvenli) iletişim destekleyen haber sunucusu:
A HREF="snews:secnews.netscape.com"Netscape Güvenli Haber Sunucusu/A
Netscape Güvenli Haber Sunucusu
Kullanıcı hesabı kullanılarak haber sunucusuna bağlantı:
A HREF="news://kullanıcı_adi:şifresi@sunucu.adı/"Link Yazısı/A
Dosya aktarım protokolu (FTP) link'i
A HREF="ftp://ftp.zdnet.com"ZDnet FTP sunucusu/A
ZDnet FTP sunucusu
Kullanıcı hesabı kullanılarak FTP'ye bağlantı:
A HREF="ftp://kullanıcı_adi:şifresi@ftp.sunucu.adı/"Link Yazısı/A
Her hangi bir e-mail adresine gönderilecek mektup:
A HREF="mailto:kullanıcı@doamin.adı"Link Yazısı/A
A HREF="mailto:nevilo@yahoo.com"Nevit'e mektup/A
Nevit'e mektup
Birden fazla kullanıcıya mektup:
A HREF="mailto:kullanici1@domain1.adi?to=kullanici2@ domain2.adi&to=kullanici3@domain3.adi"Link Yazısı/A
Birden fazla adrese e-mail
Mektup içerisinde varsayılan başlık ve metin:
A HREF="mailto:kullanıcı_adi@domain.adi.net?subject= Başlık Buraya&body=Gövde içindeki yazı"Link Yazısı/A
Varsayılan Başlık ve Yazı içeren mektup
Telent protokolu, uzaktaki bilgisayara terminal bağlantısı:
A HREF="telnet://sunucu.adi"Link Yazısı/A
A HREF="telnet://ttnbbs.rtpnc.epa.gov"Air Polution BBS USA/A
Air Polution BBS USA
Gopher Protokolu:
A HREF="gopher://sunucu.adi"Link Yazısı/A
A HREF="gopher://gopher.metu.edu.tr"ÖDTÜ Gopher Sunucusu/A
ÖDTÜ Gopher Sunucusu
Başa dön
Sayfalara resim ekleme
Tüm tarayıcıların resim desteklemediğini unutmayın. Sayfanız ne olursa olsun resimsiz görünebilmeli. Bu sayfayı ziyaret edenlere daha fazla serbesti sağlayıp, resimlerin görünemediği durumlarda sayfaya gelen ziyaretçiyi eli boş döndürmemiş olmaya yarar.
HTML'de resimler yazılardan bağımsız bir şekilde sunucu üzerinde ayrı dosyalar olarak bulunurlar. Resim ancak gif ve jpg gibi tarayıcının içinden görünebilien formatta ise sayfada kullanılabilir. Resimler evrensel kaynak belirleyici kuralları dahilinde internetin herhangi bir yerinden çağrılabilirler. Çağrılan resim aynı dizin içerisinde ise konum kısmına sadece dosya adının yazılması yeterli olacaktır.
IMG SRC="resim.gif"
IMG SRC="http://sunucu.adi/dizin_adi/resim.jpg"
Diğer sayfa elemanları gibi resimlere link eklemek olasıdır. Diyelimki resim.jpg'ye tıklayınca dosya.htm veya belirli bir adresin açılmasını istiyoruz:
A HREF="dosya.htm"IMG SRC="resim.gif"/A
A HREF="Gidilecek_Adres"IMG SRC="http://sunucu_adi/dizin_adi/resim.jpg"/A
Resimler hakkında söylenmesi gereken en önemli şey boyutudur. Aşırı veya bilinçsiz kullanımı sayfanızı gerçekten ağırlaştırabilir. Sayfanızın şimşek gibi açılmasını istiyorsanız resim boyutlarını 1-5K arasında tutmaya çalışıp, tüm sayfa artı resimlerin 30K'ye geçmemesine dikkat edin. Bir birine atlayan sayfalarınız varsa aynı resimleri tekrar kullanmaya çalışıp yeni resim sayısını azaltın.
Resimler içerisinde kullanılan ekstra bazı işaretler zaman içerisinde gereklilik nedeniyle doğmuştur.
WIDTH=300 HEIGHT=200 Resim boyutları, HTML içinde belirtildiğinde sayfa daha çabuk yüklenir, tarayıcı sayfayı çizmek için gereken resim boyutunu almak için sunucunun yanıtını beklemek zorunda kalmaz.
ALT="resim yazısı" Alt işareti, resim yokluğunda ve yükleninceye kadar görünen yazı.
BORDER=sayı kenar kalınlığı, mevcut renk ile istenen kalınlıkta gösterilir.
VSPACE=Sayı HSPACE=Sayı Resim etrafında dikey ve yatay eksende kullanılacak boşluk.
ALIGN=TEXTTOP/ABSCENTER/ABSBOTTOM/BOTTOM
ALIGN=LEFT/CENTER/RIGHT Hizalama işaretleri, gerektiğinde resim ile birlikte kullanılabilir.
LOWSRC="dusuk_rezolusyon.gif" Asıl resim yükleninceye kadar çabuk yüklenebilen düşük çözünürlüklü resim.
IMG SRC="deneme.gif" WIDTH=300 HEIGHT=200 ALT="resim yazısı" BORDER=0 Başa dön
Ses Dosyaları
Bir Sayfa yüklendiğinde otomatik olarak ses dosyasının çalması nasıl sağlanır?
EMBED SRC="ses.wav" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=3 WAV
EMBED SRC="ses.au" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=2 AU
EMBED SRC="children.mod" HIDDEN="FALSE" WIDTH="166" HEIGHT="95" autostart="true" loop="false" MOD
EMBED SRC="enter.mid" HIDDEN=true AUTOSTART=true LOOP=true MIDI
Aktif Ses Kullanımı:
EMBED SRC="ses.wav" NAME="snd" WIDTH="1" HEIGHT="2" SES Here is a A HREF="page.htm"
OnMouseOver="Play_()"link/A aktif ses Başa dön
Tablolar:
Tablolar artık HTML'nin vazgeçilmez parçalarıdır. Tablolar TABLE ile tanımlanır. /TABLE ile biter. Her satır: TR ile başlar /TR ile biter. Haneler: TD ile başlar /TD ile biter. Başlık kısmı CAPTION içindedir. Border=0 tablo kenar kalınlığını belirtir.
İşte basit bir tablo:
TABLE Border=1
CAPTIONBaşlık/CAPTION
TRTDsatır1 Sutun1/TDTDsatır1 Sütün2/TD/TR
TRTDSatır 2 Sutun 1/TDTDSatır 2 Sütün 2/TD/TR
/TABLE
Tablo başlık kısmıda TABLE içerisinde kullanılabilen seçenekler şu şekilde:
Border=sayı tablo kenar kalınlığı
Width=sayı tablo genişliği, piksel olarak
Width=yüzde tablo genişliği, yüzde olarak bu ikisinden sadece biri kullanılabilir.
CELLPADDING=sayı Nesne-hücre aralığı
CELLSPACING=sayı Hücre-Hücre aralığı
BGCOLOR="#xxxxxx" Tablo Arkaplan Rengi
BACKGROUND="resim.jpg" Tablo Arkaplan Resmi
ALIGN=right/left/center Tablo hizalama
COLS=sayı Sütün sayısı ( #n adet eşit genişlikte sütün, eşit sütün genişlikli tablo)
Satır TR içerisinde kullanılan komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Satır Arkaplan rengi
BACKGROUND="resim.jpg" Satır Arkaplan Resmi
Hücre TD içerisinde HTML elemanlarının kendi komutlarına ilave olarak kullanılabilen komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Hücre Arkaplan rengi
BACKGROUND="resim.jpg" Hücre Arkaplan Resmi
COLSPAN="2" Birleşen kolon sayısı
ROWSPAN="2" Birleşen satır sayısı
İç içe tablo kullanabilirmiyim? Hanelerin içerisinde ikinci bir tablo dahil HTML elemanlarından herhangi biri olabilir.
Bir sayfada yan yana dört resim yerleştirip, altına adlarını yazmak istiyorum.
İlk önce, 4 sütün 4 satır bir tablo yaratın. Her tablo satırı TR ile başlar /TR ile biter. Haneler td ile başlar /td ile
biter.
TABLE Border=0
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
TRTD/TDTD/TDTD/TDTD/TD/TR
/TABLE
Resimleri hanelere yani td ve /td arasına yerleştirin. Tablo elemanlarında önemli olan elamanın /td ve td arasına gelmemesidir. Yazıyı bir sonraki satırda aynı hanenin altına denk gelecek şekilde yerleştirin.
Bir kaç resmi birleştirip tek resimmiş gibi yüklemek istiyorum:
table cellpadding="0" cellspacing="0" border="0"
0 aralıklı bir tablo tanımlar. Hücreler içerisindeki resimler arasında mesafe yoktur. Başa dön
Formlar:
Formlar kullanıcılardan gelen bilgileri standart şekillerde alan sayfanın etkileşimli alanlarıdır. Form kullanmanın e-mail almaya göre bir çok avantajı var. Eğer uygun yazılımlar geliştirirseniz form bilgilerini doğrudan istediğiniz yazılıma yönlenirebilirsiniz. Herhangi bir yazılım kullanmıyorsanız formunuzu ilk örnekteki gibi salt metin olarak e-mail adresinize gelecek şekilde ayarlayabilirsiniz.
form action="mailto:kullanici@adresiniz.net?subject=Kon u Başlığı" method="POST" enctype="text/plain"
Form Elemanları
/form
Cgi için örnek POST komutu:
form method="post" action="http://sunucu_adi/cgi-bin/program_adi.pl?değişken"
/form
GET komutu nadir kullanıldığından anlatılmayacak.
Formlarda kullanılan bazı alan seçenekleri:
Radyo Buton'u tipi:
BRSoru1.
BRINPUT TYPE=Radio CHECKED NAME="Soru_adi1" VALUE="Birinci_Yanıt" İkinci_Yanıt
BRINPUT TYPE=Radio NAME="Soru_adi1" VALUE="İkinci_Yanıt" İkinci_Yanıt
BRINPUT TYPE=Radio NAME="Soru_adi1" VALUE="Üçüncü_Yanıt" Üçüncü_Yanıt
Liste tipi soru:
BRSoru2BR
SELECT NAME="Soru_adi2"
OPTION Seçenek1
OPTION Seçenek2
OPTION Seçenek3
/SELECTBR
Küçük metin:
BRSoru3:BR
INPUT TYPE=Text NAME="Soru_adi3" VALUE="varsayılan_değer" SIZE=25 MAXLENGTH=30BR
Geniş metin alanı:
TextArea NAME="Soru4" ROWS=7 COLS=35 MAXLENGTH=100
Varsayılan Yazı
/TextAreaBR
Kutu işaretleme tipi soru
Br INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek1"seçenek1
BR INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek2"seçenek2
BR INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek3"seçenek3
/UL
Gönderme ve Sıfırlama butonları:
INPUT TYPE=Submit NAME="Gönder" VALUE="Gönder"
INPUT TYPE=Reset NAME="Reset" VALUE="Reset"
Başa dön
Çerçeveler, Frames
Çerçeveler veya Frames Netscape Navigator (2.0 üstü) ve Internet Explorer (3.0 üstü) tarafından desteklenen işaretlerdir. Aynı çerçeve içerisinde birden fazla sayfanın açılmasını sağlar. Çerçeve yapısı HTML'ye benzerdir, sadece BODY yerine FRAMESET içerir.
FRAMESET çerçeve içeren dokümanın hangi dokümanların bileşiminden oluşacağını ve bu dokümanların hangi biçimde yan yana geleceğini tanımlayan basit bir dokümandır. FRAMESET'den önce herhangi bir işaret olmamalıdır, yoksa tarayıcı tarafından gözardı edilir.
Örnek bir Frame dokümanı:
HTML
HEAD
/HEAD
FRAMESET
/FRAMESET
/HTML
Frame set içerisinde ROWS ve COLS yardımı ile dokümanın yaty mı dikey mi bölüneceği tanımlanır. Yine Frameset içerisinde her bölmeye ayrılan alan piksel veya yüzde olarak tanımlanabilir.
Yatay bölünen doküman:
ROWS="row_height_value_list"
FRAMESET ROWS="20%,60%,20%"
FRAMESET ROWS="100,*,100"
Frame komutu ilave olarak içerideki belgelerin özelliklerini belirler, dikkat ederseniz her pencereye bir isim verildi. Bundan sonra kullanılacak linklerde bu isimlerin kullanımı tıkalndığında istenen belgenin hangi çerçevede açılacağını belirler.
Aşaığdaki örnekte ilk sütün 150 piksel genişlikte, soldaki çerçevenin adı solframe, sağdaki çerçevenin adı sagframe olarak atandı. Solda açılacak belge solsayfa.htm sağda açılacak belge ise sagsayfa.htm adını taşıyor.
FRAMESET COLS="150,*"
FRAME SCROLLING="yes" NAME="solframe" SRC="solsayfa.htm"
FRAME SCROLLING="yes" NAME="sagframe" SRC="sagsayfa.htm"
/FRAMESET
Frame komutunda kullanılan seçenekler:
SCROLLING="yes|no|auto"
NORESIZE
Çerçevesiz Doküman:
noframes a href="main.html"Ana sayfa/a /noframes
Çerçeveler sonlandırılmak istendiği zaman top seçeneği kullanılmalıdır.
a href="test.html" target="_top"Çerçeveden Çık/a Çerçeveden Çık
Başa dön
Comment Tag, veya Bilgi
!-- -- işareti içerisinde yazılanlar sayfa içerisinde görünmez ve sadece view source yapıldığı zaman bilgi verme amacını taşır. Bazı Javascript program parçalarnı eski tarayıcılardan saklamak için yine !-- -- kullanılır. Eski programa dillerine alışkın olanlar için bu işareti REM ibaresine benzetebiliriz. Başa dön
META-işaretler:
Meta işaretler tarayıcılar, arama motorları ve sayfaya gelebilecek yazılımlara yönelik bilgiler içeren işaretlerdir. Sık kullanılan bir kaç Metaişaretin anlamını açıklamak yeterli olacaktır. Meta işaretler sayfada HEAD bölümü içerisine yerleştirlir.
META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9" Turkish Metatag, Sayfanın Türkçe olduğunu ve uluslarası standart ensititüsünün ISO-8859-9 standardına uygun yapıldığını gösterir.
META NAME="generator" CONTENT="Yazılım Adı" Generator Meta tag, sayfanın hangi yazılım ile hazırlandığını gösterir.
META NAME="Author" CONTENT=" Nevit " Author Meta tag sayfanın hazırlayıcısı olan kişiyi gösterir.
META NAME="keywords" CONTENT="keyword, keyword, keyword" Content Meta tag Anahtar kelimelerin burada bulunması sadece bu bölüme bakan bazı arama motorlarının işini kolaylaştırır.
META NAME="description"CONTENT=" Sayfanın tanımı " Description Meta tag Bazı arama motorları arama motorunu kullanan kişilere bu bölümü gösterirler.
META HTTP-EQUIV="Refresh" CONTENT="7;URL=index.html" Refresh, İtme teknolojisi ile devreye giren bir meta işarettir. Sayfaya gelen kişi herhangi bir işlem yapmasa bile başka bir sayfaya aktarılır.
META HTTP-EQUIV="Content-Type" Content-Base: "http://www.geocities.com/SoHo/Studios/9594 Content Base, sayfa içeriğinin bulunduğu URL'yi gösterir.
Başa dön
Türkçe
Uluslararsı standartlar ensitütüsü ISO-8859-9'u Türkçe standardı olarak kabul ediyor. IE ve Netscape'de bunu destekleyenlerdendir. Türkçe standartlarına uygunluu denetlemek için önce browserinizin düzgün çalıştığından emin olmanız gerekir. Bunun için http://www.immt.pwr.wroc.pl/export_hp/test/ adresinde Browerinizin ISO-8859-9 karakterlerini düzgün gösterip göstermediğini kontrol edin.
ISO8859-9 Ansi-Turkish ve Windows-1254 ile neredeyse aynı karakter tablosuna sahip. ASC-II harfleri olduğu yerde çıkmasına rağmen Batı standardı olan ISO-8859-1 'den farklı olarak Türkçe harfler tanımlıdır.
Ayarlarınız doğru ise hepsinde sorunsuz Türkçe görürsünüz.
Başa dön
Özet:
HTML Basit bir işaretleme dilidir ve Hypertext Markup Language kıstaltmasıdır. WEB'de gördüğünüz tüm *.htm ve *.html uzantılı dokümanlar bu şekilde yazılmış.
body ve /body arasındaki kısım dokümanın ana kısnmını oluşturur.
Burada paragraflar p ile başlar biter. Bundan sonra her ikisini yazmiyacağım. bitişler / içerir. yani paragrafın bittiği yerde istenirse /p konur.
Bu şekilde hazırlanmış doküman web'de belli bir adrese konulunca isteyen buna girip içeriğine bakabilir.
Hala bir çok kişi Browserlerin 3.0 sürümleri kullaniyorlar. Opera kullanlar, Unix, Linux, Mac, OS/2 kullananlar var dünyada.
İletişimin amacı ziyaretçilere sorun çıkartmak olmamalı.
Dokümanın bir yerine resim koymak için, öncelikle en iyisi resim ve doküman aynı dizinde olmalılar. Değillerse resimin bulunduğu yer
dokümana tanıtılmalı. En basit resim ekleme komutu IMG SRC="resim_adi.gif" şeklinde. Bu arada dediğim gibi resim aynı
dizinde olmalı.
Size basit bir HTML örneği veriyorum:
HTML
BODY
PMerhaba /P
IMG SRC="resim.gif"
/BODY
/HTML
Burada merhaba diye bir yazı ve bir'de resim.gif adında bir resim olacak. Bunu notepad'e kopyalayın ve deneme1.htm adı ile kaydedin. Daha sonra Netscape ile deneme belgesini açın. Resim görünmüyorsa o dizin içerisinde resim.gif adında bir dosya olmadığı içindir. Bunu sağladığınız anda yazı ve resim görünecek.
Bazı HTML Linkleri:
GeoCities Home Page Building Resource Guide.
Index Dot HTML
Barebones Guide to HTML
A Beginners Guide to HTML
Ten Commandments of HTML
comp.infosystems.www.authoring.cgi
alt.html.editors.enhanced-html
alt.html.editors.webedit
alt.html.webedit
alt.html.writers
alt.html.writers.guild.list
alt.homepages.xoom
alt.homepages.geocities
 |
Html Nedir? adlı bu yazının tamamını ve yapılan yorumları okumak için tıklayın. |
|
