- HTML -
Web sayfası hazırlamak çok zor bir iş değil...Yazdığınız bir yazıyı* o yazıyla ilgili resimler görünebilecek* varsa sesleri duyulabilecek biçimde başkalarının izlemesini sağlayabilirsiniz.
Ama başka bilgisayarların bunu anlayıp* sizin yaptığınız gibi gösterebilmeleri için* ortak bir dil kullanmaları gerekir. Bu dile html denir.
Browser'lar (yani bilgisayardaki bu işe yarayan programlar) ingilizce olarak yazılmak zorunda olunan bu komutlara bakıp* neyi nasıl göstereceğini anlar.
HTML dili kullanarak websayfası hazırlamak için özel bir editöre gerek yoktur. Notepad kullanarak sayfalarınızı hazırlayabilirsiniz.
Yazı yazmanıza yarayacak bir program (Not Defteri) nasıl açılır* nasıl kaydedilir biliyorsunuz...
Biraz zor gelebilecek olan şey ise* ingilizce olan bu komutları doğru yazmak olabilir. Bir şey çalışmıyorsa* önce ingilizcesini doğru yazdım mı acaba diye kortrol etmeniz iyi olur. Sonra diğer olasılıkları kontrol edersiniz.
<HTML> </HTML>
Bir web sayfası <html> ile başlar* </html> ile biter.
<html>
<head>
<title>Buraya sitenin adı yazılır</title>
</head>
<body>Burasını daha sonra dolduracağız. Sitenizde olması gereken herşey bu arada yer alacak</body>
</html>
<HEAD> </HEAD>
Sitemizin adının yer aldığı Title'lın* **** Tag denilen* arama motorlarında bulunmanızı kolaylaştıran şeylerin yazıldığı yerdir. Sitede birçok şeyi* yazıların biçimlerini* büyüklüklerini* renklerini belirleyip işimizi epey kolaylaştıran CSS ler de buraya konur. Javacript denen bazı şeyler de... Bunları söyledim ama kafanız karışmasın* zamanı gelince onların neler olduğunu anlatacağım. Şimdilik geçelim.
<TITLE> </TITLE>
Her sitenin bir adı olması gerekir.
<title> DayDay </title>
Mısra ile Bulut'nin sitesinin adı: DayDay. Biliyorsunuz insanlar birşeyi ararken adını yazıp ararlar...
<BODY> ... </BODY>
Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölüm.
Buradaki komutların neler olduğunu sırayla öğreneceksiniz.
Ama önce* sayfamızı şöyle bir görelim değil mi?
Bulut* ilk sayfada bu yazı olsun istiyor: "DayDay* seni çok seviyoruz! "
Haydi bakalım deneyelim:
İlk Sayfamızı yapıyoruz
Önce not defterimizi açalım. Monitörün altında sol tarafta başlat menüsü var.
Programların içinde Donatılar... Onun içinde de not defteri...
Aslında bunun yerini bildiğinize eminim
Aşağıdaki yazıyı açtığınız sayfaya yazın.
<html>
<head>
<title> DayDay </title>
</head>
<body> DayDay seni çok seviyoruz </body>
</html>
İndex adını verin ve önceden belirlediğiniz bir yere kaydedin. (Daha sonra bulmanız gerekecek)
Kaydettiğiniz sayfaya gidip tıklayınca hiç birşey olmadı değil mi? Hiç web sayfasına benzemiyor. İlk yazdığınız gibi yani aşağıdaki gibi görüyorsunuz
O zaman "farklı kaydet" seçeneğini kullanıp yeniden deneyelim:
Bu kez kaydederken index.html (ya da index.htm) yazarak kaydedin. Tekrar gidip bu yeni sayfaya tıklayarak açın. Evett
) Oldu işte ! Yazdığımız diğer yazılar artık görünmüyor.
Görünen sadece söylemek istediğiniz şey olacak...
Yazı (Tip* Renk* Büyüklük)
Bu yazıyı hatırlıyorsunuz. Sadece yazmıştık. Çok sıradan görünüyor değil mi? Farklı durumlar için* farklı büyüklük* tip ve renklerde yazılar gerekir. Ayrıca yazının sayfanın neresinde duracağına da siz karar vermelisiniz.
Yazılar aşağıdaki komutlar içine yazılır.
<font> ............... </font>
Yazının büyüklüğü için "size"
yazı tipi için "face"
Yazı rengi için "color" komutlarını kullanmanız gerekir.
Aşağıdaki örneği yazın:
<font size="3" face="Arial" color="red">DayDay seni çok seviyoruz</font>
Yazıların yerinin <body> komutundan sonra gelmesi gerektiğini unutmayın.
<html>
<head>
<title> DayDay </title>
</head>
<body>
<font size="4" face="Arial" color="red">DayDay seni çok seviyoruz</font>
</body>
</html>
İsterseniz yaptığımızın neye benzediğine bakalım.
Şimdi tek tek tekrar edelim.
YAZI BÜYÜKLÜĞÜ
font size="4" 5 yerine 2* 3* 4* 6 yazabilirsiniz.
Ayrıca yazınızı aşağıdaki kodların arasına da yazabilirsiniz.. Yine aşağıda gördüğünüz büyüklüklerde görünür.
<h1> DayDay </h1>
<h2> DayDay </h2>
<h3> DayDay </h3>
<h4> DayDay </h4>
<h5> DayDay </h5>
<h6> DayDay </h6>
YAZI RENGİ
Renkler için ya renk kodunu ya da ingilizce adını yazmalısınız.
color="red" yerine* farklı renk isimleri yazın.
red - kırmızı
blue - mavi
yellow - sarı
white - beyaz
black - siyah
Diğer renklerin İngilizce yazılışları ve kodları için bu sayfaya bakabilirsiniz. Renklerle ilgili ilginizi çekebilecek ayrıntılar için de buraya bir ara göz atın.
Kodlarla yazmak istiyorsanız*
color="#FF0000" renk adı yerine kod yazmanız gerekir.
red - #ff0000
blue - #0000ff
yellow - #ffff00
white - #ffffff
black - #000000
Dikkat ettiyseniz color=" " tırnak işaretleri arasında renk adını kullanırken # işaretini yazmıyoruz. Onu sadece renk kodlarını yazarken kullanıyoruz.
YAZI TİPİ
face="Arial" yerine Verdana* Arial Narrow* Times New Roman* Comic Sans MS* Helvetica* sans-serif* gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir.
Ama çok önemli bir şey var... Bir yazı tipi* ancak başkasının bilgisayarında da o yazıdan varsa görünür. Yoksa yaptığınız bir işe yaramaz. Bu yüzden* örnek olsun diye baktığınız sayfadaki font isimlerini kullanmaya kalkmayın Yukarıda yazdığım örneklerle yetinmelisiniz şimdilik.
Renk Adı Hexadecimal Kodu
red FF0000
yellow FFFF00
lime 00FF00
cyan 00FFFF
blue 0000FF
magenta FF00FF
white FFFFFF
whitesmoke F5F5F5
gainsboro DCDCDC
lightgrey D3D3D3
silver C0C0C0
darkgray A9A9A9
gray 808080
dimgray 696969
black 000000
darkslategray 2F4F4F
slategray 708090
lightslategray 778899
steelblue 4682B4
royalblue 4169E1
cornflowerblue 6495ED
lightsteelblue B0C4DE
mediumslateblue 7B68EE
slateblue 6A5ACD
darkslateblue 483D8B
midnightblue 191970
navy 000080
darkblue 00008B
mediumblue 0000CD
dodgerblue 1E90FF
deepskyblue 00BFFF
lightskyblue 87CEFA
skyblue 87CEEB
lightblue ADD8E6
powderblue B0E0E6
azure F0FFFF
lightcyan E0FFFF
paleturquoise AFEEEE
mediumturquoise 48D1CC
lightseagreen 20B2AA
darkcyan 008B8B
teal 008080
cadetblue 5F9EA0
darkturquoise 00CED1
aqua 00FFFF
turquoise 40E0D0
aquamarine 7FFFD4
mediumaquamarine 66CDAA
darkseagreen 8FBC8F
mediumseagreen 3CB371
seagreen 2E8B57
darkgreen 006400
green 008000
forestgreen 228B22
limegreen 32CD32
lime 00FF00
chartreuse 7FFF00
lawngreen 7CFC00
greenyellow ADFF2F
palegreen 98FB98
lightgreen 90EE90
springgreen 00FF7F
mediumspringgreen 00FA9A
darkolivegreen 556B2F
olivedrab 6B8E23
olive 808000
darkkhaki BDB76B
darkgoldenrod B8860B
goldenrod DAA520
gold FFD700
khaki F0E68C
palegoldenrod EEE8AA
blanchedalmond FFEBCD
moccasin FFE4B5
wheat F5DEB3
navajowhite FFDEAD
burlywood DEB887
tan D2B48C
rosybrown BC8F8F
sienna A0522D
saddlebrown 8B4513
chocolate D2691E
peru CD853F
sandybrown F4A460
darkred 8B0000
maroon 800000
brown A52A2A
firebrick B22222
indianred CD5C5C
lightcoral F08080
salmon FA8072
darksalmon E9967A
lightsalmon FFA07A
coral FF7F50
tomato FF6347
darkorange FF8C00
orange FFA500
orangered FF4500
crimson DC143C
red FF0000
deeppink FF1493
fuchsia FF00FF
hotpink FF69B4
lightpink FFB6C1
pink FFC0CB
palevioletred DB7093
mediumvioletred C71585
purple 800080
darkmagenta 8B008B
mediumpurple 9370DB
blueviolet 8A2BE2
indigo 4B0082
darkviolet 9400D3
darkorchid 9932CC
mediumorchid BA55D3
orchid DA70D6
violet EE82EE
plum DDA0DD
thistle D8BFD8
lavender E6E6FA
ghostwhite F8F8FF
aliceblue F0F8FF
mintcream F5FFFA
honeydew F0FFF0
lightgoldenrodyellow FAFAD2
lemonchiffon FFFACD
cornsilk FFF8DC
lightyellow FFFFE0
ivory FFFFF0
floralwhite FFFAF0
linen FAF0E6
oldlace FDF5E6
antiquewhite FAEBD7
bisque FFE4C4
peachpuff FFDAB9
papayawhip FFEFD5
seashell FFF5EE
lavenderblush FFF0F5
mistyrose FFE4E1
snow FFFAFA
Web sayfası hazırlamak çok zor bir iş değil...Yazdığınız bir yazıyı* o yazıyla ilgili resimler görünebilecek* varsa sesleri duyulabilecek biçimde başkalarının izlemesini sağlayabilirsiniz.
Ama başka bilgisayarların bunu anlayıp* sizin yaptığınız gibi gösterebilmeleri için* ortak bir dil kullanmaları gerekir. Bu dile html denir.
Browser'lar (yani bilgisayardaki bu işe yarayan programlar) ingilizce olarak yazılmak zorunda olunan bu komutlara bakıp* neyi nasıl göstereceğini anlar.
HTML dili kullanarak websayfası hazırlamak için özel bir editöre gerek yoktur. Notepad kullanarak sayfalarınızı hazırlayabilirsiniz.
Yazı yazmanıza yarayacak bir program (Not Defteri) nasıl açılır* nasıl kaydedilir biliyorsunuz...
Biraz zor gelebilecek olan şey ise* ingilizce olan bu komutları doğru yazmak olabilir. Bir şey çalışmıyorsa* önce ingilizcesini doğru yazdım mı acaba diye kortrol etmeniz iyi olur. Sonra diğer olasılıkları kontrol edersiniz.
<HTML> </HTML>
Bir web sayfası <html> ile başlar* </html> ile biter.
<html>
<head>
<title>Buraya sitenin adı yazılır</title>
</head>
<body>Burasını daha sonra dolduracağız. Sitenizde olması gereken herşey bu arada yer alacak</body>
</html>
<HEAD> </HEAD>
Sitemizin adının yer aldığı Title'lın* **** Tag denilen* arama motorlarında bulunmanızı kolaylaştıran şeylerin yazıldığı yerdir. Sitede birçok şeyi* yazıların biçimlerini* büyüklüklerini* renklerini belirleyip işimizi epey kolaylaştıran CSS ler de buraya konur. Javacript denen bazı şeyler de... Bunları söyledim ama kafanız karışmasın* zamanı gelince onların neler olduğunu anlatacağım. Şimdilik geçelim.
<TITLE> </TITLE>
Her sitenin bir adı olması gerekir.
<title> DayDay </title>
Mısra ile Bulut'nin sitesinin adı: DayDay. Biliyorsunuz insanlar birşeyi ararken adını yazıp ararlar...
<BODY> ... </BODY>
Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölüm.
Buradaki komutların neler olduğunu sırayla öğreneceksiniz.
Ama önce* sayfamızı şöyle bir görelim değil mi?
Bulut* ilk sayfada bu yazı olsun istiyor: "DayDay* seni çok seviyoruz! "
Haydi bakalım deneyelim:
İlk Sayfamızı yapıyoruz
Önce not defterimizi açalım. Monitörün altında sol tarafta başlat menüsü var.
Programların içinde Donatılar... Onun içinde de not defteri...
Aslında bunun yerini bildiğinize eminim
Aşağıdaki yazıyı açtığınız sayfaya yazın.
<html>
<head>
<title> DayDay </title>
</head>
<body> DayDay seni çok seviyoruz </body>
</html>
İndex adını verin ve önceden belirlediğiniz bir yere kaydedin. (Daha sonra bulmanız gerekecek)
Kaydettiğiniz sayfaya gidip tıklayınca hiç birşey olmadı değil mi? Hiç web sayfasına benzemiyor. İlk yazdığınız gibi yani aşağıdaki gibi görüyorsunuz
O zaman "farklı kaydet" seçeneğini kullanıp yeniden deneyelim:
Bu kez kaydederken index.html (ya da index.htm) yazarak kaydedin. Tekrar gidip bu yeni sayfaya tıklayarak açın. Evett
Görünen sadece söylemek istediğiniz şey olacak...
Yazı (Tip* Renk* Büyüklük)
Bu yazıyı hatırlıyorsunuz. Sadece yazmıştık. Çok sıradan görünüyor değil mi? Farklı durumlar için* farklı büyüklük* tip ve renklerde yazılar gerekir. Ayrıca yazının sayfanın neresinde duracağına da siz karar vermelisiniz.
Yazılar aşağıdaki komutlar içine yazılır.
<font> ............... </font>
Yazının büyüklüğü için "size"
yazı tipi için "face"
Yazı rengi için "color" komutlarını kullanmanız gerekir.
Aşağıdaki örneği yazın:
<font size="3" face="Arial" color="red">DayDay seni çok seviyoruz</font>
Yazıların yerinin <body> komutundan sonra gelmesi gerektiğini unutmayın.
<html>
<head>
<title> DayDay </title>
</head>
<body>
<font size="4" face="Arial" color="red">DayDay seni çok seviyoruz</font>
</body>
</html>
İsterseniz yaptığımızın neye benzediğine bakalım.
Şimdi tek tek tekrar edelim.
YAZI BÜYÜKLÜĞÜ
font size="4" 5 yerine 2* 3* 4* 6 yazabilirsiniz.
Ayrıca yazınızı aşağıdaki kodların arasına da yazabilirsiniz.. Yine aşağıda gördüğünüz büyüklüklerde görünür.
<h1> DayDay </h1>
<h2> DayDay </h2>
<h3> DayDay </h3>
<h4> DayDay </h4>
<h5> DayDay </h5>
<h6> DayDay </h6>
YAZI RENGİ
Renkler için ya renk kodunu ya da ingilizce adını yazmalısınız.
color="red" yerine* farklı renk isimleri yazın.
red - kırmızı
blue - mavi
yellow - sarı
white - beyaz
black - siyah
Diğer renklerin İngilizce yazılışları ve kodları için bu sayfaya bakabilirsiniz. Renklerle ilgili ilginizi çekebilecek ayrıntılar için de buraya bir ara göz atın.
Kodlarla yazmak istiyorsanız*
color="#FF0000" renk adı yerine kod yazmanız gerekir.
red - #ff0000
blue - #0000ff
yellow - #ffff00
white - #ffffff
black - #000000
Dikkat ettiyseniz color=" " tırnak işaretleri arasında renk adını kullanırken # işaretini yazmıyoruz. Onu sadece renk kodlarını yazarken kullanıyoruz.
YAZI TİPİ
face="Arial" yerine Verdana* Arial Narrow* Times New Roman* Comic Sans MS* Helvetica* sans-serif* gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir.
Ama çok önemli bir şey var... Bir yazı tipi* ancak başkasının bilgisayarında da o yazıdan varsa görünür. Yoksa yaptığınız bir işe yaramaz. Bu yüzden* örnek olsun diye baktığınız sayfadaki font isimlerini kullanmaya kalkmayın Yukarıda yazdığım örneklerle yetinmelisiniz şimdilik.
Renk Adı Hexadecimal Kodu
red FF0000
yellow FFFF00
lime 00FF00
cyan 00FFFF
blue 0000FF
magenta FF00FF
white FFFFFF
whitesmoke F5F5F5
gainsboro DCDCDC
lightgrey D3D3D3
silver C0C0C0
darkgray A9A9A9
gray 808080
dimgray 696969
black 000000
darkslategray 2F4F4F
slategray 708090
lightslategray 778899
steelblue 4682B4
royalblue 4169E1
cornflowerblue 6495ED
lightsteelblue B0C4DE
mediumslateblue 7B68EE
slateblue 6A5ACD
darkslateblue 483D8B
midnightblue 191970
navy 000080
darkblue 00008B
mediumblue 0000CD
dodgerblue 1E90FF
deepskyblue 00BFFF
lightskyblue 87CEFA
skyblue 87CEEB
lightblue ADD8E6
powderblue B0E0E6
azure F0FFFF
lightcyan E0FFFF
paleturquoise AFEEEE
mediumturquoise 48D1CC
lightseagreen 20B2AA
darkcyan 008B8B
teal 008080
cadetblue 5F9EA0
darkturquoise 00CED1
aqua 00FFFF
turquoise 40E0D0
aquamarine 7FFFD4
mediumaquamarine 66CDAA
darkseagreen 8FBC8F
mediumseagreen 3CB371
seagreen 2E8B57
darkgreen 006400
green 008000
forestgreen 228B22
limegreen 32CD32
lime 00FF00
chartreuse 7FFF00
lawngreen 7CFC00
greenyellow ADFF2F
palegreen 98FB98
lightgreen 90EE90
springgreen 00FF7F
mediumspringgreen 00FA9A
darkolivegreen 556B2F
olivedrab 6B8E23
olive 808000
darkkhaki BDB76B
darkgoldenrod B8860B
goldenrod DAA520
gold FFD700
khaki F0E68C
palegoldenrod EEE8AA
blanchedalmond FFEBCD
moccasin FFE4B5
wheat F5DEB3
navajowhite FFDEAD
burlywood DEB887
tan D2B48C
rosybrown BC8F8F
sienna A0522D
saddlebrown 8B4513
chocolate D2691E
peru CD853F
sandybrown F4A460
darkred 8B0000
maroon 800000
brown A52A2A
firebrick B22222
indianred CD5C5C
lightcoral F08080
salmon FA8072
darksalmon E9967A
lightsalmon FFA07A
coral FF7F50
tomato FF6347
darkorange FF8C00
orange FFA500
orangered FF4500
crimson DC143C
red FF0000
deeppink FF1493
fuchsia FF00FF
hotpink FF69B4
lightpink FFB6C1
pink FFC0CB
palevioletred DB7093
mediumvioletred C71585
purple 800080
darkmagenta 8B008B
mediumpurple 9370DB
blueviolet 8A2BE2
indigo 4B0082
darkviolet 9400D3
darkorchid 9932CC
mediumorchid BA55D3
orchid DA70D6
violet EE82EE
plum DDA0DD
thistle D8BFD8
lavender E6E6FA
ghostwhite F8F8FF
aliceblue F0F8FF
mintcream F5FFFA
honeydew F0FFF0
lightgoldenrodyellow FAFAD2
lemonchiffon FFFACD
cornsilk FFF8DC
lightyellow FFFFE0
ivory FFFFF0
floralwhite FFFAF0
linen FAF0E6
oldlace FDF5E6
antiquewhite FAEBD7
bisque FFE4C4
peachpuff FFDAB9
papayawhip FFEFD5
seashell FFF5EE
lavenderblush FFF0F5
mistyrose FFE4E1
snow FFFAFA
