Erman Y

1
Temel HTML Egitimi

• Erman Yükseltürk

2
HTML Nedir ?

• 1980 yilinda CERN'de görevli olan Tim
  Berners-Lee, CERN arastirmacilarinin bilgilerini
  ve dökümanlarini birbirleriyle paylasabilmeleri
  için bir sistem olmasi gerektigine inaniyordu. Bu
  yüzden prototip olarak ENQUIRE isimli sistemi
  önerdi.
• 1989 yilina gelindiginde internet tabanli
  sistemin ilk temellerini yine ayni isim Tim
  Berners Lee atti.
• 1990 yilinda HTML isaretleme dilini
  gelistirmesinden sonra World Wide Web (WWW)
  sistemini kurmustur.
• Bu sekilde CERN'de bilgi paylasimini
  kolaylastirma amaci dogrultusunda ortaya çikan
  HTML günümüzde hayatimizin vazgeçilmezi olan
  internetin baslica temelini olusturmustur.

3
HTML Nedir ?

• HTML, bir programlama dili olarak tanimlanamaz.
• Zira HTML kodlariyla kendi basina çalisan bir
  program yazilamaz.
• Ancak bu dili yorumlayabilen programlar
  araciligiyla çalisabilen programlar yazilabilir.
• Programlama dili denilememesinin nedeni tam
  olarak budur.
• Temel geregi yazi, görüntü, video gibi degisik
  verileri ve bunlari içeren sayfalari birbirine
  basitçe baglamak, buna ek olarak söz konusu
  sayfalarin web tarayicisi yazilimlari tarafindan
  düzgün olarak görüntülenmesi için gerekli
  kurallari belirlemektir.

4
Java Script NEDIR?

• JavaScript ? JAVA
• Script kendi basina çalismayan, web sayfalarinin
  HTML kodlarina eklenerek onlara çesitli islevler
  yaptiran program parçaciklaridir.
• Netscape firmasi tarafindan C dili kullanilarak
  türetilen bir programlama dilidir.
• JAVA ise Delphi firmasi tarafindan gelistirilen
  gerçek bir programlama dilidir.
• JavaScript dili istemci tarafli (client-side )
  script dilidir.
• Web sayfalarinda dinamik içerik saglamak ya da
  kullanicilarla iletisim kurmak için kullanilir.
  
• Genellikle HTML sayfalarinda kullanici
  kontrolleri eklemek, formlari kontrol etmek,
  hesaplamalar yapmak gibi isler için kullanilir.

5
XML NEDIR?

• Bagimsiz bir kurulus olan W3C (World Wide Web
  Consortium) organizasyonu tarafindan tasarlanan
  ve herhangi bir kurumun tekelinde bulunmayan XML
  (eXtensible Markup Language), kisilerin kendi
  sistemlerini olusturabilecekleri, kendi
  etiketlerini tanimlayarak çok daha rahat ve etkin
  programlama yapabilecekleri ve bu belirlenen
  etiketleri kendi yapilari içerisinde standardize
  edebilecekleri esnek, genisleyebilir ve kolay
  uygulanabilir bir meta dildir.
• XML bilgiyi tanimlayan ve web'te bilgi alis
  verisi için kullanilan standard bir biçimdir.
• Çok farkli tipteki verileri orijinal
  formatlarinda tek bir havuzda tutabilen XML,
  bilgiye hizli, kolay ve ortamdan bagimsiz olarak
  erisebilme imkani sunar.
• Öncelikle veri transferinin kolaylasmasini ve
  verinin içerik bilgisiyle saklanabilmesini
  hedefleyen XML, içerik ve sunum bilgilerini
  birbirinden ayirir.

6
HTML Nedir ?

• HTML, Hyper Text Markup Language'in
  kisaltmasidir.
• HTML çesitli anlamlara gelen kodlamalar (tag) ve
  düz metinden olusur.
• Bu kodlar ancak bir Web Browser (Internet
  Explorer, Firefox) tarafindan anlamli hale
  getirilebilir.
• Bu kodla yazilmis dosyalarin uzantilari
  genellikle html ya da htm'dir. HTML, en basit
  yolla bir not defteri ile yazilabilir.

7
HTML ile ilk sayfam
lthtmlgt ltheadgt lttitlegtBenim
Sayfamlt/titlegt lt/headgt
ltbodygt Bu benim ilk sayfam...
lt/bodygt lt/htmlgt
BASLIK
GÖVDE
8
HTML Etiketleri

• HTML etiketleri, HTML ögelerini belirtmek için
  kullanilir.
• HTML etiketleri 2 karakter ile sinirlanir. lt ve gt
• HTML etiketleri çift olarak kullanilir. Örn ltbgt
  Bu metin koyu fonttadir. lt/bgt
• Bu çiftlerden birincisine baslama etiketi,
  ikincisine ise bitis etiketi denir.
• HTML etiketleri büyük/küçük harfe duyarli
  degildir, yani ltbgt ve ltBgt ayni görevi görür.

9
HTML Etiketleri

• HTML dilindeki en önemli etiketleri
• Basliklar
• Paragraflar
• Satir atlama

10
HTML Etiketleri- Basliklar

• Basliklar lth1gt ve lth6gt dahil olmak üzere aradaki
  tüm rakamlar kullanilarak tanimlanabilir. lth1gt en
  büyük puntoyu belirtirken, lth6gt ise en küçük
  puntoyu belirtir.

lth1gt Bu bir baslik lt/h1gt lth2gt Bu bir baslik
lt/h2gt lth3gt Bu bir baslik lt/h3gt lth4gt Bu bir
baslik lt/h4gt lth5gt Bu bir baslik lt/h5gt lth6gt Bu
bir baslik lt/h6gt
11
HTML Etiketleri- Paragraflar

• Paragraflar ltpgt etiketi ile belirtilir.

ltpgt Bu bir paragraf lt/pgt ltpgt Bu da baska bir
paragraf lt/pgt
NOT Etiketleri kapatmayi unutmayin!
ltpgtBu bir paragraf ltpgtBu da baska bir paragraf
12
HTML Etiketleri- Satir Atlama

• Satir atlamak için ltbrgt etiketi kullanilir. Ancak
  bu etiketin yeni bir paragraf açmadigini da
  unutmayiniz.
• Yorum satirlari HTML kaynak kodu içerisine
  programcilarin hangi satirin ne is gördügünü
  anlatmak için kullanilir. Bu satirlar, sayfa
  browser'da görüntülenirken dikkate alinmazlar.

ltpgtBu ltbrgtbir ltbrgtçok satirli paragraftir.lt/pgt
lt!-- Bu bir açiklama --gt
13
HTML Parametreler (Nitelikler)

• HTML etiketleri parametrelere sahip olabilir.
  Parametreler, HTML ögelerine, ek özellikler
  eklenmesini saglar. Parametreler daima isim/deger
  çiftleri arasinda gelir name"value".

lth1gt baslik belirtir. lth1 align"center"gt baslik
belirtmesinin yaninda, metinin ortalanacagini da
belirtir.
ltbodygt HTML'in body kismini belirtir. ltbody
bgcolor"yellow"gt Body kismini belirtmekle
beraber, arkaplan renginin de sari olacagini
belirtir.
14
HTML Metin Biçimlendirme

• HTML, metini koyu veya itelik yapmak için bir çok
  tanimlama biçimi barindirir.

Tag Açiklama -------
-------------------- ltbgt Koyu metin ltbiggt
Büyük metin ltemgt Vurgulanmis metin ltigt
Italik metin ltsmallgt Küçük metin ltstronggt
Güçlü metin ltsubgt Alt indis metini ltsupgt
Üst indis metini ltinsgt Alti çizili
metin ltdelgt Üstü çizili metin
15
HTML Özel Karakterler

• HTML içinde bazi karakterler ("lt" gibi) kaynak
  kodlarda yazilarak ekranda görüntülenmesi
  saglanamaz. Bu tip karakterleri görüntüleyebilmek
  için bazi özel karakterler kullanilir.

En Çok Kullanilan Özel Karakterler
Sonuç Açiklama Özel karakterleri Numarali Hali
  Fazladan bosluk nbsp 160
lt Küçüktür lt 60
gt Büyüktür gt 62
Ve amp 38
" Alinti quot 34
' apostorof  apos 39
16
HTML Baglantilar (Links)

• HTML baska sayfalara kendi üzerinden baglanti
  kurmak için hyperlink özelligini kullanilir.

ltagt Etiketi ve href parametresi HTML baska bir
dökümana link olusturmak için ltagt etiketini
kullanir. Örnekler lta href"http//www.sem.metu.
edu.tr" target"_blank"gtODTU-SEMlt/agt lta
href"mailtosem_at_metu.edu.tr"gtBize e-mail
göndermek için buraya tiklayin lt/agt
17
HTML Sayfa Içi Baglantilar

• Bazi durumlarda (özellikle uzun sayfalarda)
  sayfanin belirli bir bölümüne link vermek
  gerekebilir. Bunun için name"" özelliginden
  yararlaniriz. Böyle durumlarda href"" özelligi
  kullanilmaz.
• Öncelikle sayfa içinde baglanti verecegimiz yere
  giderek lta name"etiket"gtlt/agt seklinde yer
  imimizi belirtiyoruz. Böylece sayfanin bu kismini
  isaretledik. Simdi bu isarete link vermek için
  sayfa içerisinde baska bir yerde (en asagida ya
  da en yukarida olabilir) lta href"etiket"gt(metin
  )lt/agt seklinde isaretledigimiz yere link
  veriyoruz.

lta href"top"gtSayfa Basilt/agt
18
HTML Çerçeveler

• Çerçeveler sayesinde ayni tarayici penceresinde
  birden fazla HTML dökümani görüntüleyebilirsiniz.
  Her HTML dökümani bir çerçeve (frame) ve her
  çerçeve birbirinden bagimsiz olur.
• Html sayfalarinda ise Frame, Iframe, frameset,
  noframe etiketleri kullanilmaktadir.

?lthtmlgt ltframeset rows"25,50,25"gt ltframe
src"a.htm"gt ltframe src"b.htm"gt ltframe
src"c.htm"gt lt/framesetgt lt/htmlgt
?lthtmlgt ltframeset cols"25,75"gt ltframe
src"frame_a.htm"gt ltframe src"frame_b.htm"gt lt/
framesetgt ?lt/htmlgt
19
HTML Çerçeveler-iframe

• Iç içe çerçeveler çizmek iframe

lthtmlgt ltbodygt ltiframe srca.htm" width"200"
height"200"gtlt/iframegt ltpgtBazi tarayicilar
iframes desteklemiyor olabilirlt/pgt lt/bodygt lt/htm
lgt
20
HTML Tablolar

• HTML ile kenarlikli ve kenarliksiz tablolar
  yapabilirsiniz. Tablolar metinlerinizin ve
  resimlerinizin hizali olmasini saglar
• Tablolar lttablegt etiketi ile baslar. Tablolar
  lttrgt etiketi ile satirlara bölünür ve her satir
  da lttdgt etiketi ile sütunlara bölünür. Bir tablo
  hücresi metinler, resimler, listeler,
  paragraflar, formlar, yatay çizgiler, tablolar
  vs. içerebilir.

lttablegt Tablo ltthgt Tablo basligi lttrgt
Satir lttdgt Hücre ltcaptiongt Manset ltcolgroupgt
Hücre gruplari ltcolgt Sütun genisligi lttheadgt
Tablo basi lttbodygt Tablo body özelligi lttfootgt
Tablonun en alt kismi
21
HTML Tablolar
lttable border"1"gt lttrgt lttdgtsatir 1, hücre
1lt/tdgt lttdgtsatir 1, hücre 2lt/tdgt lt/trgt lttrgt lttdgtsa
tir 2, hücre 1lt/tdgt lttdgtsatir 2, hücre
2lt/tdgt lt/trgt lt/tablegt
lttable border"1"gt lttrgt ltthgtBasliklt/thgt ltthgtBaska
Basliklt/thgt lt/trgt lttrgt lttdgtsatir 2, hücre
1lt/tdgt lt/trgt lt/tablegt
22
HTML Listeleme

• Html sayfalarimizdaki yazilarimizi Sirali ,
  Sirasiz ve Tanimlama(Açiklama) olarak
  listelememizi saglar.
• Sirali Listeleme
• Sirasiz Listeleme
• Tanimlama Listeleri

?ltolgt ltligtKahvelt/ligt ltligtSütlt/ligt lt/olgt
ltulgt ltligtKahvelt/ligt ltligtSütlt/ligt lt/ulgt
ltdlgt ltdtgtKahvelt/dtgt ltddgt Soguk içeceklt/ddgt ltdtgtSüt
lt/dtgt lt/dlgt
23
HTML Resimler

• HTML sayfalariniza resim ekleyebilirsiniz.
  Sayfanizda bir resim görüntüleyebilmek için src
  parametresini kullaniriz.

ltimg src"resim yolu"gt ltimg src"dosyalar/banner.
jpg"gt ltimg src"http//www.metu.edu.tr/themes/odt
u/images/odtu-lang-en.png"gt ltimg src"home.gif"
alt"Ana Sayfa"gt
24
HTML Arka Plan

• HTML sayfalarinda arka plan (background)
  rengimizi veya arka plan resmimizi olusturmamizi
  saglar. "bgcolor" ve "background" kullanilan
  parametreleridir. bgcolor ile arka plan rengi,
  background ile de bir arka plan resimi
  belirtebilirsiniz.

ltbody bgcolor"000000"gt ltbody bgcolor"red"gt
ltbody background"ornekler/background.jpg"gt ltbody
background"http//www.ceng.metu.edu.tr/erman/tbm
m/logo3.gif"gt
25
HTML Formlar

• HTML Formlari kullanicinin klavye ile girdigi
  bilgileri islemek için kullanilir.

ltform action"test.php"
method"POST" name"testform"gt ltinput
type"hidden" name"count" value"3" /gt
Kullanici Adltinput type"text" name"username"
size"10" /gtltbr /gt Sifreltinput
type"password" name"pass" size"10" /gtltbr /gt
Cinsiyet ltinput type"radio" namecinsiyet"
value"fmale" /gtbayan ltinput type"radio"
namecinsiyet" value"male" /gtbay ltbr /gt
Hangi Müzisyenleri Seviyorsunuz ?ltbr
/gt ltinput type"checkbox" name"music"
value"nazan" /gtNazan Oncelltbr /gt ltinput
type"checkbox" name"music" value"leman"
/gtLeman Sanltbr /gt ltinput type"checkbox"
name"music" value"duman" /gtDumanltbr /gt
File Seçltinput type"file" name"selectFile"
/gtltbr /gt Mesaj Yazltbr /gtlttextarea
name"message" cols20 rows20gt ltinput
type"submit" value"Göndergt
lt/formgt
26
HTML Media

• Video
• Avi, Wmv, Mpeg, Mov, ram, swf, mp4
• Ses
• Midi, ram, wav, wma, mp3

27
HTML Media-SES
lthtmlgt ltbodygt ltpgtlta href"song.mp3"gtPlay
Songlt/agtlt/pgt ltpgtlta href"liar.wav"gtPlay
Textlt/agtlt/pgt ltscript type"text/javascript
src"http//mediaplayer.yahoo.com/js"gtlt/scriptgt lt
/bodygt lt/htmlgt
lthtmlgt ltbodygt ltaudio controls"controls"gt
ltsource src"song.mp3" type"audio/mpeg" /gt
ltsource src"song.ogg" type"audio/ogg" /gt ltembed
height"50px" width"100px" src"song.mp3"
/gt lt/audiogt lt/bodygtlt/htmlgt
28
HTML Media-VIDEO
lthtmlgt ltbodygt ltvideo width"320" height"240"
controls"controls"gt ltsource src"movie.ogg"
type"video/ogg" /gt ltsource src"movie.mp4"
type"video/mp4" /gt ltsource src"movie.webm"
type"video/webm" /gt ltobject width"320"
height"240" src"movie.mp4"gt ltembed width"320"
height"240" src"movie.swf"gt Your browser does
not support video lt/embedgt lt/objectgt lt/videogt lt/b
odygt lt/htmlgt
29
HTML Media-VIDEO

• Embed, Object etiketleri

ltembed src"intro.swf" height"200" width"200"/gt
ltobject data"intro.swf" height"200"
width"200"/gt ltiframe width"420"
height"345" src"http//www.youtube.com/embed/XGS
y3_Czz8k"gt lt/iframegt