Temel HTML Etiketleri ve Kullanım Örnekleri

HTMLTemelleri
HTML,Text, Image,Table, Form
Celal Murat KANDEMİR

İçerik
1. HTML’e Giriş
 Web nasıl çalışır?
 Web sayfası nedir?
 İlk HTML Sayfası
 Temel Etiketler: Bağlantılar, görüntüler, biçimlendirme
 Konu başlıkları ve paragraflar
2. HTML ayrıntıları
 <!DOCTYPE> Bildirimi
 <head> Bölümü:Title, Meta, Script, Style
2

Web Nasıl Çalışır?
 WWW klasik istemci / mimarisi kullanır
 HTTP metin tabanlı bir istek-cevap
protokolüdür.
3
Sayfa isteği (request)
İstemciWeb
Tarayıcı Çalıştırır
SunucuWeb
Sunucu yazılımı
çalıştırır (IIS,
Apache, v.b.)
Sunucu cevabı (response)
HTTP
HTTP

Web Sayfası Nedir?
 Web sayfaları HTML etiketler içeren metin
dosalarıdır.
 HTML – HyperText Markup Language
 Hiper Metin İşaret Dili
 Aşağıdakileri tanımlamak için kullanılan bir
gösterimdir:
 belge yapısı (anlamsal işaretleme-semantic markup)
 biçimleme (sunum işaretleme-presentation markup)
 Neye benzer:
 Bir Microsoft Word belgesi
 İşaret etiketleri (markup tags) sayfa yapısı
hakkında bilgi verirler.
4

HTML SayfalarıYaratmak
 Bir HTML dosyası .htm veya .html dosya
uzantısına sahiptir.
 HTML dosyalar metin düzenleyiciler ile
yaratılabilir:
 NotePad, NotePad ++, PSPad, Aptana Studio
 Veya HTML düzenleyicileri (WYSIWYG
Düzenleyiciler-Ne görüyrsan onu alırsın):
 Microsoft FrontPage
 Macromedia Dreamweaver
 Netscape Composer
 Microsoft Word
5

HTMLTemelleri
Text, Image,Table, Form

HTMLYapısı
 HTML “bileşenler-elements” ve “etiketler-
tags”den oluşur.
 <html> ile başlar ve </html> ile sonlanır
 Etiketler birbiri içinde yazılabilir:
 Etiketlerin nitelikleri vardır:
 HTML iki ana bölümünü kullanarak yapıyı
açıklamaktadır: <head> ve <body>
7
<html> <head></head> <body></body> </html>
<img src="logo.jpg" alt="logo" />

HTML KodYazım Kuralları
 HTML kaynak kodu okumayı ve hata ayıklamayı
kolaylaştırmak amacıyla belli bir formatta
yazılmalıdır.
 Her bir blok bileşen yeni bir satırda başlamlıdır.
 Herbir içiçe bileşen bloğu girintili yazılmalıdır.
 Tarayıcılar çok fazla boş satır ve alanı gözardı
ederler, bu yüzden biçimleme zararsızdır.
 Performansı düşürmemek için, biçimlendirme
kurban edilebilir.
8

<dl> <dt> Ders </dt><dd> Bir daha
</dd><dt> Girintisiz</dt><dd> Kod
yazmayacağıma dair kendime ve tüm
sevenlerime söz veriyorum. Umarım bu
sözümü tutarım</dd></dl>
Bu ne anlama
geliyor???
HTML KodYazım Kuralları

<dl>
<dt> Ders </dt>
<dd>
Bir daha.
</dd>
<dt> Girintisiz </dt>
<dd>
Kod yazmayacağıma dair kendime ve tüm
sevenlerime söz veriyorum. Umarım bu sözümü
tutarım.
</dd>
</dl>
Okunabilirlik İçin GirintiliYazınız

İlk HTML Sayfa
11
<!DOCTYPE HTML>
<html>
<head>
<title>İlk HTML Sayfam</title>
</head>
<body>
<p>Lorem ipsum kullanılabilir...</p>
</body>
</html>
test.html

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
İlk HTML Sayfa: Etiketler (Tags)
12
Açılış etiketi
Kapanış
etiketi
Bir HTML bileşeni, açılış ve kapanış etiketleri ile bu etiketler
arasındaki içerikten meydana gelir.

<etiket adı> </etiket adı>
İçerik Buraya Yazılacak
Html Bileşen
Etiket açılış
İçerik metin
ve/veya html
etiketi olabilir / ile etiket kapanışı
HTML EtiketYapısı

14
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
HTML header
İlk HTML Sayfa: Body

İlk HTML Sayfa: Body
15
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html> HTML body

BazıTemel Etiketler
 Bağlantı etiketleri
 Image Etiketleri
 Metin biçimlendirme etiketleri
16
<a href="http://www.ogu.edu.tr/"
title=«ESOGÜ">ESOGÜ Sitesine Bağlantı</a>
<img src="logo.gif" alt="logo" />
Bu metin <em>vurgulandı.</em>
<br />yeni satır<br />
Bu satır<strong>daha çok vurgulandı.</strong>

BazıTemel Etiketler – Örnek
17
<!DOCTYPE HTML>
<html>
<head>
<title>Temel Etiket Demo</title>
</head>
<body>
<a href="http://www.ogu.edu.tr/" title=
«ESOGÜ web">Bu bir bağlantı.</a>
<br />
<br />
<strong>kalın</strong> ve <em>eğik</em> metin.
</body>
</html>
temel-tags.html

BazıTemel Etiketler – Örnek
18
<!DOCTYPE HTML>
<html>
<head>
<title>Temel Etiket Demo</title>
</head>
<body>
<a href="http://www.ogu.edu.tr/" title=
«ESOGÜ web">Bu bir bağlantı.</a>
<br />
<br />
<strong>kalın</strong> ve <em>eğik</em> metin.
</body>
</html>
temel-tags.html

Etiket nitelikleri
 Etiketlerin nitelikleri olabilir
 Nitelikler özellik ve davranışları belirler
 Örnek:
 Az sayıda nitelik tüm bileşenlere uygulanabilir:
 id, style, class, title
 id niteliği HTML belge içinde her bir bileşen için
tektir.
 title nitelik içeriği fare ile bileşen üzerine
gelindiğinde bir ip ucu olarak görüntülenir.
 Bazı bileşenlerin zorunlu nitelikleri bulunabilir 19
<img src="logo.jpg" alt="logo" />
Nitelik alt değeri ise "logo"

Konu başlıkları ve Paragraflar
 Konu başlığı etiketleri (h1 – h6)
 Paragraf Etiketleri
 Bölümler: div ve span
20
<p>Bu benim ilk paragrafım</p>
<BU benim ikinci paragrafım </p>
<h1>Başlık 1</h1>
<h2>Alt başlık 2</h2>
<h3> Alt başlık 3</h3>
<div style="background: skyblue;">
Bu bir div bileşen</div>

Headings ve Paragraphs – Örnek
21
<!DOCTYPE HTML>
<html>
<head><title>Konu başlıkları ve
paragraflar</title></head>
<body>
<h1>Başlık 1</h1>
<p>Bu benim ikinci paragrafım</p>
<div style="background:skyblue">
Bu bir div bileşeni</div>
</body>
</html>
headings.html

Headings ve Paragraphs – Örnek
22
<!DOCTYPE HTML>
<html>
<head><title>KOnu başlıkları ve
paragraflar</title></head>
<body>
<h1>Başlık 1</h1>
<p>Bu benim ikinci paragrafım</p>
<div style="background:skyblue">
Bu bir div bileşeni</div>
</body>
</html>
headings.html

HTML’e Giriş
Derinlemesine HTML BelgeYapısı

<!DOCTYPE> Bildirimi
 HTML belgeleri belge tip tanımlaması ile
başlkamalıdır (document type definition - DTD)
 Web tarayıcısına ne tip bir kod gönderileceğini
söyler
 Olası sürümler: HTML 4.01, XHTML 1.0 (Geçici ya
da katı -Transitional ya da Strict), XHTML 1.1,
HTML 5
 Örnek:
 http://w3.org/QA/2002/04/valid-dtd-list.html olası belge
tip listesi için
24
<!DOCTYPE html >

<head> Bölümü
 Görüntülenen sayfada doğrudan görünmeyen
bilgileri içerir
 <!doctype> bildiriminden sonra başlar
 <head> ile başlar ve </head> ile de biter
 Zorunlu olarak teke <title> etiketi içerir
 Bazı diğer etiketleri içerebilir, örneğin
 <meta>
 <script>
 <style>
 <!–- comments -->
25

<head> Bölümü: <title> etiketi
 Sayfa başlığı <head> ve </head> etiketleri
arasına yerleştirilmelidir.
 Pencere isim çubuğunda sayfa isminin
görüntülenmesi için kullanılır
 Arama motorları ve insanlar isimlere güvenirler 26
<title>ESOGÜ - BÖTE – Güz dönemi 2013/2014
</title>

<head> Bölümü: <meta>
 Meta etiketler ek olarak sayfa içinde bulunan
içeriği de açıklar
27
<meta name="description" content="HTML
öğretici" />
<meta name="keywords" content="html, web
tasarım, stil" />
<meta name="author" content= "CMK" />
<meta http-equiv="refresh" content="5;
url=http://www.ogu.edu.tr" />

<head> Bölümü: <script>
 <script> bileşeni HTML belge içine script’ler
(betik) gömmek için kullanılır
 Betikler (Script) istemci tarafındaki web
tarayıcısında çalıştırılırlar
 Betikler <head> ve <body> bölümlerinde
bulunurlar
 Desteklenen istemci-tarafı betik (script) dilleri:
 JavaScript (Java değil!)
 VBScript
 JScript 28

<head> Bölümü: <style>
 <style> bileşeni HTML sayfa içerisine biçim
bilgisi (CSS stilleri) gömmek amacıyla kullanılır.
30
<html>
<head>
<title>Stil Demo</title>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Stil demo. Bu paragraf</p>
<span>Bu span bileşeninin text transform -
uppercase</span>.
</body>
</html>
style-example.html

Açıklama –Yorum - Comment:
 Etiketi
 Açıklama satırları <html></html> etiketleri
arasında herhangi bir yerde bulunabilir.
 <!– ile başlar ve --> ile sonlanır.
31
<!–- ESOGÜ Logo (a JPG file) -->
<img src="logo.jpg" alt=“ESOGÜ Logo">
<!–- Web sitesine bağlantı-->
<a href="http://www.ogu.edu.tr/">ESOGÜ</a>
<!–- Haber tablosunu göster-->
<table class="newstable">
...

<body> Bölümü: Giriş
 <body> bölümü sayfanın görünen kısmını
tarifler
 <head> </head> bölümünden sonra başlar.
 <body> ile başlayıp </body> ile sonlanır
32
<html>
<head><title>Test sayfası</title></head>
<body>
<!– Burası web sayfası gövdesi -->
</body>
</html>

Metin Biçimlendirme
 Metin biçimlendirme etiketleri, açılış ve
kapanış etiketleri arasındaki metni değiştirir.
 Örneğin <b>Merhaba</b> kalın “Merhaba”
üretir
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through 33

Metin Biçimlendirme – Örnek
34
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Sayfa İsmi</title>
</head>
<body>
<h1>Dikkat</h1>
<p>Bu bir <em>örnek</em> Web sayfasıdır.</p>
<p><pre>Sonraki paragraf:
ön biçimli.</pre></p>
<h2>Daha fazla bilgi</h2>
<p>Özellikle, XHMTL 1.0 transitional kullanıyoruz.<br />
Sonraki satır.</p>
</body>
</html>
text-formatting.html

Metin Biçimlendirme – Örnek
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sayfa İsmi</title>
</head>
<body>
<h1>Dikkat</h1>
<p>Bu bir <em>örnek</em> Web sayfasıdır.</p>
<p><pre>Sonraki paragraf:
ön biçimli.</pre></p>
<h2>Daha fazla bilgi</h2>
<p>Özellikle, XHMTL 1.0 transitional kullanıyoruz.<br />
Sonraki satır.</p>
</body>
</html>
text-formatting.html

Bağlantılar: <a> Etiketi
 Aynı sunucu ve aynı klasördeki form.html
isimli belgeye bağlantı:
 Aynı sunucu ve bir üst klasördeki
parent.html isimli belgeye bağlantı:
 Aynı sunucu ve dosya alt klasöründeki
kedi.html isimli belgeye bağlantı:
36
<a href="form.html">Formu doldurunuz</a>
<a href="../anasayfa.html">Ana Sayfa</a>
<a href="dosya/kedi.html">Katalog</a>

Bağlantılar: <a> Etiketi (2)
 Harici bir web sitesine bağlantı:
 Her zaman tam URL, "http://" de olmalı
sadece "www.siteadi.com" olmaz
 target="_blank" niteliği bağlantıyı yeni bir
pencerede açar.
 E-posta adresine bağlantı:
37
<a href="http://www.tubitak.gov.tr"
target="_blank">TÜBİTAK</a>
<a href="mailto:bugs@example.com?subject=Bug+Report">
Lütfen hataları buraya bildiriniz (sadece e-posta
ile)</a>

Bağlantılar: <a> Etiketi(3)
 apply-now.html isimli belgeye bağlantı
 Aynı sunucuda,aynı klasörde
 Bağlantı düğmesi olarak bir resim kullanalım:
 index.html olarak isimlendirilmiş belgeye
bağlantı
 Aynı sunucuda, üst klasör altındaki english isimli
alt klasörde:
38
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>
<a href="../english/index.html">İngilizce
görünüme geç</a>

Bağlantılar ve Bölümler
 Aynı belgede başka bir bölüme bağlantı:
 Başka bir belgedeki belli bir bölgeye bağlantı:
39
<a href="#section1">Girişe Git</a>
...
<h2 id="section1">Giriş</h2>
<a href="chapter3.html#section3.1.1">Bölüm 3.1.1’e
Git</a>
<!–- chapter3.html belgesinde -->
...
<div id="section3.1.1">
<h3>3.1.1. Teknik ALtyapı</h3>
</div>

Bağlantılar – Örnek
40
<a href="form.html">Formu Doldurunuz</a> <br />
<a href="../anasayfa.html">Ana Sayfa</a> <br />
<a href="dosya/kedi.html">Katalog</a> <br />
target="_blank">TÜBİTAK</a> <br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Lütfen hataları buraya bildiriniz (sadece e-
posta ile)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg"
/></a> <br/>
<a href="../english/index.html">İngilizce görünüme
geç</a> <br />
hyperlinks.html

Bağlantılar – Örnek
41
<a href="form.html">Formu Doldurunuz</a> <br />
<a href="../anasayfa.html">Ana Sayfa</a> <br />
<a href="dosya/kedi.html">Katalog</a> <br />
target="_blank">TÜBİTAK</a> <br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Lütfen hataları buraya bildiriniz (sadece e-
posta ile)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg"
/></a> <br/>
<a href="../english/index.html">İngilizce görünüme
geç</a> <br />
hyperlinks.html

 Yerel Sayfalar (Local Pages) kendi
bilgisayarınız veya sunucunuzda bulunan
dosyalardır.
 Genellikle bu sayfalar üzerinde kontrolünüz
vardır.
Dosyayollarının Kullanılmasıyla
Bağlantı Oluşturma

 Harici Sayfalar (External Pages) Kendi web
siteniz dışından bulunan sayfalardır.
 Genellikle bu sayfalar üzerinde kontrolünüz
yoktur.
 Etkin dosyaya bağlı olarak sistemdeki diğer
dosyalara bağlantıda bulunulmasına bağıl
URL (Relative URL);
 Sistemdeki tam dosya yollarına bağlı olarak
bağlantının verilmesine ise tam URL
(absolute URL) adı verilmektedir.
Dosyayollarının Kullanılmasıyla
Bağlantı Oluşturma (2)

 Internet üzerindeki diğer dosyalara tam URL
adresleri kullanılarak bağlantı yapılır.
 Bağlantı yapılan dosyalar yerel makinanızda
bulunmaz ve harici sayfalar olarak isimlendirilirler.
 URL adresinin bir parçası olarak http:// kullanılır.
 Bazı örnekler:
 href=“http://yoda.tc.uvu.edu/barthoki/index.htm”
 href=“http://www.author.edu/myfiles/index.htm”
Web’deki Diğer Sayfalara Bağlantıda
Bulunulması

 HTTP- Web üzerindeki uzak dosyaları gösterir
 href= "http://yoda.tc.uvu.edu/barthoki/index.htm"
 Non-Anonymous FTP- kullanıcı adı ve parolaya ihtiyaç duyar.
 href="ftp://username:password@foo.com/index.htm"
 Anonymous FTP- FTP suncularındaki dosyalara referansta
bulunur.
 href="ftp://cseftp.tc.uvu.edu/barthoki/pages/index.h
tm"
 Mailto- tarayıcı desteklerse e-posta göndermek amacıyla
kullanılır:
 href="mailto: kandemir@ogu.edu.tr"
Farklı URL Protokolleri

 Çoğu bağlantı, bağıl URL kullanılarak kendi web
sitenizdeki kaynaklara yapılacaktır.
 Dosya yolunda http:// gibi protokol adı bulunmaz:
 tarayıcı dosya için mevcut etkin dizinden bakmaya
başlayacaktır.
 / dizin ve klasörleri birbirinden ayırmak için kullanılır
Kendi Siteniz İçinde Bağlantı

 Bağıl URL’in en çok kullanıldığı durum, sayfanızla aynı dizin
içindeki başka bir doyaya bağlantının yapıldığı durumdur.
 Eğer yol verilmediyse, sadece dosya adı varsa, sunucu
sadece etkin dizin içerisinde bağlantıdaki dosyalara bakar.
 Örnek:
 <a href="hakkimizda.htm" >Hakkımızda</a>
Dizin İçinde Bağlantı Oluşturma

Cake.jpg
iyiYemekler
resimler/
hakkimizda.htm
tarifler/
yulaf.htm somon.htm
Toast.jpg
index.htm
jole.htm kek.htm
tatli/
<a href=“hakkimizda.htm” >Hakkımızda</a>
Dizin İçinde Bağlantı Oluşturma

 Eğer bağlantı yapılan sayfa etkin dizinin alt
dizininde bulunuyorsa dosya adı ile birlikte
dosya yolununda verilmesi gerekir.
 / ile alt dizin ve dosya adları birbirinden ayrılır.
 Örnek:
 <a href="tarifler/somon.htm" >Somon</a>
Alt Dizinlere Bağlantıda Bulunma

Cake.jpg
iyiYemekler
resimler/
hakkimizda.htm
tarifler/
yulaf.htm somon.htm
Toast.jpg
index.htm
jole.htm kek.htm
tatli/
<a href=“tarifler/somon.htm” >Somon</a>
Alt Dizinlere Bağlantıda Bulunma

Cake.jpg
iyiYemekler
resimler/
hakkimizda.htm
tarifler/
yulaf.htm somon.htm
Toast.jpg
index.htm
jole.htm kek.htm
tatli/
<a href=“tarifler/tatli/jole.htm” >Yeşil Jöle</a>
İki Dizin Alta Bağlantı

Üst Klasörlere Bağlantı
 This pathname might include directions to go
up directory level(s) to get to the file needed
 Use two dots and a / to refer to the directory
above the current one: ../
 For each directory level upward,
add another ../
 Example:
 <a href="../index.htm" >Home</a>

Üst Klasöre Bağlantı
Cake.jpg
iyiYemekler
resimler/
hakkimizda.htm
Recipes/
yulaf.htm somon.htm
Toast.jpg
index.htm
jole.htm kek.htm
tatli/
<a href=“../index.htm” >Ana Sayfa</a>
tatli
tarifler
iyiYemekler

Cake.jpg
iyiYemekler
resimler/
hakkimizda.htm
tarifler/
yulaf.htm
Toast.jpg
index.htm
jole.htm kek.htm
tatli/
<a href=“../../index.htm” >Ana Sayfa</a>
tatli
tarifler
iyiYemekler
İki DizinYukarı
Bağlantı
somon.htm

 href="files/morefiles/file.htm"
 İki dizin aşağıya bağlantı
 href="../file.htm"
 Bir dizin yukarı bağlantı
 Href="../../file.htm"
 İki dizin yukarı bağlantı
Bağıl Dosyayolu Örnekleri

 Kök (root) dizin Web sitesi için tüm dosya
ve alt dizinlerin bulunduğu dizindir.
 Kök dizin yolu kök ile başlar ve dosyaya
ulaşılana kadar alt dizinler listelenir.
 Kök dizinin ismini listelemeyiniz, sadece yol
ismini / ile başlatınız.
 Örnek:
 <a href="/tarifler/somon.htm" >Somon</a>
Kök Dizin Bağıl URL

Cake.jpg
iyiYemekler
resimler/
hakkimizda.htm
tarifler/
yulaf.htm somon.htm
Toast.jpg
index.htm
jole.htm kek.htm
tatli/
<a href=“/tarifler/somon.htm” >Somon</a>
Kök Dizin Bağıl URL

Aynı Belge İçinde Bağlantı
Kullanımı – Örnek
58
<h1>İçindekiler</h1>
<a href="#section1" title="introduction">Giriş</a><br />
<a href="#section2" title="background">Biraz arka plan</a><br
/>
<a href="#section2.1" title="history">Proje tarihçesi</a><br
/>
...geri kalan içindekiler…<!-- Belge metinleri burayı izler --
>
<p>... Bölüm 1 burada olacak...<br />
<h2 id="section2">Biraz arka plan</h2>
<p>... Bölüm 2 burada olacak...<br /></p>
<h3 id="section2.1">Proje Tarihçesi</h3>
<p>... Bölüm 3 burada olacak...</p>
links-to-same-document.html

Aynı Belge İçinde Bağlantı
Kullanımı – Örnek
59
<h1>İçindekiler</h1>
<a href="#section1" title="introduction">Giriş</a><br />
<a href="#section2" title="background">Biraz arka plan</a><br
/>
<a href="#section2.1" title="history">Proje tarihçesi</a><br
/>
...geri kalan içindekiler…<!-- Belge metinleri burayı izler --
>
<p>... Bölüm 1 burada olacak...<br />
<h2 id="section2">Biraz arka plan</h2>
<p>... Bölüm 2 burada olacak...<br /></p>
<h3 id="section2.1">Proje Tarihçesi</h3>
<p>... Bölüm 3 burada olacak...</p>
links-to-same-document.html

 <img> etiketi ile resim ekleme:
 Resim nitelikleri:
 Örnek:
Resimler: <img> tag
src Resim dosyasını yeri (bağıl veya mutlak)
alt Resim yerine alternatif yazı
height Yüksekliğin piksel değeri
width Genişliğin piksel değeri
border Kenarlık büyüklüğü, kenarlıksızlık için 0
<img src="/img/basd-logo.png">
<img src="./php.png" alt="PHP Logo" />
60

Çeşitli Etiketler
 <hr />:Yatay kural (doğru) çizer:
 <center></center>: Kaldırıldı!
 <font></font>: Kaldırıldı!
61
<hr size="5" width="70%" />
<center>Merhaba Dünya!</center>
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>

Çeşitli Etiketler – Örnek
62
<head>
<title>Çeşitli Etiket Örnekleri</title>
</head>
<body>
</body>
misc.html

Çeşitli Etiketler – Örnek
63
<head>
<title>Çeşitli Etiket Örnekleri</title>
</head>
<body>
</body>
misc.html

a. Elma
b. Portakal
c. Üzüm
Sıralı Listeler: <ol> Etiketi
 Sıralı liste yaratmak için<ol></ol>:
 type niteliği için değerler 1, A, a, I, veya i
64
1. Elma
2. Portakal
3. Üzüm
A. Elma
B. Portakal
C. Üzüm
I. Elma
II. Portakal
III. Üzüm
i. Elma
ii. Portakal
iii. Üzüm
<ol type="1">
<li>Elma</li>
<li>Portakal</li>
<li>Üzüm</li>
</ol>

Sırasız Lİsteler: <ul> Etiketi
 Sırasız liste yaratmak için <ul></ul>:
 type niteliği için değerler:
 disc, circle veya square
65
• Elma
•Portakal
•Üzüm
o Elma
oPortakal
oÜzüm
 Elma
Portakal
Üzüm
<ul type="disk">
<li>Elma</li>
<li>Portakal</li>
<li>Üzüm</li>
</ul>

Tanım Listeleri: <dl> etiketi
 Tanım listeleri yaratmak için<dl>
 Bir metin ve ilişkili tanım çiftidir; metin <dt>
etiketi, tanım ise <dd> etiketi içindedir
 Madde imsiz görüntülenir
 Tanımlar girintilidir
66
<dl>
<dt>HTML</dt>
<dd>Bir işaret dili …</dd>
<dt>CSS</dt>
<dd>Kullanılan stil …</dd>
</dl>

Listeler – Örnek
67
<ol type="1">
<li>Elma</li>
<li>Poratakal</li>
<li>Üzüm</li>
</ol>
<ul type="disc">
<li>Elma</li>
<li>Portakal</li>
<li>Üzüm</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>Bir işaret dilidir ....</dd>
<dt>CSS</dt>
<dd>HTML belgenin nasıl ......</dd>
<dt>Javascript</dt>
<dd>Bir betik dilidir.</dd>
</dl>
lists.html

Listeler – Örnek
68
<ol type="1">
<li>Elma</li>
<li>Poratakal</li>
<li>Üzüm</li>
</ol>
<ul type="disc">
<li>Elma</li>
<li>Portakal</li>
<li>Üzüm</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>Bir işaret dilidir ....</dd>
<dt>CSS</dt>
<dd>HTML belgenin nasıl ......</dd>
<dt>Javascript</dt>
<dd>Bir betik dilidir.</dd>
</dl>
lists.html

HTML Özel Karakterleri
£
£
British Pound
€
€
Euro
"
"
Quotation Mark
¥
¥
JapaneseYen
—
—
Em Dash
 
Non-breaking Space
&
&
Ampersand
>
>
GreaterThan
<
<
LessThan
™
™
Trademark Sign
®
®
RegisteredTrademark Sign
©
©
Copyright Sign
Sembol
HTMLVarlık
Sembol Adı
69

Özel Karakterler – Örnek
70
<p>[>>  Hoşgeldiniz
  <<]</p>
<p>►Aşağıdaki kartlara sahibim:
A♣, K♦ ve 9♥.</p>
<p>►Hard rock tercih ederim ♫
müzik ♫</p>
<p>© 2013 by CMK & CMK</p>
<p>ESOGÜ™</p>
special-chars.html

Özel Karakterler – Örnek
71
<p>[>>  Hoşgeldiniz
  <<]</p>
<p>►Aşağıdaki kartlara sahibim:
A♣, K♦ ve 9♥.</p>
<p>►Hard rock tercih ederim ♫
müzik ♫</p>
<p>© 2013 by CMK & CMK</p>
<p>ESOGÜ™</p>
special-chars.html

<DIV> ve <SPAN> Kullanımı
Blok ve Satır İçi Bileşenler

Blok ve Satır İçi Bileşenler
 Blok bileşenler kendilerinden önce ve sonra anlamsal
ve/veya grafiksel bölüm kesmeleri eklerler.
 <div> anlamsal kesme yaratan bir blok bileşendir.
 Diğer blok bileşenler <table>, <hr>, konu başlıkları
(headings), listeler, <p> v.b.
 Satır içi bileşenler (Inline elements) dkendilerinden
önceki veya sonraki metni bölmezler.
 <span> bir satır içi bileşendir
 Çoğu HTML bileşenler de satır içidir, örneğin <a>
74

<div> Etiketi
 <div> sayfa içinde anlamsal bölümler
yaratmak için kullanılır
 Blok stil bileşendir
 CSS ile kullanılır
 Örneğin:
75
<div style="font-size:24px; color:red">DIV
örnek</div>
<p>Burası <span style="color:red; font-
weight:bold">sadece test</span> amaçlıdır.</p>
div-and-span.html

<span> Etiketi
 Satır içi stil bileşeni
 Metnin özel bir kısmını
değiştirmek için kullanışlıdır
 Belge içinde ayrı bir alan
(paragraf) oluşturmaz
 CSS ile birlikte çok kullanışlıdır
76
<p>Burası <span style="color:red; font-
weight:bold">sadece test</span> amaçlıdır.</p>
<p>Burası da bir diğer<span style="font-size:32px;
font-weight:bold">TEST</span>.</p>
span.html

İçerik
1. HTMLTablolar
 İçiçe tablolar
 Hücre genişliği (Cells Width)
 Hücre dış ve iç aralığı (Cell
Spacing and Padding)
 Sütun ve satır birleştirme (Span)
77

İçerik (2)
2. HTML Formlar
 Form Alanları ve Alan Kümeleri
 Form Kontrolleri ve Etiketler
 Metin alanı (Text field)
 Çok satırlı metin (Text area)
 Seçim kutusu (Select)
 Radio button
 Checkbox
 Düğme (Button)
 Image button
 Saklı alanlar (Hidden fields)
 Sliders ve Spinboxes
 Doğrulama (Validation)
alanları 78

HTMLTablolar
 Tablolar hücresel veri ifade etmekte kullanılır
 Bir tablo bir veya daha çok satırdan meydana
gelir
 Her bir satır bir veya daha fazla sütuna sahiptir.
 Tablolar birkaç temel etiketten oluşur:
<table></table>:Tablo başlangıç ve bitşi
<tr></tr>:Tablo satırı yaratır
<td></td>: Hücresel veri yaratır
 Önceleri sayfa düzeni için de kullanılan tablolar
artık kullanışlı değillerdir.Tablolar yerine CSS
floats ve positioning stilleri kullanılmalıdır. 80

HTMLTablolar (2)
 Tablo başlangıç ve bitişi
 Satır başlangıç ve bitişi
 Sütun/hücre başlangıç ve bitşi
81
<table> ... </table>
<tr> ... </tr>
<td> ... </td>

Basit Bir HTMLTablo – Örnek
82
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="dersnotu1.ppt">Ders Notu 1</a></td>
</tr>
<tr>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="ders2-demo.zip">
Ders 2 - Demolar</a></td>
</tr>
</table>

Basit Bir HTMLTablo – Örnek
83
<tr>
</tr>
<tr>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="ders2-demo.zip">
Ders 2 - Demolar</a></td>
</tr>
</table>

Data Cells and Header Cells
 Two kinds of cells in HTML 5 tables
 Data cells – containing the table data
 Header cells – used for the column names or
some more important cells in a table
 Why two kinds of cells?
 Used to semantically separate the cells
<tr>
<th>Full name</th> <th> Mark </th>
</tr>
<tr>
<td>Doncho Minkov</td> <td>Very good 5</td>
</tr>
<tr>
<td>Georgi Georgiev</td> <td>Exellent 6</td>
</tr>

HTMLTablo – Diğer Etiketler
 Tablo satırları üç anlamsal bölüme ayrılmıştır:
başlık (header), içerik/gövde (body) ve alt bilgi
(footer)
 <thead> tablo başlığını gösterir ve <td>
bileşeni yerine <th> bileşenlerini içerir,
 <tbody> çok veri bulunan tablo satır
koleksiyonunu gösterir
 <tfoot> tablo alt bilgisini österir fakat
<tbody> etiketinden ÖNCE gelir.
 <colgroup> ve <col> sütunları
tanımlar(çoğunlukla sütun genişliğini
ayarlamak amacıyla kullanılır) 85

HTMLTablo – Diğer Etiketler:
Örnek
86
<table>
<colgroup>
<col style="width:100px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
</tbody>
</table>
başlık
altbilgi
En son gövde (veri) gelir
th
sütunlar

<table>
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
</tbody>
</table>
87
table-full.html
Alt bilgi kodlamada verilerden önce
gelmesine rağmen tarayıcıda en
son görüntülenir
HTMLTablo – Diğer Etiketler:
Örnek
Varsayılan, başlık metni
kalın ve ortalıdır.

İçiçe (Nested)Tablolar
 Tablo verisi “hücreler” (<td>) içiçe tablolar
içerebilir. (tablo içinde tablo):
88
<table>
<tr>
<td>İletişim:</td>
<td>
<table>
<tr>
<td>İlk isim</td>
<td>Soyisim</td>
</tr>
</table>
</td>
</tr>
</table>
nested-tables.html

 Hücreler arası boşluk(cellspacing)
 Hücreler arası boşluğu tanımlar.
Hücreler Arası Boşluk (Cell Spacing)
 Tablolar iki önemli niteliğe sahiptir:
89
cell cell
cell cell

 Hücre iç boşluğu (cellpadding)
 Hücre sınırı ile metin arasındaki boşluğu
tanımlar
Hücre İç Boşluğu (Cell Padding)
90
cell
cell
cell
cell

Cell Spacing ve Padding – Örnek
91
<html>
<head><title>Tablo Hücreleri</title></head>
<body>
<tr><td>İlk Hücre</td>
<td>İkinci Hücre</td></tr>
</table>
<br/>
<tr><td>İlk hücre</td>
<td>İkinci Hücre</td>
</tr>
</table>
</body>
</html>
table-cells.html

Cell Spacing ve Padding – Örnek
92
<html>
<head><title>Tablo Hücreleri</title></head>
<body>
<tr><td>İlk Hücre</td>
<td>İkinci Hücre</td></tr>
</table>
<br/>
<tr><td>İlk hücre</td>
<td>İkinci Hücre</td>
</tr>
</table>
</body>
</html>
table-cells.html

Tablo Cell Spacing ve
Cell Padding
Demo

 rowspan
 Hücrenin kaç tane
sütun kaplayacağını
belirtir
 colspan
 Hücrenin kaç tane
sütun kaplayacağını
belirtir
Sütun ve Satır Birleştirme
 Tablo hücreleri iki önemli niteliğe sahiptir:
94
cell[1,1] cell[1,2]
cell[2,1]
colspan="1"
colspan="1"
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
rowspan="2" rowspan="1"
rowspan="1"

Sütun ve Satır Birleştirme – Örnek
95
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
</table>
table-colspan-rowspan.html

<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<td rowspan="2">Cell[2,2]</td>
</table>
96
table-colspan-rowspan.html
Cell[2,3]
Cell[1,3]
Cell[3,2]
Cell[2,2]
Cell[1,2]
Cell[2,1]
Cell[1,1]
Sütun ve Satır Birleştirme – Örnek

Row and Columns
Spans
Live Demo
97

HTML 5 Formlar
Web Sayfasından KullanıcıVerilerinin
Girilmesi

HTML Formlar
 Formlar site ziyaretçilerinden veri toplamanın
en başta gelen yöntemidir.
 Form bloklarını yaratmak için:
 Örnek:
99
<form></form>
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
"action" niteliği form verilerinin hangi
sayfaya gönderileceğini söyler
“method" niteliği form verilerinin
nasıl gönderilmesi gerektiğini söyler
– GET veya POST isteği üzerinden

Form Alanları
 Tek satır metin giriş alanı:
 Çok satır metin bölgesi alanı:
 Saklı (Hidden) alanlar kullanıcıya görünmeyen
verileri saklar:
 Genellikle JavaScript kodlar tarafından kullanılır 100
<input type="text" name=«ilkAdi" value= "Bu bir
metin alanıdır" />
<textarea name= "yorumlar">Bu bir çok satırlı
metin alanıdır</textarea>
<input type="hidden" name="hesap" value="Bu bir
gizli metin alanıdır." />

Fieldsets
 Fieldsets ilişkili form alanı gruplarını kapsamak
için kullanılırlar:
 <legend> fieldset başlığıdır.
101
<form method="post" action="form.aspx">
<fieldset>
<legend>Müşteri Detayı</legend>
<input type="text" id="isim" />
<input type="text" id="telefon" />
</fieldset>
<fieldset>
<legend>Sipariş Detay</legend>
<input type="text" id="adet" />
<textarea cols="40" rows="10"
id="uyarilar"></textarea>
</fieldset>
</form>

Form Giriş Kontrolleri
 Checkboxes:
 Radio buttons:
 Radyo düğmeleri gruplanabilir, grup içinden
sadece birinin seçilmesine izin verilir:
102
<input type="checkbox" name= "meyve"
value="elma" />
<input type="radio" name="sifat" value="Bay."
/>
<input type="radio" name="sehir" value="izmir" />
<input type="radio" name=«sehir" value="ankara" />

Diğer Form Kontrolleri
 Açılır Liste (Dropdown menus):
 Gönder (Submit) düğmesi:
103
<select name="cinsiyet">
<option value="1"
selected="selected">Erkek</option>
<option value="2">Kadın</option>
<option value="3">Diğer</option>
</select>
<input type="submit" name="submitBtn"
value="Şimdi Uygula" />

Diğer Form Kontrolleri (2)
 Reset düğmesi – formu başlangış durumuna geri
getirir.
 Image düğmesi– gönderme düğmesi gibidir fakat
resim gösterilir ve tık koordinatı gönderilir
 Genel amaçlı düğme – Javascript içinde kullanılır,
versayılan eylem yoktur.
104
<input type="reset" name="resetBtn"
value="Reset the form" />
<input type="image" src="submit.gif"
name="submitBtn" alt="Gönder" />
<input type="button" value="bana tıkla" />

 Parola Girişi – Girilen metni * işareti ile
maskeler/gizler
 Çoklu seçim alanı – tek satır yerine çok satırda
madde listesi görüntüler
105
<input type="password" name="pass" />
<select name="urunler" multiple="multiple">
<option value="1"
selected="selected">klavye</option>
<option value="2">fare</option>
<option value="3">monitör</option>
</select>

 Dosya girişi– Dosyaları yüklemek için kullanılan
bir alandır
 Dosya yükleme yapılacağı zaman dosyayı
gönderme biçimini tanımlamak için enctype
niteliği kullanılır. Genelde multipart/form-data
değerini alır.:
106
<input type="file" name="foto" />
<form enctype="multipart/form-data">
...
<input type="file" name="foto" />
...
</form>

Etiketler
 Form etiketleri (label) , form alan ID’leri
kullanılarak açıklayıcı metin konmasını sağlar.
 Bir etikete tıklamak ilişkili alana odaklanılmasını
sağlar (checkboxes terslenir (toggled), radio
düğmeleri seçili olur)
 Etiketler bir kullanılabilirlik ve erişilebilirlik özelliği
olup her ikisi de erişilebilirlik doğrulamasından
geçmek için gereklidir.
107
<label for="fn">İlk İsim</label>
<input type="text" id="fn" />

HTML Form – Örnek
108
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="sinif" />
<fieldset><legend>Akademik Bilgi</legend>
<label for="derece">Derece</label>
<select name="degree" id="derece">
<option value="LS">Lisans</option>
<option value="YL">Yüksek Lisans</option>
<option value="DR" selected="selected">Doktora
Programı</option>
</select>
<br />
<label for="ogrenciNo">Öğrenci No</label>
<input type="password" name="ogrenciNo" />
</fieldset>
<fieldset><legend>Kişisel Bilgiler</legend>
<label for="ilkAd">İlk İsim</label>
<input type="text" name="ilkAd" id="ilkAd" />
<br />
<label for="sadi">Soyadı</label>
<input type="text" name="sadi" id="sadi" />
form.html

HTML Form – Örnek(2)
109
<br />
Cinsiyet:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Erkek</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Kadın</label>
<br />
<label for="email">Eposta</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">KULLANIM ŞARTLARI...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Form Gönder" />
<input type="reset" value="Form Temizle" />
</p>
</form>
form.html (devam)

form.html (devam)
HTML Form – Örnek (3)
110

Range ve Spinbox
 Kullanıcıların sadece sayısal değer girmelerine
izin verir.
 min, max, step ve value
 Spinbox veya Slider, input tipine bağlıdır.
 Farklı tarayıcılarda farklı görünebilirler.
 Sliders ve Spinboxes Firefox üzerinde çalışmaz.
 Standart textbox olarak görüntülenirler.
112
<input type="range" min="0" max="100" />
<input type="number" min="0" max="100" />

HTML 5 yenlikler
 Autocomplete
 Tarayıcı önceden girilen değerleri saklar.
 Aynı sayfa daha sonra tekrar ziyaret edildiğinde
bu bilgiler geri getirilir.
 Autofocus
 Sayfa yüklendiğinde alana odaklanılır/seçilir.
Bilgi girişi için ilk burası işaret edilmiş olur.
 Required
 Doldurulması veya seçilmesi zorunlu alanları
gösterir. 113

Giriş Alanları İçin Doğrulama
 Email – e-posta için doğrulama
 Doğrulama için örüntü belirlenebilir.
 Mobil cihazlarda e-posta klavyesini getirir.
 URL – url için doğrulama
 Mobil cihazlarda url klavyesini getirri.
 Telefon
 Sayı klavyesini getirir.
114
<input type="email" required="true"
pattern="[^ @]*@[^ @].[^ @]"/>
<input type="url" required="true" />
<input type="tel" required="true" />

Temel HTML Etiketleri ve Kullanım Örnekleri

Recommended

Recommended

More Related Content

Similar to Temel HTML Etiketleri ve Kullanım Örnekleri

Similar to Temel HTML Etiketleri ve Kullanım Örnekleri (20)

More from cmkandemir

More from cmkandemir (20)

Temel HTML Etiketleri ve Kullanım Örnekleri