HTML'YE GİRİŞ 1.BÖLÜM
ARKAPLAN
5. ve 6. bölümlerde öğrendiklerimizle artık metinler üzerinde biçim anlamında her türlü değişikliği yapabiliriz. Sayfa tasarımında en az metinler kadar önemli bir unsur olan arkaplan üzerinde ne gibi değişiklikler yapabileceğimizi bu bölümde öğreneceğiz. Ayrıca <body> etiketinin parametrelerini göreceğiz.
ARKAPLAN VE <body> ETİKETİ
HTML belgesinin ekranda görüntülenen bölümü olan body bölümünün başladığını browser'a <body> etiketiyle bildirdiğimizi biliyoruz. Bir etiketin herhangi bir parametresine atadığımız değer, o etiketin oluşturduğu alan içerisinde geçerlidir.Mesela:
| <font color="blue">...</font> |
ifadesi, sadece '...' ile gösterilen alan içerisine yazılanları 'mavi' yapar. Bu durumda tahmin edebileceğiniz gibi <body> etiketinin parametrelerine verilen değerler, bütün sayfa için geçerlidir.Aşağıda bu parametreleri ve kullanılışlarını görüyorsunuz.
| bgcolor | Sayfanımın arkaplanının rengini belirler | <body bgcolor="blue"> |
| background | Arkaplana .gif,.jpg gibi HTML'in yorumlayabildiği bir resim dosyası koymanızı sağlar | <body background="c:\sayfam\resim.gif"> |
| text | Sayfanızdaki metinlerin rengini belirler | <body text="#2354FF"> |
| link | Sayfanızdaki bağlantıların tıklanmamış durumdaki rengini belirler. | <body link="yellow"> |
| alink | Sayfanızdaki bağlantıların tıklama işlemi süresince alacağı rengi belirler | <body > |
| vlink | Sayfanızdaki bağlantıların tıklama işleminden sonra alacağı rengi belirler | <body > |
Burada tabloda bütünlüğü bozmamak amacıyla verilen son üç parametre, ileride deyineceğimiz link(bağlantı)larla ilgilidir, bu yüzden şimdilik bunları unutabiliriz.
NOT: 'Background' parametresini kullanırken, resminizin yerini tam olarak yazmayı ve sonuna uzantısını(.gif; .jpg vs.) koymayı ihmal etmeyin!
YATAY ÇİZGİ
Başlığın hemen üzerinde bir örneğini gördüğünüz yatay çizgileri kullanarak sayfalarınızın okunmasını kolaylaştırabilirsiniz.İşte buna olanak sağlayan <hr> etiketive parametreleri:
| align | Konum belirler;left,center,right değerlerini alabilir. | <hr align="right"> |
| size | Çizginin piksel cinsinden kalınlığı | <hr size="20" > |
| width | Piksel cinsinden uzunluk | <hr width="400"> |
| color | Çizginin rengini belirler | <hr color="blue"> |
Üç bölümün sonunda artık metinlere ve arkaplanlara iyice hakim olduk.Aşağıdaki örnek ile bilgilerimizi tekrar edelim:
| <html> <head> <title>Metin ve arkaplan uygulalaması</title> </head> <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type> <body bgcolor="green" link="red" vlink="yellow" alink="black"> <h1>Modern Futbol</h1><br><hr> <p><font face="Verdana,hevletica" color="#FFFFFF">Günümüz modern futbolunun gereği olan <b>3-5-2</b> sistemi, oynanması bir hayli zor bir sistemdir. Bu sistemde <i>orta alanın iki ucundaki</i> oyunculara büyük iş düşer.</p> <p>Modern futbolun başka bir gereği de alan savunması yapmaktır. Ancak tehlikeli santraforlar için önlem alma gereği, savunmaları bazen güç duruma düşürebilir.</p> <a href="http://www.uefa.com">İşte size faydalı bir link!</a> </font> </body> </html> |
BAĞLANTILAR VE RESİMLER
BAĞLANTILAR(LINK)
Web sayfalarında en çok kullanılan unsurlardan biri bağlantılardır.Bağlantılar ziyaretçinin bir tıklama ile, sitenizin içinde veya dışında, belirlediğiniz herhangi bir adrese gitmesini sağlar.Bağlantılar browser'a <a> etiketi ile bildirilir.İşte bu etiketin parametreleri:
| href | Bağlantının adresi bu parametreyle bildirilir | <a href="http://www.sayfaAdı.com>Sayfa Adı</a> |
| Sayfa Adı | ||
| target | Sayfanın açılacağı yeri belirler.Target parametresi,açılacak sayfa yenibir sayfa olarak açılacaksa'_blank',aynı pencere içinde açılacaksa'_self',aynı pencerere içerisinde üstten itibaren açılacaksa '_top' değerini alır. '_parent' ve 'ÇerçeveAdi' değerlerine çerçevelerkonusunda değineceğiz | <a href="http://www.sayfaAdı.com target="_blank">Sayfa adı></a> |
| Sayfa Adı | ||
'Href' parametresinin değeri sayfaadi.com gibi bir adres olabileceği gibi, örneğin deneme.zip gibi bir dosya adı da olabilir. Böyle bir bağlantıya tıklandığında browser kullanıcıya bu dosyayı indirmek isteyip istemediğini sorar. Bu özelliği kullanarak ziyaretçilerin sayfamızdan dosya indirmelerini sağlayabiliriz.
| <a href="http://www.SayfaAdi.com/dosyalar/deneme.zip">Burarya tıklayıp dosyayı indirin!</a> |
| Burarya tıklayıp dosyayı indirin! |
RESİMLER
Resimler doğru ve yerinde kullanıldığında HTML belgelerine estetik açıdan çok şeyler katabilirler;fakat büyük boyutları nedeniyle yavaş yüklenirler.Bu da ziyaretçinin sıkılmasına,hatta sayfayı terketmesine neden olabilir.Bu nedenle, en azından internet bağlantıları daha hızlı oluncaya kadar, resimleri 'az ve öz' kullanmanız doğru olacaktır.Resimler <img> etiketi aracılığıyla kullanılırlar.Aşağıda bu etiketin parametrelerini görüyorsunuz.
| src | Resmin bulunduğu dizini bu parametre ile bildiririz | <img src="deneme.gif"> |
 | ||
| width | Resmin genişliğini piksel cinsinden bildirir | <img src="deneme.gif" width="100"> |
| ||
| height | Aynı şekilde resmin yüksekliğini bildirir. | <img src="deneme.gif" height="100"> |
| ||
| border | Resmin etrafındaki çizginin kalınlığını belirtir. | <img src="deneme.gif" border="6"> |
| ||
| align | Yatay konum belirler;left,right,center değerlerini alır. | <img src="deneme.gif" align="left"> |
| ||
| alt | Mouse resmin üzerindeyken yazacağınız meni gösterir | <img src="deneme.gif alt="Buraya açıklama yazın!"> |
| ||
RESİMLERİ VE BAĞLANTILARI BİRLEŞTİRELİM
Aşağıdaki örneği yazdığınızda, üzerine tıklanınca istediğiniz bir adrese yeni pencere açan bir resim elde edersiniz.
| <a href="http://www.abecem.net" target="blank"><img src="deneme.gif" ></a> |
LİSTELER
Buraya kadar metinler ile ilgili öğrendiklerimiz biçimlendirme üzerineydi. Fakat HTML'in olanakları bununla sınırlı değil: İstenildiği takdirde HTML listeler ve tablolar aracılığıyla metinleri 'düzenlemenize' de olanak verir. Bu araçlardan ilki olan listelerin sıralanmış liste, sıralanmamış liste ve açıklama listesi olarak tercüme edilebilecek üç çeşidi bulunur.Bu listelerin kullanılışını ve farklarını aşağıdaki örneklere bakarak kolayca anlayabilirsiniz.
SIRALANMIŞ LİSTE(ORDERED LIST)
Sıralanmış listeler <ol>...</ol> etiketleri arasına yazılır,HTML bu etiketlerin arasına yazdıklarımızı isteğinize bağlı olarak rakam veya harfler kullanarak sıralar. Bu isteğimizi <ol> etiketinin type parametresiyle belirleriz. Bu prametre sıralanmış listelerde 'a', 'A', 'i', '1' değerlerini alabilir. <Ol> etiketi ile oluşturduğumuz listenin her elemanının başına <li> etiketini koyarız. Bu etiket ingilizce 'liste elemanı' anlamına gelen 'list item' kelimesinin kısaltılmışıdır.
| <ol> <li>CD ROM <ol type="i"> <li>30X <li>40X <li>50X </ol> <li> DVD <ol type="a"> <li>4X <li>8X <li>12X </ol> </ol> |
SIRALANMAMIŞ LİSTE(UNORDERED LIST)
Sıralanmamış listeler <ul>...</ul> etiketleri arasına yerleştirilir.Liste elemanları çember(circle),daire(disc) veya kare(square)'ler ile sıralanır.
| <ul> <li>CD ROM <ul type="square"> <li>Read only <ul type="circle"> <li>30X <li>40X <li>50X</li> </ul> <li>Writer <ul type="circle"> <li>8X <li>10x <li>12X</li> </ul> </li> </ul> </li> </ul> |
AÇIKLAMA LİSTESİ(DEFINITION LIST)
Açıklama listeleri <dl>...</dl> etiketleri içinde yer alır.Bu çeşit listelerde <li> etiketinin yerini <dd> ve <dt> etiketleri alır.Aşağıdaki örneğe bakarak bu etiketlerin kullanımını kolaylıkla anlayabilirsiniz.
|
| <dl> <dt>CD ROM <dd>Her ne kadar yerini yavaş yavaş DVD rom'lara bıraksa da, halen birçok kişi tarafından kullanılıyor. <dt>DVD ROM <dd>Bu yeni teknoloji CD'lere göre çok daha fazla boş alan sunuyor.</dd> </dl> |
TABLOLAR(TABLE)
Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir sayfa tasarlamak için tablolara hakim olmak gereklidir.
Tablolar <table>...</table> etiketleri arasına yazılır.<tr> etiketi bir yatay sıra oluşturulur, bu yatay sıra istenilen sayıda <td> etiketiyle hücrelere bölünür.Aşağıdaki örneğe bakarak tablo mantığını anlayabilirsiniz.
| <table border="1"><tr> <td >Hücre1</td> <td >Hücre2</td> <td >Hücre3</td> </tr> <tr> <td>Hücre4</td> <td>Hücre5</td> <td>Hücre6</td> </tr> </table> |
<TABLE> ETİKETİ VE PARAMETRELERİ
Burada width ve height parametrelerini aynen daha önce kullandığınız gibi kullanabilirsiniz...
| bgcolor | Hücrenin içinin rengini belirler. | <table> <tr> <td>Hücre</td> </tr> </table> |
| |
| background | Hücre içine resim koyar. | <table background="deneme.gif"> <tr> <td>Hücre</td> </tr> </table> |
| |
| border | Hücre etrafına yerleştireceğiniz çerçevenin kalınlığını belirler | <table border="5"> <tr> <td>Hücre</td> </tr> </table> |
| |
| bordercolor | Çerçeve rengini belirler | <table border="5" bordercolor="teal"> <tr> <td>Hücre</td> </tr> </table> |
| |
| bordercolorlight | Çerçevenin sol ve üst kenarlarının rengini belirler | <table border="5" bordercolorlight="aqua"> <tr> <td>Hücre</td> </tr> </table> |
| |
| bordercolordark | Çerçevenin sağ ve alt kenarlarının rengini belirler. | <table border="5" bordercolordark="blue"> <tr> <td>Hücre</td> </tr> </table> |
| |
| align | Hücrenin yatay konumu belirler | <table align="right"> <tr> <td>Hücre</td> </tr> </table> |
| |
| cellspacing | Hücre etrafındaki çerçevenin kalınlığını belirler. | <table border="1" cellspacing="10"> <tr> <td>Hücre</td> </tr> </table> |
| |
| cellpadding | Hücre içindeki elemanların (metin, resim, vs.) çerçeveden uzaklığını belirler. | <table border="1" cellpadding="10"> <tr> <td>Hücre</td> </tr> </table> |
|
<TR> ve <TD> ETİKETLERİ
<TR> etiketi, üzerine <td> etiketiyle hücreler döşenmesi için yatay bir sıra,bir platform oluşturur.Dolayısıyla bu etiketin parametreleri herhangi bir işimize yaramaz. Tablo içindeki bütün düzenlemeleri aşağıda parametreleri verilen <td> etiketiyle yapabiliriz.
| bgcolor | <table> <tr> <td bgcolor="teal"> Hücre</td> </tr> </table> |
| |||||||||
| background | <table> <tr> <td background="deneme.gif"> Hücre</td> </tr> </table> |
| |||||||||
| align | <table border="1" width="100" height= "100"> <tr> <td align="right"> Hücre</td> </tr> </table> |
| |||||||||
| valign | <table border="1" width="100" height="100"> <tr> <td valign="bottom"> Hücre</td> </tr> </table> |
| |||||||||
| bordercolor | <table border="1"> <tr> <td bordercolor="blue"> Hücre</td> </tr> </table> |
| |||||||||
| 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> |
| |||||||||
| 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> |
| |||||||||
Yukarıdaki parametrelerden colspan yatay eksen üzerindeki iki hücreyi birleştirmek için kullanılır. Bu parametreye değer olarak birleşecek hücre sayısı verilir. Rowspan ise bu işi dikey eksen üzerindeki iki hücre için yapar. diğer parametrelerin kullanımlarını zaten başka etiketler üzerinde gördük.
TABLO UYGULAMALARI
Bu uygulamaları önce kendiniz yapmaya çalışın, eğer takılırsanız kodlarından faydalanın.
| Uygulama |
| Küçük bir tablo uygulaması |
| <table> <tr> <td width="300" bgcolor="teal" align="center">Uygulama</td> </tr> <tr> <td height="200" bgcolor="silver" align="center">Küçük bir tablo uygulaması</td> </tr> </table> |
| Hosting | ||
| 1.seçenek | 20 Mb | 100$/yıl |
| 2.seçenek | 50 Mb | 150$/yıl |
| <table cellpadding="10" border=1> <tr> <td colspan="3" align="middle" bgcolor="red" >Hosting</td> </tr> <tr> <td bgcolor="teal">1.seçenek</td> <td align="middle">20 Mb</td> <td align="middle">100$/yıl </td> </tr> <tr> <td bgcolor="teal">2.seçenek</td> <td align="middle">50 Mb</td> <td align="middle"> 150$/yıl</td> </tr> </table> |
| SÜRÜCÜ CİNSİ | HIZ | Cd-Dvd rom'lar | |||
| CD-ROM | 30X | 40X | 50X | 60X | |
| DVD | 10X | 12X | |||
| <table BORDER="1" bgcolor="silver" bordercolor="black"> <tr> <td bgcolor="red">SÜRÜCÜ CİNSİ</td> <td bgcolor="red" colspan="4" align="center">HIZ</td> <td bgcolor="teal" color="white" rowspan="3"> Cd-Dvd rom'lar</td> </tr> <tr> <td>CD-ROM</td> <td>30X</td> <td>40X</td> <td>50X</td> <td>60X</td> </tr> <tr> <td>DVD</td> <td colspan="2">10X</td> <td colspan="2">12X</td> </tr> </table> |
Bizi Takip Edin
Pinterest Facebook Twitter
© by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.
Yorum Gönder Blogger Facebook