Pink Bobblehead Bunny

Friday, August 24, 2012

Html öğreniyoruz vol.1 :)

Html artık herkesin nerdeyse bildiği bir dünya oldu, blogumuza gadget eklerken bile html/javascript kısmını seçebiliyoruz artık, örneğin 2 resmi yan yana koyup tıklandığında bir linke gitmesini istiyorsak yapıyoruz bir tablo bir kolonuna bir resmi diğer kolonuna öbür resmi koyuyoruz.. Şimdilik aklınızda html ile ilgili sadece temel kavramların oluşması için bazı tagler'i içeren bir html yapısı hazırladım..

Not:  <table> şeklinde başında / bulunmayan tag'lar açılış tagıdır ve </table> şeklinde bu taglerin kapatılması gerekmektedir. Aşağıdaki kodun tamamını alıp bu linkteki ekranda bulunan sol panele yapıştırıp Edit and Click Me tıkladığınız zaman sağ tarafta html'nin sonucunu görebilirsiniz.  Yada bir notepad açıp kodu içine yapıştırdığınızda kaydettiğinizde dosyanın uzantısı .txt olur onu düzeltip .html yapıp o dosyayı herhangi bir web tarayıcısı ile açarsanız html sonucunu yine görebilirsiniz ..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<!-- This is a comment.. Bu bir yorumdur -->
<!-- başlıklar -->
<h1>This is heading 1</h1>  
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<!-- Kalın yazma -->
<b>This text is bold</b>     
<strong>This text is strong</strong>  
<!-- Büyük yazma -->
<big>This text is big</big>  
<!-- Eğik yazma -->
<i>This text is italic</i>   
<em>This text is emphasized</em>   
<!-- Bilgisayar çıktısı şeklinde yazma -->
<code>This is computer output</code>
<!-- Satır altına veya üstüne yazma -->
This is<sub> subscript</sub> and <sup>superscript</sup>  
<!-- Tıklandığında link'e gönderme -->  
<a href="http://www.w3schools.com">This is a link</a>     
<!-- Satır atlama -->
<br />
<!-- Resim çağırma --> <!-- Calling an image -->           
<img src="w3schools.jpg" width="104" height="142" /><br /> 
<!-- düz çizgi.. straight line-->
<hr />  
<!-- Paragraf -->
<p>My first paragraph.</p>  

<!-- Tablo başlangıcı.. Beginning of the table -->
<table border='1'>   
   <!-- Satır başlangıcı.. Beginning of the row -->
 <tr>              
      <!-- Kolon başlangıcı/bitişi.. Beginning/Ending of the column-->
  <td>satır 1 kolon 1</td>        
      <td>satır 1 kolon 2</td>
   <!-- Satır bitişi.. Ending of the row -->
 </tr>            
   <tr> 
      <td>satır 2 kolon 1</td>
      <td>satır 2 kolon 2</td>
   </tr>
<!-- Tablo bitişi.. Ending of the table -->
</table>             
</body>
</html>

Html Nedir ?

   Html'in açılımı Hyper Text Markup Language yani Hareketli Metin İşaretleme dilidir. Bu dil bizim internet browserlarda gördüğümüz ekranları oluşturmamızı sağlarlar.. Yazılan bir takım kodları explorer, chrome, safari vs gibi browserlar kendi kütüphanelerine göre yorumlayarak bizlere gösterirler.. Html dökümanı oluşturmak çok kolaydır , herhangi bir metin dosyasının uzantısını .html şeklinde değiştirmeniz ve içini kodlarla doldurmanız yeterlidir :)
   Tabi bazı programları kullanmak da uygun olabilir öreğin benim favorim olan Dreamviewer gibi , burda en azından siz atıyorum <t yazdığınız anda onu <table> tamamlamak gibi güzel özellikleri olduğundan yazım kısmında da oldukça kolaylık sağlıyor. Ya da arka plana bir renk koyacağınız durumda rngi paletten seçmenize olanak sağlıyor. Bunun dışında FrontPage kullananlarda var tabikisi..
     Aşağıda temel olarak içinde hiçbir ek kod bulunmayan bir html sayfası örenği bulunmaktadır, yani aşağıdaki kodu alıp head ve body tag ları arasını doldurduğunuz zaman bir html sayfa çıkacaktır ortaya..  Denemeler yapmanız için link tık tık :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- charset olarak türkçeyle uyumlu olması açısından bu kod 
seçilebilir fakat isteğe göre de değiştirilebilir -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"/> 
<!-- Sayfa Başlığı -->
<title>Untitled Document</title>
<!-- head tag ları içerisine bütün dökümanda kullanılmasını 
istediğiniz kısımları yazabilirsiniz, örneğin style, css, javascript vs-->
</head>
<body>
<!-- body tag ları içerisine ise tabloları, divleri 
kısacası ekranda görünmesini istediğiniz kodları yazabilirsiniz. -->
</body>
</html>