2. Paragraf Biçimlendirme Etiketleri
<pre>…</pre>
Bu etiket, içeriğinde beyaz boşluk olarak ifade edilen,
boşluk, sekme (tab) ve satır sonu gibi karakterlerin
korunarak, karakterlerin sabit genişlikte gösterilmesini
sağlar.
6.5.2014 2
4. Paragraf Biçimlendirme Etiketleri
<p>…</p>
<p> etiketi html dizgisi içerisinde " Paragraf " anlamına
gelir.
Özellikle metin girdilerinizi bu etiketle kapsamanız
hem biçimlendirme yaparken hem de gösterim
esnasında size büyük kolaylıklar sağlar.
Bu etiket belli bir standardı temsil ettiği için en sık
kullanılan etiketlerden de bir tanesidir.
6.5.2014 4
5. ÖRNEK
<p>
Bu konuda yazılabilecek pek çok
konu olduğu halde burada
bırakmak istiyoruz. </p>
<p>
Ancak farklı bir paragraf açarak
yazmaya devam edebiliriz.
</p>
6.5.2014 5
6. Paragraf Biçimlendirme Etiketleri
<br>
Satır atlamak için <br> etiketi kullanılır. Ancak bu
etiketin yeni bir paragraf açmadığını da unutmayınız.
6.5.2014 6
Örnek:
<p>
Bu <br>bir <br>çok satırlı
paragraftır.
</p>
Bu
Bir
Çok satırlı
paragraftır.
7. Paragraf Biçimlendirme Etiketleri
<hr>
Sayfada yatay bir çizgi çizer. Bu etiketinde <br> etiketi
gibi sonlandırıcısı yoktur. Yani bu etiket bir yorum
aralığı belirtmez. Bu etiket ile tanımlanabilecek üç
değişik özellik vardır.
6.5.2014 7
8. ÖRNEK
Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi çizer.
<hr width=”100%” color=”#0000f8” size=”4”>
6.5.2014 8
9. Başlık Etiketleri
<hx>
Bu etiketler basit olarak bir başlık kullanmak
istediğimiz zaman, başlığı yazmak için kullanılan
etikettir.
Etiketin kullanımında “Hx” ifadesindeki “x” 1 ile 6
arasında değerler alabilen bir tamsayıdır.
Bu etiket ile ekrana basılabilecek en büyük boyutlu yazı
<H1> etiketi ile, en küçük boyutlu yazı <H6> etiketi ile
basılır.
6.5.2014 9
10. Başlık Etiketleri
Bu etiket ile birlikte bir önceki etiket olan <p>
etiketindeki gibi dört yer belirleme kodu kullanılabilir.
Etiketin kullanımı <h1 align="center"> Bu başlık yazısı
</h1>şeklindedir. Etiketin yorum aralığındaki metin
başlık olarak ekrana basılır.
6.5.2014 10
11. ÖRNEK
<h1 align="center"> Bu başlık yazısı </h1>
<h2 align="center"> Bu başlık yazısı </h2>
<h3 align="center"> Bu başlık yazısı </h3>
<h4 align="center"> Bu başlık yazısı </h4>
<h5 align="center"> Bu başlık yazısı </h5>
<h6 align="center"> Bu başlık yazısı </h6>
6.5.2014 11
13. 6.5.2014 13
Yazı Etiketleri Açıklamaları
<font ….> : Yazıların boyutu, rengi ,şekli ile
ilgili komutlar buraya yazılır.
<font face=”……..”> : Yazı tipini belirtir.
<font size=”………”> : Yazı boyutunu belirtir.
<font color=”…….”> : Yazı rengini belirtir.
<b>...</b> : Yazının kalın olmasını sağlar.
<i>...</i> : Yazının italik(yana yatık)
olmasını sağlar.
14. 6.5.2014 14
Yazı Etiketleri Açıklamaları
<s>...</s> : Yazının üzeri çizili olmasını
sağlar.
<u>…</u> : Yazının altı çizili olmasını sağlar.
<big>…</big> : Yazının büyük olmasını sağlar.
<smalll>…</small> : Yazının küçük olmasını sağlar.
16. Tanımlama Listeleri
Terimler ve açıklamalarını içeren listeler oluşturmakta
kullanılırlar. Bir uygulamanın komut satırı seçeneklerini
listelemek ve altlarında açıklamalarını vermek için
kullanışlıdır.
<dt> ve <dd> etiketleri <dl> etiketinin yorum aralığı
içinde kullanılır. <dt> etiketi terim, <dd> etiketi ise
açıklaması için kullanılır.
6.5.2014 16
18. DİĞER LİSTELER
<ol> etiketi kullanılarak oluşturulan listeler sıralı
listelerdir. Sıralama sayısal, alfabetik ya da romen
rakamları ile yapılabilir.
<ul> etiketi ile oluşturulan listelerde ise sıralama
elemanı bir grafik semboldür.
<li> etiketi bu etiketlerin yorum aralığında kullanılarak
liste öğeleri verilir.
6.5.2014 18
20. Sıralamasız liste (<ul>) türü değerleri:
Sıralamasız listlerde liste öğelerini belirtmek için 3 sembol
ismi kullanılır:
1. disc - İçi dolu bir daire görüntüler
2. circle - İçi boş bir daire görüntüler
3. square - İçi dolu ya da boş bir kare
görüntüler.
6.5.2014 20
23. <img> ETİKETİ
HTML dökümanlarda resimler <img> etiketi ile
belirtilir. <img> etiketi kapalıdır, yani bu etiket mutlaka
parametreler ile kullanılır ve bir kapatma etiketi
bulundurmaz.
Sayfanızda bir resim görüntüleyebilmek için "src"
parametresini kullanmak zorundasınız. Src, "source"
(kaynak) anlamına gelir. Buraya görüntülemek
istediğiniz resim dosyasının yolunu yazarsınız.
6.5.2014 23
26. <a>…</a> ETİKETİ
Bu etiketi bir adres belirterek başka sitelere, sayfalara ya
da aynı sayfanın farklı bölümlerine bağ(link) vermek
veya e-posta adreslerini yazmak için kullanırız.
Web istemciler genellikle ön tanımlı olarak linkleri altı
çizili ve mavi olarak görüntüler.
<a> etiketinin bir yorum aralığı vardır ve çeşitli
tanımlayıcı kodlar da etiket ile birlikte kullanılabilir.
6.5.2014 26
29. ÖRNEK
<a href= http://www.kediler.com> <img src=”kedi.jpg”
border=”0”></a>
< a href= http://www.kediler.com> <img src=”kedi.jpg”
border=”4”></a>
6.5.2014 29
30. <meta> </meta> ETİKETİ
Sayfanın HEAD alanında kullanılan meta etiketleri (tag)
tarayıcılara, arama motorlarına, robotlara, link analiz vb.
programların hepsine sayfa hakkında ihtiyaç duydukları
bilgileri sağlar.
Bu bilgiler, meta etiketinin name özelliğinin
ismini, content özelliğinin değerini
oluşturduğu isim-değer çifti olarak
sağlanır
6.5.2014 30
31. <meta> </meta> ETİKETİ
Tamamının isteğe bağlı olarak belirtildiği bu değerlerin
popüler kullanıma sahip olan özellik isimleri aşağıdaki
listede gösterilmektedir.
Author: Güncel sayfanın yazarının ve/veya iletişim
bilgilerinin belirtilmesini sağlar.
<meta name="author" content="saü., sau@sau.com" />
6.5.2014 31
32. Abstract : Güncel sayfanın kısa özetinin belirtilmesini
sağlar.
<meta name="abstract" content="HTML meta etiketi
tarayıcılara ve arama motorlarına sayfa hakkında bilgiler
sağlar." />
Content-language: Lisan kodları listesindeki
değerlerden birini alarak güncel sayfanın içerik
lisanını belirtir.
<meta name="content-language" content="tr" />
örnek, sayfa lisanının Türkçe olduğunun belirtilmesini
gösterir.
6.5.2014 32
33. Content-type: Güncel sayfanın içerik tipini ve
karakter setini belirtir.
<meta name="content-type" content="text/html
charset=utf-8" />
<meta http-equiv="content-type" content="text/html
charset=utf-8" />
Copyright: Güncel sayfanın açıklamasının
belirtilmesini sağlar.
<meta name="copyright" content="(c) 2014 Şahin K.
Tüm Hakları Saklıdır." />
6.5.2014 33
34. Description: Güncel sayfanın açıklamasının
belirtilmesini sağlar.
<meta name="description" content="Bu sayfada HTML
meta etiketinin içerebileceği değerlerin isimleri
açıklanmaktadır." />
Designer: Güncel sayfanın (sitenin) tasarımcısının
belirtilmesini sağlar.
<meta name="designer" content="Şahin K. - myNotlar
Sanat Galerisi" />
6.5.2014 34
35. <!-- --> ETİKETİ
Bu etiket yorum aralığı olarak kullanılır. Bu kodun
kullanım amacı HTML kodunun içine kullanıcıya
görünmeyen açıklamalar yerleştirmektir. (İlk etapta
işimize yaramasa bile tablo ve frame kullanarak
hazırlanan karışık HTML dosyalarında çok yardımcı
olacaktır.)
Örnek:
<!-- Burası bir yorum aralığı ve bu kısım sayfada
görünmez!!!! -->
6.5.2014 35
36. ÇERÇEVELER
Sayfayı gezerken, yanda (üstte veya başka yerde de
olabilir) bulunan yönlendiricilerin her zaman
görülebilmesi için çerçeve kullanabiliriz, böylece
kullanıcı sayfanın neresinde olursa olsun yönlendiricileri
görebilir ve yönlendiricilere hemen ulaşabilir.
6.5.2014 36
37. ÇERÇEVELER
Çerçeveler <frameset>...</frameset> kodları arasında
tanımlanır.
Eğer yan yana (sütunsal) çerçeveler istiyorsanız, cols="..."
parametresini, eğer birbiri aşağısına (satırsal) çerçeveler
istiyorsanız, rows="..." parametresini kullanırsınız.
6.5.2014 37
40. MARQUEE ETİKETİ
<marquee>…</marquee> : Kayan yazı eklemek için bu
etiket kullanılır.
Örnek:
<html>
<marquee></marquee> Örneğin bilgisayar yazısını
kaydırmak için
<marquee>bilgisayar</marquee> deriz.
<head><title>Kayan Yazi-</title>
</head>
<marquee></marquee>
</html>
6.5.2014 40
41. TABLO KULLANIMI
Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi
satırlara bölünür ve her satır da <td> etiketi ile sütunlara
bölünür.
<td> etiketinin anlamı "table data"dır. Bir veri hücresi
(data cell) metinler, resimler, listeler, paragraflar,
formlar, yatay çizgiler, tablolar vs. içerebilir.
6.5.2014 41
42. ÖRNEK
<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>
6.5.2014 42
43. 6.5.2014 43
Etiketi Açıklama
<table> Tablo
<th> Tablo başlığı
<tr> Satır
<td> Hücre
<caption> Manşet
<colgroup> Hücre grupları
<col> Sütun genişliği
<thead> Tablo başı
<tbody> Tablo body özelliği
<tfoot> Tablonun en alt kısmı
45. ÖRNEK
<html>
<table border="1" bgcolor="aabbcc"
width="80%">
<tr>
<td bgcolor="#f80000">Burada bir yazı
var</td>
<td>Burası da başka yazı</td>
</tr>
<!-- Aşağıda ikinci satır başlıyor -->
<tr>
<td bgcolor="#00f800" width="50%">İkinci
satırın ilk sütunu</td>
<td>İkinci satırın ikinci sütunu</td>
</tr >
<!--Bu yeni satır iki sütunluk. Bunu <td>
etiketini içinde
colspan="sütun sayısı" ile belirledik
Aynı şeklide iki satırlık bir sütun oluşturmak
için
rowspan="satır sayısı" kodu kullanılır -->
6.5.2014 45
<tr>
<td colspan="2">
<center>
Tablomuz iki sütunluk olmasına
rağmen, burada iki sütunluk bir
satır var.
</center>
</td>
</tr>
<tr>
<td rowspan="2">Burası iki satırlık
bir sütun.</td>
<td>Burası ilk satır.</td>
</tr>
<tr>
<td>Burası da ikinci satır.</td>
</tr>
</table>
</html>
47. <Form> </Form> ETİKETİ
Bir form, form elemanlarını içinde bulunduran alandır.
Form elemanları kullanıcıların bilgi girmesini sağlayan
elemanlardır. (metin alanları, açılabilir listeler, seçenek
kutuları, kontrol kutuları)
6.5.2014 47
ÖRNEK:
<form>
<input>
<input>
</form>
48. Giriş (Input)
En çok kullanılan form etiketi <input> etiketidir.
Metin Alanları
Kullanıcının rakam veya harf girmesini istediğiniz yerlerde
bunu kullabilirsiniz.
Örnek:
<form>
Adınız:
<input type="text" name="isim">
<br>
Soyadınız:
<input type="text" name="soyad">
</form>
6.5.2014 48
49. Seçenek Butonları (Radio Buttons)
Kullanıcının birçok seçenek içinden sadece bir tanesini
seçebilmesini istediğiniz zaman bunu kullanırsınız.
Örnek:
<form>
<input type="radio" name="Cinsiyet" value="Erkek">
Erkek
<br>
<input type="radio" name="Cinsiyet" value="Kadın">
Kadın
</form>
6.5.2014 49
50. Kontrol kutuları (Checkboxes)
Kullanıcının, sunulan seçenekler içinden istediği kadar
seçmesini sağlamak için bunu kullanabilirsiniz.
Örnek:
<form>
Bir bisikletim var:
<input type="checkbox" name="Tasit" value="Bisiklet">
<br>
Bir arabam var:
<input type="checkbox" name="Tasit" value="Araba">
<br>
Bir uçağım var:
<input type="checkbox" name="Tasit" value="Uçak">
</form>
6.5.2014 50
51. Formlarda "Action" Parametresi ve "Submit" Butonu
Kullanıcı submit (gönder) butonuna tıkladığında girilen
bilgiler başka bir sayfaya gönderilir.
Action parametresinde ise bilgilerin hangi dosyaya
gönderileceği belirtilir. Bilgilerin gönderildiği dosya,
genellikle gelen bilgilerle ilgili ne tür işlem yapılacağı
hakkında bilgiler içerir.
6.5.2014 51
53. Açılır Seçim Kutusu
Seçim kutusu eklemenin diğer bir yolu da <select>
kodudur. Bunun kullanımı aşağıdaki gibidir.
Örnek:
<select name="renk">
<option value="beyaz">Beyaz</option>
<option value="beyaz">Kırmızı</option>
<option value="beyaz">Siyah</option>
</select>
6.5.2014 53
54. Image Map
IMAGE map'ler kullanıcının belirli bir resmin değişik
alanlarına tıkladığında farklı adreslere gidebilmesine olanak
tanır.
İki şekilde hazırlanabilecek Image Map'ler isteğe göre HTML
sayfasına veya sunucu üzerindeki başka bir dosyaya
yerleştirilebilir.
Biz bu konumuzda HTML sayfalarına yerleştirilen Image
Map'leri inceleyecek Paint Shop Pro yardımıyla bir resmin
haritasının nasıl çıkarılacağını göstereceğiz.
6.5.2014 54
55. ÖRNEK
<MAP NAME="map1"><!-- Örnek resmin HTML kodları
-->
<AREA SHAPE="RECT" COORDS=' 7, 7, 119, 74'
HREF="http://www.pcmagazine.com.tr">
<AREA SHAPE="CIRCLE" COORDS=' 178, 41, 35'
href="http://www.idg.com.tr">
</MAP>
6.5.2014 55
56. Öncelikle HTML sayfasında yukarıdaki gibi kodlar
kullanır ve istediğimiz resimde hangi noktalara
tıklandığında hangi adreslere bağlanılacağını belirtiriz.
Daha sonra <IMG SRC=' map1.gif' USEMAP=' #map1'
> gibi bir ifade kullanılarak haritasının çıkarılmasını
istediğimiz resmi sayfaya yerleştirir ve bu resim için '
map1' isimli haritanın kullanılacağını belirtiriz.
6.5.2014 56
57. MAP TAG'I <MAP NAME='deneme' > AREA takılarıyla
tanımlanan haritaya başlangıç yapar ve bir isim verir.
AREA
<AREA COORDS=koordinatlar SHAPE=tip HREF=url
TARGET=pencere>
COORDS
Tanımlanan şekle göre değişik koordinatlar
girebilmenizi sağlar.
6.5.2014 57
58. SHAPE=tip
Tip RECTANGLE, CIRCLE, POLYGON seçeneklerinden
biri olabilir. RECTANGLE Bir kare tanımlar ve ' x1, y1, x2,
y2' değerleri kullanılır. CIRCLE Bir çember tanımlar ve '
OrtaX, OrtaY, Yarıçap' değerleri kullanılır. POLYGON Bir
poligon tanımlar. Birçok noktadan oluşabilir.
HREF
Şekle tıklandığında hangi adrese gidileceğini belirler.
TARGET
Gidilecek adresin hangi pencerede açılacağını belirler.
6.5.2014 58
