LİSTELEME ETİKETLERİ
HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır. Dokümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır.
<OL>
Sıralı liste oluşturmak için kullanılır. Sıralı listeler numaralı, alfabetik, roma rakamlı olarak gösterilir. Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. <ol> etiketine parametreler ekleyebiliyoruz.
Type parametresi listemizin rakamla mı harfle mi başlayacağını, start ise hangi rakam/harfle başlayacağını belirler.
Start değeri her zaman bir sayı olmalıdır. Yani sırayı alfabe olarak atamak ve “f” den başlamak istersek start değerini “f” değil “6”, type değerini de küçük “a” yapmalıyız.
Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar, harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi)
<UL>
Listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler yerleştirmek için <ul> etiketini kullanıyoruz. <ul> için kullanılan parametreler type ve compact’tır. Type ile kullanacağımız madde iminin şeklini seçebiliriz.
Bunlar disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.
<LI>
<li> etiketi ingilizce “liste elemanı” anlamına gelen 'list item' kelimesinin kısaltılmışıdır. Yukarıda anlatmış olduğumuz <ol> ve <ul> etiketleri tek başına kullanılmaz sırayı belirtmek için de <li> etiketi ile birlikte kullanılır. Yani sıralanacak olan ifadenin başına <li> getirmeliyiz.
<li> etiketi kapatılmayan etiketlerdendir.
<html>
<head>
<title>
Listeler
</title>
</head>
<body>
<ol type="1">
<li> Ankara
<li> İstanbul
<li> Samsun
</ol>
</body>
<html>
<html>
<head>
<title>
Listeler
</title>
</head>
<body>
<ol type=“a“ start=“4”>
<li> Ankara
<li> İstanbul
<li> Samsun
</ol>
</body>
<html>
<html>
<head>
<title>
Listeler
</title>
</head>
<body>
<ul type=“circle">
<li> Ankara
<li> İstanbul
<li> Samsun
</ul>
</body>
<html>
<html>
<head><title> Listeler </title>
</head>
<body>
<ol type="1">
<li>Ağ İşletmenliği
<ol type="a">
<li>Ağ Temelleri
<li>TCP/IP ve Adresleme
</ol>
<li>Web Programcılığı
<ol type="a" start="3">
<li>HTML
<li>Web Tasarım Editörü
<ol type="i">
<li>FrontPage
<li>Dreamweaver
</ol>
</ol>
</ol>
</body>
</html>
<html>
<head><title> Listeler </title>
</head>
<body>
<ul type=“disc">
<li>Ağ İşletmenliği
<ul type=“square">
<li>Ağ Temelleri
<li>TCP/IP ve Adresleme
</ul>
<li>Web Programcılığı
<ul type="square">
<li>HTML
<li>Web Tasarım Editörü
<ul type=“circle">
<li>FrontPage
<li>Dreamweaver
</ul>
</ul>
</ul>
</body>
</html>
<FONT>
Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi, boyut gibi özelliklerini değiştirmenize olanak sağlar. Kullanım şekli aşağıdaki gibidir.
<FONT SIZE="x" FACE="[isim] COLOR="#XXXXXX">
Face : Yazı tipi (arial, tahoma, verdana, ...)
Size : Yazının büyüklüğü (1-7 arası)
Color : Yazının rengi (red, green gibi renklerin ingilizce karşılığı ya da RGB renk değeri)
“COLOR” PARAMETRESİ
Yazının rengini (red, green gibi renklerin ingilizce karşılığı ya da RGB renk değeri) belirler. HTML'de renkler hexdecimal sayı sisteminde ifade edilir. Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur ve önüne “#” (diyez) karakteri konulur.
“#ffffff” “#123456” “#ff00aa” gibi.
RGB renk düzeni İngilizce olarak (Red-Green-Blue) renklerin baş harflerinde oluşan sistemdir. Bu sistem 16’lık sayı sistemindeki sayılardan ve 6 haneden oluşur. Buradaki ilk iki hane kırmızı renk miktarını (Red), sonraki iki hane yeşil renk miktarını (Green) son iki hane ise mavi renk miktarını belirtir. Bu şekilde oluşan karışımlardan 16 milyon üzerinde renk elde edilebilir.
256 * 256 * 256 = 16.777.216 renk
Örnek olarak “# FF FF FF” yani koyu kırmızı, koyu yeşil ve koyu mavinin karışımından BEYAZ renk elde edilir.
# 00 00 00 Siyah
# FF 00 00 Kırmızı
# 00 AA 00 Açık Yeşil
# FF FF 00 Sarı
Bir resim içerisinde görüp hoşunuza giden rengin RGB kodlarını öğrenmek için resim düzenleme programlarını kullanabilirsiniz (Photoshop, Fireworks)
“FACE” PARAMETRESİ
Sayfada kullanacağınız yazı tiplerini bu parametreyle belirleriz. Burada dikkat edeceğimiz nokta bilgisayarımızda bulunan ve çoğunlukla tüm bilgisayarlarda bulunabilecek fontları tercih etmeliyiz. Bilgisayarımızda hangi fontların bulunduğunu c:Windowsfonts klasörü altında görebiliriz.
Burada dikkat edilecek bir noktada bizim bilgisayarımızda bulunan bir font’u kullanabiliriz ancak sayfamızı ziyaret eden kullanıcının bilgisayarında kullandığımız font bulunmuyorsa sayfayı tasarladığımız şekilde kullanıcıya ulaştıramayabiliriz. Bu yüzden dünya üzerinde genel olarak kullanılan fontları tercih etmek doğru olacaktır. Times New Roman, Arial gibi.
<html>
<head><title>font komutu</title>
</head><body>
<font face="comic sans ms" size="7"
color="Blue">Samsun</font><br>
<font size="5">Atakum</font>
<font color="#ff0000">Teknik ve Endüstri Meslek Lisesi</font><br>
<font face="tahoma">Bilişim Teknolojileri
Alanı</font><br>
</body>
</html>
<BGCOLOR>
Sayfanın arka plan rengini belirler. <body> belirteci ile kullanıldığında sayfa arka plan rengini; tabloda <td> etiketi ile kullanıldığında hücre rengini değiştirir.
<html>
<head>
<title>arka plan rengi</title>
</head>
<body bgcolor="aqua">
<h1> Atakum Teknik Lisesi </h1>
</body>
</html>
<head><title>Genel Örnek</title>
</head>
<body bgcolor="#ffff00">
<h1 align="center"> ÇOCUK YAŞADIĞINI ÖĞRENİR </h1><br>
<font face="Arial" size="5" color="Red">
<b>Eğer bir çocuk;</b> <br>
<i>Sürekli eleştirilmiş ise, </i> <br>
<u>Kınama ve ayıplamayı öğrenir.</u> <br>
</font><br>
<font face="Times New Roman" size="5" color="#000000">
Kin ortamında büyümüş ise,<br>
Kavga etmeyi öğrenir.<br> </font><br>
<font face="Tahoma" size="5" color="#00aa00">
Alay edip aşağılanmış ise, <br>
Sıkılıp utanmayı öğrenir. <br> <br> </font>
<font face="Tahoma" size="3" color="purple">
<p><i>Kaybetmeyi...Ahlaksız bir kazanca...Tercih et...</i>
Birincisinin acısı bir an, Ötekinin vicdan azabı bir ömür boyu sürer. Bazı idealler o
kadar değerlidir ki; o yolda mağlup olma bile zafer sayılır. Bu dünyada bırakacağın en büyük miras <b>Dürüstlüktür. </b> </p> </font>
Başarılar...
</body>
</html>
TABLOLAR
Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır.
<TABLE>
Tablolar <table> belirteci ile başlar.
<table>
……
</table>
Border parametresi hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. border=0 çerçevenin görünmemesini sağlar.
<TR> - <TD>
<TR>
Tabloda satır oluşturmayı sağlar.
<TD>
Tabloda sütun oluşturmayı sağlar.
BORDER
<table border=2>
<tr>
<td>HTML</td>
</tr>
</table>
Width - Height
Width: Tablonun pixel cinsinden genişliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul genişliği tablonuza otomatik olarak atayacaktır.
Height: Tablonun pixel cinsinden yüksekliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul yüksekliği tablonuza otomatik olarak atayacaktır.
<table border="1">
<tr><td width=100 >Kasa</td></tr>
<tr><td width=100 height=50>Fare</td></tr>
<tr><td height=40>Klavye</td></tr>
<tr><td height=80>Monitör</td></tr>
</table>
Colspan - Rowspan
Colspan : Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır.
Rowspan : Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır.
<table border="1" >
<tr>
<td>C</td><td>Delphi</td><td>Pascal</td></tr>
<tr>
<td>XML</td><td>Borland C</td><td>HTML</td>
</tr>
<tr>
<td>PHP</td><td>Basic</td><td>ASP</td></tr>
</table>
<table border="1" >
<tr>
<td colspan="2">Delphi</td>
<td>Pascal</td></tr>
<tr>
<td>XML</td>
<td>Borland C</td>
<td rowspan="2">HTML</td></tr>
<tr>
<td>PHP</td>
<td>Basic</td></tr>
</table>
Cellspacing - Cellpadding
Cellspacing : Tablonun.içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel
cinsinden ayarlar.
Cellpadding : Cellpadding değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi ayarlar. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.
<table border="1" cellspacing="5">
<tr><td>Donanım</td></tr>
<tr><td>Yazılım</td></tr>
</table>
<table border="1" cellspacing="9">
<tr><td>Donanım</td></tr>
<tr><td>Yazılım</td></tr>
</table>
Siteye Geç