Ders2-Html_xhtml_css (Ders Notu)

İsmet Aktar And. Tek. Lisesi
Bilişim Teknolojileri Alanı
Web Programcılığı Dalı
HTML , XHTML , CSS
2011
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
1
HTML
HTML Nedir?
HTML Web sayfalarının kullandığı dildir. HTML
bir programlama dili değildir. HTML bir işaretleme
dilidir. Web ortamında içeriğin nasıl biçimleneceğini
tanımlayan bir görsel düzenleme dilidir.
Web sayfalarının temeli HTML dosyalarıdır.
( HTML Documents = Web Pages )
HTML – Hyper Text Markup Language
Markup Language – İşaretleme (Betik) dili.
Web tasarımın yapı taşı HTML'dir. İnternet üzerinde bulunan tüm sayfaların kaynakları HTML'dir.
HTML Online Kaynaklar:
● http://www.w3.org
● http://www.w3schools.com
Yazım kuralları:
• Komutlar büyük ya da küçük harfle yazılabilir.
• Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez.
• Komutlar “<” ve “>” işaretleri arasında yazılır ve
“ tag (etiket) ” adını alır.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
2
...Kullanım biçimi:
< etiket adı >
Ör) <html> , <body> , <title>
• Bir etiket <etiket adı> şeklinde başlar ve bazı
etiketler dışında </etiket adı> şeklinde biter.
• Etiketler iç içe yer alır ve en içteki etiketten
başlatılarak kapatılır. Kodların okunabilirliğini
artırmak için bir etiket bitmeden tekrar etiket
açılırsa içeride açılan etiket biraz daha içeriden
yazılmalıdır.
Kullanım biçimi:
<tag1>
<tag2>
......
</tag2>
</tag1>
Örnek:
<HTML>
<BODY>
......
<FORM>
......
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
3
</FORM>
</BODY>
</HTML>
• Bir etiket, parametreler kullanarak biçimlendirilir
ve bu parametrelere tırnak (" ") işaretleri arasında
değer atanır. Değerle parametre adı arasında eşittir
(=) işareti kullanılır.
Kullanım biçimi:
<etiket_adı parametre_adı ="değer">
Örnek:
<body bgcolor="blue">
WEB sayfasında standart olarak bulunması gere ken kodlar şunlardır. Bunlar sayfada mutlaka
vardır. Bu kodlarla; tarayıcı ilgili dosyanın bir WEB
sayfası olduğunu anlar ve ona göre görüntüler.
<html>
<head>
<title> Sayfanın Başlığı </title>
</head>
<body>
..........................
Sayfanızın tüm içeriği: resim, yazı, video, vb.
.....................
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
4
HTML Sayfasının Bölümleri
<HTML>
Bir WEB sayfasında bulunan ilk etikettir. Bu
etiket tarayıcıya HTML belgesinin başladığı ve
bittiği yeri bildirir. Bütün HTML kodları bu etiketin
içinde yer almalıdır. Bu etiketin hiçbir parametresi
yoktur.
<html>
..............
..............
..............
</html>
<HEAD>
HTML belgesinin ilk bölümüdür. WEB sayfası ile
ilgili temel özellikler, sayfa başlığı, yazı karakterler
kümesi, link özellikleri burada tanımlanır.
Sayfa çalıştığında Web Tarayıcının başlık
çubuğunda görülecek yazı burada :
<title> ..... </title> etiketleri arasında belirtilir.
Güzel ve başarılı bir sayfa oluşturmak istiyorsak
<head> içerisinde META etiketlerini kullanarak bir
takım tanımlamalar yapmalıyız. META etiketleri
Tarayıcıda içerik olarak gözükmez, sadece sayfa
hakkında tanımlayıcı bilgiler içerir.
META etiketinde kullanılan parametreler şunlardır:
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
5
NAME: Author, description veya keywords gibi
anahtar değerler alır ve sayfa hakkında tanımlayıcı
bilgiler içerir.
HTTP-EQUIV: Refresh, expires, content ,
content-style-type gibi sayfanın ilk yüklenmesi
sırasında yapılacak bir takım ayarları içerir.
Bazı META etiketleri ve kullanımları:
<META NAME="author" CONTENT="EMEL KAÇAR">
Sayfanın tasarımcı kimliğini gösterir.
<META NAME="Description" CONTENT="Sayfanızın kısa
tanıtımını buraya yapın.">
<META NAME="siteinfo" CONTENT="Site Hakkında
Bilgi">
Arama motorlarında çıkacak olan açıklama satırı.
<META NAME="keywords" CONTENT="Sitenizi arama
motorlarında bulduracak siteniz ile ilgili kelimeleri buraya
yazın.">
Arama motorları tarafından hangi anahtar kelimelerle sayfanın aranacağını belirtir.
<META http-equiv="refresh" CONTENT="5;
URL=http://www.megep.meg.gov.tr">
Belirli bir saniye sonra sayfa istenilen adrese
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
6
otomatik yönlendirilir. Yukarıdaki örnekte 5 saniye.
<meta http-equiv="refresh" content="60">
Belli aralıklarla sayfanın yenilenmesini sağlayan
etiket. Örnekteki 60, sayfanın 60 saniyede bir
yenileneceğini belirtir.
<META http-equiv="expires" CONTENT="Wed, 25 Feb
2007 12:00:00 GMT">
Sayfanın geçerli olduğu zamanı belirler. Eğer
sayfanız belli bir zaman içinde görüntülenecek bir
sayfa ise bu tagı kullanmanız gerekir. Expires GMT
saat sistemine göre belirtilen saat ve tarihten sonra
sayfa arama motorlarından ve browser'ların geçici
belleklerinden silinecektir.
<META http-equiv="Content-Type" CONTENT="text/html;
charset=windows-1254">
<META http-equiv="Content-Type" CONTENT="text/html;
charset=ISO-8859-9">
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 ile
yapıldığını gösterir. (windows-1254 ve ISO-8859-9
Türkçe karakter kodlamasını belirtir)
<META http-equiv="Content-Language" CONTENT="tr">
Kodu sayfanızın dilinin Türkçe (istenirse değiştirileBilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
7
bilir.) olduğunu gösterir.
<META http-equiv=”content-style-type”
CONTENT=”text/css”>
Content-style-type belgemizde kullanılan CSS
dosyamızın bir metin dosyası olduğunu belirtir.
<META NAME="copyright" CONTENT="© 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="INDEX,FOLLOW">
Kodu sayfanızı arama motorlarının veritabanına
kaydolabilme hakkının verilmiş olduğunu gösterir.
Virgülün solundaki ifade sayfanın indekslenip
indekslenmeyeceğine karar verilmesini sağlarken,
sağındaki ifade sayfadaki linklerin takip edilip
edilmeyeceğini belirtiyor.
index (indeksle) ve noindex (indeksleme)
follow (takip et), nofollow (takip etme)
<meta name="robots" content="none">
<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
8
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow">
gibi kullanımları mevcuttur.
<META http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="cache-control" CONTENT="nocache">
Arama motorlarına sayfayı arşivlememe direktifi
verilir.
<META NAME="revisit-after" CONTENT="1">
Sayfanın arama motorları tarafından kaç günde bir
ziyaret edilmesi gerektiği belirtilmiş olur.
<meta name="revised" content="MaxiASP,
2/9/01">
Sitenizin son yenilenme tarihini de <META> etiketi
ile belirtebilirsiniz. Bu arama motorlarında işe
yarayacak bir özelliktir. Ayrıca site değerlendirme
araçları da bu gibi kodlara önem verir.
<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.
Örnek)
Şimdi bu tagları örnek bir sayfada görelim. Sayfa
hakkında :
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
9
• Ormanlar hakkında bilgi veren bir sayfa,
• Hazırlayan Erol Cebeci,
• Girişte yeşil bir dünya sloganı olan bir sayfa,
• Son gösterileceği tarihin 31 Ocak 2008 gece
yarısı,
Bilgilerinin elimizde olduğunu varsayalım. Buna
göre sayfamızın meta taglarını hazırlayalım.
<html>
<head>
<title>
Ormanlar ile yeşil bir dünya
</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-9">
<meta name="description" content="Oksijen kaynağımız
ormanları koruyalım ve tanıyalım.">
<meta name="keywords" content="orman, ağaç, yeşil bir
dünya, doğa, hayat, gelecek, oksijen, sağlık, çam, koru">
<meta name="author" content="Erol Cebeci">
<meta http-equiv="expires" content="wed,31 January 2008
23:59:59 gmt">
<meta http-equiv="refresh" content="10,
url=http://deneme.com">
</head>
<body bgcolor="green">
...........................................................
...........................................................
sayfayı tanımlama kodları
..........................................................
...........................................................
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
10
► Robot.txt Dosyası
Bu dosya web sayfasının kök dizininde bulunur.
Arama motorlarının indeksleme robotları bir web
sitesine ulaştıklarında ilk olarak kök dizinde
bulunan robots.txt dosyasını ararlar. Bu dosya
robotlara hangi sayfaların indekslenip hangilerinin
indekslenmeyeceğini anlatmak için yerleştirilir.
Robotlar sadece kök dizindeki robots.txt dosyasına
bakacakları için alt dizinlere bu dosyayı yerleştir mek anlamsızdır. Eğer alt dizinlerden birisine ait url
(veya url’lerin) indekslenmesini istemiyorsanız
bunlar da kök dizindeki robots.txt dosyasında
bildirmeniz gerekiyor. Ya da alternatif olarak
indekslenmesini istemediğiniz sayfalarda meta tag
kullanabilirsiniz.
Örnek bir robots.txt dosyasının içeriği:
User-Agent: *
Disallow: /wp/wp-content/
Sitemap: http://www.acemiblogcu.com/sitemap.xml
robots.txt dosyası sadece belirli bir şekilde düzenlenmiş metin içeriğine sahip olmalıdır ve asla
HTML kodları içermemelidir.
Hatalı robots.txt dosyaları , robotlar tarafından
dikkate alınmayacaklardır.
Bu konuyla ilgili kaynak:
http://www.robotstxt.org/
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
11
Tüm robotların blog’unuzun tamamını
indekslemesini engellemek için;
User-agent: *
Disallow: /
Blog’unuzun tamamının robotların birisi
tarafından indekslenmesini engellemek için;
User-agent: Googlebot
Disallow: /
User-agent: *
Disallow:
Tüm robotların blog’unuzun tamamını
indekslemesi için;
User-agent: *
Disallow:
Not: Boş bir robots.txt dosyası da aynı mesajı
verecektir.
Bir dizinin tüm robotlar tarafından
indekslenmesini engellemek için;
User-agent: *
Disallow: /dizin-adi/
Bir sayfanın tüm robotlar tarafından
indekslenmesini engellemek için;
User-agent: *
Disallow: /dizin-adi/ozel-sayfa.html
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
12
Robots.txt dosyasında:
“/dizin-adi/*” veya “/dizin-adi/*.html”
gibi ifadeler kullanamazsınız. Hariç tutulmasını
istediğiniz sayfaları ve dizinleri teker teker
belirtmek zorundasınız. Tabii ki hariç tuttuğunuz
bir dizinin içindeki dosyaları ayrıca belirtmenize
gerek yok.
Örnek bir kod aşağıdaki şekilde olabilir;
# www.ornek.com için robots.txt dosyası
User-agent: *
Disallow: /cgi-bin/
Disallow: /images/private/
Disallow: /private.html
<BODY>
HTML belgesinin gövde kısmıdır. Bütün içerik
burada yer alır. Buraya metinler, resimler, listeler
vb. her türlü HTML nesnesi yerleştirilebilir.
Kullanılacak parametreler:
Bgcolor: Arka plan rengini belirler.
Background: Arka planda kullanılmak istenen
resmi belirler.
Link: Sayfadaki linklerin rengini belirler.
Alink: Linke tıklandığındaki rengi belirler.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
13
Vlink: Daha önce ziyaret edilmiş linklerin rengini
belirler.
Ör)
<HTML>
<HEAD>
<TITLE> Bu benim ilk sayfam </TITLE>
</HEAD>
<BODY>
Merhaba Dünya!
</BODY>
</HTML>
METİNLER VE BİÇİMLENDİRME
Başlık Tag'leri (Headers): (<hx> ..... </hx>)
Bu etiket sayfa içerisinde kullanılacak metinlerin
boyutlarını belirtmek için kullanılır. X değeri 1'den
6'ya kadar altı farklı değer alır. X değeri büyüdükçe
metin boyutu küçülür.
Ör)
<html>
<head>
<title> Başlık Etiketinin Kullanımı </title>
</head>
<body>
<h1> Bu yazı h1 ile yazılmıştır </h1>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
14
<h2> Bu yazı h2 ile yazılmıştır </h2>
<h3> Bu yazı h3 ile yazılmıştır </h3>
<h4> Bu yazı h4 ile yazılmıştır </h4>
<h5> Bu yazı h5 ile yazılmıştır </h5>
<h6> Bu yazı h6 ile yazılmıştır </h6>
</body>
</html>
Paragraf Tag'i: (<p> ... </p>)
Arasındaki yazıyı ekranda bir paragraf gibi gösterir. Üstünde ve altında birer satır boşluk oluşur.
<p> Bu yazı bir paragraftır....
</p>
<p align=”left”> Bu paragraf sola hizalı olur</p>
<p align=”right”> Bu paragraf sağa hizalı olur</p>
<p align=”center”> Bu paragraf ortada olur</p>
Not:Satır atlamak için ayrıca tekil <br> etiketi
kullanılabilir.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
15
Yazıyı düzenleme etiketleri:
HTML iki ayrı biçimlendirme etiketi türü sağlar.
İçerik tabanlı ve fiziksel etiketler.
İçerik tabanlı biçimlendirme etiketleri; bir metin
parçasına, zamanı geldiğinde metnin görüntülenme
şeklini de etkileyecek biçimde anlam ya da bağlam
eklemek için kullanılır.
Diğer yandan fiziksel metin düzenleme etiketleri
metin üzerinde bir anlam sağlamazlar ve doğrudan
metnin görünümü ile ilgilenirler.
=> Fiziksel Metin Biçimlendirme Tag'leri:
<b> Bu yazı kalın yazılır </b>
<u> Bu yazı altı çizgili yazılır </u>
<i> Bu yazı eğik yazılır </i>
<s> Bu yazının üzeri çizili olur </s>
-------------------------------------------------------------<big> Normalinden daha büyük yazı </big>
<small> Normalinden daha küçük yazı </small>
<blink> Yanıp sönen yazı </blink>
<sub> Alt simge metni </sub>
<sup> Üst simge metni </sup>
<tt> Metin için tek boşluklu (tüm karakterler aynı
genişlikte) yazı-tipini uygular </tt>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
16
Not: <Small> ve <Big> etiketlerinin üst-üste
kullanılması yaptıkları etkiyi artırır. <blink> etiketi
tüm tarayıcılar tarafından desteklenmez.
=> İçerik Tabanlı Metin Biçimlendirme Tag'leri:
<em> Metne vurgu ekler </em>
Bu yazı eğik yazılır
<strong> Metne güçlü vurgu ekler </strong>
Bu yazı kalın yazılır
<cite> Kaynak alıntı tanımlamak için kullanılır </cite>
Bu yazı eğik yazılır
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
17
<code> Tek boşluklu yazı tipi tanımlar </code>
Bu yazı tek-boşluklu yazı tipi ile yazılır
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
18
Çizgi Etiketi: (<hr>)
Bu etiket kullanıldığı yerde yatay çizgi çizilmesini sağlar. Kullanılabilecek parametreler şunlardır:
Width: Çizginin yataydaki genişliğini belirler.
<hr width=”200”> ya da <hr width=”50%”>
Size: Çizginin dikeyde kalınlığını belirler.
<hr size=”3”>
Color: Çizginin rengini belirler
<hr color=”red”> ya da <hr color=”#FF0000”>
Align: Çizginin hizalanmasını sağlar.
< hr align=”left”>
Ör)
<html>
<head>
<title> Çizgi ve Başlık Etiketinin Kullanımı </title>
</head>
<body>
<h2> Bilgisayar Çevre Birimleri </h2>
<i> Harici Donanım Birimleri </i>
<hr size=”5” align=”left” color=”red”>
Klavye <br/>
Mouse <br/>
Monitör <br/>
<p align=”right”>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
19
<i>
Dahili Donamım Birimleri
</i>
</p>
<hr width=”175” size=”5” align=”right”
color=”green”>
<p align=”right”>
İşlemci <br/>
Ram <br/>
Harddisk <br/>
Anakart <br/>
Ekran kartı <br/>
</p>
<p align=”center”>
<i>
Dahili ve Harici Donamım Birimleri
</i>
<hr width=”50%” size=”5” align=”center”
color=”blue”>
<p align=”center”>
Modem <br/>
Harddisk <br/>
</p>
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
20
<PRE> Etiketi:
Bu etiket arasına yazılan metinler olduğu gibi
tarayıcıda görülür.
Ör)
<html>
<head>
<title> Pre Etiketinin Kullanımı </title>
</head>
<body>
<pre>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
21
Bu
pre
etiketinin
uygulamasıdır
</pre>
</body>
</html>
<FONT> Etiketi:
Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi, boyut gibi özelliklerini
değiştirmenize olanak sağlar. Parametreleri ile
beraber kullanım şekli aşağıdaki gibidir.
<FONT SIZE="X" FACE="isim” COLOR="#XXXXXX">
Parametreler:
Face : Yazı tipi (arial, tahoma, verdana, ...)
Size : Yazının büyüklüğü (1-7 arası) . Bu değişkene -1, +2 gibi değerler verilerek metnin büyüklüğünün bir eksiltilmesini veya iki artırılmasını sağlanabilir
Color : Yazının rengi belirler. Red, green gibi renklerin İngilizce karşılığı yazılır ya da RGB renk
değeri belirtilir. RGB'de renkler hexdecimal sayı
sisteminde ifade edilir. Bir renk 16'lık sayı
düzeninde 6 rakamdan oluşur. Bu düzende 9'dan
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
22
sonraki sayıları göstermek için A’dan F’ye
kadar olan harfler kullanılır.
#000000
#0000FF
#FF0000
#FFFF00
#008000
#C0C0C0
#FFFFFF
Siyah
Mavi
Kırmızı
Sarı
Yeşil
Gri
Beyaz
Ör)
<html>
<head>
<title> Font Etiketinin Kullanımı </title>
</head>
<body>
<font size=”6” face=”monotype corsiva”
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
23
color=”red”>
Font etiketini kullanıyorum <br/>
</font>
Bu yazı varsayılan yazı tipinde görüntülenir
<br/>
Çünkü font etiketleri arasında değildir <br/>
<font size=”5” face=”arial” color=”#008000”>
Font etiketini kullanıyorum
</font>
</body>
</html>
BG COLOR Parametresi:
Sayfanın arka plan rengini belirler. <body>
etiketinde kullanıldığında sayfa arka plan rengini;
tabloda <td> etiketi ile kullanıldığında hücre rengini
değiştirir.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
24
Ör)
<html>
<head>
<title> BG Color Etiketinin Kullanımı </title>
</head>
<body bgcolor=”green”>
<font size=”5” color=”yellow”>
Bu yazı sarı, arka plan rengi ise yeşildir.
</font>
</body>
</html>
<blockquote> .... </blockquote> Etiketi:
Bu etiket arasına yazılan metinler biraz daha
içeriden başlatılır. Şekil itibarıyla paragrafa
benzemektedir.
&nbsp (Boşluk karakteri)
Bir karakter boşluk bırakmak için kullanılır.
Birden fazla boşluk bırakılmak isteniliyorsa
aralarına ; konulmalıdır.
    gibi...
topmargin , leftmargin parametreleri
Topmargin üsten, leftmargin ise soldan
bırakılacak boşluğu piksel cinsinden belirler. Bu
parametreler BODY etiketi ile birlikte kullanılır.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
25
BAĞLANTILAR (Linkler):
Web sitelerinde , sayfalar arası geçişler linkler
vasıtasıyla yapılmaktadır. Linkler farklı sayfaların
birbirine bağlanmasını sağlar. Metinlere ve resimlere link özelliği verilebilir.
Link vermek için <a> etiketi kullanılır.
Sayfa dışı bağlantı oluşturma:
<a href=”...” target=”...”> Yazı </a>
href parametresine hedef sayfa yazılır.
target parametresi bağlantının açılacağı yeri
gösterir
target="_blank": Bağlantı yeni bir pencerede
açılır.
target="_self": Bağlantı aynı pencere içerisinde
açılır.
target="_top" :Bağlantı aynı pencere içerisinde en
üstten itibaren açılır.
target="_parent" : Açılan bağlantı, o anda açık
sayfayı oluşturmuş bir ana sayfa varsa onun yerine
konur.
target="çerçeve adı": Frame komutu ile çerçeve
oluşturulmuşsa bağlantının açılacağı çerçeveyi
belirtir.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
26
<a href="http://www.yahoo.com"> Yahoo </a>
<a href="http://www.yahoo.com"
target=”_blank”> Yahoo </a>
Sayfa içi bağlantı oluşturma:
İstenilirse bir sayfa içerisinde yer alan uzun bir
metnin değişik bölgelerine bağlantılar oluşturula –
bilir.
<a href="#...">...</a> , <a name="....">...</a>
komutlarını kullanarak sayfa içi (dahili) bağlantıları
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
konuya gitsin.
Ör)
<HTML>
<HEAD>
<TITLE> Bağlantı ayarları </TITLE>
</HEAD>
<BODY>
<a href=#1>ASP nedir?</a><br/>
<a href=#2>ASP nasıl çalışır?</a><br/>
<a href=#3>ASP ile bileşen kullanma</a><br/>
<P><A NAME="1"></A><FONT SIZE=+1 COLOR="red">
1.ASP nedir? </FONT>
Sunucu taraflı bir teknoloji olan ASP, (Active Server
Pages/ Aktif Sunucu Sayfaları) kullanıcı tarafına
etkileşimli, dinamik Web sayfaları göndermek için
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
27
kullanılır. ASP, WEB programcılarına HTML, scripting ve
kullanıcıdan bağımsız veritabanı uygulamalarını özgürce
kullanma fırsatı verir.
<P><A NAME="2"></A><FONT SIZE=+1 COLOR="red">
2.ASP nasıl çalışır?</FONT>
ASP arabiriminin işleyişi oldukça basit, sisteminize ASP
eklentisini yüklediğinizde Internet Information
Server'ınızın zaten sahip olduğu scripting özellikleri
işlemeye başlıyor. İstemci tarafı sunucudan normal bir
HTML sayfasını istediğinde, IIS bu dosyayı sabit diskten
çağırarak istemci tarafındaki WEB tarayıcıya yollar.
İstemci tarafından yapılan istek bir ASP sayfasıysa IIS
bunu sayfanın uzantısından anlayarak ASP eklentisini
devreye sokar. ASP eklentisi sayfa içindeki scriptleri yine
IIS'a çalıştırdıktan sonra oluşan HTML sayfasını istemci
tarafındaki WEB tarayıcısına yollar.
<P><A NAME="3"></A><FONT SIZE=+1 COLOR="red">
3.ASP ile bileşen kullanma </FONT>
Microsoft'un sunucu teknolojisi ASP için birçok ikinci
parti bileşen bulunuyor. ASP sayfaları ile uyum içerisinde
çalışarak sonuç sayfalarının oluşturulması, WEB sayfası
sahiplerine işlenmiş bilgi aktarılması gibi işlere yarayan
bileşenlerden en popüler olanları ASPMail ve RoboHTTP.
Server Objects firmasının bu iki ürünü, sayfadaki
formların içeriğinin kullanıcıya e-mail olarak kullanılması,
misafir defteri oluşturulması ve birçok değişik bilginin bir
sayfada toplanması gibi işlemleri kolayca hallediyor.
</BODY>
</HTML>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
28
E-Posta Adresine Bağlantı Oluşturma:
Hazırlamış olduğunuz WEB sayfasında insan ların istediğiniz bir mail adresine kolay bir şekilde
ulaşabilmesini sağlayabilirsiniz. Bunun için:
<a href=”mailto…….”> …. </a>
ifadesi kullanılır.
Ör)
<A HREF="mailto:[email protected]"> E-Posta </A>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
29
Bir dosyaya link verme:
Kullanıcıların indirmesini istediğimiz bir dosyaya
link verebiliriz.
Ör)
<a href=”dosya.doc”> Buraya tıkla </a>
<a href=”dosya.zip”> Buraya tıkla </a>
<a href=”dosya.pdf”> Buraya tıkla </a>
Linkler Altındaki Çizgiyi Kaldırmak:
Eğer herhangi bir düzenleme yapılmaz ise linkler altı çizgili bir şekilde gözükür. İstersek bunu
kaldırabiliriz.
Ör)
<a href=”dosya.txt” style=”text-decoration:none”>
.................... </a>
LİSTELER:
Listeler üçe ayrılır:
a) Sıralı Listeler (Ordered List)
b) Sırasız Listeler (Unordered List)
c) Tanımlama Listeleri (Definition List)
Sıralı Listeler: <OL> .....</OL>
Sıralı liste oluşturmak için <ol> etiketi kullanılır.
Listeye elemanlar <li> etiketi ile ilave edilir. <ol>
etiketi içerisinde type parametresi ile listenin
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
30
numaralandırma şekli belirlenir. Start parametresi
ile liste istenilen sıradan başlatılabilir.
Ör)
<html>
<head>
<title> Sıralı Liste Örneği </title>
</head>
<body>
<ol type=”1”>
<li> Bilgisayar
<ol type=”a”>
<li> Donanım
<ol type=”i”>
<li> Dahili Donanım
<li> Harici Donanım
</ol>
<li> Yazılım
<ol type=”i”>
<li> İşletim Sistemler
<ul type=”disc”>
<li> Windows
<li> Linux
<li> Mac Os
</ul>
<li> Uygulama Yazılımları
</ol>
</ol>
<li> Elektronik
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
31
</ol>
</body>
</html>
Sırasız Listeler: <UL> .....</UL>
Kullanım açısından sıralı listelere benzer fakat
rakam ya da harf yerine madde imleri kullanılır.
Sırasız listelerde start parametresi yoktur. Type
parametresi ise şu değerleri alabilir.
<ul type=”disc”
= içi dolu daire (●)
<ul type=”circle”
= içi boş daire (○)
<ul type=”square”
= içi dolu kare (□)
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
32
Tanımlama Listeleri:
Bu tür listelerde numaralandırma ya da madde
imleri kullanılmaz. Bir başlık ve bu başlığın altında
ona ait yazı ekrana gelir.
Ör)
<html>
<head>
<title> Sıralı Liste Örneği </title>
</head>
<body>
<dl>
<dt> <font size="5" color="red"> Size </font>
<dd> Metnin büyüklüğünü ayarlar, bu
değişke ne -1, +2 gibi değerler verilerek metnin
büyüklüğü nün bir eksiltilmesini veya iki
artırılmasını sağlaya bilir, direkt olarak bir
rakam vererek de bunu yapa bilirsiniz. Yazı tipi
çok büyük olmamalıdır, büyük yazı tipleri hem
kullanıcıların sayfayı okumasını zorlaştırır, hem
de sayfanın güzelliğini bozar.
<dt> <font size="5" color="red"> Color </font>
<dd> Yazının rengini (red, green gibi
renklerin ingilizce karşılığı ya da RGB renk
değeri) belirler. HTML'de renkler hexdecimal
sayı sisteminde ifade edilir. Bir renk 16'lık sayı
düzeninde 6 rakamdan oluşur. Bu düzende
9'dan sonraki sayı1arı göster mek için A'dan
F'ye kadar olan harfler kullanılır.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
33
</dl>
</body>
</html>
RESİM EKLEME
Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG’dir. Resimler <img>
etiketi aracılığıyla kullanılır.
Parametreler:
src: Resmin bulunduğu dizini bu parametre ile
bildiririz.
<img src="resim.gif">
width: Resmin genişliğini piksel cinsinden bildirir.
<img src="resim.gif" width="100">
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
34
height: Aynı şekilde resmin yüksekliğini bildirir.
<img src="resim.gif" height="100">
border: Resmin etrafındaki çizginin kalınlığını
belirtir.
<img src="resim.gif" border="6">
align: Yatay konum belirler; left, right, center
değerlerini alır.
<img src="resim.gif" align="left">
alt: Mouse resmin üzerindeyken görüntülenecek
metin bu parametreye yazılır.
<img src="resim.gif alt="Bu bir resimdir.">
Ör)
<img src=”resimler\gül.jpg”>
<img src=”..\gül.jpg”>
<img src=”..\resimler\gül.jpg”>
<img src=”..\..\gül.jpg”>
Not: ..\ işareti bir üst dizine çıkmak için kullanılır.
Ör)
<html>
<head>
<title>Resim Ekleme</title>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
35
</head>
<body>
<img src="../resim.jpg" width="250"
height="185" border="4" alt="Gezgin">
</body>
</html>
Resme Link Vermek:
<a h ref= " h tt p:// w w w. gidilece k ad res "
ta r get= " ….. "><i m g s rc= " resi m.gif " ></a>
Resimlerde MAP Kullanımı:
Map'ler bir resmin değişik yerlerine tıklandığında değişik bağlantıların açılmasını sağlarlar.
Burada kullanılan resmin GIF biçiminde olması
gerekmektedir.
Kullanımı şu şekildedir:
<img src="resim.gif" ISMAP usemap="#harita"
width=160 height=100>
ISMAP resmin bir harita olduğunu,
usemap="..." hangi harita tanımını kullanması
gerektiğini gösterir.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
36
Haritanın tanımı:
<map name="harita">
<area shape="rect" coords"1,1,159,50"
href="dikdortgen.html">
<area shape="circle" coords="80,100,40"
href="daire.html">
<area shape="polyg" coords="10, 110, 150, 110,
80, 190, 9, 110" href="ucgen.html">
<area shape="default" nohref>
</map>
Tablolar:
Tablolar, sayfaları satırlara/sütunlara bölmek ya
da metin veya grafiklerin sayfada istediğimiz yerde
durmasını sağlamak amaçlarıyla kullanabileceği miz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet
gibi kullanabilir, böylece istediğiniz düzenlemeyi
yapabilirsiniz.
<TABLE>
Tablolar <table> etiketi ile başlar.
<table>
……
</table>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
37
<table border=”x” parametresi:
Border parametresi hücrelerin ve tablonun
etrafındaki çerçevenin kalınlığını ayarlamak için
kullanılır. border=0 çerçevenin görünmemesini
sağlar.
<TR>
Tabloda satır oluşturmayı sağlar.
<TD>
Tabloda sütun oluşturmayı sağlar.
Ör) Tek hücreli tablo
<table border=”1”>
<tr>
<td> Bilgisayar </td>
</tr>
</table>
Bilgisayar
Ör)
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
38
Ör)
<table border=”1”>
<tr>
<td> 1.Satır-1.Sütun </td>
<td> 1.Satır-2.Sütun </td>
<td> 1.Satır-3.Sütun </td>
</tr>
<tr>
<td> 2.Satır-1.Sütun </td>
<td> 2.Satır-2.Sütun </td>
<td> 2.Satır-3.Sütun </td>
</tr>
<tr>
<td> 3.Satır-1.Sütun </td>
<td> 3.Satır-2.Sütun </td>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
39
<td> 3.Satır-3.Sütun </td>
</tr>
</table>
Çerçeve Biçimini Değiştirmek:
<table border="1" style="border-collapse: collapse">
BGCOLOR:
Bu parametre <table> etiketi ile kullanılırsa, tablonun arka plan rengini değiştirir. Eğer <tr> etiketi
ile kullanılırsa tüm satırın arka plan rengini, eğer
<td> etiketi ile kullanılırsa yalnızca o hücrenin arka
plan rengini değiştirir.
Ör)
<table border=”2”>
<tr bgcolor=”red”>
<td> Bu 1.satır-1.hücre </td>
<td> Bu 1.satır-2.hücre </td>
</tr>
<tr>
<td> Bu 2.satır-1.hücre </td>
<td bgcolor=”green”> Bu 2.satır-2.hücre</td>
</tr>
</table>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
40
BACKGROUND:
<table> etiketi ile birlikte kullanılırsa tablonun
arkaplanına resim ekler. Sadece bir hücrenin arkaplanına resim eklemek istenilirse <td> etiketi ile
kullanılır. Tüm bir satırın arkaplanına resim
eklenmek istenilirse <tr> etiketi ile birlikte kullanılır.
Ör)
5x30 “baslik_fon2.jpg” arka fon resmi
Ör)
<table border=”1” style="border-collapse: collapse">
<tr>
<td background=“baslik_fon2.jpg”>
::: HABERLER ::: </td>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
41
<td>  &nbsp </td>
<td background=“baslik_fon2.jpg”>
::: ÖNEMLİ - DUYURULAR ::: </td>
</tr>
</table>
WIDTH VE HEIGHT:
Witdth parametresi tablo yada hücrelerin piksel
veya yüzde cinsinden genişliğini;
Height parametresi tablo yada hücrelerin piksel
veya yüzde cinsinden yüksekliğini belirler;
Bu parametreler hiç kullanılmazsa, Web tarayıcısı hücre içeriklerini görüntüleyebileceği en makul
genişliği tabloya otomatik olarak atayacaktır.
Ör)
<table border="1">
<tr>
<td width=100 >Bilgisayar</td>
</tr>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
42
<tr>
<td width=100 height=50>Elektrik</td>
</tr>
<tr>
<td height=40>Elektronik</td>
</tr>
<tr>
<td height=80>Makine</td>
</tr>
</table>
Not:
Tabloya yükseklik ve genişlik değerleri verilirken
aynı satırdaki hücrelerin yüksekliklerinin eşit
olacağı ; aynı sütundaki hücrelerin eşit genişlikte
olacağı unutulmamalıdır.
Aynı satırda faklı yüksekliğe ya da aynı sütunda
farklı genişliğe sahip bir hücre isteniliyorsa bu
ancak birden fazla hücrenin birleştirilmesi ile
mümkün olabilir.
ALIGN ve VALIGN:
Align parametresi tablo etiketi ile birlikte kullanıldığında tabloyu yatayda hizalamak için; <td> etiketi
ile kullanıldığında hücre içerisindeki nesneyi
hizalamak için kullanılır.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
43
Valign hücre içerisindeki nesneyi düşey olarak
hizalamak için kullanılır. Üç değer alabilir ve bunlar
<tr> ve <td> etiketleri ile birlikte kullanılır.
valign=”top”
: Hücre içerisinde üst kısma
hizalar
valign=”middle” : Hücre içerisinde ortalar
valign=”bottom” : Hücre içerisinde alt kısma
hizalar
Ör)
<table border=”1” align=”center”>
<tr>
<td height=”50” width=”150” align=”left”>
1.HÜCRE
</td>
</tr>
<tr>
<td height=”50” width=”150” align=”center”>
2.HÜCRE
</td>
</tr>
<tr>
<td height=”50” width=”150” align=”right”>
3.HÜCRE
</td>
</tr>
Ör)
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
44
<table border="1" width="150"heigth="300"
align="center">
<tr height="100">
<td valign="top">ÜST</td>
</tr>
<tr height="100">
<td valign="middle">ORTA</td>
</tr>
<tr height="100">
<td valign="bottom">ALT</td>
</tr>
</table>
BAŞLIK ETİKETLERİ:
Tablo bağlığı <thead> etiketleri arasına yazılır.
Tablonun bilgi içeren gövde kısmı <tbody>
etiketleri içerisine yazılır. Tabloya ikinci bir altbaşlık
eklemek için <caption> etiketi kullanılır.
Gövde içerisinde yazılmak istenen başlıklar
<th> etiketleri arasına yazılır. <th> etiketi <td> ile
eşdeğerdir. Yalnız içerisindeki yazı başlık şeklinde
biraz kalın yazılır. <th> etiketi , <tr> içerisinde
kullanılır.
Ör)
<table border=”1”>
<thead>
Matematik Dersi Sınav Sonuç Tablosu
</thead>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
45
<caption align="bottom">
Not ortalaması 50'nin altında olanlar bütünleme
sınavına girmek zorundadırlar
</caption>
<tbody>
<tr>
<th width=”200”> Öğrenci Adı </th>
<th width=”100”> 1.Sınav </th>
<th width=”100”> 2.Sınav </th>
<th width=”100”> Not Ortalaması </th>
</tr>
<tr align=”center”>
<th> Mustafa AKTÜRK</th>
<td> 50 </td>
<td> 70 </td>
<td> 90 </td>
</tr>
<tr align=”center”>
<th> Serhat KILIÇ </th>
<td> 75 </td>
<td> 40 </td>
<td> 58 </td>
</tr>
<tr align=”center”>
<th> Serkan YAVUZ </th>
<td> 35 </td>
<td> 25 </td>
<td> 30 </td>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
46
</tr>
</tbody>
</table>
CELLPADING ve CELLSPACING:
Cellpading parametresi hücre içerisindeki nesnenin hücre kenarları ile olan uzaklığını ayarlar.
Cellspacing parametresi hücreler arasındaki
mesafeyi belirler.
--------------------------------------------------------------------
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
47
--------------------------------------------------------------------
-------------------------------------------------------------------COLSPAN ve ROWSPAN :
Aynı satırdaki hücreleri birleştirmek için
colspan parametresi kullanılır.
Aynı sütundaki hücreleri birleştirmek için de
rowspan parametresi kullanılır.
<td colspan=”3” ..........
<td rowspan=”2” ..........
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
48
Ör)
<table border=”1”>
<tr>
<td colspan=”3” width=”100” height=”25”> 1 </td>
<td rowspan=”4” width=”25” height=”100”> 1 </td>
</tr>
<tr>
<td colspan=”2” width=”75” height=”25”> 3 </td>
<td rowspan=”3” width=”25” height=”75”> 4 </td>
</tr>
<tr>
<td colspan=”1” width=”50” height=”25”> 5 </td>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
49
<td rowspan=”2” width=”25” height=”50”> 6 </td>
</tr>
<tr>
<td width=”25” height=”25”> 7 </td>
</tr>
</table>
Ör)
<table border=”1”>

<tr align=”center”>
<td rowspan=”2” width=”75” height=”50”> 1 </td>
<td width=”75” height=”25”> 2 </td>
<td rowspan=”2” width=”75” height=”50”> 3 </td>
<td rowspan=”4” width=”75” height=”100”> 4 </td>
</tr>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
50

<tr align=”center”>
<td width=”75” height=”25”> 5 </td>
</tr>

<tr align=”center”>
<td colspan=”3” width=”225” height=”25”> 6 </td>
</tr>

<tr align=”center”>
<td colspan=”3” width=”225” height=”25”> 7 </td>
</tr>
</table>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
51
Uygulama) Aşağıdaki tabloyu HTML kodları ile yapınız
(Tablo 800 x 600 olsun)
ÇERÇEVELER (FRAME):
Çerçeveler birden fazla HTML sayfasını tek bir
sayfada birleştirerek gösterilmesini sağlarlar.
Çerçevelerin özellikleri;
* Her çerçeve kendi URL’sine sahiptir.
* Her çerçeveye ad verilebilir.
* Her çerçeve kullanıcı tarafından boyutlandırılabileceği gibi, eğer istenilirse sabitlenebilir.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
52
Çerçeveli sayfalar <frameset> .. </frameset>
etiketleri ile oluşturulur.
<HTML>
<HEAD>
….
</HEAD>
<FRAMESET>
…..
</FRAMESET>
</HTML>
COLS:
Sayfayı dikey olarak bölmeye yarar. Virgülle
ayrılmış değerler girilerek oluşturulacak çerçevelerin yan yana sütunlar şeklinde olmasını sağlar. Bu
değerler pixel olarak verilebileceği gibi, 1 ile 100
arasındaki bir yüzde ile ya da göreceli boyutlar
olarak tanımlanabilir. “*” ile göreceli değer verilirken, sütunun geriye kalan bütün alanı kapsaması
için kullanılır.
Ör)
<frameset cols=”20% , 50% , 30%“>
<frameset cols=”100 , 200 , 500” >
<frameset cols=”20% , 200 , * “ >
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
53
ROWS:
Sayfayı yatay olarak bölmeye yarar. Çerçevelerin alt alta satırlar görünümünde açılmasını sağlar.
Cols için geçerli olan kurallar burada da geçerlidir.
FRAME:
Hangi çerçevede hangi sayfanın gösterileceği
bu etiket ile belirlenir. <frame> etiketinin parametreleri şunlardır.
Ör) Çerçeveleri kullanarak bir uygulama gerçekleştirelim. İlk önce normal iki tane sayfa yapıyoruz.
Daha sonra bunları çerçeveli bir sayfa içerisine
yerleştiriyoruz.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
54
sayfa1.html
<html>
<head>
<title> Bu birinci sayfadır </title>
</head>
<body bgcolor=”yellow”>
<h1> 1.Sayfa </h1>
</body>
</html>
sayfa2.html
<html>
<head>
<title> Bu ikinci sayfadır </title>
</head>
<body bgcolor=”blue”>
<h1> 2.Sayfa </h1>
</body>
</html>
cerceve1.html
<html>
<head> <title> Alt-alta çerçeve </title> </head>
<frameset rows=”30%,70%”>
<frame name=”ust” src=”sayfa1.html”>
<frame name=”alt” src=”sayfa2.html”>
</frameset>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
55
Not: oluşturulan çerçeveli sayfada çerçevelerin
büyüklüğü kullanıcılar tarafından değiştirilmesi
istenilmiyorsa frame etiketi kapatılmadan noresize
parametresi kullanılır.
<frame name=”ust” src=”sayfa1.html” noresize>
<frame name=”alt” src=”sayfa2.html” noresize>
cerceve2.html
<html>
<head> <title> Yan-yana çerçeve </title> </head>
<frameset cols=”20%,80%”>
<frame name=”sol” src=”sayfa1.html”
marginheight=”50” marginwidth=”20” scrolling=”no”>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
56
<frame name=”sag” src=”sayfa2.html”
marginheight=”50” marginwidth=”20” scrolling=”no”>
</frameset>
</html>
Not: Çerçeveleri ayıran çizgi eğer istenilirse kaldırılabilir. Bunun için frameborder parametresi kullanılır.
<frameset cols="20%,80%" frameborder="no">
NOFRAMES:
<noframes> etiketi, eğer tarayıcının çerçeve
desteği yoksa ziyaretçiye görüntülenecek sayfayı
belirlemede kullanılır. Daha çok eski ve Linux
altında kullanılan metin tabanlı istemcilerde
çerçeve desteği yoktur. Günümüzde kullanılan
güncel tarayıcılarda çerçeve desteği vardır.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
57
Uygulama)
index.html
<html>
<head> <title> ::: Çerçeveli Sayfa ::: </title>
</head>
<frameset rows="15%,75%,10%">
<frame name="ust" src="ustsayfa.html">
<frameset cols="15%,*,15%">
<frame name="sol" src="solsayfa.html">
<frame name="orta" src="ortasayfa.html">
<frame name="sag" src="sagsayfa.html">
</frameset>
<frame name="alt" src="altsayfa.html">
</frameset>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
58
ustsayfa.html
<html>
<head>
<title> Bu ust sayfadır </title>
</head>
<body bgcolor="blue">
<center>
<h1> Burada BANNER olsun </h1>
</center>
</body>
</html>
solsayfa.html
<html>
<head>
<title> Bu sol sayfadır </title>
</head>
<body bgcolor="green">
<h3> Burada </h3>
<h3> Menüler</h3>
<h3> Olsun </h3>
</body>
</html>
ortasayfa.html
<html>
<head>
<title> Bu orta sayfadır </title>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
59
</head>
<body bgcolor="magenda">
<center>
<font size="7"> Burada içerik olsun </font>
</center>
</body>
</html>
sagsayfa.html
<html>
<head>
<title> Bu sağ sayfadır </title>
</head>
<body bgcolor="cyan">
<h3> Burada Reklamlar</h3>
<h3> Olsun </h3>
</body>
</html>
altsayfa.html
<html>
<head>
<title> Bu alt sayfadır </title>
</head>
<body bgcolor="blue">
<center>
<font size="6"> Burada Site tasarımı ile ilgili
bilgiler olsun </font>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
60
</center>
</body>
</html>
Yukarıdaki örnekte solsayfa.html dosyasını
aşağıdaki gibi değiştirelim.
<html>
<head>
<title> Bu sol sayfadır </title>
</head>
<body bgcolor="green">
<a href=”anasayfa.html” target=”orta”
style=”text-decoration:none”> ANASAYFA </a>
<a href=”urunler.html” target=”orta”
style=”text-decoration:none”> ÜRÜNLER </a>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
61
<a href=”iletisim.html” target=”orta”
style=”text-decoration:none”> İLETİŞİM </a>
</body>
</html>
<iframe> ..... </iframe>:
Normal bir sayfa içerisine çerçeve eklemek için
kullanılır. Çerçevenin büyüklüğünü belirlemek için
width ve height parametreleri kullanılır.
Ör)
<html>
<head>
<title> İçerisinde çerçeve olan sayfa </title>
</head>
<body bgcolor=”fedcba”>
Bu sayfaya bir Frame eklenmiştir...
<br><br>
<iframe name=”cerceve” src=”havadurumu.html”
width=”400” height=”400” scrolling=”no”> </iframe>
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
62
KAYAN NESNELER:
Kayan nesne eklemek için <marquee> etiketi
kullanılır. Bu etiket arasına eklenen yazı ve resimler ekranda hareket etmektedirler.
Gerekli yerlerde ( örneğin “Duyurular” olabilir)
kayan yazı eklemek sayfamızı daha güzel ve
kullanışlı yapar. Fakat çok fazla kayan nesne
eklenmemelidir.
Kullanılan parametreler şunlardır:
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
63
Direction
Hareket yönü belirlenir:
Right , Left , Up , Down
Bgcolor
Width ve
Height
Loop
Kayan nesnenin arka plan rengi ayarlanır.
Scrolldelay
Nesnenin hareket hızını belirler. Değer
olarak sayı girilir. (Ölçü=milisaniye)
Kayan nesne alanının yatay ve dikey
uzunluğunu belirler.
Nenenin kaç kez hareketi tekrarlayacağını
belirler. Değer olarak sayı girilir.
Scrollamount Her bir harekette nesnenin kaç piksel
kayacağını belirler. Sayı değeri girilir.
Behavior
Nesnenin hareket türünü belirler.
Alternate: Nesne her iki yöne doğru gidip
gelir.
Slide: Nesne her iki yönde bir kez kayar
ve ortada kalır.
Scroll: Nesne sürekli bir yönde hareket
eder.
Ör)
<html>
<head>
<title> Kayan yazı örneği </title>
</head>
<body>
<marquee> Web Sitesine Hoşgeldiniz..</marque>
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
64
Ör)
<html>
<head>
<title> Kayan yazı örneği </title>
</head>
<body>
<marquee> <img src=”cicek.jpg> </marque>
</body>
</html>
Ör)
<html>
<head>
<title> Kayan yazı örneği </title>
</head>
<body>
<marquee bgcolor=”green” width”500” height=”50”>
<font color=”yellow”> WEB TASARIMI </font>
</marque>
</body>
</html>
Uygulama)
duyuru.html
Ör)
<html>
<head>
<title> Kayan yazı örneği </title>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
65
</head>
<body>
<marquee direction=”up” scrolldelay=”300"
bgcolor="silver">
<u>
<font color=”red”> ::: DUYURULAR ::: </font><br>
</u>
<a href=”#”>Web Tasarım Kursu Açılmıştır</a><br><br>
<a href=”#”>Hafta Sonu Tiyatroda Ne Var</a> <br><br>
<a href=”#”>Çoçuklar İçin Resim Kursu</a> <br><br>
</marque>
</body>
</html>
index.html
<html>
<head>
<title> Kayan yazı örneği </title>
</head>
<body>
<table border=”0” width=”200” height=”200”
align=”right”>
<tr>
<td>
<iframe name=”duyuru” scrolling=”no”
marginwidth="0" marginright="0" src=”duyuru.html”>
</iframe>
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
66
ÇOKLU ORTAM ARAÇLARI:
• Web Sayfasına Ses Eklemek:
Web üzerinde ses dosyaları iki şekildedir.
- Durağan Sesler: Dinlemeye başlamadan önce
tamamı karşıdan yüklenmek zorunda olan
seslerdir. Kısa ses klipleri depolamak için iyidir.
- Akan Sesler: Karşıdan yüklenirken çalınabilirler. Temel yararları; uzun olabilmeleri ve sesin tamamının karşıdan yüklenmeden çalınabilmesidir.
Internet ortamında arşivlenmiş olarak bir sürü ses
dosyası bulunabilir.
Ses dosyası uzantıları wav, wma, au, mp3,
mpg, mpeg, mid, avi olabilir.
Ses kullanmanın, tarayıcının bir Web sayfasında
karşılaştığında bir sesi nasıl çalacağı ile ilgili olarak
farklı olan üç yaklaşım vardır.
- Sese bağlanmak ; bu durumda ses bir dış
yardımcı uygulamada çalınır.
- Sesi gömmek ; bu durumda ses tarayıcı Ya da
bir eklenti tarafından çalınır.
- Sesi arka plan sesi olarak ayarlamak; bu
durumda ses, tarayıcı Ya da bir eklenti tarafından
sayfa açılır açılmaz çalınır.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
67
- Seslere Bağlanmak:
Ör)
<p>
<a href=''sesdosyasi.wav''> Ses için tıkla </a>
</p>
- Sesleri Gömmek:
Sesleri html kodları arasında gömmek için
embed etiketi kullanılır. Embed ile gömülen sesler
tarayıcı ekranında beliren bir çoklu ortam konsolunda çalınır. Diğer yandan tarayıcılar gömülü ses
olarak çalınabilecek ses dosyaları türlerinde
sınırlıdırlar. WAV biçimini kullanmanız büyük bir
olasılıkla yeterli olacaktır.
Embed etiketinin parametreleri:
Src : Ses dosyasının yolu ve adı
Width : konsolun genişliği (pixel)
Height : konsolun yüksekliği (pixel)
Autostart : Otomatik çalma (True , False)
Loop : Sesin kaç kez yenileneceğini belirler.
Ör)
(1,2,3....ya da True)
<html>
<head>
<title>Gömülü ses örneği</title>
</head>
<body>
<embed src="Beethoven.wma" width="200"
height="50" autostart="false">
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
68
</body>
</html>
- Arka Plan Sesleri Kullanmak:
Bir web sayfasına arka planda ses eklemek için
<BGSOUND> etiketi kullanılır. Bu ses kullanıcılar
tarafından kontrol edilemez. Loop parametresi sesin tekrarlanma sayısını belirler. -1 ya da infinite
değerini aldığında ses sürekli çalar.
Ör)
<html>
<head>
<title> Ses örneği </title>
</head>
<body>
<bgsound src=''sesdosyası.wma'' loop=''-1''>
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
69
• Web Sayfasına Video Eklemek:
Web üzerinde sesler gibi videolar da durağan ya
da akan olabilir. Çoğunluğu akan şekildedir, çünkü
video dosyaları ses dosyalarından daha büyüktür.
Durağan video dosyaları için bilinen biçimler:
MPEG , AVI ve QuickTime'dır. MPEG videoları ;
bir .mpe , .mpg ya da .mpeg dosya uzantısına
sahiptir. AVI videoları .avi kullanır ve QuickTime
videoları ise .mov ya da .qt dosya uzantısı kullanır.
AVI videoları .avi uzantısı kullanır.
Durağan videolar özel programlarla akan videolara dönüştürülebilir.
Sayfalarımıza video ekleme yolları:
- Videolara bağlanmak:
Ses dosyalarında olduğu gibi <a> etiketi kullanılır.
Ör)
<p>
<a href=''videodosyasi.avi''> Video için tıkla </a>
</p>
- Videoları gömmek:
Kullanıcı kontrollü video eklemek için <embed>
etiketi kullanılır. Bu etiket ile eklenen videoyu oynatacak programda otomatik açılmaktadır. Kullanılacak parametreler şunlardır:
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
70
Width ve Height: Oynatıcının boyutlarını piksel
cinsinden ayarlar.
Loop: Videonun kaç kez oynatılacağını belirler.
0 - Video bir kez oynar
1 - Video sürekli oynar
Autostart: Videonun nasıl başlayacağını belirler.
''true'': Video otomatik başlar.
''false'': Video play tuşuna basıldığında başlar.
Ör)
<html>
<head>
<title> Video örneği </title>
</head>
<body>
<embed src=”video.mpeg” width=”200”
height=”200” autostart=”false”>
</body>
</html>
- Akan Videoları Oluşturmak ve Kullanmak:
Çoğu video bir durağan dosya olarak ortaya çıktığından, bunları akan çoklu ortam dosyasına çevirmek gerekir. Bunun için Windows Media Format
ya da Real Media gibi akan bir biçim kullanılabilir.
Bu dönüşümleri yapmak için Windows Media
Encoder ve RealProducer programları kullanılabilir.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
71
Akan çoklu ortam dosyalarına bağlanmak:
Bir akan dosya ve bir durağan dosyaya bağlan ma arasındaki tek fark, akan dosyaların ek bir yar dımcı dosya gerektirmesidir. Bu dosyaya meta
dosya denir.
<asx version=''3.0''>
<entry>
<ref href=''uydu.wmv''>
</entry>
</asx>
Windows Media dosyaları, özel bir XML biçiminde
depolanırlar ve bir .asx dosya uzantısına sahiptir –
ler.Yukarıdaki dosya .asx uzantısıyla kaydedilir.
Ör1)
<html>
<head>
<title>Akan Video Örneği - 1</title>
</head>
<body>
<a href="uydu.asx">Video için tıklayınız...</a>
</body>
</html>
Ör2)
<html>
<head>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
72
<title> Akan Video Örneği - 2 </title>
</head>
<body>
<embed src="uydu.asx" width="400"height="400"
autostart="false">
</body>
</html>
HTML FORMLARI:
Formlar, internet kullanıcıları arasında veri
alışverişi sağlamak için kullanılan ideal bir araçtır.
Kullanıcılardan alınan bilgiler, bilgilerin değerlendireleceği bir programa aktarılır. Genelde bu bilgiler
bir veritabanına aktarılır ve orada tutulur. İstenilirse
bu bilgiler e-mail adreslerine de yönlendirilebilir.
Form alan oluşturmak için:
<form> ..... </form> etiketleri kullanılır.
<FORM ACTION=”...” METHOD=”...” TARGET=”...”>
</FORM>
Action : Formdan girilecek bilgilerin değerlendirileceği dosyanın URL yolunu gösterir.
Method : Formdan girilecek bilgilerin değerlendirici
dosyaya gönderilme yöntemini belirtir. GET değeri
verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST
değeri ise form içeriğini gizli olarak değerlendiriciBilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
73
ye yönlendirir.
Target: Form değerlendirici tarafından kullanıcıya
geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri : “_blank” , “ _top” gibi
değerlerden biri olabilir.
<input>
Genel amaçlı bir form etiketidir. Sonlandırıcı
etiketi yoktur. Girdi türü type öğesinde belirtilerek
farklı girdilerin alınmasını sağlar.
Genel kullanımı:
<INPUT ALIGN=”tip” [CHECKED]
MAXLENGTH=”uzunluk”
NAME=”isim”
SIZE=”boyut“
SRC=”adres”
TYPE=”tip”
VALUE=”değer”>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
74
Varsayılan olarak görüntülenmesini istediğimiz
elaman value parametresine yazılır.
Form Elemanları:
Text (Metin Kutusu):
Kullanıcıdan tek satırlık veri alınmasına olanak
tanır. Size ve maxlength parametreleri, bu kontrolle birlikte kullanılabilir.
Ör)
<html >
<head>
<title>Metin Kutusu</title>
<meta http-equiv="content-type" content="text/html;
charset=windows-1254" >
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
75
</head>
<body>
<form name="form1" method="post" action="">
<pre>TC Kimlik No : <input type="text" name="tckimlik"
value="TC Kimlik No" size="20" maxlength=”11”/> </pre>
<pre>Adınız
: <input type="text" name="ad"
value="adınız" size="20"/> </pre>
<pre>Soyadınız
: <input type="text" name="soyad"
value="soyadınız" size="20"/></pre>
</form>
</body>
</html>
Password(Şifre Alanı):
Formumuza parola yazılabilecek alan eklemek
için kullanılır. Kullanımı metin kutusu ile aynıdır.
Yalnızca type değerine password yazılır.
<pre>Kullanıcı : <input type="text" name="kullanici"
size="20" > </pre>
<pre>Sifre
: <input type="password" name="sifre"
size="20" maxlength=”8”> </pre>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
76
CheckBox(Onay
Kutusu):
Onay kutusu eklemek için kullanılır. Checked
parametresi “on” yapılırsa varsayılan olarak onay
kutusu işaretlenmiş olur.
<html>
<body >
<form name="form1" method="post" action=" ">
<input type="checkbox" name="kutu1"
checked="on"> İlköğretim<br>
<input type="checkbox" name="kutu2"> Lise <br>
<input type="checkbox" name="kutu3"> Üniversite
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
77
</form>
</body>
</html>
Radio (Yuvarlak İşaret Düğmesi):
Normalde onay kutusuna benzer. Name kısmına aynı isimler verilirse kullanıcıların birçok seçe nek içerisinden sadece bir tanesini seçmelerine
izin verir. Bu durumda value parametresine farklı
değerler verilmelidir.
<html>
<body >
<form name="form1" method="post" action="">
<p><u><h2>Yaş Aralığı</h2></u></p>
<input type="radio" name="yas" value="a"> 0-18 <br>
<input type="radio" name="yas" value="b"> 19-24<br>
<input type="radio" name="yas" value="c"> 25-34<br>
<input type="radio" name="yas" value="d"> 35 ve
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
78
yukarısı<br>
</form>
</body>
</html>
Textarea (Metin Alanı):
Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır.
rows ve cols parametreleri ile alanın ekranda
kaplayacağı büyüklük belirlenir.
<html>
<body >
<form name="form1" method="post" action="">
<p><u><h2>İstek ve Şikayetleriniz </h2></u></p>
<textarea name="alan" cols="50" rows="10">
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
79
</textarea>
</form>
</body>
</html>
Combo Box (Açılan Kutu):
<html>
<head>
<title>Açılan Kutu Örneği</title>
</head>
<body>
<form name="form1" method="" action="">
<select name="sehir">
<option>Ankara </option>
<option>İstanbul </option>
<option>İzmir
</option>
<option>Erzincan </option>
</select>
</label>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
80
</form>
</body>
</html>
Label (Etiket):
<html>
<head>
<title>Etiket Örneği</title>
</head>
<body>
<form name="form1" method="" action="">
<label>Adınızı Giriniz:
<input type="text" name="ad">
</label>
</form>
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
81
Gizli Alan (Hidden Field):
Gizli alanlar tarayıcıda kullanıcıya görünmez.
Bu alanlarda kullanıcıya görünmesini istemediğimiz
verileri tutabiliriz.
<form name="form1" method="get" action="">
<label>Adınızı Giriniz
<input type="text" name="textfield" />
</label>
<input type="hidden" name="hiddenField" />
</form>
Button (Buton):
Normalde bir buton oluşturmak için aşağıdaki
kod kullanılır.
<input type="button" name="hesap" value="Buraya
Tıkla">
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
82
Submit (Gönder) ve Reset (Sil) Butonları:
Submit butonu Form içeriğini sunucuya yollar.
Value değeri kullanılarak üzerindeki yazı değiştirilebilir. Submit butonu tıklandığında form içeriğini
temizler. Kullanıcının formu tekrar doldurmasını
sağlar.
<form name="form1" method="" action="">
.................
.................
<input type="submit" value="GÖNDER">
<input type="reset" value="SİL">
</form>
Uygulama)
<html>
<head>
<title>Örnek</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1254" >
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
83
</head>
<body>
<hr>
<form name="form1" method="post" action="....">
<pre> E-mail adresiniz :<input name="email"
size=30> </pre>
<pre> İsminiz
:<input name="name"
size=30> </pre>
<u>Katılmak istediğiniz kursu yazınız: </u><br>
<input name="ders" type="checkbox"
value="grafik" checked="on">
Grafik-Tasarım
<input name="ders" type="checkbox"
value="web" > Web-Tasarım
<input name="ders" type="checkbox"
value="programlama">Visual Studio.NET
<input name="ders" type="checkbox"
value="isletimsis">Windows 2003 Server<br>
<p> Görüşlerinizi yazabilirsiniz:
<p>
<textarea name="body" rows=10
cols=50>Buraya birşeyler yazabilirsiniz.
</textarea>
<br>
<input type="submit" value="Gönder"
name="submit">
<input type="reset" value="Temizle"
name="reset">
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
84
<br>
</form>
<hr>
</body>
</html>
Formun action parametresine ne yazılabilir:
a)
<form action="mailto:[email protected]"
method=”post”>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
85
b)
<form action="http://www.itu.edu/cgi-bin/madlib.pl"
method=”post” >
c)
<form action="http://www.itu.edu/veri.aspx"
method=”post” >
d)
<form action="http://www.itu.edu/veri.php"
method=”post” >
e)
<form action="http://www.itu.edu/veri.jsp"
method=”post” >
Web Standartları:
Webin temel işaretleme dili olan HTML ve web'te kullanlan CSS gibi diğer teknolojilerin belirli kuralları vardır. Bu kurallara web standartları denir.
Web standartları sayesinde , değişik web cihazlarının, web içinde sunulan bilgileri aynı şekilde kullanıcıya göstermesi mümkün olmaktadır. Web
standartları sayesinde, sunulan bilgi, herkes tarafından erişebilir hale geliyor. Önemli olan kullanıcının İnternet nasıl, ne ile bağlandığı değil; neye,
hangi bilgiye ulaşmak istediğidir.
Bir dili konuşurken, bir takım dil bilgisi kurallarına uymak zorundayız. Web ülkesinde konuşulan
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
86
ana diller (X)HTML (Hypertext Markup Language)
ve CSS (Cascading StyleSheets). İmla kılavuzu ise
web standartlarıdır. Bu standartlar web tasarımcılarına bir sayfanın nasıl kodlanması gerektiğini
göstermenin yanı sıra İnternet tarayıcılarına bir
sayfanın kullanıcıya nasıl görünmesi gerektiğini
söyleyen bir takım kuralları içinde barındırıyor. Bu
standartlar sayesinde; web tasarımcılar, her türlu
İnternet tarayıcıları, İnternet kullanıcıları, web
tasarım şirketleri, web sitesi isteyen müşteriler aynı
dili konuşup birbirini anlayabiliyor.
Web standartları: World Wide Web Consortium
(W3C) tarafından belirlenir.
http://www.w3.org/
W3C'in , web sayfalarının belirlenen standartlara
uyup uymadığını denetleyen bir servisi vardır.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
87
Sitemize ekleyebileceğimiz hazır validator kodu:
XHTML Validator:
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31"
width="88" /></a>
</p>
Yukarıdaki referer yerine web sitesinin adresi
yazılır.
XHTML Nedir?:
(EXtensible HyperText Markup Language)
Xhtml, günümüzde W3C tarafından standart
kabul edilen ve tavsiye edilen web biçimleme dilidir.
Kısa özetlenirse:
Açılımı EXtensible HyperText Markup Language
(Genişleyebilir Hiper Metin Anlamlandırma Dili) olan
web biçimleme dilidir.
XHTML, HTML dili üzerine kurulmuştur ve onun
yerini almaktadır.
HTML 4.01′i ve bünyesindeki etiket ve
parametreleri kendine referans alır.
Temiz ve düzenli HTML yazımını sağlar.
XTML, W3C standardı ve tavsiyesidir.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
88
Xhtml ile oluşturulan sayfalar webi destekleyen
tüm cihazlarda ve modern tarayıcılarda (IE, FF,
Safari, Opera) “Tam ve standartlara uygun” kod
yazımı ile web sayfanızın tüm dünya üzerinde
doğru olarak görüntülenebilmesini sağlamaktadır.
XHTML ile HTML arasındaki farklar :
Xhtml dili, Html’den çokta farklı değildir. Xhtml'in
geçerli parametre ve etiketleri Html 4.01 üzerinden
alınmış ve dile entegre edilmiştir. Bununla birlikte,
şimdiden HTML kodlarınızı küçük harflerle yazmaya başlayın. Zira Xhtml yazım biçemi, bunun dışında olan (HTML’nin kabul ettiği ancak Xhtml’nin
kabul etmediği) yazım biçimlerini ve etiket sonlandırılmalarını standartlara uygun bulmamaktadır.
İki Dil Arasındaki Bazı Önemli Farklar:
Maddeler halinde sıralayacak olursak iki dil arasında temel olarak şu farklar vardır:
Xhtml etiketleri gereği gibi dizilmelidir.
Xhtml dokümanları “tam ve uygun kod” yazımı
ile yazılmalıdır.
Etiket ve parametre isimleri “küçük harflerle”
yazılmalıdır.
Tüm Xhtml etiketleri mutlaka “kapatılmalıdır”
Xhtml Etiketleri Gereği Gibi Dizilmelidir!
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
89
Html'de aşağıdaki örnekte olduğu gibi etiketler
sırasız olarak kapatılabilir. Fakat Xhtml'de bu tarz
kod uygun değildir.
HTML Format:
<i><b>Bu yazı kalın ve italik olarak yazılmıştır</i></b>
XHTML Format:
<i><b>Bu yazı kalın ve italik olarak yazılmıştır></b></i>
Xhtml dokümanları “tam ve uygun kod” yazımı ile
yazılmalıdır!
Xhtml üzerinde kodlar, özellikle html, body, head
gibileri çift olmalı yani açılan komutlar icra edildikten sonra bitirilmeli bu etiket içine standarda uygun
olmayan başka eklenti veya kod yazılmamalıdır.
Aşağıdaki örnek Xhtml yazımına uygun bir Html
kkodunu bizlere veriyor.
<html>
<head> … </head>
<body> sayfamızda yer alan görsel öğelerin tümü
</body>
</html>
Etiket ve parametre isimleri “küçük harflerle”
yazılmalıdır!
Xhtml yazımı kesinlikle etiket ve parametrelerin
büyük harfle yazımını kabul etmez. Yazılan etiketler
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
90
mutlaka küçük harflerle yazılmalıdır.
HTML Format:
<BODY><FONT color=”red”>bu yazı kırmızı</FONT></body>
XHTML Format:
<body><font color=”red”>bu yazı kırmızı </font></body>
Tüm Xhtml etiketleri mutlaka “kapatılmalıdır”!
Xhtml dilinde kodlama yaparken kesinlikte tüm
açılan etiketler kapatılmalıdır. Açılan etiketlerin
sırayla kapatılması Xhtml için doğru bir yazımdır.
HTML Format: <p>bu bir paragraf…
XHTML Format: <p>bu bir paragraf </p>
Boş etiketler kesinlikle kapatılmalıdır!
Html üzerinde bazı etiketlerin kapatılmasına ihtiyaç
duyulmaz. Örneğin <br>, <img>, <hr> gibi. Xhtml
dilinde bu etiketlerinde bir kapatılma biçimleri
vardır. Etiketler sonuna /> işareti atılarak bu
etiketler kapatılmalıdır. Lütfen aşağıdaki örnekleri
dikkatlice inceleyiniz.
HTML Format:
Satır atlayalım : <br>
Sayfamıza yatay çizgi atalım : <hr>
Sayfamıza bir resim yerleştirelim :
<img xsrc=”xhtml.gif” alt=”xhtml dersleri”>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
91
Xhtml Format:
Satır atlayalım: <br />
Sayfamıza yatay çizgi atalım: <hr />
Sayfamıza bir resim yerleştirelim:
<img xsrc=”xhtml.gif” alt=”xhtml dersleri” />
gördüğünüz gibi Html üzerinde kapatmaya ihtiyaç
olmayan bu etiketler Xhtml dilinde etiket sonuna />
atılarak kapatılıyor.
XHTML ve Syntax (Sözdizimi) Kuralları:
Etiket ve parametreler küçük harfle yazılmalı
HTML Format: <table WIDTH=”100%”>
XHTML Format: <table width=”100%”>
Parametre değerleri kesinlikle alıntılanmalı yani
tırnak işareti içinde yazılmalı
HTML Format: <table width=100%>
XHTML Format: <table width=”100%”>
Parametre değerlerinde kısaltılma yapılmamalı
Html dokümanlar üzerinde bazı zamanlar (örneğin
formlar) üzerinde tanımlanan bazı seçili değerler
vardır. input etiketinde checkbox değeri kullanırken seçili öğeyi “checked” yazarak seçeriz. Xhtml
de bu tarz bir yazım veya kısaltma yapılamaz.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
92
Bununla birlikte değerler tam ve doğru bir şekilde
yazılıp tanımlanmalıdır.
HTML Format:
<frame noresize> , <input checked>
XHTML Format:
<frame noresize=”noresize” /> ,
<input checked=”checked” />
Aşağıdaki tabloda Html üzerinde tanımlanmayan
ve kısa parametre değeri olarak yazılan bazı
değerlerin Xhtml’deki yazım biçimini göreceksiniz.
Lütfen tabloyu inceleyin.
HTML
XHTML
compact
compact=”compact”
checked
checked=”checked”
declare
declare=”declare”
readonly
readonly=”readonly”
disabled
disabled=”disabled”
selected
selected=”selected”
defer
defer=”defer”
ismap
ismap=”ismap”
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
93
nohref
nohref=”nohref”
noshade
noshade=”noshade”
nowrap
nowrap=”nowrap”
multiple
multiple=”multiple”
noresize
noresize=”noresize”
Name parametresi yerine “id” parametresi
kullanılmalı
Html üzerinde a, applet, frame, iframe, img, map
gibi etiketlerin tanımı olarak kullanılan “name”
parametresi Xhtml üzerinde geçerliliğini yitirmiştir.
“name” yerine “id” parametresi kullanılmalıdır.
HTML Format: <map name=”map1” />
XHTML Format: <map id=”map1” />
(Not: bazı eski browserlar üzerinde id parametresi
çalışmayabilir, bu gibi durumlarda hem name hem
de id parametresini aynı etiket üzerinde tanımlayabilirsiniz. )
Xhtml dokümanlarda zorunlu olarak DTD
(Doküman Tipi) tanımlanmalı , Etiket ve
Parametreler küçük harfle yazılmalıdır!
Xhtml dili ile kodlanan sayfalarda mutlaka DTD yani
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
94
Doküman tipi tanımlanmalıdır. Doküman tipi tanımlama kodu kodlama itibariyle sayfanın en üstüne
yapılır.
Bu satırda yer alan doküman tipi tanımı ile
sayfanın geri kalan kodları o tipe göre icra edilir.
Bununla birlikte bir Xhtml dokümanı 3 öğeden
oluşmaktadır. DOCTYPE , Body ve Head.
Yaptığımız bu açıklamaya göre bir basit Xhtml
kabuğu sunalım.
<!DOCTYPE …>
<html>
<head>
<title>… </title>
</head>
<body> … </body>
</html>
DTD (Doctype Definition): Doküman Tipi Tanımı 3
ana türden oluşur:
Bunlar STRICT, TRANSITIONAL ve FRAMESET
olarak adlandırılmaktadır.
Strict, doküman tipi Türkçe’ye “Tam” manasında
çevrilebilir. Bu doküman tipinin tanımlandığı
dosyalarda hem Xhtml hem de Css bileşenleri
rahatlıkla kullanılabilir.
Transitional, doküman tipi ise “Geçişli” olarak
dilimize çevrilebilir. Bu tip dokümanlar Html
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
95
etiketlerini tam kullanabilmek için tanımlanabilirler,
modern tarayıcılar bu tarz doküman tipi
tanımlanmış olan sayfalarda Css eklentilerini ve
kodlarını icra etmezler. Adından da anlaşılacağı
gibi bu tip geçiş tipidir.
Frameset, tip ise sayfalarında “Çerçeve” kullanan
tasarımcılar için oluşturulmuştur. Bu doküman tipi
iki yada daha fazla frame yani çerçeveye sahip
sayfalar için kullanılabilir.
Örnekler:
STRICT
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd”>
TRANSITIONAL
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd”>
FRAMESET
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/
DTD/xhtml1-frameset.dtd”>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
96
UYGULAMA:
ew
e
Bu tablo sayfanın omurgası olsun. Sayfa dizayn
edildiğinde aşağıdaki görünümde olsun.
HTML_Ugulama
|--- index.html
|--- images
|
|--- banner.jpg
|--- safalar
|--- ana.html
|--- duyuru.html
|--- html.html
|--- dreamweaver.html
|--- photoshop.html
|--- flash.html
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
97
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
98
CSS
(Cascading Style Sheet)
Basamaklı Stil Sayfaları veya Stil Şablonları
Stil Şablonları web sayfalarındaki nesnelere ait
görüntü ve konum özelliklerini tanımlayan komutlardır.
Bir web sayfası içerisinde zaten estetik kuralları
gereği yüzlerce renk ve font kullanmayız. Genelde
birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek
yerine CSS yardımıyla bir sefer tanımlayıp bütün
web sayfamızda kullanabiliriz. Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten
kurtuluruz.
CSS kodları HTML kodlarının içine yazılır.
Türüne göre body veya head bölümlerinde yer
alabilir. Bunların dışında harici CSS dosyaları
oluşturulup bunlar gerektiğinde HTML belgesi
içerisinde çağrılabilir.
Stil Şablonlarının Çeşitleri:
Stil şablonları üç çeşittir. Bunlar:
– - Yerel CSS
- Genel CSS
- Harici CSS
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
99
–
Yerel stil şablonu:
Yerel stil şablonları HTML belgesinin body
bölümündeki html etiketlerinde yazılır. Sadece bir
kereliğine, yazıldıkları yerde etkili olur.
Ör)
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=”font-size:20pt; color:blue”>
CSS Kullanımı
</h2>
</body>
</html>
Ör)
<table width="200" border="1"
style="border-collapse:collapse">
Genel stil şablonları:
HTML belgesinin head bölümüne yazılır ve
belgenin tümünü etkiler.
Bir stil dokümanı:
<style type="text/css">…..</style>
ifadeleri arasına yazılır. Stil kısmı HTML dokü manının <head>…</head> aralığında tanımlanır.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
100
Stil tanımlaya başlarken istenirse “”
işaretleri kullanılır. Bu işaretler, CSS tanımayan
tarayıcılarların bu kısmı geçmesini sağlar.
<html><head>
<style type=”text/css”>
<!-……….
-->
</style>
</head>
Bir style sheet ifadesi, selektör ve bildirim
olmak üzere 2 ana kısımdan oluşur.
Selektör (selector) bir style sheet bildiriminin ilk
öğesine verilen isimdir. Selektör CSS’lerde hangi
etiket ile ilgili işlem yapacağımızı seçmeye yarar.
H1 {color:green}
Selektör (Selector)
Bildirim (Declaration)
Bildirim (decleration) kısmı da kendi içinde özellik
ve değer olarak 2 temel bileşene ayrılmaktadır.
H1 {color : green}
Özellik (Property)
Değer (Value)
Değerler yazılırken tek ( ' ) veya çift ( “ ) tırnak
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
101
kullanılmaz.
Ör)
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-h2 { font-size:20pt;
color:blue
}
-->
</style>
</head>
<body>
<h2>Web Tasarımı </h2>
</body>
</html>
Harici stil şablonları:
Bu stil şablonları farklı bir sayfada yazılır ve .css
uzantısı ile kaydedilir. Ardından da html dosyamızın
içerisine yine <head> … </head> etiketleri arasına
<link rel="stylesheet" type="text/css"
href="dosya_ismi.css">
şeklinde bu dosya eklenir.
Ör) Aşağıdaki kodlar not defterine yazıp stil.css
olarak kaydedilir.
h1 {font-size:13pt; color:green}
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
102
h2 {font-size:20pt; color:blue}
h3 {font-size:15pt; color:red}
Daha sonra HTML dosyası hazırlanır.
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css"
href="stil.css">
</head>
</head>
<body>
<h1>Bu yazı Stil Şablonları ile yazıldı</h1>
<h2>Bu yazı Stil Şablonları ile yazıldı</h2>
<h3>Bu yazı Stil Şablonları ile yazıldı</h3>
</body>
</html>
Stil Şablonlarında kullanılan bazı parametreler ve
özellikleri aşağıda verilmiştir.
font-fa mil y : Font tipini belirler. (Arial, Courier,
Verdana…)
font-w ei g h t : Fontun kalınlık incelik durumunu
belirler.
bold: Fontu kalın yapar.
normal: Fontun normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
font-st yle: Fontun stilini belirler.
italic: Yazının sağa doğru yatık olmasını
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
103
sağlar.
color: Fontun rengini belirler.
text-t ra nsfo r m :
lowercase: Yazının tümünü küçük harf yapar.
uppercase: Yazının tümünü büyük harf yapar.
capitalize: Yazıyı istenilen şekilde bırakır.
text-deco ration :
underline: Yazının altının çizili olmasını sağlar.
overline: Yazının üstünün çizili olmasını sağlar.
line-through: Yazının üzerinin çizili olmasını
sağlar.
none: Yazının herhangi bir yerine çizgi
çekilmemesini sağlar.
text-align:
left: Yazının sola bitişik olmasını sağlar.
center: Yazının ortada olmasının sağlar.
right: Yazının sağa bitişik olmasını sağlar.
line-height: Yazının normal satırdan çizgi
yüksekliğini belirler. 3px, 5px gibi değerler alır.
text-ident:
Yazının soldan ne kadar boşlukla içeriden
başlayacağını belirler. 5px, 10px gibi değerler alır.
Seçiciler (Selectors):
İki çeşit seçici vardır. Bunlar:
- Id seçicisi ve
- Sınıf seçicisi.
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
104
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.
Ör)
<html>
<head>
<title>Id seçicileri</title>
<METAcontent=text/html;CHARSET=iso-8859-9
httpequiv=Content-Type>
<style type="text/css">
<!-#bicim1
{
background:teal;
color:white;
font-weight:bold;
font-family:arial;
}
-->
</style>
</head>
<body>
<p id=”bicim1”>ID Seçiciler</p>
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
105
Class Selectors (Sınıf Seçicileri): Sınıf
seçicisinin iki türü vardır. Birinci türde sınıf seçicisi
sadece belirli etiketler için tanımlanır ve bu
etiketlerde geçerli olur.
Ör)
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-h2.yesil {color:green}
h2.gri {color:gray}
-->
</style>
</head>
<body>
<h2 class=”yesil”>YEŞİL sınıf seçicisi ile </h2>
<br>
<h2 class=”gri”>GRİ sınıf seçicisi ile </h2>
</body>
</html>
İkinci türde ise hiçbir etiket ismi bildirilmeden
istenilen herhangi bir isimle stiller tanımlanır. Daha
sonra istenilen etiket ile birlikte kullanılabilir.
<html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
106
<head>
<title>Css</title>
<style type="text/css">
<!-.yesil {color:green}
.gri {color:gray}
-->
</style>
</head>
<body>
<h3 class=”yesil”>YEŞİL sınıf seçicisi ile </h1>
<br>
<h4 class=”gri”>GRİ sınıf seçicisi ile </h1>
</body>
</html>
A Etiketinin CSS ile Kullanımı:
CSS yardımıyla a etiketinin aldığı posizyonlara
istediğimiz biçimi verebiliriz. Şimdi a etiketinin
aldığı pozisyonları görelim:
- Normal : İlk pozisyon linke herhangi bir
tıklama olma - dığındadır. Bu değer linkin sayfada
görülecek ilk halidir.
- Visited : Link tıklandıktan sonra etiketin aldığı
değerdir.
- Active : Linkin aktif olduğu durumdur. Yani
imleç linkin tıklandığı andaki durumdur.
– Hover : Linkin üzerine gelindiğinde nasıl bir
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
107
biçimde olması isteniyorsa stil o şekilde verilir.
–
Ör)
<html>
<head>
<title>Css</title>
<style type="text/css">
<!.menu {
background-color:white;
color:blue;
}
.menu:visited {
background-color:white;
color:maroon;
font-weight:normal;
}
.menu:active {
background-color:white;
color:red;
font-weight:normal;
}
.menu:hover {
background-color:blue;
color:white;
font-weight:bold;
}
-->
</style>
</head>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
108
<body>
<a href="#" class="menu">Ana Sayfa </a>
</body>
</html>
Bilişim Teknolojileri Alanı – Web Tasarımı ve Programlama Dersi - Durhan GABRALI – 2011
109

Download Report