teknoloji

HTML DERSLERİ

BÜTÜN AYRINTILARIYLA HTML DERSLERİ
Komutları öğrenmeye başlıyoruz!
<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, Meta 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...

Sonraki derste bu yazıya daha neler yapabileceğimizi göreceğiz.


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



aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose mistyrose navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen
aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose mistyrose navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen

aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose mistyrose navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen





HTML:
FFFFCC

R=255
G=255
B=204

C=0
M=0
Y=20
K=0

 HTML:
FFFF99

R=255
G=255
B=153

C=0
M=0
Y=40
K=0

 HTML:
FFFF66

R=255
G=255
B=102

C=0
M=0
Y=60
K=0

 HTML:
FFFF33

R=255
G=255
B=51

C=0
M=0
Y=80
K=0

 HTML:
FFFF00

R=255
G=255
B=0

C=0
M=0
Y=100
K=0

 HTML:
CCCC00

R=204
G=204
B=0

C=20
M=20
Y=100
K=0
HTML:
FFCC66

R=255
G=204
B=102

C=0
M=20
Y=60
K=0

 HTML:
FFCC00

R=255
G=204
B=0

C=0
M=20
Y=100
K=0

 HTML:
FFCC33

R=255
G=204
B=51

C=0
M=20
Y=80
K=0

 HTML:
CC9900

R=204
G=153
B=0

C=20
M=40
Y=100
K=0

 HTML:
CC9933

R=204
G=153
B=51

C=20
M=40
Y=80
K=0

 HTML:
996600

R=153
G=102
B=0

C=40
M=60
Y=100
K=0
HTML:
FF9900

R=255
G=153
B=0

C=0
M=40
Y=100
K=0

 HTML:
FF9933

R=255
G=153
B=51

C=0
M=40
Y=80
K=0

 HTML:
CC9966

R=204
G=153
B=102

C=20
M=40
Y=60
K=0

 HTML:
CC6600

R=204
G=102
B=0

C=20
M=60
Y=100
K=0

 HTML:
996633

R=153
G=102
B=51

C=40
M=60
Y=80
K=0

 HTML:
663300

R=102
G=51
B=0

C=60
M=80
Y=100
K=0
HTML:
FFCC99

R=255
G=204
B=153

C=0
M=20
Y=40
K=0

 HTML:
FF9966

R=255
G=153
B=102

C=0
M=40
Y=60
K=0

 HTML:
FF6600

R=255
G=102
B=0

C=0
M=60
Y=100
K=0

 HTML:
CC6633

R=204
G=102
B=51

C=20
M=60
Y=80
K=0

 HTML:
993300

R=153
G=51
B=0

C=40
M=80
Y=100
K=0

 HTML:
660000

R=102
G=0
B=0

C=60
M=100
Y=100
K=0
HTML:
FF6633

R=255
G=102
B=51

C=0
M=60
Y=80
K=0

 HTML:
CC3300

R=204
G=51
B=0

C=20
M=80
Y=100
K=0

 HTML:
FF3300

R=255
G=51
B=0

C=0
M=80
Y=100
K=0

 HTML:
FF0000

R=255
G=51
B=0

C=0
M=80
Y=100
K=0

 HTML:
CC0000

R=204
G=0
B=0

C=20
M=100
Y=100
K=0

 HTML:
990000

R=153
G=0
B=0

C=40
M=100
Y=100
K=0
HTML:
FFCCCC

R=255
G=204
B=204

C=0
M=20
Y=20
K=0

 HTML:
FF9999

R=255
G=153
B=153

C=0
M=40
Y=40
K=0

 HTML:
FF6666

R=255
G=102
B=102

C=0
M=60
Y=60
K=0

 HTML:
FF3333

R=255
G=51
B=51

C=0
M=80
Y=80
K=0

 HTML:
FF0033

R=255
G=0
B=51

C=0
M=100
Y=80
K=0

 HTML:
CC0033

R=204
G=0
B=51

C=20
M=100
Y=80
K=0
HTML:
CC9999

R=204
G=153
B=153

C=20
M=40
Y=40
K=0

 HTML:
CC6666

R=204
G=102
B=102

C=20
M=40
Y=40
K=0

 HTML:
CC3333

R=204
G=51
B=51

C=20
M=80
Y=80
K=0

 HTML:
993333

R=153
G=51
B=51

C=40
M=80
Y=80
K=0

 HTML:
990033

R=153
G=0
B=51

C=40
M=100
Y=80
K=0

 HTML:
330000

R=51
G=0
B=0

C=80
M=100
Y=100
K=0
HTML:
FF6699

R=255
G=102
B=153

C=0
M=60
Y=40
K=0

 HTML:
FF3366

R=255
G=51
B=102

C=0
M=80
Y=60
K=0

 HTML:
FF0066

R=255
G=0
B=102

C=0
M=100
Y=60
K=0

 HTML:
CC3366

R=204
G=51
B=102

C=20
M=80
Y=60
K=0

 HTML:
996666

R=153
G=102
B=102

C=40
M=60
Y=60
K=0

 HTML:
663333

R=102
G=51
B=51

C=60
M=80
Y=80
K=0
HTML:
FF99CC

R=255
G=153
B=204

C=0
M=40
Y=20
K=0

 HTML:
FF3399

R=255
G=51
B=153

C=0
M=80
Y=40
K=0

 HTML:
FF0099

R=255
G=0
B=153

C=0
M=100
Y=40
K=0

 HTML:
CC0066

R=204
G=0
B=102

C=20
M=100
Y=60
K=0

 HTML:
993366

R=153
G=51
B=102

C=40
M=80
Y=60
K=0

 HTML:
660033

R=102
G=0
B=51

C=60
M=100
Y=80
K=0
HTML:
FF66CC

R=255
G=102
B=204

C=0
M=60
Y=20
K=0

 HTML:
FF00CC

R=255
G=0
B=204

C=0
M=100
Y=20
K=0

 HTML:
FF33CC

R=255
G=51
B=102

C=0
M=80
Y=20
K=0

 HTML:
CC6699

R=204
G=102
B=153

C=20
M=60
Y=40
K=0

 HTML:
CC0099

R=204
G=0
B=153

C=20
M=100
Y=40
K=0

 HTML:
990066

R=153
G=0
B=102

C=40
M=100
Y=60
K=0
HTML:
FFCCFF

R=255
G=204
B=255

C=0
M=20
Y=0
K=0

 HTML:
FF99FF

R=255
G=153
B=255

C=0
M=40
Y=0
K=0

 HTML:
FF66FF

R=255
G=102
B=255

C=0
M=60
Y=0
K=0

 HTML:
FF33FF

R=255
G=51
B=255

C=0
M=80
Y=0
K=0

 HTML:
FF00FF

R=255
G=0
B=255

C=0
M=100
Y=0
K=0

 HTML:
CC3399

R=204
G=51
B=153

C=20
M=80
Y=40
K=0
HTML:
CC99CC

R=204
G=153
B=204

C=20
M=40
Y=20
K=0

 HTML:
CC66CC

R=204
G=102
B=204

C=20
M=60
Y=20
K=0

 HTML:
CC00CC

R=204
G=0
B=204

C=20
M=60
Y=20
K=0

 HTML:
CC33CC

R=204
G=51
B=204

C=20
M=80
Y=20
K=0

 HTML:
990099

R=153
G=0
B=153

C=40
M=100
Y=40
K=0

 HTML:
993399

R=153
G=51
B=153

C=40
M=80
Y=40
K=0
HTML:
CC99FF

R=204
G=153
B=255

C=20
M=40
Y=0
K=0

 HTML:
9933CC

R=153
G=51
B=204

C=40
M=80
Y=20
K=0

 HTML:
9933FF

R=153
G=51
B=255

C=40
M=80
Y=0
K=0

 HTML:
9900FF

R=153
G=0
B=255

C=40
M=100
Y=0
K=0

 HTML:
660099

R=102
G=0
B=153

C=60
M=100
Y=40
K=0

 HTML:
663366

R=102
G=51
B=102

C=60
M=80
Y=60
K=0
HTML:
9966CC

R=153
G=102
B=204

C=40
M=60
Y=20
K=0

 HTML:
9966FF

R=153
G=102
B=255

C=40
M=60
Y=0
K=0

 HTML:
6600CC

R=102
G=0
B=204

C=60
M=100
Y=20
K=0

 HTML:
6633CC

R=102
G=51
B=204

C=60
M=80
Y=20
K=0

 HTML:
663399

R=102
G=51
B=153

C=60
M=80
Y=40
K=0

 HTML:
330033

R=51
G=0
B=51

C=80
M=100
Y=80
K=0
HTML:
CCCCFF

R=204
G=204
B=255

C=20
M=20
Y=0
K=0

 HTML:
9999FF

R=153
G=153
B=255

C=40
M=40
Y=0
K=0

 HTML:
6633FF

R=102
G=51
B=255

C=60
M=80
Y=0
K=0

 HTML:
6600FF

R=102
G=0
B=255

C=60
M=100
Y=0
K=0

 HTML:
330099

R=51
G=0
B=153

C=80
M=100
Y=40
K=0

 HTML:
330066

R=51
G=0
B=102

C=80
M=100
Y=60
K=0
HTML:
9999CC

R=153
G=153
B=204

C=40
M=40
Y=20
K=0

 HTML:
6666FF

R=102
G=102
B=255

C=60
M=60
Y=0
K=0

 HTML:
6666CC

R=102
G=102
B=204

C=60
M=60
Y=20
K=0

 HTML:
666699

R=102
G=102
B=153

C=60
M=60
Y=40
K=0

 HTML:
333399

R=51
G=51
B=153

C=80
M=80
Y=40
K=0

 HTML:
333366

R=51
G=51
B=102

C=80
M=80
Y=60
K=0
HTML:
3333FF

R=51
G=51
B=255

C=80
M=80
Y=0
K=0

 HTML:
3300FF

R=51
G=0
B=255

C=80
M=100
Y=0
K=0

 HTML:
3300CC

R=51
G=0
B=204

C=80
M=100
Y=20
K=0

 HTML:
3333CC

R=51
G=51
B=204

C=80
M=80
Y=20
K=0

 HTML:
000099

R=0
G=0
B=153

C=100
M=100
Y=40
K=0

 HTML:
000066

R=0
G=0
B=102

C=100
M=100
Y=60
K=0
HTML:
6699FF

R=102
G=153
B=255

C=60
M=40
Y=0
K=0

 HTML:
3366FF

R=51
G=102
B=255

C=80
M=60
Y=0
K=0

 HTML:
0000FF

R=0
G=0
B=255

C=100
M=100
Y=0
K=0

 HTML:
0000CC

R=0
G=0
B=204

C=100
M=100
Y=20
K=0

 HTML:
0033CC

R=0
G=51
B=204

C=100
M=80
Y=20
K=0

 HTML:
000033

R=0
G=0
B=51

C=100
M=100
Y=80
K=0
HTML:
0066FF

R=0
G=102
B=255

C=100
M=60
Y=0
K=0

 HTML:
0066CC

R=0
G=102
B=204

C=100
M=60
Y=20
K=0

 HTML:
3366CC

R=51
G=102
B=204

C=80
M=60
Y=20
K=0

 HTML:
0033FF

R=0
G=51
B=255

C=100
M=80
Y=0
K=0

 HTML:
003399

R=0
G=51
B=153

C=100
M=80
Y=40
K=0

 HTML:
003366

R=0
G=51
B=102

C=100
M=80
Y=60
K=0
HTML:
99CCFF

R=153
G=204
B=255

C=40
M=20
Y=0
K=0

 HTML:
3399FF

R=51
G=153
B=255

C=80
M=40
Y=0
K=0

 HTML:
0099FF

R=0
G=153
B=255

C=100
M=40
Y=0
K=0

 HTML:
6699CC

R=102
G=153
B=204

C=60
M=40
Y=20
K=0

 HTML:
336699

R=51
G=102
B=153

C=80
M=60
Y=40
K=0

 HTML:
006699

R=0
G=102
B=153

C=100
M=60
Y=40
K=0
HTML:
66CCFF

R=102
G=204
B=255

C=60
M=20
Y=0
K=0

 HTML:
33CCFF

R=51
G=204
B=255

C=80
M=20
Y=0
K=0

 HTML:
00CCFF

R=0
G=204
B=255

C=100
M=20
Y=0
K=0

 HTML:
3399CC

R=51
G=153
B=204

C=80
M=40
Y=20
K=0

 HTML:
0099CC

R=0
G=153
B=204

C=100
M=40
Y=20
K=0

 HTML:
003333

R=0
G=51
B=51

C=100
M=80
Y=80
K=0
HTML:
99CCCC

R=153
G=204
B=204

C=40
M=20
Y=20
K=0

 51 HTML:
66CCCC

R=102
G=204
B=204

C=60
M=20
Y=20
K=0

 HTML:
339999

R=51
G=153
B=153

C=60
M=20
Y=20
K=0

 HTML:
669999

R=102
G=153
B=153

C=60
M=40
Y=40
K=0

 HTML:
006666

R=0
G=102
B=102

C=100
M=60
Y=60
K=0

 HTML:
336666

R=51
G=102
B=102

C=80
M=60
Y=60
K=0
HTML:
CCFFFF

R=204
G=255
B=255

C=20
M=0
Y=0
K=0

 HTML:
99FFFF

R=153
G=255
B=255

C=40
M=0
Y=0
K=0

 HTML:
66FFFF

R=102
G=255
B=255

C=60
M=0
Y=0
K=0

 HTML:
33FFFF

R=51
G=255
B=255

C=80
M=0
Y=0
K=0

 HTML:
00FFFF

R=0
G=255
B=255

C=100
M=0
Y=0
K=0

 HTML:
00CCCC

R=0
G=204
B=204

C=100
M=20
Y=20
K=0
HTML:
99FFCC

R=153
G=255
B=204

C=40
M=0
Y=20
K=0

 HTML:
66FFCC

R=102
G=255
B=204

C=60
M=0
Y=20
K=0

 HTML:
33FFCC

R=51
G=255
B=204

C=80
M=0
Y=20
K=0

 HTML:
00FFCC

R=0
G=255
B=204

C=100
M=0
Y=20
K=0

 HTML:
33CCCC

R=51
G=204
B=204

C=80
M=20
Y=20
K=0

 HTML:
009999

R=0
G=153
B=153

C=100
M=40
Y=40
K=0
HTML:
66CC99

R=102
G=204
B=153

C=60
M=20
Y=40
K=0

 HTML:
33CC99

R=51
G=204
B=153

C=80
M=20
Y=40
K=0

 HTML:
00CC99

R=0
G=204
B=153

C=100
M=20
Y=40
K=0

 HTML:
339966

R=51
G=153
B=102

C=80
M=40
Y=60
K=0

 HTML:
009966

R=0
G=153
B=102

C=100
M=40
Y=60
K=0

 HTML:
006633

R=0
G=102
B=51

C=100
M=60
Y=80
K=0
HTML:
66FF99

R=102
G=255
B=153

C=60
M=0
Y=40
K=0

 HTML:
33FF99

R=51
G=255
B=153

C=100
M=0
Y=40
K=0

 HTML:
00FF99

R=0
G=255
B=153

C=100
M=0
Y=40
K=0

 HTML:
33CC66

R=51
G=204
B=102

C=80
M=20
Y=60
K=0

 HTML:
00CC66

R=0
G=204
B=102

C=100
M=20
Y=60
K=0

 HTML:
009933

R=0
G=153
B=51

C=100
M=40
Y=80
K=0
HTML:
99FF99

R=153
G=255
B=153

C=40
M=0
Y=40
K=0

 HTML:
66FF66

R=102
G=255
B=102

C=60
M=0
Y=60
K=0

 HTML:
33FF66

R=51
G=251
B=102

C=80
M=0
Y=60
K=0

 HTML:
00FF66

R=0
G=255
B=102

C=100
M=0
Y=60
K=0

 HTML:
339933

R=51
G=153
B=51

C=80
M=40
Y=80
K=0

 HTML:
006600

R=0
G=102
B=0

C=100
M=60
Y=100
K=0
HTML:
CCFFCC

R=204
G=255
B=204

C=20
M=0
Y=20
K=0

 HTML:
99CC99

R=153
G=204
B=153

C=40
M=20
Y=40
K=0

 HTML:
66CC66

R=102
G=204
B=102

C=60
M=20
Y=60
K=0

 HTML:
669966

R=102
G=153
B=102

C=60
M=40
Y=60
K=0

 HTML:
336633

R=51
G=102
B=51

C=80
M=60
Y=80
K=0

 HTML:
003300

R=0
G=51
B=0

C=100
M=80
Y=100
K=0
HTML:
33FF33

R=51
G=255
B=51

C=80
M=0
Y=80
K=0

 HTML:
00FF33

R=0
G=255
B=51

C=100
M=0
Y=80
K=0

 HTML:
00FF00

R=2
G=255
B=0

C=100
M=0
Y=100
K=0

 HTML:
00CC00

R=0
G=204
B=0

C=100
M=20
Y=100
K=0

 HTML:
33CC33

R=51
G=204
B=51

C=80
M=20
Y=80
K=0

 HTML:
00CC33

R=0
G=204
B=51

C=100
M=20
Y=80
K=0
HTML:
66FF00

R=102
G=255
B=0

C=60
M=0
Y=100
K=0

 HTML:
66FF33

R=102
G=255
B=51

C=60
M=0
Y=80
K=0

 HTML:
33FF00

R=51
G=255
B=0

C=80
M=0
Y=100
K=0

 HTML:
33CC00

R=51
G=204
B=0

C=80
M=20
Y=100
K=0

 HTML:
339900

R=51
G=153
B=0

C=80
M=40
Y=100
K=0

 HTML:
009900

R=0
G=153
B=0

C=100
M=40
Y=100
K=0
HTML:
CCFF99

R=204
G=255
B=153

C=20
M=0
Y=40
K=0

 HTML:
99FF66

R=153
G=255
B=102

C=40
M=0
Y=60
K=0

 HTML:
66CC00

R=102
G=204
B=0

C=60
M=20
Y=100
K=0

 HTML:
66CC33

R=102
G=204
B=51

C=60
M=20
Y=80
K=0

 HTML:
669933

R=102
G=153
B=51

C=60
M=40
Y=80
K=0

 HTML:
336600

R=51
G=102
B=0

C=80
M=60
Y=100
K=0
HTML:
99FF00

R=153
G=255
B=0

C=40
M=0
Y=100
K=0

 HTML:
99FF33

R=153
G=255
B=51

C=40
M=0
Y=80
K=0

 HTML:
99CC66

R=153
G=204
B=102

C=40
M=20
Y=60
K=0

 HTML:
99CC00

R=153
G=204
B=0

C=40
M=20
Y=100
K=0

 HTML:
99CC33

R=153
G=204
B=51

C=40
M=20
Y=80
K=0

 HTML:
669900

R=102
G=153
B=0

C=60
M=40
Y=100
K=0
HTML:
CCFF66

R=204
G=255
B=102

C=20
M=0
Y=60
K=0

 HTML:
CCFF00

R=204
G=255
B=0

C=20
M=0
Y=100
K=0

 HTML:
CCFF33

R=204
G=255
B=51

C=20
M=80
Y=0
K=0

 HTML:
CCCC99

R=204
G=204
B=153

C=20
M=20
Y=40
K=0

 HTML:
666633

R=102
G=102
B=51

C=60
M=60
Y=80
K=0

 HTML:
333300

R=51
G=51
B=0

C=80
M=80
Y=100
K=0
HTML:
CCCC66

R=204
G=204
B=102

C=20
M=20
Y=60
K=0

 HTML:
CCCC33

R=204
G=204
B=51

C=20
M=20
Y=80
K=0

 HTML:
999966

R=153
G=153
B=102

C=40
M=40
Y=60
K=0

 HTML:
999933

R=153
G=153
B=51

C=40
M=40
Y=80
K=0

 HTML:
999900

R=153
G=153
B=0

C=40
M=40
Y=100
K=0

 HTML:
666600

R=102
G=102
B=0

C=60
M=60
Y=100
K=0
HTML:
FFFFFF

R=255
G=255
B=255

C=0
M=0
Y=0
K=0

 HTML:
CCCCCC

R=204
G=204
B=204

C=20
M=20
Y=20
K=0

 HTML:
999999

R=153
G=153
B=153

C=40
M=40
Y=40
K=0

 HTML:
666666

R=102
G=102
B=102

C=40
M=40
Y=40
K=0

 HTML:
333333

R=51
G=51
B=51

C=80
M=80
Y=80
K=0

 HTML:
000000

R=0
G=0
B=0

C=100
M=100
Y=100
K=0



Yazıyı istediğimiz yere yerleştirmek

Yazıların sayfanın neresinde durması gerektiğine biz karar verebiliriz. Hiçbir şey yazmazsak, Sayfanın solunda dururlar.

<center>....</center>

Yazınızı <center>....</center> arasına yazarsanız. Sayfanın ortasında görünür.

<p> Paragraf yapmak için kullanılır. Ayrıca yazı yerleştirmelerinde de işe yarar.
Sola dayalı olması için:
<p>Yazınızı buraya yazacaksınız</p>
Ortada olması için:
<p align=center>Yazınızı buraya yazacaksınız</p>
Sağa dayalı olması için:
<p align=right>Yazınızı buraya yazacaksınız</p>

 

Satırbaşı ve paragraf yapmak

 
<br>

Klavyede yazarken alt satıra inmek için enter tuşunu kullanıyorsunuz. Ama web sayfası hazırlarken bu işe yaramaz. Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür.
 

Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir.

<p>

Bu iki komutun diğerlerinden bir farkı var.

Yazdığınız her komutu "/" işaretiyle kapatmak zorundasınız ama bu ikisinde bunu yapmanız gerekmez.



Kalın, eğik ve altı çizgili yazmak

Bazen yazımızın diğer yazılardan ayrılması için onu daha belirgin yapmamız gerekir. Bunun adı: "Bold" yapmak, yani yazıyı daha kalın ve siyah yazmak.
 
Kalın (Bold) yazı
<b>Yazınızı buraya yazacaksınız</b>

 

Yazıyı eğik yazmak için kullanacağınız kod ise böyle...
Eğik (İtalik) yazı
<i>Yazınızı buraya yazacaksınız</i>

Yazınızın altına çizgi çekmek istiyorsanız bu kodu kullanacaksınız.

Ama dikkat etmeniz gereken birşey var. Biliyorsunuz, link verilen kelimelerin de altı çizgili oluyor. Yani altı çizgili bir kelime gördüğümüzde aklımıza gelen şey başka bir sayfaya gidecek olmamız...

Siz link vermediğiniz kelimeleri altı çizgili yaparsanız, insanları yanıltmış olacaksınız. Onun için dikkat edin ...
 
Altı çizgili (underline) yazı
<u>Yazınızı buraya yazacaksınız</u>

Peki... Hem kalın hem eğik yazmak istersek ne yapacağız?
O zaman her iki kodu da peşpeşe kullanacağız.
Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peşpeşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın.

 
<b><i> Yazınızı buraya yazacaksınız</i></b>



Web sayfanıza Resim eklemek

Merhaba arkadaşlar,
Bakıyorum bayağı ilerlediniz.. Yakında beni bile geçeceksiniz.

Bu hafta sizlerle sayfamıza resim yerleştirmeyi öğrenelim... Size bir sır vereyim mi? Bu dersleri çalışırken winamp'ı açalım ve öyle çalışmaya başlayalım:) Böylece hem eğlenir hem öğreniriz ...

Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır. Bu grafiklere biz resim diyelim:) Mesela buttonlar yaptık bunları nasıl yerleştireceğiz? Gelin şimdi bunu öğrenelim...

Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src="resmin adı" etiketidir. Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız. Şimdi bunu bir örnekle gösterelim:
Resim ekliyoruz

<html>
<head>
<title>Sayfamızda Resim </title>
</head>
<body>
<p><img src="cicek.jpg">
</body>
</html>

Evet işte oldu sayfamıza resmimizi yerleştirdik. Ama şimdi sadece solda duruyor.

Ortaya ya da sağa hizalanması isteseydik, aşağıdaki kodları yazmamız gerekecekti.

Resmin ortaya hizalanması
<img src="cicek.jpg align="center">

Resmin sağa hizalanması
<img src="cicek.jpg" align="right">

 

Resmimizin boyutlarını da belirleyebiliriz.
Bunun için resmin genişliğini ve yüksekliğini yazmamız gerekir. "width=230 height=252" etiketlerini kodumuza ekleriz.

<img src="cicek.jpg" width=230 height=252>

Resmin üzerine gelince görünen yazı

Mouse'umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir.
<img src="cicek.jpg" width=230 height=252 alt="DayDay web sitene hoşgeldin ">
DayDay web sitene hoşgeldin <img src=" width="77" height="137" src="http://www.webdersleri.com/web-internet/html/resim/misra.gif" />
Mısra'nın resminin üzerine gelin bakalım

Şimdi bir hatırlatma... Resimlerimiz ile .htm dosyalarımız aynı klasörde olmalı. Yoksa resimlerimiz gözükmez. Onun yerine bir çarpı işareti görmekte pek hoş olmaz...





Tablo yapmayı öğreniyoruz

Web sayfanızdaki yazı ve resimlerin bulunduğu yeri denetlemek için kullanacağınız şey tablolardır. Her tabloda dikey ve yatay istediğiniz kadar hücre oluşturabilirsiniz. Bu hücrelerin büyüklüklerini siz belirleyebilirsiniz. Böylece yazıdığınız yazılar tam olarak istediğiniz yerde durabilir.

Tablo için kullanacağımız temel etiketler aşağıdakilerdir.

Tablo oluşturmak için
<table> </table>
Yatay hücre oluşturmak için
<tr>
Dikey hücre oluşturmak için
<td>
6 bömüme (hücreye) ayrılmış bir tablo yapalım

<table border="1">

<tr>
 
 <td>Birinci sırada Hücre1</td>
 <td>Birinci sırada Hücre2</td>
 <td>Birinci sırada Hücre3</td>
 
</tr>


<tr>
 <td>İkinci sırada Hücre1</td>
 <td>İkinci sırada Hücre2</td>
 <td>İkinci sırada Hücre3</td>
</tr>

</table> 
Birinci sırada Hücre1
Birinci sırada Hücre2
Birinci sırada Hücre3
İkinci sırada Hücre4
İkinci sırada Hücre5
İkinci sırada Hücre6
Hücremin içi renkli olsun (bgcolor)
<table>
<tr>
<td bgcolor="red">
kırmızı hücrem oldu</td>
</tr>
</table>
Kırmızı hücrem oldu
 
Hücremin içinde resim istiyorum (background)
<table>
<tr>
<td background="deneme.gif">
Heeyy burada kablumbiklerim vaarr</td>
</tr>
</table>
Heeyy burada kablumbiklerim vaarr

 
Hücremin kenar kalınlığını değiştirmek istiyorum (border)
<table border="10">
<tr>
<td>kenarı kalın oldu</td>
</tr>
</table>

<table border="1">
<tr>
<td>kenarı ince oldu</td>
</tr>
</table>
kenarı kalın oldu
kenarı ince oldu
Hücremin kenarını renkli yapmak istiyorum (bordercolor)
<table border="10" bordercolor="green">
<tr>
<td>kenarını yeşil yaptım</td>
</tr>
</table>
kenarını yeşil yaptım

Hücremin içini de renkli yapmak istiyorum (bgcolor)
<table border="10" bordercolor="red">
<tr bgcolor="yellow">
<td>kenarını yeşil yaptım</td>
</tr>
</table>
içi sarı kenarı kırmızı
Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ")
<table border="10" width="300" height="80" >
<tr>
<td>genişliği 250 yüksekliği 80 piksel</td>
</tr>
</table>
genişliği 300 yüksekliği 80 piksel
Hücremin içindeki yazı sağda olsun (align=" ")
<table border="1" width="150" height= "100">
<tr>
<td align="right">
DayDay</td>
</tr>
</table>
DayDay
Hücremin içindeki yazı altta olsun (valign=" ")
<table border="1" width="150" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>
DayDay
Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan)
<table border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td colspan="2">4</td><td>5</td>
</tr>
<tr><td>6</td><td>7</td><td>8</td>
</tr>
</table>
1
2
3
4
5
6
7
8
Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan)
<table border= "1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td >4</td><td> rowspan="2">5</td><td>6</td>
</tr>
<tr><td>7</td><td>8</td>
</tr>
</table>
1
2
3
4
5
6
7
8
Yazılarım hücrenin kenarına değmesin (cellpadding)
<table border="1" cellpadding="15">
<tr>
<td>Değmiyor</td>
</tr>
</table>
Değmiyor
Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing)
<table border="1" cellspacing="15">
<tr>
<td>Etrafında boşluk var</td>
</tr>
</table>
Canım sıkılıyor

Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur.





Yazıya link vermek

Yazılara nasıl link verilir?

Bu hafta da yazılara link vermeyi öğreneceğiz. Kendi sayfamızda veya başkasının sayfasına geçmek için kullandığımız bağlatılara link denir.
Link vermenin etiketi <A> yani "anchor" ingilizce de gemi demirine verilen isimdir. Yani gemileri birbirine bağlamaya yaran bu demir HTML de bizim sayfalarımızı birbirine bağlamaya yarar.


Bir yazıya nasıl link veriririz?
Bir yazıya link vermek istediğimizde şu kodları yazarız:
(Kalın olarak yazılan yere kendi linkinizi yazacaksınız):

<a href="http://buraya vermek istediğiniz linki girin/"> Buraya linkin adını yazın (örnek: ikinci sayfa)</a>

 
Linkimizin yazısını nasıl renklendiririz?
Bazen linkimizin renkli olmasını isteriz. Mesela tıklanmadan önce mavi olan linkimiz tıklandıktan sonra kırmızıya dönüşür. Bunun olmasını istemezsek linkimizi tek renk yapabiliriz bunun için body taginin yanına renk kodlarımızı yazarız:
(kodlarımızı aşağıdaki gibi yazarsak siyah bir linkimiz olur. Renk kodlaması için tıklayın..)
<body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000">
Linkimizin altında açıklama çıkmasını istiyorsak (title)

Bazen linkimizin altında açıklama çıkmasını isteriz. Bunun için kullanacağımız kod "title" dır:

<a href="http://adresiniz" title="açıklaması">
(örnek için aşadağıdaki linkin üzerine farenizi getirin ve biraz bekleyin)

Webdersleri hepsini açıklar
e-postamıza link verelim(mailto)

Sayfamızda e-postamıza da link verebiliriz. Böylece sayfamızı ziyaret edenler bizimle bağlantı kurabilir. Sitemiz hakkındaki düşünceleri söyleyebilirler. Şimdi bir e-posta bağlantısı nasıl olur onu görelim. e-posta linkini A etiketinin yanına "mailto" etiketini eklemek ile yaparız:

<a href="mailto:serenity@webdersleri.com "> serenity@webdersleri.com </a>

serenity@webdersleri.com
Yukarıdaki linkimize tıkladığınız zaman bilgisayarınızda yüklü olan mail programı devreye girecektir. Böylece kolaylıkla o sitenin webmasterı ile bağlantı kurabilirsiniz.. (Şimdilik ben kendi e-mailimi yazdım.
Siz sayfanızda kendi e-postanızı yazacaksınız..)

Genelde en çok kullanılan mail programı Microsoft'un Outlook Express isimli programıdır. Eğer bilgisayarınızda Windows işletim sistemi yüklü ise bu program da otomatik olarak kurulu olacaktır.

Yazımızın üzerine faremizi getirdiğimiz zaman rengini değiştirmek için CSS bilmemiz gerekiyor. Bunu da o zaman anlatalım olur mu?
CSS ile sayfalarımız daha dinamik olur.. Bunu da unutmadan söyleyelim.
Sıralı Liste Nasıl Yapılır?

Bazen sayfamız da listeler kullanmak zorunda kalırız. Mesela sevdiğimiz müzik türlerini düzene sokmamız gerekebilir. Şimdi sıralı listelere birkaç örnek verelim:

Numaralı (ya da) başka tür listeler yapalım:
Bilgilerimizi düzene sokmamıza yarayan sıralı listeler <OL> </OL> etiketlerinin arasına < LI> ekliyerek yapılır.

En sevdiğim hayvanlar:
<ol>
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol>
Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:

En sevdiğim Hayvanlar:

  1. Kediler
  2. Köpekler
  3. Balıklar
  4. Kuşlar
Sıralı listemizin sıra numarasını Roma Rakamları ile göstermek istersek <OL> etiketimizin yanına "type" değerinin yanına Roma Rakamlarından birini yazarız.
(Mesela I ):
En sevdiğim hayvanlar:
<ol type="I">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol>
Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:

En sevdiğim Hayvanlar:

  1. Kediler
  2. Köpekler
  3. Balıklar
  4. Kuşlar
 
Listemizin Sıralamasında Harfler kullanalım (type)
Listelerimizin sıralanmasnda rakam değil de harf kullanmak istiyorsak <OL> etiketinin yanındaki "type" değerinin karşısına "a" yazmamız yeterli.. Belli bir harften başlamanız gerekiyorsa start etiketini kullanmanız gerekiyor... Hangi harften başlamasını istiyorsanız onun sıra numarasını yazmalısınız...
En sevdiğim hayvanlar:
<ol type="a">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol> 		En sevdiğim Hayvanlar:
<ol type="a" start="3">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol>
Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:

En sevdiğim Hayvanlar:

  1. Kediler
  2. Köpekler
  3. Balıklar
  4. Kuşlar

En sevdiğim Hayvanlar:

  1. Kediler
  2. Köpekler
  3. Balıklar
  4. Kuşlar

Bugün sayılı listeleri öğrendik. Bir de sayısız listeler ve Tanımlama Listeleri var... Bunları da bir sonraki dersimizde öğreneceğiz.
Ne kadar çok deneme yaparsak o kadar çok şey öğreniriz. Bunu unutmuyoruz değil mi? Denemekten bıkmayın..
Bir de gezdiğiniz web sitelerinin kaynak kodlarını incelerseniz nasıl yapıldığını anlayabilirsiniz.


Sırasız Liste Nasıl Yapılır?

Şimdi de sırasız listeleri öğrenelim. Yani bir sıraya dizilmemiş, numaralandırılmamış listeler böyledir.
Listemizin başında minicik noktalar olur:)

Sırasız liste yapıyoruz:
Sırasız liste <UL> etiketi ile başlar </UL> etiketi ile biter.
Aynı sıralı listelerdeki gibi <li> etiketleri arasına yazılır:
En sevdiğim müzik türleri:
<ul>
<li>POP
<li>Jazz
<li>Modern
</ul>
Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:
En sevdiğim Müzik türleri:
  • POP
  • Jazz
  • Modern
İçi dolu, İçi Boş ve Kare noktacıklar:

<UL> etiketin yandaki "type" değerinin karşısına "DISC" yazarsak içi dolu dairemiz, "CIRCLE" yazarsak, içi boş dairemiz ve "SQUARE" yazarsak köşeli bir noktamız olur. Şimdi bir örnek verelim:

En sevdiğim müzik türleri:
<ol type="disc">
<li>POP
</ol>
<ol type="circle">
<li>Jazz
</ol>
<ol type="square">
<li>Modern
</ol>
Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:

En sevdiğim Müzik türleri:

  1. POP
  1. Jazz
  1. Modern
Hem sayılı hem de sıralı listeler:
Bazen de listemizin hem sayı ile listenemesini aynı zamanda da normal bir şekilde listelenmesini isteriz.. Bunun için:
<ol>
<li>En sevdiğim yaz meyveleri:
<u>
<li>Kayısı
<li>Şeftali
<li>Erik
<li>Üzüm
</ul>
<br>
<li>En sevdiğim kış meyveleri:
<ul>
<li>Portakal
<li>Mandalina
<li>Nar
<li>Ayva
</ul>
</ol>
Bu kodların oluşturduğu liste aşağıdaki gibidir:

 

  1. En sevdiğim yaz meyveleri
    • Kayısı
    • Şeftali
    • Erik
    • Üzüm

     
  2. En sevdiğim Kış meyveleri
    • Portakal
    • Mandalina
    • Nar
    • Ayva
 

Tanımlama Listeleri nasıl yapılır?

Tanımlama listeleri <dl> etikeli ile başlar </dl> etiketi ile biter. Listenin maddeleri <dd> , <dt> etiketleri arasına yazılır.

<dl>
<dt><font size="3" color="red"> En sevdiğim hayvanlar</font>
<dd>Kediler ve kaplumbağalardır. 2 kedim var. Biri beyaz biri sarman. İsimleri ipekpisi ve sütlü... Kaplumbağalarım suda yaşıyan cinsten ve onlar da iki tane...
<dt>En Sevdiğim çiçekler
<dd>Papatyalara bayılırım. Her türlü kır çiçeğini severim. Tabii beyaz gülleri de...
<dt>En sevdiğim yemekler
<dd>Köfte ve pilav başta gelir. Kurufasulye, karnıyarık ve biber dolmasını çok severek yerim
</dl>
Bu kodların oluşturduğu liste aşağıdaki gibidir:
En sevdiğim hayvanlar
Kediler ve kaplumbağalardır. 2 kedim var. Biri beyaz biri sarman. İsimleri ipekpisi ve sütlü... Kaplumbağalarım suda yaşıyan cinsten ve onlar da iki tane...
En Sevdiğim çiçekler
Papatyalara bayılırım. Her türlü kır çiçeğini severim. Tabii beyaz gülleri de...
En sevdiğim yemekler
Köfte ve pilav başta gelir. Kurufasulye, karnıyarık ve biber dolmasını çok severek yerim

 
BUGÜN 3 ziyaretçiburdaydı! TEŞEKKÜR EDER YİNE BEKLERİZ
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol