Temel HTML Etiketleri - Text, Image, Link, List, Image

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

İçerik (2)
<body> Bölümü
Metin stil ve biçimleme etiketleri
Bağlantılar: <a>
Bağlantılar ve bölümler
Images: <img>
Listeler: <ol>, <ul> ve <dl>
HTML Özel karakterler
3. <div> ve<span> bileşenleri
3

Web Nasıl Çalışır?
WWW klasik istemci / mimarisi kullanır
HTTP metin tabanlı bir istek-cevap
protokolüdür.
4
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.
5

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
6

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
XHTML yazarken, bir ad alanı (namespace)
tanımlanmalıdı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>
8
<html xmlns="http://www.w3.org/1999/xhtml">
<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.
9

<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
12
<!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)
13
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ı

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

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

BazıTemel Etiketler
Bağlantı etiketleri
Image Etiketleri
Metin biçimlendirme etiketleri
17
<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
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

BazıTemel Etiketler – Örnek
19
<!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 20
<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
21
<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 and Paragraphs –
Example
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

Headings and Paragraphs –
Example
23
<!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
25
<!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 -->
26

<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 motoroları ve insanlar isimlere güvenirler 27
<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
28
<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 29

<head> Bölümü: <style>
<style> bileşeni HTML sayfa içerisine biçim
bilgisi (CSS stilleri) gömmek amacıyla kullanılır.
31
<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.
32
<!–- 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
33
<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 34

Metin Biçimlendirme – Örnek
35
<!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
36
<!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ı:
37
<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ı:
38
<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:
39
<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ı:
40
<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
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

Bağlantılar – Örnek
42
<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.htmToast.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/
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/
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/
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.htmToast.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/
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
60
<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

Kullanımı – Örnek
61
<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

Demo

<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" />
63

Çeşitli Etiketler
<hr />:Yatay kural (doğru) çizer:
<center></center>: Kaldırıldı!
<font></font>: Kaldırıldı!
64
<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
65
<head>
<title>Çeşitli Etiket Örnekleri</title>
</head>
<body>
</body>
misc.html

Çeşitli Etiketler – Örnek
66
<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
68
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
69
• 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
70
<dl>
<dt>HTML</dt>
<dd>Bir işaret dili …</dd>
<dt>CSS</dt>
<dd>Kullanılan stil …</dd>
</dl>

Listeler – Örnek
71
<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
72
<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
SembolHTMLVarlıkSembol Adı
74

Özel Karakterler – Örnek
75
<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
76
<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>
79

<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:
80
<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
82
<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

HTML Etiketleri İndeksi
http://www.w3.org/TR/html4/index/elements.
html
http://www.htmldog.com/reference/htmltags/
84

HTML 5
Nedir şu HTML5 dedikleri?

HTML 5 Nedir?
HTML5 – HTML standartlarının bir sonraki en
büyük revizyonudur
Halen geliştirilmesine devam edilmektedir.
Son sürümünden hala çok uzakta
World Wide Web Consortium (W3C) altında
HTML 5 çalışma grubu tarafından 2007’den
itibaren geliştirilmektedir.
Özelliklerine ait ilk genel çalışma taslağı yayını
22 Ocak 2008
HTML 5’in bazı bölümleri tüm özellikler hazır
olmadan tarayıcılarda gerçekleştirilmeye
başlandı 86

HTML – Geçmiş, Şimdi, Gelecek
1991 – HTML ilk kez sözü geçiyor –Tim Berners-Lee – HTML
etiketler
1993 – HTML (ilk genel sürüm, IETF’de yayınlandı)
1993 – HTML 2 taslak
1995 – HTML 2 – W3C
1995 – HTML 3 taslak
1997 – HTML 3.2 – “Wilbur”
1997 – HTML 4 – ”Cougar” – CSS
1999 – HTML 4.01 (son)
2000 – XHTML taslak
2001 – XHTML (final)
2008 – HTML5 / XHTML5 taslak
2011 – özellikleri tamamlanmış HTML5
2022 – HTML5 – son tanımlamalar 87

HTML 5 Amaçlar
En son sürüm HTML5
Masaüstü uygulamaları gücüne sahip olması
amaçlanmıştır.
Herhangi bir platformda çalışabilir (Windows,
Linux, iPhone, Android, v.b.)
HTML, CSS, DOM ve JavaScript tabanlı yeni
özellikler
Harici eklenti ihtiyacını azaltmak
Daha iyi hata yakalama ve ayıklama
Betik (script) kod ile yer değiştirecek daha çok
işaret dili 88

Tasarımcı Bakış Açısı
Tasarımcıların bilmesi gerekenler?

Eski Etiketlerde Değişiklik
Doctype etiketi:
HTML etiketi:
Meta etiketi:
Link etiketi:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="style-original.css">

Yeni Sayfa DüzeniYapısı
Daha iyi sayfa düzeni yapısı: yeni yapısal
bileşenler
<section>
<header>
<nav>
<article>
<aside>
<footer>
<header>
<footer>
<nav> <aside>
<section>
<header>
<article>
<footer>

(2)
Header veya footer gibi bileşenlerin sadece
sayfanın en üstünde ya da en altında olması
anlamına gelmez
Her bir HTML sayfanın üst bilgi ve alt bilgi
bölümleri (Header/footer)
<DIV> etiketinden çok farklı olmamakla
birlikte belge yapısı anlamsal olarak daha iyi
tanımlanmıştır

Yeni Sayfa DüzeniYapısı–
Örnek
<body>
<header>
<hgroup>
<h1>HTML 5 Sunum</h1>
<h2>Yeni Sayfa Düzeni</h2>
</hgroup>
</header>
<nav>
<ul>
Ders
</ul>
<ul>
Demo
</ul>
<ul>
Eğiticiler
</ul>
</nav>

Yeni Sayfa DüzeniYapısı–
Örnek (2)
<section>
<article>
<header>
<h1>İlk Paragraf</h1>
</header>
<section>
Lorem Ipsum Metin
</section>
</article>
</section>
<aside>
<a href="http://www.egitim.ogu.edu.tr"> daha fazla
bilgi</a>
</aside>
<footer>
CMK, (c) 2013, B.Ö.T.E
</footer>
</body>

Etiketleri
Demo

Yeni Etiketler
<article>
Harici içerik için, haber sayfalarından metin, blog,
forum, veya diğer harici kaynaklar
<aside>
İçerik ile ilgili sayfa kenarına yerleştirilmiş bilgi
<details>
Belge ile ilgili ayrıntıları veya belgenin bölümlerini
tanımlarken kullanılır
<summary>
Bir başlık, veya özet, bileşen detayı içinde

Yeni Etiketler (2)
<mark>
Vurgulanacak metinler için
<nav>
Navigasyon kısımları için
<section>
Belge bölümlerini ayırmak için (örneğin bölümler,
başlıklar, alt bilgiler)
<wbr>
Sözcük kaydırma (Word break) uzun kelime veya
cümleler bölmek için uygun yer tanımlamak amacıyla
kullanılır
Diğer etiketler
<command>, <datalist>, <details>, <progress>, vb.

Yeni Çoklu Ortam Etiketleri
Çoklu Ortam Etiğketleri (MediaTags)
<audio>
Öznitelikler: autoplay, controls, loop, src
<video>
Öznitelikler: autoplay, controls, loop,
height, width, src
<audio width="360" height="240" controls= "controls" >
<source src="someSong.mp3" type="audio/mp3">
</source>
Audşo etiketi desteklenmiyor
</audio>

Uygulamalar
1. Aşağıdaki web sayfasına benzer bir sayfayı
oluşturmak için gereken HTML kodu yazınız:
* Heading ve div etiketlerini kullanınız
101

Uygulama (2)
2. Aşağıdaki web sayfasına benzer bir sayfayı
oluşturmak için gereken HTML kodu yazınız:
3. 3.giris.PNG. İsimli resim dosyasında da görülen
sayfayı oluşturan HTML kodu yazınız. Aynı sayfadaki
ilgili bölüme gitmek için gerekli bağlantıları
oluşturmak için <a> etiketini kullanınız. 102

Uygulama(3)4. Profile.html isminde
kullanıcı profil sayfası
oluşturunuz,
arkadaslar.html isminde
bir arkadaş listesi sayfası
ve bilgi.html isminde bir
bilgi sayfası oluşturunuz.
<a> etiketleri yardımıyla
sayfaları birbirne
bağlayınız.
103

Temel HTML Etiketleri - Text, Image, Link, List, Image

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Temel HTML Etiketleri - Text, Image, Link, List, Image

Similar to Temel HTML Etiketleri - Text, Image, Link, List, Image (20)

More from cmkandemir

More from cmkandemir (20)

Temel HTML Etiketleri - Text, Image, Link, List, Image