HTML, web sitelerinin temellerini oluşturan Hiper Metin İşaretleme Dilidir. İngilizce olarak Hypertext Markup Language şeklinde ifade edilmektedir. En son sürüm HTML 5.0’dır. 1980 yılında CERN’de görevli bilim insanı Tim Barners-Lee, CERN araştırmacıların birbirleriyle döküman ve belge paylaşabilmesi için bir sistem kurulması gerektiğine inandı. Bu sayede prototip olarak ENQUIRE sistmeini geliştirdi ve önerdi. 1990 yılına geldiğimizde, Tim HTML dilini geliştirdi ve World Wide Web (WWW) sistemini kurdu. Amacı CERN’de bilgi paylaşımı yapmaktı, ama HTML günümüzde hayatın vazgeçilmez ögelerinden birisidir. Bu kodu web tarayıcıları okur ve yorumlar. Bu sayede görsel,belge,video,yazı gibi paylaşımlar yapılır. CSS ve JavaScript ile birlikte kullanıldığı taktirde, dinamik web siteleri oluşur.
HTML Dersleri
- HTML yazılırken en dikkat edilmesi gereken şey W3C’dir. W3C Validator ile valid vermeyen web siteleri, bozuk HTML kodları içerir.
- <!DOCTYPE html> başlangıcı ile, tarayıcılara HTML 5 sürümünü kullandığımızı bildiririz.
- <head> içeriğine yazacağımız kodlar, web sitesinde görünmez ve arka planda işlem yapar.
- <body> web sitemizin içinde görünmesini istediğimiz yerleri eklediğimiz alandır.
- Her açılan nesne mutlaka kapatılmalıdır.
HTML Kodları
Burada son sürüm HTML kodlarını paylaşıyor olacağız, eski kodları burada bulamayacaksınız.
Yorum Bırakma
<!-- Kesinlikle SEO için önerilmeyen, yorum satırıdır, site içerisinde görünmez -->
Bağlantı Ekleme
Site içeriğinde yada başka bir siteye yönlendirme yapmak için kullanılır. Href hedef adresi içerir, Title ise bağlantı üstüne geldiğimizde kullanıcıya çıkan metindir.
<a href="https://bertanuzun.com/" title="HTML dersleri">HTML Dersleri</a>
ABBR Kodu
Kullanıcılara kısaltılmış bir metin hakkında bilgi vermek için kullanılır. HTML gibi kısaltmaların, uzun anlamları böylede açıklanabilir.
<abbr title="Hypertext Markup Language">HTML</abbr>
Görsel Ekleme
Resim eklemek için img tagını açarak işlem yaparız. Src: Resim adresi, alt: resim açıklaması, height: Yükseklik, width: Genişlik değerlerini içerir.
<img src"gorsel.png" alt"Test görseli" height="100" width="200"/>
Paragraf Yapısı
P modeli kullanılarak, paragraf oluşturulur.
<p>Bu alan paragraftır</p>
Meta Etiketleri
Meta etiketleri yardımıyla tarayıcılara ve botlara sayfamız hakkında bilgi verebiliriz. Örnek alt taraftaki kod ile sitemizin dili bildirilir.
<html lang="tr">
Yatay Çizgi
En sevimli çizgilerden biridir. Alt taraftaki kod ile sayfaya baştan sona yatay çizgi çekilir.
<hr />
Boşluk Bırakma
br yardımıyla boşluk bırakabiliriz.
<br />
Div (Alan)
Kodları gruplandırmak için kullanılan bir etikettir. Bu sayede üst,alt,yan gibi herhangi bir bölüm birbirine karıştırılmaz. Sayfaya oluşturduğunuz CSS’de yer alan isimler ile, Div’de yer alan class birbiriyle aynı olursa, sayfa bu görünümle çalışacaktır.
<div class="ust"> <div class="gorsel"> <img src="gorseltesti.png" alt="Test Görsel"/> </div> </div>
Stil Oluşturma
Css kodlarını, html içinde çalıştırmak için <style> yapısı kullanırız. Style komutlarının <head> içerisinde olması önerilir.
<style>Buraya yazacağınız stil kodlarıdır</style>
Stilleri Dışardan Çağırma
CSS kodları, html içinde çalışmak zorunda değildir, dışarıdan da alttaki kod ile çekilebilir.
<link rel="stylesheet" type="text/css" href="//bertanuzun.com/wp-content/cache/wpfc-minified/d4935hhi/i79m.css" media="all"/>
JavaScript Çağırma
<script> içerisine </script> yazacağınız kodlar ile html tarafında JavaScript çalıştırabilirsiniz. Dışarıdan çekmek için alt taraftaki kodu kullanın.
<script src='//bertanuzun.com/wp-content/cache/wpfc-minified/1em105pw/i79m.js' type="text/javascript"></script>
Form Girişleri
Bir input yada textarea çeşidi oluşturarak metin, paragraf, sayı, tarih, seçim, onaylama kutusu, bton gibi nesnelerin gönderilmesi mümkün olur. POST: güvenli bir iletim yapısı sağlar, site üzerinde herhangi bir parametre görünmez. GET: Güvenli olmayan bir iletişim sağlar, gönderi yapıldığında URL değişir. POST yapısı önerilir.
<form action="iletisim.php" method="post"> <p>İsminiz</p> <input type="text" name="isim"/> <p>Telefon Numaranız</p> <input type="tel" name="telefon"/> <p>Mesajınız<p> <textarea name="mesaj"></textarea> <input type="submit" value="İlet"/> </form>
Başlık Yapıları
HTML’de 1’den 6’ya başlık yapıları bulunmaktadır. Bu yapılar sitemizdeki konuların hiyerarşisini belirtir. SEO tarafında kullanımı çok önemlidir.
<h1>Ana Başlık</h1> <h2>Alt Başlık</h2>
Listeleme Elemanları
UL – Li kullanımı ile ile, imli yani noktalamalı listeleme yapılır. OL – Li kullanımı ile, numaralı listeleme yapılır.
<ul> <li>Noktalama Kullanarak Listeleme</li> <li>İkinci Sıra</li> </ul> <ol> <li>Numaralı Listeme</li> <li>İkinci Numara</li> </ol>
