BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 

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.
bgcolorSayfanı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">
textSayfanızdaki metinlerin rengini belirler<body text="#2354FF">
linkSayfanızdaki bağlantıların tıklanmamış durumdaki rengini belirler.<body link="yellow">
alinkSayfanızdaki bağlantıların tıklama işlemi süresince alacağı rengi belirler<body >
vlinkSayfanı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:
alignKonum belirler;left,center,right değerlerini alabilir.<hr align="right">

sizeÇizginin piksel cinsinden kalınlığı<hr size="20" >

widthPiksel 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:

hrefBağlantının adresi bu parametreyle bildirilir<a href="http://www.sayfaAdı.com>Sayfa Adı</a>
Sayfa Adı
targetSayfanı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.

srcResmin bulunduğu dizini bu parametre ile bildiririz<img src="deneme.gif">
widthResmin genişliğini piksel cinsinden bildirir<img src="deneme.gif" width="100">
heightAynı şekilde resmin yüksekliğini bildirir.<img src="deneme.gif" height="100">
borderResmin etrafındaki çizginin kalınlığını belirtir.<img src="deneme.gif" border="6">
alignYatay konum belirler;left,right,center değerlerini alır.<img src="deneme.gif" align="left">
altMouse resmin üzerindeyken yazacağınız meni gösterir<img src="deneme.gif alt="Buraya açıklama yazın!">
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.
  1. CD ROM
    1. 30X
    2. 40X
    3. 50X
  2. DVD
    1. 4X
    2. 8X
    3. 12X
      <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.
  • CD ROM
    • Read only
      • 30X
      • 40X
      • 50X
    • Writer
      • 8X
      • 10x
      • 12X
      <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.



CD ROM
Her ne kadar yerini yavaş yavaş DVD rom'lara bıraksa da, halen birçok kişi tarafından kullanılıyor.
DVD ROM
Bu yeni teknoloji CD'lere göre çok daha fazla boş alan sunuyor.
<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.

Hücre1Hücre2Hücre3
Hücre4Hücre5Hücre6
      <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...


bgcolorHücrenin içinin rengini belirler.<table>
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
backgroundHücre içine resim koyar.<table background="deneme.gif">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
borderHücre etrafına yerleştireceğiniz çerçevenin kalınlığını belirler<table border="5">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
bordercolorÇerçeve rengini belirler<table border="5" bordercolor="teal">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
bordercolorlightÇerçevenin sol ve üst kenarlarının rengini belirler<table border="5" bordercolorlight="aqua">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
bordercolordarkÇerçevenin sağ ve alt kenarlarının rengini belirler.<table border="5" bordercolordark="blue">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
alignHücrenin yatay konumu belirler<table align="right">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
cellspacingHücre etrafındaki çerçevenin kalınlığını belirler.<table border="1" cellspacing="10">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
cellpaddingHü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>
Hücre

 <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>
Hücre
background<table>
<tr>
<td background="deneme.gif">
Hücre</td>
</tr>
</table>
Hücre
align<table border="1" width="100" height= "100">
<tr>
<td align="right">
Hücre</td>
</tr>
</table>
Hücre
valign<table border="1" width="100" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>
Hücre
bordercolor<table border="1">
<tr>
<td bordercolor="blue">
Hücre</td>
</tr>
</table>
Hücre
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>
123
45
678
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>
123
456
78
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çenek20 Mb100$/yıl
2.seçenek50 Mb150$/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İHIZCd-Dvd rom'lar
CD-ROM30X40X50X60X
DVD10X12X



<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

 
Top