top of page
code-1689066_1280.jpg

    Eğer amacınız websitesi tasarımlarında yükselmek ise doğru yerdesiniz. HTML (Hypertext Markup Language, Hiper Metin İşaretleme Dili) bir program değil, zaten bilgisayarda var olan bir kodlama dilinin kullışıdır. Bunu öğrendikten sonra CSS ile (veya daha da ilerlemek isterseniz JavaScript ile) tasarımınızı renklendirebilirsiniz.

HTML'ye Hazırlık ve Deneme

    HTML çalıştırmak için bir program gerekmediğinden, öğrenirken hiç beklemeden deneme fırsatımız oluyor (ki en sevdiğimiz özelliği rahatça deneme imkanı). Şimdi hiç beklemeden en hızlı çalışan not defterinizi açın. Dosya uzantılarını değiştirebildiğinize emin olun (.txt'yi ara ara .html yapacağız). Eğer dosya türleri sizde gözükmüyorsa, bu şekilde aktive edebilirsiniz :

Dosya Uzantıları.png

    Şimdi bir metin dosyası açın, bir şeyler karalayın (ilk 4'llüyü direk kopyalayıp deneyebilirsiniz) ve kaydedin. Ardından metin dsosyasının uzantısını html olarak değiştirin. Artık açmaya çalıştığınızda varsayılan tarayıcınızla açılacak ve bir websitesi içeriği gibi gözükecektir.

HTML SÖZLÜĞÜ  (Sv. 0      1)

    Elbette istediğiniz yerden başlayabilirsiniz, fakat kolaylık ve bütünlük olması açısından bölümlere / seviyelere ayırıyoruz. Aslında HTML'de her zaman her yerden parça bulundurulur fakat, bu sıralamayla gitmeniz sonrakilerin mantığını anlamanızda kolaylık sağlayacaktır.

  • <html>...........</html>   Html olduğunu belirtir - zarurîdir. İlk kısmı ilk kelime olarak, son kısmı son kelime olarak yazılır.

​

  • <head>........</head>   Sayfanın başlığını oluşturmaya yarar.

  • <h1>................</h1>   Başlığın büyüklüğünü ve vurgusunu belirtir. Sayıyı 6 ya kadar düşürüp vurgunun boyutunu küçültebilirsiniz.  (Başlıkta "headings kısmında kullanılması önerilmez çünkü bu, arama motorlarının başlığınızı görmesini zorlaştırır.)

  • <title>.............</title>   Head kısmının içine konur; sayfanın sekmede görünen ismidir ve arama motorlarının hedefidir.

​

  • <body>....... </body>   Sayfanın paragraflarının vs. bulunduğu şekil verilen kısmını açmaya yarar.​

  • <p>....................</p>   Bu ikisi arasına bir paragraf olacak şekilde yazı yazabilirsiniz.

​

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


💥Not! : Açılış ve kapanış etiketi mevcut olan bütün fonksiyonların kapanış etiketlerinde "/ (kesme işareti, slash)" öndedir. Tek etiket halinde kullanılan fonksiyonlarda ise sondadır. Uzun veya iç içe kodlar yazarken bunu karıştırırsanız bildiğiniz üzere kod çalışmaz, istediğiniz çıktıyı elde edemez ve hatanızı bulmak için ekstra vakit harcarsınız.
 

​
 

  • <br />     (Line Break)  Paragrafın içinde de kullanılabilinir, bundan sonraki yazılar satır başından devam eder.

  • <hr />     (Horitzontal Rule) Satır başına geçtiği gibi bir de yataylamasına çizgi koyar. Bölümleri ayırırken kullanışlı.

  • <hr width="10%" />     Çizginin genişliğini %10 düzeyine indirir. Yüzde simgesi sağda olmalı (İngilizce usulü).

  • <hr width="250px" />  Çizginin 250 piksel düzeyinde olmasını sağlar.

​



 💣Bunu biraz ayrı yazmalıyım, kullanışlı bir şey...
<!-- ... -->  : Buraya yazdığınız şey sizin kişisel notunuzdur. Sayfanızda gözükmez, sadece siz görebilirsiniz. Örneğin iki paragraf arasına, düşündüğünüz fakat şu anda yapamayacağınız bir fikir ekleyebilirsiniz. Ne siz yerini unutun, ne de başkaları rahatsızlık versin.


🎁Hizalayıcılar olarak şunları anlatabiliriz:  
 

  1. Her zaman açılış etiketinin içine yapıştırılırlar,  

  2. Altta örnek verilen yerler dışında da kullanabilirsiniz.

  3. width, align, height örnek verilebilir.



 

  • <p align="center">  : Paragrafı merkeze hizalar. Center yerine right, left falan yazabilirsiniz.

  • <hr width=%75 align="right" />  : Çizgiyi sağa hizalar ve genişliğini %75 düzeyine getirir.

  • <img witdh="10%" height="100px" />  : Resminizin boyutunu piksel veya yüzde ile ayarlayabilirsiniz.


 
  •  🎁HTML Liste oluşturucular 
 

📔Nokta kullanarak liste:              📔Numara kullanarak liste:
( Unordered List )                          ( Ordered List )
 

<ul>                                             <ol>
 

  • <li> ... </li>                                   1. <li> ... </li>

  • <li> ... </li>                                   2. <li> ... </li>


</ul>                                                 </ol>



📔Tablolu liste:

(Tr: Table row  Td: Table data Th: Table heading)
 

  • Öncelikle tabloya dair her şeyi <table>......</table> arasına yazacağımızı belirtelim.

  • Colspan  :  Kolonu birleştirirken,

  • Rowspan : Satırları birleştirir.

  • bgcolor      İsminden anlaşıldığı gibi tablonun ya da datanın arkaplan rengiyle oynar.

  • Hizalayıcıları <table> ve <td> lere de entegre edebilirsiniz.



<table border="3" align="center" bgcolor="yellow">


       <tr>
<th> Başlık 1 </th>
<th> Başlık 2 </th>
<th> Başlık 3 </th>
      </tr>


        <tr>
                 <td bgcolor="orange"> ... </td>
                 <td> ... </td>
                 <td> ... </td>
       </tr>


        <tr>
<td><br /><br /> Tarkan </td>
<td align ="left" colspan="2"><br /> İşte kuzu </td>
<td><br/> kuzu </td>
      </tr>
<table>

​

​

  • ​Gördüğünüz gibi yazmak istediğimiz her şeyi "Table Data"ya yazıyoruz. "Table Heading" ise yalnızca tablomuzun başlıkları kısmını oluştururken kullandığımız bir şey (tablo içinde tablo yapmayacaksanız tabi).

  • Tr ne işe mi yarıyor? Tablo sütunlarını oluşturmaktan başka hiçbir işe yaramadığı kesin  😂 

​

​

​

HTML.png
bottom of page