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

HTML TemelleriHTML, 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, Style2

İç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)

İstemci Web Tarayıcı Çalıştırır

Sunucu Web 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 – Hyper Text 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

HTML TemelleriText, Image, Table, Form

HTML Yapı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 Kod Yazı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 Kod Yazı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 Girintili Yazı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


<title>İlk HTML Sayfam</title></head><body>

<p>Lorem ipsum kullanılabilir...</p></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 Etiket Yapısı

15

<!DOCTYPE HTML><html>

<head><title>İlk HTML Sayfam</title>

</head>

<body><p>Lorem ipsum kullanılabilir...</p>

</body></html>

HTML header

İlk HTML Sayfa: Body

İlk HTML Sayfa: Body

16


<title>İlk HTML Sayfam</title></head>

<body><p>Lorem ipsum kullanılabilir...</p>

</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 /><img src="logo.gif" alt="logo" /><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 /><img src="logo.gif" alt="logo" /><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 bulunabilir20

<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><h2>Alt başlık 2</h2><h3>Alt başlık 3</h3>

<p>Bu benim ilk paragrafım</p><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><h2>Alt başlık 2</h2><h3>Alt başlık 3</h3>

<p>Bu benim ilk paragrafım</p><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 Belge Yapı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

<script> Etiket – Örnek

30

<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" lang="tr" xml:lang="tr"><head>

<title>JavaScript Örnek</title><script type="text/javascript">

function yazMerhaba(){

document.write("<p>Merhaba Dünya!<\/p>");

}</script>

</head><body>

<script type="text/javascript">yazMerhaba();

</script></body></html>

scripts-example.html

<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.htmlisimli belgeye bağlantı:

� Aynı sunucu ve bir üst klasördekiparent.html isimli belgeye bağlantı:

� Aynı sunucu ve dosya alt klasöründekikedi.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:[email protected]?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:[email protected]?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:[email protected]?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:[email protected]/index.htm"

� Anonymous FTP- FTP suncularındaki dosyalara referansta

bulunur.

� href="ftp://cseftp.tc.uvu.edu/barthoki/pages/index.htm"

� Mailto- tarayıcı desteklerse e-posta göndermek amacıyla

kullanılır:

� href="mailto: [email protected]"

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 Dizin Yukarı 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

BağlantılarDemo

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…


<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

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…


<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ı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

Çeşitli EtiketlerDemo

a. Elmab. Portakalc. Ü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. Elma2. Portakal3. Üzüm

A. ElmaB. PortakalC. Üzüm

I. ElmaII. PortakalIII. Üzüm

i. Elmaii. Portakaliii. Ü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 girintilidir70

<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

ListelerDemo

HTML Özel Karakterleri

££British Pound

€€Euro

""Quotation Mark

¥¥Japanese Yen

——Em Dash

Non-breaking Space

&&Ampersand

>>Greater Than

<<Less Than

™™Trademark Sign

®®Registered Trademark Sign

©©Copyright Sign

SembolHTML Varlı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

HTML Özel KarakterlerDemo

<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

<DIV>Demo

<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

<SPAN>Demo

HTML Etiketleri İndeksi

� http://www.w3.org/TR/html4/index/elements.html

� http://www.htmldog.com/reference/htmltags/

84

HTML 5Nedir ş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üzeni Yapı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>

Yeni Sayfa Düzeni Yapısı(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üzeni Yapı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üzeni Yapı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>

Yeni Sayfa Düzeni Yapısı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 (Media Tags)

� <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>

Audio OynatmaDemo

HTML Temelleri

Sorular?

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

Education

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