Embed Size (px)
DESCRIPTION
WEB TASARIMIN TEMELLERİ - HTML’E GİRİŞBASICS of WEB DESIGN An Introduction to HTML MSc. Mehmet KEÇECİ
Citation preview
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
1
WEB TASARIMIN TEMELLERİ HTML’E GİRİŞ Web Tasarımını anlayabilmemiz için gereken temel bilgileri içerir. Bu bilgileri öğrendikten sonra Web Tasarımına başlayabiliriz.
MSc. Mehmet KEÇECİ 21.07.2006
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
2
WEB TASARIMIN
TEMELLERİ
HTML’E GİRİŞ
BASICS of WEB DESIGN
An Introduction to HTML
MSc. Mehmet KEÇECİ
21.07.2006
İstanbul/Türkiye
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
3
Bu Kitabı Tüm Değerli Hocalarıma İthaf Ediyorum.
To Our All Dear Teachers
With Love This page intentionally left blank
Önsöz / Preface
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
4
...
Türkçe-İngilizce ve Diğer Dillerdeki Karşılıkları
...
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
5
İÇİNDEKİLER / Contents
İçindekiler
i. Önsöz
ii. Türkçe-İngilizce ve Diğer Dillerdeki Karşılıkları
1. HTML Nedir ve HTML’e Giriş?
2. Yazı Tipi
3. Grafik ve Resimler
4. Linkler
5.
HTML’E GİRİŞ
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
6
Bölüm 1
HyperText Markup Language (HTML): Hiper Metin Biçimleme Dili. 2006 tarihi
ile 4.01 sürümü mevcuttur. Betik bir dildir. Bilinen diller gibi (c, c++, pascal) derlemeye
ihtiyaç duymazlar. Buradaki Hyper (Hiper) den maksat içinde normal metinde mevcut
olmayan özelliklerin (resim, bağlantı: link vs.) olmasıdır. Bunları belirleyen etiket (tag)
denilen kod parçalarından oluşur. Uzantısı (extension) ise hapimizin bildiği .htm, .html, …
dirler. Bu dili yazmak için hiçbir özel programa ihtiyacımız yoktur. Sadece metin editörü
(notepad vs) yeterli olmaktadır.
Başlat (Start) -> Programlar (Programs) -> Donatılar (Accessories) -> Notepad
veya Başlat*Çalıştır (Run)*Notepad demeniz yeterli.
Veya Frontpage, Dreamweaver vs. kullanabiliriz.
İlk Html kodumuzu yazalım
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
7
Dosya (File)*Farklı Kaydet (Save As)’ten *.html olarak kaydedelim kayıt tipini Tüm
Dosyalar (All Files) olarak değiştirelim yoksa uzantısını .txt olarak atar.
Kaydet (Save) diyelim ve kaydettiğimiz yere giderek dosyamızı Internet Explorer (Fire Fox,
Opera, Netscape, Avant, Konqueror vs.) ile açarsak (varsayılan tarayıcı, göz atıcı (browser)
üzerine tıklandığında açılacaktır) . Veya Vista’da ise
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
8
Yazdığımız kodlara dikkat edersek
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
9
HTML üç ana kısımdan oluşur. Bunlar;
1. <html> : Ana bloktur. Tüm html dosyaları "<html> </html>" arasında yer alır.
2. <head> : Tanımlamalar yani kullanıcının tarayıcıda görmediği bölümdür. Bu kısımda
site ile ilgili açıklamalar, arama motorları için anahtar kelimeler, site başlığı, CSS ve
javasciptler gibi bölümler bulunur.
3. <body> : Sayfa üzerinde görülecek her şeyin yazıldığı bölümdür. Yani sayfa
içeriğinin başlangıç ve bitiş bloğu denebilir.
Yukarıdaki kodlara dikkatlice bakıldığında <…> ile alçın etiketler yine </...> etiketi ile
kapatılmıştır.
Yazının özelliklerini belirlemek için
1. Kalın: <b>…</b>
2. İtalik: <i>…</i>
3. Altı Çizili <u>…</u>
4. Üstü Çizili (strikeout): <strike>…</strike> veya <s>…</s>
5. Üst Simge (superscript): <sup>…</sup>
6. Alt Simge (Subscript): <sub>…</sub>
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
10
Şimdi bu kodların nasıl gözüktüğüne bakalım.
Yukarıdaki ifadeye dikkat edilirse hepsi yan yana çıktılar eğer etiketler arasına yeni paragraf
etiketi: <p>…</p> vermediğimiz müddetçe satır ayrımı yapmaz.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
11
Görüntüsüne bakalım
Paragaf etiketinin özniteliklerini incelersek:
<center>Merhaba Mehmet Keçeci</center>
Bu etiketimiz bize yazımızın sayfanın ortasından hizalayarak iki tarafa eşit uzaklıkta
paylaştırır.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
12
Şimdi diğerlerini inceleyelim.
<center>Merhaba Mehmet Keçeci</center>
<p align="center">Merhaba Mehmet Keçeci</p>
<p align="right">Merhaba Mehmet Keçeci</p>
<p align="left">Merhaba Mehmet Keçeci</p>
<p align="justify">Merhaba Mehmet Keçeci. Bu gün HTML çalışacağım. HTML'de paragraf
düzenlemeyi ve onun özniteliklerini öğreneceğim. Daha sonra öğrendiklerimi Frontpage de
uygulamaya çalışacağım. Hernekadar bu konuda yeni isemde bunu başarabileceğimi
biliyorum.</p>
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
13
1. Center: Yazıyı ortalar.
2. Rigth: Yazıyı sağa dayalı yazar
3. Left: Yazıyı sola dayalı yazar.
4. Justify: Yazıyı iki tarafada yaslar. Makalelerin düzgün gözükmesi için bu oldukça
önemlidir.
Şimdide pragraflar arası istediğimiz kadar satır aralık vermek için <br/> etiketini kullanalım.
Her <br> bir satır aralık verir.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
14
Etiket Listesi
1. a
2. abbr
3. acronym
4. address
5. area
6. b
7. base
8. bdo
9. big
10. blockquote
11. body
12. br
13. button
14. caption
15. cite
16. code
17. col
18. colgroup
19. dd
20. del
21. dfn
22. div
23. dl
24. DOCTYPE
25. dt
26. em
27. fieldset
28. form
29. h1, h2, h3, h4, h5, h6
30. head
31. html
32. hr
33. i 34. img
35. input
36. ins
37. kbd
38. label
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
15
39. legend
40. li 41. link
42. map
43. meta
44. noscript
45. object
46. ol
47. optgroup
48. option
49. p
50. param
51. pre
52. q
53. samp
54. script
55. select
56. small
57. span
58. strong
59. style
60. sub
61. sup
62. table
63. tbody
64. td
65. textarea
66. tfoot
67. th
68. thead
69. title
70. tr 71. tt 72. ul
73. var
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
16
Etiketlere genel olarak bakarsak
Stil Etiket Örnek Sonuç
Kalın <b></b> <b>Merhaba</b> Merhaba
İtalik <i></i> <i>Merhaba</i> Merhaba
Altı Çizili <u></u> <u>Merhaba</u> Merhaba
Üstü Çizili <strike></strike> <strike>Merhaba</strike> veya <s>…</s> Merhaba
Üst Simge <sup></sup> 4x<sup>2</sup> -x<sup>3n+1</sup> 4x2 –x3n+1
Alt Simge <sub></sub> S<sub>2</sub> = b<sub>2</sub>x<sub>n-
1</sub> S2 = b2xn-1
Örnek:
I = I<sub>0</sub>e<sup>-kd</sup> Sonuç: I = I0e
-kb
Aynı kodları daha kolay bir şekilde Frontpage de yapabiliriz.
Kod kısmı
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
17
Önizlemeye aldığımızda Internette nasıl çalışıyor ise bize o şekilde gözükür.
Buradan da anlıyoruz ki yazmamız gereken birçok kodu Frontpage ve buna benzer görsel yazılımlar bizim için yapmaktadır.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
18
YAZI TİPİ (FONT)
BÖLÜM 2
Font
Yazı tipi bize yazılarımızın görünüşünün nasıl olacağını verir. Hangi fontu beğeniyorsak
makalemizi o fontta yazabiliriz.
<font face="Arial">Merhaba</font>
<body>
<p>Merhaba</p>
<p><font face="Arial">Merhaba</font></p>
<p><font face="Times New Roman">Merhaba</font></p>
<p><font face="Verdana">Merhaba</font></p>
<p><font face="Arial Black">Merhaba</font></p>
</body>
Görünüşü
Dikkat edilirse 1. ve 3. satırların yazı tipleri aynı. Kodumuza baktığımızda 1’de herhangi bir
etiket yokken 3’de “Times New Roman” fontu var buda bize gösteriyor ki bizim varsayılan
fontunu budur.
Fontları Forontpage oluşturmak ise oldukça kolay. Yazıyı yazdıktan sonra istediğimiz kısmı
tarıyor ve menüden “Yazı Tipi” kısmından istediğimiz fontu seçiyoruz.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
19
Ayrıca Görünüm*Etiket Göster (Ctrl+ö) seçersek bize kullanılan etiketleri gösterir.
Ayrıca seçtiğimiz fontların bilgisayarımız tarafından desteklenip desteklenmediğini
bilmiyorsak birden fazla font önerebiliriz o zaman ilk önerdiğimiz font desteklenmiyorsa 2.
oda olmazsa 3. font devreye girer hiçbiri olmazsa varsayılan font devreye girer.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
20
Font Boyutu
7 farklı font büyüklüğümüz vardır (1,2,3,4,5,6,7).
<font size="5">Merhaba</font>
Fontpage’de yazıyı taradıktan sonra menüden “Yazı Tipi Boyutu” na tıklayarak istediğimiz
büyüklüğü seçebiliriz.
Font büyüklüğü için çeşitli birimler kullanılabilir bunlar kısaca şunlardır.
Piksel (px)
Yazı tipi boyutu (em)
Yazı tipinin x yüksekliği (ex)
İnç (in)
Santimetre (cm)
Milimetre (mm)
Nokta (nk), bir nokta 1/72 inçe eşittir
Font buyutunu aynı zamanda aşağıdaki etiketlede verebiliriz. H1...H6 arası geğerlerimiz
vardır.
<h1>Merhaba Mehmet Keçeci</h1>
<h2>Merhaba Mehmet Keçeci</h2>
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
21
<h3 align="left">Merhaba Mehmet Keçeci</h3>
<h4 align="left">Merhaba Mehmet Keçeci</h4>
<h5 align="justify">Merhaba Mehmet Keçeci.</h5>
<h6>Merhaba Mehmet Keçeci</h6>
H1 değerimiz en büyük H6 değerimiz en küçüktür.
RENK
Yazımızın vengini font etiketinin bir özniteliği (attribute) olan color ile belirleyeceğiz bunun
için 2 yöntem vardır.
1. Renkleri yazarak: green, red, blue, white, black, orange, yellow, navy, pink, gray,
lime, lightgreen, light blue, fuchsia vs.
2. Sayısal değerlerini girerek. Bunun için a-f ile 0-9 arası 6 haneden oluşurlar. En başına
daima # simgesi gelir.
1. <font color="red">Merhaba</font>
2. <font color="#0000ff">Merhaba</font>
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
22
Frontpage’de yazıyı taradıktan sonra menüden “Yazı Tipi Rengi” seçilerek oradaki
renklerin herhangi biri alınabilir.
Daha Fazla Renkten
Özelden
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
23
Veya “Seç” ten bilgisayar ekranındaki herhangi bir rengi alabiliriz.
Renk Kodları RGB (Red-Green-Blue: Kırmızı-Yeşil-Mavi) ve Hex olarak kendi aralarındada
ayrılırlar.
rgb Hexadecimal Adı Görünüşü
255 250 250 fffafa snow
248 248 255 f8f8ff ghost white
248 248 255 f8f8ff GhostWhite
245 245 245 f5f5f5 white smoke
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
24
245 245 245 f5f5f5 WhiteSmoke
220 220 220 dcdcdc gainsboro
255 250 240 fffaf0 floral white
216 Renk Paleti
Netscape tarayıcıları için 216 renk kodları. Sadece Netscape değil işletim sistemleri arasında renk uyumsuzlukları vardır. Genel ortak renk sayısı 216 dır.
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
Ayrıca body etiketine bu özniteliği tanımlayarak metinde yazılan tüm yazılara aynı renk
atanabilir özel olarak atananları bu etkilemez.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
25
<body text="#008080">
Merhaba Mehmet Keçeci
</body>
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
26
GRAFİK VE RESİMLER
BÖLÜM 3
Web sayfalarınmızda resimlerimizi gösterebiliyorduk. Bunun için en önemli olan
resimlerimizin bulunduğu klarürdeki yerin fiziksel adresini tam verebilmemizdir. Boş
bırakmamız durumunda sadece html sayfamızın bulunduğu kalsörde arar.
<img src="Konum"> veya <img src="URL">
İmg:image (suret, görüntü, imaj)
Scr:source (kaynak)
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Bunlardan en kalitelisi .png dir. Milyonlarca renk içermesi ve sıkışırma kalitesi
açısısından fakat diğerleri internette daha çok kullanılır.
Internetteki bir resmi üzerine sağ tıklayarak “Resim Olarak Farklı Kaydet-Save As Picture” u
seçin ve Kaydet-Save diyerek istediğimiz bir alana kaydedebilirsiniz.
Ör:
1. <img src="mk.jpg">
2. <img src="resim/mk.jpg">
3. <img src="http://www.hiperteknoloji.org/images/logoht.jpg">
Şimdide özniteliklerine bakalım.
1. ALT: <img src="mk.jpg" alt="Mehmet Keçeci"> Bu resmimizin üzerine geldiğinde
bize bir açıklama verir. Resmimizin istenen resim olup olmadığına karar vermede bize
yardımcı olur.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
27
Yukarıda gördğügümüz gibi resimin yolu ya yanlış verilmiş veya resim yok (burada
resim yok) fakat “alt” özniteliği ile verdiğimiz açıklama gözükmektedir. Şimdi resmi
ekleyelim. Resmin üzerine faremizi getirip biraz beklettiğimizde resmimize eklenen
açıklama gözükecektir.
2. ALIGN: Resmimizin sayfanın neresine koymamız gerektiğinnde bize yardımcı
olacaktır. Top (üst), middle (orta), bottom (alt, dip), rigth (sağ), left (sol) öznitelikleri
mevcuttur.
<img src="resim/mk.jpg" ALIGN="Bottom" alt="alt">
<img src="resim/mk.jpg" align="right" alt="sağ">
<img src="resim/mk.jpg" align="left" alt="sol">
<img src="resim/mk.jpg" align="top" alt="üst" >
<img src="resim/mk.jpg" align="middle" alt="orta">
3. Resimin boyutları: HEIGHT (yükseklik) ve WIDTH (genişlik)
<img src=”resim/mk.jgp" height="120" width="72">
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
28
Resimlerimizin boyutları ne olursa olsun resimlerimizi istediğimiz boyutlarda
gösterebiliriz. Fakat resimlerimizin boyutlarının büyük olması herzaman sorundur ve
web sayfalarının yüklenmesini geciktirirler. Bu yüzden onların boyutlarını küçülten
progranlar kullanarak sayfalarımızın hızlı açılmasını sağlayabiliriz.
4. Resimlerimize çerçeve koyabiliriz. BORDER (çerçeve)
<img src=”resim/mk.jpg" border="4">
5. Rsmimizi arkaalan (background ) olarak kullanırsak.
<body background="resim/mk.jpg" >
Veya
<body background="resim/mk.jpg" bgproperties="fixed" >
Arasındaki fark kaydırma çubu ile kaydırırken 1.sinde ekranla birlikte resimde kayar.
2.sinde ise resim sabit durur ekran kayar.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
29
6. Resmimize tıklama verebiliriz.
<a href="http://www.hiperteknoloji.org" target="_blank">
<img src="Creek.jpg" alt="Resim" width="32" height="32" longdesc="manzara.htm
Resmi"/></a>
Target: hedef çerçevemizdir yani resme tıkladığımızda sayfanın nasıl açılacağını
gösterir. Burada _blank diyerek yeni bir sayfada açmasını istiyoruz.
_blank
_self
_top
_parent
LongDesc:Long Descrition: Resmimiz ile ilgili uzun açıklama yaptık daha öce “alt” ile kısa
açıklama yapmıştık.
Insert*Picture*From File (Ekle*Resim*Dosyadan veya diğerleri) veya “Toolbox” dan “Tags”
kısmından “image” e tıklayın ve sayfaya eklenen resim çerçevesine çift tıklayın ve “Picture
Properties” ten “Browse” tıklayarak resim ekleyebilirsiniz.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
30
Share Pointte resmimize çift tıkladığımızda görsel arayüz (Resmin Özellikleri-Picture
Properties) açılır ve buradan daha rahat seçim yapabiliriz.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
31
Buradan “Browse-Göz Atıcı” ya tıklayarak bir resim seçebiliriz.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
32
“Edit-Düzen” e tıklayarak resmimizin renk ayarlarını yapabiliriz.
Ayrıca “Öznitelikleri-Attributes” soldaki kısımdanda verebiliriz.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
33
Resmimize CTRL+Tıklama yaptığımızda resme verdiğimiz Köprü’yü (Bağlantı-Hyperlink)
takip edebiliriz.
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
34
MSc. Mehmet KEÇECİ [HTML’E GİRİŞ] 21/07/2006
35
Bölüm 4
Linkler
Şimdi bu linklerin kodlarını görelim
<p><b>Linkler</b></p>
<p>1. Yazıya Link</p>
<p><a href="http://www.mehmetkececi.com">Link</a></p>
<p>2. Linke Link</p>
<p><a href="http://www.mehmetkececi.com">http://www.mehmetkececi.com</a> </p>
<p>3. Resime Link</p>
<p><a href="http://www.mehmetkececi.com">
<img border="0" src="file:///C:/seminer/image002.jpg" width="139" height="100"></a></p>
