Transcript HTML’e Giriş - Eğitsel Web Sayfası Tasarımı

BÖLÜM VI
HTML
HTTP ve HTML
 HTTP, Web Server ile Web Browser ’ın birbirleri ile haberleştiği bir




protokoldür.
HTML dokümanları metin ve etiketlerden meydana gelir. HTML etiketleri
açılı parantez içerisinde (< >) yazılır. HTML etiketlerinin çoğu slash(/)
karakteri ile biten etiket ile kapatılarak bloklar halinde kullanılır.
Örnek:
<B>HTML</B> bir metin işaretleme dilidir.
Yukarıdaki örnekte HTML koyu olarak yazılacaktır.
HTML Versiyonları
 HTML nin birkaç versiyonu vardır. Günümüzde çoğu Web Tarayıcısının
desteklediği 3.2 versiyonudur. HTML’nin standardı Word Wide Web
Consortium (W3C) tarafından kontrol edilmektedir. HTML nin 4.
versiyonunda iki yeni eklenti vardır.Bu eklentilerin en önemlileri;
 Cascading Style Sheets (CSS)
 Dynamic HTML (DHTML)
HTML Versiyonları
 Cascading Style Sheets (CSS)
 CSS nin her yerde kullanılması nedeni ile W3C, CSS nin Internet Explorer ve
Netscape Navigator tarafından desteklenen standardını belirledi.
 CSS Microsoft Word ün stili gibi çalışır. Stili önceden tanımlarız. Daha
sonrada sayfadaki elemanlarda stile başvuru yaparsınız. CSS ile madde
imlerini, metin fontlarını, kullanılan başlık fontunu vs. değiştirebiliriz.
 Dynamic HTML (DHTML)
 Tasarımcıya, kullanıcı fareyi herhangi bir nesne üzerine getirdiğinde hareket
etmesini ya da görünümünün değişmesini sağlayabilen Web Sayfaları
yapabilme imkanı sağlayan dildir.
HTML Extensions (Uzantıları)
 Son birkaç yılda bazı satıcılar web modelini dinamik (mekanik) ve
interaktif (etkileşimli) içerikli olarak geliştirdiler.
 Bunlar;
 Client-Side Extensions (İstemci Tarafı)
 Server-Side Extensions (Server Tarafı)
 Java Applet, ActiveX kontrolleri, İstemci Tarafı scriptleri ve dynamic
HTML, Client-Side a birer örnektirler.
 CGI programları ve scriptler, Active Server Page ve FrontPage WebBots’
lar da birer Server-Side Extension a örnektirler.
XML: eXtensible Markup Language
Genişletilebilir İşaretleme Dili
 XML Internet’teki en yeni dillerdendir. XML “Verilerde yapı belirtmek
için ortak bir yazım şekli” olarak ifade edilebilir. Bu bağlamda XML pek
de dil sayılmaz.
 HTML ve XML ortak ataya sahiptirler. Her ikisi de Standard Generalized
Markup Language (SGML) den türerler. XML in HTML’den farkı HTML
sabit etiketlere sahiptir fakat XML kendi etiketlerinizi tanımlamanıza izin
verir.
Web Hazırlama Yazılımları
 Web hazırlamak için birçok araca sahibiz. Bunları üç
sınıfta toplayabiliriz.
 HTML editörleri
 Web Sitesi geliştirme araçları
 Web Uygulaması geliştirme araçları
HTML Editörleri
 HTML yazmak için NotePad ‘i kullanabileceğimiz gibi yardımcı
programlar da vardır. Metin tabanlı, kod yazmayı gerektiren fakat bunun
yanısıra rutin bazı işlemleri kolaylaştıran editörlerdir. Bunlardan bir
kısmı;
 Hot Dog
 HotMetal Pro
 HomeSite
 1st Page 2000
 Basit bir metin editörü.
Web Sitesi Geliştirme Araçları
 Bu tür ürünler tek başına bir web sayfası yapmak yerine Web Sitesi
hazırlamada kullanılır. Bu grup programlar HTML editörü ile birlikte
linkler kontrol edebilen araçlar ve Web Sitesini Web Server a
yayınlayabilecek araçlar içerir. Bu kategorideki programlar görsel,
kodlamayla uğraştırmayı gerektirmeyen editörler dir. Bunlar;
 Fusion
 Visual Page
 Dreamweaver, Flash
 FrontPage
Web Uygulamaları Geliştirme
Araçları
 Web Sitesi yapma araçları sabit içerikli statik Web Sitesi yapmada





kullanılır. Web Uygulamaları Geliştirme Araçları bir veritabanı ile
bağlantılı içeriğe sahip web sitesi hazırlamada kullanılır.
Bu araçları kendi kendini bir veri tabanından güncelleyen dinamik Web
Siteleri oluşturmakta kullanırız. Bu araçlardan bazıları;
ColdFusion
NetDynamics
Dreamweaver UtraDev
Visual InterDev
HTML (HyperText Markup Language) Nedir?
 HTML(Hareketli-Metin İşaretleme Dili) basitçe, browserlarla
görebileceğimiz, internet dökümanları oluşturmaya yarayan bir
çeşit dildir.
 HTML, programlama dilleri (pascal, basic,..) gibi bir programlama
mantığı taşımadığından öğrenilmesi gayet kolay bir dildir.
 Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek,
düzenlemek için kullandığımız komutlar dizisi diyebiliriz.
HTML Kodlarını Görüntüleme
Web tarayıcıları (browser) standart HTML
komutlarını/kodlarını yorumlayarak web sayfası olarak
görüntülememize yarar.


Internet Explorer, Netscape Navigator, Opera vb.
Bir Web Sayfasının Genel Yapısı
<HTML>
<HEAD>
Başlık Metni
</HEAD>
<BODY>
Body Metni
</BODY>
</HTML>

Not: Web Sayfaları <HTML> etiketinden önce DTD (Document Type Definition) başvurusu da içerebilir. Bu
başvuru HTML nin versiyonunu bildirir. Ama çoğu Web Browser bunu otomatik olarak sayfaya ekler. Yani
yazmasak ta olur.
 Case-Insensitive: HTML büyük küçük harfe duyarsızdır. <BODY> ile <bOdy> etiketleri
arasında bir fark yoktur.
Yapısal Etiketler (Structural Tags)
 Yapısal etiketler (< >) web sayfasında farklı bölümler tanımlamak için
kullanılır. Bunlar;
İLK ETİKET
SON ETİKET
<HTML>
</HTML>
<HEAD>
</HEAD>
<TITLE>
</TITLE>
<BODY>
</BODY>
<!--
-->
AÇIKLAMA
HTML dokümanının başlangıç ve bitini tanımlar.
Başlık bölümünün başlangıç ve bitimini tanımlar.
Web Sayfasının başlığını tanımlar. Browser’ın
isim çubuğunda görünecek olan metindir.
Web Sayfasında gösterilecek olan içeriğin
yazıldığı bölümü tanımlamada kullanılır.
Bu etiketler Web Sayfamıza açıklamalar
eklemede kullanılır.
İlk sayfam
 Notepad'i açın ve şunları yazın:

Dosyayı “sayfa1.htm” olarak kaydedin.
İlk sayfam
 Sayfa1.htm dosyasını açtığınızda varsayılan browserınız
(Internet Explorer, Netscape Navigator gibi) tarafından
görüntülenecektir.
Etiket Özellikleri (Tag Attributes)
 Bazı etiketler özelliklere sahiptirler. Bu özelliklere etiketin
davranışını düzenlemek için değerler atarız. Kullanımı;
 <ETİKET özellik1=”value” özellik2=”value”>
 Örnek: Örnek olarak <P> etiketini söyleyebiliriz. <P>
etiketi yeni bir paragraf başlatır ve varsayılan olarak metni
sola yazlar.
 <P>Bu Metin Sola Yaslıdır.</P>
 <P align=”left”>Bu Metin Sola Yaslıdır.</P>
 <P align=”right”>Bu Metin Sağa Yaslıdır.</P>
 <P align=”center”>Bu Metin Ortalanmıştır.</P>
İlk sayfam
 Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim:
 Birşey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve
bu kelimeleri küçük < ve büyük > sembolleri arasına yazdık. Bu
ifadelere tag (etiket) deniyor. Etiketler etki etmesi istenilen
metnin önüne ve arkasına yazılıyor.
 Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı
etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son
yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm
etiketler belge içerisinde sonlandırılmak zorunda.
İlk sayfam
 Hazırladığımız sayfada dikkat ederseniz sadece temel etiketleri
kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket
kullanmadık. Bu yüzden <body>....</body> arasına yazdığımız
Sayfama Hoşgeldiniz yazısı browser'ın varsayılan metin
ayarlarıyla gösteriliyor.
 İşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama
Hoşgeldiniz yazıp kaydetsek ve browser'da böyle görüntülesek
de aynı neticeyi elde edecektik.
Etiket Özellikleri (Tag Attributes)
 <HTML> Etiketi
 Bütün HTML dosyaları <HTML> kodu ile başlar </HTML> kodu
ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun
arasında kalmalıdır.
 <HEAD> Etiketi
 Bu etiket içerisinde yazılan sayfada gözükmezler. Web sayfası
ile ilgili temel özellikler, Sayfa Başlığı, Yazı karakterler kümesi,
link özellikleri gibi, burada tanımlanır. Kısaca head kısmında
sayfanın nasıl görüntüleneceği gibi bölümler yer alır. Bu etiket
genellikle sadece <TITLE> ve </TITLE> etiketlerini <META>
etiketlerini, (CSS) <STYLE> etiketlerini ve <SCRIPT> etiketlerini içerir.
Etiket Özellikleri (Tag Attributes)
 <TITLE></TITLE>
 <TITLE> satırında Internet Explorer (=IE) programına
sayfaya başlık verilmek istendiği işaret edilmektedir. IE
<TITLE> ve </TITLE> arasında yazılan metni pencere
başlığı olarak kabul eder. Bu deyimler
<HEAD></HEAD> deyimleri arasına yeralır.
Etiket Özellikleri (Tag Attributes)
 <BODY> Etiketi
 <BODY> etiketleri ile tanımlanan <BODY> bölümüne
sayfamızda görünmesini istediğimiz bilgileri yazarız.
<BODY> etiketi birçok özelliğe sahiptir. Bunların çok
sık kullanılanları;






BACKGROUND
BGCOLOR
TEXT
LINK
VLINK
ALINK
Etiket Özellikleri (Tag Attributes)
 <BODY> Etiketi
 BACKGROUND
 Sayfamızın arka planında gözükmesini istediğimiz resmi
belirtmede kullanırız. Arka plan resmi kaynak dosyası
olarak *.gif veya *.jpg dosyalarını kullanırız. Arka plan
resmi web sayfasını doldurmaz, döşenir.
Etiket Özellikleri (Tag Attributes)
 <BODY BACKGROUND= “resim.gif” ></BODY>
 Örnek:

<HTML>
 <HEAD> <TITLE> Ornek08.html</TITLE></HEAD>
 <BODY BACKGROUND=”File:///a:/resimler/artalan.gif”>
 <!--Diskette bulunan bir resim artalan olarak görüntüleniyor... -->
 <B> Erkan TANYILDIZI</B>
 </BODY> </HTML>
Etiket Özellikleri (Tag Attributes)
 <BODY> Etiketi
 BGCOLOR
 Sayfamızın arka plan rengini belirtmede kullanırız. Bu
özelliğe vereceğimiz değerler renk adı olabileceği gibi
rengin hexadecimal RGB renk kodu da olabilir.
Etiket Özellikleri (Tag Attributes)
 <BODY BGCOLOR =”renk”>…..</BODY>
 Aşağıda HTML 3.2 nin desteklediği 16 renk adı yer almaktadır.
Etiket Özellikleri (Tag Attributes)
 <BODY BGCOLOR =”renk”>…..</BODY>
 Not: Bazı Web Browser lar yukarıdakilerin haricinde renk
adlarını da destekler. Mesela Internet Explorer lightgreen,
darkgreen vs. gibi renkleri de destekler. Ama herkesin aynı
Browser dan sayfa isteminde bulunmayacağını göz önüne
alarak yukarıdaki renk isimlerini ya da hexadecimal renk
kodunu kullanmak daha sorunsuz olacaktır.
Etiket Özellikleri (Tag Attributes)
 <BODY BGCOLOR =”renk”>…..</BODY>
 Örnek: Daha önce hazırladığımız bir html sayfasının <BODY>
etiketini
<BODY bgcolor=”yellow”>
ya da
<BODY bgcolor=”#FFFF00”>
olarak değiştirelim. Arka plan renginin sarı olduğunu
görürüz.
 Not: Bir <BODY> etiketinde BACKGROUND ve BGCOLOR
özelliklerinin her ikisine de değer atandığında
BACKGROUND resmi gösterilecektir.
Etiket Özellikleri (Tag Attributes)
 Diğer <BODY> Özelikleri
 TEXT:Metin rengi
 LINK: Ziyaret edilmemiş link rengi
 VLINK: Ziyaret edilen link rengi (vizited link)
 ALINK: Kullanıcı Mouse ile linke tıkladığında Mouse
basılı iken gözükecek olan renktir.
 BGPROPERTIES: Bu özelliğe fixed değeri atandığında
arka plan resmi sabit olup kaydırma çubuğu ile arka
plan resmi hareket etmeyecektir.
Etiket Özellikleri (Tag Attributes)
 Diğer <BODY> Özelikleri
 Örnek:
 <HTML>
 <HEAD> <TITLE>WEB SAYFAMA HOŞGELDİNİZ (003_link.htm)</TITLE></HEAD>
 <BODY background="bg.jpg" bgcolor="gray" text="white"
 link="yellow" vlink="aqua" alink="red" bgproperties="fixed">
 <H1 align="center">WEB SAYFAMA HOŞ GELDİNİZ</H1>
 <HR> <H2>Web Sayfası</H2> <HR>
 Fırat Üniversitesinin Sayfasına Gitmek İçin
 <A href="http://www.firat.edu.tr">Tıklayınız</A> <BR>
 Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin
 <A href="www.ktu.edu.tr">Tıklayınız</A> <BR>
 Arama motoru <A href="http://www.google.com.tr">Google</A> <BR>
 </BODY>
 </HTML>
Etiket Özellikleri (Tag Attributes)
 Diğer <BODY> Özelikleri
 Örnek:
Etiket Özellikleri (Tag Attributes)
 <HR> Etiketi
 <HR WIDTH=”uzunluk” COLOR=”renk” SIZE=”yükseklik” NOSHADE>
 Web sayfasına belli bir uzunlukta,renkte ve boyutta yatay bir çizgi çizmek
için kullanılır.
 WIDTH : Sayfada bulunan yatay çizginin uzunluğunu piksel veya % olarak
burada belirlenir. Piksel ekrandaki nokta sayısı ile ilgilidir. % ise ekrandaki bir
satırı kaplama oranıdır. Örneğin 80% bir satırın %80 ni kaplayacak şekilde bir
yatay çizgiyi işaret eder.
 SIZE : Çizginin kalınlığı. 1-5 arası değerler kullanılır.
 COLOR : Çizginin rengi.
 NOSHADE : Yukarıdaki 3 durumda da çizginin bir gölgesi vardır. Bu parametre
kullanılırsa yatay çizginin gölgesi ortadan kalkar.
Etiket Özellikleri (Tag Attributes)
 <HR> Etiketi
 Örnek
 <HTML> <HEAD><TITLE>Ornek09.html</TITLE></HEAD>
 <BODY BGCOLOR=#66CCFF>
 <HR>
 <HR WIDTH=75% NOSHADE>
 <HR COLOR=#FF6600 WIDTH=200 SIZE=3 NOSHADE>
 <HR COLOR=Red WIDTH=100 SIZE=3>
 <HR COLOR=Yellow WIDTH=300 SIZE=3 NOSHADE>
 </CENTER> </BODY> </HTML>
Belge Biçim Etiketleri
 HTML çok sayıda biçimlendirme etiketi sunar.
 Bu etiketlerle belgede;
 başlık oluşturur,
 metni kalın, italik, altçizgili yapar,
 madde imlerini oluşturur
 ve yatay çizgiler oluşturabilirsiniz.
 Bunlardan bazıları aşağıdaki tablodadır.
Belge Biçim Etiketleri
İLK ETİKET
<H1>...<H2>
<STRONG>
<EM>
<B>
<I>
SON ETİKET
AÇIKLAMA
Header Tags: Başlık etiketleridir. 1 numaralısı
</H1>...</H2> en geniş olanıdır. Varsayılan hizalama (align)
sol (left) olup istersek değiştirebiliriz.
Strong Emphasis: Güçlü Vurgu Ediketidir.
</STRONG>
Genellikle Bold kalın metin olarak gözükür.
Emphasis: Vurgu Etiketi. Genellikle italik
</EM>
gözükür.
</B>
Bold: Kalın yazı
</I>
Italic: İtalik yazı
<U>
</U>
<SUP>
</SUP>
<SUB>
</SUB>
Underline: Altçizgili yazı
Bu iki deyim arasına yazılan metin üst indis
olarak işlem görür.
Bu iki deyim arasına yazılan metin alt indis
olarak işlem görür.
Belge Biçim Etiketleri
İLK ETİKET
SON ETİKET
<PRE>
</PRE>
<P>
</P>
<DIV>
</DIV>
AÇIKLAMA
Preformatted: Metni Courier fontu gibi her bir
karakteri aynı genişlikte gösterir. Bu tip fontlara
font-pitch denir. Web sayfasında yazılan
kelimelerin arasında yalnız bir boşluk vardır. Ayrıca
bir alt satıra geçerken <BR> deyiminin kullanılması
gerektiği daha önce bahsedilmişti. Web sayfasında
yazdığınız metnin NodPad e yazdığınız formatta
görünmesi için bu deyim kullanılır.
Paragraph: Paragraf etiketi. Kapatma etiketi
kullanılmaya bilir. Align değeri varsayılan olarak
left olup bu etiket bloğundan önce ve sonra bir
satır boş bırakılır.
Division: Bölüm Etiketi. Sayfada yeni bir bölüm
açmada kullanılır. Align özelliğinin varsayılan
değeri left olup P etiketinde olduğu gibi bloktan
önce ve sonra boş satır yoktur.
Belge Biçim Etiketleri
İLK ETİKET
SON ETİKET
AÇIKLAMA
Arada yazılan metni ortalamada kullanılır.
<CENTER>
</CENTER>
<BR>
yok
Line Break: Satır kırma etiketi.
<HR>
yok
<BASEFONT>
yok
<FONT>
</FONT>
<BIG>
</BIG>
<SMALL>
</SMALL>
Horizontal Rule: Yatay çizgi etiketi
Sayfanın genel metin büyüklüğünü ve rengini
değiştirmede kullanılır. size, color özellikleri
vardır.
Bir metin bloğunun büyüklüğünü, rengini ve
biçimini ayarlamada kullanılır.
Kullanıldığı alanda geçerli olan fontun
büyüklüğünün 1 derece büyüğünü yazmada
kullanılır
Kullanıldığı alanda geçerli olan fontun
büyüklüğünün 1 derece büyüğünü yazmada
kullanılır
Bunun yerine <DIV align=”center”> </DIV> de
kullanılabilir.
Metin Biçimleme
 Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şu kodları
yazıyoruz :
Metin Biçimleme
 Dosyayı “sayfa2.htm” olarak
kaydedin.
 Kaydettiğimiz dosyayı açtığımızda
:
Metin Biçimleme
 Sayfanın işleyişine baktığımızda, önce her zaman yapmamız
gerektiği gibi <html>, <head>, <title> etiketlerini yerleştirdik.
 Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve sayfanın
gövde <body> kısmına istediğimiz metinleri yazdık ve bu
metinleri <h1>'den <h6>'ya kadar olan biçimlendirme
etiketlerinin arasına aldık.
 Browser metin biçimleme etiketleri olan <h1>...<h6> etiketleri
arasındaki kelimelere belirli büyüklükler verdi.
Metin Biçimleme
 Diğer etiketleri toplu olarak kullanarak yeni bir HTML dosyası
oluşturalım. Kodlar şu şekilde olsun:
Metin Biçimleme
 Dosyayı “sayfa3.htm” olarak kaydedin.
 Kaydettiğimiz dosyayı açtığımızda :
Metin Biçimleme
Başladığınız etiketi sonlandırmayı sakın unutmayın !

Bir html dökümanını açtığımızda ve
ekran üzerinde farenin sağ tuşuna
tıklayıp ,
kaynağı görüntüle / view source 'u
seçtiğimizde Internet Explorer için
Notepad, Netscape için kendi Source
Viewer'ı açılacak ve bize o sayfanın
kodunu gösterecektir.
Metin Biçimleme
Metin Biçimlendirme Etiketlerinin Kullanımı
 Örnek:
 <HTML> <HEAD> <TITLE>Metin Biçimleri (005_text.htm)</TITLE> </HEAD>
 <BODY>
 <H1>Metin Biçimleri (005_text.htm)</H1>
 <STRONG>Güçlü Vurgu STRONG (Strong Emphasis) Metni</STRONG>
 <BR>
 <B>Kalın B (Bolt) Gibi Gözüküyor.</B>
 <!--Bir sonraki etiket yatay çizgi oluşturur.-->
 <HR>
 <EM>Vurgu EM (Emphasis) Metni</EM>
 <BR><I>İtalik I (Italic) Gibi Gözüküyor.</I>
 <HR>
Metin Biçimlendirme Etiketlerinin Kullanımı
 <PRE>
 Bu Metin PRE (Preformatted) Etiketi Kullanılarak Yazılan
 Metindir.
 Başka Bir Satır ve biraz boşluk<BR> </PRE>
 <HR>
 Birkaç Metin Yazalım.
 <BR>Bu Satırdan Önce Bir BR etiketi Var.
 <P>Bu Satırdan Önce P Etiketi Var.</P>
 Birkaç Metin Daha
 <DIV>Bu Satırdan Önce DIV Etiketi Var.</DIV>
 Bu Kadar Metin Yeter.
 <HR>
 </BODY>
 </HTML>
Metin Biçimlendirme Etiketlerinin Kullanımı
Fontlar
<BASEFONT> Etiketi
 Sayfada başlık olmayan metnin varsayılan fontuna işaret eder. <BASEFONT>
un varsayılan font büyüklüğü 3 tür.
 Örnek:
<BASEFONT size=”5” color=”red”>
yukarıdaki etiketten sonra sayfada metin büyüklüğü 5 ve rengi de kırmızı
olacaktır. (Aksi belirtilmedikçe)
Fontlar
<FONT> Etiketi
 Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı
etikettir. Bu etiketin bazı özellikleri;Font etiketinin kullanımı :
<font face="..." size="..." color="...">...</font>
 face= yazıtipinin adı (arial, tahoma, verdana, ...)
 size= yazının büyüklüğü (1-7 arası)
 color= yazının rengi (red, green gibi renklerin ingilizce karşılığı
yada RGB renk değeri)
Bunlara font etiketinin parametreleri diyoruz.
Fontlar
 Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse
font etiketi ile biçimlemek istediğiniz metin browser'ın
varsayılan fontu ile gösterilecektir.
 Bu yüzden önce sisteminizde yüklü olan fontları inceleyin
(Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan
yazıtiplerini açarak inceleyebilir ve beğendiklerinizi
kullanabilirsiniz.
Fontlar
 Şimdi font etiketinin kullanımını bir örnekle inceleyelim :
Fontlar
 Her zamankinden farklı
olarak ve ilk defa sayfamızda
renk kullandık.
 Örnekte de gördüğünüz gibi
bu işi renk kodlarıyla yaptık.
Fontlar
 Aslında renkli yazmanın bir yolu daha var o da renk kodu
yerine rengin ingilizce adını yazmak (color="red" gibi).
Kırmızı-red
Mavi-blue
Siyah-black
Sarı-yellow
Lacivert-navy
Yeşil-green
Fontlar
 <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar
 Önceki örnekte <FONT> etiketi ile fontun büyüklüğünü
ayarlamıştık font un size özelliğine +n veya –n değerlerini
atayarak mevcut fontun n fazlası veya n eksiği olarak
ayarlayabiliriz.
 <BIG> ve <SMALL> etiketleri de bağlı etiketlerdir. Bu etiketlerle
da sırası ile mevcut fontun bir derece büyüğünü ve bir derece
küçüğünü yazmak mümkündür. Yani <BIG> ile <FONT
size=”+1”> ve <SMALL> ile <FONT size=”-1”> aynı kullanıma
sahiptir.
Fontlar
 <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar
 Örnek:
 <HTML> <HEAD><TITLE>Bağlı Fontlar (Relative Fonts)</TITLE></HEAD>
 <BODY> <P>Bu normal BODY metnidir.</P>
 <P><FONT size="+1">Bu size="+1" olan metindir.</FONT></P>
 <P><BIG>Bu metin BIG etiketi ile yazılmıştır.</BIG></P>
 <p><FONT size="+2">Bu size="+2" olan metindir.</FONT></p>
 <P><BIG><BIG>Bu metin iki tane BIG etiketi ile yazılmıştır.</BIG></BIG></P>
 <P><FONT size="-1">Bu size="-1" olan metindir.</FONT></P>
 <P><SMALL>Bu metin SMALL etiketi ile yazılmıştır.</SMALL></P>
 <p><FONT size="-2">Bu size="+2" olan metindir.</FONT></p>
 <P><SMALL><SMALL>Bu metin iki tane SMALL etiketi ile
yazılmıştır.</SMALL></SMALL></P>
 </BODY> </HTML>
Fontlar
 Örnek:
Listeler
 HTML bize üç tip liste hazırlama imkanı veriyor.
 Bunlar :
 Sıralı listeler (ordered list)-Otomatik Numaralı (<OL>
 Sırasız listeler (unordered list)-Madde imli (<UL>)
 Tanımlama listeleri (definition list)
 Kullandığınız stil hangisi olursa olsun. Maddelere <LI> ile işaret
ederiz.
 Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak
liste oluşturmamızı sağlar.
 Sırasız listeler rakam/harf yerine madde imleri koyarak liste
oluşturmamızı sağlar.
 Tanımlama listeleri ise bir listeden çok kalabalık metinlerde
okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır.
Sıralı Listeler
 Liste içine alınacak metinler <ol>...</ol> etiketleri arasına
alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini
belirtir.
 Listenin maddelerinin başına ise <li> (list item) etiketini
getiriyoruz.
 <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin
rakamla mı harfle mi başlayacağını (type) yada hangi
rakam/harfle başlayacağını (start) belirtebiliyoruz.
Sıralı Listeler
 <OL TYPE=” A|a|I|i|1” START=”sayı”></OL>
 Type parametresinde kullanabileceğimiz değerler şunlar
olabilir; sayılar,harfler (küçük/büyük) ve romen rakamları (i,ii,iii
gibi)
 <OL> etiketinin TYPE özelliğine 1, a, A, I ya da i değerlerini
atayarak numaranın stilini değiştirebilirsiniz. Varsayılan değeri
“1” dir.
 Numaralı listenin başlangıç değerini <OL> nin START
etiketinden ayarlayabileceğimiz gibi <LI> etiketinin VALUE
özelliğinden de ayarlayabiliriz.
Sıralı Listeler
Sıralı Listeler
 Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta
mümkün.
 Dikkat edeceğimiz nokta, işe <ol> etiketi ile başlayıp liste
maddelerinin her birisinin başına <li> etiketini getirmek ve
listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak.
 Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek
maddeden sonra tekrar <ol> etiketini yazıyoruz ve bahsedilen
kuralları aynen uyguluyoruz.

Sırasız Listeler
 <UL TYPE=”DISC|CIRCLE|SQUARE”></UL>
 Bu tip listede de mantık aynı.
 Fark, listeleme yaparken maddelerin başına harf, rakam gibi
unsurlar yerine küçük yuvarlaklar,kareler kullanabilmemiz.
 <ol> etiketi yerine <ul> etiketini kullanıyoruz, liste maddeleri
için kullandığımız <li> etiketi burada da geçerli.
 <ol> için kullanılabilecek parametreler ise şöyle; type için disc
(içi dolu daire), circle (içi boş daire), square (içi dolu kare).
Sırasız Listeler
Tanımlama Listeler
 Bu listelemede kullanılan etiketler şöyle; <dl>...</dl> , <dd> ,
<dt>
 Listenin maddelerini belirtmek için kullandığımız <li> etiketinin
yerini burada <dt> ve <dd> etiketleri alıyor.
 Dt terim başlatma dd ise terimin açıklaması için başlatma
etiketi olarak kullanılır.
 Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına
aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz.
Tanımlama Listeler
Tanımlama Listeler
 Yazdığımız kodu browser’dan açtığımızda :
Renkler
 Metin renklendirmeyi yüzeysel olarak fontlar konusunda
öğrendik. Şimdi daha ayıntılı olarak ve bu işin mantığına inerek
yeniden ele alacağız. Aynı zamanda sayfamıza artalan rengi
vermeyi öğreneceğiz.
 Bu bölümde öğreneceğimiz konular:
 Renk kodları
 Artalanı renklendirmek
Renk Kodları
 Fontlar konusunda, metnin rengini belirlerken <font
color="..."> etiketini kullanmıştık ve color komutunun karşısına
rengin ingilizce karşılığını yazabiliriz demiştik.
 Fakat bunun daha karmaşık olan bir başka yolu vardı; o da
16'lık sayı düzeninde renk kodu girmek. Önce sayı düzenleri
nedir nasıl olur ona bakalım.
 Günlük hayatımızda kullandığımız sayı sistemine 10'luk sayı
sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan
oluşan sembollerle ifade ediyoruz. 10'luk sayı sisteminin
yanısıra diğer sayı sistemleri de vardır.
 Bunlardan bilgisayar alanında kullanılan iki tanesi ikili (binary)
ve onaltılı (hexadecimal) sayı sistemleridir.
Renk Kodları
İkili sayı sistemi nasıl olur? Bildiğiniz gibi günlük hayatta
kullandığımız 10'lu sayı sisteminde 0-9 arası toplam 10
rakam vardır.
 Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var
(bunlar 0 ve 1) ve tüm sayılar bu iki rakamı kullanarak ifade
edilebilir, nasıl mı? İşte burada işin içine matematik giriyor.
Kısa ve öz olarak belirtmek gerekirse
10'luk düzendeki bir sayıyı ikilik düzene
çevirmek için o sayı devamlı olarak 2'ye
bölünür ve kalanlar soldan sağa doğru
yanyana yazılır.

Renk
Kodları
 Gelelim asıl konumuz olan 16'lık sayı sistemine. Bu sayı
sisteminde de toplam 16 rakam var bunlar :

Etikette kullandığımız color=#xxxxxx ifadesi ise RGB
(red-green-blue,kırmızı-yeşil-mavi) renklerinin karışım
oranlarını belirtir. Bu renklerden herbirinin alacağı değer
00 ile FF aralığında olabilir (FF maksimum, 00 minimum
karışımı verir).
Renk Kodları
 Buna göre :





#000000 siyah
#FF0000 kırmızı
#00FF00 yeşil
#0000FF mavi
#FFFFFF beyaz.
 Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.
Artalanı Renklendirmek
 Bu renklerle yalnızca metinleri değil sayfamızın artalananını da
renklendirebiliriz.
 Bunun için <body bgcolor=#xxxxxx> etiketini kullanıyoruz. Daha
doğrusu sayfamızın gövdesini belirtmek için yazdığımız <body>
etiketini, <body bgcolor=#xxxxxx> şeklinde değiştiriyoruz.
Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !
Artalanı Renklendirmek
Artalanı Renklendirmek
 Yazdığımız kodu browser’dan
açtığımızda :
Resimler
 Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında
olması zorunluluğu dışında herhangi bir kısıtlama yok. (telif
hakları kanunu dışında tabi)
 GIF (Graphics Interchange Format) genellikle küçük resimler ya
da hareketli animasyonlar için kullanılır. Gif sıkıştırıldığında
resmin kalitesinde bozulma olmaz.
 JPEG Genellikle büyük ebatlardaki resim formatıdır. Jpeg
resimlerini sıkıştırdığımız ölçüde kalitesinde azalma olur. Yalnız bu
bozulmalar insan gözü ile pek belli olmaz.
 Not: Yeni browserların desteklediği yeni bir üçüncü tip resim
formatı da PNG (Portable Network Graphics). Png formatı, Gif’in
yerine geçebilir. Bu format hakkında daha detaylı bilgi almak için
http://www.cdrom.com/pub/png adresine bakabilirsiniz.
Resimler
 Resim ekleme işi gayet kolay. Yapmamız gereken browser'a
sayfaya koyacağı resmin nerede olduğunu göstermekten ibaret.
Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy
uzunluğunu belirtmeniz sizin faydanıza olacaktır. Kullanacağımız
etiket şu şekilde olacak;
 <img src="resmin bulunduğu yer ve adı" width="x" height="y">
Resimler
 <IMG> Etiketinin Özellikleri
 HTML ’nin çoğu taglarından farklı olarak <IMG> etiketinin
kapama etiketi yoktur. Bazı özellikleri şunlardır;
 src: resmin bulunduğu dosya ve yol ismi
 alt: Resim göstermeyi desteklemeyen tarayıcılar ya da resim yüklenirken






resmin yerinde gözükecek olan metindir.
align: Resmin sayfada farklı hizalamada kullanılır. Left, right, top, middle
veya bottom olabilir.
hspace: Resmin etrafındaki yatay boşluk
vspace: Resmin etrafındaki dikey boşluk
height: pixel olarak resmin yüksekliği
width: pixel olarak resmin genişliği
border: Resmin etrafındaki çerçeve kalınlığıdır. “0” değeri verilerek çerçeve
kaldırılabilir. (Bir resme hyperlink verildiğinde bu iyi bir yoldur. Neden?)
Resimler
 Örneğin bu sevimli kediyi sayfamıza ekleyelim, peki işte size
bir soru: bu resmin nerede olduğunu browser'a nasıl izah
ederiz?
 Diyelim ki resmimizin adı kedi.gif eni 65, boyu da 91 piksel,
eğer bu resim html sayfamızla aynı dizinde duruyorsa sorun
yok, kod aynen şu şekilde olmalı:

<img src="kedi.gif" width="65" height="91">
Resimler
 Fakat siz diyorsunuz ki; benim birden çok eklemek istediğim
resmim var ve bunları resim adlı bir alt klasörde topladım.
 Bu durumda browser'ınız o an çalışan html dosyasının
bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna
göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde
kullanacağız :
 <img src="resim/kedi.gif" width="65" height="91">
Bölü işaretinin yönüne dikkat edin. Bu Windows'ta ya da
Dos'ta dizinler için kullandığımız ters bölü işaretinin tersi,
yani normal bölü işareti. HTML'de dizinler belirtilirken hep
bu bölü işareti kullanılır. Ziyaret ettiğiniz Internet adreslerini
hatırlayın.
Resimler
 Alt dizine ulaşabildik. Fakat üst dizinlere nasıl ulaşacağız? O da




kolay. Bu seferde html dosyamızı bir klasör oluşturup o klasörün
içine koyalım, mesela klasörün adı da html olsun. Kedicik
bulunduğu resim klasöründe kalsın. Son durum şöyle olacak;
c:\html_ders\html\deneme.htm yolunda html dosyamız ,
c:\html_ders\resim\kedi.gif yolunda resim var.
İzlememiz gereken yol şöyle: browser deneme.htm dosyasının
bulunduğu klasörü kök dizin kabul etti. Önce bir üst dizine
çıkmalıyız ardından resim dizinine girmeliyiz. Üst dizine çıkmayı
../ ifadesiyle belirtiyoruz.
<img src="../resim/kedi.gif" width="65" height="91">
Resimler
 <img src="../resim/kedi.gif" width="65" height="91">
 Bu şekilde ardarda ../ ifadesiyle istediğimiz kadar üst dizine
geçebiliriz.
 Eğer iki üste geçeceksek ../../ ifadesi işimizi görecektir.
Resmi Hizalama
 Resim artık sayfamızda, fakat daima hep solda duruyor.
Bir hizalama (align) komutuyla resmi sağa, ortaya ya da sola
alabiliriz.
 Bir metinle kullandığınızda ise buradaki gibi bir sonuç
alabilirsiniz, hizalama komutu resmi bu sefer metni gözönüne
alarak hizalayacaktır.
 <img src="resim.jpg" width="25" height="25" align="left">
Resimler
 <IMG> Etiketinin Özellikleri
 Align Özelliği
 Sayfadaki diğer elemanlarla resmin nasıl hizalanacağını kontrol etmek için bu
özelliği kullanırız. Varsayılan olarak tarayıcı resmi sola hizalar ve resimden
sonra gelen eleman resmin yanına yerleşir.
 Top: Resimden sonra gelen metinlerin üst satırı resmin üstü ile hizalanır.
 Middle: Resimden sonra gelen metinlerin üst satırı resmin ortası ile
hizalanır.
 Bottom: Resimden sonra gelen metinlerin üst satırı resmin altı ile hizalanır.
 Left: Resim sayfanın soluna hizalanır. Resimden sonra gelen metnin tümü
üstten itibaren resmin sağına yerleşir.
 Right: Resim sayfanın sağına hizalanır. Resimden sonra gelen metnin tümü
üstten itibaren resmin soluna yerleşir.
Resmi Hizalama
 Örnek:
 <HTML> <HEAD> <TITLE>WEB TASARIMI</TITLE> </HEAD>
 <BODY text="#0000CC">
 <IMG src=../../Belgelerim/Resimlerim/delta.gif align="left">
 <!--Burada Align özelliğine farklı değerler atayarak durumu
 görelim.-->
 <H1>Resmin Align Özelliği</H1>
 Bakalım resimden sonra yazmış olduğumuz metinler nereye
 yerleştiriliyor.
 Bakalım resimden sonra yazmış olduğumuz metinler nereye
 yerleştiriliyor.
 </BODY>
 </HTML>
Resmi Hizalama
 Örnek
Resmi Hizalama
 <BR clear=”all”> Etiketinin Kullanımı
 Bazen align özelliğine verdiğimiz değere göre metin resmin
etrafını çevreler.
 Align özelliğini kaybetmesini istediğimiz yerde <br clear=”all”>
etiketini kullanırız.
Resmi Hizalama
 Örnek:
 <HTML> <HEAD> <TITLE>WEB TASARIMI</TITLE> </HEAD>
 <BODY text="#0000CC">
 <IMG src=../../Belgelerim/Resimlerim/delta.gif align="left">
 <!--Burada Align özelliğine farklı değerler atayarak durumu
 görelim.-->
 <H1>Resmin Align Özelliği</H1>
 Bakalım resimden sonra yazmış olduğumuz metinler nereye
 yerleştiriliyor.
 Bakalım resimden sonra yazmış olduğumuz metinler nereye
 yerleştiriliyor.
 <br clear="all"> <!--Burada clear'a farklı değerler atayarak durumu gözleyelim-->
 Bakalım resimden sonra yazmış olduğumuz metinler nereye
 yerleştiriliyor.
 </BODY> </HTML>
Resmi Hizalama
 Örnek:
Artalana Resim Koyalım
 Artalanı renklendirmeyi öğrenmiştik: <body bgcolor="....">
ifadesiyle bu işi kolayca yapıyorduk. Bu ifadeyi şu şekilde yazarsak
resmimiz artalana döşenecektir.
 <body bgcolor="..." background="...">
 background ifadesinin karşısına yukarıda anlattığımız kurallar
çerçevesinde istediğimiz resmi koyabiliriz. Fakat bu sefer en ve boy
ifadesini kullanmamıza gerek yok. Seçtiğimiz resim browser
tarafından tüm sayfayı kaplayacak şekilde sayfaya yerleştirilecektir.
Resme alternatif metin eklemek
 Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer
browser'ını sadece metinleri göstermek üzere ayarlamışsa,
resim yerine alternatif açıklama görüntülenecektir.
 alt="..." parametresiyle açıklama ekliyoruz, bu açıklama aynı
zamanda kullanıcı fare imlecini resim üzerine getirdiğinde sarı
bir çerçeve içinde görüntülenir.
 <img src="resim.gif" alt="kum saati">
Resimler
 Gökyüzünü artalana koyalım, dünyayı da ortalanacak şekilde
sayfaya yerleştirelim.
Bağlantılar
 <a>...</a>
 Geldik HTML'de en önemli unsurlardan birisi olan bağlantılara.
 Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle
ilişkili hale getirebiliriz. Bir tıklama bizi istediğimiz yere
götürecektir.
 HTML'de metinlere ve resimlere bağlantı kazandırmak
mümkündür.
 Ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri,..
bunların hepsine bağlantı kazandırmak mümkün.
 Hatta yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı
da olabilir.
Bağlantılar (Hyperlinks)
 Sayfalara link (bağlantılar) oluşturmak için <A> Anchor etiketi





kullanılır.
<A> etiketini kullanarak;
Kendi Web Sitenizde başka bir Web Sayfasına http hyperlinki,
Başka bir Web Sitesinin bir sayfasına http hyperlinki,
Dosya download etmek için bir ftp linki,
Mail mesajı oluşturmak için bir mailto linki oluşturabilirsiniz.
Bağlantılar
 Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız
komutları inceleyim :
 <a href="....">...</a>
 Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir,
kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının
kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz.
Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkün.
 <a>...</a> etiketi arasına yazdığımız yazılar bağlantı özelliğine
sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse
browser tarafından altı çizili ve mavi renkli gösterilir.
Bağlantılar
 <a href="meyve.gif"> buraya tıklandığında meyve resmi
açılacak </a>
 Birinci örnekte "buraya tıklandığında meyve resmi açılacak"
yazısına bağlantı özelliği kazandırdığımızdan browser
tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare
imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir.
Kullanıcı bu linke tıkladığında browser o anda açık bulunan
sayfa ile aynı dizinde bulunan meyve.gif resmini açacaktır. Tabii
ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır.
Bağlantılar
 <a href="midi.zip"> midi dosyalarını çekmek için tıklayın </a>
 İkinci örnekte aynı şekilde "sıkıştırılmış midi dosyalarını
çekmek için tıklayın" yazısına bağlantı özelliği kazandırdık.
Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte
meyve.gif'e tıklandığında browser resmi açacaktır fakat bu
örnekte browser kullanıcıya midi.zip dosyasını açmak mı yoksa
diske kaydetmek mi istediğini soran bir pencere açar. Bunun
sebebi browser htm, txt, jpg, gif,.. uzantılı dosyaları
görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları
görüntüleyememesidir.
Bağlantılar
 <a href="sayfa2.htm"> 2.sayfaya gitmek için tıklayın </a>
 Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında
aynı dizinde bulunan sayfa isimli başka bir html dökümanı
açılacaktır.
 <a href="resim/kedi.jpg"> kedi resmi </a>
<a href="resim/bitki/karanfil.gif"> işte çok güzel bir karanfil
</a>
<a href="../araba/bmw.jpg"> otomobil resimleri </a>
 Bu 3 örnekte altdizinlere/üstdizinlere verilen bağlantıya
örnekler görüyorsunuz, resimler konusunda gördüğümüz
kurallar burada da geçerli.
Bağlantılar
 <a href="http://www.benimsitem.com/"> tıklayın sitemi







ziyaret edin </a>
İnternet adresine giden link örneği.
<a href="ftp://ftp.benimsitem.com/"> tıklayın dosyaları indirin
</a>
Bu ise bir ftp adresine verilen link örneği.
<a href="mailto: [email protected]"> mail atın </a>
Buradaki linke tıklandığında kullanıcının ilgili mail programı
açılacak ve mail'in send to (kime) kısmına verdiğimiz mail
adresi otomatik olarak yazılacaktır.
<a href="http://www.firat.edu.tr/elkbilgi" title="Elektronik
Bilgisayar"> Bölümüm</a>
Title ifadesi bağlantıya açıklama eklemeyi sağlar.
Bağlantılar-Yer İmi
 <a href="#...">...</a> ve <a name="....">...</a>
 Sayfa içi (dahili) linkleri bu komutu kullanarak hazırlayabiliriz.
 Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir
menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında
ilgili konu açılsın.
 Böyle bir sayfa hazırlamak için yapacağımız şeyler :
1 - "tıklandığında" açılacak konuyu işaretlemek
<a name="....">...</a>
2 - browser'a, hazırlayacağımız menüye "tıklandığında" bu
işaretli konuya gitmesini bildirmek.<a href="#...">...</a>
Bağlantılar
Bağlantılar
 Diyelim ki kullanıcı sayfadaki bir linki
tıkladığında, başka bir sayfanın belli
bir bölümünün açılmasını istiyoruz.
 Bunun için linke tıklandığında
açılacak yazıyı <a name>...</a>
ile işaretledikten sonra bağlantı
etiketini şu şekilde yazıyoruz:
Resimlere bağlantı özelliği kazandırmak
 Bunun için resmi yerleştirmek için kullandığımız:
<img src="..." width="x" height="y"> etiketini
<a href>...</a> etiketinin arasına alıyoruz.
 resim.gif tıklanacak resmi, sayfa1.htm resme tıklandığında
açılacak sayfayı gösteriyor.
 Border komutu ise resimde bağlantı özelliği olduğunu belirten
çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen
yok eder. Bu komutu değişik sayılarla deneyebilirsiniz.
Target parametresi
 Bağlantının açılacağı pencereyi belirtmek için target
parametresi kullanılır .
 <a href="..." target="...">...</a>
Resim ve Bağlantılar
 Bir resme hyperlink (bağlantı) eklemek için <IMG> ve <A> etiketlerini
birlikte kullanırız.
 Örnek:
 <HTML> <BODY>
 <A href=“image1.htm"><IMG src="b1.gif" align="middle"border="0"></A>
 image1.htm -- Resim Örneği <br clear="left"><BR>
 <A href=“image2.htm"><IMG src="b2.gif" align="middle"border="0"></A>
 image2.htm -- Resmin Align Özelliği <br clear="left"><BR>
 <A href=“image3.htm"><IMG src="b3.gif" align="middle"border="0"></A>
 image3.htm -- BR etiketinin clear özelliği <brlear="left"><BR>
 <A href=“image4.htm"><IMG src="b4.gif" align="middle"border="0"></A>
 image4.htm -- Width ve Height Özelliği <br clear="left"><BR>
 <A href=“images.htm"><IMG src="b5.gif" align="middle"border="0"></A>
 images.htm -- Sayfanın Kendisi
 </BODY></HTML>
Resim
ve
Bağlantılar
Bir resme hyperlink (bağlantı) eklemek için <IMG> ve <A> etiketlerini

birlikte kullanırız.
 Örnek:
 <HTML> <BODY>
 <A href=“image1.htm"><IMG src="b1.gif" align="middle"border="0"></A>
 image1.htm -- Resim Örneği <br clear="left"><BR>
 <A href=“image2.htm"><IMG src="b2.gif" align="middle"border="0"></A>
 image2.htm -- Resmin Align Özelliği <br clear="left"><BR>
 <A href=“image3.htm"><IMG src="b3.gif" align="middle"border="0"></A>
 image3.htm -- BR etiketinin clear özelliği <brlear="left"><BR>
 <A href=“image4.htm"><IMG src="b4.gif" align="middle"border="0"></A>
 image4.htm -- Width ve Height Özelliği <br clear="left"><BR>
 <A href=“images.htm"><IMG src="b5.gif" align="middle"border="0"></A>
 images.htm -- Sayfanın Kendisi
 </BODY></HTML>
Image MAP- RESİMLERİNİZİN
HARİTASINI ÇIKARTIN
 <IMG usemap> ve <IMG> etiketlerini kullanarak bir resmin belli bölgelerine
 hyperlink verebiliriz. çoğu Web Site Geliştirme programları Image Map
 araçlarına sahiptir.
 Bir resim üzerine harita üç farklı şekilde tanımlanabilir;
 Rect (Dikdörtgensel)
 Circle (Dairesel)
 Poly (Çokgensel)
Image MAP- RESİMLERİNİZİN HARİTASINI
ÇIKARTIN
 <MAP> Etiketi
 Resmin üzerinde tıklanabilir alanlar ve tıklandığında gideceği hedef tanımlanır. Bu
etiketin NAME özelliğine bir isim verilir ki bu isim daha sonra haritaya başvuru
yapmada kullanılır.
 <AREA> Etiketi
 <AREA> etiketi ile <MAP> etiket bloğunun arasında tıklanabilir alanlar ve hedef linkler
tanımlanır. <AREA> etiketinin özellikleri;
 SHAPE: Tıklanabilir alanın şeklini belirttiğimiz özellik. Recti Circ, Poly değerlerini alabilir.
 COORDS: Bu özelliğe de şeklin koordinatlarını atarız.
 HREF: Bu özelliğine de hedef Web Sayfasını belirtiriz.
Image MAP- RESİMLERİNİZİN HARİTASINI
ÇIKARTIN
 COORDS Özelliği
 Şekil rect ise; dikdörtkenin sol üzt köşesi ve sağ alt köşesinin koordinatları sıra ile
yazılır.
 Şekil circ ise; çemberin merkesinin koordinatı ve daha sonra pixel olarak yarıçapı
yazılır.
 Şekil poly ise; herhangi bir noktadan başlanıp teker teker koordinatlar sıra ile yazılır.
Image MAP- RESİMLERİNİZİN HARİTASINI
ÇIKARTIN
 Son olarak <IMG> etiketinin usemap özelliğine haritanın adı yazılarak
 haritaya çağrı yapılır.
 Örnek: map.htm
 <HTML>
 <HEAD>
 <TITLE>Untitled Document</TITLE></HEAD>
 <MAP name="harita">
 <AREA shape=rect coords="55, 59, 135, 165" href=image1.htm alt=image1.htm>
 <AREA shape=poly coords="29, 215, 29, 175, 71, 186, 112, 211, 76, 227, 95, 259, 40, 244"
href="image2.htm" alt="image2.htm">
 <AREA shape="circle" coords="160, 208, 35" href=“image3.htm” alt=“image3.htm“>
 </MAP>
 <BODY>
 <IMG src="Nilüfer çiçekleri.jpg" width="232" height="308" usemap=#harita border="0">
 </BODY> </HTML>
Uygulama
 Bu uygulama çalışmasında 4 çalışma yapılacak
 Basit bir Web Sayfası yapımı
 HTML biçimlendirme etiketlerinin kullanımı
 Hyperlinkler oluşturma
 Web Sayfasına grafik ekleme
 Bu işlemleri yapmak için şimdiye kadar tüm öğrendiklerinizi
kullanarak kendinizi tanıtan ve en az 3 sayfadan oluşan bir Web
Sitesi hazırlayınız.
Özel Karakterler
 HTML metin içerisine özel karakterleri yazmak için aşağıdaki
format kullanılır. xxx ISO karakter kodu olmak üzere; &#xxx;
şeklindedir. Örneğin copyright sembolü için “&#169;” yazılır.
 Buna ilaveten HTML çok sık kullanılan bazı özel karakterler için
aşağıdaki gibi kısa yola sahiptir.
 &nbsp; <!-- non-breaking space ( ) -->
 &quot; <!-- quote character (“) -->
 &lt; <!-- less-then charakter (<) -->
 &gt; <!-- greater-then charakter (>) -->
 &amp; <!-- ampersand charakter (&) -->
 &copy; <!-- copyright symbold charakter (©) -->
Tablolar
 Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler;
İLK
ETİKET
SON
ETİKET
<TABLE>
</TABLE>
<CAPTION>
</CAPTION>
<TR>
</TR>
<TH>
</TH>
<TD>
</TD>
AÇIKLAMA
Tablonun başlangıç ve bitimini tanımlamada
kullanırız.
Tablonun altına ya da üstüne başlık metni
eklemede kullanılır. Bunun için Align özelliğine
top ya da bottom değeri atanır.
Table Row: Tablo satırı oluşturmada kullanılır.
Table Header: Tabloya başlık hücresi ekler.
Başlık hücresi bold ve ortalı yazılır.
Table Data: Tablonun satırına veri elemanı
(hücre) eklemede kullanılır.
Tablolar
Tablolar
 Tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık
atayabiliriz (thead). Her sütun için de kendi başlığını oluşturmak
mümkündür. Tablonun sona erdiği satırdan sonraki satıra açıklama
koyabiliriz (caption). Ayrıca tablo hücrelerini yanındaki veya
altındaki hücrelerle birleştirebiliriz:
Tablolar
 Şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim.
Öncelikle <table>...</table> etiketlerini yazıyoruz ve arasını
doldurmaya başlıyoruz. <tr> etiketi ile satırları , <td> etiketi ile
de sütunları oluşturuyoruz.
Tablolar
Tablolar
 <TABLE> Etiketi
 <TABLE> etiketi kullanmak zorunda olmadığımız birkaç özelliğe
sahiptir.
ÖZELLİK
ALIGN
WIDTH
BORDER
CELLSPACING
CELLPADDING
AÇIKLAMA
Tablonun sayfadaki hizalamasını kontrol eder. Left, center veya
right olabilir. Varsayılanı left tir.
Tablonun genişliğini sabit olarak belirteceksek bu özelliğe pixel
olarak bir sayı, sayfanın yüzdesi büyüklüğünde olmasını istiyorsak
yüzdeli bir sayı yazılır. (WIDTH=”100” ya da WIDTH=”100%”)
Border yani çerçeve büyüklüğü pixel olarak bildirilir. “0” verilirse
çerçevesizdir.
Hücreler arasındaki çerçevenin kalınlığını belirtir. Varsayılan olarak
1 dir.
Hücre çerçevesi ile içeriği arasındaki mesafeyi pixel olarak belirler.
Varsayılanı 1 pixeldir.
Tablolar
 <TR> Etiketi
 TR etiketi iki tane özelliğe sahiptir. Bunlar;
ÖZELLİK
ALIGN
VALIGN
AÇIKLAMA
Satırdaki hücrelerin içeriğinin yatay hizalamasını kontrol eder.
left, right, center olabilir.
Satırdaki hücrelerin içeriğinin dikey hizalamasını kontrol eder.
top, middle, bottom olabilir.
Tablolar
 <TH> ve <TD> Etiketleri
 Tablo Başlığı (Table Header=TH) ve Tablo Verisi (Table Data=TD)
 etiketlerinin özellikleri;
ÖZELLİK
ALIGN
VALIGN
AÇIKLAMA
Hücre içeriğinin yatay hizalamasını kontrol eder.
Hücre içeriğinin dikey hizalamasını kontrol eder.
Kelime aralarında satır sonu kırmalarını pasif yapar. (Word Wrapping)
NOWRAP
ROWSPAN
Bir hücrenin genişletileceği satır sayısını belirtir. Varsayılanı 1 dir.
Bir hücrenin genişletileceği sütun sayısını belirtir. Varsayılanı 1 dir.
COLSPAN
WIDTH
Hücrenin pixel olarak genişliği
HEIGHT
Hücrenin pixel olarak yüksekliği
Tabloda başlık ve gövde
 Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde
(body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi
<tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir
açıklama vermek mümkündür.
 Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir
ve bunlar <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır.
 Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri
<tbody>...</tbody> arasına alınır.
Tablolar
Parametreler
 <table border="..." cellpading="..." cellspacing="..." align="..."
width="..." height="...">
 border parametresi çerçevenin kalınlığını belirtir. border=0
çerçevenin görünmemesini sağlar.
Parametreler
 cellpadding parametresi hücre içi marj değerini belirtir.
cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik)
bitişik olmasını sağlar.
Parametreler
 cellspacing parametresi
hücreler arası
marjı belirler.
Parametreler
 align parametresi
tabloyu hizalamada
kullanılır .
 align=left sola,
 align=right sağa
dayalı yapar,
 align=center ortalar .
Parametreler
 width ve height parametreleri resimler konusunda
gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir.
 Tablonun değer verilmediğinde sahip olduğu normal
ölçülerinden küçük değerler verilirse bu değerler dikkate
alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat
küçültemeyiz.
Parametreler
<td> etiketi için parametreler
 <td bgcolor="..." background="..." width="..." height="..."
align="..." valign="...">
 bgcolor parametresi hücreyi renklendirmede kullanılır.
<td> etiketi için parametreler
 background parametresi ile hücreye grafik-artalan
yerleştirebiliriz.
<td> etiketi için parametreler
 width ve height parametreleri ile hücrenin boyutlarını
belirleyebiliriz.
 Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin
yüksekliğini değiştirebilirken, width komutu ile her hücreyi
değiştiremeyiz.
 En büyük width değeri tüm sütun için geçerli olacaktır.
 Aynı şekilde tek satırlı tabloda width değerini her hücre için
değiştirebilirken en büyük height değeri tüm satır için geçerli
olacaktır.
<td> etiketi için parametreler
<td> etiketi için parametreler
<td> etiketi için parametreler
 align parametresi hücre içinde yatay hizalama yapar.
<td> etiketi için parametreler
 valign parametresi hücre içinde düşey hizalama yapar.
Hücreleri Birleştirme
 <td colspan=".." rowspan="..">
 Aynı satırdaki hücreleri birleştirmek için colspan,
 Aynı sütundaki hücreleri birleştirmek için de rowspan
parametresini kullanıyoruz.
 Aşağıdaki gibi bir tablo yapımız olsun :
Hücreleri Birleştirme
 A ve B hücrelerini birleştirmek için A hücresine ait <td> etiketine
colspan=2 parametresini ekliyoruz ve B hücresine ait <td>B</td>
etiketini siliyoruz.
 E F ve G hücrelerini birleştirmek için E hücresine ait <td> etiketine
colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait
<td>F</td> , <td>G</td> etiketlerini siliyoruz.
Hücreleri Birleştirme
 Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait
<td> etiketine rowspan=2 parametresini ekliyoruz ve I
hücresine ait <td>I</td> etiketini siliyoruz.
 C G ve K hücrelerini birleştirmek için C hücresine ait <td>
etiketine rowspan=3 parametresini ekliyoruz ve G ve K
hücrelerine ait <td>G</td> , <td>K</td> etiketlerini siliyoruz.
Sayfa Biçimlendirmede Tablo Kullanımı
 HTML ’in en büyük avantajlarından biri de ekstra boşlukları ve
carriage return (satır kırma, paragraf, sekme vs.)karakterleri
kaldırarak sayfayı otomatik olarak biçimlendirmesidir. Maalesef
bu durum aynı zamanda en büyük problemdir. Sayfanın şeklini
ayarlarken metinleri istediğimiz yerlere konumlandıramayız.
Neyse ki bunun için tabloları kullanabiliriz.
Sayfa Biçimlendirmede Tablo Kullanımı
 Örnek:
 <HTML>










<BODY background="bg2.gif">
<TABLE border="0">
<TR>
<TD width="10“> <img border="0" src="amblem.jpg"></TD>
<TD> <H1>FIRAT ÜNİVERSİTESİ </H1> </TD>
<TD><FONT size="2"><A href="hakkinda.htm">Web Sitemiz
Hakkında</A></FONT></TD>
</TR>
<TR>
<TD width="10"><A href="ogrenciler.htm">Öğrenciler</A></TD>
<TD colspan="2">Üniversitemiz Elektronik ve Bilgisayar alanında deneyimli
öğretmenler yetiştirmektedir.</TD>
</TR>
Sayfa Biçimlendirmede Tablo Kullanımı
 <TR>
 <TD><A href="personel.htm">Personel</A></TD>
 <TD colspan="2“>
 <UL>
 <LI>Bigisayar Sistemleri</LI>
 <LI>Elektronik</LI>
 <LI>Kontrol ve Telekom</LI>
 </UL>
 </TD>
 </TR>
Sayfa Biçimlendirmede Tablo Kullanımı
 <TR>
 <TD><A href="mailto:[email protected]"> E-Mail Göner </A>
 </TD>
 </TR>
 <TR>
 <TD></TD>
 <TD><FONT size="2">Bu WEB sayfası deneme amaçlı yapılmıştır.</FONT></TD>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Sayfa Biçimlendirmede Tablo Kullanımı
Yukarıdaki gibi bir sayfayı oluşturmanın
bir başka yöntemi ise frame
(çerçeve) kullanmaktır.
Frame (Çerçeve) Kullanımı
 Çerçeve (frame) ’yi bir browser penceresinden birden fazla
web sayfasını görüntülemek olarak tanımlayabiliriz.
 Çerçeveler (frames), HTML'e sonradan eklenmiş bir özelliktir.
Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve
üstü sürümleri frameleri destekler.
 Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını,
kullanıcının isteğine göre değiştirme imkanı verir.
 Görüntülenen sayfalardan birindeki linkin tıklanması ile başka
bir çerçevedeki içeriği değiştirebiliriz.
Frame (Çerçeve) Kullanımı
 Aşağıdaki etiketleri kullanarak ana frame penceresini
oluştururuz.
İLK ETİKET
SON ETİKET
<FRAMESET>
</FRAMESET>
Çerçeveli sayfayı belirtmede kullanılır.
<FRAME>
yok
Bir çerçeve sayfası için ad ve kaynak
belirtmede kullanılır.
<NOFRAME>
</NOFRAME>
AÇIKLAMA
Çerçeveyi desteklemeyen browserların
göstereceği alternatif sayfa bu etiket arasına
yazılır.
<FRAMESET> Etiketi
 Çerçeveli belge oluşturacağımız zaman, çerçevenin yapısını
belirtmek için <FRAMESET> ve <FRAME> etiketlerini kullanırız.
<FRAMESET> i kullanarak çerçeveleri satırlar ve sütunlar olarak
ya da her ikisini kullanacak şekilde tanımlayabilirsiniz.
 <FRAMESET> etiketi iki tane özelliğe sahiptir;
 COLS: Sütun çerçevenin sayısını ve büyüklüğünü belirler
 ROWS: Satır çerçevenin sayısını ve büyüklüğünü belirler.
 Aşağıdaki üç metottan birini kullanarak satır ve sütunları
tanımlayabiliriz.
 Sayfa yüksekliği ve genişliğinin bir yüzdesi olarak (“50%” gibi)
 Piksel cinsinden sabit bir sayı ile (“100” gibi)
 Kullanılabilir boşluğun kalanını kullanarak (“*” ile)
<FRAMESET> Etiketi
 Aşağıdaki tabloda bir web sayfasının çerçevesinin nasıl tanımlanacağının







birkaç örneği vardır.
<FRAMESET COLS=“100,100,*”>
Üç sütunlu çerçeve; ilk ikisi 100 piksel genişliğinde, üçüncüsü ise kalan
boşluğun tamamı büyüklüğünde.
<FRAMESET COLS=“100,30%,*”>
Üç sütunlu çerçeve; birincisi 100 piksel, ikincisi browserın %30 u ve
üçüncüsü de kalan boşluğun tamamı büyüklüğünde.
<FRAMESET ROWS=“20%,*,30%”>
Dört satırlı çerçeve; birincisi web tarayıcısının %20 si yüksekliğinde, ikincisi
kullanılabilecek alanın tamamı, üçüncüsü ise tarayıcının %30 u
yüksekliğindedir.
Not: <FRAMESET> etiketi <BODY> ve <HEAD> etiketinin dışında kullanılması
nedeni ile diğer çoğu etiketlerden farklıdır.
<FRAME> Etiketi
 <FRAMESET> ile çerçeve sayfası tanımlandıktan sonra her bir
çerçeve penceresinin kaynağını belirtmeliyiz. Bunu da
<FRAME> etiketi ile yaparız.
 Özellikleri;
ÖZELLİK
NAME
SRC
FRAMEBORDER
NORESIZE
SCROLLING
AÇIKLAMA
Pencerenin adını belirler
Pencerede gösterilecek kaynak dosyayı belirler
Piksel olarak Çerçeve kalınlığı
Bu özellik yazıldığında çullanıcı çerçeveyi boyutlandıramaz.
Kaydırma çubuğunun olup olmayacağına işaret eder. Auto, Yes
ya da No değerlerini alabilir. Varsayılan Auto dur.
 <FRAMESET> etiketinin içerisinde her bir satır ya da sütun
çerçeve için <FRAME> etiketini kullanmak gerekir.
Çerçeveler
 Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm
dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a
görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan
birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını
görüntülemesini bildiriyor.
Çerçeveler
Çerçeveler
 <body bgcolor="..."> etiketi ile htm1.htm dosyasının artalan rengi kırmızı,
htm2.htm dosyasının artalanı ise mavi yapılmış, kolaylık olması açısından
dosyaların adlarını görüntülemeleri için bunlar da yazılmıştır.
<frameset>...</frameset>
 Çerçeve oluşturmada kullandığımız etiket frameset,
 cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde
olacağını belirtiyor,
 rows yazarsak çerçeveler alt alta satırlar görünümünde
açılacaktır.
<frameset>...</frameset>
 cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden




ebatlarını belirliyoruz.
Buraya örneğin cols="140,500" gibi sayı yazılabilir,
cols="25%,75%" ile browser penceresinin o anki ebadına göre
verilen % oranlarına göre şekil alması sağlanabilir,
* sembolü ile açılacak çerçevenin ebadı browser'a bırakılır.
cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin
ise ebadının browser'a bırakıldığını gösteriyor.
<frameset>...</frameset>
 Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş
oluyoruz. cols=".." ifadesine iki değer (ya da yıldız) verirsek bu
iki pencere aç anlamındadır, 3 değer 3 pencere açar.
 <frame name="..." src="..."> etiketi çerçevelere, bağlantıların
TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi
sağlıyor. src pencerede görüntülenecek html dosyasının yerini
gösteriyor.
 Açılacak çerçeve sayısı kadar
<frame name="..." src="...“> etiketi kullanıyoruz.
<frameset>...</frameset>
 Eski sürüm browserların çerçeve etiketini tanımadıklarından
bahsetmiştik.
 İşte noframes kısmı bu browserlara hitap ediyor.
 body kısmını bu eski browserlar görüntüleyebiliyor. Buraya örneğin
sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj
yazılabilir, böylece ziyaretçinin artık yeni sürüm
bir browser kullanması gerektiğini hatırlatabilirsiniz.
<frameset>...</frameset>
 FRAMESET etiketi ile kullanabileceğimiz diğer parametreler
şunlar;
 frameborder="...“ (sayı) Sınır çizgisinin kalınlığını (veya
çerçeveler arası mesafeyi) belirler.
FRAMESET etiketini HTML dosyanızın </head>...<body>
etiketleri arasında kullanmayı unutmayın !
<frameset>...</frameset>
 FRAME etiketi ile kullanabileceğimiz parametreler;
 marginwidth="..." marginheight="..." (sayı) Sayfanın
solundaki (marginleft) ve üstündeki (margintop) kenar
boşluklarını belirler.
 scrolling=".." (yes, no, auto) Kaydırma çubuklarının
durumunu belirler.
 noresize Pencere boyutlarının sabit olmasını sağlar.
Daha karmaşık çerçeveler
 Yan yana sütünlar ya da alt alta satırlar görünümünde
çerçeveler açmayı öğrendik peki tablolarda gördüğümüz
hücreleri birleştirme gibi bir özellik çerçevelerde de var mı?
maalesef yok, fakat aynı görünümü elde etmek mümkün.
 Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynak
dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz,
içiçe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak
belirtip, etiketleri sonlandırıyoruz.
Daha karmaşık çerçeveler
Daha karmaşık çerçeveler
Daha karmaşık çerçeveler
Çalışma:
 Uygulamada en az üç çerçeveden oluşan sayfa hazırlanıp sol
çerçevede linkler olacak ve target özelliğinin farklı değerleri bu
örnek üzerinde denenecek…
Çerçeveler
 <NOFRAME> Etiketi
 Eğer Web Tarayıcısı FRAME i desteklemiyorsa alternatif gösterilecek sayfa
bu etiket arasında oluşturulacak olan <BODY> etiket bloğuna yazılır.
 <HTML>
 <HEAD> <title>Çerçeveler </title> </HEAD>
 <frameset cols="200,*">
 <frame name="sol" src="sol.htm">








<frame name="sag" src="ana.htm">
</frameset>
<noframes>
<BODY>
<h2>Browserınız çerçeveleri desteklemiyor</h2>
</BODY>
</noframes>
</HTML>
Çerçeveler
 <IFRAME> Etiketi
 Bu tag ile HTM kodları arasına bir çerçeve açılıp bu çerçevede başka bir
sayfa gösterilebilir.
 Özellikleri:
ÖZELLİK
SRC
WIDTH
HEIGHT
SCROLLING
FRAMEBORDER
ALIGN
AÇIKLAMA
Çerçevede gösterilecek kaynak web sayfası
Çerçevenin genişliği
Çerçevenin yüksekliği
Kaydırma çubuğu durumu (yes, no, auto)
Çerçevenin kalınlığı
Çerçevenin sayfadaki hizalaması
Çerçeveler
 Örnek:
 <BODY>
 <IFRAME src="http:\\www.firat.edu.tr" align="center" height=“300"
 width=“400" frameborder="1" scrolling="yes">
 </IFRAME>
 </BODY>
 </HTML>
HTML Formları
 HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form
kontrolleridir.
 Formlar, web sayfası tasarlayan kişi veya şirketlerle internet kullanıcıları
arasındaki veri alışverişini sağlamak için ideal bir araçtır.
 Formlar iki yönlü olarak çalışır; web tarayıcı tarafından ekranda oluşturulan
görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve web
tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program
bilgileri değerlendirdikten sonra gerekli işlemleri yapar.
 Formları bilgi girişinin haricinde bilgi gösterme maksadı ile de kullanabiliriz.
HTML Formları
 <FORM> Etiketi
 Bir form oluşturmak için <form>…</form> etiketleri arasına istenilen
kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin
nasıl değerlendirileceği form etiketinin içinde gösterilir.
 Genel kullanım;
 <FORM ACTION=url METHOD=get- post TARGET=pencere> ….. </FORM>
 Özellikleri:
ÖZELLİK
ACTION
METHOD
TARGET
AÇIKLAMA
Formun onay buttonuna basıldığında form bilgilerinin gönderileceği
URL yi belirtir.
Formun bilgilerinin hangi metotla Server’a gönderileceğini tutar. Get ya
da Post olabilir. Varsayılan Get tir. Çok fazla veri gönderileceği zaman
çoğunlukla Post metodunu kullanırız. Get metodunda form ile
gönderilen veriler URL nin sonuna eklenir.
Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi
pencerede belireceğini gösterir.
HTML Formları
 Kontrol Tipleri
 HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri ile
oluşturulur.
 KONTROL YAZIM ŞEKLİ
 TextBox <INPUT TYPE=“text”>
 Kullanıcının tek satırdan oluşan string değer girmesinde kullanılır.
HTML Formları
 Password <INPUT TYPE=“password”>
 Yukarıdaki gibi string ifade girişi yapılır. Bununla birlikte yazılan karakterler
yerine “*” karakteri gösterilir.
 Hidden <INPUT TYPE=“hidden”>
 Formla birlikte taşınan bu alandaki bilgi kullanıcıdan gizlenir.
 File <INPUT TYPE=“file”>
 Forma eklenen kullanıcının bir dosyasının ismini girmesine izin verir.
HTML Formları
 CheckBox <INPUT TYPE=“checkbox”>
 Kullanıcının doğru/yanlış (true/false) şeklinde mantıksal değer girmesinde
kullanılır.
HTML Formları
 RadioButton <INPUT TYPE=“radio”>
 Özel bir seçenek listesinden saçim yapma imkanı sağlar. Radibuttonların
name özelliğine aynı değerler verilerek sınıflandırılabilir.
HTML Formları
 Submit <INPUT TYPE=“submit”>
 <FORM> etiketinin ACTION özelliğinde belirtilen URL ye form bilgilerini
göndermede kullanılır.
 Reset <INPUT TYPE=“reset”>
 Bütün form kontrollerini sıfırlamada kullanılır. Formun sayfa ilk
yüklendiğindeki eski halini almasını sağlar.
 Image <INPUT TYPE=“image”>
 Tıklandığında Mouse imlecinin X ve Y koordinatlarını göndererek grafiksel
onay buttonu yapmada kullanılır.
HTML Formları
 Button <INPUT TYPE=“button”>
 İstemc-tarafı (Client-Side) scriptlerinden JavaScript ya da VBScript i
tetikleyebilecek komut düğmesi oluşturur.
 TextArea <TEXTAREA>
 Çok satırlı metinlerin girilmesine imkan sağlayan bir kontroldür.
 ComboBox <SELECT size=“1”>
 Kullanıcıya açılan bir listeden hazır seçenekler sunar.
 ListBox <SELECT size=“n”>
 Kullanıcıya liste şeklinde hazır seçenekler sunar. Buradaki “n” ListBox ın kaç
satırlı olacağını belirtir.
HTML Formları
 <INPUT> Etiketi
 Bu HTML etiketi ile birden fazla kontrol çeşidi oluşturuyoruz. Her bir çeşidin
hangi özelliklere sahip olduğu be bu özelliklerinin anlamları:
ÖZELLİK
KULLANAN KONTROL
TYPE
hepsi
NAME
Hepsi
CHECKED
Text,
password,
hidden,
radio,
submit,
reset,
button
Text,
password,
file
Text,
password,
file
Checkbox,
radio
SRC
image
ALIGN
image
VALUE
SIZE
MAXLENGTH
AÇIKLAMA
Kontrolün çeşidini belirtir. Varsayılan Text tir.
Kontrolün adını belirtir. Kontrolün adı formun ACTION özelliğinde
belirtilen URL ye kontrolde yazılı olan değeri taşır..
Text, password ve hidden kontrolleri için birinci değeri, radio ve
checkbox kontrolleri için seçildiğinde gidecek olan değeri, submit,
reset ve button kontrollerinde ise kontrolün başlığını (caption)
belirtir.
Kontrolün gösterebileceği karakter uzunluğu
Kullanıcının gireceği maksimum karakter sayısı
Eğer yazılırsa başlangıçta kontrolün seçili olmasını sağlar.
Resmin kaynağını gösterir.
Resmin hizalanmasını belirtir. (left, right, top, middle ya da bottom
olabilir.)
HTML Formları
 <TEXTAREA> Etiketi
 Çok satırlı metin kutusu oluşturmada kullanılır.
 Kullanımı:
 <TEXTAREA name=”adi” rows=”m” cols=”n”> Sayfa yüklendiğinde kontrolde
gözükecek olan metin
 </TEXTAREA>
 Özellikleri:
ÖZELLİK
AÇIKLAMA
NAME
Yukarıda yazmıştık
ROWS
Ekranda gösterilecek satır sayısı
COLS
Ekranda gösterilecek sütun sayısı (karakter
sayısı olarak)
HTML Formları
 <SELECT> ve <OPTION> Etiketleri
 Kontrolü oluşturmak için <SELECT> ve </SELECT> etiketi kullanılır. Bu
 kontrollerde gözükecek her bir seçenek <OPTION> etiketi ile oluşturulur.
 Kullanımı:
 <SELECT name=”adı” size=”n”>
 <OPTION value=”değer1”> Gözüken Metin1</OPTION>
 <OPTION value=”değer2”> Gözüken Metin2</OPTION>
 </SELECT>
 Eğer size>1 ise kontrol ListBox stilinde gözükür. Size=1 ise (varsayılan
 budur) ComboBox (Drop-Down Menu) stilinde gözükecektir.
HTML Formları
 <SELECT> Özellikleri:
ÖZELLİK
NAME
SIZE
MULTIPLE
AÇIKLAMA
Yukarıda yazmıştık
Gösterilecek satır sayısını belirtir.
Eğer yazılırsa çoklu seçime izin verir. Sadece
ListBox görünümünde etkilidir.
 <OPTION> Özellikleri:
ÖZELLİK
VALUE
SELECTED
AÇIKLAMA
Seçimin yapılması durumunda formun
göndereceği değer
Bunu yazdığımız <OPTION> etiketi değeri sayfa
yüklendiğinde seçilmiş durumdadır.
HTML Formları
 Örnek: form1.htm
 <HTML>
 <HEAD> <TITLE> Müşteri Kayıt Formu </TITLE> </HEAD>
 <BODY text="#0000FF">
 <H2><FONT color="#FF0001"> Müşteri Kayıt Formu</FONT></H2>
 <H3>
 <FORM action="hedefdosya.htm" method="post" name="frmMusteri">
 <TABLE>
 <TR>
 <TD> <B> Adı : </B></font></TD>
 <TD><INPUT type="text" name="txtAdi" size="30"></TD>
 </TR>
HTML Formları
 <TR>
 <TD><B> Soyadı : </B></TD>
 <TD><INPUT type="text" name="txtSoyadi" size="30"></TD>
 </TR>
 <TR>
 <TD><B>E-Mail : </B></TD>
 <TD><INPUT type="text" name="txtEmail" size="30"></TD>
 </TR>
 <TR>
 <TD><B>Adres : </B></TD>
 <TD><INPUT type="text" name="txtAdres" size="43"></TD>
 </TR>
HTML Formları
 <TR>
 <TD><B> Şehir, Ülke, Posta Kodu : </B></TD>
 <TD><INPUT type="text" name="txtSehir" size="20"> &nbsp;
 <INPUT type="text" name="txtUlke" size="20">
 <INPUT type="text" name="txtPostaKodu“ size="10"> </TD>
 </TR>
 <TR>
 <TD><B>Açıklama : </B></TD>
 <TD><TEXTAREA name="textareaAciklama" rows="2” cols="30">Buraya
Herhangi Bir Açıklama Yazınız. </TEXTAREA></TD>
 </TR>
 <TR>
 <TD><B>Yaş : </B></TD>
HTML Formları
 <TD><SELECT name="cboxYas" size="1">
 <OPTION value="0"> 0 - 11</OPTION>
 <OPTION value="1">12 - 19</OPTION>
 <OPTION value="2">20 - 29</OPTION>
 <OPTION value="3">30 - 39</OPTION>
 <OPTION value="4">40 + </OPTION>
 </SELECT></TD>
 </TR>
 <TR>
 <TD><B>Çalışmalarımızı Başarılı Buluyor Musunuz? :
 </B></TD>
HTML Formları
 <TD> <INPUT type="radio" name="radMailListesi" checked value="evet">










Evet
<INPUT type="radio" name="radMailListesi” value="hayir"> Hayır
</TD> </TR>
<TR>
<TD><INPUT type= "submit" name="kaydet” value="Kaydet"></TD>
<TD><INPUT type="reset" name="temizle” value="Temizle"></TD>
</TR>
</TABLE>
</FORM></H3>
</BODY>
</HTML>
HTML Formları
HTML Formları
 Uyarı: Formlar, server-side (sunucu-tarafı) CGI veya ASP programlarına
teslim edilirler. Dolayısıyla bu formları ileride daha detaylı ASP
programlarında test edeceğiz.
HTML Formları
 Uygulama
Stil Sayfaları (CSS)
 Stil sayfaları web sayfası tasarımcılarının, sayfa görünümlerini
daha hareketli hale getirmelerini sağlayan .css uzantılı
dosyalardır. Css kullanırken kullanacağımız etiket <STYLE> dir.
Bu etiketin bir çok kullanım şekli ve kullanım alanı
bulunmaktadır. Örnek <P> etiketi içinde olan yazıların yeşil,
punto büyüklüğü 10, font verdana olsun.
 <P style=“font:10pt verdana; color=green”> ifadeler</P>
 Şeklinde bir kullanım yeterli olacaktır.Yapılan işlemin normal
HTML komutları ile yazılması;
 <Font size=2 face= verdana color =green> font tagı ile yapılan
örnek</font>
Stil Sayfaları (CSS)
 Bu iki örnek arasında görünürde bir fark yoktur, fakat
tasarım yapılırken olacaktır. Sayfamızda bazı bölümleri
farklı göstermek istiyorsak her bir bölüm için font
etiketini kullanmamız gerekecektir. Fakat sadece basit
bir tanımlama ile sayfanın hatta sitenim her
sayfasında bu yeni stilinizi kullanabilirsiniz.
 Şimdi farklı örnekler ile STYLE etiketini tanımaya
çalışalım.
Stil Sayfaları (CSS)
 Sayfamızda bir bölümü kırmızı, Comic Sans MS fontu ve
12 punto büyüklüğüne gösterelim
 <div style=“font:12pt Comic Sans MS; color=red”;>bu bölüm
diğer bölümlerden farklı görünecektir.</div>
 Yeni başlayan paragraftaki yazılar farklı olsun;
 <P style=“color:#12ddfa;”>bu yazı mavidir.</P>
 Yeni linkimiz dikkat çekmeli siyah üzerine beyaz yazı
 <A style “color:white;backround:black;”href=“#”>Siyah
zemin beyaz link</A>
 Örnekler çoğaltılabilir.
Stillerin Etiketlerde Kullanımı
 <HEAD>.. </HEAD> etiketleri arasında
 <HTML>
 <HEAD>
 <STYLE>
 <!- P{
font-size:font büyüklüğü pt;
 font-family: font tipi;
 color: kullanılacak renk;

}
 H1 {
font-size:font büyüklüğü pt;
 font-family: font tipi;
 color: kullanılacak renk;

}
 -->
 </STYLE>
 </HEAD>
Stillerin Etiketlerde Kullanımı
 <BODY>
 <H1> bu yeni stilde H1 başlıktır</H1>
 Burası Body tagının standart stilidir.
 <P> bu yeni stilde paragraftır </P>
 Burası Body tagının standart stilidir.
 <P> burada yine yeni stilde paragraf görülecektir </P>
 </BODY>
 </HTML>
Stillerin Etiketlerde Kullanımı
 Örnek:
 <HTML>
 <HEAD>
 <STYLE>
 <!- P{
 font-size:8pt;
 font-family: verdana;
 color: green;
}
 H1 {
 font-size:14pt;
 font-family: times;
 color: red;
}
 DIV {
 font-size:10pt;
 color: aqua;
}
 A{
 font-size:9pt;
 font-family: tahoma;
 color: #5010dd;
}
 -->
 </style>
 </head>
Stillerin Etiketlerde Kullanımı
 <body>
 <h1>Yeni Sayfa başlığımız</h1>
 Bu bölümde kullanılan stil standart stildir.
 <p>Paragraf kullanıyoruz </p>
 Bu bölümde kullanılan stil standart stildir.
 <div> div tagında değişiklik yaptık. Fakat sadece font
büyüklüğü ve renk değişti</div>
 <a href="javascript:window.close()">Pencereyi kapat</a>
 </body>
 </html>
Stillerin Etiketlerde Kullanımı
Seçiciler (Selectors)
 Seçiciler bize oluşturduğumuz <h1>, <h2> ... gibi
etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni
özellikler ekleme olanağı verdiği gibi istediğimiz bir
kelimeye style özellikleri atayıp istediğimiz zaman
çağırmamızı da sağlar. İki çeşit seçici vardır. Bunlar, Id
seçicisi ve sınıf seçicisi.
Id Selectors(Id Seçicileri)
 Id seçicilerini tanımlayıcı adlarının önündeki “#“
işaretinden tanırız. HTML belgesinde kendi tanımlayıcı
adlarına gönderme yaparak herhangi bir HTML etiketine
stil vermekte kullanılır.
Class Selectors (Sınıf Seçicileri)
 Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı
olmasını istemediğiniz durumlarda kullanabilirsiniz.
Böylelikle genel bazı özellikleri koruyarak farklı özellikleri
değiştirebilirsiniz.
Stillerin Bağımsız Olarak Kullanımı
 Stilleri etiketlere ait olarak değil de bağımsız olarak kullanmak için bir class
dosyası şeklinde hazırlanmalıdır. Bunun için etiket adı yerine .stiladı şeklinde bir
tanımlama yapılır. Bu şekilde bir stil oluşturalım.
 <STYLE>
 <!- .stil1{
 font-size:8pt;
 font-family: verdana;
 color: green;
}
 .stil2 {
 font-size:14pt;
 color: blue;
}
 -->
 </style>
Stillerin Bağımsız Olarak Kullanımı
Şimdi etiketler içerisinden class dosyalarının nasıl
çağrıldığına bir bakalım.
 <p class=“stil1”> Yazılacak yazı </p>
 <DIV class=stil2”> Yazılacak yazı </DIV>
 <A class=stil1” href=“#”>Link </A>

Stillerin Farklı Sayfalarda Kullanımı

Stilleri farklı sayfalarda kullanmak için stillerimizi bir metin
dosyası olarak yazıyoruz ve uzantısını .css vererek
kaydediyoruz. Daha sonra bu stilleri kullanmak istediğimiz
sayfada head etiketleri arasında bu dosyaya link veriyoruz.
 <LINK rel=stylesheet href=“stillerim.css” type=“text/css”>
Stillerin Farklı Sayfalarda Kullanımı
 Örnek:
 .stil2{
 <STYLE>
 font-size:10pt;
 <!--
 color: aqua;
 .stil{
 font-size:8pt;

 font-family: verdana;
 color: green;
}
 .stil1 {
 font-size:14pt;
 font-family: times;
 color: red;
}



}
.stil3{
 font-size:9pt;
 font-family: tahoma;
 color: #5010dd;
}
.stil4 {
 font-family:impact;
}
-->
</style>
 Bu dosyayı stillerim.css olarak kaydedelim.
Stillerin Farklı Sayfalarda Kullanımı
 Örnek:deneme.html
 <SPAN> etiketi:
 <HTML>
 Bu etiket stilsiz
kullanılırsa hiçbir etkisi
yoktur. CSS
 <HEAD>
 <LINK rel=stylesheet href=“stillerim.css” type=“text/css”>
 </HEAD>
 <body>
 <h1 class=“stil1”>Yeni Sayfa başlığımız . stil1</h1>
 Bu bölümde kullanılan stil standart stildir.
 <P class=“stil ”>Paragraf kullanıyoruz . stil </P>
 Bu bölümde kullanılan stil standart stildir.
 <div class=“stil3”> Div tagında stil değişikliği yaptık. stil3
</div>
 <SPAN class=“stil4”> Yine SPAN tagında değişiklik var. stil4
</SPAN>
 </BODY> </HTML>
kullanılarak metinler
üzerinde biçimlendirme
yapabiliriz.
Stillerle Fontların Kullanımı
 Fonlarla ilgili parametreler
 background=red;
 font-weight=bold (kalın)|none (normal yazı);
 font-style=italic|none;
 text-decoration=underline(altı çizili)|overline (üstü çizili)
 |none;
 text-transform=uppercase|lowercase|none;
 text-align=left|right|center|justify;
Stillerle Fontların Kullanımı
 Örnek:
 STYLE>
 <!- .stil{
 color: green;
 font-family: verdana;
 font-size:8pt;
 font-style:none;
 font-weight:bold;
 background:yellow;
}
 .stil1{
 background:pink;
 font-family: impact;
 text-align:center;
}
 -->
 </style>
Stillerle Fontların Kullanımı
 Örnek:
 <HTML>
 <HEAD>
 <LINK rel=stylesheet href=“stil.css” type=“text/css”>
 </HEAD>
 <body>
 Body tagının normal stili
 <p class=“stil1”>İlk paragrafımız . stil1</h1>
 <P class=“stil ”>ikinci paragraf . stil </P>
 Bu bölümde kullanılan stil standart stildir.
 <div class=“stil”> Div tagında stil değişikliği yaptık. stil </div>
 <SPAN class=“stil1”> Yine SPAN tagında değişiklik var. stil1 </SPAN>
 </BODY> </HTML>
Stillerle BODY Etiketinin Varsayılan
Değerini Değiştirme
 Örnek:
 Body etiketi için tanımlanan
 <HTML> <HEAD>
yeni değerler sayfada etkin
olarak kullanılacaktır.
 Normal olarak sayfalar sol en
köşeden itibaren yazmaya
başlanır. Sayfaya kenarlıklarına
boşluk vermek için margin
ifadesi kullanılır.
 <STYLE>
 <!—
 BODY{
 background:#000000;
 color: #ffffff;
 font-family: verdana;
 font-size:10pt;
 font-weight:bold;
 text-decoration=none;
 margin-left:30px;
 margin-right:50px;
 margin-top:27px;
}
 -->
Stillerle BODY Etiketinin Varsayılan
Değerini Değiştirme













<HTML> <head>
<STYLE>
<!-BODY {background: white;}
H1 {font: 24pt Arial bold}
P {background: yellow;}
A {text-decoration: none; color: blue}
-->
</STYLE> <title>Style Sheet Kullanımı</title> </head>
<BODY>
<H1>Bu bir başlık! 24 punto, Arial ve Kalın.</H1>
<p>Üzeri sarı işaretleyici ile çizilmiş alelade bir yazı.</p>
<a href="deneme.htm”> Linklerin altının çizilmemesini bu yolla
sağlayabilirsiniz.</a>
Stillerin Link Düzenlemeleri İçin
Kullanılması
 Link
stilleri
kullanılacaktır.




oluşturulurken
dört
parametre
a:link
: Sayfada bulunan bir link renk ve durumu
a:active
: Link tıklandığında alacağı renk ve durum
a:visited
: Ziyaret edilmiş bir linkin alacağı renk ve durum
a:hover
: Fare ile linkin üzerine gelindiğinde özelliklerinin
işleme konulması. Örneğin fare linkin üzerine geldiğinde altı çizili olması
isteniyorsa hover kısmında underline seçilmelidir. Üstü çizili olması için overline
seçilmelidir. Hem altı hem üstü çizili olması için iki tane hover kullanılmalıdır.
 color
: Linklerin, ziyaret edilen linklerin.. renk özelliğinin
ayarlanması burada yapılır.
 text-decoration: none seçilirse ilgili linkin altı çizili özelliği
ortadan kalkar. underline seçilirse ilgili linkin altı çizili özelliği
devam eder.
Stillerin Link Düzenlemeleri İçin
Kullanılması










<style>
A:link {
color : renk;
text-decoration :none|underline
font-size:10pt;
color:red;
}
A:active { color : renk; text-decoration :none|underline }
A:visited { color : renk; text-decoration :none|underline }
A:hover { color : renk; text-decoration :none| underline|
overline }
 </style>
Stillerin Link Düzenlemeleri İçin
Kullanılması











<html> <head>
<style>
A:link { color : Yellow; text-decoration :none }
A:active { color : Yellow; text-decoration :none }
A:visited { color : White; text-decoration :none }
A:hover { color : Yellow; text-decoration :overline }
</style>
<title>Ornek.html</title> </head>
<body bgcolor=”#000080”>
<a href=”http://www.firat.edu.tr”>Fırat Üniversitesi</a>
</body></html>
Stiller İle Sayfanın Her Noktasının
Kullanılması
 Sayfa tasarımı yaparken en çok sıkıntı çekilen konulardan
biri bir elamanı sayfanın istenilen noktasına
yerleştirememektir.
 CSS sayfaya noktasal olarak ulaşmaya izin verir. Örneğin
Sayfanın alt kısımlarında iken ortaya yazı yazdırılabilir.
 <P style=“font:14pt times;position:absolute;top:150px;
left:100px; width;200px”>deneme</P>
Stiller İle Sayfanın Her Noktasının
Kullanılması
 position:absolute|reletive;
 absolute: sayfanın en başından geçerli noktayı alır.
 reletive: sayfanın en son yazılan elamanının bulunduğu
noktayı başlangıç olarak alır.
 top: belirlenen başlangıç noktasından belirtilen pixel
kadar aşağı yazar.
 left: başlangıç noktasında sağa doğru belirtilen pixel kadar
uzaklığa yazar.
 width: yazılacak yazı için maksimum genişlik belirler ve
bu genişlik aşıldığı zaman bir alt satıra geçer.
Stiller İle Sayfaya 3. Boyut Verme
 Bu bölümde sayfamıza derinlik vermeyi göreceğiz. Bir web
sayfası hazırlanırken sayfamıza düzen verirken sayfayı
yatay ve dikey olarak düşünüyoruz. Bu koordinat
sisteminde x ve y olarak ifade edilen iki boyuta denk gelir.
 Üçüncü boyut ise derinliktir. Derinliğe koordinat
sisteminde z ismi verilir. Verilen parametrelerden
yararlanılarak üçüncü boyutun özellikleri web sayfalarında
kullanılabilir. z-index parametresi derinlik olarak yeni stile
bir değer verir. İki stil hazırladığımızda z-index değeri
büyük olan üstte görünecektir. Aşağıdaki kodlar iki stilin
birlikte kullanılmasını gösteriyor.
Stiller İle Sayfaya 3. Boyut Verme
 <HTML> <HEAD>
 <STYLE>
 <!- 
#bolum1{

 -->
position:absolute;
top:10px;
left:20px;
z-index:0;
}
#bolum2{
position:absolute;
top:10px;
left:20px;
z-index:1;
}









</STYLE>
</HEAD>
<BODY>
<SPAN id=“bolum1”>
<IMG src=“cizgi1.gif” alt=“cizgi1”>
</SPAN>
<SPAN id=“bolum2”>
<IMG src=“cizgi2.gif” alt=“cizgi2”>
</SPAN> </BODY></HTML>
Stiller İle Sayfaya 3. Boyut Verme
Stiller İle Sayfaya 3. Boyut Verme
 Şimde de bu örnek üzerinde z-index parametrelerini değiştirerek aynı





örneği tekrar görelim
<HTML> <HEAD> <STYLE>
<!- #bolum1{
position:absolute;
top:10px;
left:20px;
z-index:1;
}
#bolum2{
position:absolute;
top:10px;
left:20px;
z-index:0;
}
-->









</STYLE>
</HEAD>
<BODY>
<SPAN id=“bolum1”>
<IMG src=“cizgi1.gif” alt=“cizgi1”>
</SPAN>
<SPAN id=“bolum2”>
<IMG src=“cizgi2.gif” alt=“cizgi2”>
</SPAN> </BODY></HTML>
Stiller İle Sayfaya 3. Boyut Verme
 display :
 inline : Kullandığımız nesneleri yanyana sıralar.
 block : Kullandığımız nesneleri alt alta sıralar.
 none : Kullandığımız nesneleri göstermez. Genellikle
JavaScript methodlarında kullanılır.
 Padding: İçeriğin elementin sınırlarına olan uzaklığını
belirlemek için kullanılır.Örneğin "padding:4px;"
şeklindeki bir deklerasyon içeriğin sınırlara (alt,üst,sağ ve
sol) olan uzaklığının 4 pixel olacağını söyler.
Margin: Elementin komşu elementlere olan uzaklığını
belirtmek için kullanılır.Örneğin "margin:4px;" şeklindeki
bir deklerasyon elementin komşularının sınırlarına
(alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler.
Aşağıdaki şekilde padding ve margin seçeneğini gösterir.
 CSS’de birimleri 4 gruba ayırabiliriz.
 · Uzunluk Birimleri
 · Yüzde Birimleri
 · Renk Birimleri
 · Url Birimleri
 Uzunluk Birimleri
CSS’de 8 farklı uzunluk birimi vardır. Bunların 3′ü relative
(göreceli) 5′i ise absolute (kesin) uzunluklardır.
Sayfa ölçeğinin değişmesi veya çıktısının alınması gibi
durumlarda göreceli uzunluk birimleri avantaj sağlar. Her
kullanıcının bilgisayarı özellik olarak farklılıklar
gösterebilir.Özellikle kullanılan monitörlerin farklı
ebatlarda-özelliklerde olması bu birimleri kullanışsız
kılmaktadır.Misal, 15inc’lik bir monitörde gayet hoş
görünen bir metin, 19inc bir monitörde kötü görünebilir.
 Göreceli uzunluk birimlerini
 · em: Elementin fontunun yüksekliğidir.1 em, 16 pixele
karşılık gelmektedir.
CSS’de “em” uzunluk birimini kullanmak isteyenler için
pixel olarak dönüşüm yapmak oldukça zordur.
 · ex: Metnin küçük “x” harfinin yükseklik
değeridir.Ortalama olarak 1ex, 8 pixele karşılık
gelmektedir.Her fontun “x” karakteri farklı boyutlarda
olduğundan, her font için bu uzunluk birimi farklı sonuçlar
çıkaracaktır.
·
 Göreceli uzunluk birimlerini
 · px: Pek yabancı olmadığımız, sıklıkla kullanılan bir ölçü
birimidir.Bir resmi yeterince büyütürseniz, çok küçük
kutucuklardan oluştuğunu görürsünüz.İşte bu kutuların
her biri 1 pixele karşılık gelmektedir.Aynı mantık
monitörlerde de vardır.Eğer monitörünüze çok takından
bakarsanız ızgara şeklinde kutuculardan oluştuğunu
görürsünüz.Bu kutucukların da her biri 1pixeldir.Bu da her
monitöre göre farklı değerler demektir.
 CSS:
 #deneme {font-size: 22px;}
 Kesin uzunluklar ise, gerçek hayatta kullanılan kati ölçü
birimleridir.
 · in (inch): 1in, 2,54cm’e karşılık gelmektedir.TopStyle Lite
programında 1in, 96px e karşılık gelmektedir.Bu
dönüşümleri Photoshop ile de test edebilirsiniz.Ancak
1in=72px’e karşılık gelecektir.CSS ile uğraştığımıza göre
TopStyle Lite’daki değeri kullanabiliriz.
 · cm (santimetre): Günlük hayatta kullandığımız değerdir.
TopStyle Lite’da 1cm, 38px’e karşılık gelmektedir.
 · mm (milimetre): Yine günlük hayattan tanıdığımız bir
ölçü birimi.Bilindiği üzere 10mm, 1cm’e karşılık
gelmektedir.Bu da 10mm=38px demektir.
 · pt (point): Standart baskı birimidir.100pt, 133pixele
karşılık gelmektedir.Ufak bir bilgi, Photoshop programında
1px=1pt alınmıştır.
 · pc (pica): Bu da bir baskı ölçü birimidir.1pc, 16px’e
karşılık gelmektedir.
 Yüzde Birimleri :
Yüzde değerleri her zaman diğer elementlere göre
göreceli değerlerdir.
CSS:
 h4 { line-height: 150% }
 böyle bir kod, metnin font büyüklüğünün %150 kadarı bir
satır yüksekliğini ifade eder.
CSS:
 p { text-indent: 10% }
 böyle bir kod ise metnin soldan satır genişliğinin %10'u
kadar içerden başlayacağını ifade eder.
 Renk Birimleri :
CSS'de renklerin İngilizce isimleri kullanılarak tanımlama
yapılır.Design ile ilgilenen arkadaşlarımız varsa, RGB
kavramı pek yabancı gelmeyecektir onlara.Bu mod
Red(Kırmızı), Green(Yeşil), Blue(Mavi) renklerinin
başharfleri ile tanımlanmaktadır.
5 Çeşit renk belirleme özelliği vardır.
1- İlgili renk özelliğine HTML tablosundaki renklerden
birinin isminin direk olarak atanması yöntemi.Misal,
Aşağıdaki kodlar 12px font büyüklüğünde açıkyeşil renkte
bir yazıyı karşılamaktadır.
 CSS:
 #deneme {
 font-size: 14px;
 color: LightGreen;
}
 gibi.
 2-Kısa RGB kodu ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0,...,F
arası tek basamaklı heksadesimal değer alabilirler.
En fazla renk değeri : #FFF (Önceki yöntemlere göre =
White) 'dir.
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir
yazıyı karşılamaktadır.
 CSS:
 #deneme { font-size: 12px;
 color: #FFF; }

 3-RGB kodu ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 00,...,FF
arası iki basamaklı heksadesimal değer alabilirler.
En fazla renk değeri : #FFFFFF (Önceki yöntemlere göre =
#FFF = White)
Aşağıdaki kodlar 12px font büyüklüğünde yeşil renkte bir
yazıyı karşılamaktadır.
 CSS:
 #deneme {
 font-size: 12px;
 color: #9ACD32;}
 4-Tam sayı değer ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı
000,...,255 arası 3 basamaklı tam sayı değerleri alarak
aşağıdaki örnekteki gibi belirtilirler.
En fazla renk değeri : rgb(255, 255, 255) (Önceki
yöntemlere göre = #FFFFFF = #FFF = White)
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir
yazıyı karşılamaktadır.
 CSS:
 #deneme { font-size: 12px;
 color: rgb(255,255,255); }
 5-Yüzde değeri ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı
000,...,100 arası kayar noktalı sayı değeri alarak gösterilir.
En fazla renk değeri : rgb(100%, 100%, 100%) (Önceki
yöntemlere göre = rgb(255,255,255) = #FFFFFF = #FFF =
White)
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir
yazıyı karşılamaktadır.
 CSS:
 #deneme { font-size: 12px;
 color: rgb(100%, 100%, 100%) }
 URL Birimleri :
Herhangi bir metnin,belirli bir alanın, arkaplanına veya
etrafına yerleştirilen resmin gösteriliş şeklidir.Misal;
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte,
arkaplanına benim atadığım style.css ile aynı dizinde olan
images klasöründeki deneme.gif dosyasının
gösterileceğini söyler.
 #deneme { font-size: 12px;
 color: rgb(100%, 100%, 100%)
 background: url("/images/deneme.gif“) }
 Örnek 1:
<html> <head>
 <style type="text/css">
 #coolmenu {
 border: 1px solid black;
 border-bottom-width: 0;
 width: 170px;
 background-color: #E6E6E6;
}

 #coolmenu {width:164px;/*tablo sütün genişliği*/}
 #coolmenu a{
 font: bold 13px Verdana;
 padding: 2px;
 padding-left: 4px;
 display: block;
 width: 100%;
 color: black;
 text-decoration: none;
 border-bottom: 1px solid black; }
 #coolmenu a:hover{
 background-color: black;
 color: white;
}
 </style> </head>
 <body>
 <div id="coolmenu">
 <a href="http://www.cssdrive.com">CSS Drive</a>
 <a href="http://www.javascriptkit.com">JavaScript
Kit</a>
 <a
href="http://www.javascriptkit.com/cutpastejava.shtml">
Free JavaScripts</a>
 <a href="http://www.javascriptkit.com/jsref/">JavaScript
Reference</a>
 <a href="http://www.codingforums.com">Coding
Forums</a>
 </div>
 </body>
 </html>
 Örnek 2:
<html> <head> <style type="text/css">
 #button {
 width: 150px;
 border-right: 1px solid #000;
 padding: 0 0 1em 0;
 margin-bottom: 1em;
 font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
 font-size: 90%;
 background-color: #90bade;
 color: #333; }
 #button ul {
 list-style:none ;
 margin: 0;
 padding: 0;
 border: none; }
 #button li {
 border-bottom: 1px solid #90bade;
 margin: 0; }

 #button li a {
 display: block;
 padding: 5px 5px 5px 0.5em;
 border-left: 10px solid #1958b7;
 border-right: 10px solid #508fc4;
 background-color: #2175bc;
 color: #fff;
 text-decoration: none;
 width: 100%;
}
 #button li a:hover {
 border-left: 10px solid #1c64d1;
 border-right: 10px solid #5ba3e0;
 background-color: #2586d7;
 color: #fff;
}
 </style> </head>
 <body> <div id="button">

<ul>

<li> <a href="#">e-dersler</a></li>

<li> <a href="#">C/C++</a></li>

<li> <a href="#">Pascal</a> </li>

<li><a href="#">Java</a></li>

<li> <a href="#">HTML</a></li>

<li><a href="#">xhtml</a> </li>

<li><a href="#">xml</a></li> </ul> </div> </body>
</html>
 Örnek 3:
<html><head> <style>
 #navcontainer ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
}

 #navcontainer li {
 margin: 0 0 .2em 0;
}
 #navcontainer a {
 display: block;
 color: #ffffff;
 background-color: #003366;
 width: 9em;
 padding: .2em .8em;
 text-decoration: none;
}
 #navcontainer a:hover{
 background-color: rgb(51,102,153);
 color: #ffffff; }
 #active a {
 display: block;
 color: #FFF;
 background-color: #600;
 width: 9em;
 padding: .2em .8em;
 text-decoration: none;
}
 </style>
 </head>
 #active a {
 display: block;
 color: #FFF;
 background-color: #600;
 width: 9em;
 padding: .2em .8em;
 text-decoration: none;
}
 </style>
 </head>
 <body> CSS CODE
 HTML CODE
 <div id="navcontainer">
 <ul><li><a href="#">Ankara</a></li>
 <li id="active"><a href="#">İstanbul</a></li>
 <li><a href="#">İzmir</a></li>
 <li><a href="#">Adana</a></li>
 <li><a href="#">Erzurum</a></li>
 </ul></div></body></html>
KAYAN YAZILAR
 KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazılar insanların ilgisini
daha çok çeker. Bu işlemler için Microsoft, <MARQUEE> tag'ını web tarayıcısının
yorumlayıcısına eklemiş.
 Netscape ise Explorer 2.0'dan beri var olan bu tag'ı web tarayıcısına koymayı
düşünmüyor. Yine de tag'ı kullandığınızda içerisinde var olan yazıların Netscape
kullanıcıları tarafından 'normal yazı' olarak görüneceğini belirtelim.
 <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n
LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>
KAYAN YAZILAR
 <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n
LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>
 BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek
SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir.
 Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı,
sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur.
 SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar.
 Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle
gerçekleştirilebilir.
KAYAN YAZILAR
 BGCOLOR=renk: Kayan yazının arkasındaki rengi belirler. ' renk' değeri
16'lık sayı düzeninde bir değer olabileceği gibi ' red' ,' blue' gibi renk
isimlerinden biri de olabilir.
 DIRECTION=yön: Yazının kayma yönünü belirler. DIRECTION eki, LEFT veya
RIGHT değerlerinden birini almalıdır. LEFT değeri yazının soldan sağa doğru
kaymasını, RIGHT ise bunun tersini sağlar.
 HEIGHT=n: Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir
piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri
% işareti ile belirtilmelidir.
 HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek
özellikle arka plana bir renk verildiğinde daha da belirginleşir.
KAYAN YAZILAR
 LOOP=n: Yazıya verilen hareketin sınırlar içerisinde kaç kere
tekrarlanacağını belirler. N değerine ' -1' veya ' INFINITE' verildiğinde
hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem
tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.
 SCROLLAMOUNT, Kayan yazının bir defada kaç piksel hareket edeceğini,
SCROLLDELAY ise yazının her bir hareketi arasında kaç milisaniye
bekleyeceğini belirler.
 Yazının üst ve alt sınırdan ne kadar uzakta kalacağını VSPACE ile, yazının
kayacağı toplam uzunluğu ise WIDTH ile ayarlayabilirsiniz. WIDTH değeri
HEIGHT gibi bir yüzde alabilir.
 Örnek Kullanım:
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10
SCROLLDELAY=200>Bu kayan bir yazıdır... :) </MARQUEE>
MULTİMEDİA ÖĞELERİ
 Seçiminize göre geri planda WAV, .AU veya MIDI ses
dosyalarından birini çalmak için Internet Explorer'da
BGSOUND tag'ını kullanabilirsiniz.
 <BGSOUND SRC=' deneme.mid' LOOP=5>
 Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek
için aşağıdaki gibi bir komut kullanmalısınız. Deneme.Gif
dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır.
 <IMG DYNSRC=' deneme.avi' SRC=' deneme.gif'
LOOP=INFINITE >
ARAMA MOTORLARINA YARDIMCI OLUN
 Hazırlanan sitenin arama motorları sayesinde görülmesi için yapılamsı gereken
bazı işlemler bulunmaktadır. Arama motorlarının kullandığı ' ajan' programlar
sitenize geldiklerinde ilk baktıkları şey bir takım tanımlardır. Aşağıda bu tanımları
oluşturmak için gereken satırları göreceksiniz.
 Bu satırları <HEAD>...</HEAD> ifadeleri arasına girerseniz hedef kullanıcıya
ulaşmanız daha kolay olacaktır.
 <META NAME="author" CONTENT="EMEL KAÇAR"> Kodu sayfanın
tasarımcı kimliğini gösterir.
 <META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya
yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır.
ARAMA MOTORLARINA YARDIMCI OLUN
 <META NAME="keywords" CONTENT="Sitenizi arama motorlarında
bulduracak siteniz ile ilgili kelimeleri buraya yazın."> Kodu sayfanın hangi
kelimeleri içerdiğini gösterir.Burası arama motorları için çok önemlidir.
 <META http-equiv=”refresh” CONTENT=”5;
URL=http://www.megep.meg.gov.tr”> Refresh ile sayfamız açıldıktan 5
saniye sonra belirtilen adresi otomatik olarak açacaktır.
 <META http-equiv=”expires” CONTENT=”Wed, 25 Feb 2007 12:00:00
GMT”> Expires GMT saat sistemine göre belirtilen saat ve tarihte sayfanın
dosyası silinecektir.
ARAMA MOTORLARINA YARDIMCI OLUN
 <META http-equiv="Content-Type" CONTENT="text/html;
charset=windows-1254"> Kodu sayfanızda ne tür bir metnin olduğunu
(text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve
karakterlerinin hangi kodlama (windows-1254 yazmakla) ile yapıldığını
gösterir.
 <META http-equiv="Content-Language" CONTENT="tr"> Kodu sayfanızın
dilinin Türkçe (istenirse değiştirilebilir.) olduğunu gösterir.
 <META http-equiv=”content-style-type” CONTENT=”text/css”> Content-
typestyle belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu
belirtir.
ARAMA MOTORLARINA YARDIMCI OLUN
 <META NAME="copyright" CONTENT="&copy; 2006 EMEL KAÇAR“> Kodu
sayfanın telif hakkının kime ait olduğunu gösterir.
 <META name="GENERATOR" CONTENT="Microsoft FrontPage"> Kodu
sayfanın hangi editörle yapıldığını gösterir.
 <META NAME="ROBOTS" CONTENT="ALL, FOLLOW, INDEX"> Kodu
sayfanızı tüm arama motorlarının veritabanına kaydolabilme hakkının
verilmiş olduğunu gösterir.
 <META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi
kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride
olduğu belirtilmiş olur.
 Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.