HTML Kodları – Web Tasarım & Programlama
HTML DERSLERİ

HTML Kodları

HTML (Hyper Text Markup Language), Web sayfaları oluşturmak için kullanılan işaretleme dilidir.
Kullandığımız Chrome, Firefox , Opera İnternet Explorer gibi tarayıcılar HTML kodlarını işleyerek bu kodları web sayfasına dönüştürür.
Bir web sayfasında görüntülenen tablo, paragraf, başlık vb. tüm içerik HTML Etiketlerinden oluşur.

Bu derste HTML ile kendi Web Sayfanızı oluşturabileceksiniz. Çünkü HTML öğrenmek oldukça kolaydır.

Aşağıda en basit haliyle bir HTML belgesini görüyorsunuz.

 

Yukarıdaki HTML kodlarını açıklamaya geçmeden önce bir soruya cevap verelim.

HTML Kodları Nereye Yazılır?

Html kodu yazmak için bilgisayarlara bir program yüklemek gerekmez. Wordpad, not defteri  gibi bir metin editörü ile Html sayfaları oluşturabilirsiniz.

Kod yazmayı daha kolay hale getirmek için dreamwear, Sublime Text, Brackets veya Notepad++ gibi programlar kullanılabilir. Yazılan html kodları kaydedilirken;

htm, xhtml ve html gibi tarayıcıların anlayacağı şekilde kaydedilmesi gerekir.

Biz örneklerimizde metin düzenleyicisi olarak Brackets programını kullanacağız.

 

HTML Yazım Kuralları: 

HTML Etiketleri (tag) “<” ve “>” işaretleri arasına yazılır.

Bir HTML öğesi genellikle içeriğin arasına yerleştirilen bir başlangıç ​​etiketi ve bitiş etiketinden oluşur. Örnek: <p>…….</p>

Bitiş etiketi, başlangıç ​​etiketi gibi yazılır, ancak etiket adından önce bir “/” eklenir. “<html>  </html>” , “<p> </p>” vb.

HTML Belgesi:

Yukarıda en basit haliyle yazdığımız HTML kodlarını açıklayalım.

<!DOCTYPE html> bildirimi belgeyi HTML5 olarak tanımlar.

<html> </html> Tüm etiketleri saran, html kodu ile kodlama işleme yapılması gerektiğini belirten sayfanın başında açılarak sayfanın sonunda da kapatılan etiketin adıdır. <html> … </html> şeklinde açılmalı ve kapanmalıdır.

<head>  </head> etiketi belge hakkında meta bilgileri içerir. Bu bölümdeki yazılan hiç bir şey sayfada görünmez. Meta öğeleri genellikle sayfa açıklaması, anahtar kelimeler, belgenin yazarı, son değiştirilen ve diğer meta verileri belirtmek için kullanılır.

<title> </title> bu etiketler arasına yazdıklarınız tarayıcınızda başlık olarak görüntülenecektir.

<body> </body> Sayfamızın içeriği ile ilgili tüm HTML kodları  buraya yazılacaktır. Başlıklar, paragraflar, resimler, videolar, listeler vb..

 

Html belgesinin temel etiketlerini açıkladık. Artık içerik oluşturmak için kullanılan HTML Kodlarına (HTML Etiketleri) geçelim.

HTML Başlık Ekleme Kodları

HTML’ de başlıklar <h1> .. <h6> etiketleriyle oluşturulur.

Başlık boyutu <h1> den <h6> y< doğru küçülür. Önemli başlıklar için <h1> etiketi kullanılır. Aşağıdaki örnekte tüm başlıklara ait (<h1> den <h6> ya kadar) görünümleri inceleyebilirsiniz.

Html Kodları:

 

 

 

HTML Paragraf Ekleme

HTML sayfalarına paragraf eklemek için <p> </p> etiketi kullanılır.

HTML Paragraf Ekleme Kodları:

 

HTML Alt Satıra Geçme

HTML dokümanında alt satır geçmek için klavyeden ENTER tuşuna basmanız bir işe yaramayacaktır.

<br> etiketi satır sonu olduğunu belirtir. Eğer paragraf kullanmadan bir alt satıra geçmek isterseniz <br> etiketi kullanmalısınız.

HTML Alt Satıra Geçme Kodları:

 

HTML Biçimlendirme Etiketleri

HTML Biçimlendirme ve Metin Düzenleme Etiketleri

 

HTML <abbr> Etiketi:

HTML <ABBR> etiketi, içerdiği kelimenin, bir kelime veya kelime grubunun kısaltılmış hali olduğunu belirtir. Bununla birlikte baş harflerinden oluşan kısaltma tanımlanmasını sağlayan <ACRONYM> etiketine HTML 5‘te hiç yer verilmediği için her türlü kısaltmada alışkanlık açısından <ABBR> etiketi ile kullanılmalıdır.

HTML Sözdizimi ve Özellikler

<ABBR
id= Eşsiz kimliğini belirtir.
class= Sınıf adını belirtir.
style= CSS kuralları tanımlar.
title= Kısaltılmış kelimeyi veya kısaltma hakkında kısa bilgi belirtir.
lang= İçerdiği metnin lisanını belirtir.
dir= İçerdiği metnin yönünü belirtir.
>

HTML <address> Kodu

HTML <address> etiketi, bir belgenin veya makalenin iletişim bilgilerini (yazar / sahibi) tanımlar.
elemanı genellikle italik olarak görüntülenir. Çoğu tarayıcı, öğeden önce ve sonra bir satır sonu ekler.

HTML mailto ve tel bağlantısı oluşturma

mailto: link verilecek kişinin mailadresi yazılır. Bu özellik çalışması için bilgisayarda mail programının olması gerekir. Outlook gibi. Bağlantıya tıklandığında mail programında gönderilecek kişi e-posta adresi verilen bağlantıya göre doldurulacaktır.

tel:telefon numarası verilecek kişinin numarası yazılır. Bu özellik mobil cihazlarda çalışacaktır. Bu bağlantı üzerine tıklandığında  verilen telefon numarası çevrilecektir.

 

HTML Yorum Etiketi:

Yorum etiketleri, HTML kaynak koduna yorum eklemek için kullanılır.

Aşağıdaki sözdizimini kullanarak HTML kaynağınıza yorum ekleyebilirsiniz:

 

HTML Link Kodu Kullanma

Linkler neredeyse tüm web sayfalarında bulunur. Bağlantılar, kullanıcıların sayfadan sayfaya doğru yönlendirilmesi için kullanılır. Örneğin bu sitede tıkladığınız her menü link kullanılarak yönlendirilmektedir. Eğer bağlantının farklı pencerede açılması istenirse target=”_blank” özelliği eklenmelidir.

Örnek Kullanım:

Kodlar çalıştığında aşağıdaki gibi olacaktır.

Anasayfaya Gidin.

 

HTML Image – Resim Ekleme Kodu

Bir web sayfasında bulunan resimle sayfanın göze daha hoş görünmesini sağlayacaktır. HTM sayfasına resim eklemek için örnek kod;

HTML’de, görüntüler  <img> etiketi ile tanımlanır.

<img> etiketi diğer etiketler gibi </img> şeklinde kapatılmaz. Yukarıdaki kullanımı inceleyin.

src niteliği, görüntünün URL’sini (web adresi) belirtir.

alt niteliği bir görüntü için alternatif bir metin sağlar, Bu çeşitli nedenlerle olabilmektedir. Örneğin kullanıcı bir nedenden dolayı görüntüleyemiyorsa (yavaş bağlantı nedeniyle veya src niteliğinde bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa gibi..

Bu sebele alt özelliğine verilecek değer resmi açıklayıcı, resimle alakalı olmalıdır.

HTML Tablo Oluşturma Kodu

Bir HTML tablosu <table> </table> etiketi ile tanımlanır.

Her tablo satırı <tr> </tr> etiketi ile tanımlanır.

Tablo başlığı <th> </th> etiketi ile tanımlanır. Varsayılan olarak tablo başlıkları kalın ve ortalanmış yazılacaktır.

Tablo hücreleri tanımlamak için <td> </td> etiketleri kullanılır.

Örnek:

HTML Tablolar ve Tablo Örneklerine Buraya Tıklayarak ulaşabilirsiniz.

 

HTML Liste oluşturma Kodları:

HTML sayfalarında listeler Sıralı Liste ve Sırasız Liste olarak iki çeşittir.

HTML Sırasız Liste Oluşturma

Sırasız listeler <ul> </ul> etiketiyle tanımlanır. Daha sonra her bir eleman <li> </li> etiketleri arasında belirtilir. Type parametresi ile kullanacağınız madde işaretinin şeklini belirleyebilirsiniz. Type ile kullanılan parametreler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.

Örnek:

Ekran Çıktısı:

  • Kahve
  • Çay
  • Süt

Sırasız listelerde liste işareti çeşitli şekiller alabilir.

 

HTML Sıralı Liste Oluşturma

 

OL etiketi sıralı liste oluşturmak için kullanılır. Kelime işlemci programındaki numaralandırma
işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir.
Belirteceğiniz parametreler yardımı ile de istediğiniz harf, rakam veya roma rakamından
başlayarak sıralı listenizi oluşturabilirsiniz.

liste_html_1

Type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını
belirleyebiliriz.
“A” harfi yerine küçük “a” harfi yazılırsa sıralama a, b, c, …. şeklinde küçük harflerle
olacaktır.
liste_html_2

“I” harfi yerine küçük”i” harfi yazılırsa, sıralama i, ii, iii,…. şeklinde küçük roma
rakamları ile yapılacaktır.

liste_html_3

Sıralamanın her zaman “1” den veya “A” dan başlamasını istemeyebiliriz. Bu tür
durumlarda Start parametresi kullanılır. Start parametresinin her zaman sayı olması gerekmektedir. Örneğin sıralamayı “C” harfinden başlatmak istiyorsak start değerine “C” yazmak yerine “3” yazmak zorundayız.

liste_html_4

İç İçe Sıralı Liste Oluşturma

OL etiketlerini iç içe kullanarak listeler oluşturulabiliriz. Örneğimizde bilgisayar parçalarıyla ilgili basit bir liste gerçekleştirelim.

Ekran çıktısı:

liste_html_5

 

HTML Sayfasında Liste Oluşturma Örneklerine Buraya Tıklayarak ulaşabilirsiniz.

 

HTML Form Oluşturma Kodları

HTML‘ de kullanıcıdan giriş almak için kullanılan formları oluşturmak için aşağıdaki etiketleri kullanırız.

<form>  Etiketi :

<form>  etiketi kullanıcıdan  bilgi toplamak için kullanacağımız formu tanımlamak için kullanılmaktadır.

<input> Etiketi :

<input> etiketi en önemli Form etiketidir. <input> etiketi , tür özelliğine bağlı olarak çeşitli şekillerde görüntülenebilir.

<input> etiketinin type özelliğine göre bazı örnek kullanımları aşağıdaki gibidir.

Type Açıklama
<input type=”text”> Tek satırlık bir metin girişi alanı tanımlar.
<input type=”radio”> Bir çok seçenekten birini seçmek için bir radyo düğmesi tanımlar.
<input type=”submit”> Formu göndermek için bir gönder düğmesi tanımlar.

Şimdi bu türleri açıklayalım.

Text Girişi   <input type=”text”> :

Metin girişi için tek satırlık bir giriş alanı tanımlar.

Örnek:

Ekran Çıktısı:

Yukarıdaki örneği incelediğimizde input etiketinin type özelliğinin text olarak ayarlandığını, yani kullanıcıya tek satırlık bir veri girişi yapma imkanı sağlandığını görmekteyiz. name özelliği önemlidir. Her girdi alanının gönderilmesi gereken bir ad özniteliğine sahip olması gerekir. Yani bir isim vermek gerekir. Name özniteliği atlanırsa, o girdi alanının verileri gönderilemeyecektir.

Şifre Girişi <input type=”password”> :

 

<input type=”password”> şifre giriş alanı oluşturmak için kullanılır.

Ekran Çıktısı:

 

Radio Button Girişi  <input type=”radio”> :

Radyo düğmeleri, bir kullanıcının sınırlı sayıda seçimden birini seçmesine izin verir.  Aşağıdaki örneği ve ekran çıktısını inceleyelim.

Ekran Çıktısı :

CheckBox Girişi <input type=”checkbox”> :

 

Radio Button öğesinden farklı olarak birden fazla seçim yapılabilmesi gereken durumlarda kullanılmaktadır. Kullanımı ile ilgili kodlar ve ekran çıktısı aşağıdadır.

 

Button <input type=”button”> :

Buton oluşturmak için kullanılır.

Aşağıdaki butona tıklayarak yukarıdaki kod satırının ne işe yaradığını görebilirsiniz.

 

Gönder (Submit) Butonu   <input type=”submit”> :

Verilerin işleneceği sunucu sayfasına verileri göndermek amacıyla kullanılır. Formun işleneceği sayfa Form etiketinde action özelliğinde belirtilmelidir. Aşağıda Submit butonunun kullanımını gösteren bir örnek ve aekran çıktısı bulunmaktadır.

Ekran Çıktısı:

Reset Butonu <input type=”reset”> :

<input type=”reset”> tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama düğmesi tanımlar.

Örnek:

Ekran Çıktısı:

 

<form> etiketinin alabileceği bazı özellikleri inceleyelim.

Action özelliği :

<form action=”/action_page.php“>

Action özniteliği, form gönderilirken yapılacak işlemi tanımlar.
Normal olarak, kullanıcı, gönder düğmesini tıklattığında form verisi sunucu üzerindeki bir web sayfasına gönderilir.
Yukarıdaki örnekte, form verileri sunucudaki ‘/action_page.php’ adlı bir sayfaya gönderilir. Bu sayfa, form verilerini işleyen bir sunucu tarafı komut dosyası içerir.

Method Özelliği :

Method özniteliği, form verilerini gönderirken kullanılacak HTTP yöntemini belirtir. Bu yöntem GET yada POST olabilir.

 

Get ve Post Farkı Nedir ?

Form verisi gönderirken varsayılan yöntem GET’tir.
Ancak, GET kullanıldığında, gönderilen form verileri sayfa adres alanına görünür. Bu yüzden Hassas bilgileri gönderirken GET kullanılmamalıdır!
GET, boyut sınırlamaları da olduğu için kısa, hassas olmayan, miktarda veri için uygundur.

Form verileri hassas veya kişisel bilgiler içeriyorsa daima POST kullanılmalıdır. POST yöntemi, gönderilen form verilerini sayfa adresi alanına görüntülemez. Ayrıca POST hiçbir boyut sınırlamasına sahip değildir ve büyük miktarda veri göndermek için kullanılabilir.

Form Verilerini Gruplama <fieldset> :

Form içindeki elemanları gruplamak için kullanılır.

<fieldset> etiketi  ilgili verileri bir formda gruplamak için kullanılır.

<legend> etiketi ise <fieldset> öğesi için bir başlık tanımlar.

Örnek:

Ekran Çıktısı:

Select Etiketi <select>:

<select> etiketi açılır liste kutusu oluşturmak için kullanılır. kullanımı aşağıdaki gibidir.

Yukarıdaki HTML kodlarını yazıp sayfamızı görüntülediğimizde aşağıdaki ekran çıktısı oluşacaktır.

Kodları inceleyelim.

<option> etiketi seçim yapılabilecek elemanları tanımlamak için kullanılır.

Önceden seçilmiş bir seçeneği tanımlamak için, selected özelliği kullanılır. Yani yukarıdaki örnekteki listede varsayılan olarak Veri Tabanı öğesinin gelmesini istersek kodlarımızı aşağıdaki şekilde düzenlemeliyiz.

 

<textarea> Etiketi :

Formumuzda çok satırlı bir metin alanı kullanmamız gerektiğinde <textarea> etiketini kullanabiliriz. <textarea> etiketinde rows ve cols özellikleri kullanılabilir.

Rows özelliği, bir metin alanında görünür satır sayısını belirtir.

Cols özelliği, bir metin alanının görünür genişliğini belirtir.

Örnek:

 

HTML Form Örnekleri Sayfasına Gitmek İçin TIKLA

 

Yorum yap