HTML Başlangıç

HTML web tasarlama da en alt düzey ve ilk başlanması gereken kodlama türüdür. HTML kodlama dili aslında ana dildir. HTML kodlama dili ile web site tasarımları oluşturulabilir fakat HTML tek başına yetersiz kalmaktadır. CSS, Java Script, PHP gibi kodlama dillerinin de yardımını alarak gerçekten etkileyici tasarımlar çıkartabilirsiniz. Lakin her şeyden önce sabır gereklidir. Yazılım dünyası ciddi anlamda sabır gerektiren, emek gerektiren ve zamanın iyi değerlendirilmesini gerektiren bir iştir.

HTML ile başlayalım. Şimdi sizlere temel bilgileri vereceğim. HTML de;

<html>
   <title> Sayfa Başlığı </title>
   <head>
      <-- CSS Kodları -->
   </head>
   
   <body>
      HTML Kodları ve yazılarınızı bu alana yazarsınız.
   </body>
</html>

Yukarıda görmüş olduğunuz yazı şekli HTML kodlama dilinin genel yapısıdır. ‘<>’ bu parantezler ile kodlama taglarını yazarsınız. Kodlamaya html ile başlanmaktadır. Sonra ki kısmı ise ‘title’ yani sayfa başlığı olur. Bu kısma sayfanızın ana başlığını yazarsınız. Sitenizin genel başlığı değil sayfa başlığını yazarsınız. Örneğin sitenizin adı Tech Software 360 sayfa başlığınız Web Tasarım Dersleri ise title alanına Web Tasarım Dersleri yazabilirsiniz. Bir sonraki adım ise ‘head’ kısmıdır. Buraya CSS kodlarınızı harici ya da dâhili olarak yazabilirsiniz. Harici farklı bir dosya oluşturup o dasyanın sadece url kısmını yazarsınız. Dâhili de ise direk kodlamanızı head kısmının içerisine yazarsınız. CSS derslerimizi verince çok daha iyi anlayacaksınızdır.

Bir sonraki adım ise ‘body’ yani içerik kısmıdır. Bu alana HTML kodlamalarımızı ve yazılarımızı yazabiliriz. Bu alandaki yazabileceğimiz taglar vardır. Şimdi sizlere onları açıklayacağım;

<p> Yazımız… </p> : Bu tag paragraf anlamına gelmektedir. Bu tagın içerisinde ki yazımızı paragraf olarak sayfamıza yerleştirmektedir.
<b> Yazımın… </b> : Bu tag bold yani kalın yazı anlamına gelmektedir. Yazılarımızı kalın yazar.
<i> Yazımız… </i> : Bu tag italik yani eğik yazı anlamına gelmektedir.
<h1> Yazımız…</h1> : Bu tag başlık tagıdır. Yazımızı en büyük gösteren tagdır. Bu tag 1 den 6 ya kadardır. 6 ya doğru gittikçe yazı küçülür.
<center> Yazımız… </center> : Bu tag yazımızı ortalar.
<a href=”https://www.google.com”>Google</a> : Bu tag Google yazısına tıklandığında Google.com adresine gitmektedir. Bu link verme tagıdır.<br />
<img src=”resim.jpg” /> : Bu tag sayfamıza resim yüklemektedir. Resim yerleştirme tagıdır.
<img src=”resim.jpg” width=”250px” height=”250px” /> : Bu tagda width ve height kodları kullanılmıştır. Width kodu resmin genişliğini ayarlamaktadır. Height ise yüksekliğini.
<ul>
	<li>Yazı</li>
	<li>Yazı</li>
</ul>

<-- Yukarıda ki kodlama şekli ise sıralı liste şeklidir.--> 
<li>Yazı</li> <-- tagını yazdıkça liste sıralanır.
Bu listelemenin ul yerine ol yazarsanız o da yanlış hatırlamıyorsam yuvarlak şekillerde listeleme yapacaktır. 
Yuvarlak şekilleme dediğim yazıların başında nokta olur. Uygulamada daha iyi anlayacaksınız. -->

<table>
   <tr>
      <td>Yazı</td>
      <td>Yazı</td>
   </tr>
</table>

Yukarıdaki kodlama türü ise tablolamadır. ‘<table>’ tabloyu oluşturur. ‘<tr>’ satırı oluşturur. ‘<td>’ ise sütunları oluşturur. Yazılarımızı ‘<td>’ etiketinin içerisine yazarız.
<table> yani tablo oluşturmada birkaç tane kullanacağımız etiket vardır. Bunlar şöyledir;
<table border=”1”> : border etiketi tablo çizgilerinin kalınlığını belirler.
<table bordercolor=”red”> : bordercolor etiketi tablo çizgilerinin rengini belirler.
<table bgcolor=”blue”> : bgcolor etiketi tablonun arka plan rengini belirler.
<td colspan=”2”> : colspan etiketi tablo sütunlarının yatay olarak birleşmesini sağlar.
<td rowspan=”2”> : roswpan etiketi tablo sütunlarının dikey olarak birleşmesini sağlar.
<table width=”400px” height=”400px”> : width tablonun genişliğini, height ise yüksekliğini belirler.
<-- Bu makaleyi okuduktan sonra uygulama olarak kendiniz dener ve kendiniz değer vererek neler olduğunu çözmeye çalışırsanız çok daha iyi anlayacaksınızdır. -->