Html Nedir?
İlk olarak Html bir websitesinin iskeleti denilebilir. Yeni başlayanlar için öğrenebilmesi en kolay ve bir websitenin ve sayfalarının oluşturulması için mutlaka kullanılması gereken bir biçimleme dilidir. Bunların dışında HTML hakkında bilinmesi gerekenler şunlardır:
- HTML bir programlama dili değil, bir işaretleme dilidir.
- HTML dosya uzantılarının .html ya da .htm şeklinde yazılması gereklidir.
- HTML kodlarının yazımı için Notepad, Notepad++ ,Sublime Text, Visual Studio Code gibi editörler kullanılabilir.
- HTML iyice öğrenildikten sonra mutlaka bilinmesi gereken diğer bir program CSS olmalıdır. HTML kodlarının ilgili tarayıcıda okunan şekline stil vermek için çoğunlukla CSS programı kullanılır.
- HTML, CSS ve JS ile web sitesi tasarlanabilir.Ancak dinamik ve daha kaliteli hale getirmek için ASP.net, JAVA gibi diller de kullanılmalıdır.
HTML Avantajları
- Tüm internet tarayıcılarında doğal (native) olarak çalışabilme,
- Kolay öğrenebilme,
- Açık kaynak koduna sahip olma,
- Tamamen ücretsiz olma,
- Çok sayıda kaynağa sahip olan devasa bir dil seçeneği sunma,
- World Wide Web Consortium (W3C) gibi resmî web standartları tarafından denetlenebilme,
- İstikrarlı ve düzgün biçimleme sunma,
- Node.js ve PHP gibi backend dilleri ile uyum içinde çalışabilme.
Html Dezavantajları
- Bazı tarayıcılar HTML kod sistemine eklenen yeni özellikleri tanımakta yavaş kalabilir.
- HTML, kullanıcıya mantık ekleyebilme imkânı vermez. Bu nedenle aynı ögelere (footer ve başlıklar gibi) sahip olunsa dahi fark etmeksizin tüm web siteleri ayrı ayrı oluşturulur.
- Sıklıkla statik durumdaki web sayfaları için kullanıldığından, dinamik işlemleri gerçekleştirmek için PHP, CSS ya da JavaScript gibi ayrı bir backend dili kullanılması gerekir.
Sonrasında html in sayfa yapısını anlamamız gerekiyor. Html de kodlar etiketler içerisine yazılır. Kullanılan kod ne olursa olsun tümü “<” ile başlar ve “>” ile bitmek zorundadır. Bazı basit HTML kodlarını kesinlikle bilmeniz gerekir.
<!DOCTYPE html>: Tüm HTML belgeleri bu kod ile başlamak zorundadır. Bu kod aslında sayfanın HTML5 formatına göre kodlandığını gösterir.
<html>: Kök etiket olarak da bilinen bu temel kullanımda tüm HTML kodları, bu iki etiket arasında tanımlanmak zorundadır.
<body>: Görünebilir tüm HTML kod parçalarının eklendiği etiket alanıdır.
<head>: Web sayfasının dili, başlığı ve diğer düzenlemelerinin yer aldığı etikettir.
<title>: Web sitesinin başlık alanını tanımlamak için kullanılır. <title> etiketi, <head> etiketleri arasında olmak zorundadır.
<meta charset=”utf-8″>: HTML kodunun Türkçe karakter desteği dahil olmak üzere pek çok dil seti içerdiğini belirtir.
Web sayfanızdaki içeriği okunabilir parçalara bölmenizi sağlayan unsur başlıklardır. HTML temelde 6 başlık ögesini destekler. Bunlar H1, H2, H3, H4, H5 ve H6‘dan oluşur. Örnek kullanım şekli şu şekilde gösterilir:
- <h1>Birinci başlık</h1>
- <h2>İkinci başlık</h2>
- <h3>Üçüncü başlık</h3>
- <h4>Dördüncü başlık</h4>
- <h5>Beşinci başlık</h5>
- <h6>Altıncı başlık</h6>
- Paragraf Kodu (<p>)
- Satır Sonu Kodu (<br>)
Web sayfasındaki metni yatay olarak bölmeye yarayan HTML kodudur. Kullanıldığı yerde metin bir alt satırdan devam eder. Diğer bir deyişle <br/> kullanıldığında, takip eden tüm kelimeler alt satırdan devam eder.
- <em> ve <i> etiketi
Bir metnin istenilen kısmını belirgin hale getirmek için kullanılır.<em> ve </em> etiketleri arasındaki kısım tipik olarak italik biçimde görüntülenir.(<i></i> etiketi de aynı işlevi yapar.)
- <s> ve <strike> etiketleri
Uygulandıkları metnin üzerine bir çizgi çizilmesini sağlarlar.
- <strong> ve <b> etiketi
İşaret edilen metni özellikle vurgulamak için kullanılır. Bu vurgulama bold (koyu) yazı karakteriyle gerçekleştirilir.
- <u> etiketi
İşaretlediği metnin altına bir alt çizgi çekilmesini sağlar.
- Resim Kodu (<img>)
<img> kodu, görüntüleri web sayfasına eklemek için kullanılır. Web sayfasına resim eklemek istediğinizde önce web sunucusuna yükleyin. Daha sonra yüklenen resmin dosya adına başvuru yapmak için bir <img> etiketi kullanabilirsiniz.
- Buton Kodu (<button>)
HTML buton kodu, sayfalarınızı ilgi çekici yapmak ve etkileşimli içerikler oluşturmak için kullanılır. JavaScript ve HTML renk kodları ile daha güçlü hale gelen bu kod, içeriklerinizde kullanıcılarla etkileşime girmenizi sağlar.
- Bağlantı Kodu (<a>)
Önemli HTML link verme kodlarından biri olan <a> kodu ile diğer içerikleriniz arasında da bağlantılar oluşturabilirsiniz. Bağlantı oluşturmak için, bağlantı kurmak istediğiniz içeriğin çevresine çevresine <a> ve </a> etiketleri eklemeniz gerekir. href in içine yönlendirmek istediğiniz bağlantıyı ekleyin.
Target özelliği
Target özelliği sayesinde, bağlanan web sitesinin nerede açılacağını belirleyebilirsiniz. Örneğin adresin yeni bir sayfada açılmasını sağlamak için aşağıdaki HTML kodunu girmek gerekir.
<a href="http://youtube.com.tr" target="_blank">Tıklayın..</a>Aşağıdaki tabloda, target özelliği ile kullanabileceğiniz parametrelerin listesi yer almaktadır:
| Özellik | Tanım |
| _blank | sayfayı yeni bir pencere ya da sekmede açar. |
| _self | sayfayı aynı çerçevede açar. (öntanımlı olan özelliktir) |
| _parent | sayfayı bir üst çerçevede açar. |
| _top | sayfayı en üst çerçevede açar. |
- Yatay Çizgi Kodu (<hr>)
Sayfa bölümlerini görsel olarak ayırmada yatay çizgi kodları kullanılır. Bu kod, sayfadaki geçerli konum üzerinden sağ kenar boşluğu arasında bir çizgi oluşturur. Böylece kelime veya cümle grupları yatay çizgiyle ayrılır.
<div>Kodu
HTML sayfası içinde bölüm oluşturmak için kullanılır. Tüm web site yapıları div’lerden oluşmaktadır. Yani div’ler için HTML’in yapı taşı diyebiliriz. div etiketi blok türündeki bir etikettir ve her zaman yeni satırda başlar.
- <span> kodu
Span etiketi, satır içi öğelerin gruplandırılması için kullanılır. Span etiketi tek başına görsel bir değişiklik yapmaz. Span div etiketine çok benzer, ancak div blok düzeyinde bir etiket ve span bir satır içi etikettir. div bir alt satırda başlar ama span olduğu yerde evam eder.
Listeler (Lists)
HTML, çeşitli türlerde listelerin oluşturulabilmesine olanak sağlar. Bu liste türleri,
- Numaralanmamış liste
- Numaralanmış liste
- Tanım listesi
şeklindedir.
Numaralanmamış liste
Numaralanmamış listeyi oluşturmak için <ul> ve </ul> etiketleri kullanılır. Bu etiketler arasına liste elemanlarını yerleştirmek için <li> etiketi kullanılır. Bu etiketi izleyen yere liste elemanı yerleştirilmelidir. <li> etiketinin </li> etiketiyle kapatılması zorunlu değildir.
Örneğin, aşağıdaki HTML kodunu birlikte oluşturalım:
<html>
<head>
<title>BASİT BİR HTML METNİ</title>
</head>
<body>
<h3>Programlama Dilleri</h3>
<ul>
<li>Fortran</li>
<li>Cobol</li>
<li>Basic</li>
<li>Pascal</li>
<li>C/C++</li>
</ul>
</body>
</html>Numaralanmış Listeler
Numaralanmış liste (numbered list ya da diğer adı ile ordered list (sıralanmış liste)) gerçekte numaralanmamış liste ile benzer yapıdadır. Tek fark, bu tip bir listede <ol> etiket ‘ının kullanılmasıdır. Diğer bir fark ise çıktıda görülür. Liste elemanlarına otomatik olarak bir numara verilmektedir.
Aşağıdaki HTML kodunu oluşturunuz:
<html>
<head>
<title>BASİT BİR HTML METNİ</title>
</head>
<body>
<h3>Programlama Dilleri</h3>
<ol>
<li>Fortran</li>
<li>Cobol</li>
<li>Basic</li>
<li>Pascal</li>
<li>C/C++</li>
</ol>
</body>
</html>
İç İçe Listeler
Listeleri iç içe de kullanabilirsiniz. Hatta, tek bir liste kalemi içinde iç içe listeler içeren paragraflar da düzenleyebilirsiniz.
Örneğin, aşağıdaki HTML kodunda dıştaki liste elemanları şehirlerdir. Her şehre ait ilçeler ise liste elemanı içinde yeni bir liste düzenlenerek belirtilmiştir.
<html>
<head>
<title>TÜRKİYE'DE BÜYÜK ŞEHİRLER VE İLÇELER</title>
</head>
<body>
<h3>TÜRKİYE-ŞEHİRLER</h3>
<ul>
<li>ISTANBUL'UN ÖNEMLİ İLÇELERİ</li>
<ul>
<li>Üsküdar</li>
<li>Eminönü</li>
<li>Kadıköy</li>
</ul>
<li>ANKARA'NIN ÖNEMLİ İLÇELERİ</li>
<ul>
<li>Çankaya</li>
<li>Yenimahalle</li>
</ul>
</ul>
</body>
</html>HTML ‘de Tablo etiketleri
- table etiketi: [code]<table> </table>[/code] HTML kodu içinde bir tablo tanımlar. Fakat border parametresi tanımlanmışsa tarayıcı tabloyu çevre sınırları ile görüntüler.
- caption etiketi: [code]<caption> </caption>[/code] tablonun başlığı için bir ifade tanımlar. Tablo başlığının öntanımlı konumu, tablonun üstünde ve ortalanmış durumdadır.
- tr etiketi: [code]<tr> </tr>[/code] Tablo içinde bir tablo satırını tanımlar.
- th etiketi: [code]<th> </th>[/code] bir tablo başlık hücresi tanımlar. Ön tanımlı olarak bu hücredeki metin ortalanmış ve koyu (bold) renklidir.
- td etiketi: [code]<td></td>[/code] Bir tablo hücresi tanımlar. Ön tanımlı olarak bu hücre içindeki metin sola yanaşık ve düşeyde ortalanmış vaziyettedir.
Şimdi ülkelerin nüfuslarını bir tabloda nasıl verdiğimize bakalım:
<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<!-- tabloya kenarlık ekliyoruz-->
<table border="2">
<!-- tablo tanımı başlangıcı -->
<caption> ÜLKELER VE NÜFUSLARI </caption>
<!-- başlık tanımı -->
<tr>
<!-- başlık satırı tanımı -->
<th>ÜLKE ADI</th>
<th>NÜFUSU</th>
</tr>
<!-- başlık satırı tanımının sonu -->
<tr>
<!-- ilk satır tanımı -->
<td>AVUSTURYA </td>
<td>8,000,000</td>
</tr>
<!-- ilk satır tanımının sonu -->
<tr>
<td>ALMANYA</td>
<td>80,000,000</td>
</tr>
<tr>
<!-- son satır tanımının başlangıcı -->
<td>TÜRKİYE</td>
<td>73,000,000</td>
</tr>
<!-- son satır tanımının sonu -->
</table>
<!-- tablo tanımının sonu -->
</body>
</html>HTML’de Form Etiketleri
<form> etiketi bir form tanımlar ve burada kullanılacak diğer etiketlerle birlikte kullanıcıdan veri alınmasına yardımcı olur.
En basit haliyle bir form oluşturalım:
<form>
<!-- Form elemanları -->
</form>Input etiketi
Input etiketi en önemli form elemanıdır. Tip belirteçlerini kullanarak aşağıda ayrıntısıyla anlattığımız elemanları kullanabilirsiniz:
Metin Alanı (Text Field): Kısa metin girişlerini yüklemek için kullanılabilecek olan alanlardır. İsimler, arama anahtarları adresleri girmek için kullanılır.
Seçme Listeleri (Select List): Seçme listesi, kullanıcının içinden bir ya da daha fazla elemanı seçebileceği veri listeleridir. Uzun fakat sonlu bir seçenekler listesi sunmak amacıyla kullanılabilir. Örneğin bir ülkeler listesinden ülke seçmek ya da bir yazıcılar listesinden yazıcı seçmek gibi eylemler bu elemanın kullanılmasını gerektirir.
Denetim Kutusu (Checkbox): Denetim kutusu, web sayfasını ziyaret eden İnternet kullanıcılarının bir veriler listesinden,
- bir tek veri
- birden çok veri seçmek ya da
- hiçbir veri seçmemek olanağı sağlayan kontrol nesnesidir.
Genellikle birden çok veriyi seçmek için kullanılır.
Radyo düğmesi (Radio button): Kullanıcılara tek bir seçim yapma olanağı veren kontrol nesnesidir.
Metin bölgesi (TextArea): Normalden uzun olan metinler için kullanılabilecek olan kontrol nesnesidir. Serbest biçimli cevaplar için kullanılabilir.
Submit ve Reset düğmeleri: Submit (Gönder) düğmesiyle form üzerine girilen bilgi işlenmesi için URL’i verilen sunucu sayfasına gönderilir. Reset (Sıfırla ya da Temizle) düğmesiyle form içindeki bilgi silinerek başlangıç konumuna getirilir.
Şimdi basit bir form örneğiyle kullanımlarına bakalım:
<!DOCTYPE html>
<html>
<head>
<title>İZLANDA</title>
</head>
<body>
<div align="center">
<font face="courier" size="6" color="red">
BENZERSİZ ŞEHİR İZLANDA TURLARI İÇİN<br>
BİZİ ARAYINIZ
</font>
</div>
<hr width="90%" size="5" noshade>
<form method="post" action="form_gonder.php">
<input type="text" name="adiniz">ADINIZ<br>
<input type="text" name="soyadiniz">SOYADINIZ<br>
<input type="text" name="adresiniz">ADRESİNİZ<br>
<input type="text" name="tel-no">TEL.NO<br>
<input type="submit" value="GÖNDER" align="center">
<input type="reset" value="SİL" align="center">
</form>
<hr width="90%" size="5" noshade>
<div align="center">
<address align="left">
<font face="Arial">
<br>ÖRNEK MAIL<br>
<a href="mailto:ornek@ornekmail.com.tr">ornek@ornekmail.com.tr</a>
<br>
Beylerbeyi Iskele Restaurant, 13 B, Arabacılar Sokağı<br>
İSTANBUL<br>
</font>
</address>
</div>
</body>
</html>