Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads.
hakanbabac.net
HTML
Web Tasarımı ve Programlama
html
hakanbabac.net
İ Ç E R İ K // HTML
• Internet Ortamı ve Web Tasarımı
• Temel HTML Etiketleri
• Listeleme Etiketleri
•...
html
hakanbabac.net
INTERNET ORTAMI VE WEB TASARIMI
• Alan Adı (Domain)
3
IP adresi diye tabir edilen, bilgisayarların bir...
html
hakanbabac.net
INTERNET ORTAMI VE WEB TASARIMI
• Web Alanı / Barındırma (Hosting)
4
Hazırlanan web sitelerinin belirl...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
 HTML (Hypertext Markup Language), web sayfaları
hazırlamak için kullanılan bir...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
 HTML komutları “<” ve “>” işaretleri arasına yazılır.
<etiketadi>……</etiketadi...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
 HTML dosyaları sunucu bilgisayarın sabit diskinde .html
ya da .htm uzantısı il...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <html>
 HTML kodlarının yazımına başladığımızı gösteren
etikettir.
8
 Tüm HT...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
Sayfa ile ilgili bilgilerin bulunduğu
 sayfa başlığı (title),
 link ö...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
• NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi
bilgileri içerir.
<...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
• HTTP-EQUIV: İçinde yer aldığı sayfanın, web server
tarafından ziyaret...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
<meta name="robots" content="all veya none">
Hazırladığımız sayfanın ar...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
• <title>: Sayfanın tarayıcıda görünecek başlığının ne
olacağını belirl...
html
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <body>
 HTML belgesinin tüm içeriğinin yer aldığı bölümdür.
 Bu bölümde yer ...
html
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ol>
 Sıralı liste oluşturmak için kullanılır.
 Kelime işlemci programındaki ...
html
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ol>
 type parametresi kullanarak listenin rakamla mı
harfle mi başlayacağını ...
html
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ol>
 Sıralamanın her zaman “1” den veya “A” dan
başlamasının istenmediği duru...
html
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ul>
 Madde imli liste oluşturmak için kullanılır.
 <ul> etiketi, <li> etiket...
html
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ul>
 type parametresi kullanarak madde iminin şeklini
belirleyebiliriz.
19
o ...
html
hakanbabac.net
LİSTELEME ETİKETLERİ
• <li>
 Liste oluşturmak için liste elemanlarını belirtmede
kullanılan etikettir...
html
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <hx>
 Başlık eklemek için kullanılan etiketlerdir.
 “x” ifadesi, 1’den ...
html
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <hx>
• align
 Metin / Nesne hizalama için kullanılan parametredir.
left ...
html
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <b>
 İstenilen metni kalın (bold) olarak yazmak için
kullanılır.
 <b>…<...
html
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <u>
 İstenilen metni altı çizili (underline) olarak yazmak
için kullanıl...
html
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <i>, <I>
 İstenilen metni eğik (italik) olarak yazmak için
kullanılır.
...
html
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <br>
 Bir alt satıra geçmek için kullanılır.
 Bu etiket kapatılmaz!!!
2...
html
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <p>
 Paragraf oluşturmak için kullanılır.
 <p>…</p> etiketleri arasında...
html
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <font>
 Metinlerin renk, boyut, yazı tipi gibi özelliklerini
değiştirmek...
html
hakanbabac.net
GÖRÜNÜM DÜZENLEME ETİKETLERİ
• <hr>
 Sayfaya yatay çizgi çizmek için kullanılan etikettir.
 Bu etike...
html
hakanbabac.net
BAĞLANTI (KÖPRÜ) OLUŞTURMA
• <a href>…..</a>
 Sayfa içi/dışı tüm bağlantılar <a href>…</a> etiketleri...
html
hakanbabac.net
BAĞLANTI (KÖPRÜ) OLUŞTURMA
• Sayfa İçi Bağlantı
 Öncelikli olarak sayfa içi bağlantı verilecek kısım
...
html
hakanbabac.net
BAĞLANTI (KÖPRÜ) OLUŞTURMA
• E-Posta Adresine Bağlantı
 <a href=‘‘mailto:e-posta adresi”>….</a> komut...
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
 Sayfaya tablo eklemek için kullanılır.
 </table> etiketiyle sonlandırı...
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <tr>
 Tabloda satır oluşturmak için kullanılır.
34
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <td>
 Tabloda sütun oluşturmak için kullanılır.
35
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• border
 Hücrenin ve tablonun etrafındaki çerçevenin
kalınlığını ayarla...
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• bordercolor
 Çerçevenin renginin ayarlamak için kullanılır.
37
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• bgcolor
 Hücre/hücrelerin arkaplan renginin ayarlamak için
kullanılır....
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• background
 Tablonun veya istenilen hücrenin arka plânına resim
ekleme...
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• width
 Tablonun veya hücrenin pixel cinsinden genişliğini
belirlemek i...
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• colspan
 Aynı satırdaki hücreleri birleştirmek için kullanılır.
41
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• rowspan
 Aynı sütundaki hücreleri birleştirmek için kullanılır.
42
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• cellspacing
 Hücrelerin, birbirlerinden ve tablo sınırlarından
uzaklığ...
html
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• cellpadding
 Hücrelerin içindeki verilerin, hücre sınırlarından
uzaklı...
html
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
45
• Resim Ekleme
 Resim eklemek için kullanılan html etiketi <img src>
dir.
 s...
html
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
46
PARAMETRE GÖREVİ
width Eklenilecek resmin pixel cinsinden genişliğini gösterir...
html
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
47
• Resim Ekleme
html
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
48
• Ses Ekleme
3 farklı yolla ses eklenebilir:
 Sesi arkaplan olarak ekleyebili...
html
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
49
• Ses Ekleme
 Ses dosyasına link vererek de ses ekleyebiliriz.
 Linke tıklan...
html
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
50
• Ses Ekleme
 Ses dosyasını sayfa içine gömerek de ses
ekleyebiliriz.
Ses dos...
html
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
51
• Video Ekleme
 Video dosyasına link vererek video ekleyebiliriz.
 Linke tık...
html
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
52
• Video Ekleme
 Video dosyasını sayfa içine gömerek de video
ekleyebiliriz.
V...
html
hakanbabac.net
ÇERÇEVELER
53
Çerçeveler; bir tarayıcı penceresini birden fazla pencereye
bölüp her bir pencere içeris...
html
hakanbabac.net
ÇERÇEVELER
• <frameset>
 Çerçeve oluşturmak için kullanılan etikettir.
 Tarayıcı penceresinin kaç pa...
html
hakanbabac.net
ÇERÇEVELER
• <frameset>
• cols
 Ekranı dikey olarak (sütunlar halinde) tanımlanan
parçalara bölmek iç...
html
hakanbabac.net
ÇERÇEVELER
• <frameset>
• rows
 Ekranı yatay olarak (satırlar halinde) tanımlanan
parçalara bölmek iç...
html
hakanbabac.net
ÇERÇEVELER
• <frame>
 <frameset> etiketi ile oluşturulan çerçevelerin içinde
gösterilecek sayfaların ...
html
hakanbabac.net
ÇERÇEVELER
• İç İçe Çerçeve Oluşturma
 İç içe kullanılan <frameset> etiketleri ile aynı pencere
içind...
html
hakanbabac.net
ÇERÇEVELER
• <iframe>
 Hazırlamakta olduğunuz sayfanın herhangi bir
yerinde başka bir sayfa görüntüle...
html
hakanbabac.net
ÇERÇEVELER
• <iframe>
60
html
hakanbabac.net
STİL ŞABLONLARI (CSS)
61
Stil Şablonları (CSS/Cascading Style Sheets), hazırlamakta
olduğumuz sayfalar...
html
hakanbabac.net
STİL ŞABLONLARI (CSS)
62
• Yerel CSS
html
hakanbabac.net
STİL ŞABLONLARI (CSS)
63
• Genel CSS
html
hakanbabac.net
STİL ŞABLONLARI (CSS)
64
• Harici CSS
stil.css
html
hakanbabac.net
STİL ŞABLONLARI (CSS)
65
Stil Şablonları ile Çalışma (CSS),
bir sonraki modülde ayrıntılı olarak
anlat...
html
hakanbabac.net
FORMLAR
66
Etkileşimli Web sayfaları hazırlamanın yolu FORM
kullanmaktan geçer. (e-bankacılık, e-ticar...
html
hakanbabac.net
FORMLAR
• <form>
 Form oluşturmayı sağlayan tüm form elemanları,
<form>….</form> etiketleri arasında ...
html
hakanbabac.net
FORMLAR
• <form>
• method
68
Ayrıntılı bilgi için tıklayın…
http://www.yazilimdevi.com/Makaleler-742-h...
html
hakanbabac.net
FORMLAR
• <form>
• method
69
Ayrıntılı bilgi için tıklayın…
http://www.yazilimdevi.com/Makaleler-742-h...
html
hakanbabac.net
FORMLAR
70
• <input>
 Form içinde bilgi almak için kullanılır.
 Girişi yapılacak veri türü type para...
html
hakanbabac.net
FORMLAR
71
PARAMETRE GÖREVİ
type Girilecek olan elemanın türünü belirtmek için kullanılır.
src
Eğer bi...
html
hakanbabac.net
FORMLAR
72
• <input>
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
73
• Checkbox
 Forma onay kutuları eklemek için kullanılır.
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
74
• Radio
 Kullanıcının verilen seçeneklerden sadece bir
tanesini seç...
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
75
• Radio
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
76
• Text
 Forma, tek satırlık metin alanı eklemek için kullanılır.
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
77
• Password
 Forma, şifreli alanlar eklemek için kullanılır.
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
78
• Textarea
 Forma birden fazla satırdan oluşan alanlar eklemek
için...
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
79
• Select (Açılır Menü)
 Forma açılır menü eklemek için kullanılır.
...
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
80
• Select (Açılır Menü)
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
81
• Reset
 Üzerine gelip tıklandığı zaman, form içeriğini
temizleyip ...
html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
82
• Submit
 Form içine girilen bilgilerin sunucuya gönderilmesini
sağ...
html
hakanbabac.net
Şimdilik bu kadar…
web tasarımı ve programlamayla ilgili bir sonraki yayın
C S S
83
html
hakanbabac.net
İ L E T İ Ş İ M
84
iletisim@hakanbabac.net
hakanbabac.net
Upcoming SlideShare
Loading in …5
×

HTML

1,023 views

Published on

HTML ile web teknolojileri geliştirme...

Published in: Internet
  • Be the first to comment

  • Be the first to like this

HTML

  1. 1. hakanbabac.net HTML Web Tasarımı ve Programlama
  2. html hakanbabac.net İ Ç E R İ K // HTML • Internet Ortamı ve Web Tasarımı • Temel HTML Etiketleri • Listeleme Etiketleri • Metin Düzenleme Etiketleri • Bağlantı (Köprü) Oluşturma • Tablolarla Çalışma • Çoklu Ortam Araçları • Çerçeveler • Stil Şablonları (CSS) • Formlar 2
  3. html hakanbabac.net INTERNET ORTAMI VE WEB TASARIMI • Alan Adı (Domain) 3 IP adresi diye tabir edilen, bilgisayarların birbirini görmesini sağlayan nümerik sisteminin daha kolaylaştırılmış ve rahatça girilebilmesi için kelimelerle ifade edilen halidir. www.alanismi.alanturu.ulkekodu  gov : Hükümet kurumları / government  edu : Eğitim kurumları / education  org : Ticari olmayan kuruluşlar / organization  com : Ticari kuruluşlar / company  mil : Askeri kurumlar / military  net : Servis sunucular / network  ac : Akademik kuruluşlar / academic  int : Uluslararası kuruluşlar / international
  4. html hakanbabac.net INTERNET ORTAMI VE WEB TASARIMI • Web Alanı / Barındırma (Hosting) 4 Hazırlanan web sitelerinin belirlenen alan isimlerine göre internet ortamında yayımlanmasını sağlayan hizmet türüdür.  Bu hizmet, hosting firmaları tarafından belirli süreliğine sağlanır.  Server (sunucu) bilgisayarlar, hosting amacıyla kullanılan gelişmiş donanımsal özelliklere sahip olan ve birçok kullanıcıya aynı anda hizmet veren bilgisayarlardır.
  5. html hakanbabac.net HTML TEMEL ETİKETLERİ  HTML (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir işaretleme dilidir. 5  HTML komutları; herhangi bir metin düzenleme editöründe yazılabileceği gibi, çeşitli web tasarım editörleriyle de oluşturulabilir.  HTML komutları etiketlerden (tag) oluşur.
  6. html hakanbabac.net HTML TEMEL ETİKETLERİ  HTML komutları “<” ve “>” işaretleri arasına yazılır. <etiketadi>……</etiketadi>, <tag>…..</tag>  HTML etiketleri yazılırken Türkçe karakterler kullanılmamalıdır. (ş, ç, ö, ü, ı, ğ)  BÜYÜK-küçük harf duyarlı değildir. <body>….</BODY> veya <Html>….</html>  Açılan bir etiket mutlaka kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır ! ! ! 6
  7. html hakanbabac.net HTML TEMEL ETİKETLERİ  HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır.  Her web sayfası; <html> <head> <body> etiketi içermelidir. 7  Bu dizilim kuralına uymadığınız takdirde bile sayfanız görüntülenebilir ancak biçimlendirme sorunları yaşayacağınızı ve ziyaretçilerinizin sayfa içerisinde gezinirken sorun yaşayabileceğini unutmayın !!!
  8. html hakanbabac.net HTML TEMEL ETİKETLERİ • <html>  HTML kodlarının yazımına başladığımızı gösteren etikettir. 8  Tüm HTML kodları <html>…</html> arasında yer alır.  </html> ile HTML kodlarının yazımının bittiği anlaşılır.  Bu etiketin hiçbir parametresi yoktur.
  9. html hakanbabac.net HTML TEMEL ETİKETLERİ • <head> Sayfa ile ilgili bilgilerin bulunduğu  sayfa başlığı (title),  link özellikleri,  siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan meta etiketleri bölümüdür. Kullanılacak Parametreler 9 name Author, description ve keywords özellikleri tanımlanır. http-equiv Refresh, expires, content ve content-style-type özellikleri Size Yazının boyu belirlenir.
  10. html hakanbabac.net HTML TEMEL ETİKETLERİ • <head> • NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir. <meta name="author" content=«aosbilisim"> <meta name="description« content="sayfanın tanımını yazınız"> <meta name ="description" content ="Bu sayfa, Web Tasarımı ve Programlama dersi modülleri için hazırlanmıştır. "> <meta name="keywords" content="Siteniz arama motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız buraya yazınız."> 10
  11. html hakanbabac.net HTML TEMEL ETİKETLERİ • <head> • HTTP-EQUIV: İçinde yer aldığı sayfanın, web server tarafından ziyaretçiye gönderilmesinde oluşturulacak karşılık başlığı bölümünde yer alacak bilgiler içerir. <meta http-equiv=Content-Type content="text/htm; charset=windows-1254"> <meta http-equiv=Content-Type content="text/htm; charset=iso-8859-9"> <meta http-equiv=Content-Type content="text/htm; charset=utf-8"> 11
  12. html hakanbabac.net HTML TEMEL ETİKETLERİ • <head> <meta name="robots" content="all veya none"> Hazırladığımız sayfanın arama motorlarının robotları tarafından taranmasına izin vermek veya engellemek için kullanılır.  İzin  all,  Engelleme  none kullanılır. Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez. 12
  13. html hakanbabac.net HTML TEMEL ETİKETLERİ • <head> • <title>: Sayfanın tarayıcıda görünecek başlığının ne olacağını belirlemek için kullanılır. 13
  14. html hakanbabac.net HTML TEMEL ETİKETLERİ • <body>  HTML belgesinin tüm içeriğinin yer aldığı bölümdür.  Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir. 14 bgcolor Sayfanın arkaplân rengini belirlemek için kullanılır. background Arkaplanda kullanılmak istenilen resmi belirlemek için kullanılır. link Sayfada kullanılacak linklerin rengini belirlemek için kullanılır. alink Sayfada herhangi bir linke tıklandığı zaman oluşacak rengi belirlemek için kullanılır. vlink Sayfada önceden ziyaret edilmiş linklerin rengini belirlemek için kullanılır.
  15. html hakanbabac.net LİSTELEME ETİKETLERİ • <ol>  Sıralı liste oluşturmak için kullanılır.  Kelime işlemci programındaki numaralandırma işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir.  <ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır. 15 1. Elma 2. Armut 3. Kavun
  16. html hakanbabac.net LİSTELEME ETİKETLERİ • <ol>  type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını belirleyebiliriz. 16 a A. Elma B. Armut C. Kavun a. b. c. i I. Elma II. Armut III. Kavun i. ii. iii.
  17. html hakanbabac.net LİSTELEME ETİKETLERİ • <ol>  Sıralamanın her zaman “1” den veya “A” dan başlamasının istenmediği durumlarda start parametresi kullanılır. 17 C. Elma D. Armut E. Kavun
  18. html hakanbabac.net LİSTELEME ETİKETLERİ • <ul>  Madde imli liste oluşturmak için kullanılır.  <ul> etiketi, <li> etiketi ile birlikte kullanılmalıdır. 18 • Elma • Armut • Kavun
  19. html hakanbabac.net LİSTELEME ETİKETLERİ • <ul>  type parametresi kullanarak madde iminin şeklini belirleyebiliriz. 19 o Elma • Armut  Kavun
  20. html hakanbabac.net LİSTELEME ETİKETLERİ • <li>  Liste oluşturmak için liste elemanlarını belirtmede kullanılan etikettir. 20  Sıralamanın hangi şekilde olacağını <ol> ve <ul> etiketleri belirler.
  21. html hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <hx>  Başlık eklemek için kullanılan etiketlerdir.  “x” ifadesi, 1’den 6’ya kadar değer almaktadır.  x değeri azaldıkça yazı büyür. 21
  22. html hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <hx> • align  Metin / Nesne hizalama için kullanılan parametredir. left  sola right  sağa center  ortaya justify  iki yana yasla 22
  23. html hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <b>  İstenilen metni kalın (bold) olarak yazmak için kullanılır.  <b>…</b> etiketleri arasında yazılı olan metni kalın yapar. 23 Boş zaman yoktur boşa geçen zaman vardır. Tagore
  24. html hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <u>  İstenilen metni altı çizili (underline) olarak yazmak için kullanılır.  <u>…</u> etiketleri arasında yazılı olan metnin altını çizili yapar. 24 Boş zaman yoktur boşa geçen zaman vardır. Tagore
  25. html hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <i>, <I>  İstenilen metni eğik (italik) olarak yazmak için kullanılır.  <i>…</i> etiketleri arasında yazılı olan metni eğik yapar. 25 Boş zaman yoktur boşa geçen zaman vardır. Tagore
  26. html hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <br>  Bir alt satıra geçmek için kullanılır.  Bu etiket kapatılmaz!!! 26 Ey Türk Gençliği! Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini, ilelebet, muhafaza ve müdafaa etmektir.
  27. html hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <p>  Paragraf oluşturmak için kullanılır.  <p>…</p> etiketleri arasında yazılı olan metni ayrı bir paragraf içinde gösterir. 27
  28. html hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <font>  Metinlerin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır.  size, color ve face parametreleri ile kullanılabilir. size  yazı büyüklüğü color  yazı rengi face  yazı tipi 28 <font face="Algerian" size="7" color="purple">Merhaba</font>
  29. html hakanbabac.net GÖRÜNÜM DÜZENLEME ETİKETLERİ • <hr>  Sayfaya yatay çizgi çizmek için kullanılan etikettir.  Bu etiket kapatılmaz!!!  size, width ve align parametreleri ile kullanılabilir. size  çizgi kalınlığı width  çizgi uzunluğu align  çizgi konumu (hizalama) 29 <hr size=“6” width=”200” align=“center”>
  30. html hakanbabac.net BAĞLANTI (KÖPRÜ) OLUŞTURMA • <a href>…..</a>  Sayfa içi/dışı tüm bağlantılar <a href>…</a> etiketleri kullanılarak tanımlanır. • Sayfa Dışı Bağlantı 30 <a href=‘‘baglanti_adresi’’>metin_nesne</a> <a href=‘‘http://www.aosbilisim.net’’>AOSBilişim</a> AOSBilişim <a href=‘‘index.html’’>Ana Sayfa</a> Ana Sayfa
  31. html hakanbabac.net BAĞLANTI (KÖPRÜ) OLUŞTURMA • Sayfa İçi Bağlantı  Öncelikli olarak sayfa içi bağlantı verilecek kısım adlandırılmalıdır (çapa işlemi).  Adlandırma, <a name="....">...</a> etiketi kullanılarak yapılır.  Ardından bağlantı verilecek alana gelinip <a href =#....">...</a> etiketi köprü tanımlanır. 31 <a name="ornek">Hyper Text Markup Language</a> <a href="#ornek">Html Nedir?</a> Html Nedir? Hyper Text Markup Language
  32. html hakanbabac.net BAĞLANTI (KÖPRÜ) OLUŞTURMA • E-Posta Adresine Bağlantı  <a href=‘‘mailto:e-posta adresi”>….</a> komutu kullanılarak 32 <a href="mailto: [email protected]">e-posta göndermek için tıklayın.</a> e-posta göndermek için tıklayın.
  33. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table>  Sayfaya tablo eklemek için kullanılır.  </table> etiketiyle sonlandırılır.  Satır ve sütun tanımlamaları için; <table> içinde <tr> ve <td> etiketleri de kullanılmalıdır. 33
  34. html hakanbabac.net TABLOLARLA ÇALIŞMA • <tr>  Tabloda satır oluşturmak için kullanılır. 34
  35. html hakanbabac.net TABLOLARLA ÇALIŞMA • <td>  Tabloda sütun oluşturmak için kullanılır. 35
  36. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • border  Hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.  Border=0 olduğu zaman çerçeve tarayıcıda görünmez. 36 0
  37. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • bordercolor  Çerçevenin renginin ayarlamak için kullanılır. 37
  38. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • bgcolor  Hücre/hücrelerin arkaplan renginin ayarlamak için kullanılır. 38
  39. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • background  Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır. 39
  40. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • width  Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır. • height  Tablonun veya hücrenin pixel cinsinden yüksekliğini belirlemek için kullanılır. 40
  41. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • colspan  Aynı satırdaki hücreleri birleştirmek için kullanılır. 41
  42. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • rowspan  Aynı sütundaki hücreleri birleştirmek için kullanılır. 42
  43. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • cellspacing  Hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır. 43 10
  44. html hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • cellpadding  Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığını belirlemek için kullanılır. 44 0 !!! Tabloda boş hücre kullanılacaksa td etiketi arasındaa &nbsp; (boşluk) kullanılmalıdır. Aksi takdirde çizgiler gözükmez !!!
  45. html hakanbabac.net ÇOKLU ORTAM ARAÇLARI 45 • Resim Ekleme  Resim eklemek için kullanılan html etiketi <img src> dir.  src, ekleyeceğimiz resmin bulunduğu dizini gösterir.  Bu etiket kapatılmaz !!! <img src=‘‘resim1.jpg’’>Gökyüzü Sayfa içine eklenecek resmin kaynak adresi
  46. html hakanbabac.net ÇOKLU ORTAM ARAÇLARI 46 PARAMETRE GÖREVİ width Eklenilecek resmin pixel cinsinden genişliğini gösterir. height Eklenilecek resmin pixel cinsinden yüksekliğini gösterir. border Eklenilecek olan resme bir çerçeve çizilip kalınlığını belirlemek için kullanılır. Border=‘‘0’’olursa çerçeve çizilmez. Buradaki sayı arttıkça çerçevenin kalınlığı da artar. alt Fare ile resmin üzerine gelindiğinde ekranda görüntülenmesi istenen metni belirlemek için kullanılır. align Resim hizalamasını belirtmek için kullanılır. • Resim Ekleme
  47. html hakanbabac.net ÇOKLU ORTAM ARAÇLARI 47 • Resim Ekleme
  48. html hakanbabac.net ÇOKLU ORTAM ARAÇLARI 48 • Ses Ekleme 3 farklı yolla ses eklenebilir:  Sesi arkaplan olarak ekleyebiliriz.  Böylelikle sayfa tarayıcı tarafından yüklendiği anda ses dosyası arkaplanda çalışmaya başlayacaktır. <bgsound src=‘‘muzik.wav” loop=‘‘infinite”> Sayfa içine eklenecek sesin kaynak adresi Müziğin tekrar sayısı infinite  sayfa kapanana kadar tekrar etmesini salar
  49. html hakanbabac.net ÇOKLU ORTAM ARAÇLARI 49 • Ses Ekleme  Ses dosyasına link vererek de ses ekleyebiliriz.  Linke tıklandığı zaman bilgisayarda bulunan ses dosyası yürütücü programı çalışacak ve istenen ses dosyasının çalması sağlanacaktır
  50. html hakanbabac.net ÇOKLU ORTAM ARAÇLARI 50 • Ses Ekleme  Ses dosyasını sayfa içine gömerek de ses ekleyebiliriz. Ses dosyasının çalışma zamanını belirler. true  Ses dosyası, sayfa yüklendiği anda çalışacaktır. !!! mp3, wav, aif, ra, mid yaygın olarak kullanılan ses dosyası türlerindendir. !!!
  51. html hakanbabac.net ÇOKLU ORTAM ARAÇLARI 51 • Video Ekleme  Video dosyasına link vererek video ekleyebiliriz.  Linke tıklandığı zaman bilgisayarda bulunan video oynatıcı çalışacak ve istenen video dosyasının görüntülenmesi sağlanacaktır.
  52. html hakanbabac.net ÇOKLU ORTAM ARAÇLARI 52 • Video Ekleme  Video dosyasını sayfa içine gömerek de video ekleyebiliriz. Videonun çalışma zamanını belirler. true  Video, sayfa yüklendiği anda çalışacaktır. !!! mpeg, avi, mov, wmv, asf yaygın olarak kullanılan video türlerindendir. !!!
  53. html hakanbabac.net ÇERÇEVELER 53 Çerçeveler; bir tarayıcı penceresini birden fazla pencereye bölüp her bir pencere içerisinde farklı içerikler gösterilmesini; sağlar.  Her çerçevenin kendine ait bir URL adresi vardır.  Her çerçeveye bir isim verilebilir.  Çerçeveler kullanıcı tarafından verilecek ölçülerle boyutlandırılabileceği gibi otomatik olarak da boyutlanabilme özelliğine sahiptir.
  54. html hakanbabac.net ÇERÇEVELER • <frameset>  Çerçeve oluşturmak için kullanılan etikettir.  Tarayıcı penceresinin kaç parçaya bölüneceği (çerçeve sayısı) ve bu çerçevelerin boyutları belirlenir. 54 Çerçevelerden oluşan bir sayfanın normal bir HTML belgesinden farkı; içeriğinde <body> etiketi yerine, <frameset> etiketini kullanmasıdır.
  55. html hakanbabac.net ÇERÇEVELER • <frameset> • cols  Ekranı dikey olarak (sütunlar halinde) tanımlanan parçalara bölmek için kullanılır.  Sütun genişlikleri pixel veya %’lik olarak belirlenir.  Sütun sayısı, çerçeve sayısını belirleyici niteliktedir. 55 Çerçeve içlerinin kaynağını tanımlamak için kullanılır.
  56. html hakanbabac.net ÇERÇEVELER • <frameset> • rows  Ekranı yatay olarak (satırlar halinde) tanımlanan parçalara bölmek için kullanılır.  Satır yükseklikleri pixel veya %’lik olarak belirlenir. 56 Çerçeve içlerinin kaynağını tanımlamak için kullanılır.
  57. html hakanbabac.net ÇERÇEVELER • <frame>  <frameset> etiketi ile oluşturulan çerçevelerin içinde gösterilecek sayfaların belirlenmesi için kullanılır. 57 PARAMETRE GÖREVİ name Çerçevenin adını gösterir. resize / noresize Çerçeve boyutunun değiştirilip değiştirilemeyeceğini gösterir. scrolling Çerçevenin içeriğinin ekrana sığmadığı durumlarda, kaydırma çubuğu kullanılıp kullanılmayacağını gösterir. (auto / yes / no) marginheight Sayfadaki ilk nesnenin üst kısımdan uzaklığını gösterir. marginwidth Sayfadaki ilk nesnenin sol kısımdan uzaklığını gösterir. src Çerçeve içinde gösterilecek nesnenin URL adresini gösterir.
  58. html hakanbabac.net ÇERÇEVELER • İç İçe Çerçeve Oluşturma  İç içe kullanılan <frameset> etiketleri ile aynı pencere içinde yatay ve dikey çerçevelerin birlikte kullanımı sağlanır. 58
  59. html hakanbabac.net ÇERÇEVELER • <iframe>  Hazırlamakta olduğunuz sayfanın herhangi bir yerinde başka bir sayfa görüntülemek istediğiniz zaman kullanılabilen, bir iç çerçeve oluşturmaya yarayan etikettir. 59 PARAMETRE GÖREVİ name İç çerçevenin adını gösterir. frameborder İç çerçeve kenarlığının olup olmayacağını gösterir. scrolling İç çerçevenin içeriğinin ekrana sığmadığı durumlarda, kaydırma çubuğu kullanılıp kullanılmayacağını gösterir. (auto / yes / no) height İç çerçevenin yüksekliğini gösterir. width İç çerçevenin genişliğini gösterir. src İç çerçeve içinde gösterilecek nesnenin URL adresini gösterir.
  60. html hakanbabac.net ÇERÇEVELER • <iframe> 60
  61. html hakanbabac.net STİL ŞABLONLARI (CSS) 61 Stil Şablonları (CSS/Cascading Style Sheets), hazırlamakta olduğumuz sayfalar için istenildiği zaman kullanılmak üzere şablonlar oluşturmaya yarar.  CSS kodlarının en önemli özelliklerinden birisi farklı türlerde kullanılabilmesidir.  İsteğe göre tek bir öğeye, tüm sayfaya veya site içerisinde kullanılan tüm html dosyalarına etki edebilme özelliğine sahiptir. Bu özellikler Yerel, Genel ve Harici CSS olarak adlandırılmaktadır.
  62. html hakanbabac.net STİL ŞABLONLARI (CSS) 62 • Yerel CSS
  63. html hakanbabac.net STİL ŞABLONLARI (CSS) 63 • Genel CSS
  64. html hakanbabac.net STİL ŞABLONLARI (CSS) 64 • Harici CSS stil.css
  65. html hakanbabac.net STİL ŞABLONLARI (CSS) 65 Stil Şablonları ile Çalışma (CSS), bir sonraki modülde ayrıntılı olarak anlatılacaktır.
  66. html hakanbabac.net FORMLAR 66 Etkileşimli Web sayfaları hazırlamanın yolu FORM kullanmaktan geçer. (e-bankacılık, e-ticaret, e-eğitim…) Formlar, kullanıcıdan veri (bilgi) almak için düzenlenir. HTML, yalnızca kullanıcının forma yazdığı verileri kaydeder; onları bir programlama dilinin yaptığı gibi işleyemez !!!
  67. html hakanbabac.net FORMLAR • <form>  Form oluşturmayı sağlayan tüm form elemanları, <form>….</form> etiketleri arasında yer alır. 67 <form ACTION=‘‘url’’ METHOD= ‘‘get / post’’ TARGET=‘‘pencere’’> … </form> Formdan girilecek olan bilgilerin değerlendirileceği dosyanın URL adresi Formdan girilecek olan bilgilerin değerlendirici dosyaya gönderim metodu Hedef adresin tarayıcıda gösterileceği pencere GET : Gönderilen veriler adres çubuğunda gösterilir. POST : Gönderilen veriler gizli kalır. <form ACTION=‘‘mailto:[email protected]’’ METHOD= ‘‘post’’ TARGET=‘‘_blank’’>
  68. html hakanbabac.net FORMLAR • <form> • method 68 Ayrıntılı bilgi için tıklayın… http://www.yazilimdevi.com/Makaleler-742-http-get-ve-post-yontemleri.aspx GET POST
  69. html hakanbabac.net FORMLAR • <form> • method 69 Ayrıntılı bilgi için tıklayın… http://www.yazilimdevi.com/Makaleler-742-http-get-ve-post-yontemleri.aspx GET POST
  70. html hakanbabac.net FORMLAR 70 • <input>  Form içinde bilgi almak için kullanılır.  Girişi yapılacak veri türü type parametresi ile belirlenir. Varsayılan veri türü text(metin) tir.  Bu etiket kapatılmaz !!! <INPUT ALIGN=‘‘hizalama’’ MAXLENGTH=uzunluk NAME=‘‘isim’’ SIZE=boyut SRC=‘‘adres’’ TYPE=‘‘tip’’ VALUE=‘‘değer’’>
  71. html hakanbabac.net FORMLAR 71 PARAMETRE GÖREVİ type Girilecek olan elemanın türünü belirtmek için kullanılır. src Eğer bir resim dosyası kullanılmışsa görüntülenmesi istenilen resim dosyasının adresini belirtmek için kullanılır. align Elemanın sayfada konumlanacağı yeri belirlemek için kullanılır. (left / right / center) name Girilecek olan verinin değişken ismini belirlemek için kullanılır. maxlength Girilecek olan verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılır. Size Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılır. Varsayılan değeri 20‘dir. checked Bir seçim kutusu kullanıldığı durumlarda bu kutuların işaretlenmiş olarak görüntülenmesini sağlamak için kullanılır. Sadece radio ve checkbox elemanları için kullanılır. disabled Veri girişlerini engellemek için kullanılır. • <input>
  72. html hakanbabac.net FORMLAR 72 • <input>
  73. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 73 • Checkbox  Forma onay kutuları eklemek için kullanılır.
  74. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 74 • Radio  Kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır.  Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin aynı olması gerekmektedir.  Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir.  Radio düğmelerinin alacağı değerler Value seçeneğinde belirlenir.
  75. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 75 • Radio
  76. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 76 • Text  Forma, tek satırlık metin alanı eklemek için kullanılır.
  77. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 77 • Password  Forma, şifreli alanlar eklemek için kullanılır.
  78. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 78 • Textarea  Forma birden fazla satırdan oluşan alanlar eklemek için kullanılır.  Rows (satır) ve cols (sütun) tanımlamaları ile, metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenir.
  79. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 79 • Select (Açılır Menü)  Forma açılır menü eklemek için kullanılır.  Listbox(liste kutusu)  drop-down list(aşağı açılır liste) şeklinde iki farklı türde seçim kutusu oluşturulabilir.  Liste elemanları, <option> etiketi ile belirlenir. drop-down list listbox
  80. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 80 • Select (Açılır Menü)
  81. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 81 • Reset  Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlar. <input type=‘‘reset’’ value=‘‘Temizle’’ >
  82. html hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) 82 • Submit  Form içine girilen bilgilerin sunucuya gönderilmesini sağlamak için kullanılır. <input type=‘‘submit’’ value=‘‘Gönder’’ >
  83. html hakanbabac.net Şimdilik bu kadar… web tasarımı ve programlamayla ilgili bir sonraki yayın C S S 83
  84. html hakanbabac.net İ L E T İ Ş İ M 84 [email protected] hakanbabac.net
www.ukrterminal.kiev.ua

www.techno-centre.niko.ua

Этот популярный блог , он описывает в статьях про купить левитру biceps-ua.com/

×